reflex 0.8.0a4__py3-none-any.whl → 0.8.0a6__py3-none-any.whl

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

@@ -34,7 +34,7 @@ function AppWrap({children}) {
 
 
 export function Layout({children}) {
-    React.useEffect(() => {
+    useEffect(() => {
     // Make contexts and state objects available globally for dynamic eval'd components
     let windowImports = {
 {% for library_alias, library_path in  window_libraries %}

reflex/.templates/jinja/web/styles/styles.css.jinja2

@@ -1,4 +1,5 @@
 {%- block imports_styles %}
+@layer __reflex_base;
 {% for sheet_name in stylesheets %}
     {{- "@import url('" + sheet_name + "'); " }}
 {% endfor %}

reflex/.templates/web/app/routes.js

@@ -2,9 +2,9 @@ import { route } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
 export default [
-  route("404", "routes/[404]_._index.jsx", { id: "404" }),
+  route("404", "routes/[404]._index.jsx", { id: "404" }),
   ...(await flatRoutes({
-    ignoredRouteFiles: ["routes/\\[404\\]_._index.jsx"],
+    ignoredRouteFiles: ["routes/\\[404\\]._index.jsx"],
   })),
-  route("*", "routes/[404]_._index.jsx"),
+  route("*", "routes/[404]._index.jsx"),
 ];

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

@@ -25,7 +25,7 @@ export const useClientSideRouting = () => {
       const search = window.location.search;
 
       // Use navigate instead of replace
-      navigate(path + search, { replace: true })
+      navigate(path + search, { replace: true, state: { fromNotFound: true } })
         .then(() => {
           // Check if we're still on a NotFound route
           // Note: This depends on how your routes are set up

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

@@ -1,11 +1,10 @@
 // State management for Reflex web apps.
-import axios from "axios";
 import io from "socket.io-client";
 import JSON5 from "json5";
 import env from "$/env.json";
 import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   useLocation,
   useNavigate,
@@ -655,17 +654,6 @@ export const uploadFiles = async (
   };
 
   const controller = new AbortController();
-  const config = {
-    headers: {
-      "Reflex-Client-Token": getToken(),
-      "Reflex-Event-Handler": handler,
-    },
-    signal: controller.signal,
-    onDownloadProgress: eventHandler,
-  };
-  if (on_upload_progress) {
-    config["onUploadProgress"] = on_upload_progress;
-  }
   const formdata = new FormData();
 
   // Add the token and handler to the file name.
@@ -676,26 +664,85 @@ export const uploadFiles = async (
   // Send the file to the server.
   refs[upload_ref_name] = controller;
 
-  try {
-    return await axios.post(getBackendURL(UPLOADURL), formdata, config);
-  } catch (error) {
-    if (error.response) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
-      console.log(error.response.data);
-    } else if (error.request) {
-      // The request was made but no response was received
-      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-      // http.ClientRequest in node.js
-      console.log(error.request);
-    } else {
-      // Something happened in setting up the request that triggered an Error
-      console.log(error.message);
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    // Set up event handlers
+    xhr.onload = function () {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve({
+          data: xhr.responseText,
+          status: xhr.status,
+          statusText: xhr.statusText,
+          headers: {
+            get: (name) => xhr.getResponseHeader(name),
+          },
+        });
+      } else {
+        reject(new Error(`HTTP error! status: ${xhr.status}`));
+      }
+    };
+
+    xhr.onerror = function () {
+      reject(new Error("Network error"));
+    };
+
+    xhr.onabort = function () {
+      reject(new Error("Upload aborted"));
+    };
+
+    // Handle upload progress
+    if (on_upload_progress) {
+      xhr.upload.onprogress = function (event) {
+        if (event.lengthComputable) {
+          const progressEvent = {
+            loaded: event.loaded,
+            total: event.total,
+            progress: event.loaded / event.total,
+          };
+          on_upload_progress(progressEvent);
+        }
+      };
     }
-    return false;
-  } finally {
-    delete refs[upload_ref_name];
-  }
+
+    // Handle download progress with streaming response parsing
+    xhr.onprogress = function (event) {
+      if (eventHandler) {
+        const progressEvent = {
+          event: {
+            target: {
+              responseText: xhr.responseText,
+            },
+          },
+          progress: event.lengthComputable ? event.loaded / event.total : 0,
+        };
+        eventHandler(progressEvent);
+      }
+    };
+
+    // Handle abort controller
+    controller.signal.addEventListener("abort", () => {
+      xhr.abort();
+    });
+
+    // Configure and send request
+    xhr.open("POST", getBackendURL(UPLOADURL));
+    xhr.setRequestHeader("Reflex-Client-Token", getToken());
+    xhr.setRequestHeader("Reflex-Event-Handler", handler);
+
+    try {
+      xhr.send(formdata);
+    } catch (error) {
+      reject(error);
+    }
+  })
+    .catch((error) => {
+      console.log("Upload error:", error.message);
+      return false;
+    })
+    .finally(() => {
+      delete refs[upload_ref_name];
+    });
 };
 
 /**
@@ -851,7 +898,7 @@ export const useEventLoop = (
   }, [paramsR]);
 
   // Function to add new events to the event queue.
-  const addEvents = (events, args, event_actions) => {
+  const addEvents = useCallback((events, args, event_actions) => {
     const _events = events.filter((e) => e !== undefined && e !== null);
 
     if (!(args instanceof Array)) {
@@ -894,7 +941,7 @@ export const useEventLoop = (
     } else {
       queueEvents(_events, socket, false, navigate, () => params.current);
     }
-  };
+  }, []);
 
   const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
   useEffect(() => {
@@ -1020,31 +1067,42 @@ export const useEventLoop = (
     return () => window.removeEventListener("storage", handleStorage);
   });
 
+  const handleNavigationEvents = useRef(false);
   // Route after the initial page hydration
   useEffect(() => {
+    // The first time this effect runs is initial load, so don't handle
+    // any navigation events.
+    if (!handleNavigationEvents.current) {
+      handleNavigationEvents.current = true;
+      return;
+    }
+    if (location.state?.fromNotFound) {
+      // If the redirect is from a 404 page, we skip onLoadInternalEvent,
+      // since it was already run when the 404 page was first rendered.
+      return;
+    }
     // This will run when the location changes
     if (
-      location.pathname + location.search + location.hash !==
-      prevLocationRef.current.pathname +
-        prevLocationRef.current.search +
-        prevLocationRef.current.hash
+      location.pathname + location.search ===
+      prevLocationRef.current.pathname + prevLocationRef.current.search
     ) {
-      // 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();
+      if (location.hash) {
+        // If the hash is the same, we don't need to do anything.
+        return;
+      }
+    }
 
-      // Update the ref
-      prevLocationRef.current = location;
+    // Equivalent to routeChangeStart - runs when navigation begins
+    const main_state_dispatch = dispatch["reflex___state____state"];
+    if (main_state_dispatch !== undefined) {
+      main_state_dispatch({ is_hydrated_rx_state_: false });
     }
+
+    // Equivalent to routeChangeComplete - runs after navigation completes
+    addEvents(onLoadInternalEvent());
+
+    // Update the ref
+    prevLocationRef.current = location;
   }, [location, dispatch, onLoadInternalEvent, addEvents]);
 
   return [addEvents, connectErrors];