revert to vars

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex-chakra"
-version = "0.6.0a6"
+version = "0.6.0a7"
 description = "reflex using chakra components"
 authors = [
     "Elijah Ahianyo <elijah@reflex.dev>"

reflex_chakra/components/base.py

@@ -8,7 +8,6 @@
 from typing import List, Literal
 
 from reflex.components.component import Component
-from reflex.ivars.base import ImmutableVar
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars import Var
 
@@ -99,7 +98,7 @@ def create(cls) -> Component:
             A new ChakraProvider component.
         """
         return super().create(
-            theme=ImmutableVar.create("extendTheme(theme)"),
+            theme=Var.create("extendTheme(theme)"),
         )
 
     def add_imports(self) -> ImportDict:

reflex_chakra/components/forms/checkbox.py

@@ -8,7 +8,6 @@
     LiteralTagSize,
 )
 from reflex.event import EventHandler
-from reflex.ivars.base import LiteralVar
 from reflex.vars import Var
 
 
@@ -51,7 +50,7 @@ class Checkbox(ChakraComponent):
     name: Var[str]
 
     # The value of the input field when checked (use is_checked prop for a bool)
-    value: Var[str] = LiteralVar.create("true")
+    value: Var[str] = Var.create("true")
 
     # The spacing between the checkbox and its label text (0.5rem)
     spacing: Var[str]

reflex_chakra/components/forms/multiselect.py

@@ -8,7 +8,6 @@
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
 from reflex.vars import Var
-from reflex.ivars import ImmutableVar, LiteralVar
 
 
 class Option(Base):
@@ -311,8 +310,8 @@ def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         return {
             **super().get_event_triggers(),
             EventTriggers.ON_CHANGE: (
-                lambda e0: [ImmutableVar.create_safe(f"{e0}.map(e => e.value)")]
-                if self.is_multi.equals(LiteralVar.create(True))
+                lambda e0: [Var.create(f"{e0}.map(e => e.value)", _var_is_string=False)]
+                if self.is_multi.equals(Var.create(True))
                 else lambda e0: [e0]
             ),
         }

reflex_chakra/components/forms/pininput.py

@@ -9,11 +9,9 @@
 from reflex.components.component import Component
 from reflex.components.tags.tag import Tag
 from reflex.event import EventHandler
-from reflex.ivars import ArrayVar
 from reflex.utils import format
 from reflex.utils.imports import ImportDict, merge_imports
 from reflex.vars import Var
-from reflex.ivars import ImmutableVar, ArrayVar
 
 
 class PinInput(ChakraComponent):
@@ -112,13 +110,14 @@ def _get_ref_hook(self) -> Optional[str]:
         """
         if self.id:
             ref = format.format_array_ref(self.id, None)
-            refs_declaration = ImmutableVar.create_safe(
-                f"{str(ArrayVar.range(self.length))}.map(() => useRef(null))",
+            refs_declaration = Var.create(
+                f"{str(Var.range(self.length))}.map(() => useRef(null))",
+                _var_is_string=False,
             )
             if ref:
                 return (
                     f"const {ref} = {str(refs_declaration)}; "
-                    f"{str(ImmutableVar.create_safe(ref).as_ref())} = {ref}"
+                    f"{str(Var.create(ref, _var_is_string=False).as_ref())} = {ref}"
                 )
             return super()._get_ref_hook()
 
@@ -189,7 +188,7 @@ def _create(i):
             return PinInputField.create(**props, index=i, key=i)
 
         return rx.foreach(  # type: ignore
-            ArrayVar.range(length),  # type: ignore
+            Var.range(length),  # type: ignore
             _create,
         )
 

reflex_chakra/components/forms/rangeslider.py

@@ -9,7 +9,6 @@
 from reflex.event import EventHandler
 from reflex.utils import format
 from reflex.vars import Var
-from reflex.ivars import ImmutableVar
 
 
 class RangeSlider(ChakraComponent):
@@ -78,7 +77,7 @@ def _get_ref_hook(self) -> Optional[str]:
             if ref:
                 return (
                     f"const {ref} = Array.from({{length:2}}, () => useRef(null)); "
-                    f"{str(ImmutableVar.create_safe(ref).as_ref())} = {ref}"
+                    f"{str(Var.create(ref, _var_is_string=False).as_ref())} = {ref}"
                 )
             return super()._get_ref_hook()
 

reflex_chakra/components/forms/switch.py

@@ -4,7 +4,6 @@
 
 from reflex_chakra.components import ChakraComponent, LiteralColorScheme
 from reflex.event import EventHandler
-from reflex.ivars.base import LiteralVar
 from reflex.vars import Var
 
 
@@ -35,7 +34,7 @@ class Switch(ChakraComponent):
     name: Var[str]
 
     # The value of the input field when checked (use is_checked prop for a bool)
-    value: Var[str] = LiteralVar.create("true")
+    value: Var[str] = Var.create("true")
 
     # The spacing between the switch and its label text (0.5rem)
     spacing: Var[str]

reflex_chakra/components/navigation/link.py

@@ -3,7 +3,6 @@
 from reflex_chakra.components import ChakraComponent
 from reflex.components.component import Component
 from reflex.components.next.link import NextLink
-from reflex.ivars.base import ImmutableVar
 from reflex.utils.imports import ImportDict
 from reflex.vars import Var
 
@@ -25,7 +24,7 @@ class Link(ChakraComponent):
     text: Var[str]
 
     # What the link renders to.
-    as_: Var[Component] = ImmutableVar(_var_name="NextLink", _var_type=Component)
+    as_: Var[Component] = Var.create("NextLink").to(Component)
 
     # If true, the link will open in new tab.
     is_external: Var[bool]