reflex 0.7.14a5__py3-none-any.whl → 0.8.0__py3-none-any.whl

reflex/compiler/compiler.py

@@ -4,7 +4,6 @@ from __future__ import annotations
 
 import sys
 from collections.abc import Iterable, Sequence
-from datetime import datetime
 from inspect import getmodule
 from pathlib import Path
 from typing import TYPE_CHECKING
@@ -20,13 +19,15 @@ from reflex.components.component import (
     StatefulComponent,
 )
 from reflex.config import get_config
-from reflex.constants.compiler import PageNames
+from reflex.constants.compiler import PageNames, ResetStylesheet
+from reflex.constants.state import FIELD_MARKER
 from reflex.environment import environment
 from reflex.state import BaseState
 from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils import console, path_ops
 from reflex.utils.exceptions import ReflexError
 from reflex.utils.exec import is_prod_mode
+from reflex.utils.format import to_title_case
 from reflex.utils.imports import ImportVar
 from reflex.utils.prerequisites import get_web_dir
 from reflex.vars.base import LiteralVar, Var
@@ -36,7 +37,9 @@ def _apply_common_imports(
     imports: dict[str, list[ImportVar]],
 ):
     imports.setdefault("@emotion/react", []).append(ImportVar("jsx"))
-    imports.setdefault("react", []).append(ImportVar("Fragment"))
+    imports.setdefault("react", []).extend(
+        [ImportVar("Fragment"), ImportVar("useEffect")],
+    )
 
 
 def _compile_document_root(root: Component) -> str:
@@ -85,6 +88,8 @@ def _compile_app(app_root: Component) -> str:
         (_normalize_library_name(name), name) for name in bundled_libraries
     ]
 
+    window_libraries_deduped = list(dict.fromkeys(window_libraries))
+
     app_root_imports = app_root._get_all_imports()
     _apply_common_imports(app_root_imports)
 
@@ -92,7 +97,7 @@ def _compile_app(app_root: Component) -> str:
         imports=utils.compile_imports(app_root_imports),
         custom_codes=app_root._get_all_custom_code(),
         hooks=app_root._get_all_hooks(),
-        window_libraries=window_libraries,
+        window_libraries=window_libraries_deduped,
         render=app_root.render(),
         dynamic_imports=app_root._get_all_dynamic_imports(),
     )
@@ -124,21 +129,18 @@ def _compile_contexts(state: type[BaseState] | None, theme: Component | None) ->
     if appearance is None or str(LiteralVar.create(appearance)) == '"inherit"':
         appearance = LiteralVar.create(SYSTEM_COLOR_MODE)
 
-    last_compiled_time = str(datetime.now())
     return (
         templates.CONTEXT.render(
             initial_state=utils.compile_state(state),
             state_name=state.get_name(),
             client_storage=utils.compile_client_storage(state),
             is_dev_mode=not is_prod_mode(),
-            last_compiled_time=last_compiled_time,
             default_color_mode=appearance,
         )
         if state
         else templates.CONTEXT.render(
             is_dev_mode=not is_prod_mode(),
             default_color_mode=appearance,
-            last_compiled_time=last_compiled_time,
         )
     )
 
@@ -173,18 +175,21 @@ def _compile_page(
     )
 
 
-def compile_root_stylesheet(stylesheets: list[str]) -> tuple[str, str]:
+def compile_root_stylesheet(
+    stylesheets: list[str], reset_style: bool = True
+) -> tuple[str, str]:
     """Compile the root stylesheet.
 
     Args:
         stylesheets: The stylesheets to include in the root stylesheet.
+        reset_style: Whether to include CSS reset for margin and padding.
 
     Returns:
         The path and code of the compiled root stylesheet.
     """
     output_path = utils.get_root_stylesheet_path()
 
-    code = _compile_root_stylesheet(stylesheets)
+    code = _compile_root_stylesheet(stylesheets, reset_style)
 
     return output_path, code
 
@@ -226,11 +231,12 @@ def _validate_stylesheet(stylesheet_full_path: Path, assets_app_path: Path) -> N
 RADIX_THEMES_STYLESHEET = "@radix-ui/themes/styles.css"
 
 
-def _compile_root_stylesheet(stylesheets: list[str]) -> str:
+def _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) -> str:
     """Compile the root stylesheet.
 
     Args:
         stylesheets: The stylesheets to include in the root stylesheet.
+        reset_style: Whether to include CSS reset for margin and padding.
 
     Returns:
         The compiled root stylesheet.
@@ -239,11 +245,21 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
         FileNotFoundError: If a specified stylesheet in assets directory does not exist.
     """
     # Add stylesheets from plugins.
-    sheets = [RADIX_THEMES_STYLESHEET] + [
-        sheet
-        for plugin in get_config().plugins
-        for sheet in plugin.get_stylesheet_paths()
-    ]
+    sheets = []
+
+    # Add CSS reset if enabled
+    if reset_style:
+        # Reference the vendored style reset file (automatically copied from .templates/web)
+        sheets.append(f"./{ResetStylesheet.FILENAME}")
+
+    sheets.extend(
+        [RADIX_THEMES_STYLESHEET]
+        + [
+            sheet
+            for plugin in get_config().plugins
+            for sheet in plugin.get_stylesheet_paths()
+        ]
+    )
 
     failed_to_import_sass = False
     assets_app_path = Path.cwd() / constants.Dirs.APP_ASSETS
@@ -427,7 +443,7 @@ def _compile_stateful_components(
 
             # Include custom code in the shared component.
             rendered_components.update(
-                dict.fromkeys(component._get_all_custom_code()),
+                dict.fromkeys(component._get_all_custom_code(export=True)),
             )
 
             # Include all imports in the shared component.
@@ -469,7 +485,9 @@ def compile_document_root(
         The path and code of the compiled document root.
     """
     # Get the path for the output file.
-    output_path = utils.get_page_path(constants.PageNames.DOCUMENT_ROOT)
+    output_path = str(
+        get_web_dir() / constants.Dirs.PAGES / constants.PageNames.DOCUMENT_ROOT
+    )
 
     # Create the document root.
     document_root = utils.create_document_root(
@@ -491,7 +509,9 @@ def compile_app(app_root: Component) -> tuple[str, str]:
         The path and code of the compiled app wrapper.
     """
     # Get the path for the output file.
-    output_path = utils.get_page_path(constants.PageNames.APP_ROOT)
+    output_path = str(
+        get_web_dir() / constants.Dirs.PAGES / constants.PageNames.APP_ROOT
+    )
 
     # Compile the document root.
     code = _compile_app(app_root)
@@ -606,7 +626,7 @@ def purge_web_pages_dir():
         return
 
     # Empty out the web pages directory.
-    utils.empty_dir(get_web_dir() / constants.Dirs.PAGES, keep_files=["_app.js"])
+    utils.empty_dir(get_web_dir() / constants.Dirs.PAGES, keep_files=["routes.js"])
 
 
 if TYPE_CHECKING:
@@ -668,6 +688,32 @@ def readable_name_from_component(
     return None
 
 
+def _modify_exception(e: Exception) -> None:
+    """Modify the exception to make it more readable.
+
+    Args:
+        e: The exception to modify.
+    """
+    if len(e.args) == 1 and isinstance((msg := e.args[0]), str):
+        while (state_index := msg.find("reflex___")) != -1:
+            dot_index = msg.find(".", state_index)
+            if dot_index == -1:
+                break
+            state_name = msg[state_index:dot_index]
+            module_dot_state_name = state_name.replace("___", ".").rsplit("__", 1)[-1]
+            module_path, _, state_snake_case = module_dot_state_name.rpartition(".")
+            if not state_snake_case:
+                break
+            actual_state_name = to_title_case(state_snake_case)
+            msg = (
+                f"{msg[:state_index]}{module_path}.{actual_state_name}{msg[dot_index:]}"
+            )
+
+        msg = msg.replace(FIELD_MARKER, "")
+
+        e.args = (msg,)
+
+
 def into_component(component: Component | ComponentCallable) -> Component:
     """Convert a component to a Component.
 
@@ -692,6 +738,7 @@ def into_component(component: Component | ComponentCallable) -> Component:
         component_called = component()
     except KeyError as e:
         if isinstance(e, ReflexError):
+            _modify_exception(e)
             raise
         key = e.args[0] if e.args else None
         if key is not None and isinstance(key, Var):
@@ -701,6 +748,7 @@ def into_component(component: Component | ComponentCallable) -> Component:
         raise
     except TypeError as e:
         if isinstance(e, ReflexError):
+            _modify_exception(e)
             raise
         message = e.args[0] if e.args else None
         if message and isinstance(message, str):
@@ -726,6 +774,9 @@ def into_component(component: Component | ComponentCallable) -> Component:
                 "Cannot pass a Var to a built-in function. Consider moving the operation to the backend, using existing Var operations, or defining a custom Var operation."
             ).with_traceback(e.__traceback__) from None
         raise
+    except ReflexError as e:
+        _modify_exception(e)
+        raise
 
     if (converted := _into_component_once(component_called)) is not None:
         return converted

reflex/compiler/templates.py

@@ -113,10 +113,10 @@ def from_string(source: str) -> Template:
 # Template for the Reflex config file.
 RXCONFIG = get_template("app/rxconfig.py.jinja2")
 
-# Code to render a NextJS Document root.
+# Code to render the Document root.
 DOCUMENT_ROOT = get_template("web/pages/_document.js.jinja2")
 
-# Code to render NextJS App root.
+# Code to render App root.
 APP_ROOT = get_template("web/pages/_app.js.jinja2")
 
 # Template for the theme file.
@@ -128,7 +128,7 @@ CONTEXT = get_template("web/utils/context.js.jinja2")
 # Template to render a component tag.
 COMPONENT = get_template("web/pages/component.js.jinja2")
 
-# Code to render a single NextJS page.
+# Code to render a single react page.
 PAGE = get_template("web/pages/index.js.jinja2")
 
 # Code to render the custom components page.

reflex/compiler/utils.py

@@ -5,28 +5,21 @@ from __future__ import annotations
 import asyncio
 import concurrent.futures
 import traceback
-from collections.abc import Sequence
+from collections.abc import Mapping, Sequence
 from datetime import datetime
 from pathlib import Path
 from typing import Any
 from urllib.parse import urlparse
 
-from pydantic.v1.fields import ModelField
-
 from reflex import constants
-from reflex.components.base import (
-    Body,
-    Description,
-    DocumentHead,
-    Head,
-    Html,
-    Image,
-    Main,
-    Meta,
-    NextScript,
-    Title,
-)
+from reflex.components.base import Description, Image, Scripts
+from reflex.components.base.document import Links, ScrollRestoration
+from reflex.components.base.document import Meta as ReactMeta
 from reflex.components.component import Component, ComponentStyle, CustomComponent
+from reflex.components.el.elements.metadata import Head, Meta, Title
+from reflex.components.el.elements.other import Html
+from reflex.components.el.elements.sectioning import Body
+from reflex.constants.state import FIELD_MARKER
 from reflex.istate.storage import Cookie, LocalStorage, SessionStorage
 from reflex.state import BaseState, _resolve_delta
 from reflex.style import Style
@@ -34,7 +27,7 @@ from reflex.utils import console, format, imports, path_ops
 from reflex.utils.exec import is_in_app_harness
 from reflex.utils.imports import ImportVar, ParsedImportDict
 from reflex.utils.prerequisites import get_web_dir
-from reflex.vars.base import Var
+from reflex.vars.base import Field, Var
 
 # To re-export this function.
 merge_imports = imports.merge_imports
@@ -181,6 +174,18 @@ def save_error(error: Exception) -> str:
     return str(log_path)
 
 
+def _sorted_keys(d: Mapping[str, Any]) -> dict[str, Any]:
+    """Sort the keys of a dictionary.
+
+    Args:
+        d: The dictionary to sort.
+
+    Returns:
+        A new dictionary with sorted keys.
+    """
+    return dict(sorted(d.items(), key=lambda kv: kv[0]))
+
+
 def compile_state(state: type[BaseState]) -> dict:
     """Compile the state of the app.
 
@@ -205,14 +210,14 @@ def compile_state(state: type[BaseState]) -> dict:
                 console.warn(
                     f"Had to get initial state in a thread 🤮 {resolved_initial_state}",
                 )
-                return resolved_initial_state
+                return _sorted_keys(resolved_initial_state)
 
     # Normally the compile runs before any event loop starts, we asyncio.run is available for calling.
-    return asyncio.run(_resolve_delta(initial_state))
+    return _sorted_keys(asyncio.run(_resolve_delta(initial_state)))
 
 
 def _compile_client_storage_field(
-    field: ModelField,
+    field: Field,
 ) -> tuple[
     type[Cookie] | type[LocalStorage] | type[SessionStorage] | None,
     dict[str, Any] | None,
@@ -260,7 +265,7 @@ def _compile_client_storage_recursive(
         if name in state.inherited_vars:
             # only include vars defined in this state
             continue
-        state_key = f"{state_name}.{name}"
+        state_key = f"{state_name}.{name}" + FIELD_MARKER
         field_type, options = _compile_client_storage_field(field)
         if field_type is Cookie:
             cookies[state_key] = options
@@ -320,6 +325,8 @@ def compile_custom_component(
         if lib != component.library
     }
 
+    imports.setdefault("@emotion/react", []).append(ImportVar("jsx"))
+
     # Concatenate the props.
     props = list(component.props)
 
@@ -352,12 +359,43 @@ def create_document_root(
     Returns:
         The document root.
     """
-    head_components = head_components or []
+    existing_meta_types = set()
+
+    for component in head_components or []:
+        if isinstance(component, Meta):
+            if component.char_set is not None:  # pyright: ignore[reportAttributeAccessIssue]
+                existing_meta_types.add("char_set")
+            if (
+                (name := component.name) is not None  # pyright: ignore[reportAttributeAccessIssue]
+                and name.equals(Var.create("viewport"))
+            ):
+                existing_meta_types.add("viewport")
+
+    # Always include the framework meta and link tags.
+    always_head_components = [
+        ReactMeta.create(),
+        Links.create(),
+    ]
+    maybe_head_components = []
+    # Only include these if the user has not specified them.
+    if "char_set" not in existing_meta_types:
+        maybe_head_components.append(Meta.create(char_set="utf-8"))
+    if "viewport" not in existing_meta_types:
+        maybe_head_components.append(
+            Meta.create(name="viewport", content="width=device-width, initial-scale=1")
+        )
+
+    head_components = [
+        *(head_components or []),
+        *maybe_head_components,
+        *always_head_components,
+    ]
     return Html.create(
-        DocumentHead.create(*head_components),
+        Head.create(*head_components),
         Body.create(
-            Main.create(),
-            NextScript.create(),
+            Var("children"),
+            ScrollRestoration.create(),
+            Scripts.create(),
         ),
         lang=html_lang or "en",
         custom_attrs=html_custom_attrs or {},
@@ -391,6 +429,25 @@ def create_theme(style: ComponentStyle) -> dict:
     return {"styles": {"global": root_style}}
 
 
+def _format_route_part(part: str) -> str:
+    if part.startswith("[") and part.endswith("]"):
+        if part.startswith(("[...", "[[...")):
+            return "$"
+        if part.startswith("[["):
+            return "($" + part.removeprefix("[[").removesuffix("]]") + ")"
+        # We don't add [] here since we are reusing them from the input
+        return "$" + part
+    return "[" + part + "]"
+
+
+def _path_to_file_stem(path: str) -> str:
+    if path == "index":
+        return "_index"
+    path = path if path != "index" else "/"
+    name = ".".join([_format_route_part(part) for part in path.split("/")]).lstrip(".")
+    return name + "._index" if not name.endswith("$") else name
+
+
 def get_page_path(path: str) -> str:
     """Get the path of the compiled JS file for the given page.
 
@@ -400,7 +457,12 @@ def get_page_path(path: str) -> str:
     Returns:
         The path of the compiled JS file.
     """
-    return str(get_web_dir() / constants.Dirs.PAGES / (path + constants.Ext.JS))
+    return str(
+        get_web_dir()
+        / constants.Dirs.PAGES
+        / constants.Dirs.ROUTES
+        / (_path_to_file_stem(path) + constants.Ext.JSX)
+    )
 
 
 def get_theme_path() -> str:
@@ -447,7 +509,7 @@ def get_components_path() -> str:
     return str(
         get_web_dir()
         / constants.Dirs.UTILS
-        / (constants.PageNames.COMPONENTS + constants.Ext.JS),
+        / (constants.PageNames.COMPONENTS + constants.Ext.JSX),
     )
 
 
@@ -460,7 +522,7 @@ def get_stateful_components_path() -> str:
     return str(
         get_web_dir()
         / constants.Dirs.UTILS
-        / (constants.PageNames.STATEFUL_COMPONENTS + constants.Ext.JS)
+        / (constants.PageNames.STATEFUL_COMPONENTS + constants.Ext.JSX)
     )
 
 
@@ -492,12 +554,8 @@ def add_meta(
         children.append(Description.create(content=description))
     children.append(Image.create(content=image))
 
-    page.children.append(
-        Head.create(
-            *children,
-            *meta_tags,
-        )
-    )
+    page.children.extend(children)
+    page.children.extend(meta_tags)
 
     return page
 

reflex/components/__init__.py

@@ -15,7 +15,6 @@ _SUBMODULES: set[str] = {
     "radix",
     "react_player",
     "sonner",
-    "suneditor",
     "el",
     "base",
     "recharts",
@@ -26,7 +25,6 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
         "Component",
         "NoSSRComponent",
     ],
-    "next": ["NextLink", "next_link"],
 }
 __getattr__, __dir__, __all__ = lazy_loader.attach(
     __name__,

reflex/components/__init__.pyi

@@ -3,21 +3,37 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
-from . import base as base
-from . import core as core
-from . import datadisplay as datadisplay
-from . import el as el
-from . import gridjs as gridjs
-from . import lucide as lucide
-from . import markdown as markdown
-from . import moment as moment
-from . import plotly as plotly
-from . import radix as radix
-from . import react_player as react_player
-from . import recharts as recharts
-from . import sonner as sonner
-from . import suneditor as suneditor
-from .component import Component as Component
-from .component import NoSSRComponent as NoSSRComponent
-from .next import NextLink as NextLink
-from .next import next_link as next_link
+from . import (
+    base,
+    core,
+    datadisplay,
+    el,
+    gridjs,
+    lucide,
+    markdown,
+    moment,
+    plotly,
+    radix,
+    react_player,
+    recharts,
+    sonner,
+)
+from .component import Component, NoSSRComponent
+
+__all__ = [
+    "Component",
+    "NoSSRComponent",
+    "base",
+    "core",
+    "datadisplay",
+    "el",
+    "gridjs",
+    "lucide",
+    "markdown",
+    "moment",
+    "plotly",
+    "radix",
+    "react_player",
+    "recharts",
+    "sonner",
+]

reflex/components/base/__init__.py

@@ -8,7 +8,7 @@ _SUBMODULES: set[str] = {"app_wrap", "bare"}
 
 _SUBMOD_ATTRS: dict[str, list[str]] = {
     "body": ["Body"],
-    "document": ["DocumentHead", "Html", "Main", "NextScript"],
+    "document": ["Scripts", "Outlet", "ScrollRestoration", "Links", "Meta"],
     "fragment": [
         "Fragment",
         "fragment",
@@ -17,10 +17,6 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
         "ErrorBoundary",
         "error_boundary",
     ],
-    "head": [
-        "head",
-        "Head",
-    ],
     "link": ["RawLink", "ScriptTag"],
     "meta": ["Description", "Image", "Meta", "Title"],
     "script": ["Script", "script"],

reflex/components/base/__init__.pyi

@@ -3,24 +3,33 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
-from . import app_wrap as app_wrap
-from . import bare as bare
-from .body import Body as Body
-from .document import DocumentHead as DocumentHead
-from .document import Html as Html
-from .document import Main as Main
-from .document import NextScript as NextScript
-from .error_boundary import ErrorBoundary as ErrorBoundary
-from .error_boundary import error_boundary as error_boundary
-from .fragment import Fragment as Fragment
-from .fragment import fragment as fragment
-from .head import Head as Head
-from .head import head as head
-from .link import RawLink as RawLink
-from .link import ScriptTag as ScriptTag
-from .meta import Description as Description
-from .meta import Image as Image
-from .meta import Meta as Meta
-from .meta import Title as Title
-from .script import Script as Script
-from .script import script as script
+from . import app_wrap, bare
+from .body import Body
+from .document import Links, Outlet, Scripts, ScrollRestoration
+from .error_boundary import ErrorBoundary, error_boundary
+from .fragment import Fragment, fragment
+from .link import RawLink, ScriptTag
+from .meta import Description, Image, Meta, Title
+from .script import Script, script
+
+__all__ = [
+    "Body",
+    "Description",
+    "ErrorBoundary",
+    "Fragment",
+    "Image",
+    "Links",
+    "Meta",
+    "Outlet",
+    "RawLink",
+    "Script",
+    "ScriptTag",
+    "Scripts",
+    "ScrollRestoration",
+    "Title",
+    "app_wrap",
+    "bare",
+    "error_boundary",
+    "fragment",
+    "script",
+]

reflex/components/base/app_wrap.pyi

@@ -4,17 +4,16 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 from collections.abc import Mapping, Sequence
-from typing import Any, overload
+from typing import Any
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.core.breakpoints import Breakpoints
-from reflex.event import EventType
+from reflex.event import EventType, PointerEventInfo
 from reflex.vars.base import Var
 
 class AppWrap(Fragment):
-    @overload
     @classmethod
-    def create(  # type: ignore
+    def create(
         cls,
         *children,
         style: Sequence[Mapping[str, Any]]
@@ -29,9 +28,9 @@ class AppWrap(Fragment):
         autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
-        on_click: EventType[()] | None = None,
-        on_context_menu: EventType[()] | None = None,
-        on_double_click: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
         on_focus: EventType[()] | None = None,
         on_mount: EventType[()] | None = None,
         on_mouse_down: EventType[()] | None = None,
@@ -42,6 +41,7 @@ class AppWrap(Fragment):
         on_mouse_over: EventType[()] | None = None,
         on_mouse_up: EventType[()] | None = None,
         on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
         on_unmount: EventType[()] | None = None,
         **props,
     ) -> AppWrap: