Fix cond component render (#639)

pynecone/components/layout/cond.py

@@ -22,13 +22,10 @@ class Cond(Component):
     # The component to render if the cond is false.
     comp2: Component
 
-    # Whether the cond is within another cond.
-    is_nested: bool = False
-
     @classmethod
     def create(
         cls, cond: Var, comp1: Component, comp2: Optional[Component] = None
-    ) -> Cond:
+    ) -> Component:
         """Create a conditional component.
 
         Args:
@@ -39,31 +36,23 @@ class Cond(Component):
         Returns:
             The conditional component.
         """
-        from pynecone.components.layout.foreach import Foreach
+        # Wrap everything in fragments.
-
+        comp1 = Fragment.create(comp1)
-        if comp2 is None:
+        comp2 = Fragment.create(comp2) if comp2 else Fragment.create()
-            comp2 = Fragment.create()
+        return Fragment.create(
-        if isinstance(comp1, Foreach):
+            cls(
-            comp1 = Fragment.create(comp1)
+                cond=cond,
-        if isinstance(comp2, Foreach):
+                comp1=comp1,
-            comp2 = Fragment.create(comp2)
+                comp2=comp2,
-        if isinstance(comp1, Cond):
+                children=[comp1, comp2],
-            comp1.is_nested = True
+            )
-        if isinstance(comp2, Cond):
+        )
-            comp2.is_nested = True
-        return cls(
-            cond=cond,
-            comp1=comp1,
-            comp2=comp2,
-            children=[comp1, comp2],
-        )  # type: ignore
 
     def _render(self) -> Tag:
         return CondTag(
             cond=self.cond,
             true_value=self.comp1.render(),
             false_value=self.comp2.render(),
-            is_nested=self.is_nested,
         )
 
 

pynecone/components/tags/cond_tag.py

@@ -19,9 +19,6 @@ class CondTag(Tag):
     # The code to render if the condition is false.
     false_value: str
 
-    # Whether the cond tag is nested.
-    is_nested: bool = False
-
     def __str__(self) -> str:
         """Render the tag as a React string.
 
@@ -33,5 +30,4 @@ class CondTag(Tag):
             cond=self.cond.full_name,
             true_value=self.true_value,
             false_value=self.false_value,
-            is_nested=self.is_nested,
         )

pynecone/utils.py

@@ -1107,7 +1107,6 @@ def format_cond(
     cond: str,
     true_value: str,
     false_value: str = '""',
-    is_nested: bool = False,
     is_prop=False,
 ) -> str:
     """Format a conditional expression.
@@ -1116,7 +1115,6 @@ def format_cond(
         cond: The cond.
         true_value: The value to return if the cond is true.
         false_value: The value to return if the cond is false.
-        is_nested: Whether the cond is nested.
         is_prop: Whether the cond is a prop
 
     Returns:
@@ -1125,17 +1123,15 @@ def format_cond(
     # Import here to avoid circular imports.
     from pynecone.var import Var
 
+    # Format prop conds.
     if is_prop:
         prop1 = Var.create(true_value, is_string=type(true_value) == str)
         prop2 = Var.create(false_value, is_string=type(false_value) == str)
         assert prop1 is not None and prop2 is not None, "Invalid prop values"
-        expr = f"{cond} ? {prop1} : {prop2}".replace("{", "").replace("}", "")
+        return f"{cond} ? {prop1} : {prop2}".replace("{", "").replace("}", "")
-    else:
-        expr = f"{cond} ? {true_value} : {false_value}"
 
-    if not is_nested:
+    # Format component conds.
-        expr = wrap(expr, "{")
+    return wrap(f"{cond} ? {true_value} : {false_value}", "{")
-    return expr
 
 
 def get_event_handler_parts(handler: EventHandler) -> Tuple[str, str]:

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "pynecone"
-version = "0.1.18"
+version = "0.1.19"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

tests/components/layout/test_cond.py

@@ -28,7 +28,7 @@ def cond_state(request):
     indirect=True,
 )
 def test_validate_cond(cond_state: pc.Var):
-    """Test if cond can be a pc.Val with any values.
+    """Test if cond can be a pc.Var with any values.
 
     Args:
         cond_state: A fixture.
@@ -40,9 +40,9 @@ def test_validate_cond(cond_state: pc.Var):
     )
 
     assert str(cond_component) == (
-        "{cond_state.value ? "
+        "<Fragment>{cond_state.value ? "
-        "<Text>{`cond is True`}</Text> : "
+        "<Fragment><Text>{`cond is True`}</Text></Fragment> : "
-        "<Text>{`cond is False`}</Text>}"
+        "<Fragment><Text>{`cond is False`}</Text></Fragment>}</Fragment>"
     )
 
 
@@ -78,9 +78,11 @@ def test_cond_no_else():
     """Test if cond can be used without else."""
     # Components should support the use of cond without else
     comp = cond(True, Text.create("hello"))
+    assert isinstance(comp, Fragment)
+    comp = comp.children[0]
     assert isinstance(comp, Cond)
     assert comp.cond == True  # noqa
-    assert comp.comp1 == Text.create("hello")
+    assert comp.comp1 == Fragment.create(Text.create("hello"))
     assert comp.comp2 == Fragment.create()
 
     # Props do not support the use of cond without else