Merge remote-tracking branch 'upstream/main' into guess-type-fallback

.coveragerc

@@ -11,7 +11,7 @@ omit =
 [report]
 show_missing = true
 # TODO bump back to 79
-fail_under = 60
+fail_under = 70
 precision = 2
 
 # Regexes for lines to exclude from consideration

.github/actions/setup_build_env/action.yml

@@ -18,7 +18,7 @@ inputs:
   poetry-version:
     description: 'Poetry version to install'
     required: false
-    default: '1.3.1'
+    default: '1.8.3'
   run-poetry-install:
     description: 'Whether to run poetry install on current dir'
     required: false

.github/workflows/benchmarks.yml

@@ -81,17 +81,13 @@ jobs:
       matrix:
         # Show OS combos first in GUI
         os: [ubuntu-latest, windows-latest, macos-12]
-        python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         exclude:
           - os: windows-latest
             python-version: '3.10.13'
           - os: windows-latest
             python-version: '3.9.18'
-          - os: windows-latest
-            python-version: '3.8.18'
           # keep only one python version for MacOS
-          - os: macos-latest
-            python-version: '3.8.18'
           - os: macos-latest
             python-version: '3.9.18'
           - os: macos-latest
@@ -103,8 +99,6 @@ jobs:
             python-version: '3.10.11'
           - os: windows-latest
             python-version: '3.9.13'
-          - os: windows-latest
-            python-version: '3.8.10'
 
     runs-on: ${{ matrix.os }}
     steps:

.github/workflows/check_node_latest.yml

@@ -0,0 +1,40 @@
+name: integration-node-latest
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
+
+env:
+    TELEMETRY_ENABLED: false
+    REFLEX_USE_SYSTEM_NODE: true
+
+jobs:
+    check_latest_node:
+        runs-on: ubuntu-22.04
+        strategy:
+            matrix:
+                python-version: ['3.12']
+                node-version: ['node']
+        steps:
+            - uses: actions/checkout@v4
+            - uses: ./.github/actions/setup_build_env
+              with:
+                python-version: ${{ matrix.python-version }}
+                run-poetry-install: true
+                create-venv-at-path: .venv
+            - uses: actions/setup-node@v4
+              with:
+                node-version: ${{ matrix.node-version }}
+            - run: |
+                poetry run uv pip install pyvirtualdisplay pillow
+                poetry run playwright install --with-deps
+            - run: |
+                poetry run pytest tests/test_node_version.py
+                poetry run pytest tests/integration
+  
+
+

.github/workflows/check_outdated_dependencies.yml

@@ -0,0 +1,88 @@
+name: check-outdated-dependencies
+
+on:
+  push:  # This will trigger the action when a pull request is opened or updated.
+    branches:
+      - 'release/**'  # This will trigger the action when any branch starting with "release/" is created.
+  workflow_dispatch:  # Allow manual triggering if needed.
+
+jobs:
+  backend:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - uses: ./.github/actions/setup_build_env
+      with:
+        python-version: '3.9'
+        run-poetry-install: true
+        create-venv-at-path: .venv
+
+    - name: Check outdated backend dependencies
+      run: |
+        outdated=$(poetry show -oT)
+        echo "Outdated:"
+        echo "$outdated"
+
+        filtered_outdated=$(echo "$outdated" | grep -vE 'pyright|ruff' || true)
+
+        if [ ! -z "$filtered_outdated" ]; then
+          echo "Outdated dependencies found:"
+          echo "$filtered_outdated"
+          exit 1
+        else
+          echo "All dependencies are up to date. (pyright and ruff are ignored)"
+        fi
+
+
+  frontend:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4  
+    - uses: ./.github/actions/setup_build_env
+      with:
+        python-version: '3.10.11'
+        run-poetry-install: true
+        create-venv-at-path: .venv
+    - name: Clone Reflex Website Repo
+      uses: actions/checkout@v4
+      with:
+        repository: reflex-dev/reflex-web
+        ref: main
+        path: reflex-web
+    - name: Install Requirements for reflex-web
+      working-directory: ./reflex-web
+      run: poetry run uv pip install -r requirements.txt
+    - name: Install additional dependencies for DB access
+      run: poetry run uv pip install psycopg2-binary
+    - name: Init Website for reflex-web
+      working-directory: ./reflex-web
+      run: poetry run reflex init
+    - name: Run Website and Check for errors
+      run: |
+        poetry run bash scripts/integration.sh ./reflex-web dev
+    - name: Check outdated frontend dependencies
+      working-directory: ./reflex-web/.web
+      run: |
+        raw_outdated=$(/home/runner/.local/share/reflex/bun/bin/bun outdated)
+        outdated=$(echo "$raw_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\|' || true)
+        echo "Outdated:"
+        echo "$outdated"
+
+        # Ignore 3rd party dependencies that are not updated.
+        filtered_outdated=$(echo "$outdated" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion|react-markdown|remark-math|remark-gfm|rehype-katex|rehype-raw|remark-unwrap-images' || true)
+        no_extra=$(echo "$filtered_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-' || true)
+
+
+        if [ ! -z "$no_extra" ]; then
+          echo "Outdated dependencies found:"
+          echo "$filtered_outdated"
+          exit 1
+        else
+          echo "All dependencies are up to date. (3rd party packages are ignored)"
+        fi
+

.github/workflows/integration_app_harness.yml

@@ -23,8 +23,8 @@ jobs:
     strategy:
       matrix:
         state_manager: ['redis', 'memory']
-        python-version: ['3.8.18', '3.11.5', '3.12.0']
+        python-version: ['3.11.5', '3.12.0']
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     services:
       # Label used to access the service container
       redis:
@@ -51,7 +51,8 @@ jobs:
           SCREENSHOT_DIR: /tmp/screenshots
           REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
         run: |
-          poetry run pytest integration
+          poetry run playwright install --with-deps
+          poetry run pytest tests/integration
       - uses: actions/upload-artifact@v4
         name: Upload failed test screenshots
         if: always()

.github/workflows/integration_tests.yml

@@ -42,22 +42,18 @@ jobs:
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest, windows-latest]
-        python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         exclude:
           - os: windows-latest
             python-version: '3.10.13'
           - os: windows-latest
             python-version: '3.9.18'
-          - os: windows-latest
-            python-version: '3.8.18'
         include:
           - os: windows-latest
             python-version: '3.10.11'
           - os: windows-latest
             python-version: '3.9.13'
-          - os: windows-latest
-            python-version: '3.8.10'
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -126,7 +122,7 @@ jobs:
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest]
         python-version: ['3.10.11', '3.11.4']
 
     env:
@@ -166,3 +162,44 @@ jobs:
           --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
           --pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
           --app-name "reflex-web" --path ./reflex-web/.web
+  
+  reflex-web-macos:
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ['3.11.5', '3.12.0']
+    runs-on: macos-12
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup_build_env
+        with:
+          python-version: ${{ matrix.python-version }}
+          run-poetry-install: true
+          create-venv-at-path: .venv
+      - name: Clone Reflex Website Repo
+        uses: actions/checkout@v4
+        with:
+          repository: reflex-dev/reflex-web
+          ref: main
+          path: reflex-web
+      - name: Install Requirements for reflex-web
+        working-directory: ./reflex-web
+        run: poetry run uv pip install -r requirements.txt
+      - name: Install additional dependencies for DB access
+        run: poetry run uv pip install psycopg2-binary
+      - name: Init Website for reflex-web
+        working-directory: ./reflex-web
+        run: poetry run reflex init
+      - name: Run Website and Check for errors
+        run: |
+          # Check that npm is home
+          npm -v
+          poetry run bash scripts/integration.sh ./reflex-web prod
+      - name: Measure and upload .web size
+        run:
+          poetry run python benchmarks/benchmark_web_size.py --os "${{ matrix.os }}"
+          --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
+          --pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
+          --app-name "reflex-web" --path ./reflex-web/.web
+  

.github/workflows/integration_tests_wsl.yml

@@ -37,6 +37,8 @@ jobs:
           path: reflex-examples
 
       - uses: Vampire/setup-wsl@v3
+        with:
+          distribution: Ubuntu-24.04
 
       - name: Install Python
         shell: wsl-bash {0}

.github/workflows/reflex_init_in_docker_test.yml

@@ -28,5 +28,5 @@ jobs:
           # Run reflex init in a docker container
 
           # cwd is repo root
-          docker build -f integration/init-test/Dockerfile -t reflex-init-test integration/init-test
+          docker build -f tests/integration/init-test/Dockerfile -t reflex-init-test tests/integration/init-test
-          docker run --rm -v $(pwd):/reflex-repo/ reflex-init-test /reflex-repo/integration/init-test/in_docker_test_script.sh
+          docker run --rm -v $(pwd):/reflex-repo/ reflex-init-test /reflex-repo/tests/integration/init-test/in_docker_test_script.sh

.github/workflows/unit_tests.yml

@@ -27,24 +27,21 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest, windows-latest]
-        python-version: ['3.8.18', '3.9.18', '3.10.13', '3.11.5', '3.12.0']
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         # Windows is a bit behind on Python version availability in Github
         exclude:
           - os: windows-latest
             python-version: '3.10.13'
           - os: windows-latest
             python-version: '3.9.18'
-          - os: windows-latest
-            python-version: '3.8.18'
         include:
           - os: windows-latest
             python-version: '3.10.11'
           - os: windows-latest
             python-version: '3.9.13'
-          - os: windows-latest
-            python-version: '3.8.10'
     runs-on: ${{ matrix.os }}
+
     # Service containers to run with `runner-job`
     services:
       # Label used to access the service container
@@ -69,17 +66,43 @@ jobs:
       - name: Run unit tests
         run: |
           export PYTHONUNBUFFERED=1
-          poetry run pytest tests --cov --no-cov-on-fail --cov-report=
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
       - name: Run unit tests w/ redis
         if: ${{ matrix.os == 'ubuntu-latest' }}
         run: |
           export PYTHONUNBUFFERED=1
           export REDIS_URL=redis://localhost:6379
-          poetry run pytest tests --cov --no-cov-on-fail --cov-report=
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
       # Change to explicitly install v1 when reflex-hosting-cli is compatible with v2
       - name: Run unit tests w/ pydantic v1
         run: |
           export PYTHONUNBUFFERED=1
           poetry run uv pip install "pydantic~=1.10"
-          poetry run pytest tests --cov --no-cov-on-fail --cov-report=
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
-      - run: poetry run coverage html
+      - name: Generate coverage report
+        run: poetry run coverage html
+
+  unit-tests-macos:
+    timeout-minutes: 30
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
+    runs-on: macos-12
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup_build_env
+        with:
+          python-version: ${{ matrix.python-version }}
+          run-poetry-install: true
+          create-venv-at-path: .venv
+      - name: Run unit tests
+        run: |
+          export PYTHONUNBUFFERED=1
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
+      - name: Run unit tests w/ pydantic v1
+        run: |
+          export PYTHONUNBUFFERED=1
+          poetry run uv pip install "pydantic~=1.10"
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=

.pre-commit-config.yaml

@@ -3,10 +3,10 @@ fail_fast: true
 repos:
 
   - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: v0.4.10
+    rev: v0.7.1
     hooks:
       - id: ruff-format
-        args: [integration, reflex, tests]
+        args: [reflex, tests]
       - id: ruff
         args: ["--fix", "--exit-non-zero-on-fix"]
         exclude: '^integration/benchmarks/'
@@ -25,7 +25,7 @@ repos:
     rev: v1.1.313
     hooks:
       - id: pyright
-        args: [integration, reflex, tests]
+        args: [reflex, tests]
         language: system
 
   - repo: https://github.com/terrencepreilly/darglint

CONTRIBUTING.md

@@ -8,7 +8,7 @@ Here is a quick guide on how to run Reflex repo locally so you can start contrib
 
 **Prerequisites:**
 
