reflex 0.2.2__py3-none-any.whl → 0.2.3__py3-none-any.whl

reflex/.templates/apps/counter/counter.py

@@ -48,6 +48,6 @@ def index() -> rx.Component:
 
 
 # Add state and page to the app.
-app = rx.App(state=State)
+app = rx.App()
 app.add_page(index, title="Counter")
 app.compile()

reflex/.templates/apps/default/default.py

@@ -40,6 +40,6 @@ def index() -> rx.Component:
 
 
 # Add state and page to the app.
-app = rx.App(state=State)
+app = rx.App()
 app.add_page(index)
 app.compile()

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

@@ -168,7 +168,8 @@ export const applyEvent = async (event, router, socket) => {
 
   // Send the event to the server.
   event.token = getToken();
-  event.router_data = (({ pathname, query }) => ({ pathname, query }))(router);
+  event.router_data = (({ pathname, query, asPath }) => ({ pathname, query, asPath }))(router);
+
   if (socket) {
     socket.emit("event", JSON.stringify(event));
     return true;
@@ -382,6 +383,9 @@ export const preventDefault = (event) => {
  * @returns The value.
  */
 export const getRefValue = (ref) => {
+  if (!ref || !ref.current){
+    return;
+  }
   if (ref.current.type == "checkbox") {
     return ref.current.checked;
   } else {

reflex/__init__.py

@@ -36,6 +36,7 @@ from .event import window_alert as window_alert
 from .middleware import Middleware as Middleware
 from .model import Model as Model
 from .model import session as session
+from .page import page as page
 from .route import route as route
 from .state import ComputedVar as var
 from .state import State as State

reflex/app.py

@@ -2,6 +2,7 @@
 
 import asyncio
 import inspect
+import os
 from multiprocessing.pool import ThreadPool
 from typing import (
     Any,
@@ -34,15 +35,17 @@ from reflex.config import get_config
 from reflex.event import Event, EventHandler, EventSpec
 from reflex.middleware import HydrateMiddleware, Middleware
 from reflex.model import Model
+from reflex.page import (
+    DECORATED_PAGES,
+)
 from reflex.route import (
-    DECORATED_ROUTES,
     catchall_in_route,
     catchall_prefix,
     get_route_args,
     verify_route_validity,
 )
 from reflex.state import DefaultState, State, StateManager, StateUpdate
-from reflex.utils import format, types
+from reflex.utils import console, format, types
 
 # Define custom types.
 ComponentCallable = Callable[[], Component]
@@ -100,9 +103,29 @@ class App(Base):
 
         Raises:
             ValueError: If the event namespace is not provided in the config.
+                        Also, if there are multiple client subclasses of rx.State(Subclasses of rx.State should consist
+                        of the DefaultState and the client app state).
         """
         super().__init__(*args, **kwargs)
+        state_subclasses = State.__subclasses__()
+        inferred_state = state_subclasses[-1]
+        is_testing_env = constants.PYTEST_CURRENT_TEST in os.environ
+
+        # Special case to allow test cases have multiple subclasses of rx.State.
+        if not is_testing_env:
+            # Only the default state and the client state should be allowed as subclasses.
+            if len(state_subclasses) > 2:
+                raise ValueError(
+                    "rx.State has been subclassed multiple times. Only one subclass is allowed"
+                )
 
+            # verify that provided state is valid
+            if self.state not in [DefaultState, inferred_state]:
+                console.warn(
+                    f"Using substate ({self.state.__name__}) as root state in `rx.App` is currently not supported."
+                    f" Defaulting to root state: ({inferred_state.__name__})"
+                )
+            self.state = inferred_state
         # Get the config
         config = get_config()
 
@@ -414,14 +437,7 @@ class App(Base):
         )
 
         froute = format.format_route
-        if (froute(constants.ROOT_404) not in self.pages) and (
-            not any(page.startswith("[[...") for page in self.pages)
-        ):
-            self.pages[froute(constants.ROOT_404)] = component
-        if not any(
-            page.startswith("[...") or page.startswith("[[...") for page in self.pages
-        ):
-            self.pages[froute(constants.SLUG_404)] = component
+        self.pages[froute(constants.SLUG_404)] = component
 
     def setup_admin_dash(self):
         """Setup the admin dash."""
@@ -455,23 +471,23 @@ class App(Base):
         )
         task = progress.add_task("Compiling: ", total=len(self.pages))
 
-        for render, kwargs in DECORATED_ROUTES:
+        # TODO: include all work done in progress indicator, not just self.pages
+        for render, kwargs in DECORATED_PAGES:
             self.add_page(render, **kwargs)
 
         # Get the env mode.
         config = get_config()
 
-        # Empty the .web pages directory
-        compiler.purge_web_pages_dir()
-
         # Store the compile results.
         compile_results = []
 
         # Compile the pages in parallel.
         custom_components = set()
+        # TODO Anecdotally, processes=2 works 10% faster (cpu_count=12)
         thread_pool = ThreadPool()
         with progress:
             for route, component in self.pages.items():
+                # TODO: this progress does not reflect actual threaded task completion
                 progress.advance(task)
                 component.add_style(self.style)
                 compile_results.append(
@@ -493,6 +509,8 @@ class App(Base):
         # Get the results.
         compile_results = [result.get() for result in compile_results]
 
+        # TODO the compile tasks below may also benefit from parallelization too
+
         # Compile the custom components.
         compile_results.append(compiler.compile_components(custom_components))
 
@@ -503,18 +521,18 @@ class App(Base):
         compile_results.append(compiler.compile_theme(self.style))
 
         # Compile the Tailwind config.
-        compile_results.append(
-            compiler.compile_tailwind(
-                dict(**config.tailwind, content=constants.TAILWIND_CONTENT)
-                if config.tailwind is not None
-                else {}
+        if config.tailwind is not None:
+            config.tailwind["content"] = config.tailwind.get(
+                "content", constants.TAILWIND_CONTENT
             )
-        )
+            compile_results.append(compiler.compile_tailwind(config.tailwind))
+
+        # Empty the .web pages directory
+        compiler.purge_web_pages_dir()
 
         # Write the pages at the end to trigger the NextJS hot reload only once.
         thread_pool = ThreadPool()
         for output_path, code in compile_results:
-            compiler_utils.write_page(output_path, code)
             thread_pool.apply_async(compiler_utils.write_page, args=(output_path, code))
         thread_pool.close()
         thread_pool.join()
@@ -647,9 +665,7 @@ def upload(app: App):
             update = await app.postprocess(state, event, update)
             # Send update to client
             await asyncio.create_task(
-                app.event_namespace.emit(  # type: ignore
-                    str(constants.SocketEvent.EVENT), update.json(), to=sid
-                )
+                app.event_namespace.emit(str(constants.SocketEvent.EVENT), update.json(), to=sid)  # type: ignore
             )
         # Set the state for the session.
         app.state_manager.set_state(event.token, state)

reflex/components/datadisplay/datatable.py

@@ -101,25 +101,22 @@ class DataTable(Gridjs):
 
     def _render(self) -> Tag:
         if isinstance(self.data, Var):
-            self.columns = BaseVar(
-                name=f"{self.data.name}.columns"
-                if types.is_dataframe(self.data.type_)
-                else f"{self.columns.name}",
-                type_=List[Any],
-                state=self.data.state,
-            )
-            self.data = BaseVar(
-                name=f"{self.data.name}.data"
-                if types.is_dataframe(self.data.type_)
-                else f"{self.data.name}",
-                type_=List[List[Any]],
-                state=self.data.state,
-            )
-
-        # If given a pandas df break up the data and columns
-        if types.is_dataframe(type(self.data)):
-            self.columns = Var.create(list(self.data.columns.values.tolist()))  # type: ignore
-            self.data = Var.create(format.format_dataframe_values(self.data))  # type: ignore
+            if types.is_dataframe(self.data.type_):
+                self.columns = BaseVar(
+                    name=f"{self.data.name}.columns",
+                    type_=List[Any],
+                    state=self.data.state,
+                )
+                self.data = BaseVar(
+                    name=f"{self.data.name}.data",
+                    type_=List[List[Any]],
+                    state=self.data.state,
+                )
+        else:
+            # If given a pandas df break up the data and columns
+            if types.is_dataframe(type(self.data)):
+                self.columns = Var.create(list(self.data.columns.values.tolist()))  # type: ignore
+                self.data = Var.create(format.format_dataframe_values(self.data))  # type: ignore
 
         # Render the table.
         return super()._render()

reflex/components/navigation/breadcrumb.py

@@ -1,7 +1,9 @@
 """Breadcrumb components."""
 
 from reflex.components.component import Component
+from reflex.components.layout.foreach import Foreach
 from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.navigation.link import Link
 from reflex.vars import Var
 
 
@@ -31,11 +33,18 @@ class Breadcrumb(ChakraComponent):
             The breadcrumb component.
         """
         if len(children) == 0:
-            children = []
-            for label, link in items or []:
-                children.append(
-                    BreadcrumbItem.create(BreadcrumbLink.create(label, href=link))
-                )
+            if isinstance(items, Var):
+                children = [
+                    Foreach.create(
+                        items,
+                        lambda item: BreadcrumbItem.create(label=item[0], href=item[1]),
+                    ),
+                ]
+
+            else:
+                children = []
+                for label, link in items or []:
+                    children.append(BreadcrumbItem.create(label=label, href=link))
         return super().create(*children, **props)
 
 
@@ -56,8 +65,22 @@ class BreadcrumbItem(ChakraComponent):
     # The left and right margin applied to the separator
     spacing: Var[str]
 
-    # The href of the item.
-    href: Var[str]
+    @classmethod
+    def create(cls, *children, label=None, href=None, **props):
+        """Create a Breadcrumb Item component.
+
+        Args:
+            children: The children of the component.
+            label: The label used in the link. Defaults to None.
+            href: The URL of the link. Defaults to None.
+            props: The properties of the component.
+
+        Returns:
+            The BreadcrumbItem component
+        """
+        if len(children) == 0:
+            children = [BreadcrumbLink.create(label or "", href=href or "")]  # type: ignore
+        return super().create(*children, **props)
 
 
 class BreadcrumbSeparator(ChakraComponent):
@@ -66,7 +89,7 @@ class BreadcrumbSeparator(ChakraComponent):
     tag = "BreadcrumbSeparator"
 
 
-class BreadcrumbLink(ChakraComponent):
+class BreadcrumbLink(Link):
     """The breadcrumb link."""
 
     tag = "BreadcrumbLink"

reflex/components/tags/iter_tag.py

@@ -33,7 +33,6 @@ class IterTag(Tag):
         return BaseVar(
             name=INDEX_VAR,
             type_=int,
-            is_local=True,
         )
 
     @staticmethod
@@ -46,6 +45,7 @@ class IterTag(Tag):
         return BaseVar(
             name=INDEX_VAR,
             type_=int,
+            is_local=True,
         )
 
     @staticmethod

reflex/components/tags/tag.py

@@ -67,46 +67,48 @@ class Tag(Base):
         Raises:
             TypeError: If the prop is not a valid type.
         """
-        # Handle var props.
-        if isinstance(prop, Var):
-            if not prop.is_local or prop.is_string:
-                return str(prop)
-            if types._issubclass(prop.type_, str):
-                return format.json_dumps(prop.full_name)
-            prop = prop.full_name
-
-        # Handle event props.
-        elif isinstance(prop, EventChain):
-            if prop.full_control:
-                # Full control component events.
-                event = format.format_full_control_event(prop)
+        try:
+            # Handle var props.
+            if isinstance(prop, Var):
+                if not prop.is_local or prop.is_string:
+                    return str(prop)
+                if types._issubclass(prop.type_, str):
+                    return format.json_dumps(prop.full_name)
+                prop = prop.full_name
+
+            # Handle event props.
+            elif isinstance(prop, EventChain):
+                if prop.full_control:
+                    # Full control component events.
+                    event = format.format_full_control_event(prop)
+                else:
+                    # All other events.
+                    chain = ",".join(
+                        [format.format_event(event) for event in prop.events]
+                    )
+                    event = f"Event([{chain}], {EVENT_ARG})"
+                prop = f"{EVENT_ARG} => {event}"
+
+            # Handle other types.
+            elif isinstance(prop, str):
+                if format.is_wrapped(prop, "{"):
+                    return prop
+                return format.json_dumps(prop)
+
+            elif isinstance(prop, Figure):
+                prop = json.loads(to_json(prop))["data"]  # type: ignore
+
+            # For dictionaries, convert any properties to strings.
+            elif isinstance(prop, dict):
+                prop = format.format_dict(prop)
+
             else:
-                # All other events.
-                chain = ",".join([format.format_event(event) for event in prop.events])
-                event = f"Event([{chain}], {EVENT_ARG})"
-            prop = f"{EVENT_ARG} => {event}"
-
-        # Handle other types.
-        elif isinstance(prop, str):
-            if format.is_wrapped(prop, "{"):
-                return prop
-            return format.json_dumps(prop)
-
-        elif isinstance(prop, Figure):
-            prop = json.loads(to_json(prop))["data"]  # type: ignore
-
-        # For dictionaries, convert any properties to strings.
-        elif isinstance(prop, dict):
-            prop = format.format_dict(prop)
-
-        else:
-            # Dump the prop as JSON.
-            try:
+                # Dump the prop as JSON.
                 prop = format.json_dumps(prop)
-            except TypeError as e:
-                raise TypeError(
-                    f"Could not format prop: {prop} of type {type(prop)}"
-                ) from e
+        except TypeError as e:
+            raise TypeError(
+                f"Could not format prop: {prop} of type {type(prop)}"
+            ) from e
 
         # Wrap the variable in braces.
         assert isinstance(prop, str), "The prop must be a string."

reflex/components/typography/heading.py

@@ -9,5 +9,8 @@ class Heading(ChakraComponent):
 
     tag = "Heading"
 
+    # Override the tag. The default tag is `<h2>`.
+    as_: Var[str]
+
     # "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
     size: Var[str]

reflex/components/typography/markdown.py

@@ -1,12 +1,33 @@
 """Markdown component."""
 
 import textwrap
-from typing import List, Union
+from typing import Callable, Dict, List, Union
 
+from reflex.compiler import utils
 from reflex.components.component import Component
+from reflex.components.datadisplay.list import ListItem, OrderedList, UnorderedList
+from reflex.components.navigation import Link
+from reflex.components.typography.heading import Heading
+from reflex.components.typography.text import Text
+from reflex.style import Style
 from reflex.utils import types
 from reflex.vars import BaseVar, ImportVar, Var
 
+# Mapping from markdown tags to components.
+components_by_tag: Dict[str, Callable] = {
+    "h1": Heading,
+    "h2": Heading,
+    "h3": Heading,
+    "h4": Heading,
+    "h5": Heading,
+    "h6": Heading,
+    "p": Text,
+    "ul": UnorderedList,
+    "ol": OrderedList,
+    "li": ListItem,
+    "a": Link,
+}
+
 
 class Markdown(Component):
     """A markdown component."""
@@ -17,6 +38,37 @@ class Markdown(Component):
 
     is_default = True
 
+    # Custom defined styles for the markdown elements.
+    custom_styles: Dict[str, Style] = {
+        k: Style(v)
+        for k, v in {
+            "h1": {
+                "as_": "h1",
+                "size": "2xl",
+            },
+            "h2": {
+                "as_": "h2",
+                "size": "xl",
+            },
+            "h3": {
+                "as_": "h3",
+                "size": "lg",
+            },
+            "h4": {
+                "as_": "h4",
+                "size": "md",
+            },
+            "h5": {
+                "as_": "h5",
+                "size": "sm",
+            },
+            "h6": {
+                "as_": "h6",
+                "size": "xs",
+            },
+        }.items()
+    }
+
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create a markdown component.
@@ -39,47 +91,45 @@ class Markdown(Component):
         return super().create(src, **props)
 
     def _get_imports(self):
+        from reflex.components.datadisplay.code import Code, CodeBlock
+
         imports = super()._get_imports()
-        imports["@chakra-ui/react"] = {
-            ImportVar(tag="Heading"),
-            ImportVar(tag="Code"),
-            ImportVar(tag="Text"),
-            ImportVar(tag="Link"),
-            ImportVar(tag="UnorderedList"),
-            ImportVar(tag="OrderedList"),
-            ImportVar(tag="ListItem"),
-        }
-        imports["react-syntax-highlighter"] = {ImportVar(tag="Prism", is_default=True)}
+
+        # Special markdown imports.
         imports["remark-math"] = {ImportVar(tag="remarkMath", is_default=True)}
         imports["remark-gfm"] = {ImportVar(tag="remarkGfm", is_default=True)}
         imports["rehype-katex"] = {ImportVar(tag="rehypeKatex", is_default=True)}
         imports["rehype-raw"] = {ImportVar(tag="rehypeRaw", is_default=True)}
         imports[""] = {ImportVar(tag="katex/dist/katex.min.css")}
+
+        # Get the imports for each component.
+        for component in components_by_tag.values():
+            imports = utils.merge_imports(imports, component()._get_imports())
+
+        # Get the imports for the code components.
+        imports = utils.merge_imports(
+            imports, CodeBlock.create(theme="light")._get_imports()
+        )
+        imports = utils.merge_imports(imports, Code.create()._get_imports())
         return imports
 
     def _render(self):
-        return (
-            super()
-            ._render()
-            .add_props(
-                components={
-                    "h1": "{({node, ...props}) => <Heading size='2xl' paddingY='0.5em' {...props} />}",
-                    "h2": "{({node, ...props}) => <Heading size='xl' paddingY='0.5em' {...props} />}",
-                    "h3": "{({node, ...props}) => <Heading size='lg' paddingY='0.5em' {...props} />}",
-                    "h4": "{({node, ...props}) => <Heading size='sm' paddingY='0.5em' {...props} />}",
-                    "h5": "{({node, ...props}) => <Heading size='xs' paddingY='0.5em' {...props} />}",
-                    "ul": "{UnorderedList}",
-                    "ol": "{OrderedList}",
-                    "li": "{ListItem}",
-                    "p": "{({node, ...props}) => <Text paddingY='0.5em' {...props} />}",
-                    "a": "{Link}",
-                    "code": """{({node, inline, className, children, ...props}) =>
+        from reflex.components.tags.tag import Tag
+
+        components = {
+            tag: f"{{({{node, ...props}}) => <{(component().tag)} {{...props}} {''.join(Tag(name='', props=Style(self.custom_styles.get(tag, {}))).format_props())} />}}"
+            for tag, component in components_by_tag.items()
+        }
+        components[
+            "code"
+        ] = """{({node, inline, className, children, ...props}) =>
                     {
         const match = (className || '').match(/language-(?<lang>.*)/);
         return !inline ? (
           <Prism
             children={String(children).replace(/\n$/, '')}
             language={match ? match[1] : ''}
+            theme={light}
             {...props}
           />
         ) : (
@@ -88,12 +138,18 @@ class Markdown(Component):
           </Code>
         );
       }}""".replace(
-                        "\n", " "
-                    ),
-                },
+            "\n", " "
+        )
+
+        return (
+            super()
+            ._render()
+            .add_props(
+                components=components,
                 remark_plugins=BaseVar(name="[remarkMath, remarkGfm]", type_=List[str]),
                 rehype_plugins=BaseVar(
                     name="[rehypeKatex, rehypeRaw]", type_=List[str]
                 ),
             )
+            .remove_props("custom_components")
         )

reflex/config.py

@@ -165,12 +165,6 @@ class Config(Base):
     # The environment mode.
     env: constants.Env = constants.Env.DEV
 
-    # The path to the bun executable.
-    bun_path: str = constants.BUN_PATH
-
-    # Disable bun.
-    disable_bun: bool = False
-
     # Additional frontend packages to install.
     frontend_packages: List[str] = []