Closes: #39 Add a way to specify the position of child components.

pyproject.toml

@@ -15,6 +15,7 @@ requests = "^2.29.0"
 [tool.poetry.group.dev.dependencies]
 ruff = "^0.0.263"
 black = "^23.3.0"
+commitizen = "^3.5.3"
 
 [build-system]
 requires = ["poetry-core"]

starfyre/component.py

@@ -1,4 +1,4 @@
-from dataclasses import dataclass
+from dataclasses import dataclass, field
 from typing import Any, Optional
 
 
@@ -18,13 +18,19 @@ class Component:
     css: str = ""
     js: str = ""
     # on any property change, rebuild the tree
+    original_name: str = ""
+
 
     def render(self):
         pass
 
     @property
     def is_text_component(self):
         return self.tag == "TEXT_NODE"
+
+    @property
+    def is_slot_component(self):
+        return self.tag == "slot"
 
     def __repr__(self):
         return f"<{self.tag}> {self.data} {self.children} </{self.tag}>"

starfyre/dom_methods.py

@@ -16,7 +16,7 @@ def assign_event_listeners(event_listener_name, event_listener):
     return html, js_event_listener
 
 
-def render_helper(component: Component) -> tuple[str, str, str]:
+def render_helper(component: Component) -> tuple[str, str, str]:    
     # Add event listeners
     def is_listener(name):
         return name.startswith("on")
@@ -91,9 +91,12 @@ def is_attribute(name):
     if not component.is_text_component:
         html += f"{prop_string} >"
 
+
+
     # Render children
     children = component.children
     # childElements.forEach(childElement => render(childElement, dom));
+
     for childElement in children:
         childElement.parentElement = component
         new_html, new_css, new_js = render_helper(childElement)
@@ -104,6 +107,7 @@ def is_attribute(name):
     html += f"</{tag}>\n"
 
     component.html = html
+
     return html, css, js
 
 

starfyre/parser.py

@@ -28,6 +28,7 @@ def __init__(self, component_local_variables, component_global_variables, css, j
         self.css = css
         self.js = js
         self.root_node = None
+
 
         # these are the event handlers and the props
         self.local_variables = component_local_variables
@@ -38,6 +39,7 @@ def __init__(self, component_local_variables, component_global_variables, css, j
         )
         # populate the dict with the components
         self.component_name = component_name
+        self.current_children = []
 
     generic_tags = {
         "html", "div", "p", "b", "span", "i", "button", "head", "link", "meta", "style", "title",
@@ -49,7 +51,7 @@ def __init__(self, component_local_variables, component_global_variables, css, j
         "picture", "object", "portal", "svg", "math", "canvas", "script", "noscript", "caption",
         "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "datalist",
         "fieldlist", "form", "input", "label", "legend", "meter", "optgroup", "option", "output",
-        "progress", "select", "textarea", "details", "dialog", "summary"
+        "progress", "select", "textarea", "details", "dialog", "summary", "slot"
     }
 
 
@@ -104,13 +106,16 @@ def handle_starttag(self, tag, attrs):
         # if the tag is not found in the generic tags but found in custom components
         if tag not in self.generic_tags and tag in self.components:
             component = self.components[tag]
-            tag = component.tag
+            component.original_name = tag
             component.props = {**component.props, **props}
             component.state = {**component.state, **state}
 
             component.event_listeners = {**component.event_listeners, **event_listeners}
             self.stack.append(component)
-
+            print("This is the stack", self.stack)
+            #SK TODO: Bug - we should check for if self.root_node is None:
+            if self.root_node is None:
+                self.root_node = component
             return
 
         # if the tag is not found in the generic tags and custom components
@@ -144,6 +149,7 @@ def handle_starttag(self, tag, attrs):
         # instead of assiging tags we assign uuids        
 
         self.stack.append(component)
+        pass
 
 
     def handle_endtag(self, tag):
@@ -154,21 +160,47 @@ def handle_endtag(self, tag):
         # we need to check if the tag is a default component or a custom component
         # if it is a custom component, we get the element from the custom components dict          
 
-        if tag not in self.generic_tags and tag in self.components:
-            component = self.components[tag]
-            tag = component.tag
+
 
         endtag_node = self.stack.pop()  
         self.current_depth -= 1
+
+        # Now, we check if `self.children` contains a slot component. If it does, we need to replace the slot component with the children of the slot component.
+        # @Suelen can you take this forward from here?
         if endtag_node.tag != "style" and endtag_node.tag != "script":
             if len(self.stack) > 0:
                 parent_node = self.stack[-1]      #this is last item/"top element" of stack
-                parent_node.children.append(endtag_node)
+                if endtag_node.original_name != "": #this node is for "custom" component, so we should check for <slot> tags 
+                    #process endtag_node children
+                    new_children = []
+                    for child_component in endtag_node.children:
+                        if child_component.tag == "slot":
+                            new_children.extend(self.current_children)
+                        else:
+                            new_children.append(child_component)
+                    endtag_node.children = new_children   
+                    self.current_children = []  
+
+
+                # if parent_node.original_name == endtag_node.original_name: #SK Why we need this condition? It is empty string by default
+                #     parent_node.children.extend(self.current_children)
+                #     self.current_children = []
+                # else:
+                #     self.current_children.append(endtag_node)
+                #SK : New code
+                self.current_children.append(endtag_node)
+
+                # if parent_node.is_custom:           #Checking if the parent node is the special custom tag 
+                    # endtag_node.is_slot_element = True
             else:
+                parent_node = endtag_node
                 self.root_node = endtag_node
-
+                self.root_node.children.extend(self.current_children)
+                self.current_children = []
+
+        pass
 
-        print("test end")    
+
 
     def is_signal(self, str):
         if not str:
@@ -192,7 +224,7 @@ def handle_data(self, data):
 
         # parsing starts here
         state = {}
-        parent_node = self.stack[-1]         
+        # parent_node = self.stack[-1]         
 
         uuid = uuid4()
         component_signal = ""
@@ -220,7 +252,8 @@ def handle_data(self, data):
                         match, self.local_variables, self.global_variables
                     )
                     if isinstance(eval_result, Component):
-                        self.stack[-1].children.append(eval_result)
+                        # this is a parent, right?
+                        self.children.append(eval_result) #TODO: Check with sanskar - this is a bug, we don't have self.children
                         return
                     elif isinstance(eval_result, str):
                         current_data = eval_result
@@ -280,15 +313,13 @@ def handle_data(self, data):
             )
         )
 
