reflex 0.4.9a2__tar.gz → 0.5.0a1__tar.gz

{reflex-0.4.9a2 → reflex-0.5.0a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.4.9a2
+Version: 0.5.0a1
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0
@@ -15,13 +15,14 @@ Classifier: Programming Language :: Python :: 3.8
 Classifier: Programming Language :: Python :: 3.9
 Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
 Requires-Dist: alembic (>=1.11.1,<2.0)
 Requires-Dist: build (>=1.0.3,<2.0)
 Requires-Dist: charset-normalizer (>=3.3.2,<4.0)
 Requires-Dist: dill (>=0.3.8,<0.4)
 Requires-Dist: distro (>=1.8.0,<2.0) ; sys_platform == "linux"
 Requires-Dist: fastapi (>=0.96.0,<1.0)
-Requires-Dist: gunicorn (>=20.1.0,<22.0)
+Requires-Dist: gunicorn (>=20.1.0,<23.0)
 Requires-Dist: httpx (>=0.25.1,<1.0)
 Requires-Dist: jinja2 (>=3.1.2,<4.0)
 Requires-Dist: packaging (>=23.1,<25.0)
@@ -71,7 +72,7 @@ Description-Content-Type: text/markdown
 
 ---
 
-[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md)
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md)
 
 ---
 
@@ -133,6 +134,8 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
+
+  
 ```python
 import reflex as rx
 import openai
@@ -161,6 +164,7 @@ class State(rx.State):
         self.image_url = response.data[0].url
         self.processing, self.complete = False, True
 
+
 def index():
     return rx.center(
         rx.vstack(
@@ -185,14 +189,22 @@ def index():
         height="100vh",
     )
 
-
 # Add state and page to the app.
 app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
+
+
+
+
 ## Let's break this down.
 
+<div align="center">
+<img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
+</div>
+
+
 ### **Reflex UI**
 
 Let's start with the UI.

{reflex-0.4.9a2 → reflex-0.5.0a1}/README.md

@@ -18,7 +18,7 @@
 
 ---
 
-[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md)
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md)
 
 ---
 
@@ -80,6 +80,8 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
+
+  
 ```python
 import reflex as rx
 import openai
@@ -108,6 +110,7 @@ class State(rx.State):
         self.image_url = response.data[0].url
         self.processing, self.complete = False, True
 
+
 def index():
     return rx.center(
         rx.vstack(
@@ -132,14 +135,22 @@ def index():
         height="100vh",
     )
 
-
 # Add state and page to the app.
 app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
+
+
+
+
 ## Let's break this down.
 
+<div align="center">
+<img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
+</div>
+
+
 ### **Reflex UI**
 
 Let's start with the UI.

{reflex-0.4.9a2 → reflex-0.5.0a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.4.9a2"
+version = "0.5.0a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
@@ -29,7 +29,7 @@ packages = [
 python = "^3.8"
 dill = ">=0.3.8,<0.4"
 fastapi = ">=0.96.0,<1.0"
-gunicorn = ">=20.1.0,<22.0"
+gunicorn = ">=20.1.0,<23.0"
 jinja2 = ">=3.1.2,<4.0"
 psutil = ">=5.9.4,<6.0"
 pydantic = ">=1.10.2,<3.0"
@@ -73,7 +73,7 @@ toml = ">=0.10.2,<1.0"
 pytest-asyncio = ">=0.20.1,<0.22.0" # https://github.com/pytest-dev/pytest-asyncio/issues/706
 pytest-cov = ">=4.0.0,<5.0"
 black = "^22.10.0,<23.0"
-ruff = "^0.0.244,<0.1.0"
+ruff = "0.1.0"
 pandas = [
     {version = ">=2.1.1,<3.0", python = ">=3.9,<3.13"},
     {version = ">=1.5.3,<2.0", python = ">=3.8,<3.9"},
@@ -97,16 +97,13 @@ build-backend = "poetry.core.masonry.api"
 [tool.pyright]
 
 [tool.ruff]
-
-select = ["B", "D", "E", "F", "I", "SIM", "W"]
-
-ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541"]
-
+exclude = ["*.pyi"]
 target-version = "py37"
-
-[tool.ruff.per-file-ignores]
-
+lint.select = ["B", "D", "E", "F", "I", "SIM", "W"]
+lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541"]
+[tool.ruff.lint.per-file-ignores]
 "__init__.py" = ["F401"]
-"tests/*.py" = ["D100", "D103", "D104"]
+"tests/*.py" = ["D100", "D103", "D104", "B018"]
 "reflex/.templates/*.py" = ["D100", "D103", "D104"]
 "*.pyi" = ["ALL"]
+"*/blank.py" = ["I001"]

reflex-0.5.0a1/reflex/.templates/apps/blank/code/blank.py

@@ -0,0 +1,39 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+
+import reflex as rx
+
+from rxconfig import config
+
+
+class State(rx.State):
+    """The app state."""
+
+    ...
+
+
+def index() -> rx.Component:
+    # 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(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,
+            ),
+            spacing="5",
+            justify="center",
+            min_height="85vh",
+        ),
+        rx.logo(),
+    )
+
+
+app = rx.App()
+app.add_page(index)

{reflex-0.4.9a2 → reflex-0.5.0a1}/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-0.4.9a2 → reflex-0.5.0a1}/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-0.5.0a1/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-0.5.0a1/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-0.4.9a2 → reflex-0.5.0a1}/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-0.4.9a2 → reflex-0.5.0a1}/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-0.4.9a2 → reflex-0.5.0a1}/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