clean pylist.py and add a very hacky sync between list items and it's rendered versions

pyscriptjs/examples/pylist.py

@@ -1,11 +1,4 @@
 from datetime import datetime as dt
-from xml.dom.pulldom import END_ELEMENT
-from js import console, HTMLElement, document
-
-
-class PyList(PyListTemplate):
-  pass
-
 
 class PyItem(PyItemTemplate):
   def on_click(self, evt=None):
@@ -14,8 +7,10 @@ class PyItem(PyItemTemplate):
   
     self.select('input').element.checked = self.data['done']
     
+class PyList(PyListTemplate):
+  item_class = PyItem
 
 def add_task(*ags, **kws):
   task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }
-  myList.add(PyItem(task, labels=['content'], state_key="done"))
+  myList.add(task, labels=['content'], state_key="done")
   new_task_content.clear()

pyscriptjs/src/components/pyrepl.ts

@@ -199,6 +199,10 @@ export class PyRepl extends BaseEvalElement {
       }
 
     postEvaluate(): void {
+
+      this.outputElement.hidden =  false;
+      this.outputElement.style.display = 'block';
+
       if (this.hasAttribute('auto-generate')) {
         let nextExecId = parseInt(this.getAttribute('exec-id')) + 1;
         const newPyRepl = document.createElement("py-repl");

pyscriptjs/src/interpreter.ts

@@ -6,8 +6,9 @@ let pyodideReadyPromise;
 let pyodide;
 
 let additional_definitions = `
-from js import document, setInterval, console
+from js import document, setInterval, console, setTimeout
 import micropip
+import time
 import asyncio
 import io, base64, sys
 
@@ -195,7 +196,7 @@ class PyItemTemplate(Element):
   def _post_append(self):
     pass
 
-  def strike(self, value):
+  def strike(self, value, extra=None):
     if value:
       self.add_class("line-through")
     else:
@@ -222,14 +223,32 @@ class PyListTemplate:
     return [c.data for c in self._children]
 
   def render_children(self):
-    return [c.element.innerHTML.replace("\\n", "") for c in self._children]
+    out = []
+    binds = {}
+    for i, c in enumerate(self._children):
+        txt = c.element.innerHTML
+        rnd = str(time.time()).replace(".", "")[-5:]
+        new_id = f"{c.element.id}-{i}-{rnd}"
+        binds[new_id] = c.element.id
+        txt = txt.replace(">", f" id='{new_id}'>")
+        print(txt)
+
+    def foo(evt):
+        console.log(evt)
+        evtEl = evt.srcElement
+        srcEl = Element(binds[evtEl.id])
+        srcEl.element.onclick()
+        evtEl.classList = srcEl.element.classList
+
+    for new_id, old_id in binds.items():
+        Element(new_id).element.onclick = foo
 
   def connect(self):
-    self.md = main_div = document.createElement('div');
+    self.md = main_div = document.createElement('div')
     main_div.id = self._id + "-list-tasks-container"
 
     if self.theme:
-      self.theme.theme_it(main_div)
+        self.theme.theme_it(main_div)
 
     self.parent.appendChild(main_div)