get it to compile reflex-web successfully

reflex/base.py

@@ -110,14 +110,15 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
             var: The variable to add a pydantic field for.
             default_value: The default value of the field
         """
+        var_name = var._var_name.split(".")[-1]
         new_field = ModelField.infer(
-            name=var._var_name,
+            name=var_name,
             value=default_value,
             annotation=var._var_type,
             class_validators=None,
             config=cls.__config__,  # type: ignore
         )
-        cls.__fields__.update({var._var_name: new_field})
+        cls.__fields__.update({var_name: new_field})
 
     def get_value(self, key: str) -> Any:
         """Get the value of a field.

reflex/components/chakra/navigation/link.py

@@ -25,7 +25,7 @@ class Link(ChakraComponent):
     text: Var[str]
 
     # What the link renders to.
-    as_: Var[str] = ImmutableVar(_var_name="{NextLink}", _var_type=str)
+    as_: Var[str] = ImmutableVar.create_safe("NextLink").to(str)
 
     # If true, the link will open in new tab.
     is_external: Var[bool]

reflex/components/core/upload.py

@@ -251,7 +251,7 @@ class Upload(MemoizationLeaf):
         # The file input to use.
         upload = Input.create(type="file")
         upload.special_props = {
-            ImmutableVar(_var_name="{...getInputProps()}", _var_type=None)
+            ImmutableVar(_var_name="...getInputProps()", _var_type=None)
         }
 
         # The dropzone to use.
@@ -261,7 +261,7 @@ class Upload(MemoizationLeaf):
             **{k: v for k, v in props.items() if k not in supported_props},
         )
         zone.special_props = {
-            ImmutableVar(_var_name="{...getRootProps()}", _var_type=None)
+            ImmutableVar(_var_name="...getRootProps()", _var_type=None)
         }
 
         # Create the component.

reflex/components/datadisplay/code.py

@@ -390,9 +390,23 @@ class CodeBlock(Component):
             The import dict.
         """
         imports_: ImportDict = {}
-        themes = re.findall(r'"(.*?)"', self.theme._var_name)
+
+        themeString = str(self.theme)
+
+        themes = re.findall(r'"(.*?)"', themeString)
         if not themes:
-            themes = [self.theme._var_name]
+            themes = [themeString]
+
+        if "oneLight" in themeString:
+            themes.append("light")
+        if "oneDark" in themeString:
+            themes.append("dark")
+        if "one-light" in themeString:
+            themes.append("light")
+        if "one-dark" in themeString:
+            themes.append("dark")
+
+        themes = sorted(set(themes))
 
         imports_.update(
             {
@@ -454,7 +468,10 @@ class CodeBlock(Component):
 
         if "theme" not in props:
             # Default color scheme responds to global color mode.
-            props["theme"] = color_mode_cond(light="one-light", dark="one-dark")
+            props["theme"] = color_mode_cond(
+                light=ImmutableVar.create_safe("oneLight"),
+                dark=ImmutableVar.create_safe("oneDark"),
+            )
 
         # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.

reflex/components/radix/primitives/accordion.py

@@ -103,10 +103,10 @@ class AccordionRoot(AccordionComponent):
     radius: Var[LiteralRadius]
 
     # The time in milliseconds to animate open and close
-    duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
+    duration: Var[int] = LiteralVar.create(DEFAULT_ANIMATION_DURATION)
 
     # The easing function to use for the animation.
-    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING, _var_is_string=True)
+    easing: Var[str] = LiteralVar.create(DEFAULT_ANIMATION_EASING)
 
     # Whether to show divider lines between items.
     show_dividers: Var[bool]

reflex/components/radix/themes/base.py

@@ -114,6 +114,11 @@ class RadixThemesComponent(Component):
         component.alias = "RadixThemes" + (
             component.tag or component.__class__.__name__
         )
+        # value = props.get("value")
+        # if value is not None and component.alias == "RadixThemesSelect.Root":
+        #     lv = LiteralVar.create(value)
+        #     print(repr(lv))
+        #     print(f"Warning: Value {value} is not used in {component.alias}.")
         return component
 
     @staticmethod

reflex/ivars/number.py

@@ -1456,6 +1456,7 @@ class ToBooleanVarOperation(BooleanVar):
             _original_value=value,
         )
 
+
 @dataclasses.dataclass(
     eq=False,
     frozen=True,

reflex/ivars/object.py

@@ -769,7 +769,7 @@ class ObjectItemOperation(ImmutableVar):
             The hash of the operation.
         """
         return hash((self.__class__.__name__, self._object, self._key))
-    
+
     def __post_init__(self):
         """Post initialization."""
         object.__delattr__(self, "_var_name")

reflex/ivars/sequence.py

@@ -528,7 +528,9 @@ class StringItemOperation(StringVar):
     _string: StringVar = dataclasses.field(
         default_factory=lambda: LiteralStringVar.create("")
     )
-    _index: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(0))
+    _index: NumberVar = dataclasses.field(
+        default_factory=lambda: LiteralNumberVar.create(0)
+    )
 
     @cached_property
     def _cached_var_name(self) -> str:
@@ -609,6 +611,7 @@ class StringItemOperation(StringVar):
             ),
         )
 
+
 @dataclasses.dataclass(
     eq=False,
     frozen=True,
@@ -1712,7 +1715,9 @@ class ArrayItemOperation(ImmutableVar):
     _array: ArrayVar = dataclasses.field(
         default_factory=lambda: LiteralArrayVar.create([])
     )
-    _index: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(0))
+    _index: NumberVar = dataclasses.field(
+        default_factory=lambda: LiteralNumberVar.create(0)
+    )
 
     def __post_init__(self):
         """Post-initialize the var."""
@@ -1805,9 +1810,15 @@ class ArrayItemOperation(ImmutableVar):
 class RangeOperation(ArrayVar):
     """Base class for immutable array vars that are the result of a range operation."""
 
-    _start: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(0))
+    _start: NumberVar = dataclasses.field(
-    _stop: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(0))
+        default_factory=lambda: LiteralNumberVar.create(0)
-    _step: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(1))
+    )
+    _stop: NumberVar = dataclasses.field(
+        default_factory=lambda: LiteralNumberVar.create(0)
+    )
+    _step: NumberVar = dataclasses.field(
+        default_factory=lambda: LiteralNumberVar.create(1)
+    )
 
     def __post_init__(self):
         """Post-initialize the var."""
@@ -2157,7 +2168,9 @@ class ArrayRepeatOperation(ArrayVar):
     _array: ArrayVar = dataclasses.field(
         default_factory=lambda: LiteralArrayVar.create([])
     )
-    _count: NumberVar = dataclasses.field(default_factory=lambda: LiteralNumberVar.create(0))
+    _count: NumberVar = dataclasses.field(
+        default_factory=lambda: LiteralNumberVar.create(0)
+    )
 
     def __post_init__(self):
         """Post-initialize the var."""

reflex/state.py

@@ -900,7 +900,9 @@ class BaseState(Base, ABC, extra=pydantic.Extra.allow):
 
         # create the variable based on name and type
         var = ImmutableVar(
-            _var_name=name, _var_type=type_, _var_data=ImmutableVarData.from_state(cls)
+            _var_name=format.format_state_name(cls.get_full_name()) + "." + name,
+            _var_type=type_,
+            _var_data=ImmutableVarData.from_state(cls),
         ).guess_type()
 
         # add the pydantic field dynamically (must be done before _init_var)

reflex/style.py

@@ -130,10 +130,11 @@ def convert_item(
         return str(style_item), style_item._get_all_var_data()
 
     # Otherwise, convert to Var to collapse VarData encoded in f-string.
-    new_var = ImmutableVar.create(style_item)
+    new_var = LiteralVar.create(style_item)
-    if new_var is not None and new_var._var_data:
+    var_data = new_var._get_all_var_data() if new_var is not None else None
+    if var_data:
         # The wrapped backtick is used to identify the Var for interpolation.
-        return f"`{str(new_var)}`", new_var._get_all_var_data()
+        return f"{str(new_var)}", var_data
 
     return style_item, None
 
@@ -263,10 +264,10 @@ class Style(dict):
             value: The value to set.
         """
         # Create a Var to collapse VarData encoded in f-string.
-        _var = ImmutableVar.create(value)
+        _var = LiteralVar.create(value)
         if _var is not None:
             # Carry the imports/hooks when setting a Var as a value.
-            self._var_data = VarData.merge(self._var_data, _var._var_data)
+            self._var_data = VarData.merge(self._var_data, _var._get_all_var_data())
         super().__setitem__(key, value)