reflex 0.8.10a1__tar.gz → 0.8.11a1__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.8.10a1
+Version: 0.8.11a1
 Summary: Web apps in pure Python.
 Project-URL: homepage, https://reflex.dev
 Project-URL: repository, https://github.com/reflex-dev/reflex

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

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.8.10a1"
+version = "0.8.11a1"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [
@@ -230,7 +230,7 @@ fail_fast = true
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/astral-sh/ruff-pre-commit"
-rev = "v0.12.11"
+rev = "v0.12.12"
 hooks = [
   { id = "ruff-format", args = [
     "reflex",
@@ -262,7 +262,7 @@ hooks = [
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/RobertCraigie/pyright-python"
-rev = "v1.1.404"
+rev = "v1.1.405"
 hooks = [{ id = "pyright", args = ["reflex", "tests"], language = "system" }]
 
 [[tool.pre-commit.repos]]

reflex-0.8.11a1/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.10a1 → reflex-0.8.11a1}/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"];
@@ -432,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;
   }
@@ -614,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.10a1 → reflex-0.8.11a1}/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.
@@ -1272,12 +1281,12 @@ class App(MiddlewareMixin, LifespanMixin):
 
         # Compile custom components.
         (
-            custom_components_output,
-            custom_components_result,
-            custom_components_imports,
-        ) = compiler.compile_components(dict.fromkeys(CUSTOM_COMPONENTS.values()))
-        compile_results.append((custom_components_output, custom_components_result))
-        all_imports.update(custom_components_imports)
+            memo_components_output,
+            memo_components_result,
+            memo_components_imports,
+        ) = compiler.compile_memo_components(dict.fromkeys(CUSTOM_COMPONENTS.values()))
+        compile_results.append((memo_components_output, memo_components_result))
+        all_imports.update(memo_components_imports)
         progress.advance(task)
 
         with console.timing("Collect all imports and app wraps"):

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

@@ -336,7 +336,7 @@ def _compile_component(component: Component | StatefulComponent) -> str:
     return templates.component_template(component=component)
 
 
-def _compile_components(
+def _compile_memo_components(
     components: Iterable[CustomComponent],
 ) -> tuple[str, dict[str, list[ImportVar]]]:
     """Compile the components.
@@ -376,7 +376,7 @@ def _compile_components(
 
     # Compile the components page.
     return (
-        templates.custom_component_template(
+        templates.memo_components_template(
             imports=utils.compile_imports(imports),
             components=component_renders,
             dynamic_imports=sorted(dynamic_imports),
@@ -565,7 +565,7 @@ def compile_page(path: str, component: BaseComponent) -> tuple[str, str]:
     return output_path, code
 
 
-def compile_components(
+def compile_memo_components(
     components: Iterable[CustomComponent],
 ) -> tuple[str, str, dict[str, list[ImportVar]]]:
     """Compile the custom components.
@@ -580,7 +580,7 @@ def compile_components(
     output_path = utils.get_components_path()
 
     # Compile the components.
-    code, imports = _compile_components(components)
+    code, imports = _compile_memo_components(components)
     return output_path, code, imports
 
 

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

@@ -8,6 +8,7 @@ from typing import TYPE_CHECKING, Any
 
 from reflex import constants
 from reflex.constants import Hooks
+from reflex.constants.state import CAMEL_CASE_MEMO_MARKER
 from reflex.utils.format import format_state_name, json_dumps
 from reflex.vars.base import VarData
 
@@ -637,7 +638,7 @@ def stateful_components_template(imports: list[_ImportDict], memoized_code: str)
     return f"{imports_str}\n{memoized_code}"
 
 
-def custom_component_template(
+def memo_components_template(
     imports: list[_ImportDict],
     components: list[dict[str, Any]],
     dynamic_imports: Iterable[str],
@@ -661,7 +662,7 @@ def custom_component_template(
     components_code = ""
     for component in components:
         components_code += f"""
-export const {component["name"]} = memo(({{ {", ".join(component.get("props", []))} }}) => {{
+export const {component["name"]} = memo(({{ {",".join([f"{prop}:{prop}{CAMEL_CASE_MEMO_MARKER}" for prop in component.get("props", [])])} }}) => {{
     {_render_hooks(component.get("hooks", {}))}
     return(
         {_RenderUtils.render(component["render"])}

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/component.py

@@ -37,12 +37,13 @@ from reflex.constants import (
     PageNames,
 )
 from reflex.constants.compiler import SpecialAttributes
-from reflex.constants.state import FRONTEND_EVENT_STATE, MEMO_MARKER
+from reflex.constants.state import CAMEL_CASE_MEMO_MARKER, FRONTEND_EVENT_STATE
 from reflex.event import (
     EventCallback,
     EventChain,
     EventHandler,
     EventSpec,
+    args_specs_from_fields,
     no_args_event_spec,
     parse_args_spec,
     pointer_event_spec,
@@ -143,14 +144,6 @@ class BaseComponentMeta(FieldBasedMeta, ABCMeta):
         _fields: Mapping[str, ComponentField]
         _js_fields: Mapping[str, ComponentField]
 
-    @classmethod
-    def _resolve_annotations(
-        cls, namespace: dict[str, Any], name: str
-    ) -> dict[str, Any]:
-        return types.resolve_annotations(
-            namespace.get("__annotations__", {}), namespace["__module__"]
-        )
-
     @classmethod
     def _process_annotated_fields(
         cls,
@@ -909,18 +902,7 @@ class Component(BaseComponent, ABC):
         """
         # Look for component specific triggers,
         # e.g. variable declared as EventHandler types.
-        return DEFAULT_TRIGGERS | {
-            name: (
-                metadata[0]
-                if (
-                    (metadata := getattr(field.annotated_type, "__metadata__", None))
-                    is not None
-                )
-                else no_args_event_spec
-            )
-            for name, field in cls.get_fields().items()
-            if field.type_origin is EventHandler
-        }  # pyright: ignore [reportOperatorIssue]
+        return DEFAULT_TRIGGERS | args_specs_from_fields(cls.get_fields())  # pyright: ignore [reportOperatorIssue]
 
     def __repr__(self) -> str:
         """Represent the component in React.
@@ -1983,7 +1965,7 @@ class CustomComponent(Component):
 
         super()._post_init(
             event_triggers={
-                key + MEMO_MARKER: EventChain.create(
+                key: EventChain.create(
                     value=props[key],
                     args_spec=get_args_spec(key),
                     key=key,
@@ -1994,9 +1976,7 @@ class CustomComponent(Component):
         )
 
         to_camel_cased_props = {
-            format.to_camel_case(key + MEMO_MARKER): None
-            for key in props
-            if key not in event_types
+            format.to_camel_case(key): None for key in props if key not in event_types
         }
         self.get_props = lambda: to_camel_cased_props  # pyright: ignore [reportIncompatibleVariableOverride]
 
@@ -2011,7 +1991,7 @@ class CustomComponent(Component):
             if key not in props_types:
                 continue
 
-            camel_cased_key = format.to_camel_case(key + MEMO_MARKER)
+            camel_cased_key = format.to_camel_case(key)
 
             # Get the type based on the annotation.
             type_ = props_types[key]
@@ -2101,11 +2081,13 @@ class CustomComponent(Component):
         """
         return [
             Var(
-                _js_expr=name,
+                _js_expr=name + CAMEL_CASE_MEMO_MARKER,
                 _var_type=(prop._var_type if isinstance(prop, Var) else type(prop)),
             ).guess_type()
             if isinstance(prop, Var) or not isinstance(prop, EventChain)
-            else CustomComponent._get_event_spec_from_args_spec(name, prop)
+            else CustomComponent._get_event_spec_from_args_spec(
+                name + CAMEL_CASE_MEMO_MARKER, prop
+            )
             for name, prop in self.props.items()
         ]
 

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/core/upload.py

@@ -35,6 +35,7 @@ from reflex.utils import format
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
 from reflex.vars.base import Var, get_unique_variable_name
+from reflex.vars.function import FunctionVar
 from reflex.vars.sequence import LiteralStringVar
 
 DEFAULT_UPLOAD_ID: str = "default"
@@ -111,8 +112,7 @@ def clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec:
     # UploadFilesProvider assigns a special function to clear selected files
     # into the shared global refs object to make it accessible outside a React
     # component via `run_script` (otherwise backend could never clear files).
-    func = Var("__clear_selected_files")._as_ref()
-    return run_script(f"{func}({id_!r})")
+    return run_script(Var("__clear_selected_files")._as_ref().to(FunctionVar).call(id_))
 
 
 def cancel_upload(upload_id: str) -> EventSpec:

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/datadisplay/code.py

@@ -382,7 +382,7 @@ for theme_name in dir(Theme):
 class CodeBlock(Component, MarkdownComponentMap):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.6.1"
+    library = "react-syntax-highlighter@15.6.6"
 
     tag = "PrismAsyncLight"
 
@@ -412,7 +412,7 @@ class CodeBlock(Component, MarkdownComponentMap):
     )
 
     # Props passed down to the code tag.
-    code_tag_props: Var[dict[str, str]]
+    code_tag_props: Var[dict[str, str | dict[str, str]]]
 
     # Whether a copy button should appear.
     can_copy: bool | None = field(

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/datadisplay/code.pyi

@@ -926,7 +926,9 @@ class CodeBlock(Component, MarkdownComponentMap):
         starting_line_number: Var[int] | int | None = None,
         wrap_long_lines: Var[bool] | bool | None = None,
         custom_style: dict[str, str | Var | Color] | None = None,
-        code_tag_props: Var[dict[str, str]] | dict[str, str] | None = None,
+        code_tag_props: Var[dict[str, dict[str, str] | str]]
+        | dict[str, dict[str, str] | str]
+        | None = None,
         can_copy: bool | None = None,
         copy_button: Component | bool | None = None,
         style: Sequence[Mapping[str, Any]]
@@ -1562,7 +1564,9 @@ class CodeblockNamespace(ComponentNamespace):
         starting_line_number: Var[int] | int | None = None,
         wrap_long_lines: Var[bool] | bool | None = None,
         custom_style: dict[str, str | Var | Color] | None = None,
-        code_tag_props: Var[dict[str, str]] | dict[str, str] | None = None,
+        code_tag_props: Var[dict[str, dict[str, str] | str]]
+        | dict[str, dict[str, str] | str]
+        | None = None,
         can_copy: bool | None = None,
         copy_button: Component | bool | None = None,
         style: Sequence[Mapping[str, Any]]

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/field.py

@@ -6,6 +6,8 @@ from collections.abc import Callable
 from dataclasses import _MISSING_TYPE, MISSING
 from typing import Annotated, Any, Generic, TypeVar, get_origin
 
+from reflex.utils import types
+
 FIELD_TYPE = TypeVar("FIELD_TYPE")
 
 
@@ -114,7 +116,9 @@ class FieldBasedMeta(type):
     def _resolve_annotations(
         cls, namespace: dict[str, Any], name: str
     ) -> dict[str, Any]:
-        return namespace.get("__annotations__", {})
+        return types.resolve_annotations(
+            namespace.get("__annotations__", {}), namespace["__module__"]
+        )
 
     @classmethod
     def _process_field_overrides(

{reflex-0.8.10a1 → reflex-0.8.11a1}/reflex/components/lucide/icon.py

@@ -6,7 +6,7 @@ from reflex.utils.imports import ImportVar
 from reflex.vars.base import LiteralVar, Var
 from reflex.vars.sequence import LiteralStringVar, StringVar
 
-LUCIDE_LIBRARY = "lucide-react@0.542.0"
+LUCIDE_LIBRARY = "lucide-react@0.543.0"
 
 
 class LucideIconComponent(Component):
@@ -921,6 +921,7 @@ LUCIDE_ICON_LIST = [
     "hospital",
     "hotel",
     "hourglass",
+    "house_heart",
     "house_plug",
     "house_plus",
     "house_wifi",