-- Python >= 3.8
+- Python >= 3.9
 - Poetry version >= 1.4.0 and add it to your path (see [Poetry Docs](https://python-poetry.org/docs/#installation) for more info).
 
 **1. Fork this repository:**
@@ -69,7 +69,7 @@ In your `reflex` directory run make sure all the unit tests are still passing us
 This will fail if code coverage is below 70%.
 
 ``` bash
-poetry run pytest tests --cov --no-cov-on-fail --cov-report= 
+poetry run pytest tests/units --cov --no-cov-on-fail --cov-report= 
 ```
 
 Next make sure all the following tests pass. This ensures that every new change has proper documentation and type checking.
@@ -87,7 +87,7 @@ poetry run ruff format .
 ```
 
 Consider installing git pre-commit hooks so Ruff, Pyright, Darglint and `make_pyi` will run automatically before each commit.
-Note that pre-commit will only be installed when you use a Python version >= 3.8.
+Note that pre-commit will only be installed when you use a Python version >= 3.9.
 
 ``` bash
 pre-commit install

README.md

@@ -10,7 +10,6 @@
 
 ### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -18,7 +17,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) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/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) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
 
 ---
 
@@ -35,7 +34,7 @@ See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architectu
 
 ## ⚙️ Installation
 
-Open a terminal and run (Requires Python 3.8+):
+Open a terminal and run (Requires Python 3.9+):
 
 ```bash
 pip install reflex

benchmarks/benchmark_lighthouse.py

@@ -3,8 +3,8 @@
 from __future__ import annotations
 
 import json
-import os
 import sys
+from pathlib import Path
 
 from utils import send_data_to_posthog
 
@@ -28,7 +28,7 @@ def insert_benchmarking_data(
     send_data_to_posthog("lighthouse_benchmark", properties)
 
 
-def get_lighthouse_scores(directory_path: str) -> dict:
+def get_lighthouse_scores(directory_path: str | Path) -> dict:
     """Extracts the Lighthouse scores from the JSON files in the specified directory.
 
     Args:
@@ -38,24 +38,21 @@ def get_lighthouse_scores(directory_path: str) -> dict:
         dict: The Lighthouse scores.
     """
     scores = {}
-
+    directory_path = Path(directory_path)
     try:
-        for filename in os.listdir(directory_path):
+        for filename in directory_path.iterdir():
-            if filename.endswith(".json") and filename != "manifest.json":
+            if filename.suffix == ".json" and filename.stem != "manifest":
-                file_path = os.path.join(directory_path, filename)
+                file_path = directory_path / filename
-                with open(file_path, "r") as file:
+                data = json.loads(file_path.read_text())
-                    data = json.load(file)
+                # Extract scores and add them to the dictionary with the filename as key
-                    # Extract scores and add them to the dictionary with the filename as key
+                scores[data["finalUrl"].replace("http://localhost:3000/", "/")] = {
-                    scores[data["finalUrl"].replace("http://localhost:3000/", "/")] = {
+                    "performance_score": data["categories"]["performance"]["score"],
-                        "performance_score": data["categories"]["performance"]["score"],
+                    "accessibility_score": data["categories"]["accessibility"]["score"],
-                        "accessibility_score": data["categories"]["accessibility"][
+                    "best_practices_score": data["categories"]["best-practices"][
-                            "score"
+                        "score"
-                        ],
+                    ],
-                        "best_practices_score": data["categories"]["best-practices"][
+                    "seo_score": data["categories"]["seo"]["score"],
-                            "score"
+                }
-                        ],
-                        "seo_score": data["categories"]["seo"]["score"],
-                    }
     except Exception as e:
         return {"error": e}
 

benchmarks/benchmark_package_size.py

@@ -2,11 +2,12 @@
 
 import argparse
 import os
+from pathlib import Path
 
 from utils import get_directory_size, get_python_version, send_data_to_posthog
 
 
-def get_package_size(venv_path, os_name):
+def get_package_size(venv_path: Path, os_name):
     """Get the size of a specified package.
 
     Args:
@@ -26,14 +27,12 @@ def get_package_size(venv_path, os_name):
 
     is_windows = "windows" in os_name
 
-    full_path = (
+    package_dir: Path = (
-        ["lib", f"python{python_version}", "site-packages"]
+        venv_path / "lib" / f"python{python_version}" / "site-packages"
         if not is_windows
-        else ["Lib", "site-packages"]
+        else venv_path / "Lib" / "site-packages"
     )
-
+    if not package_dir.exists():
-    package_dir = os.path.join(venv_path, *full_path)
-    if not os.path.exists(package_dir):
         raise ValueError(
             "Error: Virtual environment does not exist or is not activated."
         )
@@ -63,9 +62,9 @@ def insert_benchmarking_data(
         path: The path to the dir or file to check size.
     """
     if "./dist" in path:
-        size = get_directory_size(path)
+        size = get_directory_size(Path(path))
     else:
-        size = get_package_size(path, os_type_version)
+        size = get_package_size(Path(path), os_type_version)
 
     # Prepare the event data
     properties = {

benchmarks/benchmark_web_size.py

@@ -2,6 +2,7 @@
 
 import argparse
 import os
+from pathlib import Path
 
 from utils import get_directory_size, send_data_to_posthog
 
@@ -28,7 +29,7 @@ def insert_benchmarking_data(
         pr_id: The id of the PR.
         path: The path to the dir or file to check size.
     """
-    size = get_directory_size(path)
+    size = get_directory_size(Path(path))
 
     # Prepare the event data
     properties = {

benchmarks/utils.py

@@ -2,12 +2,13 @@
 
 import os
 import subprocess
+from pathlib import Path
 
 import httpx
 from httpx import HTTPError
 
 
-def get_python_version(venv_path, os_name):
+def get_python_version(venv_path: Path, os_name):
     """Get the python version of python in a virtual env.
 
     Args:
@@ -18,13 +19,13 @@ def get_python_version(venv_path, os_name):
         The python version.
     """
     python_executable = (
-        os.path.join(venv_path, "bin", "python")
+        venv_path / "bin" / "python"
         if "windows" not in os_name
-        else os.path.join(venv_path, "Scripts", "python.exe")
+        else venv_path / "Scripts" / "python.exe"
     )
     try:
         output = subprocess.check_output(
-            [python_executable, "--version"], stderr=subprocess.STDOUT
+            [str(python_executable), "--version"], stderr=subprocess.STDOUT
         )
         python_version = output.decode("utf-8").strip().split()[1]
         return ".".join(python_version.split(".")[:-1])
@@ -32,7 +33,7 @@ def get_python_version(venv_path, os_name):
         return None
 
 
-def get_directory_size(directory):
+def get_directory_size(directory: Path):
     """Get the size of a directory in bytes.
 
     Args:
@@ -44,8 +45,8 @@ def get_directory_size(directory):
     total_size = 0
     for dirpath, _, filenames in os.walk(directory):
         for f in filenames:
-            fp = os.path.join(dirpath, f)
+            fp = Path(dirpath) / f
-            total_size += os.path.getsize(fp)
+            total_size += fp.stat().st_size
     return total_size
 
 

docs/de/README.md

@@ -10,7 +10,6 @@
 
 ### **✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -35,7 +34,7 @@ Auf unserer [Architektur-Seite](https://reflex.dev/blog/2024-03-21-reflex-archit
 
 ## ⚙️ Installation
 
-Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.8+):
+Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.9+):
 
 ```bash
 pip install reflex

docs/es/README.md

@@ -35,7 +35,7 @@ Consulta nuestra [página de arquitectura](https://reflex.dev/blog/2024-03-21-re
 
 ## ⚙️ Instalación
 
-Abra un terminal y ejecute (Requiere Python 3.8+):
+Abra un terminal y ejecute (Requiere Python 3.9+):
 
 ```bash
 pip install reflex

docs/in/README.md

@@ -11,7 +11,6 @@ Pynecone की तलाश हैं? आप सही रेपो में
 ### **✨ प्रदर्शनकारी, अनुकूलित वेब ऐप्स, शुद्ध Python में। सेकंडों में तैनात करें। ✨**
 
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -36,7 +35,7 @@ Reflex के अंदर के कामकाज को जानने क
 
 ## ⚙️ इंस्टॉलेशन (Installation)
 
-एक टर्मिनल खोलें और चलाएं (Python 3.8+ की आवश्यकता है):
+एक टर्मिनल खोलें और चलाएं (Python 3.9+ की आवश्यकता है):
 
 ```bash
 pip install reflex

docs/it/README.md

@@ -10,7 +10,6 @@
 
 ### **✨ App web performanti e personalizzabili in puro Python. Distribuisci in pochi secondi. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -23,7 +22,7 @@
 
 ## ⚙️ Installazione
 
-Apri un terminale ed esegui (Richiede Python 3.8+):
+Apri un terminale ed esegui (Richiede Python 3.9+):
 
 ```bash
 pip install reflex

docs/ja/README.md

@@ -11,7 +11,6 @@
 ### **✨ 即時デプロイが可能な、Pure Python で作ったパフォーマンスと汎用性が高い Web アプリケーション ✨**
 
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -38,7 +37,7 @@ Reflex がどのように動作しているかを知るには、[アーキテク
 
 ## ⚙️ インストール
 
-ターミナルを開いて以下のコマンドを実行してください。（Python 3.8 以上が必要です。）:
+ターミナルを開いて以下のコマンドを実行してください。（Python 3.9 以上が必要です。）:
 
 ```bash
 pip install reflex

docs/kr/README.md

@@ -10,7 +10,6 @@
 
 ### **✨ 순수 Python으로 고성능 사용자 정의 웹앱을 만들어 보세요. 몇 초만에 배포 가능합니다. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -21,7 +20,7 @@
 ---
 ## ⚙️ 설치
 
-터미널을 열고 실행하세요. (Python 3.8+ 필요):
+터미널을 열고 실행하세요. (Python 3.9+ 필요):
 
 ```bash
 pip install reflex

docs/pe/README.md

@@ -10,7 +10,6 @@
 
 ### **✨ برنامه های تحت وب قابل تنظیم، کارآمد تماما پایتونی که در چند ثانیه مستقر(دپلوی) می‎شود. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -35,7 +34,7 @@
 
 ## ⚙️ Installation - نصب و راه اندازی
 
-یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.8+):
+یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.9+):
 
 ```bash
 pip install reflex

docs/pt/pt_br/README.md

@@ -21,7 +21,7 @@
 ---
 ## ⚙️ Instalação
 
-Abra um terminal e execute (Requer Python 3.8+):
+Abra um terminal e execute (Requer Python 3.9+):
 
 ```bash
 pip install reflex

docs/tr/README.md

@@ -11,7 +11,6 @@
 ### **✨ Saf Python'da performanslı, özelleştirilebilir web uygulamaları. Saniyeler içinde dağıtın. ✨**
 
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -25,7 +24,7 @@
 
 ## ⚙️ Kurulum
 
-Bir terminal açın ve çalıştırın (Python 3.8+ gerekir):
+Bir terminal açın ve çalıştırın (Python 3.9+ gerekir):
 
 ```bash
 pip install reflex

docs/vi/README.md

@@ -0,0 +1,267 @@
+```diff
++ Bạn đang tìm kiếm Pynecone? Bạn đã tìm đúng. Pynecone đã được đổi tên thành Reflex. +
+```
+
+<div align="center">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
+
+<hr>
+
+### **✨ Ứng dụng web hiệu suất cao, tùy chỉnh bằng Python thuần. Deploy trong vài giây. ✨**
+[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
+![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
+[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
+[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+</div>
+
+---
+
+[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) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
+
+---
+
+# Reflex
+
+Reflex là một thư viện để xây dựng ứng dụng web toàn bộ bằng Python thuần.
+
+Các tính năng chính:
+* **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.
+* **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.
+* **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.
+
+Đọc [bài viết về kiến trúc hệ thống](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) để hiểu rõ các hoạt động của Reflex.
+
+## ⚙️ Cài đặt
+
+Mở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.9+):
+
+```bash
+pip install reflex
+```
+
+## 🥳 Tạo ứng dụng đầu tiên
+
+Cài đặt `reflex` cũng như cài đặt công cụ dòng lệnh `reflex`.
+
+Kiểm tra việc cài đặt đã thành công hay chưa bằng cách tạo mới một ứng dụng. (Thay `my_app_name` bằng tên ứng dụng của bạn):
+
+```bash
+mkdir my_app_name
+cd my_app_name
+reflex init
+```
+
+Lệnh này tạo ra một ứng dụng mẫu trong một thư mục mới. 
+
+Bạn có thể chạy ứng dụng ở chế độ phát triển.
+
+```bash
+reflex run
+```
+
+Bạn có thể xem ứng dụng của bạn ở địa chỉ http://localhost:3000.
+
+Bạn có thể thay đổi mã nguồn ở `my_app_name/my_app_name.py`. Reflex nhanh chóng làm mới và bạn có thể thấy thay đổi trên ứng dụng của bạn ngay lập tức khi bạn lưu file.
+
+
+## 🫧 Ứng dụng ví dụ
+
+Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng  ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.
+
+&nbsp;
+
+<div align="center">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
+</div>
+
+&nbsp;
+
+Đây là toàn bộ đoạn mã để xây dựng ứng dụng trên. Nó được viết hoàn toàn trong một file Python!
+
+
+  
+```python
+import reflex as rx
+import openai
+
+openai_client = openai.OpenAI()
+
+
+class State(rx.State):
+    """The app state."""
+
+    prompt = ""
+    image_url = ""
+    processing = False
+    complete = False
+
+    def get_image(self):
+        """Get the image from the prompt."""
+        if self.prompt == "":
+            return rx.window_alert("Prompt Empty")
+
+        self.processing, self.complete = True, False
+        yield
+        response = openai_client.images.generate(
+            prompt=self.prompt, n=1, size="1024x1024"
+        )
+        self.image_url = response.data[0].url
+        self.processing, self.complete = False, True
+
+
+def index():
+    return rx.center(
+        rx.vstack(
+            rx.heading("DALL-E", font_size="1.5em"),
+            rx.input(
+                placeholder="Enter a prompt..",
+                on_blur=State.set_prompt,
+                width="25em",
+            ),
+            rx.button(
+                "Generate Image", 
+                on_click=State.get_image,
+                width="25em",
+                loading=State.processing
+            ),
+            rx.cond(
+                State.complete,
+                rx.image(src=State.image_url, width="20em"),
+            ),
+            align="center",
+        ),
+        width="100%",
+        height="100vh",
+    )
+
+# Add state and page to the app.
+app = rx.App()
+app.add_page(index, title="Reflex:DALL-E")
+```
+
+
+
+
+
+## Hãy phân tích chi tiết.
+
+<div align="center">
+<img src="../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**
+
+Bắt đầu với giao diện chính.
+
+```python
+def index():
+    return rx.center(
+        ...
+    )
+```
+
+Hàm `index` định nghĩa phần giao diện chính của ứng dụng.
+
+Chúng tôi sử dụng các component (thành phần) khác nhau như `center`, `vstack`, `input` và `button` để xây dựng giao diện phía trước.
+Các component có thể được lồng vào nhau để tạo ra các bố cục phức tạp. Và bạn cũng có thể sử dụng từ khoá `args` để tận dụng đầy đủ sức mạnh của CSS.
+
+Reflex có đến hơn [60 component được xây dựng sẵn](https://reflex.dev/docs/library) để giúp bạn bắt đầu. Chúng ta có thể tạo ra một component mới khá dễ dàng, thao khảo: [xây dựng component của riêng bạn](https://reflex.dev/docs/wrapping-react/overview/).
+
+### **State**
+
+Reflex biểu diễn giao diện bằng các hàm của state (trạng thái).
+
+```python
+class State(rx.State):
+    """The app state."""
+    prompt = ""
+    image_url = ""
+    processing = False
+    complete = False
+
+```
+
+Một state định nghĩa các biến (được gọi là vars) có thể thay đổi trong một ứng dụng và cho phép các hàm có thể thay đổi chúng.
+
+Tại đây state được cấu thành từ một `prompt` và `image_url`.
+Có cũng những biến boolean `processing` và `complete`
+để chỉ ra khi nào tắt nút (trong quá trình tạo hình ảnh)
+và khi nào hiển thị hình ảnh kết quả.
+
+### **Event Handlers**
+
+```python
+def get_image(self):
+    """Get the image from the prompt."""
+    if self.prompt == "":
+        return rx.window_alert("Prompt Empty")
+
+    self.processing, self.complete = True, False
+    yield
+    response = openai_client.images.generate(
+        prompt=self.prompt, n=1, size="1024x1024"
+    )
+    self.image_url = response.data[0].url
+    self.processing, self.complete = False, True
+```
+
+Với các state, chúng ta định nghĩa các hàm có thể thay đổi state vars được gọi là event handlers. Event handler là cách chúng ta có thể thay đổi state trong Reflex. Chúng có thể là phản hồi khi người dùng thao tác, chằng hạn khi nhấn vào nút hoặc khi đang nhập trong text box. Các hành động này được gọi là event.
+
+Ứng dụng DALL·E. của chúng ta có một event handler, `get_image` để lấy hình ảnh từ OpenAI API. Sử dụng từ khoá `yield` in ở giữa event handler để cập nhật giao diện. Hoặc giao diện có thể cập nhật ở cuối event handler.
+
+### **Routing**
+
+Cuối cùng, chúng ta định nghĩa một ứng dụng.
+
+```python
+app = rx.App()
+```
+
+Chúng ta thêm một trang ở đầu ứng dụng bằng index component. Chúng ta cũng thêm tiêu đề của ứng dụng để hiển thị lên trình duyệt.
+
+
+```python
+app.add_page(index, title="DALL-E")
+```
+
+Bạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.
+
+## 📑 Tài liệu
+
+<div align="center">
+
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Gallery](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+
+</div>
+
+
+## ✅ Status
+
+Reflex phát hành vào tháng 12/2022 với tên là Pynecone.
+
+Đến tháng 02/2024, chúng tôi tạo ra dịch vụ dưới phiên bản alpha! Trong thời gian này mọi người có thể triển khai ứng dụng hoàn toàn miễn phí. Xem [roadmap](https://github.com/reflex-dev/reflex/issues/2727) để biết thêm chi tiết.
+
+Reflex ra phiên bản mới với các tính năng mới hàng tuần! Hãy :star: star và :eyes: watch repo này để thấy các cập nhật mới nhất.
+
+## Contributing
+
+Chúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là các cách để bắt đầu với cộng đồng Reflex.
+
+-   **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.
+-   **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.
+-   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.
+
+Chúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem 
+[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+
+
+## Xin cảm ơn các Contributors:
+<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
+</a>
+
+## License
+
+Reflex là mã nguồn mở và sử dụng giấy phép [Apache License 2.0](LICENSE).

docs/zh/zh_cn/README.md

@@ -10,7 +10,6 @@
 
 ### **✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -35,7 +34,7 @@ Reflex 是一个使用纯Python构建全栈web应用的库。
 
 ## ⚙️ 安装
 
-打开一个终端并且运行(要求Python3.8+):
+打开一个终端并且运行(要求Python3.9+):
 
 ```bash
 pip install reflex

docs/zh/zh_tw/README.md

@@ -11,7 +11,6 @@
 **✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**  
 
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
@@ -37,7 +36,7 @@ Reflex 是一個可以用純 Python 構建全端網頁應用程式的函式庫
 
 ## ⚙️ 安裝
 
-開啟一個終端機並且執行 (需要 Python 3.8+):
+開啟一個終端機並且執行 (需要 Python 3.9+):
 
 ```bash
 pip install reflex

integration/test_component_state.py

@@ -1,107 +0,0 @@
-"""Test that per-component state scaffold works and operates independently."""
-
-from typing import Generator
-
-import pytest
-from selenium.webdriver.common.by import By
-
-from reflex.testing import AppHarness
-
-from . import utils
-
-
-def ComponentStateApp():
-    """App using per component state."""
-    import reflex as rx
-
-    class MultiCounter(rx.ComponentState):
-        count: int = 0
-
-        def increment(self):
-            self.count += 1
-
-        @classmethod
-        def get_component(cls, *children, **props):
-            return rx.vstack(
-                *children,
-                rx.heading(cls.count, id=f"count-{props.get('id', 'default')}"),
-                rx.button(
-                    "Increment",
-                    on_click=cls.increment,
-                    id=f"button-{props.get('id', 'default')}",
-                ),
-                **props,
-            )
-
-    app = rx.App(state=rx.State)  # noqa
-
-    @rx.page()
-    def index():
-        mc_a = MultiCounter.create(id="a")
-        mc_b = MultiCounter.create(id="b")
-        assert mc_a.State != mc_b.State
-        return rx.vstack(
-            mc_a,
-            mc_b,
-            rx.button(
-                "Inc A",
-                on_click=mc_a.State.increment,  # type: ignore
-                id="inc-a",
-            ),
-        )
-
-
-@pytest.fixture()
-def component_state_app(tmp_path) -> Generator[AppHarness, None, None]:
-    """Start ComponentStateApp app at tmp_path via AppHarness.
-
-    Args:
-        tmp_path: pytest tmp_path fixture
-
-    Yields:
-        running AppHarness instance
-    """
-    with AppHarness.create(
-        root=tmp_path,
-        app_source=ComponentStateApp,  # type: ignore
-    ) as harness:
-        yield harness
-
-
-@pytest.mark.asyncio
-async def test_component_state_app(component_state_app: AppHarness):
-    """Increment counters independently.
-
-    Args:
-        component_state_app: harness for ComponentStateApp app
-    """
-    assert component_state_app.app_instance is not None, "app is not running"
-    driver = component_state_app.frontend()
-
-    ss = utils.SessionStorage(driver)
-    assert AppHarness._poll_for(lambda: ss.get("token") is not None), "token not found"
-
-    count_a = driver.find_element(By.ID, "count-a")
-    count_b = driver.find_element(By.ID, "count-b")
-    button_a = driver.find_element(By.ID, "button-a")
-    button_b = driver.find_element(By.ID, "button-b")
-    button_inc_a = driver.find_element(By.ID, "inc-a")
-
-    assert count_a.text == "0"
-
-    button_a.click()
-    assert component_state_app.poll_for_content(count_a, exp_not_equal="0") == "1"
-
-    button_a.click()
-    assert component_state_app.poll_for_content(count_a, exp_not_equal="1") == "2"
-
-    button_inc_a.click()
-    assert component_state_app.poll_for_content(count_a, exp_not_equal="2") == "3"
-
-    assert count_b.text == "0"
-
-    button_b.click()
-    assert component_state_app.poll_for_content(count_b, exp_not_equal="0") == "1"
-
-    button_b.click()
-    assert component_state_app.poll_for_content(count_b, exp_not_equal="1") == "2"

integration/test_urls.py

@@ -1,68 +0,0 @@
-"""Integration tests for all urls in Reflex."""
-
-import os
-import re
-from pathlib import Path
-
-import pytest
-import requests
-
-
-def check_urls(repo_dir):
-    """Check that all URLs in the repo are valid and secure.
-
-    Args:
-        repo_dir: The directory of the repo.
-
-    Returns:
-        A list of errors.
-    """
-    url_pattern = re.compile(r'http[s]?://reflex\.dev[^\s")]*')
-    errors = []
-
-    for root, _dirs, files in os.walk(repo_dir):
-        if "__pycache__" in root:
-            continue
-
-        for file_name in files:
-            if not file_name.endswith(".py") and not file_name.endswith(".md"):
-                continue
-
-            file_path = os.path.join(root, file_name)
-            try:
-                with open(file_path, "r", encoding="utf-8", errors="ignore") as file:
-                    for line in file:
-                        urls = url_pattern.findall(line)
-                        for url in set(urls):
-                            if url.startswith("http://"):
-                                errors.append(
-                                    f"Found insecure HTTP URL: {url} in {file_path}"
-                                )
-                            url = url.strip('"\n')
-                            try:
-                                response = requests.head(
-                                    url, allow_redirects=True, timeout=5
-                                )
-                                response.raise_for_status()
-                            except requests.RequestException as e:
-                                errors.append(
-                                    f"Error accessing URL: {url} in {file_path} | Error: {e}, , Check your path ends with a /"
-                                )
-            except Exception as e:
-                errors.append(f"Error reading file: {file_path} | Error: {e}")
-
-    return errors
-
-
-@pytest.mark.parametrize(
-    "repo_dir",
-    [Path(__file__).resolve().parent.parent / "reflex"],
-)
-def test_find_and_check_urls(repo_dir):
-    """Test that all URLs in the repo are valid and secure.
-
-    Args:
-        repo_dir: The directory of the repo.
-    """
-    errors = check_urls(repo_dir)
-    assert not errors, "\n".join(errors)

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.6.0a1"
+version = "0.6.5dev1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
@@ -26,8 +26,7 @@ packages = [
 ]
 
 [tool.poetry.dependencies]
-python = "^3.8"
+python = "^3.9"
-dill = ">=0.3.8,<0.4"
 fastapi = ">=0.96.0,!=0.111.0,!=0.111.1"
 gunicorn = ">=20.1.0,<24.0"
 jinja2 = ">=3.1.2,<4.0"
@@ -54,34 +53,32 @@ reflex-hosting-cli = ">=0.1.2,<2.0"
 charset-normalizer = ">=3.3.2,<4.0"
 wheel = ">=0.42.0,<1.0"
 build = ">=1.0.3,<2.0"
-setuptools = ">=69.1.1,<70.2"
+setuptools = ">=75.0"
 httpx = ">=0.25.1,<1.0"
 twine = ">=4.0.0,<6.0"
 tomlkit = ">=0.12.4,<1.0"
 lazy_loader = ">=0.4"
-reflex-chakra = ">=0.6.0a6"
+reflex-chakra = ">=0.6.0"
 
 [tool.poetry.group.dev.dependencies]
-pytest = ">=7.1.2,<8.0"
+pytest = ">=7.1.2,<9.0"
 pytest-mock = ">=3.10.0,<4.0"
 pyright = ">=1.1.229,<1.1.335"
 darglint = ">=1.8.1,<2.0"
+dill = ">=0.3.8"
 toml = ">=0.10.2,<1.0"
-pytest-asyncio = ">=0.20.1,<0.22.0" # https://github.com/pytest-dev/pytest-asyncio/issues/706
+pytest-asyncio = ">=0.24.0"
-pytest-cov = ">=4.0.0,<5.0"
+pytest-cov = ">=4.0.0,<6.0"
-ruff = "^0.4.9"
+ruff = "0.7.1"
-pandas = [
+pandas = ">=2.1.1,<3.0"
-    {version = ">=2.1.1,<3.0", python = ">=3.9,<3.13"},
+pillow = ">=10.0.0,<12.0"
-    {version = ">=1.5.3,<2.0", python = ">=3.8,<3.9"},
-]
-pillow = [
-    {version = ">=10.0.0,<11.0", python = ">=3.8,<4.0"}
-]
 plotly = ">=5.13.0,<6.0"
 asynctest = ">=0.13.0,<1.0"
-pre-commit = {version = ">=3.2.1", python = ">=3.8,<4.0"}
+pre-commit = ">=3.2.1"
 selenium = ">=4.11.0,<5.0"
 pytest-benchmark = ">=4.0.0,<5.0"
+playwright = ">=1.46.0"
+pytest-playwright = ">=0.5.1"
 
 [tool.poetry.scripts]
 reflex = "reflex.reflex:cli"
@@ -93,9 +90,9 @@ build-backend = "poetry.core.masonry.api"
 [tool.pyright]
 
 [tool.ruff]
-target-version = "py38"
+target-version = "py39"
 lint.select = ["B", "D", "E", "F", "I", "SIM", "W"]
-lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541"]
+lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541", "SIM115"]
 lint.pydocstyle.convention = "google"
 
 [tool.ruff.lint.per-file-ignores]
@@ -104,3 +101,7 @@ lint.pydocstyle.convention = "google"
 "reflex/.templates/*.py" = ["D100", "D103", "D104"]
 "*.pyi" = ["D301", "D415", "D417", "D418", "E742"]
 "*/blank.py" = ["I001"]
+
+[tool.pytest.ini_options]
+asyncio_default_fixture_loop_scope = "function"
+asyncio_mode = "auto"

reflex/.templates/jinja/custom_components/pyproject.toml.jinja2

@@ -8,11 +8,11 @@ version = "0.0.1"
 description = "Reflex custom component {{ module_name }}"
 readme = "README.md"
 license = { text = "Apache-2.0" }
-requires-python = ">=3.8"
+requires-python = ">=3.9"
 authors = [{ name = "", email = "YOUREMAIL@domain.com" }]
 keywords = ["reflex","reflex-custom-components"]
 
-dependencies = ["reflex>=0.4.2"]
+dependencies = ["reflex>={{ reflex_version }}"]
 
 classifiers = ["Development Status :: 4 - Beta"]
 

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

@@ -1,12 +1,15 @@
 {% extends "web/pages/base_page.js.jinja2" %}
 
 {% block early_imports %}
-import '/styles/styles.css'
+import '$/styles/styles.css'
 {% endblock %}
 
 {% block declaration %}
-import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
+import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context.js";
 import { ThemeProvider } from 'next-themes'
+{% for library_alias, library_path in  window_libraries %}
+import * as {{library_alias}} from "{{library_path}}";
+{% endfor %}
 
 {% for custom_code in custom_codes %}
 {{custom_code}}
@@ -26,6 +29,15 @@ 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 = {
+{% for library_alias, library_path in  window_libraries %}
+      "{{library_path}}": {{library_alias}},
+{% endfor %}
+    };
+    window["__reflex"] = windowImports;
+  }, []);
   return (
     <ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
       <AppWrap>

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo, useReducer, useState } from "react"
-import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "/utils/state.js"
+import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state.js"
 
 {% if initial_state %}
 export const initialState = {{ initial_state|json_dumps }}
@@ -59,6 +59,8 @@ export const initialEvents = () => [
 {% else %}
 export const state_name = undefined
 
+export const exception_state_name = undefined
+
 export const onLoadInternalEvent = () => []
 
 export const initialEvents = () => []

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -4,8 +4,8 @@ import {
   ColorModeContext,
   defaultColorMode,
   isDevMode,
-  lastCompiledTimeStamp
+  lastCompiledTimeStamp,
-} from "/utils/context.js";
+} from "$/utils/context.js";
 
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
@@ -37,7 +37,7 @@ export default function RadixThemesColorModeProvider({ children }) {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
       console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
       );
       mode = defaultColorMode;
     }

reflex/.templates/web/components/shiki/code.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+import { codeToHtml} from "shiki"
+
+export function Code ({code, theme, language, transformers, ...divProps}) {
+    const [codeResult, setCodeResult] = useState("")
+    useEffect(() => {
+        async function fetchCode() {
+          let final_code;
+
+          if (Array.isArray(code)) {
+            final_code = code[0];
+          } else {
+            final_code = code;
+          }
+          const result = await codeToHtml(final_code, {
+            lang: language,
+            theme,
+            transformers
+          });
+          setCodeResult(result);
+        }
+        fetchCode();
+      }, [code, language, theme, transformers]
+
+    )
+    return (
+        <div dangerouslySetInnerHTML={{__html: codeResult}} {...divProps}  ></div>
+    )
+}

reflex/.templates/web/jsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "$/*": ["*"],
       "@/*": ["public/*"]
     }
   }

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

@@ -2,7 +2,7 @@
 import axios from "axios";
 import io from "socket.io-client";
 import JSON5 from "json5";
-import env from "/env.json";
+import env from "$/env.json";
 import Cookies from "universal-cookie";
 import { useEffect, useRef, useState } from "react";
 import Router, { useRouter } from "next/router";
@@ -12,9 +12,10 @@ import {
   onLoadInternalEvent,
   state_name,
   exception_state_name,
-} from "utils/context.js";
+} from "$/utils/context.js";
-import debounce from "/utils/helpers/debounce";
+import debounce from "$/utils/helpers/debounce";
-import throttle from "/utils/helpers/throttle";
+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]);
@@ -525,13 +544,19 @@ export const uploadFiles = async (
 
 /**
  * Create an event object.
- * @param name The name of the event.
+ * @param {string} name The name of the event.
- * @param payload The payload of the event.
+ * @param {Object.<string, Any>} payload The payload of the event.
- * @param handler The client handler to process event.
+ * @param {Object.<string, (number|boolean)>} event_actions The actions to take on the event.
+ * @param {string} handler The client handler to process event.
  * @returns The event object.
  */
-export const Event = (name, payload = {}, handler = null) => {
+export const Event = (
-  return { name, payload, handler };
+  name,
+  payload = {},
+  event_actions = {},
+  handler = null
+) => {
+  return { name, payload, handler, event_actions };
 };
 
 /**
@@ -574,7 +599,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 +643,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 +682,13 @@ export const useEventLoop = (
     if (!(args instanceof Array)) {
       args = [args];
     }
-    const _e = args.filter((o) => o?.preventDefault !== undefined)[0]
+
+    event_actions = events.reduce(
+      (acc, e) => ({ ...acc, ...e.event_actions }),
+      event_actions ?? {}
+    );
+
+    const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
 
     if (event_actions?.preventDefault && _e?.preventDefault) {
       _e.preventDefault();
@@ -671,7 +708,7 @@ export const useEventLoop = (
       debounce(
         combined_name,
         () => queueEvents(events, socket),
-        event_actions.debounce,
+        event_actions.debounce
       );
     } else {
       queueEvents(events, socket);
@@ -696,30 +733,34 @@ export const useEventLoop = (
     }
   }, [router.isReady]);
 
-    // Handle frontend errors and send them to the backend via websocket.
+  // Handle frontend errors and send them to the backend via websocket.
-    useEffect(() => {
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
 
-      if (typeof window === 'undefined') {
+    window.onerror = function (msg, url, lineNo, columnNo, error) {
-        return;
+      addEvents([
-      }
+        Event(`${exception_state_name}.handle_frontend_exception`, {
-  
-      window.onerror = function (msg, url, lineNo, columnNo, error) {
-        addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
           stack: error.stack,
-        })])
+          component_stack: "",
-        return false;
+        }),
-      }
+      ]);
+      return false;
+    };
 
-      //NOTE: Only works in Chrome v49+
+    //NOTE: Only works in Chrome v49+
-      //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events
+    //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events
-      window.onunhandledrejection = function (event) {
+    window.onunhandledrejection = function (event) {
-          addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
+      addEvents([
-            stack: event.reason.stack,
+        Event(`${exception_state_name}.handle_frontend_exception`, {
-          })])
+          stack: event.reason.stack,
-          return false;
+          component_stack: "",
-      }
+        }),
-  
+      ]);
-    },[])
+      return false;
+    };
+  }, []);
 
   // Main event loop.
   useEffect(() => {
@@ -782,11 +823,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);
@@ -805,7 +846,9 @@ export const useEventLoop = (
  * @returns True if the value is truthy, false otherwise.
  */
 export const isTrue = (val) => {
-  return Array.isArray(val) ? val.length > 0 : !!val;
+  if (Array.isArray(val)) return val.length > 0;
+  if (val === Object(val)) return Object.keys(val).length > 0;
+  return Boolean(val);
 };
 
 /**

reflex/__init__.py

@@ -89,6 +89,8 @@ from reflex.utils import (
     lazy_loader,
 )
 
+from .event import event as event
+
 # import this here explicitly to avoid returning the page module since page attr has the
 # same name as page module(page.py)
 from .page import page as page
@@ -206,6 +208,13 @@ RADIX_PRIMITIVES_MAPPING: dict = {
     "components.radix.primitives.form": [
         "form",
     ],
+    "components.radix.primitives.progress": [
+        "progress",
+    ],
+}
+
+RADIX_PRIMITIVES_SHORTCUT_MAPPING: dict = {
+    k: v for k, v in RADIX_PRIMITIVES_MAPPING.items() if "progress" not in k
 }
 
 COMPONENTS_CORE_MAPPING: dict = {
@@ -248,7 +257,7 @@ RADIX_MAPPING: dict = {
     **RADIX_THEMES_COMPONENTS_MAPPING,
     **RADIX_THEMES_TYPOGRAPHY_MAPPING,
     **RADIX_THEMES_LAYOUT_MAPPING,
-    **RADIX_PRIMITIVES_MAPPING,
+    **RADIX_PRIMITIVES_SHORTCUT_MAPPING,
 }
 
 _MAPPING: dict = {
@@ -311,25 +320,27 @@ _MAPPING: dict = {
         "upload_files",
         "window_alert",
     ],
+    "istate.storage": [
+        "Cookie",
+        "LocalStorage",
+        "SessionStorage",
+    ],
     "middleware": ["middleware", "Middleware"],
     "model": ["session", "Model"],
     "state": [
         "var",
-        "Cookie",
-        "LocalStorage",
-        "SessionStorage",
         "ComponentState",
         "State",
+        "dynamic",
     ],
     "style": ["Style", "toggle_color_mode"],
     "utils.imports": ["ImportVar"],
     "utils.serializers": ["serializer"],
-    "vars": ["Var"],
+    "vars": ["Var", "field", "Field"],
 }
 
 _SUBMODULES: set[str] = {
     "components",
-    "event",
     "app",
     "style",
     "admin",

reflex/__init__.pyi

@@ -11,7 +11,6 @@ from . import base as base
 from . import compiler as compiler
 from . import components as components
 from . import config as config
-from . import event as event
 from . import model as model
 from . import style as style
 from . import testing as testing
@@ -161,6 +160,7 @@ from .event import clear_local_storage as clear_local_storage
 from .event import clear_session_storage as clear_session_storage
 from .event import console_log as console_log
 from .event import download as download
+from .event import event as event
 from .event import prevent_default as prevent_default
 from .event import redirect as redirect
 from .event import remove_cookie as remove_cookie
@@ -174,22 +174,25 @@ from .event import stop_propagation as stop_propagation
 from .event import upload_files as upload_files
 from .event import window_alert as window_alert
 from .experimental import _x as _x
+from .istate.storage import Cookie as Cookie
+from .istate.storage import LocalStorage as LocalStorage
+from .istate.storage import SessionStorage as SessionStorage
 from .middleware import Middleware as Middleware
 from .middleware import middleware as middleware
 from .model import Model as Model
 from .model import session as session
 from .page import page as page
 from .state import ComponentState as ComponentState
-from .state import Cookie as Cookie
-from .state import LocalStorage as LocalStorage
-from .state import SessionStorage as SessionStorage
 from .state import State as State
+from .state import dynamic as dynamic
 from .state import var as var
 from .style import Style as Style
 from .style import toggle_color_mode as toggle_color_mode
 from .utils.imports import ImportVar as ImportVar
 from .utils.serializers import serializer as serializer
+from .vars import Field as Field
 from .vars import Var as Var
+from .vars import field as field
 
 del compat
 RADIX_THEMES_MAPPING: dict
@@ -197,6 +200,7 @@ RADIX_THEMES_COMPONENTS_MAPPING: dict
 RADIX_THEMES_LAYOUT_MAPPING: dict
 RADIX_THEMES_TYPOGRAPHY_MAPPING: dict
 RADIX_PRIMITIVES_MAPPING: dict
+RADIX_PRIMITIVES_SHORTCUT_MAPPING: dict
 COMPONENTS_CORE_MAPPING: dict
 COMPONENTS_BASE_MAPPING: dict
 RADIX_MAPPING: dict

reflex/app.py

@@ -6,6 +6,7 @@ import asyncio
 import concurrent.futures
 import contextlib
 import copy
+import dataclasses
 import functools
 import inspect
 import io
@@ -18,6 +19,7 @@ import traceback
 from datetime import datetime
 from pathlib import Path
 from typing import (
+    TYPE_CHECKING,
     Any,
     AsyncIterator,
     Callable,
@@ -47,7 +49,10 @@ from reflex.app_mixins import AppMixin, LifespanMixin, MiddlewareMixin
 from reflex.base import Base
 from reflex.compiler import compiler
 from reflex.compiler import utils as compiler_utils
-from reflex.compiler.compiler import ExecutorSafeFunctions
+from reflex.compiler.compiler import (
+    ExecutorSafeFunctions,
+    compile_theme,
+)
 from reflex.components.base.app_wrap import AppWrap
 from reflex.components.base.error_boundary import ErrorBoundary
 from reflex.components.base.fragment import Fragment
@@ -64,7 +69,7 @@ from reflex.components.core.client_side_routing import (
 )
 from reflex.components.core.upload import Upload, get_upload_dir
 from reflex.components.radix import themes
-from reflex.config import get_config
+from reflex.config import environment, get_config
 from reflex.event import Event, EventHandler, EventSpec, window_alert
 from reflex.model import Model, get_db_status
 from reflex.page import (
@@ -88,6 +93,9 @@ from reflex.utils import codespaces, console, exceptions, format, prerequisites,
 from reflex.utils.exec import is_prod_mode, is_testing_env, should_skip_compile
 from reflex.utils.imports import ImportVar
 
+if TYPE_CHECKING:
+    from reflex.vars import Var
+
 # Define custom types.
 ComponentCallable = Callable[[], Component]
 Reducer = Callable[[Event], Coroutine[Any, Any, StateUpdate]]
@@ -170,6 +178,21 @@ class OverlayFragment(Fragment):
     pass
 
 
+@dataclasses.dataclass(
+    frozen=True,
+)
+class UnevaluatedPage:
+    """An uncompiled page."""
+
+    component: Union[Component, ComponentCallable]
+    route: str
+    title: Union[Var, str, None]
+    description: Union[Var, str, None]
+    image: str
+    on_load: Union[EventHandler, EventSpec, List[Union[EventHandler, EventSpec]], None]
+    meta: List[Dict[str, str]]
+
+
 class App(MiddlewareMixin, LifespanMixin, Base):
     """The main Reflex app that encapsulates the backend and frontend.
 
@@ -220,6 +243,9 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     # Attributes to add to the html root tag of every page.
     html_custom_attrs: Optional[Dict[str, str]] = None
 
+    # A map from a route to an unevaluated page. PRIVATE.
+    unevaluated_pages: Dict[str, UnevaluatedPage] = {}
+
     # A map from a page route to the component to render. Users should use `add_page`. PRIVATE.
     pages: Dict[str, Component] = {}
 
@@ -381,8 +407,8 @@ class App(MiddlewareMixin, LifespanMixin, Base):
 
     def _add_optional_endpoints(self):
         """Add optional api endpoints (_upload)."""
-        # To upload files.
         if Upload.is_used:
+            # To upload files.
             self.api.post(str(constants.Endpoint.UPLOAD))(upload(self))
 
             # To access uploaded files.
@@ -431,32 +457,19 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             The generated component.
 
         Raises:
-            VarOperationTypeError: When an invalid component var related function is passed.
-            TypeError: When an invalid component function is passed.
             exceptions.MatchTypeError: If the return types of match cases in rx.match are different.
         """
-        from reflex.utils.exceptions import VarOperationTypeError
-
         try:
             return component if isinstance(component, Component) else component()
         except exceptions.MatchTypeError:
             raise
-        except TypeError as e:
-            message = str(e)
-            if "Var" in message:
-                raise VarOperationTypeError(
-                    "You may be trying to use an invalid Python function on a state var. "
-                    "When referencing a var inside your render code, only limited var operations are supported. "
-                    "See the var operation docs here: https://reflex.dev/docs/vars/var-operations/"
-                ) from e
-            raise e
 
     def add_page(
         self,
         component: Component | ComponentCallable,
         route: str | None = None,
-        title: str | None = None,
+        title: str | Var | None = None,
-        description: str | None = None,
+        description: str | Var | None = None,
         image: str = constants.DefaultPage.IMAGE,
         on_load: (
             EventHandler | EventSpec | list[EventHandler | EventSpec] | None
@@ -482,9 +495,8 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         """
         # If the route is not set, get it from the callable.
         if route is None:
-            assert isinstance(
+            if not isinstance(component, Callable):
-                component, Callable
+                raise ValueError("Route must be set if component is not a callable.")
-            ), "Route must be set if component is not a callable."
             # Format the route.
             route = format.format_route(component.__name__)
         else:
@@ -493,13 +505,13 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         # Check if the route given is valid
         verify_route_validity(route)
 
-        if route in self.pages and os.getenv(constants.RELOAD_CONFIG):
+        if route in self.unevaluated_pages and os.getenv(constants.RELOAD_CONFIG):
             # when the app is reloaded(typically for app harness tests), we should maintain
             # the latest render function of a route.This applies typically to decorated pages
             # since they are only added when app._compile is called.
-            self.pages.pop(route)
+            self.unevaluated_pages.pop(route)
 
-        if route in self.pages:
+        if route in self.unevaluated_pages:
             route_name = (
                 f"`{route}` or `/`"
                 if route == constants.PageNames.INDEX_ROUTE
@@ -515,58 +527,38 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         state = self.state if self.state else State
         state.setup_dynamic_args(get_route_args(route))
 
-        # Generate the component if it is a callable.
+        if on_load:
-        component = self._generate_component(component)
+            self.load_events[route] = (
+                on_load if isinstance(on_load, list) else [on_load]
+            )
 
-        # unpack components that return tuples in an rx.fragment.
+        self.unevaluated_pages[route] = UnevaluatedPage(
-        if isinstance(component, tuple):
+            component=component,
-            component = Fragment.create(*component)
+            route=route,
-
+            title=title,
-        # Ensure state is enabled if this page uses state.
+            description=description,
-        if self.state is None:
+            image=image,
-            if on_load or component._has_stateful_event_triggers():
+            on_load=on_load,
-                self._enable_state()
+            meta=meta,
-            else:
-                for var in component._get_vars(include_children=True):
-                    var_data = var._get_all_var_data()
-                    if not var_data:
-                        continue
-                    if not var_data.state:
-                        continue
-                    self._enable_state()
-                    break
-
-        component = OverlayFragment.create(component)
-
-        meta_args = {
-            "title": (
-                title
-                if title is not None
-                else format.make_default_page_title(get_config().app_name, route)
-            ),
-            "image": image,
-            "meta": meta,
-        }
-
-        if description is not None:
-            meta_args["description"] = description
-
-        # Add meta information to the component.
-        compiler_utils.add_meta(
-            component,
-            **meta_args,
         )
 
+    def _compile_page(self, route: str):
+        """Compile a page.
+
+        Args:
+            route: The route of the page to compile.
+        """
+        component, enable_state = compiler.compile_unevaluated_page(
+            route, self.unevaluated_pages[route], self.state, self.style, self.theme
+        )
+
+        if enable_state:
+            self._enable_state()
+
         # Add the page.
         self._check_routes_conflict(route)
         self.pages[route] = component
 
-        # Add the load events.
-        if on_load:
-            if not isinstance(on_load, list):
-                on_load = [on_load]
-            self.load_events[route] = on_load
-
     def get_load_events(self, route: str) -> list[EventHandler | EventSpec]:
         """Get the load events for a route.
 
@@ -693,7 +685,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             for i, tags in imports.items()
             if i not in constants.PackageJson.DEPENDENCIES
             and i not in constants.PackageJson.DEV_DEPENDENCIES
-            and not any(i.startswith(prefix) for prefix in ["/", ".", "next/"])
+            and not any(i.startswith(prefix) for prefix in ["/", "$/", ".", "next/"])
             and i != ""
             and any(tag.install for tag in tags)
         }
@@ -841,13 +833,33 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         """
         from reflex.utils.exceptions import ReflexRuntimeError
 
+        self.pages = {}
+
         def get_compilation_time() -> str:
             return str(datetime.now().time()).split(".")[0]
 
         # Render a default 404 page if the user didn't supply one
-        if constants.Page404.SLUG not in self.pages:
+        if constants.Page404.SLUG not in self.unevaluated_pages:
             self.add_custom_404_page()
 
+        # Fix up the style.
+        self.style = evaluate_style_namespaces(self.style)
+
+        # Add the app wrappers.
+        app_wrappers: Dict[tuple[int, str], Component] = {
+            # Default app wrap component renders {children}
+            (0, "AppWrap"): AppWrap.create()
+        }
+
+        if self.theme is not None:
+            # If a theme component was provided, wrap the app with it
+            app_wrappers[(20, "Theme")] = self.theme
+            # Fix #2992 by removing the top-level appearance prop
+            self.theme.appearance = None
+
+        for route in self.unevaluated_pages:
+            self._compile_page(route)
+
         # Add the optional endpoints (_upload)
         self._add_optional_endpoints()
 
@@ -882,28 +894,15 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         # Store the compile results.
         compile_results = []
 
-        # Add the app wrappers.
-        app_wrappers: Dict[tuple[int, str], Component] = {
-            # Default app wrap component renders {children}
-            (0, "AppWrap"): AppWrap.create()
-        }
-        if self.theme is not None:
-            # If a theme component was provided, wrap the app with it
-            app_wrappers[(20, "Theme")] = self.theme
-
         progress.advance(task)
 
-        # Fix up the style.
-        self.style = evaluate_style_namespaces(self.style)
-
         # Track imports and custom components found.
         all_imports = {}
         custom_components = set()
 
-        for _route, component in self.pages.items():
+        # This has to happen before compiling stateful components as that
-            # Merge the component style with the app style.
+        # prevents recursive functions from reaching all components.
-            component._add_style_recursive(self.style, self.theme)
+        for component in self.pages.values():
-
             # Add component._get_all_imports() to all_imports.
             all_imports.update(component._get_all_imports())
 
@@ -913,8 +912,6 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             # Add the custom components from the page to the set.
             custom_components |= component._get_all_custom_components()
 
-        progress.advance(task)
-
         # Perform auto-memoization of stateful components.
         (
             stateful_components_path,
@@ -941,77 +938,50 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             )
         )
 
-        # Compile the contexts before fork.
-        compile_results.append(
-            compiler.compile_contexts(self.state, self.theme),
-        )
-        # Fix #2992 by removing the top-level appearance prop
-        if self.theme is not None:
-            self.theme.appearance = None
-
-        app_root = self._app_root(app_wrappers=app_wrappers)
-
         progress.advance(task)
 
-        # Prepopulate the global ExecutorSafeFunctions class with input data required by the compile functions.
-        # This is required for multiprocessing to work, in presence of non-picklable inputs.
-        for route, component in zip(self.pages, page_components):
-            ExecutorSafeFunctions.COMPILE_PAGE_ARGS_BY_ROUTE[route] = (
-                route,
-                component,
-                self.state,
-            )
-
-        ExecutorSafeFunctions.COMPILE_APP_APP_ROOT = app_root
-        ExecutorSafeFunctions.CUSTOM_COMPONENTS = custom_components
-        ExecutorSafeFunctions.STYLE = self.style
-
         # Use a forking process pool, if possible.  Much faster, especially for large sites.
         # Fallback to ThreadPoolExecutor as something that will always work.
         executor = None
         if (
             platform.system() in ("Linux", "Darwin")
-            and os.environ.get("REFLEX_COMPILE_PROCESSES") is not None
+            and (number_of_processes := environment.REFLEX_COMPILE_PROCESSES)
+            is not None
         ):
             executor = concurrent.futures.ProcessPoolExecutor(
-                max_workers=int(os.environ.get("REFLEX_COMPILE_PROCESSES", 0)) or None,
+                max_workers=number_of_processes,
                 mp_context=multiprocessing.get_context("fork"),
             )
         else:
             executor = concurrent.futures.ThreadPoolExecutor(
-                max_workers=int(os.environ.get("REFLEX_COMPILE_THREADS", 0)) or None,
+                max_workers=environment.REFLEX_COMPILE_THREADS
             )
 
+        for route, component in zip(self.pages, page_components):
+            ExecutorSafeFunctions.COMPONENTS[route] = component
+
+        ExecutorSafeFunctions.STATE = self.state
+
         with executor:
             result_futures = []
-            custom_components_future = None
-
-            def _mark_complete(_=None):
-                progress.advance(task)
 
             def _submit_work(fn, *args, **kwargs):
                 f = executor.submit(fn, *args, **kwargs)
-                f.add_done_callback(_mark_complete)
+                # f = executor.apipe(fn, *args, **kwargs)
                 result_futures.append(f)
 
-            # Compile all page components.
+            # Compile the pre-compiled pages.
             for route in self.pages:
-                _submit_work(ExecutorSafeFunctions.compile_page, route)
+                _submit_work(
-
+                    ExecutorSafeFunctions.compile_page,
-            # Compile the app wrapper.
+                    route,
-            _submit_work(ExecutorSafeFunctions.compile_app)
+                )
-
-            # Compile the custom components.
-            custom_components_future = executor.submit(
-                ExecutorSafeFunctions.compile_custom_components,
-            )
-            custom_components_future.add_done_callback(_mark_complete)
 
             # Compile the root stylesheet with base styles.
             _submit_work(compiler.compile_root_stylesheet, self.stylesheets)
 
             # Compile the theme.
-            _submit_work(ExecutorSafeFunctions.compile_theme)
+            _submit_work(compile_theme, self.style)
 
             # Compile the Tailwind config.
             if config.tailwind is not None:
@@ -1025,21 +995,34 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             # Wait for all compilation tasks to complete.
             for future in concurrent.futures.as_completed(result_futures):
                 compile_results.append(future.result())
+                progress.advance(task)
 
-            # Special case for custom_components, since we need the compiled imports
+        app_root = self._app_root(app_wrappers=app_wrappers)
-            # to install proper frontend packages.
-            (
-                *custom_components_result,
-                custom_components_imports,
-            ) = custom_components_future.result()
-            compile_results.append(custom_components_result)
-            all_imports.update(custom_components_imports)
 
         # Get imports from AppWrap components.
         all_imports.update(app_root._get_all_imports())
 
         progress.advance(task)
 
+        # Compile the contexts.
+        compile_results.append(
+            compiler.compile_contexts(self.state, self.theme),
+        )
+        progress.advance(task)
+
+        # Compile the app root.
+        compile_results.append(
+            compiler.compile_app(app_root),
+        )
+        progress.advance(task)
+
+        # Compile custom components.
+        *custom_components_result, custom_components_imports = (
+            compiler.compile_components(custom_components)
+        )
+        compile_results.append(custom_components_result)
+        all_imports.update(custom_components_imports)
+
         progress.advance(task)
         progress.stop()
 
@@ -1528,21 +1511,28 @@ class EventNamespace(AsyncNamespace):
     async def on_event(self, sid, data):
         """Event for receiving front-end websocket events.
 
+        Raises:
+            RuntimeError: If the Socket.IO is badly initialized.
+
         Args:
             sid: The Socket.IO session id.
             data: The event data.
         """
         fields = json.loads(data)
         # Get the event.
-        event = Event(**{k: v for k, v in fields.items() if k != "handler"})
+        event = Event(
+            **{k: v for k, v in fields.items() if k not in ("handler", "event_actions")}
+        )
 
         self.token_to_sid[event.token] = sid
         self.sid_to_token[sid] = event.token
 
         # Get the event environment.
-        assert self.app.sio is not None
+        if self.app.sio is None:
+            raise RuntimeError("Socket.IO is not initialized.")
         environ = self.app.sio.get_environ(sid, self.namespace)
-        assert environ is not None
+        if environ is None:
+            raise RuntimeError("Socket.IO environ is not initialized.")
 
         # Get the client headers.
         headers = {

reflex/app_mixins/lifespan.py

@@ -6,11 +6,13 @@ import asyncio
 import contextlib
 import functools
 import inspect
-import sys
 from typing import Callable, Coroutine, Set, Union
 
 from fastapi import FastAPI
 
+from reflex.utils import console
+from reflex.utils.exceptions import InvalidLifespanTaskType
+
 from .mixin import AppMixin
 
 
@@ -26,6 +28,7 @@ class LifespanMixin(AppMixin):
         try:
             async with contextlib.AsyncExitStack() as stack:
                 for task in self.lifespan_tasks:
+                    run_msg = f"Started lifespan task: {task.__name__} as {{type}}"  # type: ignore
                     if isinstance(task, asyncio.Task):
                         running_tasks.append(task)
                     else:
@@ -35,15 +38,19 @@ class LifespanMixin(AppMixin):
                         _t = task()
                         if isinstance(_t, contextlib._AsyncGeneratorContextManager):
                             await stack.enter_async_context(_t)
+                            console.debug(run_msg.format(type="asynccontextmanager"))
                         elif isinstance(_t, Coroutine):
-                            running_tasks.append(asyncio.create_task(_t))
+                            task_ = asyncio.create_task(_t)
+                            task_.add_done_callback(lambda t: t.result())
+                            running_tasks.append(task_)
+                            console.debug(run_msg.format(type="coroutine"))
+                        else:
+                            console.debug(run_msg.format(type="function"))
                 yield
         finally:
-            cancel_kwargs = (
-                {"msg": "lifespan_cleanup"} if sys.version_info >= (3, 9) else {}
-            )
             for task in running_tasks:
-                task.cancel(**cancel_kwargs)
+                console.debug(f"Canceling lifespan task: {task}")
+                task.cancel(msg="lifespan_cleanup")
 
     def register_lifespan_task(self, task: Callable | asyncio.Task, **task_kwargs):
         """Register a task to run during the lifespan of the app.
@@ -51,7 +58,18 @@ class LifespanMixin(AppMixin):
         Args:
             task: The task to register.
             task_kwargs: The kwargs of the task.
+
+        Raises:
+            InvalidLifespanTaskType: If the task is a generator function.
         """
+        if inspect.isgeneratorfunction(task) or inspect.isasyncgenfunction(task):
+            raise InvalidLifespanTaskType(
+                f"Task {task.__name__} of type generator must be decorated with contextlib.asynccontextmanager."
+            )
+
         if task_kwargs:
+            original_task = task
             task = functools.partial(task, **task_kwargs)  # type: ignore
+            functools.update_wrapper(task, original_task)  # type: ignore
         self.lifespan_tasks.add(task)  # type: ignore
+        console.debug(f"Registered lifespan task: {task.__name__}")  # type: ignore

reflex/app_module_for_backend.py

@@ -15,7 +15,7 @@ if constants.CompileVars.APP != "app":
 telemetry.send("compile")
 app_module = get_app(reload=False)
 app = getattr(app_module, constants.CompileVars.APP)
-# For py3.8 and py3.9 compatibility when redis is used, we MUST add any decorator pages
+# For py3.9 compatibility when redis is used, we MUST add any decorator pages
 # before compiling the app in a thread to avoid event loop error (REF-2172).
 app._apply_decorated_pages()
 compile_future = ThreadPoolExecutor(max_workers=1).submit(app._compile)

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 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
         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 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
         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 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
             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 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
             # 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(
+        return key
-            key,
-            to_dict=True,
-            by_alias=False,
-            include=None,
-            exclude=None,
-            exclude_unset=False,
-            exclude_defaults=False,
-            exclude_none=False,
-        )

reflex/compiler/compiler.py

@@ -2,13 +2,13 @@
 
 from __future__ import annotations
 
-import os
 from datetime import datetime
 from pathlib import Path
-from typing import Dict, Iterable, Optional, Type, Union
+from typing import TYPE_CHECKING, Dict, Iterable, Optional, Tuple, Type, Union
 
 from reflex import constants
 from reflex.compiler import templates, utils
+from reflex.components.base.fragment import Fragment
 from reflex.components.component import (
     BaseComponent,
     Component,
@@ -16,7 +16,7 @@ from reflex.components.component import (
     CustomComponent,
     StatefulComponent,
 )
-from reflex.config import get_config
+from reflex.config import environment, get_config
 from reflex.state import BaseState
 from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
@@ -40,6 +40,20 @@ def _compile_document_root(root: Component) -> str:
     )
 
 
+def _normalize_library_name(lib: str) -> str:
+    """Normalize the library name.
+
+    Args:
+        lib: The library name to normalize.
+
+    Returns:
+        The normalized library name.
+    """
+    if lib == "react":
+        return "React"
+    return lib.replace("@", "").replace("/", "_").replace("-", "_")
+
+
 def _compile_app(app_root: Component) -> str:
     """Compile the app template component.
 
@@ -49,10 +63,20 @@ def _compile_app(app_root: Component) -> str:
     Returns:
         The compiled app.
     """
+    from reflex.components.dynamic import bundled_libraries
+
+    window_libraries = [
+        (_normalize_library_name(name), name) for name in bundled_libraries
+    ] + [
+        ("utils_context", f"$/{constants.Dirs.UTILS}/context"),
+        ("utils_state", f"$/{constants.Dirs.UTILS}/state"),
+    ]
+
     return templates.APP_ROOT.render(
         imports=utils.compile_imports(app_root._get_all_imports()),
         custom_codes=app_root._get_all_custom_code(),
         hooks={**app_root._get_all_hooks_internal(), **app_root._get_all_hooks()},
+        window_libraries=window_libraries,
         render=app_root.render(),
     )
 
@@ -103,8 +127,8 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
 
 
 def _compile_page(
-    component: Component,
+    component: BaseComponent,
-    state: Type[BaseState],
+    state: Type[BaseState] | None,
 ) -> str:
     """Compile the component given the app state.
 
@@ -119,7 +143,7 @@ def _compile_page(
     imports = utils.compile_imports(imports)
 
     # Compile the code to render the component.
-    kwargs = {"state_name": state.get_name()} if state else {}
+    kwargs = {"state_name": state.get_name()} if state is not None else {}
 
     return templates.PAGE.render(
         imports=imports,
@@ -171,7 +195,7 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
             stylesheet_full_path = (
                 Path.cwd() / constants.Dirs.APP_ASSETS / stylesheet.strip("/")
             )
-            if not os.path.exists(stylesheet_full_path):
+            if not stylesheet_full_path.exists():
                 raise FileNotFoundError(
                     f"The stylesheet file {stylesheet_full_path} does not exist."
                 )
@@ -205,7 +229,7 @@ def _compile_components(
     """
     imports = {
         "react": [ImportVar(tag="memo")],
-        f"/{constants.Dirs.STATE_PATH}": [ImportVar(tag="E"), ImportVar(tag="isTrue")],
+        f"$/{constants.Dirs.STATE_PATH}": [ImportVar(tag="E"), ImportVar(tag="isTrue")],
     }
     component_renders = []
 
@@ -292,7 +316,7 @@ def _compile_stateful_components(
     # Don't import from the file that we're about to create.
     all_imports = utils.merge_imports(*all_import_dicts)
     all_imports.pop(
-        f"/{constants.Dirs.UTILS}/{constants.PageNames.STATEFUL_COMPONENTS}", None
+        f"$/{constants.Dirs.UTILS}/{constants.PageNames.STATEFUL_COMPONENTS}", None
     )
 
     return templates.STATEFUL_COMPONENTS.render(
@@ -401,7 +425,7 @@ def compile_contexts(
 
 
 def compile_page(
-    path: str, component: Component, state: Type[BaseState]
+    path: str, component: BaseComponent, state: Type[BaseState] | None
 ) -> tuple[str, str]:
     """Compile a single page.
 
@@ -503,7 +527,7 @@ def remove_tailwind_from_postcss() -> tuple[str, str]:
 
 def purge_web_pages_dir():
     """Empty out .web/pages directory."""
-    if not is_prod_mode() and os.environ.get("REFLEX_PERSIST_WEB_DIR"):
+    if not is_prod_mode() and environment.REFLEX_PERSIST_WEB_DIR:
         # Skip purging the web directory in dev mode if REFLEX_PERSIST_WEB_DIR is set.
         return
 
@@ -511,6 +535,81 @@ def purge_web_pages_dir():
     utils.empty_dir(get_web_dir() / constants.Dirs.PAGES, keep_files=["_app.js"])
 
 
+if TYPE_CHECKING:
+    from reflex.app import UnevaluatedPage
+
+
+def compile_unevaluated_page(
+    route: str,
+    page: UnevaluatedPage,
+    state: Type[BaseState] | None = None,
+    style: ComponentStyle | None = None,
+    theme: Component | None = None,
+) -> Tuple[Component, bool]:
+    """Compiles an uncompiled page into a component and adds meta information.
+
+    Args:
+        route: The route of the page.
+        page: The uncompiled page object.
+        state: The state of the app.
+        style: The style of the page.
+        theme: The theme of the page.
+
+    Returns:
+        The compiled component and whether state should be enabled.
+    """
+    # Generate the component if it is a callable.
+    component = page.component
+    component = component if isinstance(component, Component) else component()
+
+    # unpack components that return tuples in an rx.fragment.
+    if isinstance(component, tuple):
+        component = Fragment.create(*component)
+
+    component._add_style_recursive(style or {}, theme)
+
+    enable_state = False
+    # Ensure state is enabled if this page uses state.
+    if state is None:
+        if page.on_load or component._has_stateful_event_triggers():
+            enable_state = True
+        else:
+            for var in component._get_vars(include_children=True):
+                var_data = var._get_all_var_data()
+                if not var_data:
+                    continue
+                if not var_data.state:
+                    continue
+                enable_state = True
+                break
+
+    from reflex.app import OverlayFragment
+    from reflex.utils.format import make_default_page_title
+
+    component = OverlayFragment.create(component)
+
+    meta_args = {
+        "title": (
+            page.title
+            if page.title is not None
+            else make_default_page_title(get_config().app_name, route)
+        ),
+        "image": page.image,
+        "meta": page.meta,
+    }
+
+    if page.description is not None:
+        meta_args["description"] = page.description
+
+    # Add meta information to the component.
+    utils.add_meta(
+        component,
+        **meta_args,
+    )
+
+    return component, enable_state
+
+
 class ExecutorSafeFunctions:
     """Helper class to allow parallelisation of parts of the compilation process.
 
@@ -536,13 +635,12 @@ class ExecutorSafeFunctions:
 
     """
 
-    COMPILE_PAGE_ARGS_BY_ROUTE = {}
+    COMPONENTS: Dict[str, BaseComponent] = {}
-    COMPILE_APP_APP_ROOT: Component | None = None
+    UNCOMPILED_PAGES: Dict[str, UnevaluatedPage] = {}
-    CUSTOM_COMPONENTS: set[CustomComponent] | None = None
+    STATE: Optional[Type[BaseState]] = None
-    STYLE: ComponentStyle | None = None
 
     @classmethod
-    def compile_page(cls, route: str):
+    def compile_page(cls, route: str) -> tuple[str, str]:
         """Compile a page.
 
         Args:
@@ -551,46 +649,45 @@ class ExecutorSafeFunctions:
         Returns:
             The path and code of the compiled page.
         """
-        return compile_page(*cls.COMPILE_PAGE_ARGS_BY_ROUTE[route])
+        return compile_page(route, cls.COMPONENTS[route], cls.STATE)
 
     @classmethod
-    def compile_app(cls):
+    def compile_unevaluated_page(
-        """Compile the app.
+        cls,
+        route: str,
+        style: ComponentStyle,
+        theme: Component | None,
+    ) -> tuple[str, Component, tuple[str, str]]:
+        """Compile an unevaluated page.
+
+        Args:
+            route: The route of the page to compile.
+            style: The style of the page.
+            theme: The theme of the page.
 
         Returns:
-            The path and code of the compiled app.
+            The route, compiled component, and compiled page.
-
-        Raises:
-            ValueError: If the app root is not set.
         """
-        if cls.COMPILE_APP_APP_ROOT is None:
+        component, enable_state = compile_unevaluated_page(
-            raise ValueError("COMPILE_APP_APP_ROOT should be set")
+            route, cls.UNCOMPILED_PAGES[route]
-        return compile_app(cls.COMPILE_APP_APP_ROOT)
+        )
+        component = component if isinstance(component, Component) else component()
+        component._add_style_recursive(style, theme)
+        return route, component, compile_page(route, component, cls.STATE)
 
     @classmethod
-    def compile_custom_components(cls):
+    def compile_theme(cls, style: ComponentStyle | None) -> tuple[str, str]:
-        """Compile the custom components.
-
-        Returns:
-            The path and code of the compiled custom components.
-
-        Raises:
-            ValueError: If the custom components are not set.
-        """
-        if cls.CUSTOM_COMPONENTS is None:
-            raise ValueError("CUSTOM_COMPONENTS should be set")
-        return compile_components(cls.CUSTOM_COMPONENTS)
-
-    @classmethod
-    def compile_theme(cls):
         """Compile the theme.
 
+        Args:
+            style: The style to compile.
+
         Returns:
             The path and code of the compiled theme.
 
         Raises:
             ValueError: If the style is not set.
         """
-        if cls.STYLE is None:
+        if style is None:
             raise ValueError("STYLE should be set")
-        return compile_theme(cls.STYLE)
+        return compile_theme(style)

reflex/compiler/utils.py

@@ -2,7 +2,6 @@
 
 from __future__ import annotations
 
-import os
 from pathlib import Path
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
@@ -29,7 +28,8 @@ from reflex.components.base import (
     Title,
 )
 from reflex.components.component import Component, ComponentStyle, CustomComponent
-from reflex.state import BaseState, Cookie, LocalStorage, SessionStorage
+from reflex.istate.storage import Cookie, LocalStorage, SessionStorage
+from reflex.state import BaseState
 from reflex.style import Style
 from reflex.utils import console, format, imports, path_ops
 from reflex.utils.imports import ImportVar, ParsedImportDict
@@ -44,6 +44,9 @@ def compile_import_statement(fields: list[ImportVar]) -> tuple[str, list[str]]:
     Args:
         fields: The set of fields to import from the library.
 
+    Raises:
+        ValueError: If there is more than one default import.
+
     Returns:
         The libraries for default and rest.
         default: default library. When install "import def from library".
@@ -54,7 +57,8 @@ def compile_import_statement(fields: list[ImportVar]) -> tuple[str, list[str]]:
 
     # Check for default imports.
     defaults = {field for field in fields_set if field.is_default}
-    assert len(defaults) < 2
+    if len(defaults) >= 2:
+        raise ValueError("Only one default import is allowed.")
 
     # Get the default import, and the specific imports.
     default = next(iter({field.name for field in defaults}), "")
@@ -79,6 +83,12 @@ def validate_imports(import_dict: ParsedImportDict):
                 f"{_import.tag}/{_import.alias}" if _import.alias else _import.tag
             )
             if import_name in used_tags:
+                already_imported = used_tags[import_name]
+                if (already_imported[0] == "$" and already_imported[1:] == lib) or (
+                    lib[0] == "$" and lib[1:] == already_imported
+                ):
+                    used_tags[import_name] = lib if lib[0] == "$" else already_imported
+                    continue
                 raise ValueError(
                     f"Can not compile, the tag {import_name} is used multiple time from {lib} and {used_tags[import_name]}"
                 )
@@ -92,6 +102,9 @@ def compile_imports(import_dict: ParsedImportDict) -> list[dict]:
     Args:
         import_dict: The import dict to compile.
 
+    Raises:
+        ValueError: If an import in the dict is invalid.
+
     Returns:
         The list of import dict.
     """
@@ -106,8 +119,10 @@ def compile_imports(import_dict: ParsedImportDict) -> list[dict]:
             continue
 
         if not lib:
-            assert not default, "No default field allowed for empty library."
+            if default:
-            assert rest is not None and len(rest) > 0, "No fields to import."
+                raise ValueError("No default field allowed for empty library.")
+            if rest is None or len(rest) == 0:
+                raise ValueError("No fields to import.")
             for module in sorted(rest):
                 import_dicts.append(get_import_dict(module))
             continue
@@ -155,7 +170,7 @@ def compile_state(state: Type[BaseState]) -> dict:
         initial_state = state(_reflex_internal_init=True).dict(
             initial=True, include_computed=False
         )
-    return format.format_state(initial_state)
+    return initial_state
 
 
 def _compile_client_storage_field(
@@ -429,11 +444,11 @@ def add_meta(
     Returns:
         The component with the metadata added.
     """
-    meta_tags = [Meta.create(**item) for item in meta]
+    meta_tags = [
-
+        item if isinstance(item, Component) else Meta.create(**item) for item in meta
-    children: list[Any] = [
-        Title.create(title),
     ]
+
+    children: list[Any] = [Title.create(title)]
     if description:
         children.append(Description.create(content=description))
     children.append(Image.create(content=image))
@@ -448,16 +463,16 @@ def add_meta(
     return page
 
 
-def write_page(path: str, code: str):
+def write_page(path: str | Path, code: str):
     """Write the given code to the given path.
 
     Args:
         path: The path to write the code to.
         code: The code to write.
     """
-    path_ops.mkdir(os.path.dirname(path))
+    path = Path(path)
-    with open(path, "w", encoding="utf-8") as f:
+    path_ops.mkdir(path.parent)
-        f.write(code)
+    path.write_text(code, encoding="utf-8")
 
 
 def empty_dir(path: str | Path, keep_files: list[str] | None = None):

reflex/components/base/app_wrap.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class AppWrap(Fragment):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "AppWrap":
         """Create a new AppWrap component.

reflex/components/base/bare.py

@@ -7,7 +7,7 @@ from typing import Any, Iterator
 from reflex.components.component import Component
 from reflex.components.tags import Tag
 from reflex.components.tags.tagless import Tagless
-from reflex.vars.base import Var
+from reflex.vars import ArrayVar, BooleanVar, ObjectVar, Var
 
 
 class Bare(Component):
@@ -33,6 +33,8 @@ class Bare(Component):
 
     def _render(self) -> Tag:
         if isinstance(self.contents, Var):
+            if isinstance(self.contents, (BooleanVar, ObjectVar, ArrayVar)):
+                return Tagless(contents=f"{{{str(self.contents.to_string())}}}")
             return Tagless(contents=f"{{{str(self.contents)}}}")
         return Tagless(contents=str(self.contents))
 

reflex/components/base/body.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class Body(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Body":
         """Create the component.

reflex/components/base/document.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class NextDocumentLib(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "NextDocumentLib":
         """Create the component.
@@ -89,41 +69,21 @@ class Html(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Html":
         """Create the component.
@@ -155,41 +115,21 @@ class DocumentHead(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "DocumentHead":
         """Create the component.
@@ -221,41 +161,21 @@ class Main(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Main":
         """Create the component.
@@ -287,41 +207,21 @@ class NextScript(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "NextScript":
         """Create the component.

reflex/components/base/error_boundary.py

@@ -2,16 +2,32 @@
 
 from __future__ import annotations
 
-from typing import List
+from typing import Dict, List, Tuple
 
 from reflex.compiler.compiler import _compile_component
 from reflex.components.component import Component
 from reflex.components.el import div, p
-from reflex.constants import Hooks, Imports
+from reflex.event import EventHandler
-from reflex.event import EventChain, EventHandler
+from reflex.state import FrontendEventExceptionState
-from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
-from reflex.vars.function import FunctionVar
+
+
+def on_error_spec(
+    error: Var[Dict[str, str]], info: Var[Dict[str, str]]
+) -> Tuple[Var[str], Var[str]]:
+    """The spec for the on_error event handler.
+
+    Args:
+        error: The error message.
+        info: Additional information about the error.
+
+    Returns:
+        The arguments for the event handler.
+    """
+    return (
+        error.stack,
+        info.componentStack,
+    )
 
 
 class ErrorBoundary(Component):
@@ -21,31 +37,13 @@ class ErrorBoundary(Component):
     tag = "ErrorBoundary"
 
     # Fired when the boundary catches an error.
-    on_error: EventHandler[lambda error, info: [error, info]] = Var(  # type: ignore
+    on_error: EventHandler[on_error_spec]
-        "logFrontendError"
-    ).to(FunctionVar, EventChain)
 
     # Rendered instead of the children when an error is caught.
     Fallback_component: Var[Component] = Var(_js_expr="Fallback")._replace(
         _var_type=Component
     )
 
-    def add_imports(self) -> dict[str, list[ImportVar]]:
-        """Add imports for the component.
-
-        Returns:
-            The imports to add.
-        """
-        return Imports.EVENTS
-
-    def add_hooks(self) -> List[str | Var]:
-        """Add hooks for the component.
-
-        Returns:
-            The hooks to add.
-        """
-        return [Hooks.EVENTS, Hooks.FRONTEND_ERRORS]
-
     def add_custom_code(self) -> List[str]:
         """Add custom Javascript code into the page that contains this component.
 
@@ -75,5 +73,20 @@ class ErrorBoundary(Component):
             """
         ]
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create an ErrorBoundary component.
+
+        Args:
+            *children: The children of the component.
+            **props: The props of the component.
+
+        Returns:
+            The ErrorBoundary component.
+        """
+        if "on_error" not in props:
+            props["on_error"] = FrontendEventExceptionState.handle_frontend_exception
+        return super().create(*children, **props)
+
 
 error_boundary = ErrorBoundary.create

reflex/components/base/error_boundary.pyi

@@ -3,17 +3,18 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Optional, Tuple, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
-from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
 
+def on_error_spec(
+    error: Var[Dict[str, str]], info: Var[Dict[str, str]]
+) -> Tuple[Var[str], Var[str]]: ...
+
 class ErrorBoundary(Component):
-    def add_imports(self) -> dict[str, list[ImportVar]]: ...
-    def add_hooks(self) -> List[str | Var]: ...
     def add_custom_code(self) -> List[str]: ...
     @overload
     @classmethod
@@ -27,45 +28,25 @@ class ErrorBoundary(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_error: Optional[EventType[str, str]] = None,
-        on_double_click: Optional[
+        on_focus: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mount: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_error: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ErrorBoundary":
-        """Create the component.
+        """Create an ErrorBoundary component.
 
         Args:
             *children: The children of the component.
@@ -79,7 +60,7 @@ class ErrorBoundary(Component):
             **props: The props of the component.
 
         Returns:
-            The component.
+            The ErrorBoundary component.
         """
         ...
 

reflex/components/base/fragment.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class Fragment(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Fragment":
         """Create the component.

reflex/components/base/head.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component, MemoizationLeaf
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class NextHeadLib(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "NextHeadLib":
         """Create the component.
@@ -88,41 +68,21 @@ class Head(NextHeadLib, MemoizationLeaf):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Head":
         """Create a new memoization leaf component.

reflex/components/base/link.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -24,41 +24,21 @@ class RawLink(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "RawLink":
         """Create the component.
@@ -99,41 +79,21 @@ class ScriptTag(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ScriptTag":
         """Create the component.

reflex/components/base/meta.py

@@ -16,13 +16,15 @@ class Title(Component):
     def render(self) -> dict:
         """Render the title component.
 
+        Raises:
+            ValueError: If the title is not a single string.
+
         Returns:
             The rendered title component.
         """
         # Make sure the title is a single string.
-        assert len(self.children) == 1 and isinstance(
+        if len(self.children) != 1 or not isinstance(self.children[0], Bare):
-            self.children[0], Bare
+            raise ValueError("Title must be a single string.")
-        ), "Title must be a single string."
         return super().render()
 
 

reflex/components/base/meta.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -23,41 +23,21 @@ class Title(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Title":
         """Create the component.
@@ -94,41 +74,21 @@ class Meta(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Meta":
         """Create the component.
@@ -170,41 +130,21 @@ class Description(Meta):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Description":
         """Create the component.
@@ -246,41 +186,21 @@ class Image(Meta):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Image":
         """Create the component.

reflex/components/base/script.py

@@ -8,7 +8,7 @@ from __future__ import annotations
 from typing import Literal
 
 from reflex.components.component import Component
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import LiteralVar, Var
 
 
@@ -35,13 +35,13 @@ class Script(Component):
     )
 
     # Triggered when the script is loading
-    on_load: EventHandler[lambda: []]
+    on_load: EventHandler[empty_event]
 
     # Triggered when the script has loaded
-    on_ready: EventHandler[lambda: []]
+    on_ready: EventHandler[empty_event]
 
     # Triggered when the script has errored
-    on_error: EventHandler[lambda: []]
+    on_error: EventHandler[empty_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/base/script.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Literal, Optional, Union, overload
+from typing import Any, Dict, Literal, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -29,44 +29,24 @@ class Script(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_error: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_focus: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_load: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mount: Optional[EventType[[]]] = None,
-        on_error: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_load: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_ready: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_scroll: Optional[EventType[[]]] = None,
-        ] = None,
+        on_unmount: Optional[EventType[[]]] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_ready: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Script":
         """Create an inline or user-defined script.

reflex/components/component.py

@@ -4,7 +4,6 @@ from __future__ import annotations
 
 import copy
 import typing
-import warnings
 from abc import ABC, abstractmethod
 from functools import lru_cache, wraps
 from hashlib import md5
@@ -26,6 +25,7 @@ import reflex.state
 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,
@@ -36,12 +36,17 @@ from reflex.constants import (
     MemoizationMode,
     PageNames,
 )
+from reflex.constants.compiler import SpecialAttributes
 from reflex.event import (
+    EventCallback,
     EventChain,
+    EventChainVar,
     EventHandler,
     EventSpec,
+    EventVar,
     call_event_fn,
     call_event_handler,
+    empty_event,
     get_handler_args,
 )
 from reflex.style import Style, format_as_emotion
@@ -53,9 +58,9 @@ from reflex.utils.imports import (
     ParsedImportDict,
     parse_imports,
 )
-from reflex.utils.serializers import serializer
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
+from reflex.vars.sequence import LiteralArrayVar
 
 
 class BaseComponent(Base, ABC):
@@ -170,8 +175,6 @@ ComponentStyle = Dict[
 ]
 ComponentChild = Union[types.PrimitiveType, Var, BaseComponent]
 
-warnings.filterwarnings("ignore", message="fields may not start with an underscore")
-
 
 class Component(BaseComponent, ABC):
     """A component with style, event trigger and other props."""
@@ -451,8 +454,16 @@ class Component(BaseComponent, ABC):
                     and not types._issubclass(passed_type, expected_type, value)
                 ):
                     value_name = value._js_expr if isinstance(value, Var) else value
+
+                    additional_info = (
+                        " You can call `.bool()` on the value to convert it to a boolean."
+                        if expected_type is bool and isinstance(value, Var)
+                        else ""
+                    )
+
                     raise TypeError(
-                        f"Invalid var passed for prop {type(self).__name__}.{key}, expected type {expected_type}, got value {value_name} of type {passed_types or passed_type}."
+                        f"Invalid var passed for prop {type(self).__name__}.{key}, expected type {expected_type}, got value {value_name} of type {passed_type}."
+                        + additional_info
                     )
             # Check if the key is an event trigger.
             if key in component_specific_triggers:
@@ -466,13 +477,24 @@ class Component(BaseComponent, ABC):
         for key in kwargs["event_triggers"]:
             del kwargs[key]
 
+        # Place data_ and aria_ attributes into custom_attrs
+        special_attributes = tuple(
+            key
+            for key in kwargs
+            if key not in fields and SpecialAttributes.is_special(key)
+        )
+        if special_attributes:
+            custom_attrs = kwargs.setdefault("custom_attrs", {})
+            for key in special_attributes:
+                custom_attrs[format.to_kebab_case(key)] = kwargs.pop(key)
+
         # Add style props to the component.
         style = kwargs.get("style", {})
         if isinstance(style, List):
             # Merge styles, the later ones overriding keys in the earlier ones.
             style = {k: v for style_dict in style for k, v in style_dict.items()}
 
-        if isinstance(style, Breakpoints):
+        if isinstance(style, (Breakpoints, Var)):
             style = {
                 # Assign the Breakpoints to the self-referential selector to avoid squashing down to a regular dict.
                 "&": style,
@@ -485,13 +507,16 @@ class Component(BaseComponent, ABC):
                 **{attr: value for attr, value in kwargs.items() if attr not in fields},
             }
         )
-        if "custom_attrs" not in kwargs:
-            kwargs["custom_attrs"] = {}
 
         # Convert class_name to str if it's list
         class_name = kwargs.get("class_name", "")
         if isinstance(class_name, (List, tuple)):
-            kwargs["class_name"] = " ".join(class_name)
+            if any(isinstance(c, Var) for c in class_name):
+                kwargs["class_name"] = LiteralArrayVar.create(
+                    class_name, _var_type=List[str]
+                ).join(" ")
+            else:
+                kwargs["class_name"] = " ".join(class_name)
 
         # Construct the component.
         super().__init__(*args, **kwargs)
@@ -503,7 +528,7 @@ class Component(BaseComponent, ABC):
             Var,
             EventHandler,
             EventSpec,
-            List[Union[EventHandler, EventSpec]],
+            List[Union[EventHandler, EventSpec, EventVar]],
             Callable,
         ],
     ) -> Union[EventChain, Var]:
@@ -521,11 +546,16 @@ class Component(BaseComponent, ABC):
         """
         # If it's an event chain var, return it.
         if isinstance(value, Var):
-            if value._var_type is not EventChain:
+            if isinstance(value, EventChainVar):
+                return value
+            elif isinstance(value, EventVar):
+                value = [value]
+            elif issubclass(value._var_type, (EventChain, EventSpec)):
+                return self._create_event_chain(args_spec, value.guess_type())
+            else:
                 raise ValueError(
-                    f"Invalid event chain: {repr(value)} of type {type(value)}"
+                    f"Invalid event chain: {str(value)} of type {value._var_type}"
                 )
-            return value
         elif isinstance(value, EventChain):
             # Trust that the caller knows what they're doing passing an EventChain directly
             return value
@@ -536,7 +566,7 @@ class Component(BaseComponent, ABC):
 
         # If the input is a list of event handlers, create an event chain.
         if isinstance(value, List):
-            events: list[EventSpec] = []
+            events: List[Union[EventSpec, EventVar]] = []
             for v in value:
                 if isinstance(v, (EventHandler, EventSpec)):
                     # Call the event handler to get the event.
@@ -550,6 +580,8 @@ class Component(BaseComponent, ABC):
                             "lambda inside an EventChain list."
                         )
                     events.extend(result)
+                elif isinstance(v, EventVar):
+                    events.append(v)
                 else:
                     raise ValueError(f"Invalid event: {v}")
 
@@ -559,32 +591,30 @@ class Component(BaseComponent, ABC):
             if isinstance(result, Var):
                 # Recursively call this function if the lambda returned an EventChain Var.
                 return self._create_event_chain(args_spec, result)
-            events = result
+            events = [*result]
 
         # Otherwise, raise an error.
         else:
             raise ValueError(f"Invalid event chain: {value}")
 
         # Add args to the event specs if necessary.
-        events = [e.with_args(get_handler_args(e)) for e in events]
+        events = [
-
+            (e.with_args(get_handler_args(e)) if isinstance(e, EventSpec) else e)
-        # Collect event_actions from each spec
+            for e in events
-        event_actions = {}
+        ]
-        for e in events:
-            event_actions.update(e.event_actions)
 
         # Return the event chain.
         if isinstance(args_spec, Var):
             return EventChain(
                 events=events,
                 args_spec=None,
-                event_actions=event_actions,
+                event_actions={},
             )
         else:
             return EventChain(
                 events=events,
                 args_spec=args_spec,
-                event_actions=event_actions,
+                event_actions={},
             )
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -595,21 +625,21 @@ class Component(BaseComponent, ABC):
 
         """
         default_triggers = {
-            EventTriggers.ON_FOCUS: lambda: [],
+            EventTriggers.ON_FOCUS: empty_event,
-            EventTriggers.ON_BLUR: lambda: [],
+            EventTriggers.ON_BLUR: empty_event,
-            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_CLICK: empty_event,
-            EventTriggers.ON_CONTEXT_MENU: lambda: [],
+            EventTriggers.ON_CONTEXT_MENU: empty_event,
-            EventTriggers.ON_DOUBLE_CLICK: lambda: [],
+            EventTriggers.ON_DOUBLE_CLICK: empty_event,
-            EventTriggers.ON_MOUSE_DOWN: lambda: [],
+            EventTriggers.ON_MOUSE_DOWN: empty_event,
-            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: empty_event,
-            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: empty_event,
-            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: empty_event,
-            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: empty_event,
-            EventTriggers.ON_MOUSE_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OVER: empty_event,
-            EventTriggers.ON_MOUSE_UP: lambda: [],
+            EventTriggers.ON_MOUSE_UP: empty_event,
-            EventTriggers.ON_SCROLL: lambda: [],
+            EventTriggers.ON_SCROLL: empty_event,
-            EventTriggers.ON_MOUNT: lambda: [],
+            EventTriggers.ON_MOUNT: empty_event,
-            EventTriggers.ON_UNMOUNT: lambda: [],
+            EventTriggers.ON_UNMOUNT: empty_event,
         }
 
         # Look for component specific triggers,
@@ -618,9 +648,9 @@ class Component(BaseComponent, ABC):
             if types._issubclass(field.type_, EventHandler):
                 args_spec = None
                 annotation = field.annotation
-                if hasattr(annotation, "__metadata__"):
+                if (metadata := getattr(annotation, "__metadata__", None)) is not None:
-                    args_spec = annotation.__metadata__[0]
+                    args_spec = metadata[0]
-                default_triggers[field.name] = args_spec or (lambda: [])
+                default_triggers[field.name] = args_spec or (empty_event)  # type: ignore
         return default_triggers
 
     def __repr__(self) -> str:
@@ -1019,8 +1049,11 @@ class Component(BaseComponent, ABC):
             elif isinstance(event, EventChain):
                 event_args = []
                 for spec in event.events:
-                    for args in spec.args:
+                    if isinstance(spec, EventSpec):
-                        event_args.extend(args)
+                        for args in spec.args:
+                            event_args.extend(args)
+                    else:
+                        event_args.append(spec)
                 yield event_trigger, event_args
 
     def _get_vars(self, include_children: bool = False) -> list[Var]:
@@ -1094,8 +1127,14 @@ class Component(BaseComponent, ABC):
         for trigger in self.event_triggers.values():
             if isinstance(trigger, EventChain):
                 for event in trigger.events:
-                    if event.handler.state_full_name:
+                    if isinstance(event, EventCallback):
-                        return True
+                        continue
+                    if isinstance(event, EventSpec):
+                        if event.handler.state_full_name:
+                            return True
+                    else:
+                        if event._var_state:
+                            return True
             elif isinstance(trigger, Var) and trigger._var_state:
                 return True
         return False
@@ -1269,7 +1308,9 @@ class Component(BaseComponent, ABC):
         if self._get_ref_hook():
             # Handle hooks needed for attaching react refs to DOM nodes.
             _imports.setdefault("react", set()).add(ImportVar(tag="useRef"))
-            _imports.setdefault(f"/{Dirs.STATE_PATH}", set()).add(ImportVar(tag="refs"))
+            _imports.setdefault(f"$/{Dirs.STATE_PATH}", set()).add(
+                ImportVar(tag="refs")
+            )
 
         if self._get_mount_lifecycle_hook():
             # Handle hooks for `on_mount` / `on_unmount`.
@@ -1626,7 +1667,7 @@ class CustomComponent(Component):
     """A custom user-defined component."""
 
     # Use the components library.
-    library = f"/{Dirs.COMPONENTS_PATH}"
+    library = f"$/{Dirs.COMPONENTS_PATH}"
 
     # The function that creates the component.
     component_fn: Callable[..., Component] = Component.create
@@ -1670,7 +1711,7 @@ class CustomComponent(Component):
                 value = self._create_event_chain(
                     value=value,
                     args_spec=event_triggers_in_component_declaration.get(
-                        key, lambda: []
+                        key, empty_event
                     ),
                 )
                 self.props[format.to_camel_case(key)] = value
@@ -1733,10 +1774,14 @@ class CustomComponent(Component):
         Args:
             seen: The tags of the components that have already been seen.
 
+        Raises:
+            ValueError: If the tag is not set.
+
         Returns:
             The set of custom components.
         """
-        assert self.tag is not None, "The tag must be set."
+        if self.tag is None:
+            raise ValueError("The tag must be set.")
 
         # Store the seen components in a set to avoid infinite recursion.
         if seen is None:
@@ -1885,19 +1930,6 @@ class NoSSRComponent(Component):
         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.
 
@@ -2203,7 +2235,7 @@ class StatefulComponent(BaseComponent):
         """
         if self.rendered_as_shared:
             return {
-                f"/{Dirs.UTILS}/{PageNames.STATEFUL_COMPONENTS}": [
+                f"$/{Dirs.UTILS}/{PageNames.STATEFUL_COMPONENTS}": [
                     ImportVar(tag=self.tag)
                 ]
             }
@@ -2310,3 +2342,6 @@ class MemoizationLeaf(Component):
                 update={"disposition": MemoizationDisposition.ALWAYS}
             )
         return comp
+
+
+load_dynamic_serializer()

reflex/components/core/banner.py

@@ -66,8 +66,8 @@ class WebsocketTargetURL(Var):
             _js_expr="getBackendURL(env.EVENT).href",
             _var_data=VarData(
                 imports={
-                    "/env.json": [ImportVar(tag="env", is_default=True)],
+                    "$/env.json": [ImportVar(tag="env", is_default=True)],
-                    f"/{Dirs.STATE_PATH}": [ImportVar(tag="getBackendURL")],
+                    f"$/{Dirs.STATE_PATH}": [ImportVar(tag="getBackendURL")],
                 },
             ),
             _var_type=WebsocketTargetURL,

reflex/components/core/banner.pyi

@@ -3,14 +3,14 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Literal, Optional, Union, overload
+from typing import Any, Dict, Literal, Optional, Union, overload
 
 from reflex.components.component import Component
 from reflex.components.el.elements.typography import Div
 from reflex.components.lucide.icon import Icon
 from reflex.components.sonner.toast import Toaster, ToastProps
 from reflex.constants.compiler import CompileVars
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
@@ -89,41 +89,21 @@ class ConnectionToaster(Toaster):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ConnectionToaster":
         """Create a connection toaster component.
@@ -169,41 +149,21 @@ class ConnectionBanner(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ConnectionBanner":
         """Create a connection banner component.
@@ -228,41 +188,21 @@ class ConnectionModal(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ConnectionModal":
         """Create a connection banner component.
@@ -288,41 +228,21 @@ class WifiOffPulse(Icon):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "WifiOffPulse":
         """Create a wifi_off icon with an animated opacity pulse.
@@ -381,41 +301,21 @@ class ConnectionPulser(Div):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ConnectionPulser":
         """Create a connection pulser component.

reflex/components/core/client_side_routing.py

@@ -21,7 +21,7 @@ route_not_found: Var = Var(_js_expr=constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
+    library = "$/utils/client_side_routing"
     tag = "useClientSideRouting"
 
     def add_hooks(self) -> list[str]:

reflex/components/core/client_side_routing.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -26,41 +26,21 @@ class ClientSideRouting(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "ClientSideRouting":
         """Create the component.
@@ -95,41 +75,21 @@ class Default404Page(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Default404Page":
         """Create the component.

reflex/components/core/clipboard.py

@@ -2,11 +2,11 @@
 
 from __future__ import annotations
 
-from typing import Dict, List, Union
+from typing import Dict, List, Tuple, Union
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.tags.tag import Tag
-from reflex.event import EventChain, EventHandler
+from reflex.event import EventChain, EventHandler, identity_event
 from reflex.utils.format import format_prop, wrap
 from reflex.utils.imports import ImportVar
 from reflex.vars import get_unique_variable_name
@@ -20,7 +20,7 @@ class Clipboard(Fragment):
     targets: Var[List[str]]
 
     # Called when the user pastes data into the document. Data is a list of tuples of (mime_type, data). Binary types will be base64 encoded as a data uri.
-    on_paste: EventHandler[lambda data: [data]]
+    on_paste: EventHandler[identity_event(List[Tuple[str, str]])]
 
     # Save the original event actions for the on_paste event.
     on_paste_event_actions: Var[Dict[str, Union[bool, int]]]
@@ -67,7 +67,7 @@ class Clipboard(Fragment):
             The import dict for the component.
         """
         return {
-            "/utils/helpers/paste.js": ImportVar(
+            "$/utils/helpers/paste.js": ImportVar(
                 tag="usePasteHandler", is_default=True
             ),
         }

reflex/components/core/clipboard.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
@@ -27,42 +27,22 @@ class Clipboard(Fragment):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_paste: Optional[EventType[list[tuple[str, str]]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_scroll: Optional[EventType[[]]] = None,
-        ] = None,
+        on_unmount: Optional[EventType[[]]] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_paste: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Clipboard":
         """Create a Clipboard component.

reflex/components/core/cond.py

@@ -15,7 +15,7 @@ from reflex.vars.base import LiteralVar, Var
 from reflex.vars.number import ternary_operation
 
 _IS_TRUE_IMPORT: ImportDict = {
-    f"/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")],
+    f"$/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")],
 }
 
 
@@ -138,13 +138,13 @@ def cond(condition: Any, c1: Any, c2: Any = None) -> Component | Var:
     """
     # Convert the condition to a Var.
     cond_var = LiteralVar.create(condition)
-    assert cond_var is not None, "The condition must be set."
+    if cond_var is None:
+        raise ValueError("The condition must be set.")
 
     # If the first component is a component, create a Cond component.
     if isinstance(c1, BaseComponent):
-        assert c2 is None or isinstance(
+        if c2 is not None and not isinstance(c2, BaseComponent):
-            c2, BaseComponent
+            raise ValueError("Both arguments must be components.")
-        ), "Both arguments must be components."
         return Cond.create(cond_var, c1, c2)
 
     # Otherwise, create a conditional Var.

reflex/components/core/debounce.py

@@ -6,7 +6,7 @@ from typing import Any, Type, Union
 
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars import VarData
 from reflex.vars.base import Var
 
@@ -46,7 +46,7 @@ class DebounceInput(Component):
     element: Var[Type[Component]]
 
     # Fired when the input value changes
-    on_change: EventHandler[lambda e0: [e0.value]]
+    on_change: EventHandler[empty_event]
 
     @classmethod
     def create(cls, *children: Component, **props: Any) -> Component:
@@ -118,7 +118,7 @@ class DebounceInput(Component):
                 _var_type=Type[Component],
                 _var_data=VarData(
                     imports=child._get_imports(),
-                    hooks=child._get_hooks_internal(),
+                    hooks=child._get_all_hooks(),
                 ),
             ),
         )
@@ -128,6 +128,10 @@ class DebounceInput(Component):
         component.event_triggers.update(child.event_triggers)
         component.children = child.children
         component._rename_props = child._rename_props
+        outer_get_all_custom_code = component._get_all_custom_code
+        component._get_all_custom_code = lambda: outer_get_all_custom_code().union(
+            child._get_all_custom_code()
+        )
         return component
 
     def _render(self):

reflex/components/core/debounce.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Type, Union, overload
+from typing import Any, Dict, Optional, Type, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -31,42 +31,22 @@ class DebounceInput(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_change: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_change: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "DebounceInput":
         """Create a DebounceInput component.

reflex/components/core/html.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.el.elements.typography import Div
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -49,41 +49,21 @@ class Html(Div):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Html":
         """Create a html component.

reflex/components/core/upload.py

@@ -2,13 +2,13 @@
 
 from __future__ import annotations
 
-import os
 from pathlib import Path
-from typing import Callable, ClassVar, Dict, List, Optional
+from typing import Any, Callable, ClassVar, Dict, List, Optional, Tuple
 
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
 from reflex.components.el.elements.forms import Input
 from reflex.components.radix.themes.layout.box import Box
+from reflex.config import environment
 from reflex.constants import Dirs
 from reflex.event import (
     CallableEventSpec,
@@ -29,7 +29,7 @@ DEFAULT_UPLOAD_ID: str = "default"
 upload_files_context_var_data: VarData = VarData(
     imports={
         "react": "useContext",
-        f"/{Dirs.CONTEXTS_PATH}": "UploadFilesContext",
+        f"$/{Dirs.CONTEXTS_PATH}": "UploadFilesContext",
     },
     hooks={
         "const [filesById, setFilesById] = useContext(UploadFilesContext);": None,
@@ -125,9 +125,7 @@ def get_upload_dir() -> Path:
     """
     Upload.is_used = True
 
-    uploaded_files_dir = Path(
+    uploaded_files_dir = environment.REFLEX_UPLOADED_FILES_DIR
-        os.environ.get("REFLEX_UPLOADED_FILES_DIR", "./uploaded_files")
-    )
     uploaded_files_dir.mkdir(parents=True, exist_ok=True)
     return uploaded_files_dir
 
@@ -136,8 +134,8 @@ uploaded_files_url_prefix = Var(
     _js_expr="getBackendURL(env.UPLOAD)",
     _var_data=VarData(
         imports={
-            f"/{Dirs.STATE_PATH}": "getBackendURL",
+            f"$/{Dirs.STATE_PATH}": "getBackendURL",
-            "/env.json": ImportVar(tag="env", is_default=True),
+            "$/env.json": ImportVar(tag="env", is_default=True),
         }
     ),
 ).to(str)
@@ -157,7 +155,7 @@ def get_upload_url(file_path: str) -> Var[str]:
     return uploaded_files_url_prefix + "/" + file_path
 
 
-def _on_drop_spec(files: Var):
+def _on_drop_spec(files: Var) -> Tuple[Var[Any]]:
     """Args spec for the on_drop event trigger.
 
     Args:
@@ -166,20 +164,20 @@ def _on_drop_spec(files: Var):
     Returns:
         Signature for on_drop handler including the files to upload.
     """
-    return [files]
+    return (files,)
 
 
 class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
-    library = f"/{Dirs.CONTEXTS_PATH}"
+    library = f"$/{Dirs.CONTEXTS_PATH}"
     tag = "UploadFilesProvider"
 
 
 class Upload(MemoizationLeaf):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library = "react-dropzone@14.2.10"
 
     tag = "ReactDropzone"
 

reflex/components/core/upload.pyi

@@ -4,14 +4,14 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 from pathlib import Path
-from typing import Any, Callable, ClassVar, Dict, List, Optional, Union, overload
+from typing import Any, ClassVar, Dict, List, Optional, Union, overload
 
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
 from reflex.constants import Dirs
 from reflex.event import (
     CallableEventSpec,
-    EventHandler,
     EventSpec,
+    EventType,
 )
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
@@ -34,8 +34,8 @@ uploaded_files_url_prefix = Var(
     _js_expr="getBackendURL(env.UPLOAD)",
     _var_data=VarData(
         imports={
-            f"/{Dirs.STATE_PATH}": "getBackendURL",
+            f"$/{Dirs.STATE_PATH}": "getBackendURL",
-            "/env.json": ImportVar(tag="env", is_default=True),
+            "$/env.json": ImportVar(tag="env", is_default=True),
         }
     ),
 ).to(str)
@@ -54,41 +54,21 @@ class UploadFilesProvider(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "UploadFilesProvider":
         """Create the component.
@@ -131,42 +111,22 @@ class Upload(MemoizationLeaf):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_drop: Optional[EventType[Any]] = None,
-        on_double_click: Optional[
+        on_focus: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mount: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_drop: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Upload":
         """Create an upload component.
@@ -216,42 +176,22 @@ class StyledUpload(Upload):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_drop: Optional[EventType[Any]] = None,
-        on_double_click: Optional[
+        on_focus: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mount: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_drop: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "StyledUpload":
         """Create the styled upload component.
@@ -301,42 +241,22 @@ class UploadNamespace(ComponentNamespace):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_drop: Optional[EventType[Any]] = None,
-        on_double_click: Optional[
+        on_focus: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mount: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_drop: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "StyledUpload":
         """Create the styled upload component.

reflex/components/datadisplay/__init__.py

@@ -8,7 +8,6 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
     "code": [
         "CodeBlock",
         "code_block",
-        "LiteralCodeBlockTheme",
         "LiteralCodeLanguage",
     ],
     "dataeditor": ["data_editor", "data_editor_theme", "DataEditorTheme"],

reflex/components/datadisplay/__init__.pyi

@@ -4,7 +4,6 @@
 # ------------------------------------------------------
 
 from .code import CodeBlock as CodeBlock
-from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
 from .code import LiteralCodeLanguage as LiteralCodeLanguage
 from .code import code_block as code_block
 from .dataeditor import DataEditorTheme as DataEditorTheme

reflex/components/datadisplay/code.py

@@ -2,11 +2,10 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, Literal, Optional, Union
+import dataclasses
+from typing import ClassVar, Dict, Literal, Optional, Union
 
-from typing_extensions import get_args
+from reflex.components.component import Component, ComponentNamespace
-
-from reflex.components.component import Component
 from reflex.components.core.cond import color_mode_cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.button import Button
@@ -14,58 +13,9 @@ from reflex.components.radix.themes.layout.box import Box
 from reflex.constants.colors import Color
 from reflex.event import set_clipboard
 from reflex.style import Style
-from reflex.utils import format
+from reflex.utils import console, format
 from reflex.utils.imports import ImportDict, ImportVar
-from reflex.vars.base import LiteralVar, Var
+from reflex.vars.base import LiteralVar, Var, VarData
-
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",  # not present in react-syntax-highlighter styles
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
-
 
 LiteralCodeLanguage = Literal[
     "abap",
@@ -350,31 +300,95 @@ LiteralCodeLanguage = Literal[
 ]
 
 
-def replace_quotes_with_camel_case(value: str) -> str:
+def construct_theme_var(theme: str) -> Var[Theme]:
-    """Replaces quotes in the given string with camel case format.
+    """Construct a theme var.
 
     Args:
-        value (str): The string to be processed.
+        theme: The theme to construct.
 
     Returns:
-        str: The processed string with quotes replaced by camel case.
+        The constructed theme var.
     """
-    for theme in get_args(LiteralCodeBlockTheme):
+    return Var(
-        value = value.replace(f'"{theme}"', format.to_camel_case(theme))
+        theme,
-    return value
+        _var_data=VarData(
+            imports={
+                f"react-syntax-highlighter/dist/cjs/styles/prism/{format.to_kebab_case(theme)}": [
+                    ImportVar(tag=theme, is_default=True, install=False)
+                ]
+            }
+        ),
+    )
+
+
+@dataclasses.dataclass(init=False)
+class Theme:
+    """Themes for the CodeBlock component."""
+
+    a11y_dark: ClassVar[Var[Theme]] = construct_theme_var("a11yDark")
+    atom_dark: ClassVar[Var[Theme]] = construct_theme_var("atomDark")
+    cb: ClassVar[Var[Theme]] = construct_theme_var("cb")
+    coldark_cold: ClassVar[Var[Theme]] = construct_theme_var("coldarkCold")
+    coldark_dark: ClassVar[Var[Theme]] = construct_theme_var("coldarkDark")
+    coy: ClassVar[Var[Theme]] = construct_theme_var("coy")
+    coy_without_shadows: ClassVar[Var[Theme]] = construct_theme_var("coyWithoutShadows")
+    darcula: ClassVar[Var[Theme]] = construct_theme_var("darcula")
+    dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    dracula: ClassVar[Var[Theme]] = construct_theme_var("dracula")
+    duotone_dark: ClassVar[Var[Theme]] = construct_theme_var("duotoneDark")
+    duotone_earth: ClassVar[Var[Theme]] = construct_theme_var("duotoneEarth")
+    duotone_forest: ClassVar[Var[Theme]] = construct_theme_var("duotoneForest")
+    duotone_light: ClassVar[Var[Theme]] = construct_theme_var("duotoneLight")
+    duotone_sea: ClassVar[Var[Theme]] = construct_theme_var("duotoneSea")
+    duotone_space: ClassVar[Var[Theme]] = construct_theme_var("duotoneSpace")
+    funky: ClassVar[Var[Theme]] = construct_theme_var("funky")
+    ghcolors: ClassVar[Var[Theme]] = construct_theme_var("ghcolors")
+    gruvbox_dark: ClassVar[Var[Theme]] = construct_theme_var("gruvboxDark")
+    gruvbox_light: ClassVar[Var[Theme]] = construct_theme_var("gruvboxLight")
+    holi_theme: ClassVar[Var[Theme]] = construct_theme_var("holiTheme")
+    hopscotch: ClassVar[Var[Theme]] = construct_theme_var("hopscotch")
+    light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    lucario: ClassVar[Var[Theme]] = construct_theme_var("lucario")
+    material_dark: ClassVar[Var[Theme]] = construct_theme_var("materialDark")
+    material_light: ClassVar[Var[Theme]] = construct_theme_var("materialLight")
+    material_oceanic: ClassVar[Var[Theme]] = construct_theme_var("materialOceanic")
+    night_owl: ClassVar[Var[Theme]] = construct_theme_var("nightOwl")
+    nord: ClassVar[Var[Theme]] = construct_theme_var("nord")
+    okaidia: ClassVar[Var[Theme]] = construct_theme_var("okaidia")
+    one_dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    one_light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    pojoaque: ClassVar[Var[Theme]] = construct_theme_var("pojoaque")
+    prism: ClassVar[Var[Theme]] = construct_theme_var("prism")
+    shades_of_purple: ClassVar[Var[Theme]] = construct_theme_var("shadesOfPurple")
+    solarized_dark_atom: ClassVar[Var[Theme]] = construct_theme_var("solarizedDarkAtom")
+    solarizedlight: ClassVar[Var[Theme]] = construct_theme_var("solarizedlight")
+    synthwave84: ClassVar[Var[Theme]] = construct_theme_var("synthwave84")
+    tomorrow: ClassVar[Var[Theme]] = construct_theme_var("tomorrow")
+    twilight: ClassVar[Var[Theme]] = construct_theme_var("twilight")
+    vs: ClassVar[Var[Theme]] = construct_theme_var("vs")
+    vs_dark: ClassVar[Var[Theme]] = construct_theme_var("vsDark")
+    vsc_dark_plus: ClassVar[Var[Theme]] = construct_theme_var("vscDarkPlus")
+    xonokai: ClassVar[Var[Theme]] = construct_theme_var("xonokai")
+    z_touch: ClassVar[Var[Theme]] = construct_theme_var("zTouch")
+
+
+for theme_name in dir(Theme):
+    if theme_name.startswith("_"):
+        continue
+    setattr(Theme, theme_name, getattr(Theme, theme_name)._replace(_var_type=Theme))
 
 
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library = "react-syntax-highlighter@15.6.1"
 
     tag = "PrismAsyncLight"
 
     alias = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
-    theme: Var[Any] = "one-light"  # type: ignore
+    theme: Var[Union[Theme, str]] = Theme.one_light
 
     # The language to use.
     language: Var[LiteralCodeLanguage] = "python"  # type: ignore
@@ -405,31 +419,6 @@ class CodeBlock(Component):
         """
         imports_: ImportDict = {}
 
-        themeString = str(self.theme)
-
-        selected_themes = []
-
-        for possibleTheme in get_args(LiteralCodeBlockTheme):
-            if format.to_camel_case(possibleTheme) in themeString:
-                selected_themes.append(possibleTheme)
-            if possibleTheme in themeString:
-                selected_themes.append(possibleTheme)
-
-        selected_themes = sorted(set(map(self.convert_theme_name, selected_themes)))
-
-        imports_.update(
-            {
-                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": [
-                    ImportVar(
-                        tag=format.to_camel_case(theme),
-                        is_default=True,
-                        install=False,
-                    )
-                ]
-                for theme in selected_themes
-            }
-        )
-
         if (
             self.language is not None
             and (language_without_quotes := str(self.language).replace('"', ""))
@@ -480,14 +469,20 @@ class CodeBlock(Component):
         if "theme" not in props:
             # Default color scheme responds to global color mode.
             props["theme"] = color_mode_cond(
-                light=Var(_js_expr="oneLight"),
+                light=Theme.one_light,
-                dark=Var(_js_expr="oneDark"),
+                dark=Theme.one_dark,
             )
 
         # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.
         if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = cls.convert_theme_name(props["theme"])
+            props["theme"] = getattr(Theme, format.to_snake_case(props["theme"]))  # type: ignore
+            console.deprecate(
+                feature_name="theme prop as string",
+                reason="Use code_block.themes instead.",
+                deprecation_version="0.6.0",
+                removal_version="0.7.0",
+            )
 
         if can_copy:
             code = children[0]
@@ -533,9 +528,7 @@ class CodeBlock(Component):
     def _render(self):
         out = super()._render()
 
-        theme = self.theme._replace(
+        theme = self.theme
-            _js_expr=replace_quotes_with_camel_case(str(self.theme))
-        )
 
         out.add_props(style=theme).remove_props("theme", "code").add_props(
             children=self.code
@@ -543,19 +536,13 @@ class CodeBlock(Component):
 
         return out
 
-    @staticmethod
-    def convert_theme_name(theme) -> str:
-        """Convert theme names to appropriate names.
 
-        Args:
+class CodeblockNamespace(ComponentNamespace):
-            theme: The theme name.
+    """Namespace for the CodeBlock component."""
 
-        Returns:
+    themes = Theme
-            The right theme name.
+
-        """
+    __call__ = CodeBlock.create
-        if theme in ["light", "dark"]:
-            return f"one-{theme}"
-        return theme
 
 
-code_block = CodeBlock.create
+code_block = CodeblockNamespace()

reflex/components/datadisplay/code.pyi

@@ -3,62 +3,16 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Literal, Optional, Union, overload
+import dataclasses
+from typing import Any, ClassVar, Dict, Literal, Optional, Union, overload
 
-from reflex.components.component import Component
+from reflex.components.component import Component, ComponentNamespace
 from reflex.constants.colors import Color
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportDict
 from reflex.vars.base import Var
 
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
 LiteralCodeLanguage = Literal[
     "abap",
     "abnf",
@@ -341,7 +295,59 @@ LiteralCodeLanguage = Literal[
     "zig",
 ]
 
-def replace_quotes_with_camel_case(value: str) -> str: ...
+def construct_theme_var(theme: str) -> Var[Theme]: ...
+@dataclasses.dataclass(init=False)
+class Theme:
+    a11y_dark: ClassVar[Var[Theme]] = construct_theme_var("a11yDark")
+    atom_dark: ClassVar[Var[Theme]] = construct_theme_var("atomDark")
+    cb: ClassVar[Var[Theme]] = construct_theme_var("cb")
+    coldark_cold: ClassVar[Var[Theme]] = construct_theme_var("coldarkCold")
+    coldark_dark: ClassVar[Var[Theme]] = construct_theme_var("coldarkDark")
+    coy: ClassVar[Var[Theme]] = construct_theme_var("coy")
+    coy_without_shadows: ClassVar[Var[Theme]] = construct_theme_var("coyWithoutShadows")
+    darcula: ClassVar[Var[Theme]] = construct_theme_var("darcula")
+    dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    dracula: ClassVar[Var[Theme]] = construct_theme_var("dracula")
+    duotone_dark: ClassVar[Var[Theme]] = construct_theme_var("duotoneDark")
+    duotone_earth: ClassVar[Var[Theme]] = construct_theme_var("duotoneEarth")
+    duotone_forest: ClassVar[Var[Theme]] = construct_theme_var("duotoneForest")
+    duotone_light: ClassVar[Var[Theme]] = construct_theme_var("duotoneLight")
+    duotone_sea: ClassVar[Var[Theme]] = construct_theme_var("duotoneSea")
+    duotone_space: ClassVar[Var[Theme]] = construct_theme_var("duotoneSpace")
+    funky: ClassVar[Var[Theme]] = construct_theme_var("funky")
+    ghcolors: ClassVar[Var[Theme]] = construct_theme_var("ghcolors")
+    gruvbox_dark: ClassVar[Var[Theme]] = construct_theme_var("gruvboxDark")
+    gruvbox_light: ClassVar[Var[Theme]] = construct_theme_var("gruvboxLight")
+    holi_theme: ClassVar[Var[Theme]] = construct_theme_var("holiTheme")
+    hopscotch: ClassVar[Var[Theme]] = construct_theme_var("hopscotch")
+    light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    lucario: ClassVar[Var[Theme]] = construct_theme_var("lucario")
+    material_dark: ClassVar[Var[Theme]] = construct_theme_var("materialDark")
+    material_light: ClassVar[Var[Theme]] = construct_theme_var("materialLight")
+    material_oceanic: ClassVar[Var[Theme]] = construct_theme_var("materialOceanic")
+    night_owl: ClassVar[Var[Theme]] = construct_theme_var("nightOwl")
+    nord: ClassVar[Var[Theme]] = construct_theme_var("nord")
+    okaidia: ClassVar[Var[Theme]] = construct_theme_var("okaidia")
+    one_dark: ClassVar[Var[Theme]] = construct_theme_var("oneDark")
+    one_light: ClassVar[Var[Theme]] = construct_theme_var("oneLight")
+    pojoaque: ClassVar[Var[Theme]] = construct_theme_var("pojoaque")
+    prism: ClassVar[Var[Theme]] = construct_theme_var("prism")
+    shades_of_purple: ClassVar[Var[Theme]] = construct_theme_var("shadesOfPurple")
+    solarized_dark_atom: ClassVar[Var[Theme]] = construct_theme_var("solarizedDarkAtom")
+    solarizedlight: ClassVar[Var[Theme]] = construct_theme_var("solarizedlight")
+    synthwave84: ClassVar[Var[Theme]] = construct_theme_var("synthwave84")
+    tomorrow: ClassVar[Var[Theme]] = construct_theme_var("tomorrow")
+    twilight: ClassVar[Var[Theme]] = construct_theme_var("twilight")
+    vs: ClassVar[Var[Theme]] = construct_theme_var("vs")
+    vs_dark: ClassVar[Var[Theme]] = construct_theme_var("vsDark")
+    vsc_dark_plus: ClassVar[Var[Theme]] = construct_theme_var("vscDarkPlus")
+    xonokai: ClassVar[Var[Theme]] = construct_theme_var("xonokai")
+    z_touch: ClassVar[Var[Theme]] = construct_theme_var("zTouch")
+
+for theme_name in dir(Theme):
+    if theme_name.startswith("_"):
+        continue
+    setattr(Theme, theme_name, getattr(Theme, theme_name)._replace(_var_type=Theme))
 
 class CodeBlock(Component):
     def add_imports(self) -> ImportDict: ...
@@ -352,7 +358,7 @@ class CodeBlock(Component):
         *children,
         can_copy: Optional[bool] = False,
         copy_button: Optional[Union[Component, bool]] = None,
-        theme: Optional[Union[Any, Var[Any]]] = None,
+        theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
                 Literal[
@@ -933,41 +939,21 @@ class CodeBlock(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "CodeBlock":
         """Create a text component.
@@ -998,7 +984,638 @@ class CodeBlock(Component):
         ...
 
     def add_style(self): ...
-    @staticmethod
-    def convert_theme_name(theme) -> str: ...
 
-code_block = CodeBlock.create
+class CodeblockNamespace(ComponentNamespace):
+    themes = Theme
+
+    @staticmethod
+    def __call__(
+        *children,
+        can_copy: Optional[bool] = False,
+        copy_button: Optional[Union[Component, bool]] = None,
+        theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
+        language: Optional[
+            Union[
+                Literal[
+                    "abap",
+                    "abnf",
+                    "actionscript",
+                    "ada",
+                    "agda",
+                    "al",
+                    "antlr4",
+                    "apacheconf",
+                    "apex",
+                    "apl",
+                    "applescript",
+                    "aql",
+                    "arduino",
+                    "arff",
+                    "asciidoc",
+                    "asm6502",
+                    "asmatmel",
+                    "aspnet",
+                    "autohotkey",
+                    "autoit",
+                    "avisynth",
+                    "avro-idl",
+                    "bash",
+                    "basic",
+                    "batch",
+                    "bbcode",
+                    "bicep",
+                    "birb",
+                    "bison",
+                    "bnf",
+                    "brainfuck",
+                    "brightscript",
+                    "bro",
+                    "bsl",
+                    "c",
+                    "cfscript",
+                    "chaiscript",
+                    "cil",
+                    "clike",
+                    "clojure",
+                    "cmake",
+                    "cobol",
+                    "coffeescript",
+                    "concurnas",
+                    "coq",
+                    "core",
+                    "cpp",
+                    "crystal",
+                    "csharp",
+                    "cshtml",
+                    "csp",
+                    "css",
+                    "css-extras",
+                    "csv",
+                    "cypher",
+                    "d",
+                    "dart",
+                    "dataweave",
+                    "dax",
+                    "dhall",
+                    "diff",
+                    "django",
+                    "dns-zone-file",
+                    "docker",
+                    "dot",
+                    "ebnf",
+                    "editorconfig",
+                    "eiffel",
+                    "ejs",
+                    "elixir",
+                    "elm",
+                    "erb",
+                    "erlang",
+                    "etlua",
+                    "excel-formula",
+                    "factor",
+                    "false",
+                    "firestore-security-rules",
+                    "flow",
+                    "fortran",
+                    "fsharp",
+                    "ftl",
+                    "gap",
+                    "gcode",
+                    "gdscript",
+                    "gedcom",
+                    "gherkin",
+                    "git",
+                    "glsl",
+                    "gml",
+                    "gn",
+                    "go",
+                    "go-module",
+                    "graphql",
+                    "groovy",
+                    "haml",
+                    "handlebars",
+                    "haskell",
+                    "haxe",
+                    "hcl",
+                    "hlsl",
+                    "hoon",
+                    "hpkp",
+                    "hsts",
+                    "http",
+                    "ichigojam",
+                    "icon",
+                    "icu-message-format",
+                    "idris",
+                    "iecst",
+                    "ignore",
+                    "index",
+                    "inform7",
+                    "ini",
+                    "io",
+                    "j",
+                    "java",
+                    "javadoc",
+                    "javadoclike",
+                    "javascript",
+                    "javastacktrace",
+                    "jexl",
+                    "jolie",
+                    "jq",
+                    "js-extras",
+                    "js-templates",
+                    "jsdoc",
+                    "json",
+                    "json5",
+                    "jsonp",
+                    "jsstacktrace",
+                    "jsx",
+                    "julia",
+                    "keepalived",
+                    "keyman",
+                    "kotlin",
+                    "kumir",
+                    "kusto",
+                    "latex",
+                    "latte",
+                    "less",
+                    "lilypond",
+                    "liquid",
+                    "lisp",
+                    "livescript",
+                    "llvm",
+                    "log",
+                    "lolcode",
+                    "lua",
+                    "magma",
+                    "makefile",
+                    "markdown",
+                    "markup",
+                    "markup-templating",
+                    "matlab",
+                    "maxscript",
+                    "mel",
+                    "mermaid",
+                    "mizar",
+                    "mongodb",
+                    "monkey",
+                    "moonscript",
+                    "n1ql",
+                    "n4js",
+                    "nand2tetris-hdl",
+                    "naniscript",
+                    "nasm",
+                    "neon",
+                    "nevod",
+                    "nginx",
+                    "nim",
+                    "nix",
+                    "nsis",
+                    "objectivec",
+                    "ocaml",
+                    "opencl",
+                    "openqasm",
+                    "oz",
+                    "parigp",
+                    "parser",
+                    "pascal",
+                    "pascaligo",
+                    "pcaxis",
+                    "peoplecode",
+                    "perl",
+                    "php",
+                    "php-extras",
+                    "phpdoc",
+                    "plsql",
+                    "powerquery",
+                    "powershell",
+                    "processing",
+                    "prolog",
+                    "promql",
+                    "properties",
+                    "protobuf",
+                    "psl",
+                    "pug",
+                    "puppet",
+                    "pure",
+                    "purebasic",
+                    "purescript",
+                    "python",
+                    "q",
+                    "qml",
+                    "qore",
+                    "qsharp",
+                    "r",
+                    "racket",
+                    "reason",
+                    "regex",
+                    "rego",
+                    "renpy",
+                    "rest",
+                    "rip",
+                    "roboconf",
+                    "robotframework",
+                    "ruby",
+                    "rust",
+                    "sas",
+                    "sass",
+                    "scala",
+                    "scheme",
+                    "scss",
+                    "shell-session",
+                    "smali",
+                    "smalltalk",
+                    "smarty",
+                    "sml",
+                    "solidity",
+                    "solution-file",
+                    "soy",
+                    "sparql",
+                    "splunk-spl",
+                    "sqf",
+                    "sql",
+                    "squirrel",
+                    "stan",
+                    "stylus",
+                    "swift",
+                    "systemd",
+                    "t4-cs",
+                    "t4-templating",
+                    "t4-vb",
+                    "tap",
+                    "tcl",
+                    "textile",
+                    "toml",
+                    "tremor",
+                    "tsx",
+                    "tt2",
+                    "turtle",
+                    "twig",
+                    "typescript",
+                    "typoscript",
+                    "unrealscript",
+                    "uorazor",
+                    "uri",
+                    "v",
+                    "vala",
+                    "vbnet",
+                    "velocity",
+                    "verilog",
+                    "vhdl",
+                    "vim",
+                    "visual-basic",
+                    "warpscript",
+                    "wasm",
+                    "web-idl",
+                    "wiki",
+                    "wolfram",
+                    "wren",
+                    "xeora",
+                    "xml-doc",
+                    "xojo",
+                    "xquery",
+                    "yaml",
+                    "yang",
+                    "zig",
+                ],
+                Var[
+                    Literal[
+                        "abap",
+                        "abnf",
+                        "actionscript",
+                        "ada",
+                        "agda",
+                        "al",
+                        "antlr4",
+                        "apacheconf",
+                        "apex",
+                        "apl",
+                        "applescript",
+                        "aql",
+                        "arduino",
+                        "arff",
+                        "asciidoc",
+                        "asm6502",
+                        "asmatmel",
+                        "aspnet",
+                        "autohotkey",
+                        "autoit",
+                        "avisynth",
+                        "avro-idl",
+                        "bash",
+                        "basic",
+                        "batch",
+                        "bbcode",
+                        "bicep",
+                        "birb",
+                        "bison",
+                        "bnf",
+                        "brainfuck",
+                        "brightscript",
+                        "bro",
+                        "bsl",
+                        "c",
+                        "cfscript",
+                        "chaiscript",
+                        "cil",
+                        "clike",
+                        "clojure",
+                        "cmake",
+                        "cobol",
+                        "coffeescript",
+                        "concurnas",
+                        "coq",
+                        "core",
+                        "cpp",
+                        "crystal",
+                        "csharp",
+                        "cshtml",
+                        "csp",
+                        "css",
+                        "css-extras",
+                        "csv",
+                        "cypher",
+                        "d",
+                        "dart",
+                        "dataweave",
+                        "dax",
+                        "dhall",
+                        "diff",
+                        "django",
+                        "dns-zone-file",
+                        "docker",
+                        "dot",
+                        "ebnf",
+                        "editorconfig",
+                        "eiffel",
+                        "ejs",
+                        "elixir",
+                        "elm",
+                        "erb",
+                        "erlang",
+                        "etlua",
+                        "excel-formula",
+                        "factor",
+                        "false",
+                        "firestore-security-rules",
+                        "flow",
+                        "fortran",
+                        "fsharp",
+                        "ftl",
+                        "gap",
+                        "gcode",
+                        "gdscript",
+                        "gedcom",
+                        "gherkin",
+                        "git",
+                        "glsl",
+                        "gml",
+                        "gn",
+                        "go",
+                        "go-module",
+                        "graphql",
+                        "groovy",
+                        "haml",
+                        "handlebars",
+                        "haskell",
+                        "haxe",
+                        "hcl",
+                        "hlsl",
+                        "hoon",
+                        "hpkp",
+                        "hsts",
+                        "http",
+                        "ichigojam",
+                        "icon",
+                        "icu-message-format",
+                        "idris",
+                        "iecst",
+                        "ignore",
+                        "index",
+                        "inform7",
+                        "ini",
+                        "io",
+                        "j",
+                        "java",
+                        "javadoc",
+                        "javadoclike",
+                        "javascript",
+                        "javastacktrace",
+                        "jexl",
+                        "jolie",
+                        "jq",
+                        "js-extras",
+                        "js-templates",
+                        "jsdoc",
+                        "json",
+                        "json5",
+                        "jsonp",
+                        "jsstacktrace",
+                        "jsx",
+                        "julia",
+                        "keepalived",
+                        "keyman",
+                        "kotlin",
+                        "kumir",
+                        "kusto",
+                        "latex",
+                        "latte",
+                        "less",
+                        "lilypond",
+                        "liquid",
+                        "lisp",
+                        "livescript",
+                        "llvm",
+                        "log",
+                        "lolcode",
+                        "lua",
+                        "magma",
+                        "makefile",
+                        "markdown",
+                        "markup",
+                        "markup-templating",
+                        "matlab",
+                        "maxscript",
+                        "mel",
+                        "mermaid",
+                        "mizar",
+                        "mongodb",
+                        "monkey",
+                        "moonscript",
+                        "n1ql",
+                        "n4js",
+                        "nand2tetris-hdl",
+                        "naniscript",
+                        "nasm",
+                        "neon",
+                        "nevod",
+                        "nginx",
+                        "nim",
+                        "nix",
+                        "nsis",
+                        "objectivec",
+                        "ocaml",
+                        "opencl",
+                        "openqasm",
+                        "oz",
+                        "parigp",
+                        "parser",
+                        "pascal",
+                        "pascaligo",
+                        "pcaxis",
+                        "peoplecode",
+                        "perl",
+                        "php",
+                        "php-extras",
+                        "phpdoc",
+                        "plsql",
+                        "powerquery",
+                        "powershell",
+                        "processing",
+                        "prolog",
+                        "promql",
+                        "properties",
+                        "protobuf",
+                        "psl",
+                        "pug",
+                        "puppet",
+                        "pure",
+                        "purebasic",
+                        "purescript",
+                        "python",
+                        "q",
+                        "qml",
+                        "qore",
+                        "qsharp",
+                        "r",
+                        "racket",
+                        "reason",
+                        "regex",
+                        "rego",
+                        "renpy",
+                        "rest",
+                        "rip",
+                        "roboconf",
+                        "robotframework",
+                        "ruby",
+                        "rust",
+                        "sas",
+                        "sass",
+                        "scala",
+                        "scheme",
+                        "scss",
+                        "shell-session",
+                        "smali",
+                        "smalltalk",
+                        "smarty",
+                        "sml",
+                        "solidity",
+                        "solution-file",
+                        "soy",
+                        "sparql",
+                        "splunk-spl",
+                        "sqf",
+                        "sql",
+                        "squirrel",
+                        "stan",
+                        "stylus",
+                        "swift",
+                        "systemd",
+                        "t4-cs",
+                        "t4-templating",
+                        "t4-vb",
+                        "tap",
+                        "tcl",
+                        "textile",
+                        "toml",
+                        "tremor",
+                        "tsx",
+                        "tt2",
+                        "turtle",
+                        "twig",
+                        "typescript",
+                        "typoscript",
+                        "unrealscript",
+                        "uorazor",
+                        "uri",
+                        "v",
+                        "vala",
+                        "vbnet",
+                        "velocity",
+                        "verilog",
+                        "vhdl",
+                        "vim",
+                        "visual-basic",
+                        "warpscript",
+                        "wasm",
+                        "web-idl",
+                        "wiki",
+                        "wolfram",
+                        "wren",
+                        "xeora",
+                        "xml-doc",
+                        "xojo",
+                        "xquery",
+                        "yaml",
+                        "yang",
+                        "zig",
+                    ]
+                ],
+            ]
+        ] = None,
+        code: Optional[Union[Var[str], str]] = None,
+        show_line_numbers: Optional[Union[Var[bool], bool]] = None,
+        starting_line_number: Optional[Union[Var[int], int]] = None,
+        wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
+        custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
+        code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[EventType[[]]] = None,
+        on_click: Optional[EventType[[]]] = None,
+        on_context_menu: Optional[EventType[[]]] = None,
+        on_double_click: Optional[EventType[[]]] = None,
+        on_focus: Optional[EventType[[]]] = None,
+        on_mount: Optional[EventType[[]]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
+        on_mouse_out: Optional[EventType[[]]] = None,
+        on_mouse_over: Optional[EventType[[]]] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
+        on_scroll: Optional[EventType[[]]] = None,
+        on_unmount: Optional[EventType[[]]] = None,
+        **props,
+    ) -> "CodeBlock":
+        """Create a text component.
+
+        Args:
+            *children: The children of the component.
+            can_copy: Whether a copy button should appears.
+            copy_button: A custom copy button to override the default one.
+            theme: The theme to use ("light" or "dark").
+            language: The language to use.
+            code: The code to display.
+            show_line_numbers: If this is enabled line numbers will be shown next to the code block.
+            starting_line_number: The starting line number to use.
+            wrap_long_lines: Whether to wrap long lines.
+            custom_style: A custom style for the code block.
+            code_tag_props: Props passed down to the code tag.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props to pass to the component.
+
+        Returns:
+            The text component.
+        """
+        ...
+
+code_block = CodeblockNamespace()

reflex/components/datadisplay/dataeditor.py

@@ -3,12 +3,14 @@
 from __future__ import annotations
 
 from enum import Enum
-from typing import Any, Dict, List, Literal, Optional, Union
+from typing import Any, Dict, List, Literal, Optional, Tuple, Union
+
+from typing_extensions import TypedDict
 
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
 from reflex.components.literals import LiteralRowMarker
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event, identity_event
 from reflex.utils import console, format, types
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.utils.serializers import serializer
@@ -107,17 +109,76 @@ class DataEditorTheme(Base):
     text_medium: Optional[str] = None
 
 
-def on_edit_spec(pos, data: dict[str, Any]):
+class Bounds(TypedDict):
-    """The on edit spec function.
+    """The bounds of the group header."""
 
-    Args:
+    x: int
-        pos: The position of the edit event.
+    y: int
-        data: The data of the edit event.
+    width: int
+    height: int
 
-    Returns:
+
-        The position and data.
+class CompatSelection(TypedDict):
-    """
+    """The selection."""
-    return [pos, data]
+
+    items: list
+
+
+class Rectangle(TypedDict):
+    """The bounds of the group header."""
+
+    x: int
+    y: int
+    width: int
+    height: int
+
+
+class GridSelectionCurrent(TypedDict):
+    """The current selection."""
+
+    cell: tuple[int, int]
+    range: Rectangle
+    rangeStack: list[Rectangle]
+
+
+class GridSelection(TypedDict):
+    """The grid selection."""
+
+    current: Optional[GridSelectionCurrent]
+    columns: CompatSelection
+    rows: CompatSelection
+
+
+class GroupHeaderClickedEventArgs(TypedDict):
+    """The arguments for the group header clicked event."""
+
+    kind: str
+    group: str
+    location: tuple[int, int]
+    bounds: Bounds
+    isEdge: bool
+    shiftKey: bool
+    ctrlKey: bool
+    metaKey: bool
+    isTouch: bool
+    localEventX: int
+    localEventY: int
+    button: int
+    buttons: int
+    scrollEdge: tuple[int, int]
+
+
+class GridCell(TypedDict):
+    """The grid cell."""
+
+    span: Optional[List[int]]
+
+
+class GridColumn(TypedDict):
+    """The grid column."""
+
+    title: str
+    group: Optional[str]
 
 
 class DataEditor(NoSSRComponent):
@@ -125,10 +186,10 @@ class DataEditor(NoSSRComponent):
 
     tag = "DataEditor"
     is_default = True
-    library: str = "@glideapps/glide-data-grid@^5.3.0"
+    library: str = "@glideapps/glide-data-grid@^6.0.3"
     lib_dependencies: List[str] = [
         "lodash@^4.17.21",
-        "marked@^4.0.10",
+        "marked@^14.1.2",
         "react-responsive-carousel@^3.2.7",
     ]
 
@@ -223,52 +284,56 @@ class DataEditor(NoSSRComponent):
     theme: Var[Union[DataEditorTheme, Dict]]
 
     # Fired when a cell is activated.
-    on_cell_activated: EventHandler[lambda pos: [pos]]
+    on_cell_activated: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a cell is clicked.
-    on_cell_clicked: EventHandler[lambda pos: [pos]]
+    on_cell_clicked: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a cell is right-clicked.
-    on_cell_context_menu: EventHandler[lambda pos: [pos]]
+    on_cell_context_menu: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a cell is edited.
-    on_cell_edited: EventHandler[on_edit_spec]
+    on_cell_edited: EventHandler[identity_event(Tuple[int, int], GridCell)]
 
     # Fired when a group header is clicked.
-    on_group_header_clicked: EventHandler[on_edit_spec]
+    on_group_header_clicked: EventHandler[identity_event(Tuple[int, int], GridCell)]
 
     # Fired when a group header is right-clicked.
-    on_group_header_context_menu: EventHandler[lambda grp_idx, data: [grp_idx, data]]
+    on_group_header_context_menu: EventHandler[
+        identity_event(int, GroupHeaderClickedEventArgs)
+    ]
 
     # Fired when a group header is renamed.
-    on_group_header_renamed: EventHandler[lambda idx, val: [idx, val]]
+    on_group_header_renamed: EventHandler[identity_event(str, str)]
 
     # Fired when a header is clicked.
-    on_header_clicked: EventHandler[lambda pos: [pos]]
+    on_header_clicked: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a header is right-clicked.
-    on_header_context_menu: EventHandler[lambda pos: [pos]]
+    on_header_context_menu: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a header menu item is clicked.
-    on_header_menu_click: EventHandler[lambda col, pos: [col, pos]]
+    on_header_menu_click: EventHandler[identity_event(int, Rectangle)]
 
     # Fired when an item is hovered.
-    on_item_hovered: EventHandler[lambda pos: [pos]]
+    on_item_hovered: EventHandler[identity_event(Tuple[int, int])]
 
     # Fired when a selection is deleted.
-    on_delete: EventHandler[lambda selection: [selection]]
+    on_delete: EventHandler[identity_event(GridSelection)]
 
     # Fired when editing is finished.
-    on_finished_editing: EventHandler[lambda new_value, movement: [new_value, movement]]
+    on_finished_editing: EventHandler[
+        identity_event(Union[GridCell, None], tuple[int, int])
+    ]
 
     # Fired when a row is appended.
-    on_row_appended: EventHandler[lambda: []]
+    on_row_appended: EventHandler[empty_event]
 
     # Fired when the selection is cleared.
-    on_selection_cleared: EventHandler[lambda: []]
+    on_selection_cleared: EventHandler[empty_event]
 
     # Fired when a column is resized.
-    on_column_resize: EventHandler[lambda col, width: [col, width]]
+    on_column_resize: EventHandler[identity_event(GridColumn, int)]
 
     def add_imports(self) -> ImportDict:
         """Add imports for the component.
@@ -279,7 +344,7 @@ class DataEditor(NoSSRComponent):
         return {
             "": f"{format.format_library_name(self.library)}/dist/index.css",
             self.library: "GridCellKind",
-            "/utils/helpers/dataeditor.js": ImportVar(
+            "$/utils/helpers/dataeditor.js": ImportVar(
                 tag="formatDataEditorCells", is_default=False, install=False
             ),
         }
@@ -329,7 +394,7 @@ class DataEditor(NoSSRComponent):
 
         columns = props.get("columns", [])
         data = props.get("data", [])
-        rows = props.get("rows", None)
+        rows = props.get("rows")
 
         # If rows is not provided, determine from data.
         if rows is None:

reflex/components/datadisplay/dataeditor.pyi

@@ -4,11 +4,13 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 from enum import Enum
-from typing import Any, Callable, Dict, List, Literal, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
+
+from typing_extensions import TypedDict
 
 from reflex.base import Base
 from reflex.components.component import NoSSRComponent
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportDict
 from reflex.utils.serializers import serializer
@@ -76,7 +78,53 @@ class DataEditorTheme(Base):
     text_light: Optional[str]
     text_medium: Optional[str]
 
-def on_edit_spec(pos, data: dict[str, Any]): ...
+class Bounds(TypedDict):
+    x: int
+    y: int
+    width: int
+    height: int
+
+class CompatSelection(TypedDict):
+    items: list
+
+class Rectangle(TypedDict):
+    x: int
+    y: int
+    width: int
+    height: int
+
+class GridSelectionCurrent(TypedDict):
+    cell: tuple[int, int]
+    range: Rectangle
+    rangeStack: list[Rectangle]
+
+class GridSelection(TypedDict):
+    current: Optional[GridSelectionCurrent]
+    columns: CompatSelection
+    rows: CompatSelection
+
+class GroupHeaderClickedEventArgs(TypedDict):
+    kind: str
+    group: str
+    location: tuple[int, int]
+    bounds: Bounds
+    isEdge: bool
+    shiftKey: bool
+    ctrlKey: bool
+    metaKey: bool
+    isTouch: bool
+    localEventX: int
+    localEventY: int
+    button: int
+    buttons: int
+    scrollEdge: tuple[int, int]
+
+class GridCell(TypedDict):
+    span: Optional[List[int]]
+
+class GridColumn(TypedDict):
+    title: str
+    group: Optional[str]
 
 class DataEditor(NoSSRComponent):
     def add_imports(self) -> ImportDict: ...
@@ -135,87 +183,41 @@ class DataEditor(NoSSRComponent):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_cell_activated: Optional[
+        on_cell_activated: Optional[EventType[tuple[int, int]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_cell_clicked: Optional[EventType[tuple[int, int]]] = None,
-        ] = None,
+        on_cell_context_menu: Optional[EventType[tuple[int, int]]] = None,
-        on_cell_clicked: Optional[
+        on_cell_edited: Optional[EventType[tuple[int, int], GridCell]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_column_resize: Optional[EventType[GridColumn, int]] = None,
-        on_cell_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_delete: Optional[EventType[GridSelection]] = None,
-        ] = None,
+        on_double_click: Optional[EventType[[]]] = None,
-        on_cell_edited: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_column_resize: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_delete: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         on_finished_editing: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
+            EventType[Union[GridCell, None], tuple[int, int]]
-        ] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_group_header_clicked: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
         ] = None,
+        on_focus: Optional[EventType[[]]] = None,
+        on_group_header_clicked: Optional[EventType[tuple[int, int], GridCell]] = None,
         on_group_header_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
+            EventType[int, GroupHeaderClickedEventArgs]
-        ] = None,
-        on_group_header_renamed: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_header_clicked: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_header_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_header_menu_click: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_item_hovered: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_row_appended: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_selection_cleared: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
         ] = None,
+        on_group_header_renamed: Optional[EventType[str, str]] = None,
+        on_header_clicked: Optional[EventType[tuple[int, int]]] = None,
+        on_header_context_menu: Optional[EventType[tuple[int, int]]] = None,
+        on_header_menu_click: Optional[EventType[int, Rectangle]] = None,
+        on_item_hovered: Optional[EventType[tuple[int, int]]] = None,
+        on_mount: Optional[EventType[[]]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
+        on_mouse_out: Optional[EventType[[]]] = None,
+        on_mouse_over: Optional[EventType[[]]] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
+        on_row_appended: Optional[EventType[[]]] = None,
+        on_scroll: Optional[EventType[[]]] = None,
+        on_selection_cleared: Optional[EventType[[]]] = None,
+        on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "DataEditor":
         """Create the DataEditor component.

reflex/components/datadisplay/logo.py

@@ -12,31 +12,33 @@ def logo(**props):
     Returns:
         The logo component.
     """
-    light_mode_logo = """<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11.6V0.400024H8.96V4.88002H6.72V2.64002H2.24V4.88002H6.72V7.12002H2.24V11.6H0ZM6.72 11.6V7.12002H8.96V11.6H6.72Z" fill="#110F1F"/>
-<path d="M11.2 11.6V0.400024H17.92V2.64002H13.44V4.88002H17.92V7.12002H13.44V9.36002H17.92V11.6H11.2Z" fill="#110F1F"/>
-<path d="M20.16 11.6V0.400024H26.88V2.64002H22.4V4.88002H26.88V7.12002H22.4V11.6H20.16Z" fill="#110F1F"/>
-<path d="M29.12 11.6V0.400024H31.36V9.36002H35.84V11.6H29.12Z" fill="#110F1F"/>
-<path d="M38.08 11.6V0.400024H44.8V2.64002H40.32V4.88002H44.8V7.12002H40.32V9.36002H44.8V11.6H38.08Z" fill="#110F1F"/>
-<path d="M47.04 4.88002V0.400024H49.28V4.88002H47.04ZM53.76 4.88002V0.400024H56V4.88002H53.76ZM49.28 7.12002V4.88002H53.76V7.12002H49.28ZM47.04 11.6V7.12002H49.28V11.6H47.04ZM53.76 11.6V7.12002H56V11.6H53.76Z" fill="#110F1F"/>
-</svg>"""
 
-    dark_mode_logo = """<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    def logo_path(d):
-<path d="M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z" fill="white"/>
+        return rx.el.svg.path(
-<path d="M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z" fill="white"/>
+            d=d,
-<path d="M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z" fill="white"/>
+            fill=rx.color_mode_cond("#110F1F", "white"),
-<path d="M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z" fill="white"/>
+        )
-<path d="M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z" fill="white"/>
+
-<path d="M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z" fill="white"/>
+    paths = [
-</svg>"""
+        "M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z",
+        "M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z",
+        "M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z",
+        "M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z",
+        "M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z",
+        "M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z",
+    ]
 
     return rx.center(
         rx.link(
             rx.hstack(
                 "Built with ",
-                rx.color_mode_cond(
+                rx.el.svg(
-                    rx.html(light_mode_logo),
+                    *[logo_path(d) for d in paths],
-                    rx.html(dark_mode_logo),
+                    width="56",
+                    height="12",
+                    viewBox="0 0 56 12",
+                    fill="none",
+                    xmlns="http://www.w3.org/2000/svg",
                 ),
                 text_align="center",
                 align="center",

reflex/components/datadisplay/shiki_code_block.py

@@ -0,0 +1,813 @@
+"""Shiki syntax hghlighter component."""
+
+from __future__ import annotations
+
+import re
+from collections import defaultdict
+from typing import Any, Literal, Optional, Union
+
+from reflex.base import Base
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.core.colors import color
+from reflex.components.core.cond import color_mode_cond
+from reflex.components.el.elements.forms import Button
+from reflex.components.lucide.icon import Icon
+from reflex.components.radix.themes.layout.box import Box
+from reflex.event import call_script, set_clipboard
+from reflex.style import Style
+from reflex.utils.exceptions import VarTypeError
+from reflex.utils.imports import ImportVar
+from reflex.vars.base import LiteralVar, Var
+from reflex.vars.function import FunctionStringVar
+from reflex.vars.sequence import StringVar, string_replace_operation
+
+
+def copy_script() -> Any:
+    """Copy script for the code block and modify the child SVG element.
+
+
+    Returns:
+        Any: The result of calling the script.
+    """
+    return call_script(
+        f"""
+// Event listener for the parent click
+document.addEventListener('click', function(event) {{
+    // Find the closest div (parent element)
+    const parent = event.target.closest('div');
+    // If the parent is found
+    if (parent) {{
+        // Find the SVG element within the parent
+        const svgIcon = parent.querySelector('svg');
+        // If the SVG exists, proceed with the script
+        if (svgIcon) {{
+            const originalPath = svgIcon.innerHTML;
+            const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>';  // Checkmark SVG path
+            function transition(element, scale, opacity) {{
+                element.style.transform = `scale(${{scale}})`;
+                element.style.opacity = opacity;
+            }}
+            // Animate the SVG
+            transition(svgIcon, 0, '0');
+            setTimeout(() => {{
+                svgIcon.innerHTML = checkmarkPath;  // Replace content with checkmark
+                svgIcon.setAttribute('viewBox', '0 0 24 24');  // Adjust viewBox if necessary
+                transition(svgIcon, 1, '1');
+                setTimeout(() => {{
+                    transition(svgIcon, 0, '0');
+                    setTimeout(() => {{
+                        svgIcon.innerHTML = originalPath;  // Restore original SVG content
+                        transition(svgIcon, 1, '1');
+                    }}, 125);
+                }}, 600);
+            }}, 125);
+        }} else {{
+            // console.error('SVG element not found within the parent.');
+        }}
+    }} else {{
+        // console.error('Parent element not found.');
+    }}
+}});
+"""
+    )
+
+
+SHIKIJS_TRANSFORMER_FNS = {
+    "transformerNotationDiff",
+    "transformerNotationHighlight",
+    "transformerNotationWordHighlight",
+    "transformerNotationFocus",
+    "transformerNotationErrorLevel",
+    "transformerRenderWhitespace",
+    "transformerMetaHighlight",
+    "transformerMetaWordHighlight",
+    "transformerCompactLineOptions",
+    # TODO: this transformer when included adds a weird behavior which removes other code lines. Need to figure out why.
+    # "transformerRemoveLineBreak",
+    "transformerRemoveNotationEscape",
+}
+LINE_NUMBER_STYLING = {
+    "code": {
+        "counter-reset": "step",
+        "counter-increment": "step 0",
+        "display": "grid",
+        "line-height": "1.7",
+        "font-size": "0.875em",
+    },
+    "code .line::before": {
+        "content": "counter(step)",
+        "counter-increment": "step",
+        "width": "1rem",
+        "margin-right": "1.5rem",
+        "display": "inline-block",
+        "text-align": "right",
+        "color": "rgba(115,138,148,.4)",
+    },
+}
+BOX_PARENT_STYLING = {
+    "pre": {
+        "margin": "0",
+        "padding": "24px",
+        "background": "transparent",
+        "overflow-x": "auto",
+        "border-radius": "6px",
+    },
+}
+
+THEME_MAPPING = {
+    "light": "one-light",
+    "dark": "one-dark-pro",
+    "a11y-dark": "github-dark",
+}
+LANGUAGE_MAPPING = {"bash": "shellscript"}
+LiteralCodeLanguage = Literal[
+    "abap",
+    "actionscript-3",
+    "ada",
+    "angular-html",
+    "angular-ts",
+    "apache",
+    "apex",
+    "apl",
+    "applescript",
+    "ara",
+    "asciidoc",
+    "asm",
+    "astro",
+    "awk",
+    "ballerina",
+    "bat",
+    "beancount",
+    "berry",
+    "bibtex",
+    "bicep",
+    "blade",
+    "c",
+    "cadence",
+    "clarity",
+    "clojure",
+    "cmake",
+    "cobol",
+    "codeowners",
+    "codeql",
+    "coffee",
+    "common-lisp",
+    "coq",
+    "cpp",
+    "crystal",
+    "csharp",
+    "css",
+    "csv",
+    "cue",
+    "cypher",
+    "d",
+    "dart",
+    "dax",
+    "desktop",
+    "diff",
+    "docker",
+    "dotenv",
+    "dream-maker",
+    "edge",
+    "elixir",
+    "elm",
+    "emacs-lisp",
+    "erb",
+    "erlang",
+    "fennel",
+    "fish",
+    "fluent",
+    "fortran-fixed-form",
+    "fortran-free-form",
+    "fsharp",
+    "gdresource",
+    "gdscript",
+    "gdshader",
+    "genie",
+    "gherkin",
+    "git-commit",
+    "git-rebase",
+    "gleam",
+    "glimmer-js",
+    "glimmer-ts",
+    "glsl",
+    "gnuplot",
+    "go",
+    "graphql",
+    "groovy",
+    "hack",
+    "haml",
+    "handlebars",
+    "haskell",
+    "haxe",
+    "hcl",
+    "hjson",
+    "hlsl",
+    "html",
+    "html-derivative",
+    "http",
+    "hxml",
+    "hy",
+    "imba",
+    "ini",
+    "java",
+    "javascript",
+    "jinja",
+    "jison",
+    "json",
+    "json5",
+    "jsonc",
+    "jsonl",
+    "jsonnet",
+    "jssm",
+    "jsx",
+    "julia",
+    "kotlin",
+    "kusto",
+    "latex",
+    "lean",
+    "less",
+    "liquid",
+    "log",
+    "logo",
+    "lua",
+    "luau",
+    "make",
+    "markdown",
+    "marko",
+    "matlab",
+    "mdc",
+    "mdx",
+    "mermaid",
+    "mojo",
+    "move",
+    "narrat",
+    "nextflow",
+    "nginx",
+    "nim",
+    "nix",
+    "nushell",
+    "objective-c",
+    "objective-cpp",
+    "ocaml",
+    "pascal",
+    "perl",
+    "php",
+    "plsql",
+    "po",
+    "postcss",
+    "powerquery",
+    "powershell",
+    "prisma",
+    "prolog",
+    "proto",
+    "pug",
+    "puppet",
+    "purescript",
+    "python",
+    "qml",
+    "qmldir",
+    "qss",
+    "r",
+    "racket",
+    "raku",
+    "razor",
+    "reg",
+    "regexp",
+    "rel",
+    "riscv",
+    "rst",
+    "ruby",
+    "rust",
+    "sas",
+    "sass",
+    "scala",
+    "scheme",
+    "scss",
+    "shaderlab",
+    "shellscript",
+    "shellsession",
+    "smalltalk",
+    "solidity",
+    "soy",
+    "sparql",
+    "splunk",
+    "sql",
+    "ssh-config",
+    "stata",
+    "stylus",
+    "svelte",
+    "swift",
+    "system-verilog",
+    "systemd",
+    "tasl",
+    "tcl",
+    "templ",
+    "terraform",
+    "tex",
+    "toml",
+    "ts-tags",
+    "tsv",
+    "tsx",
+    "turtle",
+    "twig",
+    "typescript",
+    "typespec",
+    "typst",
+    "v",
+    "vala",
+    "vb",
+    "verilog",
+    "vhdl",
+    "viml",
+    "vue",
+    "vue-html",
+    "vyper",
+    "wasm",
+    "wenyan",
+    "wgsl",
+    "wikitext",
+    "wolfram",
+    "xml",
+    "xsl",
+    "yaml",
+    "zenscript",
+    "zig",
+]
+LiteralCodeTheme = Literal[
+    "andromeeda",
+    "aurora-x",
+    "ayu-dark",
+    "catppuccin-frappe",
+    "catppuccin-latte",
+    "catppuccin-macchiato",
+    "catppuccin-mocha",
+    "dark-plus",
+    "dracula",
+    "dracula-soft",
+    "everforest-dark",
+    "everforest-light",
+    "github-dark",
+    "github-dark-default",
+    "github-dark-dimmed",
+    "github-dark-high-contrast",
+    "github-light",
+    "github-light-default",
+    "github-light-high-contrast",
+    "houston",
+    "laserwave",
+    "light-plus",
+    "material-theme",
+    "material-theme-darker",
+    "material-theme-lighter",
+    "material-theme-ocean",
+    "material-theme-palenight",
+    "min-dark",
+    "min-light",
+    "monokai",
+    "night-owl",
+    "nord",
+    "one-dark-pro",
+    "one-light",
+    "plain",
+    "plastic",
+    "poimandres",
+    "red",
+    "rose-pine",
+    "rose-pine-dawn",
+    "rose-pine-moon",
+    "slack-dark",
+    "slack-ochin",
+    "snazzy-light",
+    "solarized-dark",
+    "solarized-light",
+    "synthwave-84",
+    "tokyo-night",
+    "vesper",
+    "vitesse-black",
+    "vitesse-dark",
+    "vitesse-light",
+]
+
+
+class ShikiBaseTransformers(Base):
+    """Base for creating transformers."""
+
+    library: str
+    fns: list[FunctionStringVar]
+    style: Optional[Style]
+
+
+class ShikiJsTransformer(ShikiBaseTransformers):
+    """A Wrapped shikijs transformer."""
+
+    library: str = "@shikijs/transformers"
+    fns: list[FunctionStringVar] = [
+        FunctionStringVar.create(fn) for fn in SHIKIJS_TRANSFORMER_FNS
+    ]
+    style: Optional[Style] = Style(
+        {
+            "code": {"line-height": "1.7", "font-size": "0.875em", "display": "grid"},
+            # Diffs
+            ".diff": {
+                "margin": "0 -24px",
+                "padding": "0 24px",
+                "width": "calc(100% + 48px)",
+                "display": "inline-block",
+            },
+            ".diff.add": {
+                "background-color": "rgba(16, 185, 129, .14)",
+                "position": "relative",
+            },
+            ".diff.remove": {
+                "background-color": "rgba(244, 63, 94, .14)",
+                "opacity": "0.7",
+                "position": "relative",
+            },
+            ".diff.remove:after": {
+                "position": "absolute",
+                "left": "10px",
+                "content": "'-'",
+                "color": "#b34e52",
+            },
+            ".diff.add:after": {
+                "position": "absolute",
+                "left": "10px",
+                "content": "'+'",
+                "color": "#18794e",
+            },
+            # Highlight
+            ".highlighted": {
+                "background-color": "rgba(142, 150, 170, .14)",
+                "margin": "0 -24px",
+                "padding": "0 24px",
+                "width": "calc(100% + 48px)",
+                "display": "inline-block",
+            },
+            ".highlighted.error": {
+                "background-color": "rgba(244, 63, 94, .14)",
+            },
+            ".highlighted.warning": {
+                "background-color": "rgba(234, 179, 8, .14)",
+            },
+            # Highlighted Word
+            ".highlighted-word": {
+                "background-color": color("gray", 2),
+                "border": f"1px solid {color('gray', 5)}",
+                "padding": "1px 3px",
+                "margin": "-1px -3px",
+                "border-radius": "4px",
+            },
+            # Focused Lines
+            ".has-focused .line:not(.focused)": {
+                "opacity": "0.7",
+                "filter": "blur(0.095rem)",
+                "transition": "filter .35s, opacity .35s",
+            },
+            ".has-focused:hover .line:not(.focused)": {
+                "opacity": "1",
+                "filter": "none",
+            },
+            # White Space
+            # ".tab, .space": {
+            #     "position": "relative",
+            # },
+            # ".tab::before": {
+            #     "content": "'⇥'",
+            #     "position": "absolute",
+            #     "opacity": "0.3",
+            # },
+            # ".space::before": {
+            #     "content": "'·'",
+            #     "position": "absolute",
+            #     "opacity": "0.3",
+            # },
+        }
+    )
+
+    def __init__(self, **kwargs):
+        """Initialize the transformer.
+
+        Args:
+            kwargs: Kwargs to initialize the props.
+
+        """
+        fns = kwargs.pop("fns", None)
+        style = kwargs.pop("style", None)
+        if fns:
+            kwargs["fns"] = [
+                (
+                    FunctionStringVar.create(x)
+                    if not isinstance(x, FunctionStringVar)
+                    else x
+                )
+                for x in fns
+            ]
+
+        if style:
+            kwargs["style"] = Style(style)
+        super().__init__(**kwargs)
+
+
+class ShikiCodeBlock(Component):
+    """A Code block."""
+
+    library = "/components/shiki/code"
+
+    tag = "Code"
+
+    alias = "ShikiCode"
+
+    lib_dependencies: list[str] = ["shiki"]
+
+    # The language to use.
+    language: Var[LiteralCodeLanguage] = Var.create("python")
+
+    # The theme to use ("light" or "dark").
+    theme: Var[LiteralCodeTheme] = Var.create("one-light")
+
+    # The set of themes to use for different modes.
+    themes: Var[Union[list[dict[str, Any]], dict[str, str]]]
+
+    # The code to display.
+    code: Var[str]
+
+    # The transformers to use for the syntax highlighter.
+    transformers: Var[list[Union[ShikiBaseTransformers, dict[str, Any]]]] = Var.create(
+        []
+    )
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        **props,
+    ) -> Component:
+        """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/).
+
+        Args:
+            *children: The children of the component.
+            **props: The props to pass to the component.
+
+        Returns:
+            The code block component.
+        """
+        # Separate props for the code block and the wrapper
+        code_block_props = {}
+        code_wrapper_props = {}
+
+        class_props = cls.get_props()
+
+        # Distribute props between the code block and wrapper
+        for key, value in props.items():
+            (code_block_props if key in class_props else code_wrapper_props)[key] = (
+                value
+            )
+
+        code_block_props["code"] = children[0]
+        code_block = super().create(**code_block_props)
+
+        transformer_styles = {}
+        # Collect styles from transformers and wrapper
+        for transformer in code_block.transformers._var_value:  # type: ignore
+            if isinstance(transformer, ShikiBaseTransformers) and transformer.style:
+                transformer_styles.update(transformer.style)
+        transformer_styles.update(code_wrapper_props.pop("style", {}))
+
+        return Box.create(
+            code_block,
+            *children[1:],
+            style=Style({**transformer_styles, **BOX_PARENT_STYLING}),
+            **code_wrapper_props,
+        )
+
+    def add_imports(self) -> dict[str, list[str]]:
+        """Add the necessary imports.
+        We add all referenced transformer functions as imports from their corresponding
+        libraries.
+
+        Returns:
+            Imports for the component.
+        """
+        imports = defaultdict(list)
+        for transformer in self.transformers._var_value:
+            if isinstance(transformer, ShikiBaseTransformers):
+                imports[transformer.library].extend(
+                    [ImportVar(tag=str(fn)) for fn in transformer.fns]
+                )
+                (
+                    self.lib_dependencies.append(transformer.library)
+                    if transformer.library not in self.lib_dependencies
+                    else None
+                )
+        return imports
+
+    @classmethod
+    def create_transformer(cls, library: str, fns: list[str]) -> ShikiBaseTransformers:
+        """Create a transformer from a third party library.
+
+        Args:
+            library: The name of the library.
+            fns: The str names of the functions/callables to invoke from the library.
+
+        Returns:
+            A transformer for the specified library.
+
+        Raises:
+            ValueError: If a supplied function name is not valid str.
+        """
+        if any(not isinstance(fn_name, str) for fn_name in fns):
+            raise ValueError(
+                f"the function names should be str names of functions in the specified transformer: {library!r}"
+            )
+        return ShikiBaseTransformers(  # type: ignore
+            library=library, fns=[FunctionStringVar.create(fn) for fn in fns]
+        )
+
+    def _render(self, props: dict[str, Any] | None = None):
+        """Renders the component with the given properties, processing transformers if present.
+
+        Args:
+            props: Optional properties to pass to the render function.
+
+        Returns:
+            Rendered component output.
+        """
+        # Ensure props is initialized from class attributes if not provided
+        props = props or {
+            attr.rstrip("_"): getattr(self, attr) for attr in self.get_props()
+        }
+
+        # Extract transformers and apply transformations
+        transformers = props.get("transformers")
+        if transformers is not None:
+            transformed_values = self._process_transformers(transformers._var_value)
+            props["transformers"] = LiteralVar.create(transformed_values)
+
+        return super()._render(props)
+
+    def _process_transformers(self, transformer_list: list) -> list:
+        """Processes a list of transformers, applying transformations where necessary.
+
+        Args:
+            transformer_list: List of transformer objects or values.
+
+        Returns:
+            list: A list of transformed values.
+        """
+        processed = []
+
+        for transformer in transformer_list:
+            if isinstance(transformer, ShikiBaseTransformers):
+                processed.extend(fn.call() for fn in transformer.fns)
+            else:
+                processed.append(transformer)
+
+        return processed
+
+
+class ShikiHighLevelCodeBlock(ShikiCodeBlock):
+    """High level component for the shiki syntax highlighter."""
+
+    # If this is enabled, the default transformers(shikijs transformer) will be used.
+    use_transformers: Var[bool]
+
+    # If this is enabled line numbers will be shown next to the code block.
+    show_line_numbers: Var[bool]
+
+    # Whether a copy button should appear.
+    can_copy: Var[bool] = Var.create(False)
+
+    # copy_button: A custom copy button to override the default one.
+    copy_button: Var[Optional[Union[Component, bool]]] = Var.create(None)
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        **props,
+    ) -> Component:
+        """Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/).
+
+        Args:
+            *children: The children of the component.
+            **props: The props to pass to the component.
+
+        Returns:
+            The code block component.
+        """
+        use_transformers = props.pop("use_transformers", False)
+        show_line_numbers = props.pop("show_line_numbers", False)
+        language = props.pop("language", None)
+        can_copy = props.pop("can_copy", False)
+        copy_button = props.pop("copy_button", None)
+
+        if use_transformers:
+            props["transformers"] = [ShikiJsTransformer()]
+
+        if language is not None:
+            props["language"] = cls._map_languages(language)
+
+        # line numbers are generated via css
+        if show_line_numbers:
+            props["style"] = {**LINE_NUMBER_STYLING, **props.get("style", {})}
+
+        theme = props.pop("theme", None)
+        props["theme"] = props["theme"] = (
+            cls._map_themes(theme)
+            if theme is not None
+            else color_mode_cond(  # Default color scheme responds to global color mode.
+                light="one-light",
+                dark="one-dark-pro",
+            )
+        )
+
+        if can_copy:
+            code = children[0]
+            copy_button = (  # type: ignore
+                copy_button
+                if copy_button is not None
+                else Button.create(
+                    Icon.create(tag="copy", size=16, color=color("gray", 11)),
+                    on_click=[
+                        set_clipboard(cls._strip_transformer_triggers(code)),  # type: ignore
+                        copy_script(),
+                    ],
+                    style=Style(
+                        {
+                            "position": "absolute",
+                            "top": "4px",
+                            "right": "4px",
+                            "background": color("gray", 3),
+                            "border": "1px solid",
+                            "border-color": color("gray", 5),
+                            "border-radius": "6px",
+                            "padding": "5px",
+                            "opacity": "1",
+                            "cursor": "pointer",
+                            "_hover": {
+                                "background": color("gray", 4),
+                            },
+                            "transition": "background 0.250s ease-out",
+                            "&>svg": {
+                                "transition": "transform 0.250s ease-out, opacity 0.250s ease-out",
+                            },
+                            "_active": {
+                                "background": color("gray", 5),
+                            },
+                        }
+                    ),
+                )
+            )
+
+        if copy_button:
+            return ShikiCodeBlock.create(
+                children[0], copy_button, position="relative", **props
+            )
+        else:
+            return ShikiCodeBlock.create(children[0], **props)
+
+    @staticmethod
+    def _map_themes(theme: str) -> str:
+        if isinstance(theme, str) and theme in THEME_MAPPING:
+            return THEME_MAPPING[theme]
+        return theme
+
+    @staticmethod
+    def _map_languages(language: str) -> str:
+        if isinstance(language, str) and language in LANGUAGE_MAPPING:
+            return LANGUAGE_MAPPING[language]
+        return language
+
+    @staticmethod
+    def _strip_transformer_triggers(code: str | StringVar) -> StringVar | str:
+        if not isinstance(code, (StringVar, str)):
+            raise VarTypeError(
+                f"code should be string literal or a StringVar type. Got {type(code)} instead."
+            )
+        regex_pattern = r"[\/#]+ *\[!code.*?\]"
+
+        if isinstance(code, Var):
+            return string_replace_operation(
+                code, StringVar(_js_expr=f"/{regex_pattern}/g", _var_type=str), ""
+            )
+        if isinstance(code, str):
+            return re.sub(regex_pattern, "", code)
+
+
+class TransformerNamespace(ComponentNamespace):
+    """Namespace for the Transformers."""
+
+    shikijs = ShikiJsTransformer
+
+
+class CodeblockNamespace(ComponentNamespace):
+    """Namespace for the CodeBlock component."""
+
+    root = staticmethod(ShikiCodeBlock.create)
+    create_transformer = staticmethod(ShikiCodeBlock.create_transformer)
+    transformers = TransformerNamespace()
+    __call__ = staticmethod(ShikiHighLevelCodeBlock.create)
+
+
+code_block = CodeblockNamespace()

reflex/components/dynamic.py

@@ -0,0 +1,186 @@
+"""Components that are dynamically generated on the backend."""
+
+from typing import TYPE_CHECKING, Union
+
+from reflex import constants
+from reflex.utils import imports
+from reflex.utils.exceptions import DynamicComponentMissingLibrary
+from reflex.utils.format import format_library_name
+from reflex.utils.serializers import serializer
+from reflex.vars import Var, get_unique_variable_name
+from reflex.vars.base import VarData, transform
+
+if TYPE_CHECKING:
+    from reflex.components.component import Component
+
+
+def get_cdn_url(lib: str) -> str:
+    """Get the CDN URL for a library.
+
+    Args:
+        lib: The library to get the CDN URL for.
+
+    Returns:
+        The CDN URL for the library.
+    """
+    return f"https://cdn.jsdelivr.net/npm/{lib}" + "/+esm"
+
+
+bundled_libraries = {"react", "@radix-ui/themes", "@emotion/react", "next/link"}
+
+
+def bundle_library(component: Union["Component", str]):
+    """Bundle a library with the component.
+
+    Args:
+        component: The component to bundle the library with.
+
+    Raises:
+        DynamicComponentMissingLibrary: Raised when a dynamic component is missing a library.
+    """
+    if isinstance(component, str):
+        bundled_libraries.add(component)
+        return
+    if component.library is None:
+        raise DynamicComponentMissingLibrary("Component must have a library to bundle.")
+    bundled_libraries.add(format_library_name(component.library))
+
+
+def load_dynamic_serializer():
+    """Load the serializer for dynamic components."""
+    # Causes a circular import, so we import here.
+    from reflex.components.component import Component
+
+    @serializer
+    def make_component(component: Component) -> str:
+        """Generate the code for a dynamic component.
+
+        Args:
+            component: The component to generate code for.
+
+        Returns:
+            The generated code
+        """
+        # Causes a circular import, so we import here.
+        from reflex.compiler import templates, utils
+
+        rendered_components = {}
+        # Include dynamic imports in the shared component.
+        if dynamic_imports := component._get_all_dynamic_imports():
+            rendered_components.update(
+                {dynamic_import: None for dynamic_import in dynamic_imports}
+            )
+
+        # Include custom code in the shared component.
+        rendered_components.update(
+            {code: None for code in component._get_all_custom_code()},
+        )
+
+        rendered_components[
+            templates.STATEFUL_COMPONENT.render(
+                tag_name="MySSRComponent",
+                memo_trigger_hooks=[],
+                component=component,
+            )
+        ] = None
+
+        libs_in_window = bundled_libraries
+
+        imports = {}
+        for lib, names in component._get_all_imports().items():
+            formatted_lib_name = format_library_name(lib)
+            if (
+                not lib.startswith((".", "/", "$/"))
+                and not lib.startswith("http")
+                and formatted_lib_name not in libs_in_window
+            ):
+                imports[get_cdn_url(lib)] = names
+            else:
+                imports[lib] = names
+
+        module_code_lines = templates.STATEFUL_COMPONENTS.render(
+            imports=utils.compile_imports(imports),
+            memoized_code="\n".join(rendered_components),
+        ).splitlines()[1:]
+
+        # Rewrite imports from `/` to destructure from window
+        for ix, line in enumerate(module_code_lines[:]):
+            if line.startswith("import "):
+                if 'from "$/' in line or 'from "/' in line:
+                    module_code_lines[ix] = (
+                        line.replace("import ", "const ", 1).replace(
+                            " from ", " = window['__reflex'][", 1
+                        )
+                        + "]"
+                    )
+                else:
+                    for lib in libs_in_window:
+                        if f'from "{lib}"' in line:
+                            module_code_lines[ix] = (
+                                line.replace("import ", "const ", 1)
+                                .replace(
+                                    f' from "{lib}"', f" = window.__reflex['{lib}']", 1
+                                )
+                                .replace(" as ", ": ")
+                            )
+            if line.startswith("export function"):
+                module_code_lines[ix] = line.replace(
+                    "export function", "export default function", 1
+                )
+
+        module_code_lines.insert(0, "const React = window.__reflex.react;")
+
+        return "\n".join(
+            [
+                "//__reflex_evaluate",
+                "/** @jsx jsx */",
+                "const { jsx } = window.__reflex['@emotion/react']",
+                *module_code_lines,
+            ]
+        )
+
+    @transform
+    def evaluate_component(js_string: Var[str]) -> Var[Component]:
+        """Evaluate a component.
+
+        Args:
+            js_string: The JavaScript string to evaluate.
+
+        Returns:
+            The evaluated JavaScript string.
+        """
+        unique_var_name = get_unique_variable_name()
+
+        return js_string._replace(
+            _js_expr=unique_var_name,
+            _var_type=Component,
+            merge_var_data=VarData.merge(
+                VarData(
+                    imports={
+                        f"$/{constants.Dirs.STATE_PATH}": [
+                            imports.ImportVar(tag="evalReactComponent"),
+                        ],
+                        "react": [
+                            imports.ImportVar(tag="useState"),
+                            imports.ImportVar(tag="useEffect"),
+                        ],
+                    },
+                    hooks={
+                        f"const [{unique_var_name}, set_{unique_var_name}] = useState(null);": None,
+                        "useEffect(() => {"
+                        "let isMounted = true;"
+                        f"evalReactComponent({str(js_string)})"
+                        ".then((component) => {"
+                        "if (isMounted) {"
+                        f"set_{unique_var_name}(component);"
+                        "}"
+                        "});"
+                        "return () => {"
+                        "isMounted = false;"
+                        "};"
+                        "}"
+                        f", [{str(js_string)}]);": None,
+                    },
+                ),
+            ),
+        )

reflex/components/el/__init__.pyi

@@ -3,6 +3,7 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
+from . import elements as elements
 from .elements.forms import Button as Button
 from .elements.forms import Fieldset as Fieldset
 from .elements.forms import Form as Form

reflex/components/el/element.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,41 +22,21 @@ class Element(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Element":
         """Create the component.

reflex/components/el/elements/base.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.el.element import Element
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -46,41 +46,21 @@ class BaseHTML(Element):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "BaseHTML":
         """Create the component.

reflex/components/el/elements/forms.py

@@ -3,14 +3,20 @@
 from __future__ import annotations
 
 from hashlib import md5
-from typing import Any, Dict, Iterator, Set, Union
+from typing import Any, Dict, Iterator, Set, Tuple, Union
 
 from jinja2 import Environment
 
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
-from reflex.event import EventChain, EventHandler
+from reflex.event import (
+    EventChain,
+    EventHandler,
+    input_event,
+    key_event,
+    prevent_default,
+)
 from reflex.utils.imports import ImportDict
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
@@ -96,6 +102,15 @@ class Fieldset(Element):
     name: Var[Union[str, int, bool]]
 
 
+def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]:
+    """Event handler spec for the on_submit event.
+
+    Returns:
+        The event handler spec.
+    """
+    return (FORM_DATA,)
+
+
 class Form(BaseHTML):
     """Display the form element."""
 
@@ -135,7 +150,7 @@ class Form(BaseHTML):
     handle_submit_unique_name: Var[str]
 
     # Fired when the form is submitted
-    on_submit: EventHandler[lambda e0: [FORM_DATA]]
+    on_submit: EventHandler[on_submit_event_spec]
 
     @classmethod
     def create(cls, *children, **props):
@@ -148,6 +163,9 @@ class Form(BaseHTML):
         Returns:
             The form component.
         """
+        if "on_submit" not in props:
+            props["on_submit"] = prevent_default
+
         if "handle_submit_unique_name" in props:
             return super().create(*children, **props)
 
@@ -169,7 +187,7 @@ class Form(BaseHTML):
         """
         return {
             "react": "useCallback",
-            f"/{Dirs.STATE_PATH}": ["getRefValue", "getRefValues"],
+            f"$/{Dirs.STATE_PATH}": ["getRefValue", "getRefValues"],
         }
 
     def add_hooks(self) -> list[str]:
@@ -342,19 +360,19 @@ class Input(BaseHTML):
     value: Var[Union[str, int, float]]
 
     # Fired when the input value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
     # Fired when the input gains focus
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
+    on_focus: EventHandler[input_event]
 
     # Fired when the input loses focus
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
+    on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
 
 class Label(BaseHTML):
@@ -493,7 +511,7 @@ class Select(BaseHTML):
     size: Var[Union[str, int, bool]]
 
     # Fired when the select value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
 
 AUTO_HEIGHT_JS = """
@@ -583,19 +601,55 @@ class Textarea(BaseHTML):
     wrap: Var[Union[str, int, bool]]
 
     # Fired when the input value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
     # Fired when the input gains focus
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
+    on_focus: EventHandler[input_event]
 
     # Fired when the input loses focus
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
+    on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
+
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a textarea component.
+
+        Args:
+            *children: The children of the textarea.
+            **props: The properties of the textarea.
+
+        Returns:
+            The textarea component.
+
+        Raises:
+            ValueError: when `enter_key_submit` is combined with `on_key_down`.
+        """
+        enter_key_submit = props.get("enter_key_submit")
+        auto_height = props.get("auto_height")
+        custom_attrs = props.setdefault("custom_attrs", {})
+
+        if enter_key_submit is not None:
+            enter_key_submit = Var.create(enter_key_submit)
+            if "on_key_down" in props:
+                raise ValueError(
+                    "Cannot combine `enter_key_submit` with `on_key_down`.",
+                )
+            custom_attrs["on_key_down"] = Var(
+                _js_expr=f"(e) => enterKeySubmitOnKeyDown(e, {str(enter_key_submit)})",
+                _var_data=VarData.merge(enter_key_submit._get_all_var_data()),
+            )
+        if auto_height is not None:
+            auto_height = Var.create(auto_height)
+            custom_attrs["on_input"] = Var(
+                _js_expr=f"(e) => autoHeightOnInput(e, {str(auto_height)})",
+                _var_data=VarData.merge(auto_height._get_all_var_data()),
+            )
+        return super().create(*children, **props)
 
     def _exclude_props(self) -> list[str]:
         return super()._exclude_props() + [
@@ -616,28 +670,6 @@ class Textarea(BaseHTML):
             custom_code.add(ENTER_KEY_SUBMIT_JS)
         return custom_code
 
-    def _render(self) -> Tag:
-        tag = super()._render()
-        if self.enter_key_submit is not None:
-            if "on_key_down" in self.event_triggers:
-                raise ValueError(
-                    "Cannot combine `enter_key_submit` with `on_key_down`.",
-                )
-            tag.add_props(
-                on_key_down=Var(
-                    _js_expr=f"(e) => enterKeySubmitOnKeyDown(e, {str(self.enter_key_submit)})",
-                    _var_data=VarData.merge(self.enter_key_submit._get_all_var_data()),
-                )
-            )
-        if self.auto_height is not None:
-            tag.add_props(
-                on_input=Var(
-                    _js_expr=f"(e) => autoHeightOnInput(e, {str(self.auto_height)})",
-                    _var_data=VarData.merge(self.auto_height._get_all_var_data()),
-                )
-            )
-        return tag
-
 
 button = Button.create
 fieldset = Fieldset.create

reflex/components/el/elements/forms.pyi

@@ -3,12 +3,12 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Tuple, Union, overload
 
 from jinja2 import Environment
 
 from reflex.components.el.element import Element
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportDict
 from reflex.vars.base import Var
@@ -71,41 +71,21 @@ class Button(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Button":
         """Create the component.
@@ -188,41 +168,21 @@ class Datalist(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Datalist":
         """Create the component.
@@ -273,41 +233,21 @@ class Fieldset(Element):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Fieldset":
         """Create the component.
@@ -330,6 +270,8 @@ class Fieldset(Element):
         """
         ...
 
+def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]: ...
+
 class Form(BaseHTML):
     @overload
     @classmethod
@@ -381,42 +323,22 @@ class Form(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_submit: Optional[EventType[Dict[str, Any]]] = None,
-        ] = None,
+        on_unmount: Optional[EventType[[]]] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_submit: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Form":
         """Create a form component.
@@ -541,46 +463,24 @@ class Input(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[str]] = None,
-        on_change: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_change: Optional[EventType[str]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[str]] = None,
-        on_double_click: Optional[
+        on_key_down: Optional[EventType[str]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_key_up: Optional[EventType[str]] = None,
-        ] = None,
+        on_mount: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_key_down: Optional[
+        on_mouse_enter: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_key_up: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_out: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_over: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_up: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_scroll: Optional[EventType[[]]] = None,
-        ] = None,
+        on_unmount: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Input":
         """Create the component.
@@ -687,41 +587,21 @@ class Label(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Label":
         """Create the component.
@@ -795,41 +675,21 @@ class Legend(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Legend":
         """Create the component.
@@ -908,41 +768,21 @@ class Meter(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Meter":
         """Create the component.
@@ -1023,41 +863,21 @@ class Optgroup(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Optgroup":
         """Create the component.
@@ -1135,41 +955,21 @@ class Option(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Option":
         """Create the component.
@@ -1248,41 +1048,21 @@ class Output(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Output":
         """Create the component.
@@ -1360,41 +1140,21 @@ class Progress(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Progress":
         """Create the component.
@@ -1479,42 +1239,22 @@ class Select(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_change: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_change: Optional[EventType[str]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Select":
         """Create the component.
@@ -1616,52 +1356,30 @@ class Textarea(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[str]] = None,
-        on_change: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_change: Optional[EventType[str]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[str]] = None,
-        on_double_click: Optional[
+        on_key_down: Optional[EventType[str]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_key_up: Optional[EventType[str]] = None,
-        ] = None,
+        on_mount: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
-        on_key_down: Optional[
+        on_mouse_enter: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_key_up: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_out: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_over: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_up: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_scroll: Optional[EventType[[]]] = None,
-        ] = None,
+        on_unmount: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Textarea":
-        """Create the component.
+        """Create a textarea component.
 
         Args:
-            *children: The children of the component.
+            *children: The children of the textarea.
             auto_complete: Whether the form control should have autocomplete enabled
             auto_focus: Automatically focuses the textarea when the page loads
             auto_height: Automatically fit the content height to the text (use min-height with this prop)
@@ -1701,10 +1419,13 @@ class Textarea(BaseHTML):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the textarea.
 
         Returns:
-            The component.
+            The textarea component.
+
+        Raises:
+            ValueError: when `enter_key_submit` is combined with `on_key_down`.
         """
         ...
 

reflex/components/el/elements/media.py

@@ -317,6 +317,42 @@ class Svg(BaseHTML):
     xmlns: Var[str]
 
 
+class Text(BaseHTML):
+    """The SVG text component."""
+
+    tag = "text"
+    # The x coordinate of the starting point of the text baseline.
+    x: Var[Union[str, int]]
+    # The y coordinate of the starting point of the text baseline.
+    y: Var[Union[str, int]]
+    # Shifts the text position horizontally from a previous text element.
+    dx: Var[Union[str, int]]
+    # Shifts the text position vertically from a previous text element.
+    dy: Var[Union[str, int]]
+    # Rotates orientation of each individual glyph.
+    rotate: Var[Union[str, int]]
+    # How the text is stretched or compressed to fit the width defined by the text_length attribute.
+    length_adjust: Var[str]
+    # A width that the text should be scaled to fit.
+    text_length: Var[Union[str, int]]
+
+
+class Line(BaseHTML):
+    """The SVG line component."""
+
+    tag = "line"
+    # The x-axis coordinate of the line starting point.
+    x1: Var[Union[str, int]]
+    # The x-axis coordinate of the the line ending point.
+    x2: Var[Union[str, int]]
+    # The y-axis coordinate of the line starting point.
+    y1: Var[Union[str, int]]
+    # The y-axis coordinate of the the line ending point.
+    y2: Var[Union[str, int]]
+    # The total path length, in user units.
+    path_length: Var[int]
+
+
 class Circle(BaseHTML):
     """The SVG circle component."""
 
@@ -331,6 +367,22 @@ class Circle(BaseHTML):
     path_length: Var[int]
 
 
+class Ellipse(BaseHTML):
+    """The SVG ellipse component."""
+
+    tag = "ellipse"
+    # The x position of the center of the ellipse.
+    cx: Var[Union[str, int]]
+    # The y position of the center of the ellipse.
+    cy: Var[Union[str, int]]
+    # The radius of the ellipse on the x axis.
+    rx: Var[Union[str, int]]
+    # The radius of the ellipse on the y axis.
+    ry: Var[Union[str, int]]
+    # The total length for the ellipse's circumference, in user units.
+    path_length: Var[int]
+
+
 class Rect(BaseHTML):
     """The SVG rect component."""
 
@@ -394,6 +446,39 @@ class LinearGradient(BaseHTML):
     y2: Var[Union[str, int, bool]]
 
 
+class RadialGradient(BaseHTML):
+    """Display the radialGradient element."""
+
+    tag = "radialGradient"
+
+    # The x coordinate of the end circle of the radial gradient.
+    cx: Var[Union[str, int, bool]]
+
+    # The y coordinate of the end circle of the radial gradient.
+    cy: Var[Union[str, int, bool]]
+
+    # The radius of the start circle of the radial gradient.
+    fr: Var[Union[str, int, bool]]
+
+    # The x coordinate of the start circle of the radial gradient.
+    fx: Var[Union[str, int, bool]]
+
+    # The y coordinate of the start circle of the radial gradient.
+    fy: Var[Union[str, int, bool]]
+
+    # Units for the gradient.
+    gradient_units: Var[Union[str, bool]]
+
+    # Transform applied to the gradient.
+    gradient_transform: Var[Union[str, bool]]
+
+    # The radius of the end circle of the radial gradient.
+    r: Var[Union[str, int, bool]]
+
+    # Method used to spread the gradient.
+    spread_method: Var[Union[str, bool]]
+
+
 class Stop(BaseHTML):
     """Display the stop element."""
 
@@ -421,12 +506,16 @@ class Path(BaseHTML):
 class SVG(ComponentNamespace):
     """SVG component namespace."""
 
+    text = staticmethod(Text.create)
+    line = staticmethod(Line.create)
     circle = staticmethod(Circle.create)
+    ellipse = staticmethod(Ellipse.create)
     rect = staticmethod(Rect.create)
     polygon = staticmethod(Polygon.create)
     path = staticmethod(Path.create)
     stop = staticmethod(Stop.create)
     linear_gradient = staticmethod(LinearGradient.create)
+    radial_gradient = staticmethod(RadialGradient.create)
     defs = staticmethod(Defs.create)
     __call__ = staticmethod(Svg.create)
 

reflex/components/el/elements/metadata.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.el.element import Element
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -50,41 +50,21 @@ class Base(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Base":
         """Create the component.
@@ -156,41 +136,21 @@ class Head(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Head":
         """Create the component.
@@ -275,41 +235,21 @@ class Link(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Link":
         """Create the component.
@@ -394,41 +334,21 @@ class Meta(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Meta":
         """Create the component.
@@ -480,41 +400,21 @@ class Title(Element):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Title":
         """Create the component.
@@ -547,41 +447,21 @@ class StyleEl(Element):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "StyleEl":
         """Create the component.

reflex/components/el/elements/other.pyi

@@ -3,9 +3,9 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -48,41 +48,21 @@ class Details(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Details":
         """Create the component.
@@ -156,41 +136,21 @@ class Dialog(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Dialog":
         """Create the component.
@@ -263,41 +223,21 @@ class Summary(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Summary":
         """Create the component.
@@ -369,41 +309,21 @@ class Slot(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Slot":
         """Create the component.
@@ -475,41 +395,21 @@ class Template(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Template":
         """Create the component.
@@ -581,41 +481,21 @@ class Math(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Math":
         """Create the component.
@@ -688,41 +568,21 @@ class Html(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Html":
         """Create the component.

reflex/components/el/elements/scripts.pyi

@@ -3,9 +3,9 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -47,41 +47,21 @@ class Canvas(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Canvas":
         """Create the component.
@@ -153,41 +133,21 @@ class Noscript(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Noscript":
         """Create the component.
@@ -272,41 +232,21 @@ class Script(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Script":
         """Create the component.

reflex/components/el/elements/sectioning.pyi

@@ -3,9 +3,9 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -47,41 +47,21 @@ class Body(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Body":
         """Create the component.
@@ -153,41 +133,21 @@ class Address(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Address":
         """Create the component.
@@ -259,41 +219,21 @@ class Article(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Article":
         """Create the component.
@@ -365,41 +305,21 @@ class Aside(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Aside":
         """Create the component.
@@ -471,41 +391,21 @@ class Footer(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Footer":
         """Create the component.
@@ -577,41 +477,21 @@ class Header(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Header":
         """Create the component.
@@ -683,41 +563,21 @@ class H1(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H1":
         """Create the component.
@@ -789,41 +649,21 @@ class H2(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H2":
         """Create the component.
@@ -895,41 +735,21 @@ class H3(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H3":
         """Create the component.
@@ -1001,41 +821,21 @@ class H4(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H4":
         """Create the component.
@@ -1107,41 +907,21 @@ class H5(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H5":
         """Create the component.
@@ -1213,41 +993,21 @@ class H6(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "H6":
         """Create the component.
@@ -1319,41 +1079,21 @@ class Main(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Main":
         """Create the component.
@@ -1425,41 +1165,21 @@ class Nav(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Nav":
         """Create the component.
@@ -1531,41 +1251,21 @@ class Section(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Section":
         """Create the component.

reflex/components/el/elements/tables.pyi

@@ -3,9 +3,9 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -48,41 +48,21 @@ class Caption(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Caption":
         """Create the component.
@@ -157,41 +137,21 @@ class Col(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Col":
         """Create the component.
@@ -267,41 +227,21 @@ class Colgroup(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Colgroup":
         """Create the component.
@@ -377,41 +317,21 @@ class Table(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Table":
         """Create the component.
@@ -486,41 +406,21 @@ class Tbody(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Tbody":
         """Create the component.
@@ -597,41 +497,21 @@ class Td(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Td":
         """Create the component.
@@ -708,41 +588,21 @@ class Tfoot(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Tfoot":
         """Create the component.
@@ -820,41 +680,21 @@ class Th(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Th":
         """Create the component.
@@ -932,41 +772,21 @@ class Thead(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Thead":
         """Create the component.
@@ -1040,41 +860,21 @@ class Tr(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Tr":
         """Create the component.

reflex/components/el/elements/typography.pyi

@@ -3,9 +3,9 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -48,41 +48,21 @@ class Blockquote(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Blockquote":
         """Create the component.
@@ -155,41 +135,21 @@ class Dd(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Dd":
         """Create the component.
@@ -261,41 +221,21 @@ class Div(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Div":
         """Create the component.
@@ -367,41 +307,21 @@ class Dl(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Dl":
         """Create the component.
@@ -473,41 +393,21 @@ class Dt(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Dt":
         """Create the component.
@@ -579,41 +479,21 @@ class Figcaption(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Figcaption":
         """Create the component.
@@ -686,41 +566,21 @@ class Hr(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Hr":
         """Create the component.
@@ -793,41 +653,21 @@ class Li(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Li":
         """Create the component.
@@ -900,41 +740,21 @@ class Menu(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Menu":
         """Create the component.
@@ -1010,41 +830,21 @@ class Ol(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Ol":
         """Create the component.
@@ -1119,41 +919,21 @@ class P(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "P":
         """Create the component.
@@ -1225,41 +1005,21 @@ class Pre(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Pre":
         """Create the component.
@@ -1331,41 +1091,21 @@ class Ul(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Ul":
         """Create the component.
@@ -1439,41 +1179,21 @@ class Ins(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Ins":
         """Create the component.
@@ -1549,41 +1269,21 @@ class Del(BaseHTML):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Del":
         """Create the component.

reflex/components/gridjs/datatable.py

@@ -15,9 +15,9 @@ from reflex.vars.base import LiteralVar, Var, is_computed_var
 class Gridjs(Component):
     """A component that wraps a nivo bar component."""
 
-    library = "gridjs-react@6.0.1"
+    library = "gridjs-react@6.1.1"
 
-    lib_dependencies: List[str] = ["gridjs@6.0.6"]
+    lib_dependencies: List[str] = ["gridjs@6.2.0"]
 
 
 class DataTable(Gridjs):
@@ -118,7 +118,8 @@ class DataTable(Gridjs):
         if types.is_dataframe(type(self.data)):
             # If given a pandas df break up the data and columns
             data = serialize(self.data)
-            assert isinstance(data, dict), "Serialized dataframe should be a dict."
+            if not isinstance(data, dict):
+                raise ValueError("Serialized dataframe should be a dict.")
             self.columns = LiteralVar.create(data["columns"])
             self.data = LiteralVar.create(data["data"])
 

reflex/components/gridjs/datatable.pyi

@@ -3,10 +3,10 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, EventSpec
+from reflex.event import EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportDict
 from reflex.vars.base import Var
@@ -23,41 +23,21 @@ class Gridjs(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "Gridjs":
         """Create the component.
@@ -95,41 +75,21 @@ class DataTable(Gridjs):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_blur: Optional[EventType[[]]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_click: Optional[EventType[[]]] = None,
-        on_context_menu: Optional[
+        on_context_menu: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_double_click: Optional[EventType[[]]] = None,
-        ] = None,
+        on_focus: Optional[EventType[[]]] = None,
-        on_double_click: Optional[
+        on_mount: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_down: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
-        on_mouse_down: Optional[
+        on_mouse_out: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_mouse_over: Optional[EventType[[]]] = None,
-        ] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
-        on_mouse_enter: Optional[
+        on_scroll: Optional[EventType[[]]] = None,
-            Union[EventHandler, EventSpec, list, Callable, Var]
+        on_unmount: Optional[EventType[[]]] = None,
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         **props,
     ) -> "DataTable":
         """Create a datatable component.