reflex 0.8.9a1__tar.gz → 0.8.10__tar.gz

{reflex-0.8.9a1 → reflex-0.8.10}/PKG-INFO

@@ -1,12 +1,13 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.8.9a1
+Version: 0.8.10
 Summary: Web apps in pure Python.
 Project-URL: homepage, https://reflex.dev
 Project-URL: repository, https://github.com/reflex-dev/reflex
 Project-URL: documentation, https://reflex.dev/docs/getting-started/introduction
-Author-email: Nikhil Rao <nikhil@reflex.dev>, Alek Petuskey <alek@reflex.dev>, Masen Furer <masen@reflex.dev>, Elijah Ahianyo <elijahahianyo@gmail.com>, Thomas Brandeho <thomas@reflex.dev>, Khaleel Al-Adhami <khaleel@reflex.dev>
-Maintainer-email: Masen Furer <masen@reflex.dev>, Thomas Brandeho <thomas@reflex.dev>, Khaleel Al-Adhami <khaleel@reflex.dev>
+Author: Nikhil Rao, Alek Petuskey, Masen Furer, Elijah Ahianyo, Thomas Brandeho, Khaleel Al-Adhami
+Maintainer: Masen Furer, Khaleel Al-Adhami
+Maintainer-email: maintainers@reflex.dev
 License: Apache-2.0
 License-File: LICENSE
 Keywords: framework,web

{reflex-0.8.9a1 → reflex-0.8.10}/pyproject.toml

@@ -1,20 +1,20 @@
 [project]
 name = "reflex"
-version = "0.8.9a1"
+version = "0.8.10"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [
-  { name = "Nikhil Rao", email = "nikhil@reflex.dev" },
-  { name = "Alek Petuskey", email = "alek@reflex.dev" },
-  { name = "Masen Furer", email = "masen@reflex.dev" },
-  { name = "Elijah Ahianyo", email = "elijahahianyo@gmail.com" },
-  { name = "Thomas Brandeho", email = "thomas@reflex.dev" },
-  { name = "Khaleel Al-Adhami", email = "khaleel@reflex.dev" },
+  { name = "Nikhil Rao" },
+  { name = "Alek Petuskey" },
+  { name = "Masen Furer" },
+  { name = "Elijah Ahianyo" },
+  { name = "Thomas Brandeho" },
+  { name = "Khaleel Al-Adhami" },
 ]
 maintainers = [
-  { name = "Masen Furer", email = "masen@reflex.dev" },
-  { name = "Thomas Brandeho", email = "thomas@reflex.dev" },
-  { name = "Khaleel Al-Adhami", email = "khaleel@reflex.dev" },
+  { name = "Masen Furer" },
+  { name = "Khaleel Al-Adhami" },
+  { email = "maintainers@reflex.dev" },
 ]
 readme = "README.md"
 keywords = ["web", "framework"]
@@ -50,9 +50,7 @@ classifiers = [
 ]
 
 [project.optional-dependencies]
-monitoring = [
-  "pyleak >=0.1.14,<1.0",
-]
+monitoring = ["pyleak >=0.1.14,<1.0"]
 
 [project.urls]
 homepage = "https://reflex.dev"
