reflex 0.4.9a2__py3-none-any.whl → 0.5.0a1__py3-none-any.whl

reflex/.templates/apps/blank/code/blank.py

@@ -1,34 +1,37 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
 
-from rxconfig import config
-
 import reflex as rx
 
-docs_url = "https://reflex.dev/docs/getting-started/introduction/"
-filename = f"{config.app_name}/{config.app_name}.py"
+from rxconfig import config
 
 
 class State(rx.State):
     """The app state."""
 
+    ...
+
 
 def index() -> rx.Component:
-    return rx.center(
-        rx.theme_panel(),
+    # Welcome Page (Index)
+    return rx.container(
+        rx.color_mode.button(position="top-right"),
         rx.vstack(
             rx.heading("Welcome to Reflex!", size="9"),
-            rx.text("Get started by editing ", rx.code(filename)),
-            rx.button(
-                "Check out our docs!",
-                on_click=lambda: rx.redirect(docs_url),
-                size="4",
+            rx.text(
+                "Get started by editing ",
+                rx.code(f"{config.app_name}/{config.app_name}.py"),
+                size="5",
+            ),
+            rx.link(
+                rx.button("Check out our docs!"),
+                href="https://reflex.dev/docs/getting-started/introduction/",
+                is_external=True,
             ),
-            rx.logo(),
-            align="center",
-            spacing="7",
-            font_size="2em",
+            spacing="5",
+            justify="center",
+            min_height="85vh",
         ),
-        height="100vh",
+        rx.logo(),
     )
 
 

reflex/.templates/apps/demo/code/pages/datatable.py

@@ -201,10 +201,10 @@ state_show = """class DataTableState(State):
 data_show = """[
     ["1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11'  Holly  phoenix feather", "Stag", "Half-blood"],
     ["2", "Ronald Bilius Weasley", "1 March 1980", True,"Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood"],
-    ["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾'  vine wood dragon heartstring", "Otter", "Muggle-born"],	
-    ["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"],	
-    ["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16'  Oak unknown core", "None", "Part-Human (Half-giant)"], 
-    ["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"], 
+    ["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾'  vine wood dragon heartstring", "Otter", "Muggle-born"],
+    ["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"],
+    ["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16'  Oak unknown core", "None", "Part-Human (Half-giant)"],
+    ["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
     ["7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
 ]"""
 

reflex/.templates/apps/demo/code/pages/forms.py

@@ -18,8 +18,8 @@ forms_1_code = """rx.chakra.vstack(
                 rx.chakra.checkbox("Checked", id="check"),
                 rx.chakra.switch("Switched", id="switch"),
             ),
-            rx.chakra.button("Submit", 
-                       type_="submit", 
+            rx.chakra.button("Submit",
+                       type_="submit",
                        bg="#ecfdf5",
                        color="#047857",
                        border_radius="lg",

reflex/.templates/web/utils/helpers/debounce.js

@@ -0,0 +1,17 @@
+const debounce_timeout_id = {};
+
+/**
+ * Generic debounce helper
+ *
+ * @param {string} name - the name of the event to debounce
+ * @param {function} func - the function to call after debouncing
+ * @param {number} delay - the time in milliseconds to wait before calling the function
+ */
+export default function debounce(name, func, delay) {
+  const key = `${name}__${delay}`;
+  clearTimeout(debounce_timeout_id[key]);
+  debounce_timeout_id[key] = setTimeout(() => {
+    func();
+    delete debounce_timeout_id[key];
+  }, delay);
+}

reflex/.templates/web/utils/helpers/throttle.js

@@ -0,0 +1,22 @@
+const in_throttle = {};
+
+/**
+ * Generic throttle helper
+ *
+ * @param {string} name - the name of the event to throttle
+ * @param {number} limit - time in milliseconds between events
+ * @returns true if the event is allowed to execute, false if it is throttled
+ */
+export default function throttle(name, limit) {
+  const key = `${name}__${limit}`;
+  if (!in_throttle[key]) {
+    in_throttle[key] = true;
+
+    setTimeout(() => {
+      delete in_throttle[key];
+    }, limit);
+    // function was not throttled, so allow execution
+    return true;
+  }
+  return false;
+}

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

@@ -12,6 +12,8 @@ import {
   onLoadInternalEvent,
   state_name,
 } from "utils/context.js";
+import debounce from "/utils/helpers/debounce";
+import throttle from "/utils/helpers/throttle";
 
 // Endpoint URLs.
 const EVENTURL = env.EVENT;
@@ -571,7 +573,23 @@ export const useEventLoop = (
     if (event_actions?.stopPropagation && _e?.stopPropagation) {
       _e.stopPropagation();
     }
-    queueEvents(events, socket);
+    const combined_name = events.map((e) => e.name).join("+++");
+    if (event_actions?.throttle) {
+      // If throttle returns false, the events are not added to the queue.
+      if (!throttle(combined_name, event_actions.throttle)) {
+        return;
+      }
+    }
+    if (event_actions?.debounce) {
+      // If debounce is used, queue the events after some delay
+      debounce(
+        combined_name,
+        () => queueEvents(events, socket),
+        event_actions.debounce,
+      );
+    } else {
+      queueEvents(events, socket);
+    }
   };
 
   const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
@@ -691,8 +709,8 @@ export const getRefValue = (ref) => {
   if (ref.current.type == "checkbox") {
     return ref.current.checked; // chakra
   } else if (
-    ref.current.className?.includes("rt-CheckboxButton") ||
-    ref.current.className?.includes("rt-SwitchButton")
+    ref.current.className?.includes("rt-CheckboxRoot") ||
+    ref.current.className?.includes("rt-SwitchRoot")
   ) {
     return ref.current.ariaChecked == "true"; // radix
   } else if (ref.current.className?.includes("rt-SliderRoot")) {

reflex/__init__.py

@@ -59,6 +59,7 @@ _ALL_COMPONENTS = [
     "code",
     "container",
     "context_menu",
+    "data_list",
     "dialog",
     "divider",
     "drawer",
@@ -79,8 +80,10 @@ _ALL_COMPONENTS = [
     "scroll_area",
     "section",
     "select",
+    "skeleton",
     "slider",
     "spacer",
+    "spinner",
     "stack",
     "switch",
     "table",
@@ -110,6 +113,8 @@ _ALL_COMPONENTS = [
     "ordered_list",
     "moment",
     "logo",
+    # Toast is in experimental namespace initially
+    # "toast",
 ]
 
 _MAPPING = {
@@ -118,7 +123,6 @@ _MAPPING = {
     "reflex.app": ["app", "App", "UploadFile"],
     "reflex.base": ["base", "Base"],
     "reflex.compiler": ["compiler"],
-    "reflex.compiler.utils": ["get_asset_path"],
     "reflex.components": _ALL_COMPONENTS,
     "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
     "reflex.components.chakra": ["chakra"],
@@ -166,6 +170,7 @@ _MAPPING = {
     "reflex.style": ["style", "toggle_color_mode"],
     "reflex.testing": ["testing"],
     "reflex.utils": ["utils"],
+    "reflex.utils.imports": ["ImportVar"],
     "reflex.vars": ["vars", "cached_var", "Var"],
 }
 

reflex/__init__.pyi

@@ -7,7 +7,6 @@ from reflex.app import UploadFile as UploadFile
 from reflex import base as base
 from reflex.base import Base as Base
 from reflex import compiler as compiler
-from reflex.compiler.utils import get_asset_path as get_asset_path
 from reflex.components import color as color
 from reflex.components import cond as cond
 from reflex.components import foreach as foreach
@@ -47,6 +46,7 @@ from reflex.components import checkbox as checkbox
 from reflex.components import code as code
 from reflex.components import container as container
 from reflex.components import context_menu as context_menu
+from reflex.components import data_list as data_list
 from reflex.components import dialog as dialog
 from reflex.components import divider as divider
 from reflex.components import drawer as drawer
@@ -67,8 +67,10 @@ from reflex.components import radio as radio
 from reflex.components import scroll_area as scroll_area
 from reflex.components import section as section
 from reflex.components import select as select
+from reflex.components import skeleton as skeleton
 from reflex.components import slider as slider
 from reflex.components import spacer as spacer
+from reflex.components import spinner as spinner
 from reflex.components import stack as stack
 from reflex.components import switch as switch
 from reflex.components import table as table
@@ -149,6 +151,7 @@ from reflex import style as style
 from reflex.style import toggle_color_mode as toggle_color_mode
 from reflex import testing as testing
 from reflex import utils as utils
+from reflex.utils.imports import ImportVar as ImportVar
 from reflex import vars as vars
 from reflex.vars import cached_var as cached_var
 from reflex.vars import Var as Var