-        parent_node.children.append(wrapper_div_component) 
-
-        print(
-            "parent node",            
-            parent_node.tag,
-            parent_node.children,
-            "for the text node ",
-            data,
-        )
+        # self.children.append(wrapper_div_component)
+        if len(self.stack) > 0:
+                parent_node = self.stack[-1]
+                parent_node.children.append(wrapper_div_component)
+        else:
+            self.current_children.append(wrapper_div_component) 
+
 
     def get_stack(self):
         return self.stack

test-application/__init__.fyre

@@ -19,7 +19,7 @@ async def handle_on_click(e):
 
 <style>
   body {
-    background-color: red;
+    background-color: green;
   }
 </style>
 

test-application/css_file_test.css

@@ -1,3 +1,3 @@
 .import_test {
     padding-top: 10%;
-  }
+  }

test-application/parent.fyre

@@ -10,28 +10,28 @@ def ssr_request():
     return "No response"
 
 <pyml>
-    <span>
-
-      <div>
-        <h1> THIS IS MY FIRST HTML NODE </h1>
-        {ssr_request()} 
-        <p> THIS IS MY SECOND HTML NODE </p>
+    <span>    
+      <div>      
+        <h2> 1 This is just a test </h2>
+        <p> 2 HTML NODE </p>
         {ssr_request()}         
+        <p> 3 HTML NODE </p>
+        {ssr_request()}           
       </div>
       <b>      
         {use_parent_signal()}
       </b>
       <b>
         {get_parent_signal()}
       </b>
+      <slot></slot>
       <ul>
-        <li>a</li>
+        <li>a</li>        
         <li>b</li>
-        <li>c</li>
+        <li>c</li>        
       </ul>
       <div> 
-        This won't be re-rendered
-      </div>
-
+        This won't be re-rendered        
+      </div> 
     </span>
 </pyml>

test-quote/__init__.fyre

@@ -0,0 +1,8 @@
+from .daily_quote import daily_quote
+
+
+<pyml>  
+    <daily_quote hello='world'>
+        <p> Is a beautiful day </p>
+    </daily_quote> 
+</pyml>

test-quote/daily_quote.fyre

@@ -0,0 +1,8 @@
+<pyml>
+    <b>
+          You
+        <p> Are </p>       
+          Awesome               
+        <slot>This is slot</slot>
+    </b>
+</pyml>