reflex 0.7.2a2__py3-none-any.whl → 0.7.3__py3-none-any.whl

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

@@ -1,11 +1,14 @@
 {% extends "web/pages/base_page.js.jinja2" %}
 {% from "web/pages/macros.js.jinja2" import renderHooks %}
-{% block export %}
-{% for component in components %}
 
-{% for custom_code in component.custom_code %}
+{% block declaration %}
+{% for custom_code in custom_codes %}
 {{custom_code}}
 {% endfor %}
+{% endblock %}
+
+{% block export %}
+{% for component in components %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
     {{ renderHooks(component.hooks) }}

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

@@ -11,7 +11,7 @@ export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
   const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light"
+    defaultColorMode === "dark" ? "dark" : "light",
   );
 
   useEffect(() => {

reflex/.templates/web/components/shiki/code.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react"
-import { codeToHtml} from "shiki"
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
 
 /**
  * Code component that uses Shiki to convert code to HTML and render it.
@@ -12,23 +12,28 @@ import { codeToHtml} from "shiki"
  * @param divProps - Additional properties to be passed to the div element.
  * @returns The rendered code block.
  */
-export function Code ({code, theme, language, transformers, decorations, ...divProps}) {
-    const [codeResult, setCodeResult] = useState("")
-    useEffect(() => {
-        async function fetchCode() {
-          const result = await codeToHtml(code, {
-            lang: language,
-            theme,
-            transformers,
-            decorations
-          });
-          setCodeResult(result);
-        }
-        fetchCode();
-      }, [code, language, theme, transformers, decorations]
-
-    )
-    return (
-        <div dangerouslySetInnerHTML={{__html: codeResult}} {...divProps}  ></div>
-    )
+export function Code({
+  code,
+  theme,
+  language,
+  transformers,
+  decorations,
+  ...divProps
+}) {
+  const [codeResult, setCodeResult] = useState("");
+  useEffect(() => {
+    async function fetchCode() {
+      const result = await codeToHtml(code, {
+        lang: language,
+        theme,
+        transformers,
+        decorations,
+      });
+      setCodeResult(result);
+    }
+    fetchCode();
+  }, [code, language, theme, transformers, decorations]);
+  return (
+    <div dangerouslySetInnerHTML={{ __html: codeResult }} {...divProps}></div>
+  );
 }

reflex/.templates/web/postcss.config.js

@@ -4,4 +4,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

reflex/.templates/web/utils/client_side_routing.js

@@ -10,32 +10,34 @@ import { useRouter } from "next/router";
  * @returns {boolean} routeNotFound - true if the current route is an actual 404
  */
 export const useClientSideRouting = () => {
-  const [routeNotFound, setRouteNotFound] = useState(false)
-  const didRedirect = useRef(false)
-  const router = useRouter()
+  const [routeNotFound, setRouteNotFound] = useState(false);
+  const didRedirect = useRef(false);
+  const router = useRouter();
   useEffect(() => {
     if (
       router.isReady &&
-      !didRedirect.current  // have not tried redirecting yet
+      !didRedirect.current // have not tried redirecting yet
     ) {
-      didRedirect.current = true  // never redirect twice to avoid "Hard Navigate" error
+      didRedirect.current = true; // never redirect twice to avoid "Hard Navigate" error
       // attempt to redirect to the route in the browser address bar once
-      router.replace({
+      router
+        .replace({
           pathname: window.location.pathname,
           query: window.location.search.slice(1),
-      }).then(()=>{
+        })
+        .then(() => {
           // Check if the current route is /404
-        if (router.pathname === '/404') {
-          setRouteNotFound(true); // Mark as an actual 404
-        }
-    })
-      .catch((e) => {
-        setRouteNotFound(true)  // navigation failed, so this is a real 404
-      })
+          if (router.pathname === "/404") {
+            setRouteNotFound(true); // Mark as an actual 404
+          }
+        })
+        .catch((e) => {
+          setRouteNotFound(true); // navigation failed, so this is a real 404
+        });
     }
   }, [router.isReady]);
 
   // Return the reactive bool, to avoid flashing 404 page until we know for sure
   // the route is not found.
-  return routeNotFound
-}
+  return routeNotFound;
+};

reflex/.templates/web/utils/helpers/dataeditor.js

@@ -48,7 +48,7 @@ export function formatCell(value, column) {
       };
     default:
       console.log(
-        "Warning: column.type is undefined for column.title=" + column.title
+        "Warning: column.type is undefined for column.title=" + column.title,
       );
       return {
         kind: GridCellKind.Text,

reflex/.templates/web/utils/helpers/range.js

@@ -1,43 +1,43 @@
 /**
  * Simulate the python range() builtin function.
  * inspired by https://dev.to/guyariely/using-python-range-in-javascript-337p
- * 
+ *
  * If needed outside of an iterator context, use `Array.from(range(10))` or
  * spread syntax `[...range(10)]` to get an array.
- * 
+ *
  * @param {number} start: the start or end of the range.
  * @param {number} stop: the end of the range.
  * @param {number} step: the step of the range.
  * @returns {object} an object with a Symbol.iterator method over the range
  */
 export default function range(start, stop, step) {
-    return {
-      [Symbol.iterator]() {
-        if (stop === undefined) {
-          stop = start;
-          start = 0;
-        }
-        if (step === undefined) {
-          step = 1;
-        }
-  
-        let i = start - step;
-  
-        return {
-          next() {
-            i += step;
-            if ((step > 0 && i < stop) || (step < 0 && i > stop)) {
-              return {
-                value: i,
-                done: false,
-              };
-            }
+  return {
+    [Symbol.iterator]() {
+      if (stop === undefined) {
+        stop = start;
+        start = 0;
+      }
+      if (step === undefined) {
+        step = 1;
+      }
+
+      let i = start - step;
+
+      return {
+        next() {
+          i += step;
+          if ((step > 0 && i < stop) || (step < 0 && i > stop)) {
             return {
-              value: undefined,
-              done: true,
+              value: i,
+              done: false,
             };
-          },
-        };
-      },
-    };
-  }
+          }
+          return {
+            value: undefined,
+            done: true,
+          };
+        },
+      };
+    },
+  };
+}

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

@@ -227,8 +227,8 @@ export const applyEvent = async (event, socket) => {
       a.href = eval?.(
         event.payload.url.replace(
           "getBackendURL(env.UPLOAD)",
-          `"${getBackendURL(env.UPLOAD)}"`
-        )
+          `"${getBackendURL(env.UPLOAD)}"`,
+        ),
       );
     }
     a.download = event.payload.filename;
@@ -341,7 +341,7 @@ export const applyRestEvent = async (event, socket) => {
       event.payload.files,
       event.payload.upload_id,
       event.payload.on_upload_progress,
-      socket
+      socket,
     );
     return false;
   }
@@ -352,8 +352,18 @@ export const applyRestEvent = async (event, socket) => {
  * Queue events to be processed and trigger processing of queue.
  * @param events Array of events to queue.
  * @param socket The socket object to send the event on.
+ * @param prepend Whether to place the events at the beginning of the queue.
  */
-export const queueEvents = async (events, socket) => {
+export const queueEvents = async (events, socket, prepend) => {
+  if (prepend) {
+    // Drain the existing queue and place it after the given events.
+    events = [
+      ...events,
+      ...Array.from({ length: event_queue.length }).map(() =>
+        event_queue.shift(),
+      ),
+    ];
+  }
   event_queue.push(...events);
   await processEvent(socket.current);
 };
@@ -408,7 +418,7 @@ export const connect = async (
   dispatch,
   transports,
   setConnectErrors,
-  client_storage = {}
+  client_storage = {},
 ) => {
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
@@ -441,6 +451,13 @@ export const connect = async (
     }
   }
 
+  const disconnectTrigger = (event) => {
+    if (socket.current?.connected) {
+      console.log("Disconnect websocket on unload");
+      socket.current.disconnect();
+    }
+  };
+
   const pagehideHandler = (event) => {
     if (event.persisted && socket.current?.connected) {
       console.log("Disconnect backend before bfcache on navigation");
@@ -452,6 +469,8 @@ export const connect = async (
   socket.current.on("connect", () => {
     setConnectErrors([]);
     window.addEventListener("pagehide", pagehideHandler);
+    window.addEventListener("beforeunload", disconnectTrigger);
+    window.addEventListener("unload", disconnectTrigger);
   });
 
   socket.current.on("connect_error", (error) => {
@@ -461,6 +480,8 @@ export const connect = async (
   // When the socket disconnects reset the event_processing flag
   socket.current.on("disconnect", () => {
     event_processing = false;
+    window.removeEventListener("unload", disconnectTrigger);
+    window.removeEventListener("beforeunload", disconnectTrigger);
     window.removeEventListener("pagehide", pagehideHandler);
   });
 
@@ -477,7 +498,7 @@ export const connect = async (
   });
   socket.current.on("reload", async (event) => {
     event_processing = false;
-    queueEvents([...initialEvents(), event], socket);
+    queueEvents([...initialEvents(), event], socket, true);
   });
 
   document.addEventListener("visibilitychange", checkVisibility);
@@ -499,7 +520,7 @@ export const uploadFiles = async (
   files,
   upload_id,
   on_upload_progress,
-  socket
+  socket,
 ) => {
   // return if there's no file to upload
   if (files === undefined || files.length === 0) {
@@ -604,7 +625,7 @@ export const Event = (
   name,
   payload = {},
   event_actions = {},
-  handler = null
+  handler = null,
 ) => {
   return { name, payload, handler, event_actions };
 };
@@ -631,7 +652,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.local_storage) {
       const options = client_storage.local_storage[state_key];
       const local_storage_value = localStorage.getItem(
-        options.name || state_key
+        options.name || state_key,
       );
       if (local_storage_value !== null) {
         client_storage_values[state_key] = local_storage_value;
@@ -642,7 +663,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.session_storage) {
       const session_options = client_storage.session_storage[state_key];
       const session_storage_value = sessionStorage.getItem(
-        session_options.name || state_key
+        session_options.name || state_key,
       );
       if (session_storage_value != null) {
         client_storage_values[state_key] = session_storage_value;
@@ -667,7 +688,7 @@ export const hydrateClientStorage = (client_storage) => {
 const applyClientStorageDelta = (client_storage, delta) => {
   // find the main state and check for is_hydrated
   const unqualified_states = Object.keys(delta).filter(
-    (key) => key.split(".").length === 1
+    (key) => key.split(".").length === 1,
   );
   if (unqualified_states.length === 1) {
     const main_state = delta[unqualified_states[0]];
@@ -701,7 +722,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
         const session_options = client_storage.session_storage[state_key];
         sessionStorage.setItem(
           session_options.name || state_key,
-          delta[substate][key]
+          delta[substate][key],
         );
       }
     }
@@ -721,7 +742,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
 export const useEventLoop = (
   dispatch,
   initial_events = () => [],
-  client_storage = {}
+  client_storage = {},
 ) => {
   const socket = useRef(null);
   const router = useRouter();
@@ -735,7 +756,7 @@ export const useEventLoop = (
 
     event_actions = events.reduce(
       (acc, e) => ({ ...acc, ...e.event_actions }),
-      event_actions ?? {}
+      event_actions ?? {},
     );
 
     const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
@@ -763,7 +784,7 @@ export const useEventLoop = (
       debounce(
         combined_name,
         () => queueEvents(events, socket),
-        event_actions.debounce
+        event_actions.debounce,
       );
     } else {
       queueEvents(events, socket);
@@ -773,16 +794,17 @@ export const useEventLoop = (
   const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
   useEffect(() => {
     if (router.isReady && !sentHydrate.current) {
-      const events = initial_events();
-      addEvents(
-        events.map((e) => ({
+      queueEvents(
+        initial_events().map((e) => ({
           ...e,
           router_data: (({ pathname, query, asPath }) => ({
             pathname,
             query,
             asPath,
           }))(router),
-        }))
+        })),
+        socket,
+        true,
       );
       sentHydrate.current = true;
     }
@@ -828,7 +850,7 @@ export const useEventLoop = (
           dispatch,
           ["websocket"],
           setConnectErrors,
-          client_storage
+          client_storage,
         );
       }
     }
@@ -876,7 +898,7 @@ export const useEventLoop = (
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
           `${state_name}.reflex___state____update_vars_internal_state.update_vars_internal`,
-          { vars: vars }
+          { vars: vars },
         );
         addEvents([event], e);
       }
@@ -969,7 +991,7 @@ export const getRefValues = (refs) => {
   return refs.map((ref) =>
     ref.current
       ? ref.current.value || ref.current.getAttribute("aria-valuenow")
-      : null
+      : null,
   );
 };
 

reflex/app_mixins/middleware.py

@@ -16,11 +16,11 @@ from .mixin import AppMixin
 class MiddlewareMixin(AppMixin):
     """Middleware Mixin that allow to add middleware to the app."""
 
-    # Middleware to add to the app. Users should use `add_middleware`. PRIVATE.
-    middleware: list[Middleware] = dataclasses.field(default_factory=list)
+    # Middleware to add to the app. Users should use `add_middleware`.
+    _middlewares: list[Middleware] = dataclasses.field(default_factory=list)
 
     def _init_mixin(self):
-        self.middleware.append(HydrateMiddleware())
+        self._middlewares.append(HydrateMiddleware())
 
     def add_middleware(self, middleware: Middleware, index: int | None = None):
         """Add middleware to the app.
@@ -30,9 +30,9 @@ class MiddlewareMixin(AppMixin):
             index: The index to add the middleware at.
         """
         if index is None:
-            self.middleware.append(middleware)
+            self._middlewares.append(middleware)
         else:
-            self.middleware.insert(index, middleware)
+            self._middlewares.insert(index, middleware)
 
     async def _preprocess(self, state: BaseState, event: Event) -> StateUpdate | None:
         """Preprocess the event.
@@ -50,7 +50,7 @@ class MiddlewareMixin(AppMixin):
         Returns:
             An optional state to return.
         """
-        for middleware in self.middleware:
+        for middleware in self._middlewares:
             if asyncio.iscoroutinefunction(middleware.preprocess):
                 out = await middleware.preprocess(app=self, state=state, event=event)  # pyright: ignore [reportArgumentType]
             else:
@@ -74,7 +74,8 @@ class MiddlewareMixin(AppMixin):
         Returns:
             The state update to return.
         """
-        for middleware in self.middleware:
+        out = update
+        for middleware in self._middlewares:
             if asyncio.iscoroutinefunction(middleware.postprocess):
                 out = await middleware.postprocess(
                     app=self,  # pyright: ignore [reportArgumentType]
@@ -89,6 +90,4 @@ class MiddlewareMixin(AppMixin):
                     event=event,
                     update=update,
                 )
-            if out is not None:
-                return out  # pyright: ignore [reportReturnType]
-        return update
+        return out  # pyright: ignore[reportReturnType]

reflex/compiler/compiler.py

@@ -247,12 +247,19 @@ def _compile_components(
         for comp_import in comp_render["dynamic_imports"]
     }
 
+    custom_codes = {
+        comp_custom_code: None
+        for comp_render in component_renders
+        for comp_custom_code in comp_render.get("custom_code", [])
+    }
+
     # Compile the components page.
     return (
         templates.COMPONENTS.render(
             imports=utils.compile_imports(imports),
             components=component_renders,
             dynamic_imports=dynamic_imports,
+            custom_codes=custom_codes,
         ),
         imports,
     )

reflex/components/core/banner.py

@@ -382,7 +382,7 @@ class BackendDisabled(Div):
                             ),
                             rx.hstack(
                                 rx.el.svg(
-                                    rx.el.svg.path(
+                                    rx.el.path(
                                         d="M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z",
                                         fill_rule="evenodd",
                                         clip_rule="evenodd",

reflex/components/core/foreach.py

@@ -100,8 +100,9 @@ class Foreach(Component):
             component.children = [component._render().render_component()]
         except UntypedVarError as e:
             raise UntypedVarError(
-                f"Could not foreach over var `{iterable!s}` without a type annotation. "
-                "See https://reflex.dev/docs/library/dynamic-rendering/foreach/"
+                iterable,
+                "foreach",
+                "https://reflex.dev/docs/library/dynamic-rendering/foreach/",
             ) from e
         return component
 

reflex/components/datadisplay/logo.py

@@ -18,7 +18,7 @@ def svg_logo(
     """
 
     def logo_path(d: str):
-        return rx.el.svg.path(d=d)
+        return rx.el.path(d=d)
 
     paths = [
         "M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z",

reflex/components/el/__init__.pyi

@@ -90,29 +90,51 @@ from .elements.inline import u as u
 from .elements.inline import wbr as wbr
 from .elements.media import Area as Area
 from .elements.media import Audio as Audio
+from .elements.media import Circle as Circle
+from .elements.media import Defs as Defs
+from .elements.media import Ellipse as Ellipse
 from .elements.media import Embed as Embed
 from .elements.media import Iframe as Iframe
 from .elements.media import Img as Img
+from .elements.media import Line as Line
+from .elements.media import LinearGradient as LinearGradient
 from .elements.media import Map as Map
 from .elements.media import Object as Object
+from .elements.media import Path as Path
 from .elements.media import Picture as Picture
+from .elements.media import Polygon as Polygon
 from .elements.media import Portal as Portal
+from .elements.media import RadialGradient as RadialGradient
+from .elements.media import Rect as Rect
 from .elements.media import Source as Source
+from .elements.media import Stop as Stop
 from .elements.media import Svg as Svg
+from .elements.media import Text as Text
 from .elements.media import Track as Track
 from .elements.media import Video as Video
 from .elements.media import area as area
 from .elements.media import audio as audio
+from .elements.media import circle as circle
+from .elements.media import defs as defs
+from .elements.media import ellipse as ellipse
 from .elements.media import embed as embed
 from .elements.media import iframe as iframe
 from .elements.media import image as image
 from .elements.media import img as img
+from .elements.media import line as line
+from .elements.media import linear_gradient as linear_gradient
 from .elements.media import map as map
 from .elements.media import object as object
+from .elements.media import path as path
 from .elements.media import picture as picture
+from .elements.media import polygon as polygon
 from .elements.media import portal as portal
+from .elements.media import radial_gradient as radial_gradient
+from .elements.media import rect as rect
 from .elements.media import source as source
+from .elements.media import stop as stop
 from .elements.media import svg as svg
+from .elements.media import text as text
 from .elements.media import track as track
 from .elements.media import video as video
 from .elements.metadata import Base as Base

reflex/components/el/elements/__init__.py

@@ -66,6 +66,17 @@ _MAPPING = {
         "portal",
         "source",
         "svg",
+        "text",
+        "line",
+        "circle",
+        "ellipse",
+        "rect",
+        "polygon",
+        "path",
+        "stop",
+        "linear_gradient",
+        "radial_gradient",
+        "defs",
     ],
     "metadata": [
         "base",
@@ -128,7 +139,15 @@ _MAPPING = {
 
 EXCLUDE = ["del_", "Del", "image"]
 for v in _MAPPING.values():
-    v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
+    from reflex.utils.format import to_camel_case
+
+    v.extend(
+        [
+            to_camel_case(mod)[0].upper() + to_camel_case(mod)[1:]
+            for mod in v
+            if mod not in EXCLUDE
+        ]
+    )
 
 _SUBMOD_ATTRS: dict[str, list[str]] = _MAPPING