@@ -232,7 +230,7 @@ fail_fast = true
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/astral-sh/ruff-pre-commit"
-rev = "v0.12.10"
+rev = "v0.12.11"
 hooks = [
   { id = "ruff-format", args = [
     "reflex",
@@ -264,7 +262,7 @@ hooks = [
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/RobertCraigie/pyright-python"
-rev = "v1.1.403"
+rev = "v1.1.404"
 hooks = [{ id = "pyright", args = ["reflex", "tests"], language = "system" }]
 
 [[tool.pre-commit.repos]]

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,5 +1,5 @@
 import { useTheme } from "$/utils/react-theme";
-import { createElement } from "react";
+import { createElement, useEffect } from "react";
 import { ColorModeContext, defaultColorMode } from "$/utils/context";
 
 export default function RadixThemesColorModeProvider({ children }) {
@@ -20,6 +20,16 @@ export default function RadixThemesColorModeProvider({ children }) {
     setTheme(mode);
   };
 
+  useEffect(() => {
+    const radixRoot = document.querySelector(
+      '.radix-themes[data-is-root-theme="true"]',
+    );
+    if (radixRoot) {
+      radixRoot.classList.remove("light", "dark");
+      radixRoot.classList.add(resolvedTheme);
+    }
+  }, [resolvedTheme]);
+
   return createElement(
     ColorModeContext.Provider,
     {

reflex-0.8.10/reflex/.templates/web/utils/helpers/upload.js

@@ -0,0 +1,170 @@
+import JSON5 from "json5";
+import env from "$/env.json";
+
+/**
+ * Upload files to the server.
+ *
+ * @param state The state to apply the delta to.
+ * @param handler The handler to use.
+ * @param upload_id The upload id to use.
+ * @param on_upload_progress The function to call on upload progress.
+ * @param socket the websocket connection
+ * @param extra_headers Extra headers to send with the request.
+ * @param refs The refs object to store the abort controller in.
+ * @param getBackendURL Function to get the backend URL.
+ * @param getToken Function to get the Reflex token.
+ *
+ * @returns The response from posting to the UPLOADURL endpoint.
+ */
+export const uploadFiles = async (
+  handler,
+  files,
+  upload_id,
+  on_upload_progress,
+  extra_headers,
+  socket,
+  refs,
+  getBackendURL,
+  getToken,
+) => {
+  // return if there's no file to upload
+  if (files === undefined || files.length === 0) {
+    return false;
+  }
+
+  const upload_ref_name = `__upload_controllers_${upload_id}`;
+
+  if (refs[upload_ref_name]) {
+    console.log("Upload already in progress for ", upload_id);
+    return false;
+  }
+
+  // Track how many partial updates have been processed for this upload.
+  let resp_idx = 0;
+  const eventHandler = (progressEvent) => {
+    const event_callbacks = socket._callbacks.$event;
+    // Whenever called, responseText will contain the entire response so far.
+    const chunks = progressEvent.event.target.responseText.trim().split("\n");
+    // So only process _new_ chunks beyond resp_idx.
+    chunks.slice(resp_idx).map((chunk_json) => {
+      try {
+        const chunk = JSON5.parse(chunk_json);
+        event_callbacks.map((f, ix) => {
+          f(chunk)
+            .then(() => {
+              if (ix === event_callbacks.length - 1) {
+                // Mark this chunk as processed.
+                resp_idx += 1;
+              }
+            })
+            .catch((e) => {
+              if (progressEvent.progress === 1) {
+                // Chunk may be incomplete, so only report errors when full response is available.
+                console.log("Error processing chunk", chunk, e);
+              }
+              return;
+            });
+        });
+      } catch (e) {
+        if (progressEvent.progress === 1) {
+          console.log("Error parsing chunk", chunk_json, e);
+        }
+        return;
+      }
+    });
+  };
+
+  const controller = new AbortController();
+  const formdata = new FormData();
+
+  // Add the token and handler to the file name.
+  files.forEach((file) => {
+    formdata.append("files", file, file.path || file.name);
+  });
+
+  // Send the file to the server.
+  refs[upload_ref_name] = controller;
+
+  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);
+        }
+      };
+    }
+
+    // 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(env.UPLOAD));
+    xhr.setRequestHeader("Reflex-Client-Token", getToken());
+    xhr.setRequestHeader("Reflex-Event-Handler", handler);
+    for (const [key, value] of Object.entries(extra_headers || {})) {
+      xhr.setRequestHeader(key, value);
+    }
+
+    try {
+      xhr.send(formdata);
+    } catch (error) {
+      reject(error);
+    }
+  })
+    .catch((error) => {
+      console.log("Upload error:", error.message);
+      return false;
+    })
+    .finally(() => {
+      delete refs[upload_ref_name];
+    });
+};

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/.templates/web/utils/state.js

@@ -20,10 +20,10 @@ import {
 } from "$/utils/context";
 import debounce from "$/utils/helpers/debounce";
 import throttle from "$/utils/helpers/throttle";
+import { uploadFiles } from "$/utils/helpers/upload";
 
 // Endpoint URLs.
 const EVENTURL = env.EVENT;
-const UPLOADURL = env.UPLOAD;
 
 // These hostnames indicate that the backend and frontend are reachable via the same domain.
 const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"];
@@ -210,7 +210,11 @@ export const applyEvent = async (event, socket, navigate, params) => {
       return false;
     }
     if (event.payload.external) {
-      window.open(event.payload.path, "_blank", "noopener");
+      window.open(
+        event.payload.path,
+        "_blank",
+        "noopener" + (event.payload.popup ? ",popup" : ""),
+      );
       return false;
     }
     const url = urlFrom(event.payload.path);
@@ -428,7 +432,11 @@ export const applyRestEvent = async (event, socket, navigate, params) => {
       event.payload.files,
       event.payload.upload_id,
       event.payload.on_upload_progress,
+      event.payload.extra_headers,
       socket,
+      refs,
+      getBackendURL,
+      getToken,
     );
     return false;
   }
