reflex 0.7.14a6__py3-none-any.whl → 0.8.0a2__py3-none-any.whl

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

@@ -6,14 +6,19 @@ import env from "$/env.json";
 import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
 import { useEffect, useRef, useState } from "react";
-import Router, { useRouter } from "next/router";
+import {
+  useLocation,
+  useNavigate,
+  useSearchParams,
+  useParams,
+} from "react-router";
 import {
   initialEvents,
   initialState,
   onLoadInternalEvent,
   state_name,
   exception_state_name,
-} from "$/utils/context.js";
+} from "$/utils/context";
 import debounce from "$/utils/helpers/debounce";
 import throttle from "$/utils/helpers/throttle";
 
@@ -158,24 +163,48 @@ export const evalReactComponent = async (component) => {
  * Only Queue and process events when websocket connection exists.
  * @param event The event to queue.
  * @param socket The socket object to send the event on.
+ * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  *
  * @returns Adds event to queue and processes it if websocket exits, does nothing otherwise.
  */
-export const queueEventIfSocketExists = async (events, socket) => {
+export const queueEventIfSocketExists = async (
+  events,
+  socket,
+  navigate,
+  params,
+) => {
   if (!socket) {
     return;
   }
-  await queueEvents(events, socket);
+  await queueEvents(events, socket, navigate, params);
 };
 
+/**
+ * Check if a string is a valid HTTP URL.
+ * @param string The string to check.
+ *
+ * @returns The URL object if valid, undefined otherwise.
+ * */
+function urlFrom(string) {
+  try {
+    return new URL(string);
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
+
 /**
  * Handle frontend event or send the event to the backend via Websocket.
  * @param event The event to send.
  * @param socket The socket object to send the event on.
+ * @param navigate The navigate function from useNavigate
+ * @param params The params object from useParams
  *
  * @returns True if the event was sent, false if it was handled locally.
  */
-export const applyEvent = async (event, socket) => {
+export const applyEvent = async (event, socket, navigate, params) => {
   // Handle special events
   if (event.name == "_redirect") {
     if ((event.payload.path ?? undefined) === undefined) {
@@ -183,41 +212,54 @@ export const applyEvent = async (event, socket) => {
     }
     if (event.payload.external) {
       window.open(event.payload.path, "_blank", "noopener");
-    } else if (event.payload.replace) {
-      Router.replace(event.payload.path);
+      return false;
+    }
+    const url = urlFrom(event.payload.path);
+    let pathname = event.payload.path;
+    if (url) {
+      if (url.host !== window.location.host) {
+        // External URL
+        window.location.assign(event.payload.path);
+        return false;
+      } else {
+        pathname = url.pathname + url.search + url.hash;
+      }
+    }
+    if (event.payload.replace) {
+      navigate(pathname, { replace: true });
     } else {
-      Router.push(event.payload.path);
+      navigate(pathname);
     }
     return false;
   }
 
   if (event.name == "_remove_cookie") {
     cookies.remove(event.payload.key, { ...event.payload.options });
-    queueEventIfSocketExists(initialEvents(), socket);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_clear_local_storage") {
     localStorage.clear();
-    queueEventIfSocketExists(initialEvents(), socket);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_remove_local_storage") {
     localStorage.removeItem(event.payload.key);
-    queueEventIfSocketExists(initialEvents(), socket);
+    queueEventIfSocketExists(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_clear_session_storage") {
     sessionStorage.clear();
-    queueEvents(initialEvents(), socket);
+    queueEvents(initialEvents(), socket, navigate, params);
     return false;
   }
 
   if (event.name == "_remove_session_storage") {
     sessionStorage.removeItem(event.payload.key);
-    queueEvents(initialEvents(), socket);
+    queueEvents(initialEvents(), socket, navigate, params);
     return false;
   }
 
@@ -322,11 +364,15 @@ export const applyEvent = async (event, socket) => {
     event.router_data === undefined ||
     Object.keys(event.router_data).length === 0
   ) {
-    event.router_data = (({ pathname, query, asPath }) => ({
-      pathname,
-      query,
-      asPath,
-    }))(Router);
+    // Since we don't have router directly, we need to get info from our hooks
+    event.router_data = {
+      pathname: window.location.pathname,
+      query: {
+        ...Object.fromEntries(new URLSearchParams(window.location.search)),
+        ...params(),
+      },
+      asPath: window.location.pathname + window.location.search,
+    };
   }
 
   // Send the event to the server.
@@ -342,15 +388,22 @@ export const applyEvent = async (event, socket) => {
  * Send an event to the server via REST.
  * @param event The current event.
  * @param socket The socket object to send the response event(s) on.
+ * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  *
  * @returns Whether the event was sent.
  */
-export const applyRestEvent = async (event, socket) => {
+export const applyRestEvent = async (event, socket, navigate, params) => {
   let eventSent = false;
   if (event.handler === "uploadFiles") {
     if (event.payload.files === undefined || event.payload.files.length === 0) {
       // Submit the event over the websocket to trigger the event handler.
-      return await applyEvent(Event(event.name, { files: [] }), socket);
+      return await applyEvent(
+        Event(event.name, { files: [] }),
+        socket,
+        navigate,
+        params,
+      );
     }
 
     // Start upload, but do not wait for it, which would block other events.
@@ -371,8 +424,16 @@ export const applyRestEvent = async (event, socket) => {
  * @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.
+ * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
-export const queueEvents = async (events, socket, prepend) => {
+export const queueEvents = async (
+  events,
+  socket,
+  prepend,
+  navigate,
+  params,
+) => {
   if (prepend) {
     // Drain the existing queue and place it after the given events.
     events = [
@@ -383,14 +444,16 @@ export const queueEvents = async (events, socket, prepend) => {
     ];
   }
   event_queue.push(...events.filter((e) => e !== undefined && e !== null));
-  await processEvent(socket.current);
+  await processEvent(socket.current, navigate, params);
 };
 
 /**
  * Process an event off the event queue.
  * @param socket The socket object to send the event on.
+ * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
-export const processEvent = async (socket) => {
+export const processEvent = async (socket, navigate, params) => {
   // Only proceed if the socket is up and no event in the queue uses state, otherwise we throw the event into the void
   if (!socket && isStateful()) {
     return;
@@ -410,16 +473,16 @@ export const processEvent = async (socket) => {
   let eventSent = false;
   // Process events with handlers via REST and all others via websockets.
   if (event.handler) {
-    eventSent = await applyRestEvent(event, socket);
+    eventSent = await applyRestEvent(event, socket, navigate, params);
   } else {
-    eventSent = await applyEvent(event, socket);
+    eventSent = await applyEvent(event, socket, navigate, params);
   }
   // If no event was sent, set processing to false.
   if (!eventSent) {
     event_processing = false;
     // recursively call processEvent to drain the queue, since there is
     // no state update to trigger the useEffect event loop.
-    await processEvent(socket);
+    await processEvent(socket, navigate, params);
   }
 };
 
@@ -430,6 +493,8 @@ export const processEvent = async (socket) => {
  * @param transports The transports to use.
  * @param setConnectErrors The function to update connection error value.
  * @param client_storage The client storage object from context.js
+ * @param navigate The navigate function from React Router
+ * @param params The params object from React Router
  */
 export const connect = async (
   socket,
@@ -437,6 +502,8 @@ export const connect = async (
   transports,
   setConnectErrors,
   client_storage = {},
+  navigate,
+  params,
 ) => {
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
@@ -511,12 +578,12 @@ export const connect = async (
     applyClientStorageDelta(client_storage, update.delta);
     event_processing = !update.final;
     if (update.events) {
-      queueEvents(update.events, socket);
+      queueEvents(update.events, socket, false, navigate, params);
     }
   });
   socket.current.on("reload", async (event) => {
     event_processing = false;
-    queueEvents([...initialEvents(), event], socket, true);
+    queueEvents([...initialEvents(), event], socket, true, navigate, params);
   });
 
   document.addEventListener("visibilitychange", checkVisibility);
@@ -710,7 +777,10 @@ const applyClientStorageDelta = (client_storage, delta) => {
   );
   if (unqualified_states.length === 1) {
     const main_state = delta[unqualified_states[0]];
-    if (main_state.is_hydrated !== undefined && !main_state.is_hydrated) {
+    if (
+      main_state.is_hydrated_rx_state_ !== undefined &&
+      !main_state.is_hydrated_rx_state_
+    ) {
       // skip if the state is not hydrated yet, since all client storage
       // values are sent in the hydrate event
       return;
@@ -748,7 +818,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
 };
 
 /**
- * Establish websocket event loop for a NextJS page.
+ * Establish websocket event loop for a React Router page.
  * @param dispatch The reducer dispatch function to update state.
  * @param initial_events The initial app events.
  * @param client_storage The client storage object from context.js
@@ -763,8 +833,22 @@ export const useEventLoop = (
   client_storage = {},
 ) => {
   const socket = useRef(null);
-  const router = useRouter();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const paramsR = useParams();
+  const prevLocationRef = useRef(location);
+  const [searchParams] = useSearchParams();
   const [connectErrors, setConnectErrors] = useState([]);
+  const params = useRef(paramsR);
+
+  useEffect(() => {
+    const { "*": splat, ...remainingParams } = paramsR;
+    if (splat) {
+      params.current = { ...remainingParams, splat: splat.split("/") };
+    } else {
+      params.current = remainingParams;
+    }
+  }, [paramsR]);
 
   // Function to add new events to the event queue.
   const addEvents = (events, args, event_actions) => {
@@ -803,32 +887,38 @@ export const useEventLoop = (
       // If debounce is used, queue the events after some delay
       debounce(
         combined_name,
-        () => queueEvents(_events, socket),
+        () =>
+          queueEvents(_events, socket, false, navigate, () => params.current),
         event_actions.debounce,
       );
     } else {
-      queueEvents(_events, socket);
+      queueEvents(_events, socket, false, navigate, () => params.current);
     }
   };
 
   const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
   useEffect(() => {
-    if (router.isReady && !sentHydrate.current) {
+    if (!sentHydrate.current) {
       queueEvents(
         initial_events().map((e) => ({
           ...e,
-          router_data: (({ pathname, query, asPath }) => ({
-            pathname,
-            query,
-            asPath,
-          }))(router),
+          router_data: {
+            pathname: location.pathname,
+            query: {
+              ...Object.fromEntries(searchParams.entries()),
+              ...params.current,
+            },
+            asPath: location.pathname + location.search,
+          },
         })),
         socket,
         true,
+        navigate,
+        () => params.current,
       );
       sentHydrate.current = true;
     }
-  }, [router.isReady]);
+  }, []);
 
   // Handle frontend errors and send them to the backend via websocket.
   useEffect(() => {
@@ -871,6 +961,8 @@ export const useEventLoop = (
           ["websocket"],
           setConnectErrors,
           client_storage,
+          navigate,
+          () => params.current,
         );
       }
     }
@@ -885,14 +977,14 @@ export const useEventLoop = (
 
   // Main event loop.
   useEffect(() => {
-    // Skip if the router is not ready.
-    if (!router.isReady || isBackendDisabled()) {
+    // Skip if the backend is disabled
+    if (isBackendDisabled()) {
       return;
     }
     (async () => {
       // Process all outstanding events.
       while (event_queue.length > 0 && !event_processing) {
-        await processEvent(socket.current);
+        await processEvent(socket.current, navigate, () => params.current);
       }
     })();
   });
@@ -928,31 +1020,32 @@ export const useEventLoop = (
     return () => window.removeEventListener("storage", handleStorage);
   });
 
-  // Route after the initial page hydration.
+  // Route after the initial page hydration
   useEffect(() => {
-    const change_start = () => {
-      const main_state_dispatch = dispatch["reflex___state____state"];
-      if (main_state_dispatch !== undefined) {
-        main_state_dispatch({ is_hydrated: false });
-      }
-    };
-    const change_complete = () => addEvents(onLoadInternalEvent());
-    const change_error = () => {
-      // Remove cached error state from router for this page, otherwise the
-      // page will never send on_load events again.
-      if (router.components[router.pathname].error) {
-        delete router.components[router.pathname].error;
-      }
-    };
-    router.events.on("routeChangeStart", change_start);
-    router.events.on("routeChangeComplete", change_complete);
-    router.events.on("routeChangeError", change_error);
-    return () => {
-      router.events.off("routeChangeStart", change_start);
-      router.events.off("routeChangeComplete", change_complete);
-      router.events.off("routeChangeError", change_error);
-    };
-  }, [router]);
+    // This will run when the location changes
+    if (
+      location.pathname + location.search + location.hash !==
+      prevLocationRef.current.pathname +
+        prevLocationRef.current.search +
+        prevLocationRef.current.hash
+    ) {
+      // Equivalent to routeChangeStart - runs when navigation begins
+      const change_start = () => {
+        const main_state_dispatch = dispatch["reflex___state____state"];
+        if (main_state_dispatch !== undefined) {
+          main_state_dispatch({ is_hydrated_rx_state_: false });
+        }
+      };
+      change_start();
+
+      // Equivalent to routeChangeComplete - runs after navigation completes
+      const change_complete = () => addEvents(onLoadInternalEvent());
+      change_complete();
+
+      // Update the ref
+      prevLocationRef.current = location;
+    }
+  }, [location, dispatch, onLoadInternalEvent, addEvents]);
 
   return [addEvents, connectErrors];
 };

reflex/.templates/web/vite.config.js

@@ -0,0 +1,32 @@
+import { fileURLToPath, URL } from "url";
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig((config) => ({
+  plugins: [reactRouter()],
+  build: {
+    rollupOptions: {
+      jsx: {},
+    },
+  },
+  server: {
+    port: process.env.PORT,
+  },
+  resolve: {
+    mainFields: ["browser", "module", "jsnext"],
+    alias: [
+      {
+        find: "$",
+        replacement: fileURLToPath(new URL("./", import.meta.url)),
+      },
+      {
+        find: "@",
+        replacement: fileURLToPath(new URL("./public", import.meta.url)),
+      },
+    ].concat(
+      config.command === "build"
+        ? [{ find: "react-dom/server", replacement: "react-dom/server.node" }]
+        : [],
+    ),
+  },
+}));

reflex/__init__.py

@@ -279,12 +279,7 @@ _MAPPING: dict = {
     "components.el.elements.media": ["image"],
     "components.lucide": ["icon"],
     **COMPONENTS_BASE_MAPPING,
-    "components.suneditor": [
-        "editor",
-        "EditorButtonList",
-        "EditorOptions",
-    ],
-    "components": ["el", "radix", "lucide", "recharts", "next"],
+    "components": ["el", "radix", "lucide", "recharts"],
     "components.markdown": ["markdown"],
     **RADIX_MAPPING,
     "components.plotly": ["plotly"],

reflex/__init__.pyi

@@ -24,7 +24,6 @@ from .assets import asset as asset
 from .base import Base as Base
 from .components import el as el
 from .components import lucide as lucide
-from .components import next as next
 from .components import radix as radix
 from .components import recharts as recharts
 from .components.base.fragment import Fragment as Fragment
@@ -149,9 +148,6 @@ from .components.radix.themes.typography.text import text as text
 from .components.react_player import audio as audio
 from .components.react_player import video as video
 from .components.sonner.toast import toast as toast
-from .components.suneditor import EditorButtonList as EditorButtonList
-from .components.suneditor import EditorOptions as EditorOptions
-from .components.suneditor import editor as editor
 from .config import Config as Config
 from .config import DBConfig as DBConfig
 from .constants import Env as Env