Component as Var type

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

@@ -7,6 +7,10 @@ import '/styles/styles.css'
 {% block declaration %}
 import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
+import * as React from "react";
+import * as utils_context from "/utils/context.js";
+import * as utils_state from "/utils/state.js";
+import * as radix from "@radix-ui/themes";
 
 {% for custom_code in custom_codes %}
 {{custom_code}}
@@ -26,6 +30,16 @@ function AppWrap({children}) {
 }
 
 export default function MyApp({ Component, pageProps }) {
+  React.useEffect(() => {
+    // Make contexts and state objects available globally for dynamic eval'd components
+    let windowImports = {
+      "react": React,
+      "@radix-ui/themes": radix,
+      "/utils/context": utils_context,
+      "/utils/state": utils_state,
+    };
+    window["__reflex"] = windowImports;
+  }, []);
   return (
     <ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
       <AppWrap>

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

@@ -15,6 +15,7 @@ import {
 } from "utils/context.js";
 import debounce from "/utils/helpers/debounce";
 import throttle from "/utils/helpers/throttle";
+import * as Babel from "@babel/standalone";
 
 // Endpoint URLs.
 const EVENTURL = env.EVENT;
@@ -117,8 +118,8 @@ export const isStateful = () => {
   if (event_queue.length === 0) {
     return false;
   }
-  return event_queue.some(event => event.name.startsWith("reflex___state"));
-}
+  return event_queue.some((event) => event.name.startsWith("reflex___state"));
+};
 
 /**
  * Apply a delta to the state.
@@ -129,6 +130,22 @@ export const applyDelta = (state, delta) => {
   return { ...state, ...delta };
 };
 
+/**
+ * Evaluate a dynamic component.
+ * @param component The component to evaluate.
+ * @returns The evaluated component.
+ */
+export const evalReactComponent = async (component) => {
+  if (!window.React && window.__reflex) {
+    window.React = window.__reflex.react;
+  }
+  const output = Babel.transform(component, { presets: ["react"] }).code;
+  const encodedJs = encodeURIComponent(output);
+  const dataUri = "data:text/javascript;charset=utf-8," + encodedJs;
+  const module = await eval(`import(dataUri)`);
+  return module.default;
+};
+
 /**
  * Only Queue and process events when websocket connection exists.
  * @param event The event to queue.
@@ -141,7 +158,7 @@ export const queueEventIfSocketExists = async (events, socket) => {
     return;
   }
   await queueEvents(events, socket);
-}
+};
 
 /**
  * Handle frontend event or send the event to the backend via Websocket.
@@ -208,7 +225,10 @@ export const applyEvent = async (event, socket) => {
     const a = document.createElement("a");
     a.hidden = true;
     // Special case when linking to uploaded files
-    a.href = event.payload.url.replace("${getBackendURL(env.UPLOAD)}", getBackendURL(env.UPLOAD))
+    a.href = event.payload.url.replace(
+      "${getBackendURL(env.UPLOAD)}",
+      getBackendURL(env.UPLOAD)
+    );
     a.download = event.payload.filename;
     a.click();
     a.remove();
@@ -249,7 +269,7 @@ export const applyEvent = async (event, socket) => {
     } catch (e) {
       console.log("_call_script", e);
       if (window && window?.onerror) {
-        window.onerror(e.message, null, null, null, e)
+        window.onerror(e.message, null, null, null, e);
       }
     }
     return false;
@@ -290,10 +310,9 @@ export const applyEvent = async (event, socket) => {
 export const applyRestEvent = async (event, socket) => {
   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), socket)
+      return await applyEvent(Event(event.name), socket);
     }
 
     // Start upload, but do not wait for it, which would block other events.
@@ -397,7 +416,7 @@ export const connect = async (
       console.log("Disconnect backend before bfcache on navigation");
       socket.current.disconnect();
     }
-  }
+  };
 
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", () => {
@@ -416,7 +435,7 @@ export const connect = async (
   });
 
   // On each received message, queue the updates and events.
-  socket.current.on("event", (message) => {
+  socket.current.on("event", async (message) => {
     const update = JSON5.parse(message);
     for (const substate in update.delta) {
       dispatch[substate](update.delta[substate]);
@@ -574,7 +593,11 @@ export const hydrateClientStorage = (client_storage) => {
       }
     }
   }
-  if (client_storage.cookies || client_storage.local_storage || client_storage.session_storage) {
+  if (
+    client_storage.cookies ||
+    client_storage.local_storage ||
+    client_storage.session_storage
+  ) {
     return client_storage_values;
   }
   return {};
@@ -614,15 +637,17 @@ const applyClientStorageDelta = (client_storage, delta) => {
       ) {
         const options = client_storage.local_storage[state_key];
         localStorage.setItem(options.name || state_key, delta[substate][key]);
-      } else if(
+      } else if (
         client_storage.session_storage &&
         state_key in client_storage.session_storage &&
         typeof window !== "undefined"
       ) {
         const session_options = client_storage.session_storage[state_key];
-        sessionStorage.setItem(session_options.name || state_key, delta[substate][key]);
+        sessionStorage.setItem(
+          session_options.name || state_key,
+          delta[substate][key]
+        );
       }
-
     }
   }
 };
@@ -651,7 +676,7 @@ export const useEventLoop = (
     if (!(args instanceof Array)) {
       args = [args];
     }
-    const _e = args.filter((o) => o?.preventDefault !== undefined)[0]
+    const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
 
     if (event_actions?.preventDefault && _e?.preventDefault) {
       _e.preventDefault();
@@ -671,7 +696,7 @@ export const useEventLoop = (
       debounce(
         combined_name,
         () => queueEvents(events, socket),
-        event_actions.debounce,
+        event_actions.debounce
       );
     } else {
       queueEvents(events, socket);
@@ -696,30 +721,32 @@ export const useEventLoop = (
     }
   }, [router.isReady]);
 
-    // Handle frontend errors and send them to the backend via websocket.
-    useEffect(() => {
-      
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      window.onerror = function (msg, url, lineNo, columnNo, error) {
-        addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
+  // Handle frontend errors and send them to the backend via websocket.
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.onerror = function (msg, url, lineNo, columnNo, error) {
+      addEvents([
+        Event(`${exception_state_name}.handle_frontend_exception`, {
           stack: error.stack,
-        })])
-        return false;
-      }
+        }),
+      ]);
+      return false;
+    };
 
-      //NOTE: Only works in Chrome v49+
-      //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events
-      window.onunhandledrejection = function (event) {
-          addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
-            stack: event.reason.stack,
-          })])
-          return false;
-      }
-
-    },[])
+    //NOTE: Only works in Chrome v49+
+    //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events
+    window.onunhandledrejection = function (event) {
+      addEvents([
+        Event(`${exception_state_name}.handle_frontend_exception`, {
+          stack: event.reason.stack,
+        }),
+      ]);
+      return false;
+    };
+  }, []);
 
   // Main event loop.
   useEffect(() => {
@@ -782,11 +809,11 @@ export const useEventLoop = (
   // Route after the initial page hydration.
   useEffect(() => {
     const change_start = () => {
-      const main_state_dispatch = dispatch["reflex___state____state"]
+      const main_state_dispatch = dispatch["reflex___state____state"];
       if (main_state_dispatch !== undefined) {
-        main_state_dispatch({ is_hydrated: false })
+        main_state_dispatch({ is_hydrated: false });
       }
-    }
+    };
     const change_complete = () => addEvents(onLoadInternalEvent());
     router.events.on("routeChangeStart", change_start);
     router.events.on("routeChangeComplete", change_complete);

reflex/base.py

@@ -47,6 +47,9 @@ def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None
 # shadowed state vars when reloading app via utils.prerequisites.get_app(reload=True)
 pydantic_main.validate_field_name = validate_field_name  # type: ignore
 
+if TYPE_CHECKING:
+    from reflex.vars import Var
+
 
 class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
     """The base class subclassed by all Reflex classes.
@@ -92,7 +95,7 @@ def set(self, **kwargs):
         return self
 
     @classmethod
-    def get_fields(cls) -> dict[str, Any]:
+    def get_fields(cls) -> dict[str, ModelField]:
         """Get the fields of the object.
 
         Returns:
@@ -101,7 +104,7 @@ def get_fields(cls) -> dict[str, Any]:
         return cls.__fields__
 
     @classmethod
-    def add_field(cls, var: Any, default_value: Any):
+    def add_field(cls, var: Var, default_value: Any):
         """Add a pydantic field after class definition.
 
         Used by State.add_var() to correctly handle the new variable.
@@ -110,7 +113,7 @@ def add_field(cls, var: Any, default_value: Any):
             var: The variable to add a pydantic field for.
             default_value: The default value of the field
         """
-        var_name = var._js_expr.split(".")[-1]
+        var_name = var._var_field_name
         new_field = ModelField.infer(
             name=var_name,
             value=default_value,
@@ -133,13 +136,4 @@ def get_value(self, key: str) -> Any:
             # Seems like this function signature was wrong all along?
             # If the user wants a field that we know of, get it and pass it off to _get_value
             key = getattr(self, key)
-        return self._get_value(
-            key,
-            to_dict=True,
-            by_alias=False,
-            include=None,
-            exclude=None,
-            exclude_unset=False,
-            exclude_defaults=False,
-            exclude_none=False,
-        )
+        return key

reflex/components/component.py

@@ -25,6 +25,7 @@
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
 from reflex.components.core.breakpoints import Breakpoints
+from reflex.components.dynamic import load_dynamic_serializer
 from reflex.components.tags import Tag
 from reflex.constants import (
     Dirs,
@@ -52,7 +53,6 @@
     ParsedImportDict,
     parse_imports,
 )
-from reflex.utils.serializers import serializer
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
 
@@ -615,8 +615,8 @@ def get_event_triggers(self) -> Dict[str, Any]:
             if types._issubclass(field.type_, EventHandler):
                 args_spec = None
                 annotation = field.annotation
-                if hasattr(annotation, "__metadata__"):
-                    args_spec = annotation.__metadata__[0]
+                if (metadata := getattr(annotation, "__metadata__", None)) is not None:
+                    args_spec = metadata[0]
                 default_triggers[field.name] = args_spec or (lambda: [])
         return default_triggers
 
@@ -1882,19 +1882,6 @@ def _get_dynamic_imports(self) -> str:
         return "".join((library_import, mod_import, opts_fragment))
 
 
-@serializer
-def serialize_component(comp: Component):
-    """Serialize a component.
-
-    Args:
-        comp: The component to serialize.
-
-    Returns:
-        The serialized component.
-    """
-    return str(comp)
-
-
 class StatefulComponent(BaseComponent):
     """A component that depends on state and is rendered outside of the page component.
 
@@ -2307,3 +2294,6 @@ def create(cls, *children, **props) -> Component:
                 update={"disposition": MemoizationDisposition.ALWAYS}
             )
         return comp
+
+
+load_dynamic_serializer()