@@ -610,163 +618,6 @@ export const connect = async (
   document.addEventListener("visibilitychange", checkVisibility);
 };
 
-/**
- * Upload files to the server.
- *
- * @param state The state to apply the delta to.
- * @param handler The handler to use.
- * @param upload_id The upload id to use.
- * @param on_upload_progress The function to call on upload progress.
- * @param socket the websocket connection
- *
- * @returns The response from posting to the UPLOADURL endpoint.
- */
-export const uploadFiles = async (
-  handler,
-  files,
-  upload_id,
-  on_upload_progress,
-  socket,
-) => {
-  // return if there's no file to upload
-  if (files === undefined || files.length === 0) {
-    return false;
-  }
-
-  const upload_ref_name = `__upload_controllers_${upload_id}`;
-
-  if (refs[upload_ref_name]) {
-    console.log("Upload already in progress for ", upload_id);
-    return false;
-  }
-
-  // Track how many partial updates have been processed for this upload.
-  let resp_idx = 0;
-  const eventHandler = (progressEvent) => {
-    const event_callbacks = socket._callbacks.$event;
-    // Whenever called, responseText will contain the entire response so far.
-    const chunks = progressEvent.event.target.responseText.trim().split("\n");
-    // So only process _new_ chunks beyond resp_idx.
-    chunks.slice(resp_idx).map((chunk_json) => {
-      try {
-        const chunk = JSON5.parse(chunk_json);
-        event_callbacks.map((f, ix) => {
-          f(chunk)
-            .then(() => {
-              if (ix === event_callbacks.length - 1) {
-                // Mark this chunk as processed.
-                resp_idx += 1;
-              }
-            })
-            .catch((e) => {
-              if (progressEvent.progress === 1) {
-                // Chunk may be incomplete, so only report errors when full response is available.
-                console.log("Error processing chunk", chunk, e);
-              }
-              return;
-            });
-        });
-      } catch (e) {
-        if (progressEvent.progress === 1) {
-          console.log("Error parsing chunk", chunk_json, e);
-        }
-        return;
-      }
-    });
-  };
-
-  const controller = new AbortController();
-  const formdata = new FormData();
-
-  // Add the token and handler to the file name.
-  files.forEach((file) => {
-    formdata.append("files", file, file.path || file.name);
-  });
-
-  // Send the file to the server.
-  refs[upload_ref_name] = controller;
-
-  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);
-        }
-      };
-    }
-
-    // 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];
-    });
-};
-
 /**
  * Create an event object.
  * @param {string} name The name of the event.

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/app.py

@@ -258,6 +258,15 @@ class UploadFile(StarletteUploadFile):
 
     headers: Headers = dataclasses.field(default_factory=Headers)
 
+    @property
+    def filename(self) -> str | None:
+        """Get the name of the uploaded file.
+
+        Returns:
+            The name of the uploaded file.
+        """
+        return self.name
+
     @property
     def name(self) -> str | None:
         """Get the name of the uploaded file.

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/compiler/compiler.py

@@ -161,7 +161,7 @@ def _compile_page(component: BaseComponent) -> str:
     # Compile the code to render the component.
     return templates.page_template(
         imports=imports,
-        dynamic_imports=component._get_all_dynamic_imports(),
+        dynamic_imports=sorted(component._get_all_dynamic_imports()),
         custom_codes=component._get_all_custom_code(),
         hooks=component._get_all_hooks(),
         render=component.render(),
@@ -379,7 +379,7 @@ def _compile_components(
         templates.custom_component_template(
             imports=utils.compile_imports(imports),
             components=component_renders,
-            dynamic_imports=dynamic_imports,
+            dynamic_imports=sorted(dynamic_imports),
             custom_codes=custom_codes,
         ),
         imports,
@@ -435,9 +435,7 @@ def _compile_stateful_components(
                 rendered_components.update(dict.fromkeys(dynamic_imports))
 
             # Include custom code in the shared component.
-            rendered_components.update(
-                dict.fromkeys(component._get_all_custom_code(export=True)),
-            )
+            rendered_components.update(component._get_all_custom_code(export=True))
 
             # Include all imports in the shared component.
             all_import_dicts.append(component._get_all_imports())

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/compiler/templates.py

@@ -164,7 +164,7 @@ export function Layout({{children}}) {{
 def app_root_template(
     *,
     imports: list[_ImportDict],
-    custom_codes: set[str],
+    custom_codes: Iterable[str],
     hooks: dict[str, VarData | None],
     window_libraries: list[tuple[str, str]],
     render: dict[str, Any],
@@ -200,7 +200,6 @@ def app_root_template(
     )
 
     return f"""
-import reflexGlobalStyles from '$/styles/__reflex_global_styles.css?url';
 {imports_str}
 {dynamic_imports_str}
 import {{ EventLoopProvider, StateProvider, defaultColorMode }} from "$/utils/context";
@@ -211,10 +210,6 @@ import {{ Outlet }} from 'react-router';
 
 {custom_code_str}
 
-export const links = () => [
-  {{ rel: 'stylesheet', href: reflexGlobalStyles, type: 'text/css' }}
-];
-
 function AppWrap({{children}}) {{
 {_render_hooks(hooks)}
 return ({_RenderUtils.render(render)})

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/compiler/utils.py

@@ -16,7 +16,7 @@ from reflex.components.base import Description, Image, Scripts
 from reflex.components.base.document import Links, ScrollRestoration
 from reflex.components.base.document import Meta as ReactMeta
 from reflex.components.component import Component, ComponentStyle, CustomComponent
-from reflex.components.el.elements.metadata import Head, Meta, Title
+from reflex.components.el.elements.metadata import Head, Link, Meta, Title
 from reflex.components.el.elements.other import Html
 from reflex.components.el.elements.sectioning import Body
 from reflex.constants.state import FIELD_MARKER
@@ -26,7 +26,7 @@ from reflex.style import Style
 from reflex.utils import format, imports, path_ops
 from reflex.utils.imports import ImportVar, ParsedImportDict
 from reflex.utils.prerequisites import get_web_dir
-from reflex.vars.base import Field, Var
+from reflex.vars.base import Field, Var, VarData
 
 # To re-export this function.
 merge_imports = imports.merge_imports
@@ -382,6 +382,20 @@ def create_document_root(
     # Always include the framework meta and link tags.
     always_head_components = [
         ReactMeta.create(),
+        Link.create(
+            rel="stylesheet",
+            type="text/css",
+            href=Var(
+                "reflexGlobalStyles",
+                _var_data=VarData(
+                    imports={
+                        "$/styles/__reflex_global_styles.css?url": [
+                            ImportVar(tag="reflexGlobalStyles", is_default=True)
+                        ]
+                    }
+                ),
+            ),
+        ),
         Links.create(),
     ]
     maybe_head_components = []

{reflex-0.8.9a1 → reflex-0.8.10}/reflex/components/base/bare.py

@@ -129,7 +129,7 @@ class Bare(Component):
                 dynamic_imports |= component._get_all_dynamic_imports()
         return dynamic_imports
 
-    def _get_all_custom_code(self) -> set[str]:
+    def _get_all_custom_code(self) -> dict[str, None]:
         """Get custom code for the component.
 
         Returns:
@@ -166,7 +166,7 @@ class Bare(Component):
                     )
         return app_wrap_components
 
-    def _get_all_refs(self) -> set[str]:
+    def _get_all_refs(self) -> dict[str, None]:
         """Get the refs for the children of the component.
 
         Returns: