reflex 0.7.0a3__py3-none-any.whl → 0.7.0a5__py3-none-any.whl

reflex/app.py

@@ -99,7 +99,15 @@ from reflex.state import (
     _substate_key,
     code_uses_state_contexts,
 )
-from reflex.utils import codespaces, console, exceptions, format, prerequisites, types
+from reflex.utils import (
+    codespaces,
+    console,
+    exceptions,
+    format,
+    path_ops,
+    prerequisites,
+    types,
+)
 from reflex.utils.exec import is_prod_mode, is_testing_env
 from reflex.utils.imports import ImportVar
 
@@ -974,9 +982,10 @@ class App(MiddlewareMixin, LifespanMixin):
         should_compile = self._should_compile()
 
         if not should_compile:
-            for route in self._unevaluated_pages:
-                console.debug(f"Evaluating page: {route}")
-                self._compile_page(route, save_page=should_compile)
+            with console.timing("Evaluate Pages (Backend)"):
+                for route in self._unevaluated_pages:
+                    console.debug(f"Evaluating page: {route}")
+                    self._compile_page(route, save_page=should_compile)
 
             # Add the optional endpoints (_upload)
             self._add_optional_endpoints()
@@ -1002,10 +1011,11 @@ class App(MiddlewareMixin, LifespanMixin):
             + adhoc_steps_without_executor,
         )
 
-        for route in self._unevaluated_pages:
-            console.debug(f"Evaluating page: {route}")
-            self._compile_page(route, save_page=should_compile)
-            progress.advance(task)
+        with console.timing("Evaluate Pages (Frontend)"):
+            for route in self._unevaluated_pages:
+                console.debug(f"Evaluating page: {route}")
+                self._compile_page(route, save_page=should_compile)
+                progress.advance(task)
 
         # Add the optional endpoints (_upload)
         self._add_optional_endpoints()
@@ -1013,7 +1023,7 @@ class App(MiddlewareMixin, LifespanMixin):
         self._validate_var_dependencies()
         self._setup_overlay_component()
         self._setup_error_boundary()
-        if config.show_built_with_reflex:
+        if is_prod_mode() and config.show_built_with_reflex:
             self._setup_sticky_badge()
 
         progress.advance(task)
@@ -1040,13 +1050,13 @@ class App(MiddlewareMixin, LifespanMixin):
             custom_components |= component._get_all_custom_components()
 
         # Perform auto-memoization of stateful components.
-        (
-            stateful_components_path,
-            stateful_components_code,
-            page_components,
-        ) = compiler.compile_stateful_components(self._pages.values())
-
-        progress.advance(task)
+        with console.timing("Auto-memoize StatefulComponents"):
+            (
+                stateful_components_path,
+                stateful_components_code,
+                page_components,
+            ) = compiler.compile_stateful_components(self._pages.values())
+            progress.advance(task)
 
         # Catch "static" apps (that do not define a rx.State subclass) which are trying to access rx.State.
         if code_uses_state_contexts(stateful_components_code) and self._state is None:
@@ -1069,6 +1079,17 @@ class App(MiddlewareMixin, LifespanMixin):
 
         progress.advance(task)
 
+        # Copy the assets.
+        assets_src = Path.cwd() / constants.Dirs.APP_ASSETS
+        if assets_src.is_dir():
+            with console.timing("Copy assets"):
+                path_ops.update_directory_tree(
+                    src=assets_src,
+                    dest=(
+                        Path.cwd() / prerequisites.get_web_dir() / constants.Dirs.PUBLIC
+                    ),
+                )
+
         # Use a forking process pool, if possible.  Much faster, especially for large sites.
         # Fallback to ThreadPoolExecutor as something that will always work.
         executor = None
@@ -1121,9 +1142,10 @@ class App(MiddlewareMixin, LifespanMixin):
                 _submit_work(compiler.remove_tailwind_from_postcss)
 
             # Wait for all compilation tasks to complete.
-            for future in concurrent.futures.as_completed(result_futures):
-                compile_results.append(future.result())
-                progress.advance(task)
+            with console.timing("Compile to Javascript"):
+                for future in concurrent.futures.as_completed(result_futures):
+                    compile_results.append(future.result())
+                    progress.advance(task)
 
         app_root = self._app_root(app_wrappers=app_wrappers)
 
@@ -1158,7 +1180,8 @@ class App(MiddlewareMixin, LifespanMixin):
         progress.stop()
 
         # Install frontend packages.
-        self._get_frontend_packages(all_imports)
+        with console.timing("Install Frontend Packages"):
+            self._get_frontend_packages(all_imports)
 
         # Setup the next.config.js
         transpile_packages = [
@@ -1184,8 +1207,9 @@ class App(MiddlewareMixin, LifespanMixin):
                     # Remove pages that are no longer in the app.
                     p.unlink()
 
-        for output_path, code in compile_results:
-            compiler_utils.write_page(output_path, code)
+        with console.timing("Write to Disk"):
+            for output_path, code in compile_results:
+                compiler_utils.write_page(output_path, code)
 
     @contextlib.asynccontextmanager
     async def modify_state(self, token: str) -> AsyncIterator[BaseState]:

reflex/compiler/utils.py

@@ -119,24 +119,34 @@ def compile_imports(import_dict: ParsedImportDict) -> list[dict]:
     validate_imports(collapsed_import_dict)
     import_dicts = []
     for lib, fields in collapsed_import_dict.items():
-        default, rest = compile_import_statement(fields)
-
         # prevent lib from being rendered on the page if all imports are non rendered kind
         if not any(f.render for f in fields):
             continue
 
-        if not lib:
-            if default:
-                raise ValueError("No default field allowed for empty library.")
-            if rest is None or len(rest) == 0:
-                raise ValueError("No fields to import.")
-            import_dicts.extend(get_import_dict(module) for module in sorted(rest))
-            continue
+        lib_paths: dict[str, list[ImportVar]] = {}
+
+        for field in fields:
+            lib_paths.setdefault(field.package_path, []).append(field)
 
-        # remove the version before rendering the package imports
-        lib = format.format_library_name(lib)
+        compiled = {
+            path: compile_import_statement(fields) for path, fields in lib_paths.items()
+        }
+
+        for path, (default, rest) in compiled.items():
+            if not lib:
+                if default:
+                    raise ValueError("No default field allowed for empty library.")
+                if rest is None or len(rest) == 0:
+                    raise ValueError("No fields to import.")
+                import_dicts.extend(get_import_dict(module) for module in sorted(rest))
+                continue
+
+            # remove the version before rendering the package imports
+            formatted_lib = format.format_library_name(lib) + (
+                path if path != "/" else ""
+            )
 
-        import_dicts.append(get_import_dict(lib, default, rest))
+            import_dicts.append(get_import_dict(formatted_lib, default, rest))
     return import_dicts
 
 

reflex/components/core/sticky.py

@@ -2,14 +2,12 @@
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.colors import color
-from reflex.components.core.cond import color_mode_cond, cond
-from reflex.components.core.responsive import tablet_and_desktop
+from reflex.components.core.cond import color_mode_cond
+from reflex.components.core.responsive import desktop_only
 from reflex.components.el.elements.inline import A
 from reflex.components.el.elements.media import Path, Rect, Svg
 from reflex.components.radix.themes.typography.text import Text
-from reflex.experimental.client_state import ClientStateVar
 from reflex.style import Style
-from reflex.vars.base import Var, VarData
 
 
 class StickyLogo(Svg):
@@ -87,7 +85,7 @@ class StickyBadge(A):
         """
         return super().create(
             StickyLogo.create(),
-            tablet_and_desktop(StickyLabel.create()),
+            desktop_only(StickyLabel.create()),
             href="https://reflex.dev",
             target="_blank",
             width="auto",
@@ -102,36 +100,12 @@ class StickyBadge(A):
         Returns:
             The style of the component.
         """
-        is_localhost_cs = ClientStateVar.create(
-            "is_localhost",
-            default=True,
-            global_ref=False,
-        )
-        localhost_hostnames = Var.create(
-            ["localhost", "127.0.0.1", "[::1]"]
-        ).guess_type()
-        is_localhost_expr = localhost_hostnames.contains(
-            Var("window.location.hostname", _var_type=str).guess_type(),
-        )
-        check_is_localhost = Var(
-            f"useEffect(({is_localhost_cs}) => {is_localhost_cs.set}({is_localhost_expr}), [])",
-            _var_data=VarData(
-                imports={"react": "useEffect"},
-            ),
-        )
-        is_localhost = is_localhost_cs.value._replace(
-            merge_var_data=VarData.merge(
-                check_is_localhost._get_all_var_data(),
-                VarData(hooks={str(check_is_localhost): None}),
-            ),
-        )
         return Style(
             {
                 "position": "fixed",
                 "bottom": "1rem",
                 "right": "1rem",
-                # Do not show the badge on localhost.
-                "display": cond(is_localhost, "none", "flex"),
+                "display": "flex",
                 "flex-direction": "row",
                 "gap": "0.375rem",
                 "align-items": "center",

reflex/components/plotly/__init__.py

@@ -1,5 +1,32 @@
 """Plotly components."""
 
-from .plotly import Plotly
+from reflex.components.component import ComponentNamespace
 
-plotly = Plotly.create
+from .plotly import (
+    Plotly,
+    PlotlyBasic,
+    PlotlyCartesian,
+    PlotlyFinance,
+    PlotlyGeo,
+    PlotlyGl2d,
+    PlotlyGl3d,
+    PlotlyMapbox,
+    PlotlyStrict,
+)
+
+
+class PlotlyNamespace(ComponentNamespace):
+    """Plotly namespace."""
+
+    __call__ = Plotly.create
+    basic = PlotlyBasic.create
+    cartesian = PlotlyCartesian.create
+    geo = PlotlyGeo.create
+    gl2d = PlotlyGl2d.create
+    gl3d = PlotlyGl3d.create
+    finance = PlotlyFinance.create
+    mapbox = PlotlyMapbox.create
+    strict = PlotlyStrict.create
+
+
+plotly = PlotlyNamespace()

reflex/components/plotly/plotly.py

@@ -10,6 +10,7 @@ from reflex.components.component import Component, NoSSRComponent
 from reflex.components.core.cond import color_mode_cond
 from reflex.event import EventHandler, no_args_event_spec
 from reflex.utils import console
+from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars.base import LiteralVar, Var
 
 try:
@@ -278,3 +279,237 @@ const extractPoints = (points) => {
             # Spread the figure dict over props, nothing to merge.
             tag.special_props.append(Var(_js_expr=f"{{...{figure!s}}}"))
         return tag
+
+
+CREATE_PLOTLY_COMPONENT: ImportDict = {
+    "react-plotly.js": [
+        ImportVar(
+            tag="createPlotlyComponent",
+            is_default=True,
+            package_path="/factory",
+        ),
+    ]
+}
+
+
+def dynamic_plotly_import(name: str, package: str) -> str:
+    """Create a dynamic import for a plotly component.
+
+    Args:
+        name: The name of the component.
+        package: The package path of the component.
+
+    Returns:
+        The dynamic import for the plotly component.
+    """
+    return f"""
+const {name} = dynamic(() => import('{package}').then(mod => createPlotlyComponent(mod)), {{ssr: false}})
+"""
+
+
+class PlotlyBasic(Plotly):
+    """Display a basic plotly graph."""
+
+    tag: str = "BasicPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-basic-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly basic component.
+
+        Returns:
+            The imports for the plotly basic component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly basic component.
+
+        Returns:
+            The dynamic imports for the plotly basic component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-basic-dist-min")
+
+
+class PlotlyCartesian(Plotly):
+    """Display a plotly cartesian graph."""
+
+    tag: str = "CartesianPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-cartesian-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly cartesian component.
+
+        Returns:
+            The imports for the plotly cartesian component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly cartesian component.
+
+        Returns:
+            The dynamic imports for the plotly cartesian component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-cartesian-dist-min")
+
+
+class PlotlyGeo(Plotly):
+    """Display a plotly geo graph."""
+
+    tag: str = "GeoPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-geo-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly geo component.
+
+        Returns:
+            The imports for the plotly geo component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly geo component.
+
+        Returns:
+            The dynamic imports for the plotly geo component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-geo-dist-min")
+
+
+class PlotlyGl3d(Plotly):
+    """Display a plotly 3d graph."""
+
+    tag: str = "Gl3dPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-gl3d-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly 3d component.
+
+        Returns:
+            The imports for the plotly 3d component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly 3d component.
+
+        Returns:
+            The dynamic imports for the plotly 3d component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-gl3d-dist-min")
+
+
+class PlotlyGl2d(Plotly):
+    """Display a plotly 2d graph."""
+
+    tag: str = "Gl2dPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-gl2d-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly 2d component.
+
+        Returns:
+            The imports for the plotly 2d component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly 2d component.
+
+        Returns:
+            The dynamic imports for the plotly 2d component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-gl2d-dist-min")
+
+
+class PlotlyMapbox(Plotly):
+    """Display a plotly mapbox graph."""
+
+    tag: str = "MapboxPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-mapbox-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly mapbox component.
+
+        Returns:
+            The imports for the plotly mapbox component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly mapbox component.
+
+        Returns:
+            The dynamic imports for the plotly mapbox component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-mapbox-dist-min")
+
+
+class PlotlyFinance(Plotly):
+    """Display a plotly finance graph."""
+
+    tag: str = "FinancePlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-finance-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly finance component.
+
+        Returns:
+            The imports for the plotly finance component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly finance component.
+
+        Returns:
+            The dynamic imports for the plotly finance component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-finance-dist-min")
+
+
+class PlotlyStrict(Plotly):
+    """Display a plotly strict graph."""
+
+    tag: str = "StrictPlotlyPlot"
+
+    library = "react-plotly.js@2.6.0"
+
+    lib_dependencies: list[str] = ["plotly.js-strict-dist-min@3.0.0"]
+
+    def add_imports(self) -> ImportDict | list[ImportDict]:
+        """Add imports for the plotly strict component.
+
+        Returns:
+            The imports for the plotly strict component.
+        """
+        return CREATE_PLOTLY_COMPONENT
+
+    def _get_dynamic_imports(self) -> str:
+        """Get the dynamic imports for the plotly strict component.
+
+        Returns:
+            The dynamic imports for the plotly strict component.
+        """
+        return dynamic_plotly_import(self.tag, "plotly.js-strict-dist-min")