Merge remote-tracking branch 'origin/main' into release/reflex-0.8.15

Author: adhami3310

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

@@ -529,6 +529,14 @@ export const connect = async (
   navigate,
   params,
 ) => {
+  // Socket already allocated, just reconnect it if needed.
+  if (socket.current) {
+    if (!socket.current.connected) {
+      socket.current.reconnect();
+    }
+    return;
+  }
+
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
   const on_hydrated_queue = [];
@@ -540,7 +548,9 @@ export const connect = async (
     protocols: [reflexEnvironment.version],
     autoUnref: false,
     query: { token: getToken() },
+    reconnection: false, // Reconnection will be handled manually.
   });
+  socket.current.wait_connect = !socket.current.connected;
   // Ensure undefined fields in events are sent as null instead of removed
   socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v);
   socket.current.io.decoder.tryParse = (str) => {
@@ -550,6 +560,18 @@ export const connect = async (
       return false;
     }
   };
+  // Set up a reconnect helper function
+  socket.current.reconnect = () => {
+    if (
+      socket.current &&
+      !socket.current.connected &&
+      !socket.current.wait_connect
+    ) {
+      socket.current.wait_connect = true;
+      socket.current.io.opts.query = { token: getToken() }; // Update token for reconnect.
+      socket.current.connect();
+    }
+  };
 
   function checkVisibility() {
     if (document.visibilityState === "visible") {
@@ -565,7 +587,7 @@ export const connect = async (
         );
       } else if (!socket.current.connected) {
         console.log("Socket is disconnected, attempting to reconnect ");
-        socket.current.connect();
+        socket.current.reconnect();
       } else {
         console.log("Socket is reconnected ");
       }
@@ -588,6 +610,7 @@ export const connect = async (
 
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", async () => {
+    socket.current.wait_connect = false;
     setConnectErrors([]);
     window.addEventListener("pagehide", pagehideHandler);
     window.addEventListener("beforeunload", disconnectTrigger);
@@ -599,16 +622,33 @@ export const connect = async (
   });
 
   socket.current.on("connect_error", (error) => {
-    setConnectErrors((connectErrors) => [connectErrors.slice(-9), error]);
+    socket.current.wait_connect = false;
+    let n_connect_errors = 0;
+    setConnectErrors((connectErrors) => {
+      const new_errors = [...connectErrors.slice(-9), error];
+      n_connect_errors = new_errors.length;
+      return new_errors;
+    });
+    window.setTimeout(() => {
+      if (socket.current && !socket.current.connected) {
+        socket.current.reconnect();
+      }
+    }, 200 * n_connect_errors); // Incremental backoff
   });
 
   // When the socket disconnects reset the event_processing flag
-  socket.current.on("disconnect", () => {
-    socket.current = null; // allow reconnect to occur automatically
+  socket.current.on("disconnect", (reason, details) => {
+    socket.current.wait_connect = false;
+    const try_reconnect =
+      reason !== "io server disconnect" && reason !== "io client disconnect";
     event_processing = false;
     window.removeEventListener("unload", disconnectTrigger);
     window.removeEventListener("beforeunload", disconnectTrigger);
     window.removeEventListener("pagehide", pagehideHandler);
+    if (try_reconnect) {
+      // Attempt to reconnect transient non-intentional disconnects.
+      socket.current.reconnect();
+    }
   });
 
   // On each received message, queue the updates and events.
@@ -785,6 +825,7 @@ export const useEventLoop = (
   const [searchParams] = useSearchParams();
   const [connectErrors, setConnectErrors] = useState([]);
   const params = useRef(paramsR);
+  const mounted = useRef(false);
 
   useEffect(() => {
     const { "*": splat, ...remainingParams } = paramsR;
@@ -796,11 +837,16 @@ export const useEventLoop = (
   }, [paramsR]);
 
   const ensureSocketConnected = useCallback(async () => {
+    if (!mounted.current) {
+      // During hot reload, some components may still have a reference to
+      // addEvents, so avoid reconnecting the socket of an unmounted event loop.
+      return;
+    }
     // only use websockets if state is present and backend is not disabled (reflex cloud).
     if (
       Object.keys(initialState).length > 1 &&
       !isBackendDisabled() &&
-      !socket.current
+      !socket.current?.connected
     ) {
       // Initialize the websocket connection.
       await connect(
@@ -813,13 +859,23 @@ export const useEventLoop = (
         () => params.current,
       );
     }
-  }, [socket, dispatch, setConnectErrors, client_storage, navigate, params]);
+  }, [
+    socket,
+    dispatch,
+    setConnectErrors,
+    client_storage,
+    navigate,
+    params,
+    mounted,
+  ]);
 
   // Function to add new events to the event queue.
   const addEvents = useCallback((events, args, event_actions) => {
     const _events = events.filter((e) => e !== undefined && e !== null);
-
-    ensureSocketConnected();
+    if (!event_actions?.temporal) {
+      // Reconnect socket if needed for non-temporal events.
+      ensureSocketConnected();
+    }
 
     if (!(args instanceof Array)) {
       args = [args];
@@ -914,12 +970,16 @@ export const useEventLoop = (
   // Handle socket connect/disconnect.
   useEffect(() => {
     // Initialize the websocket connection.
+    mounted.current = true;
     ensureSocketConnected();
 
     // Cleanup function.
     return () => {
+      mounted.current = false;
       if (socket.current) {
         socket.current.disconnect();
+        socket.current.off();
+        socket.current = null;
       }
     };
   }, []);

reflex/app.py

@@ -1781,16 +1781,16 @@ async def process(
                     name=f"reflex_emit_reload|{event.name}|{time.time()}|{event.token}",
                 )
                 return
+            router_data[constants.RouteVar.PATH] = "/" + (
+                app.router(path) or "404"
+                if (path := router_data.get(constants.RouteVar.PATH))
+                else "404"
+            ).removeprefix("/")
             # re-assign only when the value is different
             if state.router_data != router_data:
                 # assignment will recurse into substates and force recalculation of
                 # dependent ComputedVar (dynamic route variables)
                 state.router_data = router_data
-                router_data[constants.RouteVar.PATH] = "/" + (
-                    app.router(path) or "404"
-                    if (path := router_data.get(constants.RouteVar.PATH))
-                    else "404"
-                ).removeprefix("/")
                 state.router = RouterData.from_router_data(router_data)
 
             # Preprocess the event.

reflex/utils/codespaces.py

@@ -26,11 +26,40 @@ def redirect_script() -> str:
 const thisUrl = new URL(window.location.href);
 const params = new URLSearchParams(thisUrl.search)
 
+function sameHostnameDifferentPort(one, two) {{
+    const hostnameOne = one.hostname;
+    const hostnameTwo = two.hostname;
+    const partsOne = hostnameOne.split(".");
+    const partsTwo = hostnameTwo.split(".");
+    if (partsOne.length !== partsTwo.length) {{ return false;  }}
+    for (let i = 1; i < partsOne.length; i++) {{
+        if (partsOne[i] !== partsTwo[i]) {{ return false; }}
+    }}
+    const uniqueNameOne = partsOne[0];
+    const uniqueNameTwo = partsTwo[0];
+    const uniqueNamePartsOne = uniqueNameOne.split("-");
+    const uniqueNamePartsTwo = uniqueNameTwo.split("-");
+    if (uniqueNamePartsOne.length !== uniqueNamePartsTwo.length) {{ return false;  }}
+    for (let i = 0; i < uniqueNamePartsOne.length - 1; i++) {{
+        if (uniqueNamePartsOne[i] !== uniqueNamePartsTwo[i]) {{ return false;  }}
+    }}
+    return true;
+}}
+
 function doRedirect(url) {{
     if (!window.sessionStorage.getItem("authenticated_github_codespaces")) {{
         const a = document.createElement("a");
         if (params.has("redirect_to")) {{
-            a.href = params.get("redirect_to")
+            const redirect_to = new URL(params.get("redirect_to"));
+            if (!sameHostnameDifferentPort(thisUrl, redirect_to)) {{
+                console.warn("Reflex: Not redirecting to different hostname");
+                return;
+            }}
+            if (!redirect_to.hostname.endsWith(".app.github.dev")) {{
+                console.warn("Reflex: Not redirecting to non .app.github.dev hostname");
+                return;
+            }}
+            a.href = redirect_to.href;
         }} else if (!window.location.href.startsWith(url)) {{
             a.href = url + `?redirect_to=${{window.location.href}}`
         }} else {{

reflex/utils/types.py

@@ -443,6 +443,13 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
 
         from reflex.model import Model
 
+        if find_spec("sqlmodel"):
+            from sqlmodel import SQLModel
+
+            sqlmodel_types = (Model, SQLModel)
+        else:
+            sqlmodel_types = (Model,)
+
         if isinstance(cls, type) and issubclass(cls, DeclarativeBase):
             insp = sqlalchemy.inspect(cls)
             if name in insp.columns:
@@ -486,7 +493,7 @@ def get_attribute_access_type(cls: GenericType, name: str) -> GenericType | None
         elif (
             isinstance(cls, type)
             and not is_generic_alias(cls)
-            and issubclass(cls, Model)
+            and issubclass(cls, sqlmodel_types)
         ):
             # Check in the annotations directly (for sqlmodel.Relationship)
             hints = get_type_hints(cls)  # pyright: ignore [reportArgumentType]