reflex 0.4.1a1__py3-none-any.whl → 0.4.2a1__py3-none-any.whl

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -5,7 +5,7 @@ import '/styles/styles.css'
 {% endblock %}
 
 {% block declaration %}
-import { EventLoopProvider, StateProvider } from "/utils/context.js";
+import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
 
 
@@ -28,7 +28,7 @@ function AppWrap({children}) {
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <ThemeProvider defaultTheme="light" storageKey="chakra-ui-color-mode" attribute="class">
+    <ThemeProvider defaultTheme={ defaultColorMode } storageKey="chakra-ui-color-mode" attribute="class">
       <AppWrap>
         <StateProvider>
           <EventLoopProvider>

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -7,6 +7,7 @@ export const initialState = {{ initial_state|json_dumps }}
 export const initialState = {}
 {% endif %}
 
+export const defaultColorMode = "{{ default_color_mode }}"
 export const ColorModeContext = createContext(null);
 export const UploadFilesContext = createContext(null);
 export const DispatchContext = createContext(null);
@@ -23,13 +24,19 @@ export const clientStorage = {}
 {% endif %}
 
 {% if state_name %}
-export const onLoadInternalEvent = () => [Event('{{state_name}}.{{const.on_load_internal}}')]
+export const state_name = "{{state_name}}"
+export const onLoadInternalEvent = () => [
+    Event('{{state_name}}.{{const.update_vars_internal}}', {vars: hydrateClientStorage(clientStorage)}),
+    Event('{{state_name}}.{{const.on_load_internal}}')
+]
 
 export const initialEvents = () => [
-    Event('{{state_name}}.{{const.hydrate}}', hydrateClientStorage(clientStorage)),
+    Event('{{state_name}}.{{const.hydrate}}'),
     ...onLoadInternalEvent()
 ]
 {% else %}
+export const state_name = undefined
+
 export const onLoadInternalEvent = () => []
 
 export const initialEvents = () => []

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,13 +1,15 @@
 import { useTheme } from "next-themes"
 import { useEffect, useState } from "react"
-import { ColorModeContext } from "/utils/context.js"
+import { ColorModeContext, defaultColorMode } from "/utils/context.js"
 
 
 export default function RadixThemesColorModeProvider({ children }) {
     const {theme, setTheme} = useTheme()
-    const [colorMode, setColorMode] = useState("light")
+    const [colorMode, setColorMode] = useState(defaultColorMode)
   
-    useEffect(() => setColorMode(theme), [theme])
+    useEffect(() => {
+      setColorMode(theme)
+    }, [theme])
   
     const toggleColorMode = () => {
       setTheme(theme === "light" ? "dark" : "light")

reflex/.templates/web/utils/state.js

@@ -6,7 +6,7 @@ import env from "/env.json";
 import Cookies from "universal-cookie";
 import { useEffect, useReducer, useRef, useState } from "react";
 import Router, { useRouter } from "next/router";
-import { initialEvents, initialState, onLoadInternalEvent } from "utils/context.js"
+import { initialEvents, initialState, onLoadInternalEvent, state_name } from "utils/context.js"
 
 // Endpoint URLs.
 const EVENTURL = env.EVENT
@@ -40,7 +40,7 @@ const upload_controllers = {};
  * Taken from: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
  * @returns A UUID.
  */
-const generateUUID = () => {
+export const generateUUID = () => {
   let d = new Date().getTime(),
     d2 = (performance && performance.now && performance.now() * 1000) || 0;
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
@@ -441,17 +441,14 @@ export const Event = (name, payload = {}, handler = null) => {
  * @returns payload dict of client storage values
  */
 export const hydrateClientStorage = (client_storage) => {
-  const client_storage_values = {
-    "cookies": {},
-    "local_storage": {}
-  }
+  const client_storage_values = {}
   if (client_storage.cookies) {
     for (const state_key in client_storage.cookies) {
       const cookie_options = client_storage.cookies[state_key]
       const cookie_name = cookie_options.name || state_key
       const cookie_value = cookies.get(cookie_name)
       if (cookie_value !== undefined) {
-        client_storage_values.cookies[state_key] = cookies.get(cookie_name)
+        client_storage_values[state_key] = cookies.get(cookie_name)
       }
     }
   }
@@ -460,7 +457,7 @@ export const hydrateClientStorage = (client_storage) => {
       const options = client_storage.local_storage[state_key]
       const local_storage_value = localStorage.getItem(options.name || state_key)
       if (local_storage_value !== null) {
-        client_storage_values.local_storage[state_key] = local_storage_value
+        client_storage_values[state_key] = local_storage_value
       }
     }
   }
@@ -568,6 +565,36 @@ export const useEventLoop = (
     }
   })
 
+
+  // localStorage event handling
+  useEffect(() => {
+    const storage_to_state_map = {};
+
+    if (client_storage.local_storage && typeof window !== "undefined") {
+      for (const state_key in client_storage.local_storage) {
+        const options = client_storage.local_storage[state_key];
+        if (options.sync) {
+          const local_storage_value_key = options.name || state_key;
+          storage_to_state_map[local_storage_value_key] = state_key;
+        }
+      }
+    }
+
+    // e is StorageEvent
+    const handleStorage = (e) => {
+      if (storage_to_state_map[e.key]) {
+        const vars = {}
+        vars[storage_to_state_map[e.key]] = e.newValue
+        const event = Event(`${state_name}.update_vars_internal`, {vars: vars})
+        addEvents([event], e);
+      }
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  });
+
+
   // Route after the initial page hydration.
   useEffect(() => {
     const change_complete = () => addEvents(onLoadInternalEvent())

reflex/app.py

@@ -785,7 +785,7 @@ class App(Base):
             submit_work(compiler.compile_theme, style=self.style)
 
             # Compile the contexts.
-            submit_work(compiler.compile_contexts, self.state)
+            submit_work(compiler.compile_contexts, self.state, self.theme)
 
             # Compile the Tailwind config.
             if config.tailwind is not None:
@@ -926,7 +926,7 @@ async def process(
         }
     )
     # Get the state for the session exclusively.
-    async with app.state_manager.modify_state(event.token) as state:
+    async with app.state_manager.modify_state(event.substate_token) as state:
         # re-assign only when the value is different
         if state.router_data != router_data:
             # assignment will recurse into substates and force recalculation of
@@ -1002,7 +1002,8 @@ def upload(app: App):
             )
 
         # Get the state for the session.
-        state = await app.state_manager.get_state(token)
+        substate_token = token + "_" + handler.rpartition(".")[0]
+        state = await app.state_manager.get_state(substate_token)
 
         # get the current session ID
         # get the current state(parent state/substate)
@@ -1049,7 +1050,7 @@ def upload(app: App):
                 Each state update as JSON followed by a new line.
             """
             # Process the event.
-            async with app.state_manager.modify_state(token) as state:
+            async with app.state_manager.modify_state(event.substate_token) as state:
                 async for update in state._process(event):
                     # Postprocess the event.
                     update = await app.postprocess(state, event, update)

reflex/base.py

@@ -115,6 +115,10 @@ class Base(pydantic.BaseModel):
         Returns:
             The value of the field.
         """
+        if isinstance(key, str) and key in self.__fields__:
+            # Seems like this function signature was wrong all along?
+            # If the user wants a field that we know of, get it and pass it off to _get_value
+            key = getattr(self, key)
         return self._get_value(
             key,
             to_dict=True,

reflex/compiler/compiler.py

@@ -16,6 +16,7 @@ from reflex.components.component import (
 )
 from reflex.config import get_config
 from reflex.state import BaseState
+from reflex.style import LIGHT_COLOR_MODE
 from reflex.utils.imports import ImportVar
 
 
@@ -67,11 +68,12 @@ def _is_dev_mode() -> bool:
     return os.environ.get("REFLEX_ENV_MODE", "dev") == "dev"
 
 
-def _compile_contexts(state: Optional[Type[BaseState]]) -> str:
+def _compile_contexts(state: Optional[Type[BaseState]], theme: Component) -> str:
     """Compile the initial state and contexts.
 
     Args:
         state: The app state.
+        theme: The top-level app theme.
 
     Returns:
         The compiled context file.
@@ -82,9 +84,13 @@ def _compile_contexts(state: Optional[Type[BaseState]]) -> str:
             state_name=state.get_name(),
             client_storage=utils.compile_client_storage(state),
             is_dev_mode=_is_dev_mode(),
+            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
         )
         if state
-        else templates.CONTEXT.render(is_dev_mode=_is_dev_mode())
+        else templates.CONTEXT.render(
+            is_dev_mode=_is_dev_mode(),
+            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
+        )
     )
 
 
@@ -345,11 +351,15 @@ def compile_theme(style: ComponentStyle) -> tuple[str, str]:
     return output_path, code
 
 
-def compile_contexts(state: Optional[Type[BaseState]]) -> tuple[str, str]:
+def compile_contexts(
+    state: Optional[Type[BaseState]],
+    theme: Component,
+) -> tuple[str, str]:
     """Compile the initial state / context.
 
     Args:
         state: The app state.
+        theme: The top-level app theme.
 
     Returns:
         The path and code of the compiled context.
@@ -357,7 +367,7 @@ def compile_contexts(state: Optional[Type[BaseState]]) -> tuple[str, str]:
     # Get the path for the output file.
     output_path = utils.get_context_path()
 
-    return output_path, _compile_contexts(state)
+    return output_path, _compile_contexts(state, theme)
 
 
 def compile_page(

reflex/compiler/templates.py

@@ -41,6 +41,7 @@ class ReflexJinjaEnvironment(Environment):
             "use_color_mode": constants.ColorMode.USE,
             "hydrate": constants.CompileVars.HYDRATE,
             "on_load_internal": constants.CompileVars.ON_LOAD_INTERNAL,
+            "update_vars_internal": constants.CompileVars.UPDATE_VARS_INTERNAL,
         }
 
 

reflex/components/base/bare.pyi

@@ -0,0 +1,84 @@
+"""Stub file for reflex/components/base/bare.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Iterator
+from reflex.components.component import Component
+from reflex.components.tags import Tag
+from reflex.components.tags.tagless import Tagless
+from reflex.vars import Var
+
+class Bare(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        contents: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Bare":
+        """Create a Bare component, with no tag.
+
+        Args:
+            contents: The contents of the component.
+
+        Returns:
+            The component.
+        """
+        ...

reflex/components/component.py

@@ -502,6 +502,14 @@ class Component(BaseComponent, ABC):
             if isinstance(child, Component):
                 child.apply_theme(theme)
 
+    def _exclude_props(self) -> list[str]:
+        """Props to exclude when adding the component props to the Tag.
+
+        Returns:
+            A list of component props to exclude.
+        """
+        return []
+
     def _render(self, props: dict[str, Any] | None = None) -> Tag:
         """Define how to render the component in React.
 
@@ -544,6 +552,10 @@ class Component(BaseComponent, ABC):
         props.update(self._get_style())
         props.update(self.custom_attrs)
 
+        # remove excluded props from prop dict before adding to tag.
+        for prop_to_exclude in self._exclude_props():
+            props.pop(prop_to_exclude, None)
+
         return tag.add_props(**props)
 
     @classmethod
@@ -722,6 +734,11 @@ class Component(BaseComponent, ABC):
             children: The children of the component.
 
         """
+        from reflex.components.base.fragment import Fragment
+        from reflex.components.core.cond import Cond
+        from reflex.components.core.foreach import Foreach
+        from reflex.components.core.match import Match
+
         no_valid_parents_defined = all(child._valid_parents == [] for child in children)
         if (
             not self._invalid_children
@@ -731,21 +748,23 @@ class Component(BaseComponent, ABC):
             return
 
         comp_name = type(self).__name__
-        allowed_components = ["Fragment", "Foreach", "Cond", "Match"]
+        allowed_components = [
+            comp.__name__ for comp in (Fragment, Foreach, Cond, Match)
+        ]
 
         def validate_child(child):
             child_name = type(child).__name__
 
             # Iterate through the immediate children of fragment
-            if child_name == "Fragment":
+            if isinstance(child, Fragment):
                 for c in child.children:
                     validate_child(c)
 
-            if child_name == "Cond":
+            if isinstance(child, Cond):
                 validate_child(child.comp1)
                 validate_child(child.comp2)
 
-            if child_name == "Match":
+            if isinstance(child, Match):
                 for cases in child.match_cases:
                     validate_child(cases[-1])
                 validate_child(child.default)

reflex/components/core/cond.py

@@ -24,10 +24,10 @@ class Cond(MemoizationLeaf):
     cond: Var[Any]
 
     # The component to render if the cond is true.
-    comp1: BaseComponent = Fragment.create()
+    comp1: BaseComponent = None  # type: ignore
 
     # The component to render if the cond is false.
-    comp2: BaseComponent = Fragment.create()
+    comp2: BaseComponent = None  # type: ignore
 
     @classmethod
     def create(

reflex/components/core/debounce.py

@@ -95,7 +95,7 @@ class DebounceInput(Component):
         if child.class_name is not None:
             props["class_name"] = f"{props.get('class_name', '')} {child.class_name}"
         child_ref = child.get_ref()
-        if not props.get("input_ref") and child_ref:
+        if props.get("input_ref") is None and child_ref:
             props["input_ref"] = Var.create_safe(child_ref, _var_is_local=False)
             props["id"] = child.id
 

reflex/components/core/upload.py

@@ -8,7 +8,7 @@ from typing import Any, ClassVar, Dict, List, Optional, Union
 from reflex import constants
 from reflex.components.chakra.forms.input import Input
 from reflex.components.chakra.layout.box import Box
-from reflex.components.component import Component
+from reflex.components.component import Component, MemoizationLeaf
 from reflex.constants import Dirs
 from reflex.event import CallableEventSpec, EventChain, EventSpec, call_script
 from reflex.utils import imports
@@ -138,7 +138,7 @@ class UploadFilesProvider(Component):
     tag = "UploadFilesProvider"
 
 
-class Upload(Component):
+class Upload(MemoizationLeaf):
     """A file upload component."""
 
     library = "react-dropzone@14.2.3"

reflex/components/core/upload.pyi

@@ -13,7 +13,7 @@ from typing import Any, ClassVar, Dict, List, Optional, Union
 from reflex import constants
 from reflex.components.chakra.forms.input import Input
 from reflex.components.chakra.layout.box import Box
-from reflex.components.component import Component
+from reflex.components.component import Component, MemoizationLeaf
 from reflex.constants import Dirs
 from reflex.event import CallableEventSpec, EventChain, EventSpec, call_script
 from reflex.utils import imports
@@ -114,7 +114,7 @@ class UploadFilesProvider(Component):
         """
         ...
 
-class Upload(Component):
+class Upload(MemoizationLeaf):
     is_used: ClassVar[bool] = False
 
     @overload

reflex/components/radix/primitives/accordion.py

@@ -15,7 +15,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
+from reflex.vars import BaseVar, Var, VarData, get_uuid_string_var
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -463,6 +463,9 @@ to {
 `
 """
 
+    def _exclude_props(self) -> list[str]:
+        return ["color_scheme", "variant"]
+
 
 class AccordionItem(AccordionComponent):
     """An accordion component."""
@@ -512,7 +515,7 @@ class AccordionItem(AccordionComponent):
             The accordion item.
         """
         # The item requires a value to toggle (use a random unique name if not provided).
-        value = props.pop("value", get_unique_variable_name())
+        value = props.pop("value", get_uuid_string_var())
 
         if "AccordionItem" not in (
             cls_name := props.pop("class_name", "AccordionItem")

reflex/components/radix/primitives/accordion.pyi

@@ -19,7 +19,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
+from reflex.vars import BaseVar, Var, VarData, get_uuid_string_var
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]

reflex/components/radix/primitives/progress.py

@@ -2,11 +2,13 @@
 
 from __future__ import annotations
 
-from typing import Optional
+from typing import Optional, Union
 
 from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.colors import color
 from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
+from reflex.components.radix.themes.base import LiteralAccentColor
 from reflex.style import Style
 from reflex.vars import Var
 
@@ -57,10 +59,26 @@ class ProgressIndicator(ProgressComponent):
     # The maximum progress value.
     max: Var[Optional[int]]
 
+    # The color scheme of the progress indicator.
+    color_scheme: Var[LiteralAccentColor]
+
     def _apply_theme(self, theme: Component):
+        global_color_scheme = getattr(theme, "accent_color", None)
+
+        if global_color_scheme is None and self.color_scheme is None:
+            raise ValueError(
+                "`color_scheme` cannot be None. Either set the `color_scheme` prop on the progress indicator "
+                "component or set the `accent_color` prop in your global theme."
+            )
+
+        color_scheme = color(
+            self.color_scheme if self.color_scheme is not None else global_color_scheme,  # type: ignore
+            9,
+        )
+
         self.style = Style(
             {
-                "background-color": "var(--accent-9)",
+                "background-color": color_scheme,
                 "width": "100%",
                 "height": "100%",
                 f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
@@ -72,20 +90,28 @@ class ProgressIndicator(ProgressComponent):
             }
         )
 
+    def _exclude_props(self) -> list[str]:
+        return ["color_scheme"]
+
 
 class Progress(ComponentNamespace):
-    """High level API for progress bar."""
+    """High-level API for progress bar."""
 
     root = staticmethod(ProgressRoot.create)
     indicator = staticmethod(ProgressIndicator.create)
 
     @staticmethod
-    def __call__(width: Optional[str] = "100%", **props) -> Component:
-        """High level API for progress bar.
+    def __call__(
+        width: Optional[str] = "100%",
+        color_scheme: Optional[Union[Var, LiteralAccentColor]] = None,
+        **props,
+    ) -> Component:
+        """High-level API for progress bar.
 
         Args:
-            width: The width of the progerss bar
-            **props: The props of the progress bar
+            width: The width of the progress bar.
+            **props: The props of the progress bar.
+            color_scheme: The color scheme of the progress indicator.
 
         Returns:
             The progress bar.
@@ -93,9 +119,15 @@ class Progress(ComponentNamespace):
         style = props.setdefault("style", {})
         style.update({"width": width})
 
+        progress_indicator_props = (
+            {"color_scheme": color_scheme} if color_scheme is not None else {}
+        )
+
         return ProgressRoot.create(
             ProgressIndicator.create(
-                value=props.get("value"), max=props.get("max", 100)
+                value=props.get("value"),
+                max=props.get("max", 100),
+                **progress_indicator_props,  # type: ignore
             ),
             **props,
         )