Render and create component fix

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "starfyre"
-version = "0.1.0"
+version = "0.2.0"
 edition = "2018"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

build.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 
 RUSTUP_TOOLCHAIN=nightly maturin build --target wasm32-unknown-emscripten -i python3.10 --out dist
-cp dist/starfyre-0.1.0-cp310-cp310-emscripten_3_1_27_wasm32.whl test-application/starfyre-dist
+cp dist/starfyre*.whl test-application/starfyre-dist

starfyre/__init__.py

@@ -1,10 +1,12 @@
 import inspect
 import re
+from uuid import uuid4
 
-from .parser import Parser
+from .parser import Parser, RootParser
 from .component import Component
 from .dom_methods import render
 from .store import create_signal
+from .global_components import components
 
 import js
 from starfyre.starfyre import sum_as_string, DomNode
@@ -42,43 +44,18 @@ def return_state(possible_state_names, local_functions, global_functions):
             pass
     return states
 
-
 def create_component(jsx):
-    globals = inspect.currentframe().f_back.f_globals.copy()
-    locals = inspect.currentframe().f_back.f_locals
-    local_functions = extract_functions(locals)
-    global_functions = extract_functions(globals)
-
-    # extract event listeners name from jsx
-
-    event_listeners_names = re.findall(r"on\w+=\{(\w+)}", jsx)
-    event_listeners = return_event_listensers(
-        event_listeners_names, local_functions, global_functions
-    )
+    locals_variables = inspect.currentframe().f_back.f_locals.copy()
+    global_variables = inspect.currentframe().f_back.f_globals.copy()
 
-    jsx_variables = re.findall(r"\{(\w+)\}", jsx)
-    possible_states = [
-        el for el in jsx_variables if el not in event_listeners
-    ]  # this can be props or states
-    state = return_state(possible_states, local_functions, global_functions)
-
-    # print(inspect.getframeinfo(inspect.currentframe().f_back))
-    print("These are the locals", local_functions)
-    print("These are the global_functions", global_functions)
-
-    parser = Parser(state)
+    parser = RootParser(locals_variables, global_variables)
     jsx = jsx.strip("\n").strip()
     parser.feed(jsx)
     parser.close()
-
     pytml_tree = parser.parse()
     pytml_root = pytml_tree[0]
-    pytml_root.event_listeners = event_listeners
-    pytml_root.state = state
-    new_root = Component("div", {}, [pytml_root], {}, {})
-    dom_node = DomNode("hello", {}, [pytml_root], {}, {})
-    print("This is the dom node ", dom_node)
-    return new_root
+    print("This is the pytml root root", pytml_root)
+    return pytml_root
 
 
 __all__ = [

starfyre/component.py

@@ -1,6 +1,7 @@
 from abc import abstractmethod
 from typing import Optional
 import js
+from uuid import uuid4
 from html.parser import HTMLParser
 
 from dataclasses import dataclass
@@ -51,6 +52,7 @@ class Component:
     data: str = ""
     parentDom: js.Element = None
     dom: js.Element = None
+    uuid = uuid4()
     # on any property change, rebuild the tree
 
     def render(self):

starfyre/dom_methods.py

@@ -1,72 +1,79 @@
+from typing import Optional
 import js
 from .component import Component
 from pyodide import create_proxy
 from functools import partial
 import re
 from starfyre.starfyre import DomNode
 
+def assign_event_listeners(component: Component, event_listeners):
+    for event_listener_name, event_listener in event_listeners.items():
+        event_type = event_listener_name.lower()[2:]
+        print("Assigning event listeners to the component", component, event_type, event_listener)
+        component.dom.addEventListener(event_type, create_proxy(event_listener))
 
-def render(element: Component, parentDom: js.Element):
-    element.parentDom = parentDom
-    dom_node = DomNode(element.tag, element.props, element.children, element.event_listeners, element.state or {})
-    dom_node.set_parent_element(parentDom)
-    print(dom_node)
 
-    tag = element.tag
-    props = element.props
-    state = element.state
-    data = element.data
+def render(component: Component):
+    parentElement = component.parentDom
+    if parentElement is None:
+        parentElement = js.document.createElement("div")
+        parentElement.id = "root"
+        js.document.body.appendChild(parentElement)
+
+
+    component.parentDom = parentElement
+    # we will add rust later
+    # dom_node = DomNode(element.tag, element.props, element.children, element.event_listeners, element.state or {})
+    # dom_node.set_parent_element(parentDom)
+    # print(dom_node)
+
+    tag = component.tag
+    props = component.props
+    state = component.state
+    data = component.data
     print(data)
 
     # Create DOM element
-    if element.is_text_component:
+    if component.is_text_component:
         # find all the names in "{}" and print them
         matches = re.findall(r"{(.*?)}", data)
         for match in matches:
             if match in state:
-                print(match, state[match])
                 function = state[match]
-                function = partial(function, element)
-
-                data = element.data.replace(
+                function = partial(function, component)
+                data = component.data.replace(
                     f"{{{ match }}}", str(function())
                 )
-
         dom = js.document.createTextNode(data)
-        print("Text Node", element)
+        print("Text Node", component)
     else:
         dom = js.document.createElement(tag)
 
-    element.dom = dom
+    component.dom = dom
 
     # Add event listeners
     isListener = lambda name: name.startswith("on")
     isAttribute = lambda name: not isListener(name) and name != "children"
 
-    # set event listeners
-    for event_name, action in props.items():
-        if isListener(event_name):
-            eventType = event_name.lower()[2:]
-            action = action.replace("{", "").replace("}", "")
-
-            if action in element.event_listeners:
-                event_listener = element.event_listeners[action]
-                dom.addEventListener(eventType, create_proxy(event_listener))
 
+    assign_event_listeners(component, component.event_listeners)
     # set attributes
 
     for name in props:
         if isAttribute(name):
             dom.setAttribute(name, props[name])
 
     # Render children
-    children = element.children
+    children = component.children
     # childElements.forEach(childElement => render(childElement, dom));
     for childElement in children:
-        render(childElement, dom)
+        childElement.parentDom = dom
+        render(childElement)
 
     # // Append to parent
-    if parentDom.contains(dom):
-        parentDom.replaceChild(dom, parentDom.childNodes[0])
+    # need to apply batch updates here
+    # also create a tree of dom nodes in the first place
+    if parentElement.contains(dom):
+        parentElement.replaceChild(dom, parentElement.childNodes[0])
     else:
-        parentDom.appendChild(dom)
+        parentElement.appendChild(dom)

starfyre/global_components.py

@@ -0,0 +1,8 @@
+from collections import defaultdict
+
+components = defaultdict(list)
+new_global_components = dict()
+
+
+
+__all__ = ['components']