docs+feat: improve contributing guide and add clean_examples utility

- Add more detailed instructions for development workflow
- Clarify type stub generation process
- Add troubleshooting section
- Add clean_examples.py utility script
- Improve formatting and organization

Co-Authored-By: Alek Petuskey <alek@reflex.dev>

.github/actions/setup_build_env/action.yml

@@ -6,7 +6,7 @@
 #
 # Exit conditions:
 # - Python of version `python-version` is ready to be invoked as `python`.
-# - Poetry of version `poetry-version` is ready to be invoked as `poetry`.
+# - Poetry of version `poetry-version` is ready ot be invoked as `poetry`.
 # - If `run-poetry-install` is true, deps as defined in `pyproject.toml` will have been installed into the venv at `create-venv-at-path`.
 
 name: 'Setup Reflex build environment'

.github/codeql-config.yml

@@ -1,2 +0,0 @@
-paths-ignore:
-  - "**/tests/**"

.github/workflows/benchmarks.yml

@@ -5,7 +5,7 @@ on:
     types:
       - closed
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
 
 permissions:
   contents: read
@@ -15,21 +15,21 @@ defaults:
     shell: bash
 
 env:
-  PYTHONIOENCODING: "utf8"
+  PYTHONIOENCODING: 'utf8'
   TELEMETRY_ENABLED: false
-  NODE_OPTIONS: "--max_old_space_size=8192"
+  NODE_OPTIONS: '--max_old_space_size=8192'
   PR_TITLE: ${{ github.event.pull_request.title }}
 
 jobs:
   reflex-web:
-    #    if: github.event.pull_request.merged == true
+#    if: github.event.pull_request.merged == true
     strategy:
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
         os: [ubuntu-latest]
-        python-version: ["3.12.8"]
-        node-version: ["18.x"]
+        python-version: ['3.11.4']
+        node-version: ['18.x']
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -70,8 +70,60 @@ jobs:
         env:
           GITHUB_SHA: ${{ github.sha }}
 
-  reflex-dist-size: # This job is used to calculate the size of the Reflex distribution (wheel file)
+  simple-apps-benchmarks: # This app tests the compile times of various compoonents and pages
     if: github.event.pull_request.merged == true
+    env:
+      OUTPUT_FILE: benchmarks.json
+    timeout-minutes: 50
+    strategy:
+      # Prioritize getting more information out of the workflow (even if something fails)
+      fail-fast: false
+      matrix:
+        # Show OS combos first in GUI
+        os: [ubuntu-latest, windows-latest, macos-12]
+        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'
+          # keep only one python version for MacOS
+          - os: macos-latest
+            python-version: '3.9.18'
+          - os: macos-latest
+            python-version: '3.10.13'
+          - os: macos-12
+            python-version: '3.12.0'
+        include:
+          - os: windows-latest
+            python-version: '3.10.11'
+          - os: windows-latest
+            python-version: '3.9.13'
+
+    runs-on: ${{ matrix.os }}
+    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 benchmark tests
+        env:
+          APP_HARNESS_HEADLESS: 1
+          PYTHONUNBUFFERED: 1
+        run: |
+          poetry run pytest -v benchmarks/ --benchmark-json=${{ env.OUTPUT_FILE }} -s
+      - name: Upload benchmark results
+        # Only run if the database creds are available in this context.
+        run:
+          poetry run python benchmarks/benchmark_compile_times.py --os "${{ matrix.os }}"
+          --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
+          --benchmark-json "${{ env.OUTPUT_FILE }}" --branch-name "${{ github.head_ref || github.ref_name }}"
+          --event-type "${{ github.event_name }}" --pr-id "${{ github.event.pull_request.id }}"
+
+  reflex-dist-size: # This job is used to calculate the size of the Reflex distribution (wheel file)
+    if: github.event.pull_request.merged == true  
     timeout-minutes: 30
     strategy:
       # Prioritize getting more information out of the workflow (even if something fails)
@@ -81,7 +133,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup_build_env
         with:
-          python-version: 3.12.8
+          python-version: 3.11.5
           run-poetry-install: true
           create-venv-at-path: .venv
       - name: Build reflex
@@ -91,29 +143,25 @@ jobs:
         # Only run if the database creds are available in this context.
         run:
           poetry run python benchmarks/benchmark_package_size.py --os ubuntu-latest
-          --python-version 3.12.8 --commit-sha "${{ github.sha }}" --pr-id "${{ github.event.pull_request.id }}"
+          --python-version 3.11.5 --commit-sha "${{ github.sha }}" --pr-id "${{ github.event.pull_request.id }}"
           --branch-name "${{ github.head_ref || github.ref_name }}"
           --path ./dist
 
   reflex-venv-size: # This job calculates the total size of Reflex and its dependencies
-    if: github.event.pull_request.merged == true
+    if: github.event.pull_request.merged == true  
     timeout-minutes: 30
     strategy:
       # Prioritize getting more information out of the workflow (even if something fails)
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        python-version: ["3.12.8"]
+        os: [ubuntu-latest, windows-latest, macos-12]
+        python-version: ['3.11.5']
 
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - name: Set up python
-        id: setup-python
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ matrix.python-version }}
+
       - name: Install Poetry
         uses: snok/install-poetry@v1
         with:
@@ -138,6 +186,6 @@ jobs:
         run:
           poetry run python benchmarks/benchmark_package_size.py --os "${{ matrix.os }}"
           --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
-          --pr-id "${{ github.event.pull_request.id }}"
+          --pr-id "${{ github.event.pull_request.id }}" 
           --branch-name "${{ github.head_ref || github.ref_name }}"
-          --path ./.venv
+          --path ./.venv

.github/workflows/check_generated_pyi.yml

@@ -6,16 +6,16 @@ concurrency:
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
     # We don't just trigger on make_pyi.py and the components dir, because
     # there are other things that can change the generator output
     # e.g. black version, reflex.Component, reflex.Var.
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
   pull_request:
-    branches: ["main"]
+    branches: ['main']
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
 
 jobs:
   check-generated-pyi-components:
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup_build_env
         with:
-          python-version: "3.12.8"
+          python-version: '3.11.5'
           run-poetry-install: true
           create-venv-at-path: .venv
       - run: |

.github/workflows/check_node_latest.yml

@@ -1,40 +1,43 @@
 name: integration-node-latest
 
 on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
 
 env:
-  TELEMETRY_ENABLED: false
-  REFLEX_USE_SYSTEM_NODE: true
+    TELEMETRY_ENABLED: false
+    REFLEX_USE_SYSTEM_NODE: true
 
 jobs:
-  check_latest_node:
-    runs-on: ubuntu-22.04
-    strategy:
-      matrix:
-        python-version: ["3.12.8"]
-        split_index: [1, 2]
-        node-version: ["node"]
-      fail-fast: false
+    check_latest_node:
+        runs-on: ubuntu-22.04
+        strategy:
+            matrix:
+                python-version: ['3.12']
+                split_index: [1, 2]
+                node-version: ['node']
+            fail-fast: false
+
+        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 pytest-split
+                poetry run playwright install --with-deps
+            - run: |
+                poetry run pytest tests/test_node_version.py
+                poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}
+  
+
 
-    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 pytest-split
-          poetry run playwright install --with-deps
-      - run: |
-          poetry run pytest tests/test_node_version.py
-          poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}

.github/workflows/check_outdated_dependencies.yml

@@ -1,86 +1,88 @@
 name: check-outdated-dependencies
 
 on:
-  push: # This will trigger the action when a pull request is opened or updated.
+  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.
+      - '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
+    - name: Checkout code
+      uses: actions/checkout@v3
 
-      - uses: ./.github/actions/setup_build_env
-        with:
-          python-version: '3.10'
-          run-poetry-install: true
-          create-venv-at-path: .venv
+    - 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"
+    - name: Check outdated backend dependencies
+      run: |
+        outdated=$(poetry show -oT)
+        echo "Outdated:"
+        echo "$outdated"
 
-          filtered_outdated=$(echo "$outdated" | grep -vE 'pyright|ruff' || true)
+        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
 
-          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.16"
-          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 $(grep -ivE "reflex " requirements.txt)
-      - name: Install additional dependencies for DB access
-        run: poetry run uv pip install psycopg
-      - 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"
+    - 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|ag-grid' || true)
-          no_extra=$(echo "$filtered_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-' || true)
+        # 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
+        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/codeql.yml

@@ -1,103 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL Advanced"
-
-on:
-  push:
-    branches: ["main"]
-  pull_request:
-    branches: ["main"]
-  schedule:
-    - cron: "36 7 * * 4"
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - language: javascript-typescript
-            build-mode: none
-          - language: python
-            build-mode: none
-          - language: actions
-            build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      # Add any setup steps before running the `github/codeql-action/init` action.
-      # This includes steps like installing compilers or runtimes (`actions/setup-node`
-      # or others). This is typically only required for manual builds.
-      # - name: Setup runtime (example)
-      #   uses: actions/setup-example@v1
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
-        with:
-          languages: ${{ matrix.language }}
-          config-file: .github/codeql-config.yml
-          build-mode: ${{ matrix.build-mode }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-
-          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # If the analyze step fails for one of the languages you are analyzing with
-      # "We were unable to automatically build your code", modify the matrix above
-      # to set the build mode to "manual" for that language. Then modify this step
-      # to build your code.
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-      - if: matrix.build-mode == 'manual'
-        shell: bash
-        run: |
-          echo 'If you are using a "manual" build mode for one or more of the' \
-            'languages you are analyzing, replace this with the commands to build' \
-            'your code, for example:'
-          echo '  make bootstrap'
-          echo '  make release'
-          exit 1
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
-        with:
-          category: "/language:${{matrix.language}}"

.github/workflows/integration_app_harness.yml

@@ -23,8 +23,8 @@ jobs:
     strategy:
       matrix:
         state_manager: ["redis", "memory"]
-        python-version: ["3.11.11", "3.12.8", "3.13.1"]
         split_index: [1, 2]
+        python-version: ["3.11.5", "3.12.0"]
       fail-fast: false
     runs-on: ubuntu-22.04
     services:
@@ -47,10 +47,17 @@ jobs:
           python-version: ${{ matrix.python-version }}
           run-poetry-install: true
           create-venv-at-path: .venv
-      - run: poetry run uv pip install pyvirtualdisplay pillow pytest-split pytest-retry
+      - run: poetry run uv pip install pyvirtualdisplay pillow pytest-split
       - name: Run app harness tests
         env:
+          SCREENSHOT_DIR: /tmp/screenshots/${{ matrix.state_manager }}/${{ matrix.python-version }}/${{ matrix.split_index }}
           REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
         run: |
-          poetry run playwright install chromium
-          poetry run pytest tests/integration --retries 3 --maxfail=5 --splits 2 --group ${{matrix.split_index}}
+          poetry run playwright install --with-deps
+          poetry run pytest tests/integration --splits 2 --group ${{matrix.split_index}}
+      - uses: actions/upload-artifact@v4
+        name: Upload failed test screenshots
+        if: always()
+        with:
+          name: failed_test_screenshots
+          path: /tmp/screenshots

.github/workflows/integration_tests.yml

@@ -2,13 +2,13 @@ name: integration-tests
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
   pull_request:
-    branches: ["main"]
+    branches: ['main']
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.id }}
@@ -27,13 +27,13 @@ env:
   # TODO: can we fix windows encoding natively within reflex? Bug above can hit real users too (less common, but possible)
   # - Catch encoding errors when printing logs
   # - Best effort print lines that contain illegal chars (map to some default char, etc.)
-  PYTHONIOENCODING: "utf8"
+  PYTHONIOENCODING: 'utf8'
   TELEMETRY_ENABLED: false
-  NODE_OPTIONS: "--max_old_space_size=8192"
+  NODE_OPTIONS: '--max_old_space_size=8192'
   PR_TITLE: ${{ github.event.pull_request.title }}
 
 jobs:
-  example-counter-and-nba-proxy:
+  example-counter:
     env:
       OUTPUT_FILE: import_benchmark.json
     timeout-minutes: 30
@@ -43,17 +43,17 @@ jobs:
       matrix:
         # Show OS combos first in GUI
         os: [ubuntu-latest, windows-latest]
-        python-version: ['3.10.16', '3.11.11', '3.12.8', '3.13.1']
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         exclude:
           - os: windows-latest
-            python-version: "3.11.11"
+            python-version: '3.10.13'
           - os: windows-latest
-            python-version: '3.10.16'
+            python-version: '3.9.18'
         include:
-          - os: windows-latest
-            python-version: "3.11.9"
           - os: windows-latest
             python-version: '3.10.11'
+          - os: windows-latest
+            python-version: '3.9.13'
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -73,7 +73,7 @@ jobs:
         run: |
           poetry run uv pip install -r requirements.txt
       - name: Install additional dependencies for DB access
-        run: poetry run uv pip install psycopg
+        run: poetry run uv pip install psycopg2-binary
       - name: Check export --backend-only before init for counter example
         working-directory: ./reflex-examples/counter
         run: |
@@ -94,25 +94,27 @@ jobs:
           # Check that npm is home
           npm -v
           poetry run bash scripts/integration.sh ./reflex-examples/counter dev
-      - name: Install requirements for nba proxy example
-        working-directory: ./reflex-examples/nba-proxy
-        run: |
-          poetry run uv pip install -r requirements.txt
-      - name: Install additional dependencies for DB access
-        run: poetry run uv pip install psycopg
-      - name: Check export --backend-only before init for nba-proxy example
-        working-directory: ./reflex-examples/nba-proxy
-        run: |
-          poetry run reflex export --backend-only
-      - name: Init Website for nba-proxy example
-        working-directory: ./reflex-examples/nba-proxy
-        run: |
-          poetry run reflex init --loglevel debug
-      - name: Run Website and Check for errors
-        run: |
-          # Check that npm is home
-          npm -v
-          poetry run bash scripts/integration.sh ./reflex-examples/nba-proxy dev
+      - 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 }}"
+          --path ./reflex-examples/counter/.web
+          --app-name "counter"
+      - name: Install hyperfine
+        run: cargo install hyperfine
+      - name: Benchmark imports
+        working-directory: ./reflex-examples/counter
+        run: hyperfine --warmup 3 "export POETRY_VIRTUALENVS_PATH=../../.venv; poetry run python counter/counter.py" --show-output --export-json "${{ env.OUTPUT_FILE }}" --shell bash
+      - name: Upload Benchmarks
+        run:
+          poetry run python benchmarks/benchmark_imports.py --os "${{ matrix.os }}"
+          --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
+          --benchmark-json "./reflex-examples/counter/${{ env.OUTPUT_FILE }}"
+          --branch-name "${{ github.head_ref || github.ref_name }}" --pr-id "${{ github.event.pull_request.id }}"
+          --app-name "counter"
+
 
 
   reflex-web:
@@ -121,10 +123,10 @@ jobs:
       matrix:
         # Show OS combos first in GUI
         os: [ubuntu-latest]
-        python-version: ["3.11.11", "3.12.8"]
+        python-version: ['3.10.11', '3.11.4']
 
     env:
-      REFLEX_WEB_WINDOWS_OVERRIDE: "1"
+      REFLEX_WEB_WINDOWS_OVERRIDE: '1'
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
@@ -145,7 +147,7 @@ jobs:
         working-directory: ./reflex-web
         run: poetry run uv pip install $(grep -ivE "reflex " requirements.txt)
       - name: Install additional dependencies for DB access
-        run: poetry run uv pip install psycopg
+        run: poetry run uv pip install psycopg2-binary
       - name: Init Website for reflex-web
         working-directory: ./reflex-web
         run: poetry run reflex init
@@ -154,6 +156,12 @@ jobs:
           # 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
 
   rx-shout-from-template:
     strategy:
@@ -163,7 +171,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup_build_env
         with:
-          python-version: "3.11.11"
+          python-version: '3.11.4'
           run-poetry-install: true
           create-venv-at-path: .venv
       - name: Create app directory
@@ -182,15 +190,15 @@ jobs:
           # Check that npm is home
           npm -v
           poetry run bash scripts/integration.sh ./rx-shout-from-template prod
+  
 
   reflex-web-macos:
     if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     strategy:
       fail-fast: false
       matrix:
-        # Note: py311 version chosen due to available arm64 darwin builds.
-        python-version: ["3.11.9", "3.12.8"]
-    runs-on: macos-latest
+        python-version: ['3.11.5', '3.12.0']
+    runs-on: macos-12
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup_build_env
@@ -208,7 +216,7 @@ jobs:
         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 psycopg
+        run: poetry run uv pip install psycopg2-binary
       - name: Init Website for reflex-web
         working-directory: ./reflex-web
         run: poetry run reflex init
@@ -217,3 +225,10 @@ jobs:
           # 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/performance.yml

@@ -1,34 +0,0 @@
-name: performance-tests
-
-on:
-  push:
-    branches:
-      - "main" # or "master"
-    paths-ignore:
-      - "**/*.md"
-  pull_request:
-  workflow_dispatch:
-
-env:
-  TELEMETRY_ENABLED: false
-  NODE_OPTIONS: "--max_old_space_size=8192"
-  PR_TITLE: ${{ github.event.pull_request.title }}
-  APP_HARNESS_HEADLESS: 1
-  PYTHONUNBUFFERED: 1
-
-jobs:
-  benchmarks:
-    name: Run benchmarks
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup_build_env
-        with:
-          python-version: 3.12.8
-          run-poetry-install: true
-          create-venv-at-path: .venv
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@v3
-        with:
-          token: ${{ secrets.CODSPEED_TOKEN }}
-          run: poetry run pytest tests/benchmarks --codspeed

.github/workflows/pre-commit.yml

@@ -6,12 +6,12 @@ concurrency:
 
 on:
   pull_request:
-    branches: ["main"]
+    branches: ['main']
   push:
     # Note even though this job is called "pre-commit" and runs "pre-commit", this job will run
     # also POST-commit on main also!  In case there are mishandled merge conflicts / bad auto-resolves
     # when merging into main branch.
-    branches: ["main"]
+    branches: ['main']
 
 jobs:
   pre-commit:
@@ -23,7 +23,7 @@ jobs:
         with:
           # running vs. one version of Python is OK
           # i.e. ruff, black, etc.
-          python-version: 3.12.8
+          python-version: 3.11.5
           run-poetry-install: true
           create-venv-at-path: .venv
       # TODO pre-commit related stuff can be cached too (not a bottleneck yet)

.github/workflows/unit_tests.yml

@@ -6,13 +6,13 @@ concurrency:
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
   pull_request:
-    branches: ["main"]
+    branches: ['main']
     paths-ignore:
-      - "**/*.md"
+      - '**/*.md'
 
 permissions:
   contents: read
@@ -28,18 +28,18 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest]
-        python-version: ["3.10.16", "3.11.11", "3.12.8", "3.13.1"]
+        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.11.11"
+            python-version: '3.10.13'
           - os: windows-latest
-            python-version: "3.10.16"
+            python-version: '3.9.18'
         include:
           - os: windows-latest
-            python-version: "3.11.9"
+            python-version: '3.10.11'
           - os: windows-latest
-            python-version: "3.10.11"
+            python-version: '3.9.13'
     runs-on: ${{ matrix.os }}
 
     # Service containers to run with `runner-job`
@@ -88,9 +88,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # Note: py310, py311 versions chosen due to available arm64 darwin builds.
-        python-version: ["3.10.11", "3.11.9", "3.12.8", "3.13.1"]
-    runs-on: macos-latest
+        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
@@ -106,4 +105,4 @@ jobs:
         run: |
           export PYTHONUNBUFFERED=1
           poetry run uv pip install "pydantic~=1.10"
-          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=

.gitignore

@@ -4,7 +4,6 @@ assets/external/*
 dist/*
 examples/
 .web
-.states
 .idea
 .vscode
 .coverage
@@ -15,4 +14,3 @@ requirements.txt
 .pyi_generator_last_run
 .pyi_generator_diff
 reflex.db
-.codspeed

.pre-commit-config.yaml

@@ -1,9 +1,8 @@
 fail_fast: true
 
 repos:
-
   - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: v0.9.6
+    rev: v0.8.2
     hooks:
       - id: ruff-format
         args: [reflex, tests]
@@ -11,33 +10,26 @@ repos:
         args: ["--fix", "--exit-non-zero-on-fix"]
         exclude: '^integration/benchmarks/'
 
-  - repo: https://github.com/codespell-project/codespell
-    rev: v2.3.0
-    hooks:
-      - id: codespell
-        args: ["reflex"]
-
-  # Run pyi check before pyright because pyright can fail if pyi files are wrong.
   - repo: local
     hooks:
       - id: update-pyi-files
         name: update-pyi-files
         always_run: true
         language: system
-        require_serial: true
+        entry: poetry run python scripts/make_pyi.py
         description: 'Update pyi files as needed'
-        entry: python3 scripts/make_pyi.py
 
-  - repo: https://github.com/RobertCraigie/pyright-python
-    rev: v1.1.393
+  - repo: local
     hooks:
       - id: pyright
-        args: [reflex, tests]
+        name: pyright
+        entry: poetry run pyright
         language: system
+        types: [python]
+        args: [reflex, tests]
 
   - repo: https://github.com/terrencepreilly/darglint
     rev: v1.8.1
     hooks:
       - id: darglint
         exclude: '^reflex/reflex.py'
-

CODE_OF_CONDUCT.md

@@ -5,7 +5,7 @@
 We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socioeconomic status,
+identity and expression, level of experience, education, socio-economic status,
 nationality, personal appearance, race, religion, or sexual identity
 and orientation.
 

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.10
+- 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:**
@@ -27,25 +27,32 @@ cd reflex
 poetry install
 ```
 
-**4. Now create an examples folder so you can test the local Python build in this repository.**
+**4. Create an examples directory within the repository:**
 
-- We have the `examples` folder in the `.gitignore`, so your changes in `reflex/examples` won't be reflected in your commit.
+The examples directory is used for testing your local changes. It's included in `.gitignore` so your test apps won't be committed.
 
 ``` bash
 mkdir examples
 cd examples
 ```
 
-**5. Init and Run**
+**5. Init and Run:**
+
+Initialize a new Reflex app and run it in development mode:
 
 ``` bash
-poetry run reflex init
-poetry run reflex run
+poetry run reflex init  # Select option 0 for blank template
+poetry run reflex run  # Add --frontend-only for faster frontend-only development
 ```
 
-All the changes you make to the repository will be reflected in your running app.
+The development server will start and your app will be available at http://localhost:3000. The server will automatically reload when you make changes to your code.
 
-- We have the examples folder in the .gitignore, so your changes in reflex/examples won't be reflected in your commit.
+**Note:** In development mode, the server may occasionally need to be restarted when making significant changes. You can use Ctrl+C to stop the server and run it again.
+
+To clean up your examples directory and start fresh, you can use the provided cleanup script:
+```bash
+poetry run python scripts/clean_examples.py
+```
 
 ## 🧪 Testing and QA
 
@@ -63,47 +70,80 @@ Within the 'test' directory of Reflex you can add to a test file already there o
 
 Once you solve a current issue or improvement to Reflex, you can make a PR, and we will review the changes.
 
-Before submitting, a pull request, ensure the following steps are taken and test passing.
+Before submitting a pull request, ensure the following steps are taken and tests are passing:
 
-In your `reflex` directory run make sure all the unit tests are still passing using the following command.
+1. Run unit tests and coverage checks:
+``` bash
+poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
+```
 This will fail if code coverage is below 70%.
 
-``` bash
-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.
-
+2. Run code quality checks:
 ``` bash
 poetry run ruff check .
 poetry run pyright reflex tests
 find reflex tests -name "*.py" -not -path reflex/reflex.py | xargs poetry run darglint
 ```
 
-Finally, run `ruff` to format your code.
-
+3. Format your code:
 ``` bash
 poetry run ruff format .
 ```
 
+4. Install and run pre-commit hooks:
 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.10.
+Note that pre-commit will only be installed when you use a Python version >= 3.9.
 
 ``` bash
 pre-commit install
 ```
 
-That's it you can now submit your PR. Thanks for contributing to Reflex!
+You can also run the pre-commit checks manually:
+```bash
+pre-commit run --all-files
+```
+
+## Type Stub Generation
+
+When adding new components or modifying existing ones, you need to regenerate the type stub files (.pyi). This ensures proper type checking and IDE support.
+
+To generate type stubs:
+```bash
+poetry run python scripts/make_pyi.py
+```
+
+After running this command:
+1. Check `git status` to see if any .pyi files were modified
+2. If changes were made, include them in your commit
+3. If no changes were made, your types are up to date
+
+## Editing Templates
+
+To edit the templates in Reflex you can do so in two ways:
+
+1. Change to the basic `blank` template can be done in the `reflex/.templates/apps/blank` directory.
+
+2. Other templates can be edited in their own repository. For example the `sidebar` template can be found in the [`reflex-sidebar`](https://github.com/reflex-dev/sidebar-template) repository.
 
 
-## Editing Templates 
+## Troubleshooting
 
-To edit the templates in Reflex you can do so in two way.
+Common issues and their solutions:
 
-Change to the basic `blank` template can be done in the `reflex/.templates/apps/blank` directory.
+1. **Development Server Issues**
+   - If the development server becomes unresponsive, stop it with Ctrl+C and restart
+   - For frontend-only changes, use `--frontend-only` flag for faster development
+   - Clear the examples directory using `scripts/clean_examples.py` if you encounter unexplained issues
 
-Others templates can be edited in their own repository. For example the `sidebar` template can be found in the [`reflex-sidebar`](https://github.com/reflex-dev/sidebar-template) repository.
+2. **Pre-commit Hook Failures**
+   - Run `pre-commit run --all-files` to identify specific issues
+   - Ensure you've formatted code with `ruff format .` before committing
+   - Check that type stubs are up to date with `make_pyi.py`
 
+3. **Type Checking Errors**
+   - Verify your changes haven't broken type definitions
+   - Regenerate type stubs if you modified components
+   - Check the error messages from pyright for specific type issues
 
 ## Other Notes
 
@@ -112,5 +152,5 @@ For some pull requests when adding new components you will have to generate a py
 (Please check in with the team before adding a new component to Reflex we are cautious about adding new components to Reflex's core.)
 
 ``` bash
-poetry run python scripts/make_pyi.py 
-```
+poetry run python scripts/make_pyi.py
+```

README.md

@@ -34,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.10+):
+Open a terminal and run (Requires Python 3.9+):
 
 ```bash
 pip install reflex
@@ -249,7 +249,7 @@ We welcome contributions of any size! Below are some good ways to get started in
 -   **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
 -   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
 
-We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 
 ## All Thanks To Our Contributors:

benchmarks/benchmark_compile_times.py

@@ -5,7 +5,6 @@ from __future__ import annotations
 import argparse
 import json
 import os
-from pathlib import Path
 
 from utils import send_data_to_posthog
 
@@ -19,7 +18,7 @@ def extract_stats_from_json(json_file: str) -> list[dict]:
     Returns:
         list[dict]: The stats for each test.
     """
-    with Path(json_file).open() as file:
+    with open(json_file, "r") as file:
         json_data = json.load(file)
 
     # Load the JSON data if it is a string, otherwise assume it's already a dictionary

benchmarks/benchmark_imports.py

@@ -5,7 +5,6 @@ from __future__ import annotations
 import argparse
 import json
 import os
-from pathlib import Path
 
 from utils import send_data_to_posthog
 
@@ -19,7 +18,7 @@ def extract_stats_from_json(json_file: str) -> dict:
     Returns:
         dict: The stats for each test.
     """
-    with Path(json_file).open() as file:
+    with open(json_file, "r") as file:
         json_data = json.load(file)
 
     # Load the JSON data if it is a string, otherwise assume it's already a dictionary

benchmarks/test_benchmark_compile_components.py

@@ -0,0 +1,376 @@
+"""Benchmark tests for apps with varying component numbers."""
+
+from __future__ import annotations
+
+import functools
+import time
+from typing import Generator
+
+import pytest
+
+from benchmarks import WINDOWS_SKIP_REASON
+from reflex import constants
+from reflex.compiler import utils
+from reflex.testing import AppHarness, chdir
+from reflex.utils import build
+from reflex.utils.prerequisites import get_web_dir
+
+web_pages = get_web_dir() / constants.Dirs.PAGES
+
+
+def render_component(num: int):
+    """Generate a number of components based on num.
+
+    Args:
+        num: number of components to produce.
+
+    Returns:
+        The rendered number of components.
+    """
+    import reflex as rx
+
+    return [
+        rx.fragment(
+            rx.box(
+                rx.accordion.root(
+                    rx.accordion.item(
+                        header="Full Ingredients",  # type: ignore
+                        content="Yes. It's built with accessibility in mind.",  # type: ignore
+                        font_size="3em",
+                    ),
+                    rx.accordion.item(
+                        header="Applications",  # type: ignore
+                        content="Yes. It's unstyled by default, giving you freedom over the look and feel.",  # type: ignore
+                    ),
+                    collapsible=True,
+                    variant="ghost",
+                    width="25rem",
+                ),
+                padding_top="20px",
+            ),
+            rx.box(
+                rx.drawer.root(
+                    rx.drawer.trigger(
+                        rx.button("Open Drawer with snap points"), as_child=True
+                    ),
+                    rx.drawer.overlay(),
+                    rx.drawer.portal(
+                        rx.drawer.content(
+                            rx.flex(
+                                rx.drawer.title("Drawer Content"),
+                                rx.drawer.description("Drawer description"),
+                                rx.drawer.close(
+                                    rx.button("Close Button"),
+                                    as_child=True,
+                                ),
+                                direction="column",
+                                margin="5em",
+                                align_items="center",
+                            ),
+                            top="auto",
+                            height="100%",
+                            flex_direction="column",
+                            background_color="var(--green-3)",
+                        ),
+                    ),
+                    snap_points=["148px", "355px", 1],
+                ),
+            ),
+            rx.box(
+                rx.callout(
+                    "You will need admin privileges to install and access this application.",
+                    icon="info",
+                    size="3",
+                ),
+            ),
+            rx.box(
+                rx.table.root(
+                    rx.table.header(
+                        rx.table.row(
+                            rx.table.column_header_cell("Full name"),
+                            rx.table.column_header_cell("Email"),
+                            rx.table.column_header_cell("Group"),
+                        ),
+                    ),
+                    rx.table.body(
+                        rx.table.row(
+                            rx.table.row_header_cell("Danilo Sousa"),
+                            rx.table.cell("danilo@example.com"),
+                            rx.table.cell("Developer"),
+                        ),
+                        rx.table.row(
+                            rx.table.row_header_cell("Zahra Ambessa"),
+                            rx.table.cell("zahra@example.com"),
+                            rx.table.cell("Admin"),
+                        ),
+                        rx.table.row(
+                            rx.table.row_header_cell("Jasper Eriksson"),
+                            rx.table.cell("jasper@example.com"),
+                            rx.table.cell("Developer"),
+                        ),
+                    ),
+                )
+            ),
+        )
+    ] * num
+
+
+def AppWithTenComponentsOnePage():
+    """A reflex app with roughly 10 components on one page."""
+    import reflex as rx
+
+    def index() -> rx.Component:
+        return rx.center(rx.vstack(*render_component(1)))
+
+    app = rx.App(state=rx.State)
+    app.add_page(index)
+
+
+def AppWithHundredComponentOnePage():
+    """A reflex app with roughly 100 components on one page."""
+    import reflex as rx
+
+    def index() -> rx.Component:
+        return rx.center(rx.vstack(*render_component(100)))
+
+    app = rx.App(state=rx.State)
+    app.add_page(index)
+
+
+def AppWithThousandComponentsOnePage():
+    """A reflex app with roughly 1000 components on one page."""
+    import reflex as rx
+
+    def index() -> rx.Component:
+        return rx.center(rx.vstack(*render_component(1000)))
+
+    app = rx.App(state=rx.State)
+    app.add_page(index)
+
+
+@pytest.fixture(scope="session")
+def app_with_10_components(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Start Blank Template app at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app10components")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithTenComponentsOnePage,
+            render_component=render_component,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.fixture(scope="session")
+def app_with_100_components(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Start Blank Template app at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app100components")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithHundredComponentOnePage,
+            render_component=render_component,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.fixture(scope="session")
+def app_with_1000_components(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 1000 components at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        an AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app1000components")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithThousandComponentsOnePage,
+            render_component=render_component,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10_compile_time_cold(benchmark, app_with_10_components):
+    """Test the compile time on a cold start for an app with roughly 10 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_10_components: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_10_components.app_path):
+            utils.empty_dir(web_pages, ["_app.js"])
+            app_with_10_components._initialize_app()
+            build.setup_frontend(app_with_10_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_10_components.app_path):
+            app_with_10_components.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=10)
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10_compile_time_warm(benchmark, app_with_10_components):
+    """Test the compile time on a warm start for an app with roughly 10 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_10_components: The app harness.
+    """
+    with chdir(app_with_10_components.app_path):
+        app_with_10_components._initialize_app()
+        build.setup_frontend(app_with_10_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_10_components.app_path):
+            app_with_10_components.app_instance._compile()
+
+    benchmark(benchmark_fn)
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_100_compile_time_cold(benchmark, app_with_100_components):
+    """Test the compile time on a cold start for an app with roughly 100 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_100_components: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_100_components.app_path):
+            utils.empty_dir(web_pages, ["_app.js"])
+            app_with_100_components._initialize_app()
+            build.setup_frontend(app_with_100_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_100_components.app_path):
+            app_with_100_components.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_100_compile_time_warm(benchmark, app_with_100_components):
+    """Test the compile time on a warm start for an app with roughly 100 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_100_components: The app harness.
+    """
+    with chdir(app_with_100_components.app_path):
+        app_with_100_components._initialize_app()
+        build.setup_frontend(app_with_100_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_100_components.app_path):
+            app_with_100_components.app_instance._compile()
+
+    benchmark(benchmark_fn)
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1000_compile_time_cold(benchmark, app_with_1000_components):
+    """Test the compile time on a cold start for an app with roughly 1000 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_1000_components: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_1000_components.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_1000_components._initialize_app()
+            build.setup_frontend(app_with_1000_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_1000_components.app_path):
+            app_with_1000_components.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying component numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1000_compile_time_warm(benchmark, app_with_1000_components):
+    """Test the compile time on a warm start for an app with roughly 1000 components.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_1000_components: The app harness.
+    """
+    with chdir(app_with_1000_components.app_path):
+        app_with_1000_components._initialize_app()
+        build.setup_frontend(app_with_1000_components.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_1000_components.app_path):
+            app_with_1000_components.app_instance._compile()
+
+    benchmark(benchmark_fn)

benchmarks/test_benchmark_compile_pages.py

@@ -0,0 +1,579 @@
+"""Benchmark tests for apps with varying page numbers."""
+
+from __future__ import annotations
+
+import functools
+import time
+from typing import Generator
+
+import pytest
+
+from benchmarks import WINDOWS_SKIP_REASON
+from reflex import constants
+from reflex.compiler import utils
+from reflex.testing import AppHarness, chdir
+from reflex.utils import build
+from reflex.utils.prerequisites import get_web_dir
+
+web_pages = get_web_dir() / constants.Dirs.PAGES
+
+
+def render_multiple_pages(app, num: int):
+    """Add multiple pages based on num.
+
+    Args:
+        app: The App object.
+        num: number of pages to render.
+
+    """
+    from typing import Tuple
+
+    from rxconfig import config  # type: ignore
+
+    import reflex as rx
+
+    docs_url = "https://reflex.dev/docs/getting-started/introduction/"
+    filename = f"{config.app_name}/{config.app_name}.py"
+    college = [
+        "Stanford University",
+        "Arizona",
+        "Arizona state",
+        "Baylor",
+        "Boston College",
+        "Boston University",
+    ]
+
+    class State(rx.State):
+        """The app state."""
+
+        position: str
+        college: str
+        age: Tuple[int, int] = (18, 50)
+        salary: Tuple[int, int] = (0, 25000000)
+
+    comp1 = rx.center(
+        rx.theme_panel(),
+        rx.vstack(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text("Get started by editing ", rx.code(filename)),
+            rx.button(
+                "Check out our docs!",
+                on_click=lambda: rx.redirect(docs_url),
+                size="4",
+            ),
+            align="center",
+            spacing="7",
+            font_size="2em",
+        ),
+        height="100vh",
+    )
+
+    comp2 = rx.vstack(
+        rx.hstack(
+            rx.vstack(
+                rx.select(
+                    ["C", "PF", "SF", "PG", "SG"],
+                    placeholder="Select a position. (All)",
+                    on_change=State.set_position,  # type: ignore
+                    size="3",
+                ),
+                rx.select(
+                    college,
+                    placeholder="Select a college. (All)",
+                    on_change=State.set_college,  # type: ignore
+                    size="3",
+                ),
+            ),
+            rx.vstack(
+                rx.vstack(
+                    rx.hstack(
+                        rx.badge("Min Age: ", State.age[0]),
+                        rx.divider(orientation="vertical"),
+                        rx.badge("Max Age: ", State.age[1]),
+                    ),
+                    rx.slider(
+                        default_value=[18, 50],
+                        min=18,
+                        max=50,
+                        on_value_commit=State.set_age,  # type: ignore
+                    ),
+                    align_items="left",
+                    width="100%",
+                ),
+                rx.vstack(
+                    rx.hstack(
+                        rx.badge("Min Sal: ", State.salary[0] // 1000000, "M"),
+                        rx.divider(orientation="vertical"),
+                        rx.badge("Max Sal: ", State.salary[1] // 1000000, "M"),
+                    ),
+                    rx.slider(
+                        default_value=[0, 25000000],
+                        min=0,
+                        max=25000000,
+                        on_value_commit=State.set_salary,  # type: ignore
+                    ),
+                    align_items="left",
+                    width="100%",
+                ),
+            ),
+            spacing="4",
+        ),
+        width="100%",
+    )
+
+    for i in range(1, num + 1):
+        if i % 2 == 1:
+            app.add_page(comp1, route=f"page{i}")
+        else:
+            app.add_page(comp2, route=f"page{i}")
+
+
+def AppWithOnePage():
+    """A reflex app with one page."""
+    from rxconfig import config  # type: ignore
+
+    import reflex as rx
+
+    docs_url = "https://reflex.dev/docs/getting-started/introduction/"
+    filename = f"{config.app_name}/{config.app_name}.py"
+
+    class State(rx.State):
+        """The app state."""
+
+        pass
+
+    def index() -> rx.Component:
+        return rx.center(
+            rx.input(
+                id="token", value=State.router.session.client_token, is_read_only=True
+            ),
+            rx.vstack(
+                rx.heading("Welcome to Reflex!", size="9"),
+                rx.text("Get started by editing ", rx.code(filename)),
+                rx.button(
+                    "Check out our docs!",
+                    on_click=lambda: rx.redirect(docs_url),
+                    size="4",
+                ),
+                align="center",
+                spacing="7",
+                font_size="2em",
+            ),
+            height="100vh",
+        )
+
+    app = rx.App(state=rx.State)
+    app.add_page(index)
+
+
+def AppWithTenPages():
+    """A reflex app with 10 pages."""
+    import reflex as rx
+
+    app = rx.App(state=rx.State)
+    render_multiple_pages(app, 10)
+
+
+def AppWithHundredPages():
+    """A reflex app with 100 pages."""
+    import reflex as rx
+
+    app = rx.App(state=rx.State)
+    render_multiple_pages(app, 100)
+
+
+def AppWithThousandPages():
+    """A reflex app with Thousand pages."""
+    import reflex as rx
+
+    app = rx.App(state=rx.State)
+    render_multiple_pages(app, 1000)
+
+
+def AppWithTenThousandPages():
+    """A reflex app with ten thousand pages."""
+    import reflex as rx
+
+    app = rx.App(state=rx.State)
+    render_multiple_pages(app, 10000)
+
+
+@pytest.fixture(scope="session")
+def app_with_one_page(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 10000 pages at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        an AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app1")
+
+    yield AppHarness.create(root=root, app_source=AppWithOnePage)
+
+
+@pytest.fixture(scope="session")
+def app_with_ten_pages(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 10 pages at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        an AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app10")
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithTenPages,
+            render_comp=render_multiple_pages,  # type: ignore
+        ),
+    )
+
+
+@pytest.fixture(scope="session")
+def app_with_hundred_pages(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 100 pages at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        an AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app100")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithHundredPages,
+            render_comp=render_multiple_pages,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.fixture(scope="session")
+def app_with_thousand_pages(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 1000 pages at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        an AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app1000")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithThousandPages,
+            render_comp=render_multiple_pages,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.fixture(scope="session")
+def app_with_ten_thousand_pages(
+    tmp_path_factory,
+) -> Generator[AppHarness, None, None]:
+    """Create an app with 10000 pages at tmp_path via AppHarness.
+
+    Args:
+        tmp_path_factory: pytest tmp_path_factory fixture
+
+    Yields:
+        running AppHarness instance
+    """
+    root = tmp_path_factory.mktemp("app10000")
+
+    yield AppHarness.create(
+        root=root,
+        app_source=functools.partial(
+            AppWithTenThousandPages,
+            render_comp=render_multiple_pages,  # type: ignore
+        ),
+    )  # type: ignore
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1_compile_time_cold(benchmark, app_with_one_page):
+    """Test the compile time on a cold start for an app with 1 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_one_page: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_one_page.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_one_page._initialize_app()
+            build.setup_frontend(app_with_one_page.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_one_page.app_path):
+            app_with_one_page.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+    app_with_one_page._reload_state_module()
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1_compile_time_warm(benchmark, app_with_one_page):
+    """Test the compile time on a warm start for an app with 1 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_one_page: The app harness.
+    """
+    with chdir(app_with_one_page.app_path):
+        app_with_one_page._initialize_app()
+        build.setup_frontend(app_with_one_page.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_one_page.app_path):
+            app_with_one_page.app_instance._compile()
+
+    benchmark(benchmark_fn)
+    app_with_one_page._reload_state_module()
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10_compile_time_cold(benchmark, app_with_ten_pages):
+    """Test the compile time on a cold start for an app with 10 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_ten_pages: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_ten_pages.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_ten_pages._initialize_app()
+            build.setup_frontend(app_with_ten_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_ten_pages.app_path):
+            app_with_ten_pages.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+    app_with_ten_pages._reload_state_module()
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10_compile_time_warm(benchmark, app_with_ten_pages):
+    """Test the compile time on a warm start for an app with 10 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_ten_pages: The app harness.
+    """
+    with chdir(app_with_ten_pages.app_path):
+        app_with_ten_pages._initialize_app()
+        build.setup_frontend(app_with_ten_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_ten_pages.app_path):
+            app_with_ten_pages.app_instance._compile()
+
+    benchmark(benchmark_fn)
+    app_with_ten_pages._reload_state_module()
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_100_compile_time_cold(benchmark, app_with_hundred_pages):
+    """Test the compile time on a cold start for an app with 100 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_hundred_pages: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_hundred_pages.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_hundred_pages._initialize_app()
+            build.setup_frontend(app_with_hundred_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_hundred_pages.app_path):
+            app_with_hundred_pages.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+    app_with_hundred_pages._reload_state_module()
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_100_compile_time_warm(benchmark, app_with_hundred_pages):
+    """Test the compile time on a warm start for an app with 100 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_hundred_pages: The app harness.
+    """
+    with chdir(app_with_hundred_pages.app_path):
+        app_with_hundred_pages._initialize_app()
+        build.setup_frontend(app_with_hundred_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_hundred_pages.app_path):
+            app_with_hundred_pages.app_instance._compile()
+
+    benchmark(benchmark_fn)
+    app_with_hundred_pages._reload_state_module()
+
+
+@pytest.mark.skipif(constants.IS_WINDOWS, reason=WINDOWS_SKIP_REASON)
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1000_compile_time_cold(benchmark, app_with_thousand_pages):
+    """Test the compile time on a cold start for an app with 1000 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_thousand_pages: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_thousand_pages.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_thousand_pages._initialize_app()
+            build.setup_frontend(app_with_thousand_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_thousand_pages.app_path):
+            app_with_thousand_pages.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+    app_with_thousand_pages._reload_state_module()
+
+
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_1000_compile_time_warm(benchmark, app_with_thousand_pages):
+    """Test the compile time on a warm start for an app with 1000 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_thousand_pages: The app harness.
+    """
+    with chdir(app_with_thousand_pages.app_path):
+        app_with_thousand_pages._initialize_app()
+        build.setup_frontend(app_with_thousand_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_thousand_pages.app_path):
+            app_with_thousand_pages.app_instance._compile()
+
+    benchmark(benchmark_fn)
+    app_with_thousand_pages._reload_state_module()
+
+
+@pytest.mark.skip
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10000_compile_time_cold(benchmark, app_with_ten_thousand_pages):
+    """Test the compile time on a cold start for an app with 10000 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_ten_thousand_pages: The app harness.
+    """
+
+    def setup():
+        with chdir(app_with_ten_thousand_pages.app_path):
+            utils.empty_dir(web_pages, keep_files=["_app.js"])
+            app_with_ten_thousand_pages._initialize_app()
+            build.setup_frontend(app_with_ten_thousand_pages.app_path)
+
+    def benchmark_fn():
+        with chdir(app_with_ten_thousand_pages.app_path):
+            app_with_ten_thousand_pages.app_instance._compile()
+
+    benchmark.pedantic(benchmark_fn, setup=setup, rounds=5)
+    app_with_ten_thousand_pages._reload_state_module()
+
+
+@pytest.mark.skip
+@pytest.mark.benchmark(
+    group="Compile time of varying page numbers",
+    min_rounds=5,
+    timer=time.perf_counter,
+    disable_gc=True,
+    warmup=False,
+)
+def test_app_10000_compile_time_warm(benchmark, app_with_ten_thousand_pages):
+    """Test the compile time on a warm start for an app with 10000 page.
+
+    Args:
+        benchmark: The benchmark fixture.
+        app_with_ten_thousand_pages: The app harness.
+    """
+
+    def benchmark_fn():
+        with chdir(app_with_ten_thousand_pages.app_path):
+            app_with_ten_thousand_pages.app_instance._compile()
+
+    benchmark(benchmark_fn)
+    app_with_ten_thousand_pages._reload_state_module()

docker-example/production-app-platform/Dockerfile

@@ -27,7 +27,7 @@ FROM python:3.13 as init
 
 ARG uv=/root/.local/bin/uv
 
-# Install `uv` for faster package bootstrapping
+# Install `uv` for faster package boostrapping
 ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
 RUN /install.sh && rm /install.sh
 
@@ -52,7 +52,7 @@ FROM python:3.13-slim
 WORKDIR /app
 RUN adduser --disabled-password --home /app reflex
 COPY --chown=reflex --from=init /app /app
-# Install libpq-dev for psycopg (skip if not using postgres).
+# Install libpq-dev for psycopg2 (skip if not using postgres).
 RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
 USER reflex
 ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1

docker-example/production-compose/Dockerfile

@@ -6,7 +6,7 @@ FROM python:3.13 as init
 
 ARG uv=/root/.local/bin/uv
 
-# Install `uv` for faster package bootstrapping
+# Install `uv` for faster package boostrapping
 ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
 RUN /install.sh && rm /install.sh
 
@@ -39,7 +39,7 @@ FROM python:3.13-slim
 WORKDIR /app
 RUN adduser --disabled-password --home /app reflex
 COPY --chown=reflex --from=init /app /app
-# Install libpq-dev for psycopg (skip if not using postgres).
+# Install libpq-dev for psycopg2 (skip if not using postgres).
 RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
 USER reflex
 ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1

docker-example/production-compose/compose.prod.yaml

@@ -15,7 +15,7 @@ services:
 
   app:
     environment:
-      DB_URL: postgresql+psycopg://postgres:secret@db/postgres
+      DB_URL: postgresql+psycopg2://postgres:secret@db/postgres
       REDIS_URL: redis://redis:6379
     depends_on:
       - db

docs/de/README.md

@@ -34,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.10+):
+Ö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.10+):
+Abra un terminal y ejecute (Requiere Python 3.9+):
 
 ```bash
 pip install reflex
@@ -239,7 +239,7 @@ Reflex se lanzó en diciembre de 2022 con el nombre de Pynecone.
 -   **Discusiones de GitHub**: Una excelente manera de hablar sobre las características que deseas agregar o las cosas que te resultan confusas o necesitan aclaración.
 -   **GitHub Issues**: Las incidencias son una forma excelente de informar de errores. Además, puedes intentar resolver un problema existente y enviar un PR.
 
-Buscamos colaboradores, sin importar su nivel o experiencia. Para contribuir consulta [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+Buscamos colaboradores, sin importar su nivel o experiencia. Para contribuir consulta [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 ## Licencia
 

docs/in/README.md

@@ -35,7 +35,7 @@ Reflex के अंदर के कामकाज को जानने क
 
 ## ⚙️ इंस्टॉलेशन (Installation)
 
-एक टर्मिनल खोलें और चलाएं (Python 3.10+ की आवश्यकता है):
+एक टर्मिनल खोलें और चलाएं (Python 3.9+ की आवश्यकता है):
 
 ```bash
 pip install reflex
@@ -239,7 +239,7 @@ Reflex में हर सप्ताह नए रिलीज़ और फ
 - **GitHub Discussions** (गिटहब चर्चाएँ): उन सुविधाओं के बारे में बात करने का एक शानदार तरीका जिन्हें आप जोड़ना चाहते हैं या ऐसी चीज़ें जो भ्रमित करने वाली हैं/स्पष्टीकरण की आवश्यकता है।
 - **GitHub Issues** (गिटहब समस्याएं): ये [बग](https://github.com/reflex-dev/reflex/issues) की रिपोर्ट करने का एक शानदार तरीका है। इसके अतिरिक्त, आप किसी मौजूदा समस्या को हल करने का प्रयास कर सकते हैं और एक पीआर सबमिट कर सकते हैं।
 
-हम सक्रिय रूप से योगदानकर्ताओं की तलाश कर रहे हैं, चाहे आपका कौशल स्तर या अनुभव कुछ भी हो।योगदान करने के लिए [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) देखें।
+हम सक्रिय रूप से योगदानकर्ताओं की तलाश कर रहे हैं, चाहे आपका कौशल स्तर या अनुभव कुछ भी हो।योगदान करने के लिए [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) देखें।
 
 ## हमारे सभी योगदानकर्ताओं का धन्यवाद:
 

docs/it/README.md

@@ -22,7 +22,7 @@
 
 ## ⚙️ Installazione
 
-Apri un terminale ed esegui (Richiede Python 3.10+):
+Apri un terminale ed esegui (Richiede Python 3.9+):
 
 ```bash
 pip install reflex

docs/ja/README.md

@@ -37,7 +37,7 @@ Reflex がどのように動作しているかを知るには、[アーキテク
 
 ## ⚙️ インストール
 
-ターミナルを開いて以下のコマンドを実行してください。（Python 3.10 以上が必要です。）:
+ターミナルを開いて以下のコマンドを実行してください。（Python 3.9 以上が必要です。）:
 
 ```bash
 pip install reflex
@@ -222,7 +222,7 @@ app.add_page(index, title="DALL-E")
 
 <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; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
+📑 [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>
 
@@ -242,7 +242,7 @@ Reflex は毎週、新しいリリースや機能追加を行っています！
 - **GitHub Discussions**: GitHub Discussions では、追加したい機能や、複雑で解明が必要な事柄についての議論に適している場所です。
 - **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)はバグの報告に適している場所です。また、課題を解決した PR のサブミットにチャレンジしていただくことも、可能です。
 
-CONTスキルや経験に関わらず、私たちはコントリビュータを積極的に探しています。コントリビュートするために、[CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)をご覧ください。
+スキルや経験に関わらず、私たちはコントリビュータを積極的に探しています。コントリビュートするために、[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)をご覧ください。
 
 ## 私たちのコントリビュータに感謝！:
 

docs/kr/README.md

@@ -20,7 +20,7 @@
 ---
 ## ⚙️ 설치
 
-터미널을 열고 실행하세요. (Python 3.10+ 필요):
+터미널을 열고 실행하세요. (Python 3.9+ 필요):
 
 ```bash
 pip install reflex

docs/pe/README.md

@@ -34,7 +34,7 @@
 
 ## ⚙️ Installation - نصب و راه اندازی
 
-یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.10+):
+یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.9+):
 
 ```bash
 pip install reflex
@@ -249,7 +249,7 @@ app.add_page(index, title="DALL-E")
 -   **بحث های GitHub**: راهی عالی برای صحبت در مورد ویژگی هایی که می خواهید اضافه کنید یا چیزهایی که گیج کننده هستند/نیاز به توضیح دارند.
 -   **قسمت مشکلات GitHub**: [قسمت مشکلات](https://github.com/reflex-dev/reflex/issues) یک راه عالی برای گزارش اشکال هستند. علاوه بر این، می توانید یک مشکل موجود را حل کنید و یک PR(pull request) ارسال کنید.
 
-ما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت  [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) را بررسی کنید.
+ما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت  [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) را بررسی کنید.
 
 
 ## All Thanks To Our Contributors - با تشکر از همکاران ما:

docs/pt/pt_br/README.md

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

docs/tr/README.md

@@ -24,7 +24,7 @@
 
 ## ⚙️ Kurulum
 
-Bir terminal açın ve çalıştırın (Python 3.10+ gerekir):
+Bir terminal açın ve çalıştırın (Python 3.9+ gerekir):
 
 ```bash
 pip install reflex
@@ -200,7 +200,7 @@ Daha fazla sayfa ekleyerek çok sayfalı bir uygulama oluşturabilirsiniz.
 
 <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; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [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)  &nbsp;   
 
 </div>
 
@@ -229,7 +229,7 @@ Her boyuttaki katkıları memnuniyetle karşılıyoruz! Aşağıda Reflex toplul
 - **GitHub Discussions**: Eklemek istediğiniz özellikler veya kafa karıştırıcı, açıklığa kavuşturulması gereken şeyler hakkında konuşmanın harika bir yolu.
 - **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) hataları bildirmenin mükemmel bir yoludur. Ayrıca mevcut bir sorunu deneyip çözebilir ve bir PR (Pull Requests) gönderebilirsiniz.
 
-Beceri düzeyiniz veya deneyiminiz ne olursa olsun aktif olarak katkıda bulunacak kişiler arıyoruz. Katkı sağlamak için katkı sağlama rehberimize bakabilirsiniz: [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+Beceri düzeyiniz veya deneyiminiz ne olursa olsun aktif olarak katkıda bulunacak kişiler arıyoruz. Katkı sağlamak için katkı sağlama rehberimize bakabilirsiniz: [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 ## Hepsi Katkıda Bulunanlar Sayesinde:
 

docs/vi/README.md

@@ -34,7 +34,7 @@ Các tính năng chính:
 
 ## ⚙️ Cài đặt
 
-Mở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.10+):
+Mở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.9+):
 
 ```bash
 pip install reflex
@@ -232,7 +232,7 @@ Bạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.
 
 <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; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [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>
 
@@ -254,7 +254,7 @@ Chúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là
 -   **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 
-[CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 
 ## Xin cảm ơn các Contributors:

docs/zh/zh_cn/README.md

@@ -34,7 +34,7 @@ Reflex 是一个使用纯Python构建全栈web应用的库。
 
 ## ⚙️ 安装
 
-打开一个终端并且运行(要求Python3.10+):
+打开一个终端并且运行(要求Python3.9+):
 
 ```bash
 pip install reflex

docs/zh/zh_tw/README.md

@@ -36,7 +36,7 @@ Reflex 是一個可以用純 Python 構建全端網頁應用程式的函式庫
 
 ## ⚙️ 安裝
 
-開啟一個終端機並且執行 (需要 Python 3.10+):
+開啟一個終端機並且執行 (需要 Python 3.9+):
 
 ```bash
 pip install reflex
@@ -229,7 +229,7 @@ app.add_page(index, title="DALL-E")
 
 <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; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [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>
 
@@ -251,7 +251,7 @@ Reflex 每周都有新功能和釋出新版本! 確保你按下 :star: 和 :eyes
 -   **GitHub Discussions**: 這是一個討論您想新增的功能或對於一些困惑/需要澄清事項的好方法。
 -   **GitHub Issues**: 在 [Issues](https://github.com/reflex-dev/reflex/issues) 頁面報告錯誤是一個絕佳的方式。此外，您也可以嘗試解決現有 Issue 並提交 PR。
 
-我們積極尋找貢獻者，不論您的技能水平或經驗如何。要貢獻，請查看 [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+我們積極尋找貢獻者，不論您的技能水平或經驗如何。要貢獻，請查看 [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 
 ## 感謝所有貢獻者:

pyproject.toml

@@ -1,44 +1,55 @@
 [tool.poetry]
 name = "reflex"
-version = "0.7.2dev1"
+version = "0.6.7dev1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
-  "Nikhil Rao <nikhil@reflex.dev>",
-  "Alek Petuskey <alek@reflex.dev>",
-  "Masen Furer <masen@reflex.dev>",
-  "Elijah Ahianyo <elijah@reflex.dev>",
-  "Thomas Brandého <thomas@reflex.dev>",
+    "Nikhil Rao <nikhil@reflex.dev>",
+    "Alek Petuskey <alek@reflex.dev>",
+    "Masen Furer <masen@reflex.dev>",
+    "Elijah Ahianyo <elijah@reflex.dev>",
+    "Thomas Brandého <thomas@reflex.dev>",
 ]
 readme = "README.md"
 homepage = "https://reflex.dev"
 repository = "https://github.com/reflex-dev/reflex"
 documentation = "https://reflex.dev/docs/getting-started/introduction"
-keywords = ["web", "framework"]
-classifiers = ["Development Status :: 4 - Beta"]
+keywords = [
+    "web",
+    "framework",
+]
+classifiers = [
+    "Development Status :: 4 - Beta",
+]
+packages = [
+    {include = "reflex"}
+]
 
 [tool.poetry.dependencies]
-python = ">=3.10, <4.0"
+python = "^3.9"
 fastapi = ">=0.96.0,!=0.111.0,!=0.111.1"
 gunicorn = ">=20.1.0,<24.0"
 jinja2 = ">=3.1.2,<4.0"
 psutil = ">=5.9.4,<7.0"
-pydantic = ">=1.10.21,<3.0"
+pydantic = ">=1.10.2,<3.0"
 python-multipart = ">=0.0.5,<0.1"
 python-socketio = ">=5.7.0,<6.0"
 redis = ">=4.3.5,<6.0"
 rich = ">=13.0.0,<14.0"
 sqlmodel = ">=0.0.14,<0.1"
-typer = ">=0.15.1,<1.0"
+typer = ">=0.4.2,<1.0"
 uvicorn = ">=0.20.0"
 starlette-admin = ">=0.11.0,<1.0"
 alembic = ">=1.11.1,<2.0"
 platformdirs = ">=3.10.0,<5.0"
-distro = { version = ">=1.8.0,<2.0", platform = "linux" }
+distro = {version = ">=1.8.0,<2.0", platform = "linux"}
 python-engineio = "!=4.6.0"
-wrapt = ">=1.17.0,<2.0"
+wrapt = [
+    {version = ">=1.14.0,<2.0", python = ">=3.11"},
+    {version = ">=1.11.0,<2.0", python = "<3.11"},
+]
 packaging = ">=23.1,<25.0"
-reflex-hosting-cli = ">=0.1.29"
+reflex-hosting-cli = ">=0.1.29,<2.0"
 charset-normalizer = ">=3.3.2,<4.0"
 wheel = ">=0.42.0,<1.0"
 build = ">=1.0.3,<2.0"
@@ -47,18 +58,19 @@ httpx = ">=0.25.1,<1.0"
 twine = ">=4.0.0,<7.0"
 tomlkit = ">=0.12.4,<1.0"
 lazy_loader = ">=0.4"
+reflex-chakra = ">=0.6.0"
 typing_extensions = ">=4.6.0"
 
 [tool.poetry.group.dev.dependencies]
 pytest = ">=7.1.2,<9.0"
 pytest-mock = ">=3.10.0,<4.0"
-pyright = ">=1.1.394, <1.2"
+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.24.0"
 pytest-cov = ">=4.0.0,<7.0"
-ruff = "0.9.6"
+ruff = "0.8.2"
 pandas = ">=2.1.1,<3.0"
 pillow = ">=10.0.0,<12.0"
 plotly = ">=5.13.0,<6.0"
@@ -68,7 +80,6 @@ selenium = ">=4.11.0,<5.0"
 pytest-benchmark = ">=4.0.0,<6.0"
 playwright = ">=1.46.0"
 pytest-playwright = ">=0.5.1"
-pytest-codspeed = "^3.1.2"
 
 [tool.poetry.scripts]
 reflex = "reflex.reflex:cli"
@@ -78,60 +89,21 @@ requires = ["poetry-core>=1.5.1"]
 build-backend = "poetry.core.masonry.api"
 
 [tool.pyright]
-reportIncompatibleMethodOverride = false
 
 [tool.ruff]
-target-version = "py310"
-output-format = "concise"
+target-version = "py39"
 lint.isort.split-on-trailing-comma = false
-lint.select = [
-  "ANN001",
-  "B",
-  "C4",
-  "D",
-  "E",
-  "ERA",
-  "F",
-  "FURB",
-  "I",
-  "N",
-  "PERF",
-  "PGH",
-  "PTH",
-  "RUF",
-  "SIM",
-  "T",
-  "TRY",
-  "W",
-]
-lint.ignore = [
-  "B008",
-  "D205",
-  "E501",
-  "F403",
-  "SIM115",
-  "RUF006",
-  "RUF008",
-  "RUF012",
-  "TRY0",
-]
+lint.select = ["B", "D", "E", "F", "I", "SIM", "W", "RUF", "FURB"]
+lint.ignore = ["B008", "D205", "E501", "F403", "SIM115", "RUF006", "RUF012"]
 lint.pydocstyle.convention = "google"
 
 [tool.ruff.lint.per-file-ignores]
 "__init__.py" = ["F401"]
-"tests/*.py" = ["ANN001", "D100", "D103", "D104", "B018", "PERF", "T", "N"]
-"benchmarks/*.py" = ["ANN001", "D100", "D103", "D104", "B018", "PERF", "T", "N"]
+"tests/*.py" = ["D100", "D103", "D104", "B018"]
 "reflex/.templates/*.py" = ["D100", "D103", "D104"]
-"*.pyi" = ["D301", "D415", "D417", "D418", "E742", "N", "PGH"]
-"pyi_generator.py" = ["N802"]
-"reflex/constants/*.py" = ["N"]
+"*.pyi" = ["D301", "D415", "D417", "D418", "E742"]
 "*/blank.py" = ["I001"]
 
 [tool.pytest.ini_options]
-filterwarnings = "ignore:fields may not start with an underscore:RuntimeWarning"
 asyncio_default_fixture_loop_scope = "function"
 asyncio_mode = "auto"
-
-[tool.codespell]
-skip = "docs/*,*.html,examples/*, *.pyi, poetry.lock"
-ignore-words-list = "te, TreeE"

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

@@ -8,7 +8,7 @@ version = "0.0.1"
 description = "Reflex custom component {{ module_name }}"
 readme = "README.md"
 license = { text = "Apache-2.0" }
-requires-python = ">=3.10"
+requires-python = ">=3.9"
 authors = [{ name = "", email = "YOUREMAIL@domain.com" }]
 keywords = ["reflex","reflex-custom-components"]
 

reflex/.templates/jinja/web/package.json.jinja2

@@ -15,13 +15,7 @@
   "devDependencies": {
     {% for package, version in dev_dependencies.items() %}
     "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
-
-    {% endfor %}
-  },
-  "overrides": {
-    {% for package, version in overrides.items() %}
-    "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
-
+    
     {% endfor %}
   }
 }

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

@@ -1,5 +1,4 @@
 {% extends "web/pages/base_page.js.jinja2" %}
-{% from "web/pages/macros.js.jinja2" import renderHooks %}
 
 {% block early_imports %}
 import '$/styles/styles.css'
@@ -19,7 +18,10 @@ import * as {{library_alias}} from "{{library_path}}";
 
 {% block export %}
 function AppWrap({children}) {
-  {{ renderHooks(hooks) }}
+
+  {% for hook in hooks %}
+  {{ hook }}
+  {% endfor %}
 
   return (
     {{utils.render(render, indent_width=0)}}
@@ -38,13 +40,13 @@ export default function MyApp({ Component, pageProps }) {
   }, []);
   return (
     <ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
-      <StateProvider>
-        <EventLoopProvider>
-            <AppWrap>
-              <Component {...pageProps} />
-            </AppWrap>
-        </EventLoopProvider>
-      </StateProvider>
+      <AppWrap>
+        <StateProvider>
+          <EventLoopProvider>
+            <Component {...pageProps} />
+          </EventLoopProvider>
+        </StateProvider>
+      </AppWrap>
     </ThemeProvider>
   );
 }

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

@@ -1,5 +1,5 @@
 {% extends "web/pages/base_page.js.jinja2" %}
-{% from "web/pages/macros.js.jinja2" import renderHooks %}
+
 {% block export %}
 {% for component in components %}
 
@@ -8,8 +8,9 @@
 {% endfor %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
-    {{ renderHooks(component.hooks) }}
-
+    {% for hook in component.hooks %}
+    {{ hook }}
+    {% endfor %}
     return(
         {{utils.render(component.render)}}
       )

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

@@ -1,5 +1,4 @@
 {% extends "web/pages/base_page.js.jinja2" %}
-{% from "web/pages/macros.js.jinja2" import renderHooks %}
 
 {% block declaration %}
 {% for custom_code in custom_codes %}
@@ -9,7 +8,9 @@
 
 {% block export %}
 export default function Component() {
-    {{ renderHooks(hooks)}}
+  {% for hook in hooks %}
+  {{ hook }}
+  {% endfor %}
 
   return (
     {{utils.render(render, indent_width=0)}}

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

@@ -1,38 +0,0 @@
-{% macro renderHooks(hooks) %}
-  {% set sorted_hooks = sort_hooks(hooks) %}
-
-  {# Render the grouped hooks #}
-   {% for hook, _ in sorted_hooks[const.hook_position.INTERNAL] %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, _ in sorted_hooks[const.hook_position.PRE_TRIGGER] %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, _ in sorted_hooks[const.hook_position.POST_TRIGGER] %}
-  {{ hook }}
-  {% endfor %}
-{% endmacro %}
-
-{% macro renderHooksWithMemo(hooks, memo)%}
-  {% set sorted_hooks = sort_hooks(hooks) %}
-
-  {# Render the grouped hooks #}
-  {% for hook, _ in sorted_hooks[const.hook_position.INTERNAL] %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, _ in sorted_hooks[const.hook_position.PRE_TRIGGER] %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook in memo %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, _ in sorted_hooks[const.hook_position.POST_TRIGGER] %}
-  {{ hook }}
-  {% endfor %}
-
-{% endmacro %}

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

@@ -1,10 +1,18 @@
 {% import 'web/pages/utils.js.jinja2' as utils %}
-{% from 'web/pages/macros.js.jinja2' import renderHooksWithMemo %}
-{% set all_hooks = component._get_all_hooks() %}
 
 export function {{tag_name}} () {
-  {{ renderHooksWithMemo(all_hooks, memo_trigger_hooks) }}
-  
+  {% for hook in component._get_all_hooks_internal() %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in memo_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in component._get_all_hooks() %}
+  {{ hook }}
+  {% endfor %}
+
   return (
     {{utils.render(component.render(), indent_width=0)}}
   )

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

@@ -60,7 +60,7 @@
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_iterable_tag(component) %}
-<>{ {{ component.iterable_state }}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
+<>{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
   {% for child in component.children %}
   {{ render(child) }}
   {% endfor %}
@@ -86,11 +86,11 @@
             {% for condition in case[:-1] %}
                 case JSON.stringify({{ condition._js_expr }}):
             {% endfor %}
-                return {{ render(case[-1]) }};
+                return {{ case[-1] }};
                 break;
         {% endfor %}
             default:
-                return {{ render(component.default) }};
+                return {{ component.default }};
                 break;
         }
     })()

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

@@ -28,7 +28,7 @@ export const state_name = "{{state_name}}"
 
 export const exception_state_name = "{{const.frontend_exception_state}}"
 
-// These events are triggered on initial load and each page navigation.
+// Theses events are triggered on initial load and each page navigation.
 export const onLoadInternalEvent = () => {
     const internal_events = [];
 
@@ -78,9 +78,9 @@ export function UploadFilesProvider({ children }) {
     return newFilesById
   })
   return (
-    <UploadFilesContext value={[filesById, setFilesById]}>
+    <UploadFilesContext.Provider value={[filesById, setFilesById]}>
       {children}
-    </UploadFilesContext>
+    </UploadFilesContext.Provider>
   )
 }
 
@@ -92,9 +92,9 @@ export function EventLoopProvider({ children }) {
     clientStorage,
   )
   return (
-    <EventLoopContext value={[addEvents, connectErrors]}>
+    <EventLoopContext.Provider value={[addEvents, connectErrors]}>
       {children}
-    </EventLoopContext>
+    </EventLoopContext.Provider>
   )
 }
 
@@ -112,13 +112,13 @@ export function StateProvider({ children }) {
 
   return (
     {% for state_name in initial_state %}
-    <StateContexts.{{state_name|var_name}} value={ {{state_name|var_name}} }>
+    <StateContexts.{{state_name|var_name}}.Provider value={ {{state_name|var_name}} }>
     {% endfor %}
-      <DispatchContext value={dispatchers}>
+      <DispatchContext.Provider value={dispatchers}>
         {children}
-      </DispatchContext>
+      </DispatchContext.Provider>
     {% for state_name in initial_state|reverse %}
-    </StateContexts.{{state_name|var_name}}>
+    </StateContexts.{{state_name|var_name}}.Provider>
     {% endfor %}
   )
 }

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

@@ -10,15 +10,16 @@ import {
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
-  const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light"
-  );
+  const [resolvedColorMode, setResolvedColorMode] = useState("dark");
 
   useEffect(() => {
     if (isDevMode) {
       const lastCompiledTimeInLocalStorage =
         localStorage.getItem("last_compiled_time");
-      if (lastCompiledTimeInLocalStorage !== lastCompiledTimeStamp) {
+      if (
+        lastCompiledTimeInLocalStorage &&
+        lastCompiledTimeInLocalStorage !== lastCompiledTimeStamp
+      ) {
         // on app startup, make sure the application color mode is persisted correctly.
         setTheme(defaultColorMode);
         localStorage.setItem("last_compiled_time", lastCompiledTimeStamp);
@@ -36,17 +37,17 @@ 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;
     }
     setTheme(mode);
   };
   return (
-    <ColorModeContext
+    <ColorModeContext.Provider
       value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
     >
       {children}
-    </ColorModeContext>
+    </ColorModeContext.Provider>
   );
 }

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

@@ -3,7 +3,6 @@ import axios from "axios";
 import io from "socket.io-client";
 import JSON5 from "json5";
 import env from "$/env.json";
-import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
 import { useEffect, useRef, useState } from "react";
 import Router, { useRouter } from "next/router";
@@ -41,6 +40,9 @@ let event_processing = false;
 // Array holding pending events to be processed.
 const event_queue = [];
 
+// Pending upload promises, by id
+const upload_controllers = {};
+
 /**
  * Generate a UUID (Used for session tokens).
  * Taken from: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
@@ -106,18 +108,6 @@ export const getBackendURL = (url_str) => {
   return endpoint;
 };
 
-/**
- * Check if the backend is disabled.
- *
- * @returns True if the backend is disabled, false otherwise.
- */
-export const isBackendDisabled = () => {
-  const cookie = document.cookie
-    .split("; ")
-    .find((row) => row.startsWith("backend-enabled="));
-  return cookie !== undefined && cookie.split("=")[1] == "false";
-};
-
 /**
  * Determine if any event in the event queue is stateful.
  *
@@ -221,16 +211,11 @@ export const applyEvent = async (event, socket) => {
   if (event.name == "_download") {
     const a = document.createElement("a");
     a.hidden = true;
-    a.href = event.payload.url;
     // Special case when linking to uploaded files
-    if (a.href.includes("getBackendURL(env.UPLOAD)")) {
-      a.href = eval?.(
-        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();
@@ -313,7 +298,10 @@ export const applyEvent = async (event, socket) => {
 
   // Send the event to the server.
   if (socket) {
-    socket.emit("event", event);
+    socket.emit(
+      "event",
+      JSON.stringify(event, (k, v) => (v === undefined ? null : v))
+    );
     return true;
   }
 
@@ -341,7 +329,7 @@ export const applyRestEvent = async (event, socket) => {
       event.payload.files,
       event.payload.upload_id,
       event.payload.on_upload_progress,
-      socket,
+      socket
     );
     return false;
   }
@@ -408,7 +396,7 @@ export const connect = async (
   dispatch,
   transports,
   setConnectErrors,
-  client_storage = {},
+  client_storage = {}
 ) => {
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
@@ -417,18 +405,8 @@ export const connect = async (
   socket.current = io(endpoint.href, {
     path: endpoint["pathname"],
     transports: transports,
-    protocols: [reflexEnvironment.version],
     autoUnref: false,
   });
-  // Ensure undefined fields in events are sent as null instead of removed
-  socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v);
-  socket.current.io.decoder.tryParse = (str) => {
-    try {
-      return JSON5.parse(str);
-    } catch (e) {
-      return false;
-    }
-  };
 
   function checkVisibility() {
     if (document.visibilityState === "visible") {
@@ -465,7 +443,8 @@ export const connect = async (
   });
 
   // On each received message, queue the updates and events.
-  socket.current.on("event", async (update) => {
+  socket.current.on("event", async (message) => {
+    const update = JSON5.parse(message);
     for (const substate in update.delta) {
       dispatch[substate](update.delta[substate]);
     }
@@ -477,7 +456,7 @@ export const connect = async (
   });
   socket.current.on("reload", async (event) => {
     event_processing = false;
-    queueEvents([...initialEvents(), event], socket);
+    queueEvents([...initialEvents(), JSON5.parse(event)], socket);
   });
 
   document.addEventListener("visibilitychange", checkVisibility);
@@ -499,16 +478,14 @@ export const uploadFiles = async (
   files,
   upload_id,
   on_upload_progress,
-  socket,
+  socket
 ) => {
   // return if there's no file to upload
   if (files === undefined || files.length === 0) {
     return false;
   }
 
-  const upload_ref_name = `__upload_controllers_${upload_id}`;
-
-  if (refs[upload_ref_name]) {
+  if (upload_controllers[upload_id]) {
     console.log("Upload already in progress for ", upload_id);
     return false;
   }
@@ -520,31 +497,23 @@ export const uploadFiles = async (
     // Whenever called, responseText will contain the entire response so far.
     const chunks = progressEvent.event.target.responseText.trim().split("\n");
     // So only process _new_ chunks beyond resp_idx.
-    chunks.slice(resp_idx).map((chunk_json) => {
-      try {
-        const chunk = JSON5.parse(chunk_json);
-        event_callbacks.map((f, ix) => {
-          f(chunk)
-            .then(() => {
-              if (ix === event_callbacks.length - 1) {
-                // Mark this chunk as processed.
-                resp_idx += 1;
-              }
-            })
-            .catch((e) => {
-              if (progressEvent.progress === 1) {
-                // Chunk may be incomplete, so only report errors when full response is available.
-                console.log("Error processing chunk", chunk, e);
-              }
-              return;
-            });
-        });
-      } catch (e) {
-        if (progressEvent.progress === 1) {
-          console.log("Error parsing chunk", chunk_json, e);
-        }
-        return;
-      }
+    chunks.slice(resp_idx).map((chunk) => {
+      event_callbacks.map((f, ix) => {
+        f(chunk)
+          .then(() => {
+            if (ix === event_callbacks.length - 1) {
+              // Mark this chunk as processed.
+              resp_idx += 1;
+            }
+          })
+          .catch((e) => {
+            if (progressEvent.progress === 1) {
+              // Chunk may be incomplete, so only report errors when full response is available.
+              console.log("Error parsing chunk", chunk, e);
+            }
+            return;
+          });
+      });
     });
   };
 
@@ -568,7 +537,7 @@ export const uploadFiles = async (
   });
 
   // Send the file to the server.
-  refs[upload_ref_name] = controller;
+  upload_controllers[upload_id] = controller;
 
   try {
     return await axios.post(getBackendURL(UPLOADURL), formdata, config);
@@ -588,7 +557,7 @@ export const uploadFiles = async (
     }
     return false;
   } finally {
-    delete refs[upload_ref_name];
+    delete upload_controllers[upload_id];
   }
 };
 
@@ -604,7 +573,7 @@ export const Event = (
   name,
   payload = {},
   event_actions = {},
-  handler = null,
+  handler = null
 ) => {
   return { name, payload, handler, event_actions };
 };
@@ -631,7 +600,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.local_storage) {
       const options = client_storage.local_storage[state_key];
       const local_storage_value = localStorage.getItem(
-        options.name || state_key,
+        options.name || state_key
       );
       if (local_storage_value !== null) {
         client_storage_values[state_key] = local_storage_value;
@@ -642,7 +611,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.session_storage) {
       const session_options = client_storage.session_storage[state_key];
       const session_storage_value = sessionStorage.getItem(
-        session_options.name || state_key,
+        session_options.name || state_key
       );
       if (session_storage_value != null) {
         client_storage_values[state_key] = session_storage_value;
@@ -667,7 +636,7 @@ export const hydrateClientStorage = (client_storage) => {
 const applyClientStorageDelta = (client_storage, delta) => {
   // find the main state and check for is_hydrated
   const unqualified_states = Object.keys(delta).filter(
-    (key) => key.split(".").length === 1,
+    (key) => key.split(".").length === 1
   );
   if (unqualified_states.length === 1) {
     const main_state = delta[unqualified_states[0]];
@@ -701,7 +670,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
         const session_options = client_storage.session_storage[state_key];
         sessionStorage.setItem(
           session_options.name || state_key,
-          delta[substate][key],
+          delta[substate][key]
         );
       }
     }
@@ -721,7 +690,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
 export const useEventLoop = (
   dispatch,
   initial_events = () => [],
-  client_storage = {},
+  client_storage = {}
 ) => {
   const socket = useRef(null);
   const router = useRouter();
@@ -735,7 +704,7 @@ export const useEventLoop = (
 
     event_actions = events.reduce(
       (acc, e) => ({ ...acc, ...e.event_actions }),
-      event_actions ?? {},
+      event_actions ?? {}
     );
 
     const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
@@ -763,7 +732,7 @@ export const useEventLoop = (
       debounce(
         combined_name,
         () => queueEvents(events, socket),
-        event_actions.debounce,
+        event_actions.debounce
       );
     } else {
       queueEvents(events, socket);
@@ -782,7 +751,7 @@ export const useEventLoop = (
             query,
             asPath,
           }))(router),
-        })),
+        }))
       );
       sentHydrate.current = true;
     }
@@ -817,42 +786,31 @@ export const useEventLoop = (
     };
   }, []);
 
-  // Handle socket connect/disconnect.
+  // Main event loop.
   useEffect(() => {
-    // only use websockets if state is present and backend is not disabled (reflex cloud).
-    if (Object.keys(initialState).length > 1 && !isBackendDisabled()) {
+    // Skip if the router is not ready.
+    if (!router.isReady) {
+      return;
+    }
+    // only use websockets if state is present
+    if (Object.keys(initialState).length > 1) {
       // Initialize the websocket connection.
       if (!socket.current) {
         connect(
           socket,
           dispatch,
-          ["websocket"],
+          ["websocket", "polling"],
           setConnectErrors,
-          client_storage,
+          client_storage
         );
       }
+      (async () => {
+        // Process all outstanding events.
+        while (event_queue.length > 0 && !event_processing) {
+          await processEvent(socket.current);
+        }
+      })();
     }
-
-    // Cleanup function.
-    return () => {
-      if (socket.current) {
-        socket.current.disconnect();
-      }
-    };
-  }, []);
-
-  // Main event loop.
-  useEffect(() => {
-    // Skip if the router is not ready.
-    if (!router.isReady || isBackendDisabled()) {
-      return;
-    }
-    (async () => {
-      // Process all outstanding events.
-      while (event_queue.length > 0 && !event_processing) {
-        await processEvent(socket.current);
-      }
-    })();
   });
 
   // localStorage event handling
@@ -876,7 +834,7 @@ export const useEventLoop = (
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
           `${state_name}.reflex___state____update_vars_internal_state.update_vars_internal`,
-          { vars: vars },
+          { vars: vars }
         );
         addEvents([event], e);
       }
@@ -969,7 +927,7 @@ export const getRefValues = (refs) => {
   return refs.map((ref) =>
     ref.current
       ? ref.current.value || ref.current.getAttribute("aria-valuenow")
-      : null,
+      : null
   );
 };
 

reflex/__init__.py

@@ -84,9 +84,6 @@ In the example above, you will be able to do `rx.list`
 
 from __future__ import annotations
 
-from types import ModuleType
-from typing import Any
-
 from reflex.utils import (
     compat,  # for side-effects
     lazy_loader,
@@ -248,7 +245,6 @@ COMPONENTS_CORE_MAPPING: dict = {
         "selected_files",
         "upload",
     ],
-    "components.core.auto_scroll": ["auto_scroll"],
 }
 
 COMPONENTS_BASE_MAPPING: dict = {
@@ -307,6 +303,7 @@ _MAPPING: dict = {
     "event": [
         "EventChain",
         "EventHandler",
+        "background",
         "call_script",
         "call_function",
         "run_script",
@@ -369,5 +366,20 @@ getattr, __dir__, __all__ = lazy_loader.attach(
 )
 
 
-def __getattr__(name: ModuleType | Any):
+def __getattr__(name):
+    if name == "chakra":
+        from reflex.utils import console
+
+        console.deprecate(
+            "rx.chakra",
+            reason="and moved to a separate package. "
+            "To continue using Chakra UI components, install the `reflex-chakra` package via `pip install "
+            "reflex-chakra`.",
+            deprecation_version="0.6.0",
+            removal_version="0.7.0",
+            dedupe=True,
+        )
+        import reflex_chakra as rc
+
+        return rc
     return getattr(name)

reflex/__init__.pyi

@@ -34,7 +34,6 @@ from .components.component import Component as Component
 from .components.component import ComponentNamespace as ComponentNamespace
 from .components.component import NoSSRComponent as NoSSRComponent
 from .components.component import memo as memo
-from .components.core.auto_scroll import auto_scroll as auto_scroll
 from .components.core.banner import connection_banner as connection_banner
 from .components.core.banner import connection_modal as connection_modal
 from .components.core.breakpoints import breakpoints as breakpoints
@@ -132,7 +131,7 @@ from .components.radix.themes.layout.container import container as container
 from .components.radix.themes.layout.flex import flex as flex
 from .components.radix.themes.layout.grid import grid as grid
 from .components.radix.themes.layout.list import list_item as list_item
-from .components.radix.themes.layout.list import list_ns as list  # noqa: F401
+from .components.radix.themes.layout.list import list_ns as list  # noqa
 from .components.radix.themes.layout.list import ordered_list as ordered_list
 from .components.radix.themes.layout.list import unordered_list as unordered_list
 from .components.radix.themes.layout.section import section as section
@@ -157,6 +156,7 @@ from .constants import Env as Env
 from .constants.colors import Color as Color
 from .event import EventChain as EventChain
 from .event import EventHandler as EventHandler
+from .event import background as background
 from .event import call_function as call_function
 from .event import call_script as call_script
 from .event import clear_local_storage as clear_local_storage

reflex/app_mixins/lifespan.py

@@ -12,7 +12,7 @@ from typing import Callable, Coroutine, Set, Union
 from fastapi import FastAPI
 
 from reflex.utils import console
-from reflex.utils.exceptions import InvalidLifespanTaskTypeError
+from reflex.utils.exceptions import InvalidLifespanTaskType
 
 from .mixin import AppMixin
 
@@ -32,7 +32,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}}"  # pyright: ignore [reportAttributeAccessIssue]
+                    run_msg = f"Started lifespan task: {task.__name__} as {{type}}"  # type: ignore
                     if isinstance(task, asyncio.Task):
                         running_tasks.append(task)
                     else:
@@ -61,19 +61,19 @@ class LifespanMixin(AppMixin):
 
         Args:
             task: The task to register.
-            **task_kwargs: The kwargs of the task.
+            task_kwargs: The kwargs of the task.
 
         Raises:
-            InvalidLifespanTaskTypeError: If the task is a generator function.
+            InvalidLifespanTaskType: If the task is a generator function.
         """
         if inspect.isgeneratorfunction(task) or inspect.isasyncgenfunction(task):
-            raise InvalidLifespanTaskTypeError(
+            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)  # pyright: ignore [reportArgumentType]
-            functools.update_wrapper(task, original_task)  # pyright: ignore [reportArgumentType]
-        self.lifespan_tasks.add(task)
-        console.debug(f"Registered lifespan task: {task.__name__}")  # pyright: ignore [reportAttributeAccessIssue]
+            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_mixins/middleware.py

@@ -53,11 +53,11 @@ class MiddlewareMixin(AppMixin):
         """
         for middleware in self.middleware:
             if asyncio.iscoroutinefunction(middleware.preprocess):
-                out = await middleware.preprocess(app=self, state=state, event=event)  # pyright: ignore [reportArgumentType]
+                out = await middleware.preprocess(app=self, state=state, event=event)  # type: ignore
             else:
-                out = middleware.preprocess(app=self, state=state, event=event)  # pyright: ignore [reportArgumentType]
+                out = middleware.preprocess(app=self, state=state, event=event)  # type: ignore
             if out is not None:
-                return out  # pyright: ignore [reportReturnType]
+                return out  # type: ignore
 
     async def _postprocess(
         self, state: BaseState, event: Event, update: StateUpdate
@@ -78,18 +78,18 @@ class MiddlewareMixin(AppMixin):
         for middleware in self.middleware:
             if asyncio.iscoroutinefunction(middleware.postprocess):
                 out = await middleware.postprocess(
-                    app=self,  # pyright: ignore [reportArgumentType]
+                    app=self,  # type: ignore
                     state=state,
                     event=event,
                     update=update,
                 )
             else:
                 out = middleware.postprocess(
-                    app=self,  # pyright: ignore [reportArgumentType]
+                    app=self,  # type: ignore
                     state=state,
                     event=event,
                     update=update,
                 )
             if out is not None:
-                return out  # pyright: ignore [reportReturnType]
+                return out  # type: ignore
         return update

reflex/app_module_for_backend.py

@@ -5,13 +5,16 @@ Only the app attribute is explicitly exposed.
 from concurrent.futures import ThreadPoolExecutor
 
 from reflex import constants
+from reflex.utils import telemetry
 from reflex.utils.exec import is_prod_mode
-from reflex.utils.prerequisites import get_and_validate_app
+from reflex.utils.prerequisites import get_app
 
 if constants.CompileVars.APP != "app":
     raise AssertionError("unexpected variable name for 'app'")
 
-app, app_module = get_and_validate_app(reload=False)
+telemetry.send("compile")
+app_module = get_app(reload=False)
+app = getattr(app_module, constants.CompileVars.APP)
 # 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()
@@ -27,7 +30,8 @@ if is_prod_mode():
 # ensure only "app" is exposed.
 del app_module
 del compile_future
-del get_and_validate_app
+del get_app
 del is_prod_mode
+del telemetry
 del constants
 del ThreadPoolExecutor

reflex/assets.py

@@ -5,7 +5,7 @@ from pathlib import Path
 from typing import Optional
 
 from reflex import constants
-from reflex.config import EnvironmentVariables
+from reflex.utils.exec import is_backend_only
 
 
 def asset(
@@ -52,7 +52,7 @@ def asset(
         The relative URL to the asset.
     """
     assets = constants.Dirs.APP_ASSETS
-    backend_only = EnvironmentVariables.REFLEX_BACKEND_ONLY.get()
+    backend_only = is_backend_only()
 
     # Local asset handling
     if not shared:

reflex/base.py

@@ -5,9 +5,15 @@ from __future__ import annotations
 import os
 from typing import TYPE_CHECKING, Any, List, Type
 
-import pydantic.v1.main as pydantic_main
-from pydantic.v1 import BaseModel
-from pydantic.v1.fields import ModelField
+try:
+    import pydantic.v1.main as pydantic_main
+    from pydantic.v1 import BaseModel
+    from pydantic.v1.fields import ModelField
+except ModuleNotFoundError:
+    if not TYPE_CHECKING:
+        import pydantic.main as pydantic_main
+        from pydantic import BaseModel
+        from pydantic.fields import ModelField  # type: ignore
 
 
 def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None:
@@ -24,27 +30,26 @@ def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None
 
     # can't use reflex.config.environment here cause of circular import
     reload = os.getenv("__RELOAD_CONFIG", "").lower() == "true"
-    base = None
-    try:
-        for base in bases:
+    for base in bases:
+        try:
             if not reload and getattr(base, field_name, None):
                 pass
-    except TypeError as te:
-        raise VarNameError(
-            f'State var "{field_name}" in {base} has been shadowed by a substate var; '
-            f'use a different field name instead".'
-        ) from te
+        except TypeError as te:
+            raise VarNameError(
+                f'State var "{field_name}" in {base} has been shadowed by a substate var; '
+                f'use a different field name instead".'
+            ) from te
 
 
 # monkeypatch pydantic validate_field_name method to skip validating
 # shadowed state vars when reloading app via utils.prerequisites.get_app(reload=True)
-pydantic_main.validate_field_name = validate_field_name  # pyright: ignore [reportPossiblyUnboundVariable, reportPrivateImportUsage]
+pydantic_main.validate_field_name = validate_field_name  # type: ignore
 
 if TYPE_CHECKING:
     from reflex.vars import Var
 
 
-class Base(BaseModel):
+class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
     """The base class subclassed by all Reflex classes.
 
     This class wraps Pydantic and provides common methods such as
@@ -69,12 +74,12 @@ class Base(BaseModel):
         """
         from reflex.utils.serializers import serialize
 
-        return self.__config__.json_dumps(
+        return self.__config__.json_dumps(  # type: ignore
             self.dict(),
             default=serialize,
         )
 
-    def set(self, **kwargs: Any):
+    def set(self, **kwargs):
         """Set multiple fields and return the object.
 
         Args:
@@ -107,12 +112,12 @@ class Base(BaseModel):
             default_value: The default value of the field
         """
         var_name = var._var_field_name
-        new_field = ModelField.infer(  # pyright: ignore [reportPossiblyUnboundVariable]
+        new_field = ModelField.infer(
             name=var_name,
             value=default_value,
             annotation=var._var_type,
             class_validators=None,
-            config=cls.__config__,
+            config=cls.__config__,  # type: ignore
         )
         cls.__fields__.update({var_name: new_field})
 

reflex/compiler/compiler.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 from datetime import datetime
 from pathlib import Path
-from typing import TYPE_CHECKING, Dict, Iterable, Optional, Sequence, Tuple, Type, Union
+from typing import TYPE_CHECKING, Dict, Iterable, Optional, Tuple, Type, Union
 
 from reflex import constants
 from reflex.compiler import templates, utils
@@ -75,10 +75,9 @@ def _compile_app(app_root: Component) -> str:
     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(),
+        hooks={**app_root._get_all_hooks_internal(), **app_root._get_all_hooks()},
         window_libraries=window_libraries,
         render=app_root.render(),
-        dynamic_imports=app_root._get_all_dynamic_imports(),
     )
 
 
@@ -150,7 +149,7 @@ def _compile_page(
         imports=imports,
         dynamic_imports=component._get_all_dynamic_imports(),
         custom_codes=component._get_all_custom_code(),
-        hooks=component._get_all_hooks(),
+        hooks={**component._get_all_hooks_internal(), **component._get_all_hooks()},
         render=component.render(),
         **kwargs,
     )
@@ -240,19 +239,11 @@ def _compile_components(
         component_renders.append(component_render)
         imports = utils.merge_imports(imports, component_imports)
 
-    dynamic_imports = {
-        comp_import: None
-        for comp_render in component_renders
-        if "dynamic_imports" in comp_render
-        for comp_import in comp_render["dynamic_imports"]
-    }
-
     # Compile the components page.
     return (
         templates.COMPONENTS.render(
             imports=utils.compile_imports(imports),
             components=component_renders,
-            dynamic_imports=dynamic_imports,
         ),
         imports,
     )
@@ -508,7 +499,7 @@ def compile_tailwind(
         The compiled Tailwind config.
     """
     # Get the path for the output file.
-    output_path = str((get_web_dir() / constants.Tailwind.CONFIG).absolute())
+    output_path = get_web_dir() / constants.Tailwind.CONFIG
 
     # Compile the config.
     code = _compile_tailwind(config)
@@ -545,47 +536,7 @@ def purge_web_pages_dir():
 
 
 if TYPE_CHECKING:
-    from reflex.app import ComponentCallable, UnevaluatedPage
-
-
-def _into_component_once(component: Component | ComponentCallable) -> Component | None:
-    """Convert a component to a Component.
-
-    Args:
-        component: The component to convert.
-
-    Returns:
-        The converted component.
-    """
-    if isinstance(component, Component):
-        return component
-    if isinstance(component, (Var, int, float, str)):
-        return Fragment.create(component)
-    if isinstance(component, Sequence):
-        return Fragment.create(*component)
-    return None
-
-
-def into_component(component: Component | ComponentCallable) -> Component:
-    """Convert a component to a Component.
-
-    Args:
-        component: The component to convert.
-
-    Returns:
-        The converted component.
-
-    Raises:
-        TypeError: If the component is not a Component.
-    """
-    if (converted := _into_component_once(component)) is not None:
-        return converted
-    if (
-        callable(component)
-        and (converted := _into_component_once(component())) is not None
-    ):
-        return converted
-    raise TypeError(f"Expected a Component, got {type(component)}")
+    from reflex.app import UnevaluatedPage
 
 
 def compile_unevaluated_page(
@@ -608,7 +559,12 @@ def compile_unevaluated_page(
         The compiled component and whether state should be enabled.
     """
     # Generate the component if it is a callable.
-    component = into_component(page.component)
+    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)
 
@@ -713,8 +669,10 @@ class ExecutorSafeFunctions:
             The route, compiled component, and compiled page.
         """
         component, enable_state = compile_unevaluated_page(
-            route, cls.UNCOMPILED_PAGES[route], cls.STATE, style, theme
+            route, cls.UNCOMPILED_PAGES[route]
         )
+        component = component if isinstance(component, Component) else component()
+        component._add_style_recursive(style, theme)
         return route, component, compile_page(route, component, cls.STATE)
 
     @classmethod

reflex/compiler/templates.py

@@ -1,46 +1,9 @@
 """Templates to use in the reflex compiler."""
 
-from __future__ import annotations
-
 from jinja2 import Environment, FileSystemLoader, Template
 
 from reflex import constants
-from reflex.constants import Hooks
 from reflex.utils.format import format_state_name, json_dumps
-from reflex.vars.base import VarData
-
-
-def _sort_hooks(hooks: dict[str, VarData | None]):
-    """Sort the hooks by their position.
-
-    Args:
-        hooks: The hooks to sort.
-
-    Returns:
-        The sorted hooks.
-    """
-    sorted_hooks = {
-        Hooks.HookPosition.INTERNAL: [],
-        Hooks.HookPosition.PRE_TRIGGER: [],
-        Hooks.HookPosition.POST_TRIGGER: [],
-    }
-
-    for hook, data in hooks.items():
-        if data and data.position and data.position == Hooks.HookPosition.INTERNAL:
-            sorted_hooks[Hooks.HookPosition.INTERNAL].append((hook, data))
-        elif not data or (
-            not data.position
-            or data.position == constants.Hooks.HookPosition.PRE_TRIGGER
-        ):
-            sorted_hooks[Hooks.HookPosition.PRE_TRIGGER].append((hook, data))
-        elif (
-            data
-            and data.position
-            and data.position == constants.Hooks.HookPosition.POST_TRIGGER
-        ):
-            sorted_hooks[Hooks.HookPosition.POST_TRIGGER].append((hook, data))
-
-    return sorted_hooks
 
 
 class ReflexJinjaEnvironment(Environment):
@@ -48,10 +11,11 @@ class ReflexJinjaEnvironment(Environment):
 
     def __init__(self) -> None:
         """Set default environment."""
+        extensions = ["jinja2.ext.debug"]
         super().__init__(
+            extensions=extensions,
             trim_blocks=True,
             lstrip_blocks=True,
-            auto_reload=False,
         )
         self.filters["json_dumps"] = json_dumps
         self.filters["react_setter"] = lambda state: f"set{state.capitalize()}"
@@ -81,9 +45,7 @@ class ReflexJinjaEnvironment(Environment):
             "on_load_internal": constants.CompileVars.ON_LOAD_INTERNAL,
             "update_vars_internal": constants.CompileVars.UPDATE_VARS_INTERNAL,
             "frontend_exception_state": constants.CompileVars.FRONTEND_EXCEPTION_STATE_FULL,
-            "hook_position": constants.Hooks.HookPosition,
         }
-        self.globals["sort_hooks"] = _sort_hooks
 
 
 def get_template(name: str) -> Template:
@@ -140,9 +102,6 @@ STYLE = get_template("web/styles/styles.css.jinja2")
 # Code that generate the package json file
 PACKAGE_JSON = get_template("web/package.json.jinja2")
 
-# Template containing some macros used in the web pages.
-MACROS = get_template("web/pages/macros.js.jinja2")
-
 # Code that generate the pyproject.toml file for custom components.
 CUSTOM_COMPONENTS_PYPROJECT_TOML = get_template(
     "custom_components/pyproject.toml.jinja2"

reflex/compiler/utils.py

@@ -2,15 +2,17 @@
 
 from __future__ import annotations
 
-import asyncio
-import concurrent.futures
-import traceback
-from datetime import datetime
 from pathlib import Path
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
 
-from pydantic.v1.fields import ModelField
+from reflex.utils.prerequisites import get_web_dir
+from reflex.vars.base import Var
+
+try:
+    from pydantic.v1.fields import ModelField
+except ModuleNotFoundError:
+    from pydantic.fields import ModelField  # type: ignore
 
 from reflex import constants
 from reflex.components.base import (
@@ -27,13 +29,10 @@ from reflex.components.base import (
 )
 from reflex.components.component import Component, ComponentStyle, CustomComponent
 from reflex.istate.storage import Cookie, LocalStorage, SessionStorage
-from reflex.state import BaseState, _resolve_delta
+from reflex.state import BaseState
 from reflex.style import Style
 from reflex.utils import console, format, imports, path_ops
-from reflex.utils.exec import is_in_app_harness
 from reflex.utils.imports import ImportVar, ParsedImportDict
-from reflex.utils.prerequisites import get_web_dir
-from reflex.vars.base import Var
 
 # To re-export this function.
 merge_imports = imports.merge_imports
@@ -113,34 +112,25 @@ def compile_imports(import_dict: ParsedImportDict) -> list[dict]:
     validate_imports(collapsed_import_dict)
     import_dicts = []
     for lib, fields in collapsed_import_dict.items():
+        default, rest = compile_import_statement(fields)
+
         # prevent lib from being rendered on the page if all imports are non rendered kind
-        if not any(f.render for f in fields):
+        if not any({f.render for f in fields}):  # type: ignore
             continue
 
-        lib_paths: dict[str, list[ImportVar]] = {}
+        if not lib:
+            if default:
+                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
 
-        for field in fields:
-            lib_paths.setdefault(field.package_path, []).append(field)
+        # remove the version before rendering the package imports
+        lib = format.format_library_name(lib)
 
-        compiled = {
-            path: compile_import_statement(fields) for path, fields in lib_paths.items()
-        }
-
-        for path, (default, rest) in compiled.items():
-            if not lib:
-                if default:
-                    raise ValueError("No default field allowed for empty library.")
-                if rest is None or len(rest) == 0:
-                    raise ValueError("No fields to import.")
-                import_dicts.extend(get_import_dict(module) for module in sorted(rest))
-                continue
-
-            # remove the version before rendering the package imports
-            formatted_lib = format.format_library_name(lib) + (
-                path if path != "/" else ""
-            )
-
-            import_dicts.append(get_import_dict(formatted_lib, default, rest))
+        import_dicts.append(get_import_dict(lib, default, rest))
     return import_dicts
 
 
@@ -162,22 +152,6 @@ def get_import_dict(lib: str, default: str = "", rest: list[str] | None = None)
     }
 
 
-def save_error(error: Exception) -> str:
-    """Save the error to a file.
-
-    Args:
-        error: The error to save.
-
-    Returns:
-        The path of the saved error.
-    """
-    timestamp = datetime.now().strftime("%Y-%m-%d__%H-%M-%S")
-    constants.Reflex.LOGS_DIR.mkdir(parents=True, exist_ok=True)
-    log_path = constants.Reflex.LOGS_DIR / f"error_{timestamp}.log"
-    traceback.TracebackException.from_exception(error).print(file=log_path.open("w+"))
-    return str(log_path)
-
-
 def compile_state(state: Type[BaseState]) -> dict:
     """Compile the state of the app.
 
@@ -190,31 +164,13 @@ def compile_state(state: Type[BaseState]) -> dict:
     try:
         initial_state = state(_reflex_internal_init=True).dict(initial=True)
     except Exception as e:
-        log_path = save_error(e)
         console.warn(
-            f"Failed to compile initial state with computed vars. Error log saved to {log_path}"
+            f"Failed to compile initial state with computed vars, excluding them: {e}"
         )
         initial_state = state(_reflex_internal_init=True).dict(
             initial=True, include_computed=False
         )
-    try:
-        _ = asyncio.get_running_loop()
-    except RuntimeError:
-        pass
-    else:
-        if is_in_app_harness():
-            # Playwright tests already have an event loop running, so we can't use asyncio.run.
-            with concurrent.futures.ThreadPoolExecutor() as pool:
-                resolved_initial_state = pool.submit(
-                    asyncio.run, _resolve_delta(initial_state)
-                ).result()
-                console.warn(
-                    f"Had to get initial state in a thread 🤮 {resolved_initial_state}",
-                )
-                return resolved_initial_state
-
-    # Normally the compile runs before any event loop starts, we asyncio.run is available for calling.
-    return asyncio.run(_resolve_delta(initial_state))
+    return initial_state
 
 
 def _compile_client_storage_field(
@@ -335,9 +291,8 @@ def compile_custom_component(
             "name": component.tag,
             "props": props,
             "render": render.render(),
-            "hooks": render._get_all_hooks(),
+            "hooks": {**render._get_all_hooks_internal(), **render._get_all_hooks()},
             "custom_code": render._get_all_custom_code(),
-            "dynamic_imports": render._get_all_dynamic_imports(),
         },
         imports,
     )
@@ -517,8 +472,6 @@ def write_page(path: str | Path, code: str):
     """
     path = Path(path)
     path_ops.mkdir(path.parent)
-    if path.exists() and path.read_text(encoding="utf-8") == code:
-        return
     path.write_text(code, encoding="utf-8")
 
 
@@ -542,7 +495,7 @@ def empty_dir(path: str | Path, keep_files: list[str] | None = None):
             path_ops.rm(element)
 
 
-def is_valid_url(url: str) -> bool:
+def is_valid_url(url) -> bool:
     """Check if a url is valid.
 
     Args:

reflex/components/base/app_wrap.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,21 +22,21 @@ class AppWrap(Fragment):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "AppWrap":
         """Create a new AppWrap component.

reflex/components/base/bare.py

@@ -2,54 +2,13 @@
 
 from __future__ import annotations
 
-from typing import Any, Iterator, Sequence
+from typing import Any, Iterator
 
-from reflex.components.component import BaseComponent, Component, ComponentStyle
+from reflex.components.component import Component, LiteralComponentVar
 from reflex.components.tags import Tag
 from reflex.components.tags.tagless import Tagless
-from reflex.config import PerformanceMode, environment
-from reflex.utils import console
-from reflex.utils.decorator import once
 from reflex.utils.imports import ParsedImportDict
 from reflex.vars import BooleanVar, ObjectVar, Var
-from reflex.vars.base import GLOBAL_CACHE, VarData
-from reflex.vars.sequence import LiteralStringVar
-
-
-@once
-def get_performance_mode():
-    """Get the performance mode.
-
-    Returns:
-        The performance mode.
-    """
-    return environment.REFLEX_PERF_MODE.get()
-
-
-def validate_str(value: str):
-    """Validate a string value.
-
-    Args:
-        value: The value to validate.
-
-    Raises:
-        ValueError: If the value is a Var and the performance mode is set to raise.
-    """
-    perf_mode = get_performance_mode()
-    if perf_mode != PerformanceMode.OFF and value.startswith("reflex___state"):
-        if perf_mode == PerformanceMode.WARN:
-            console.warn(
-                f"Output includes {value!s} which will be displayed as a string. If you are calling `str` on a Var, consider using .to_string() instead."
-            )
-        elif perf_mode == PerformanceMode.RAISE:
-            raise ValueError(
-                f"Output includes {value!s} which will be displayed as a string. If you are calling `str` on a Var, consider using .to_string() instead."
-            )
-
-
-def _components_from_var(var: Var) -> Sequence[BaseComponent]:
-    var_data = var._get_all_var_data()
-    return var_data.components if var_data else ()
 
 
 class Bare(Component):
@@ -68,51 +27,41 @@ class Bare(Component):
             The component.
         """
         if isinstance(contents, Var):
-            if isinstance(contents, LiteralStringVar):
-                validate_str(contents._var_value)
             return cls(contents=contents)
         else:
-            if isinstance(contents, str):
-                validate_str(contents)
             contents = str(contents) if contents is not None else ""
+        return cls(contents=contents)  # type: ignore
 
-        return cls(contents=contents)
-
-    def _get_all_hooks_internal(self) -> dict[str, VarData | None]:
+    def _get_all_hooks_internal(self) -> dict[str, None]:
         """Include the hooks for the component.
 
         Returns:
             The hooks for the component.
         """
         hooks = super()._get_all_hooks_internal()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                hooks |= component._get_all_hooks_internal()
+        if isinstance(self.contents, LiteralComponentVar):
+            hooks |= self.contents._var_value._get_all_hooks_internal()
         return hooks
 
-    def _get_all_hooks(self) -> dict[str, VarData | None]:
+    def _get_all_hooks(self) -> dict[str, None]:
         """Include the hooks for the component.
 
         Returns:
             The hooks for the component.
         """
         hooks = super()._get_all_hooks()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                hooks |= component._get_all_hooks()
+        if isinstance(self.contents, LiteralComponentVar):
+            hooks |= self.contents._var_value._get_all_hooks()
         return hooks
 
-    def _get_all_imports(self, collapse: bool = False) -> ParsedImportDict:
+    def _get_all_imports(self) -> ParsedImportDict:
         """Include the imports for the component.
 
-        Args:
-            collapse: Whether to collapse the imports.
-
         Returns:
             The imports for the component.
         """
-        imports = super()._get_all_imports(collapse=collapse)
-        if isinstance(self.contents, Var):
+        imports = super()._get_all_imports()
+        if isinstance(self.contents, LiteralComponentVar):
             var_data = self.contents._get_all_var_data()
             if var_data:
                 imports |= {k: list(v) for k, v in var_data.imports}
@@ -125,9 +74,8 @@ class Bare(Component):
             The dynamic imports.
         """
         dynamic_imports = super()._get_all_dynamic_imports()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                dynamic_imports |= component._get_all_dynamic_imports()
+        if isinstance(self.contents, LiteralComponentVar):
+            dynamic_imports |= self.contents._var_value._get_all_dynamic_imports()
         return dynamic_imports
 
     def _get_all_custom_code(self) -> set[str]:
@@ -137,24 +85,10 @@ class Bare(Component):
             The custom code.
         """
         custom_code = super()._get_all_custom_code()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                custom_code |= component._get_all_custom_code()
+        if isinstance(self.contents, LiteralComponentVar):
+            custom_code |= self.contents._var_value._get_all_custom_code()
         return custom_code
 
-    def _get_all_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-        """Get the components that should be wrapped in the app.
-
-        Returns:
-            The components that should be wrapped in the app.
-        """
-        app_wrap_components = super()._get_all_app_wrap_components()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                if isinstance(component, Component):
-                    app_wrap_components |= component._get_all_app_wrap_components()
-        return app_wrap_components
-
     def _get_all_refs(self) -> set[str]:
         """Get the refs for the children of the component.
 
@@ -162,9 +96,8 @@ class Bare(Component):
             The refs for the children.
         """
         refs = super()._get_all_refs()
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                refs |= component._get_all_refs()
+        if isinstance(self.contents, LiteralComponentVar):
+            refs |= self.contents._var_value._get_all_refs()
         return refs
 
     def _render(self) -> Tag:
@@ -174,41 +107,11 @@ class Bare(Component):
             return Tagless(contents=f"{{{self.contents!s}}}")
         return Tagless(contents=str(self.contents))
 
-    def _add_style_recursive(
-        self, style: ComponentStyle, theme: Component | None = None
-    ) -> Component:
-        """Add style to the component and its children.
-
-        Args:
-            style: The style to add.
-            theme: The theme to add.
-
-        Returns:
-            The component with the style added.
-        """
-        new_self = super()._add_style_recursive(style, theme)
-
-        are_components_touched = False
-
-        if isinstance(self.contents, Var):
-            for component in _components_from_var(self.contents):
-                if isinstance(component, Component):
-                    component._add_style_recursive(style, theme)
-                    are_components_touched = True
-
-        if are_components_touched:
-            GLOBAL_CACHE.clear()
-
-        return new_self
-
-    def _get_vars(
-        self, include_children: bool = False, ignore_ids: set[int] | None = None
-    ) -> Iterator[Var]:
+    def _get_vars(self, include_children: bool = False) -> Iterator[Var]:
         """Walk all Vars used in this component.
 
         Args:
             include_children: Whether to include Vars from children.
-            ignore_ids: The ids to ignore.
 
         Yields:
             The contents if it is a Var, otherwise nothing.

reflex/components/base/body.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,21 +22,21 @@ class Body(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Body":
         """Create the component.

reflex/components/base/document.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,21 +22,21 @@ class NextDocumentLib(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "NextDocumentLib":
         """Create the component.
@@ -69,21 +69,21 @@ class Html(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Html":
         """Create the component.
@@ -115,21 +115,21 @@ class DocumentHead(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "DocumentHead":
         """Create the component.
@@ -161,21 +161,21 @@ class Main(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Main":
         """Create the component.
@@ -207,21 +207,21 @@ class NextScript(NextDocumentLib):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "NextScript":
         """Create the component.

reflex/components/base/error_boundary.py

@@ -11,11 +11,10 @@ from reflex.event import EventHandler, set_clipboard
 from reflex.state import FrontendEventExceptionState
 from reflex.vars.base import Var
 from reflex.vars.function import ArgsFunctionOperation
-from reflex.vars.object import ObjectVar
 
 
 def on_error_spec(
-    error: ObjectVar[Dict[str, str]], info: ObjectVar[Dict[str, str]]
+    error: Var[Dict[str, str]], info: Var[Dict[str, str]]
 ) -> Tuple[Var[str], Var[str]]:
     """The spec for the on_error event handler.
 

reflex/components/base/error_boundary.pyi

@@ -6,13 +6,12 @@
 from typing import Any, Dict, Optional, Tuple, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
-from reflex.vars.object import ObjectVar
 
 def on_error_spec(
-    error: ObjectVar[Dict[str, str]], info: ObjectVar[Dict[str, str]]
+    error: Var[Dict[str, str]], info: Var[Dict[str, str]]
 ) -> Tuple[Var[str], Var[str]]: ...
 
 class ErrorBoundary(Component):
@@ -28,24 +27,28 @@ class ErrorBoundary(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
         on_error: Optional[
-            Union[EventType[()], EventType[str], EventType[str, str]]
+            Union[
+                EventType[[], BASE_STATE],
+                EventType[[str], BASE_STATE],
+                EventType[[str, str], BASE_STATE],
+            ]
         ] = 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,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ErrorBoundary":
         """Create an ErrorBoundary component.

reflex/components/base/fragment.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,21 +22,21 @@ class Fragment(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Fragment":
         """Create the component.

reflex/components/base/head.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component, MemoizationLeaf
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -22,21 +22,21 @@ class NextHeadLib(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "NextHeadLib":
         """Create the component.
@@ -68,21 +68,21 @@ class Head(NextHeadLib, MemoizationLeaf):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Head":
         """Create a new memoization leaf component.

reflex/components/base/link.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -24,21 +24,21 @@ class RawLink(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "RawLink":
         """Create the component.
@@ -79,21 +79,21 @@ class ScriptTag(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ScriptTag":
         """Create the component.

reflex/components/base/meta.py

@@ -53,11 +53,11 @@ class Description(Meta):
     """A component that displays the title of the current page."""
 
     # The type of the description.
-    name: str | None = "description"
+    name: str = "description"
 
 
 class Image(Meta):
     """A component that displays the title of the current page."""
 
     # The type of the image.
-    property: str | None = "og:image"
+    property: str = "og:image"

reflex/components/base/meta.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -23,21 +23,21 @@ class Title(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Title":
         """Create the component.
@@ -74,21 +74,21 @@ class Meta(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Meta":
         """Create the component.
@@ -130,21 +130,21 @@ class Description(Meta):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Description":
         """Create the component.
@@ -186,21 +186,21 @@ class Image(Meta):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Image":
         """Create the component.

reflex/components/base/script.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Literal, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -29,24 +29,24 @@ class Script(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
-        on_error: Optional[EventType[()]] = None,
-        on_focus: Optional[EventType[()]] = None,
-        on_load: 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_ready: Optional[EventType[()]] = None,
-        on_scroll: Optional[EventType[()]] = None,
-        on_unmount: Optional[EventType[()]] = None,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_error: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_load: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_ready: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Script":
         """Create an inline or user-defined script.

reflex/components/base/strict_mode.py

@@ -1,10 +0,0 @@
-"""Module for the StrictMode component."""
-
-from reflex.components.component import Component
-
-
-class StrictMode(Component):
-    """A React strict mode component to enable strict mode for its children."""
-
-    library = "react"
-    tag = "StrictMode"

reflex/components/base/strict_mode.pyi

@@ -1,57 +0,0 @@
-"""Stub file for reflex/components/base/strict_mode.py"""
-
-# ------------------- DO NOT EDIT ----------------------
-# This file was generated by `reflex/utils/pyi_generator.py`!
-# ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
-
-from reflex.components.component import Component
-from reflex.event import EventType
-from reflex.style import Style
-from reflex.vars.base import Var
-
-class StrictMode(Component):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        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, Any]]] = 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,
-    ) -> "StrictMode":
-        """Create the component.
-
-        Args:
-            *children: The children of the component.
-            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 of the component.
-
-        Returns:
-            The component.
-        """
-        ...

reflex/components/core/__init__.py

@@ -48,7 +48,6 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
         "get_upload_url",
         "selected_files",
     ],
-    "auto_scroll": ["auto_scroll"],
 }
 
 __getattr__, __dir__, __all__ = lazy_loader.attach(

reflex/components/core/__init__.pyi

@@ -4,7 +4,6 @@
 # ------------------------------------------------------
 
 from . import layout as layout
-from .auto_scroll import auto_scroll as auto_scroll
 from .banner import ConnectionBanner as ConnectionBanner
 from .banner import ConnectionModal as ConnectionModal
 from .banner import ConnectionPulser as ConnectionPulser

reflex/components/core/auto_scroll.py

@@ -1,114 +0,0 @@
-"""A component that automatically scrolls to the bottom when new content is added."""
-
-from __future__ import annotations
-
-from reflex.components.el.elements.typography import Div
-from reflex.constants.compiler import MemoizationDisposition, MemoizationMode
-from reflex.utils.imports import ImportDict
-from reflex.vars.base import Var, get_unique_variable_name
-
-
-class AutoScroll(Div):
-    """A div that automatically scrolls to the bottom when new content is added."""
-
-    _memoization_mode = MemoizationMode(
-        disposition=MemoizationDisposition.ALWAYS, recursive=False
-    )
-
-    @classmethod
-    def create(cls, *children, **props):
-        """Create an AutoScroll component.
-
-        Args:
-            *children: The children of the component.
-            **props: The props of the component.
-
-        Returns:
-            An AutoScroll component.
-        """
-        props.setdefault("overflow", "auto")
-        props.setdefault("id", get_unique_variable_name())
-        return super().create(*children, **props)
-
-    def add_imports(self) -> ImportDict | list[ImportDict]:
-        """Add imports required for the component.
-
-        Returns:
-            The imports required for the component.
-        """
-        return {"react": ["useEffect", "useRef"]}
-
-    def add_hooks(self) -> list[str | Var]:
-        """Add hooks required for the component.
-
-        Returns:
-            The hooks required for the component.
-        """
-        ref_name = self.get_ref()
-        return [
-            "const wasNearBottom = useRef(false);",
-            "const hadScrollbar = useRef(false);",
-            f"""
-const checkIfNearBottom = () => {{
-    if (!{ref_name}.current) return;
-
-    const container = {ref_name}.current;
-    const nearBottomThreshold = 50; // pixels from bottom to trigger auto-scroll
-
-    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-
-    wasNearBottom.current = distanceFromBottom <= nearBottomThreshold;
-
-    // Track if container had a scrollbar
-    hadScrollbar.current = container.scrollHeight > container.clientHeight;
-}};
-""",
-            f"""
-const scrollToBottomIfNeeded = () => {{
-    if (!{ref_name}.current) return;
-
-    const container = {ref_name}.current;
-    const hasScrollbarNow = container.scrollHeight > container.clientHeight;
-
-    // Scroll if:
-    // 1. User was near bottom, OR
-    // 2. Container didn't have scrollbar before but does now
-    if (wasNearBottom.current || (!hadScrollbar.current && hasScrollbarNow)) {{
-      container.scrollTop = container.scrollHeight;
-    }}
-
-    // Update scrollbar state for next check
-    hadScrollbar.current = hasScrollbarNow;
-}};
-""",
-            f"""
-useEffect(() => {{
-    const container = {ref_name}.current;
-    if (!container) return;
-
-    scrollToBottomIfNeeded();
-
-    // Create ResizeObserver to detect height changes
-    const resizeObserver = new ResizeObserver(() => {{
-        scrollToBottomIfNeeded();
-    }});
-
-    // Track scroll position before height changes
-    container.addEventListener('scroll', checkIfNearBottom);
-
-    // Initial check
-    checkIfNearBottom();
-
-    // Observe container for size changes
-    resizeObserver.observe(container);
-
-    return () => {{
-        container.removeEventListener('scroll', checkIfNearBottom);
-        resizeObserver.disconnect();
-    }};
-}});
-""",
-        ]
-
-
-auto_scroll = AutoScroll.create

reflex/components/core/auto_scroll.pyi

@@ -1,284 +0,0 @@
-"""Stub file for reflex/components/core/auto_scroll.py"""
-
-# ------------------- DO NOT EDIT ----------------------
-# This file was generated by `reflex/utils/pyi_generator.py`!
-# ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
-
-from reflex.components.el.elements.typography import Div
-from reflex.event import EventType
-from reflex.style import Style
-from reflex.utils.imports import ImportDict
-from reflex.vars.base import Var
-
-class AutoScroll(Div):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[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, Any]]] = 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,
-    ) -> "AutoScroll":
-        """Create an AutoScroll component.
-
-        Args:
-            *children: The children of the component.
-            access_key: Provides a hint for generating a keyboard shortcut for the current element.
-            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-            content_editable: Indicates whether the element's content is editable.
-            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
-            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 of the component.
-
-        Returns:
-            An AutoScroll component.
-        """
-        ...
-
-    def add_imports(self) -> ImportDict | list[ImportDict]: ...
-    def add_hooks(self) -> list[str | Var]: ...
-
-auto_scroll = AutoScroll.create

reflex/components/core/banner.py

@@ -4,8 +4,6 @@ from __future__ import annotations
 
 from typing import Optional
 
-from reflex import constants
-from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
 from reflex.components.el.elements.typography import Div
@@ -17,8 +15,7 @@ from reflex.components.radix.themes.components.dialog import (
 )
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
-from reflex.components.sonner.toast import ToastProps, toast_ref
-from reflex.config import environment
+from reflex.components.sonner.toast import Toaster, ToastProps
 from reflex.constants import Dirs, Hooks, Imports
 from reflex.constants.compiler import CompileVars
 from reflex.utils.imports import ImportVar
@@ -28,7 +25,7 @@ from reflex.vars.function import FunctionStringVar
 from reflex.vars.number import BooleanVar
 from reflex.vars.sequence import LiteralArrayVar
 
-connect_error_var_data: VarData = VarData(
+connect_error_var_data: VarData = VarData(  # type: ignore
     imports=Imports.EVENTS,
     hooks={Hooks.EVENTS: None},
 )
@@ -91,7 +88,7 @@ def default_connection_error() -> list[str | Var | Component]:
     ]
 
 
-class ConnectionToaster(Fragment):
+class ConnectionToaster(Toaster):
     """A connection toaster component."""
 
     def add_hooks(self) -> list[str | Var]:
@@ -102,57 +99,24 @@ class ConnectionToaster(Fragment):
         """
         toast_id = "websocket-error"
         target_url = WebsocketTargetURL.create()
-        props = ToastProps(
+        props = ToastProps(  # type: ignore
             description=LiteralVar.create(
                 f"Check if server is reachable at {target_url}",
             ),
             close_button=True,
             duration=120000,
             id=toast_id,
-        )  # pyright: ignore [reportCallIssue]
-
-        if environment.REFLEX_DOES_BACKEND_COLD_START.get():
-            loading_message = Var.create("Backend is starting.")
-            backend_is_loading_toast_var = Var(
-                f"toast?.loading({loading_message!s}, {{...toast_props, description: '', closeButton: false, onDismiss: () => setUserDismissed(true)}},)"
-            )
-            backend_is_not_responding = Var.create("Backend is not responding.")
-            backend_is_down_toast_var = Var(
-                f"toast?.error({backend_is_not_responding!s}, {{...toast_props, description: '', onDismiss: () => setUserDismissed(true)}},)"
-            )
-            toast_var = Var(
-                f"""
-if (waitedForBackend) {{
-    {backend_is_down_toast_var!s}
-}} else {{
-    {backend_is_loading_toast_var!s};
-}}
-setTimeout(() => {{
-    if ({has_too_many_connection_errors!s}) {{
-        setWaitedForBackend(true);
-    }}
-}}, {environment.REFLEX_BACKEND_COLD_START_TIMEOUT.get() * 1000});
-"""
-            )
-        else:
-            loading_message = Var.create(
-                f"Cannot connect to server: {connection_error}."
-            )
-            toast_var = Var(
-                f"toast?.error({loading_message!s}, {{...toast_props, onDismiss: () => setUserDismissed(true)}},)"
-            )
+        )
 
         individual_hooks = [
-            Var(f"const toast = {toast_ref};"),
             f"const toast_props = {LiteralVar.create(props)!s};",
             "const [userDismissed, setUserDismissed] = useState(false);",
-            "const [waitedForBackend, setWaitedForBackend] = useState(false);",
             FunctionStringVar(
                 "useEffect",
                 _var_data=VarData(
                     imports={
                         "react": ["useEffect", "useState"],
-                        **dict(target_url._get_all_var_data().imports),  # pyright: ignore [reportArgumentType, reportOptionalMemberAccess]
+                        **dict(target_url._get_all_var_data().imports),  # type: ignore
                     }
                 ),
             ).call(
@@ -162,16 +126,19 @@ setTimeout(() => {{
 () => {{
     if ({has_too_many_connection_errors!s}) {{
         if (!userDismissed) {{
-            {toast_var!s}
+            toast.error(
+                `Cannot connect to server: ${{{connection_error}}}.`,
+                {{...toast_props, onDismiss: () => setUserDismissed(true)}},
+            )
         }}
     }} else {{
-        toast?.dismiss("{toast_id}");
+        toast.dismiss("{toast_id}");
         setUserDismissed(false);  // after reconnection reset dismissed state
     }}
 }}
 """
                 ),
-                LiteralArrayVar.create([connect_errors, Var("waitedForBackend")]),
+                LiteralArrayVar.create([connect_errors]),
             ),
         ]
 
@@ -191,6 +158,7 @@ setTimeout(() => {{
         Returns:
             The connection toaster component.
         """
+        Toaster.is_used = True
         return super().create(*children, **props)
 
 
@@ -273,7 +241,7 @@ class WifiOffPulse(Icon):
             size=props.pop("size", 32),
             z_index=props.pop("z_index", 9999),
             position=props.pop("position", "fixed"),
-            bottom=props.pop("bottom", "33px"),
+            bottom=props.pop("botton", "33px"),
             right=props.pop("right", "33px"),
             animation=LiteralVar.create(f"{pulse_var} 1s infinite"),
             **props,
@@ -325,161 +293,7 @@ class ConnectionPulser(Div):
         )
 
 
-class BackendDisabled(Div):
-    """A component that displays a message when the backend is disabled."""
-
-    @classmethod
-    def create(cls, **props) -> Component:
-        """Create a backend disabled component.
-
-        Args:
-            **props: The properties of the component.
-
-        Returns:
-            The backend disabled component.
-        """
-        import reflex as rx
-
-        is_backend_disabled = Var(
-            "backendDisabled",
-            _var_type=bool,
-            _var_data=VarData(
-                hooks={
-                    "const [backendDisabled, setBackendDisabled] = useState(false);": None,
-                    "useEffect(() => { setBackendDisabled(isBackendDisabled()); }, []);": None,
-                },
-                imports={
-                    f"$/{constants.Dirs.STATE_PATH}": [
-                        ImportVar(tag="isBackendDisabled")
-                    ],
-                },
-            ),
-        )
-
-        return super().create(
-            rx.cond(
-                is_backend_disabled,
-                rx.box(
-                    rx.el.link(
-                        rel="preconnect",
-                        href="https://fonts.googleapis.com",
-                    ),
-                    rx.el.link(
-                        rel="preconnect",
-                        href="https://fonts.gstatic.com",
-                        crossorigin="",
-                    ),
-                    rx.el.link(
-                        href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,500;0,600&display=swap",
-                        rel="stylesheet",
-                    ),
-                    rx.box(
-                        rx.vstack(
-                            rx.text(
-                                "This app is paused",
-                                font_size="1.5rem",
-                                font_weight="600",
-                                line_height="1.25rem",
-                                letter_spacing="-0.0375rem",
-                            ),
-                            rx.hstack(
-                                rx.el.svg(
-                                    rx.el.svg.path(
-                                        d="M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z",
-                                        fill_rule="evenodd",
-                                        clip_rule="evenodd",
-                                        fill=rx.color("amber", 11),
-                                    ),
-                                    width="16",
-                                    height="16",
-                                    viewBox="0 0 16 16",
-                                    fill="none",
-                                    xmlns="http://www.w3.org/2000/svg",
-                                    margin_top="0.125rem",
-                                    flex_shrink="0",
-                                ),
-                                rx.text(
-                                    "If you are the owner of this app, visit ",
-                                    rx.link(
-                                        "Reflex Cloud",
-                                        color=rx.color("amber", 11),
-                                        underline="always",
-                                        _hover={
-                                            "color": rx.color("amber", 11),
-                                            "text_decoration_color": rx.color(
-                                                "amber", 11
-                                            ),
-                                        },
-                                        text_decoration_color=rx.color("amber", 10),
-                                        href="https://cloud.reflex.dev/",
-                                        font_weight="600",
-                                        is_external=True,
-                                    ),
-                                    " for more information on how to resume your app.",
-                                    font_size="0.875rem",
-                                    font_weight="500",
-                                    line_height="1.25rem",
-                                    letter_spacing="-0.01094rem",
-                                    color=rx.color("amber", 11),
-                                ),
-                                align="start",
-                                gap="0.625rem",
-                                border_radius="0.75rem",
-                                border_width="1px",
-                                border_color=rx.color("amber", 5),
-                                background_color=rx.color("amber", 3),
-                                padding="0.625rem",
-                            ),
-                            rx.link(
-                                rx.el.button(
-                                    "Resume app",
-                                    color="rgba(252, 252, 253, 1)",
-                                    font_size="0.875rem",
-                                    font_weight="600",
-                                    line_height="1.25rem",
-                                    letter_spacing="-0.01094rem",
-                                    height="2.5rem",
-                                    padding="0rem 0.75rem",
-                                    width="100%",
-                                    border_radius="0.75rem",
-                                    background=f"linear-gradient(180deg, {rx.color('violet', 9)} 0%, {rx.color('violet', 10)} 100%)",
-                                    _hover={
-                                        "background": f"linear-gradient(180deg, {rx.color('violet', 10)} 0%, {rx.color('violet', 10)} 100%)",
-                                    },
-                                ),
-                                width="100%",
-                                underline="none",
-                                href="https://cloud.reflex.dev/",
-                                is_external=True,
-                            ),
-                            gap="1rem",
-                        ),
-                        font_family='"Instrument Sans", "Helvetica", "Arial", sans-serif',
-                        position="fixed",
-                        top="50%",
-                        left="50%",
-                        transform="translate(-50%, -50%)",
-                        width="60ch",
-                        max_width="90vw",
-                        border_radius="0.75rem",
-                        border_width="1px",
-                        border_color=rx.color("slate", 4),
-                        padding="1.5rem",
-                        background_color=rx.color("slate", 1),
-                        box_shadow="0px 2px 5px 0px light-dark(rgba(28, 32, 36, 0.03), rgba(0, 0, 0, 0.00))",
-                    ),
-                    position="fixed",
-                    z_index=9999,
-                    backdrop_filter="grayscale(1) blur(5px)",
-                    width="100dvw",
-                    height="100dvh",
-                ),
-            )
-        )
-
-
 connection_banner = ConnectionBanner.create
 connection_modal = ConnectionModal.create
 connection_toaster = ConnectionToaster.create
 connection_pulser = ConnectionPulser.create
-backend_disabled = BackendDisabled.create

reflex/components/core/banner.pyi

@@ -5,12 +5,12 @@
 # ------------------------------------------------------
 from typing import Any, Dict, Literal, Optional, Union, overload
 
-from reflex.components.base.fragment import Fragment
 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 EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
@@ -41,40 +41,89 @@ class WebsocketTargetURL(Var):
 
 def default_connection_error() -> list[str | Var | Component]: ...
 
-class ConnectionToaster(Fragment):
+class ConnectionToaster(Toaster):
     def add_hooks(self) -> list[str | Var]: ...
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
+        theme: Optional[Union[Var[str], str]] = None,
+        rich_colors: Optional[Union[Var[bool], bool]] = None,
+        expand: Optional[Union[Var[bool], bool]] = None,
+        visible_toasts: Optional[Union[Var[int], int]] = None,
+        position: Optional[
+            Union[
+                Literal[
+                    "bottom-center",
+                    "bottom-left",
+                    "bottom-right",
+                    "top-center",
+                    "top-left",
+                    "top-right",
+                ],
+                Var[
+                    Literal[
+                        "bottom-center",
+                        "bottom-left",
+                        "bottom-right",
+                        "top-center",
+                        "top-left",
+                        "top-right",
+                    ]
+                ],
+            ]
+        ] = None,
+        close_button: Optional[Union[Var[bool], bool]] = None,
+        offset: Optional[Union[Var[str], str]] = None,
+        dir: Optional[Union[Var[str], str]] = None,
+        hotkey: Optional[Union[Var[str], str]] = None,
+        invert: Optional[Union[Var[bool], bool]] = None,
+        toast_options: Optional[Union[ToastProps, Var[ToastProps]]] = None,
+        gap: Optional[Union[Var[int], int]] = None,
+        loading_icon: Optional[Union[Icon, Var[Icon]]] = None,
+        pause_when_page_is_hidden: Optional[Union[Var[bool], bool]] = 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, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ConnectionToaster":
         """Create a connection toaster component.
 
         Args:
             *children: The children of the component.
+            theme: the theme of the toast
+            rich_colors: whether to show rich colors
+            expand: whether to expand the toast
+            visible_toasts: the number of toasts that are currently visible
+            position: the position of the toast
+            close_button: whether to show the close button
+            offset: offset of the toast
+            dir: directionality of the toast (default: ltr)
+            hotkey: Keyboard shortcut that will move focus to the toaster area.
+            invert: Dark toasts in light mode and vice versa.
+            toast_options: These will act as default options for all toasts. See toast() for all available options.
+            gap: Gap between toasts when expanded
+            loading_icon: Changes the default loading icon
+            pause_when_page_is_hidden: Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -100,21 +149,21 @@ class ConnectionBanner(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ConnectionBanner":
         """Create a connection banner component.
@@ -139,21 +188,21 @@ class ConnectionModal(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ConnectionModal":
         """Create a connection banner component.
@@ -179,21 +228,21 @@ class WifiOffPulse(Icon):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "WifiOffPulse":
         """Create a wifi_off icon with an animated opacity pulse.
@@ -222,238 +271,57 @@ class ConnectionPulser(Div):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
+        access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
         content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], bool, int, str]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], bool, int, 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, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ConnectionPulser":
         """Create a connection pulser component.
 
         Args:
-            access_key: Provides a hint for generating a keyboard shortcut for the current element.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
             context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
@@ -482,274 +350,7 @@ class ConnectionPulser(Div):
         """
         ...
 
-class BackendDisabled(Div):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[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, Any]]] = 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,
-    ) -> "BackendDisabled":
-        """Create a backend disabled component.
-
-        Args:
-            access_key: Provides a hint for generating a keyboard shortcut for the current element.
-            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-            content_editable: Indicates whether the element's content is editable.
-            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
-            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 properties of the component.
-
-        Returns:
-            The backend disabled component.
-        """
-        ...
-
 connection_banner = ConnectionBanner.create
 connection_modal = ConnectionModal.create
 connection_toaster = ConnectionToaster.create
 connection_pulser = ConnectionPulser.create
-backend_disabled = BackendDisabled.create

reflex/components/core/breakpoints.py

@@ -18,7 +18,7 @@ def set_breakpoints(values: Tuple[str, str, str, str, str]):
     breakpoints_values.extend(values)
 
 
-K = TypeVar("K", bound=str)
+K = TypeVar("K")
 V = TypeVar("V")
 
 
@@ -58,7 +58,7 @@ class Breakpoints(Dict[K, V]):
 
         Args:
             custom: Custom mapping using CSS values or variables.
-            initial: Styling when in the initial width
+            initial: Styling when in the inital width
             xs: Styling when in the extra-small width
             sm: Styling when in the small width
             md: Styling when in the medium width
@@ -82,9 +82,7 @@ class Breakpoints(Dict[K, V]):
             return Breakpoints(
                 {
                     k: v
-                    for k, v in zip(
-                        ["initial", *breakpoint_names], thresholds, strict=True
-                    )
+                    for k, v in zip(["initial", *breakpoint_names], thresholds)
                     if v is not None
                 }
             )

reflex/components/core/client_side_routing.py

@@ -24,7 +24,7 @@ class ClientSideRouting(Component):
     library = "$/utils/client_side_routing"
     tag = "useClientSideRouting"
 
-    def add_hooks(self) -> list[str | Var]:
+    def add_hooks(self) -> list[str]:
         """Get the hooks to render.
 
         Returns:
@@ -41,7 +41,7 @@ class ClientSideRouting(Component):
         return ""
 
 
-def wait_for_client_redirect(component: Component) -> Component:
+def wait_for_client_redirect(component) -> Component:
     """Wait for a redirect to occur before rendering a component.
 
     This prevents the 404 page from flashing while the redirect is happening.
@@ -66,4 +66,4 @@ class Default404Page(Component):
     tag = "Error"
     is_default = True
 
-    status_code: Var[int] = Var.create(404)
+    status_code: Var[int] = 404  # type: ignore

reflex/components/core/client_side_routing.pyi

@@ -6,14 +6,14 @@
 from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
 route_not_found: Var
 
 class ClientSideRouting(Component):
-    def add_hooks(self) -> list[str | Var]: ...
+    def add_hooks(self) -> list[str]: ...
     def render(self) -> str: ...
     @overload
     @classmethod
@@ -26,21 +26,21 @@ class ClientSideRouting(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "ClientSideRouting":
         """Create the component.
@@ -60,7 +60,7 @@ class ClientSideRouting(Component):
         """
         ...
 
-def wait_for_client_redirect(component: Component) -> Component: ...
+def wait_for_client_redirect(component) -> Component: ...
 
 class Default404Page(Component):
     @overload
@@ -75,21 +75,21 @@ class Default404Page(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Default404Page":
         """Create the component.

reflex/components/core/clipboard.py

@@ -6,12 +6,11 @@ from typing import Dict, List, Tuple, Union
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.tags.tag import Tag
-from reflex.constants.compiler import Hooks
 from reflex.event import EventChain, EventHandler, passthrough_event_spec
 from reflex.utils.format import format_prop, wrap
 from reflex.utils.imports import ImportVar
 from reflex.vars import get_unique_variable_name
-from reflex.vars.base import Var, VarData
+from reflex.vars.base import Var
 
 
 class Clipboard(Fragment):
@@ -73,7 +72,7 @@ class Clipboard(Fragment):
             ),
         }
 
-    def add_hooks(self) -> list[str | Var[str]]:
+    def add_hooks(self) -> list[str]:
         """Add hook to register paste event listener.
 
         Returns:
@@ -84,14 +83,13 @@ class Clipboard(Fragment):
             return []
         if isinstance(on_paste, EventChain):
             on_paste = wrap(str(format_prop(on_paste)).strip("{}"), "(")
-        hook_expr = f"usePasteHandler({self.targets!s}, {self.on_paste_event_actions!s}, {on_paste!s})"
-
         return [
-            Var(
-                hook_expr,
-                _var_type="str",
-                _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),
-            ),
+            "usePasteHandler(%s, %s, %s)"
+            % (
+                str(self.targets),
+                str(self.on_paste_event_actions),
+                on_paste,
+            )
         ]
 
 

reflex/components/core/clipboard.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, List, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
@@ -27,24 +27,27 @@ class Clipboard(Fragment):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
         on_paste: Optional[
-            Union[EventType[()], EventType[list[tuple[str, str]]]]
+            Union[
+                EventType[[], BASE_STATE],
+                EventType[[list[tuple[str, str]]], BASE_STATE],
+            ]
         ] = None,
-        on_scroll: Optional[EventType[()]] = None,
-        on_unmount: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Clipboard":
         """Create a Clipboard component.
@@ -68,6 +71,6 @@ class Clipboard(Fragment):
         ...
 
     def add_imports(self) -> dict[str, ImportVar]: ...
-    def add_hooks(self) -> list[str | Var[str]]: ...
+    def add_hooks(self) -> list[str]: ...
 
 clipboard = Clipboard.create

reflex/components/core/cond.py

@@ -26,9 +26,10 @@ class Cond(MemoizationLeaf):
     cond: Var[Any]
 
     # The component to render if the cond is true.
-    comp1: BaseComponent | None = None
+    comp1: BaseComponent = None  # type: ignore
+
     # The component to render if the cond is false.
-    comp2: BaseComponent | None = None
+    comp2: BaseComponent = None  # type: ignore
 
     @classmethod
     def create(
@@ -61,11 +62,19 @@ class Cond(MemoizationLeaf):
             )
         )
 
+    def _get_props_imports(self):
+        """Get the imports needed for component's props.
+
+        Returns:
+            The imports for the component's props of the component.
+        """
+        return []
+
     def _render(self) -> Tag:
         return CondTag(
             cond=self.cond,
-            true_value=self.comp1.render(),  # pyright: ignore [reportOptionalMemberAccess]
-            false_value=self.comp2.render(),  # pyright: ignore [reportOptionalMemberAccess]
+            true_value=self.comp1.render(),
+            false_value=self.comp2.render(),
         )
 
     def render(self) -> Dict:
@@ -102,7 +111,7 @@ class Cond(MemoizationLeaf):
 
 
 @overload
-def cond(condition: Any, c1: Component, c2: Any) -> Component: ...  # pyright: ignore [reportOverlappingOverload]
+def cond(condition: Any, c1: Component, c2: Any) -> Component: ...
 
 
 @overload
@@ -145,7 +154,7 @@ def cond(condition: Any, c1: Any, c2: Any = None) -> Component | Var:
     if c2 is None:
         raise ValueError("For conditional vars, the second argument must be set.")
 
-    def create_var(cond_part: Any) -> Var[Any]:
+    def create_var(cond_part):
         return LiteralVar.create(cond_part)
 
     # convert the truth and false cond parts into vars so the _var_data can be obtained.
@@ -154,16 +163,16 @@ def cond(condition: Any, c1: Any, c2: Any = None) -> Component | Var:
 
     # Create the conditional var.
     return ternary_operation(
-        cond_var.bool()._replace(
+        cond_var.bool()._replace(  # type: ignore
             merge_var_data=VarData(imports=_IS_TRUE_IMPORT),
-        ),
+        ),  # type: ignore
         c1,
         c2,
     )
 
 
 @overload
-def color_mode_cond(light: Component, dark: Component | None = None) -> Component: ...  # pyright: ignore [reportOverlappingOverload]
+def color_mode_cond(light: Component, dark: Component | None = None) -> Component: ...  # type: ignore
 
 
 @overload

reflex/components/core/debounce.py

@@ -28,7 +28,7 @@ class DebounceInput(Component):
     min_length: Var[int]
 
     # Time to wait between end of input and triggering on_change
-    debounce_timeout: Var[int] = Var.create(DEFAULT_DEBOUNCE_TIMEOUT)
+    debounce_timeout: Var[int] = DEFAULT_DEBOUNCE_TIMEOUT  # type: ignore
 
     # If true, notify when Enter key is pressed
     force_notify_by_enter: Var[bool]

reflex/components/core/debounce.pyi

@@ -6,7 +6,7 @@
 from typing import Any, Dict, Optional, Type, Union, overload
 
 from reflex.components.component import Component
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -31,22 +31,22 @@ class DebounceInput(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_change: 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_change: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "DebounceInput":
         """Create a DebounceInput component.

reflex/components/core/foreach.py

@@ -2,7 +2,6 @@
 
 from __future__ import annotations
 
-import functools
 import inspect
 from typing import Any, Callable, Iterable
 
@@ -11,7 +10,6 @@ from reflex.components.component import Component
 from reflex.components.tags import IterTag
 from reflex.constants import MemoizationMode
 from reflex.state import ComponentState
-from reflex.utils.exceptions import UntypedVarError
 from reflex.vars.base import LiteralVar, Var
 
 
@@ -52,12 +50,8 @@ class Foreach(Component):
         Raises:
             ForeachVarError: If the iterable is of type Any.
             TypeError: If the render function is a ComponentState.
-            UntypedVarError: If the iterable is of type Any without a type annotation.
         """
-        from reflex.vars import ArrayVar, ObjectVar, StringVar
-
-        iterable = LiteralVar.create(iterable).guess_type()
-
+        iterable = LiteralVar.create(iterable)
         if iterable._var_type == Any:
             raise ForeachVarError(
                 f"Could not foreach over var `{iterable!s}` of type Any. "
@@ -73,30 +67,12 @@ class Foreach(Component):
                 "Using a ComponentState as `render_fn` inside `rx.foreach` is not supported yet."
             )
 
-        if isinstance(iterable, ObjectVar):
-            iterable = iterable.entries()
-
-        if isinstance(iterable, StringVar):
-            iterable = iterable.split()
-
-        if not isinstance(iterable, ArrayVar):
-            raise ForeachVarError(
-                f"Could not foreach over var `{iterable!s}` of type {iterable._var_type}. "
-                "See https://reflex.dev/docs/library/dynamic-rendering/foreach/"
-            )
-
         component = cls(
             iterable=iterable,
             render_fn=render_fn,
         )
-        try:
-            # Keep a ref to a rendered component to determine correct imports/hooks/styles.
-            component.children = [component._render().render_component()]
-        except UntypedVarError as e:
-            raise UntypedVarError(
-                f"Could not foreach over var `{iterable!s}` without a type annotation. "
-                "See https://reflex.dev/docs/library/dynamic-rendering/foreach/"
-            ) from e
+        # Keep a ref to a rendered component to determine correct imports/hooks/styles.
+        component.children = [component._render().render_component()]
         return component
 
     def _render(self) -> IterTag:
@@ -121,20 +97,9 @@ class Foreach(Component):
             # Determine the index var name based on the params accepted by render_fn.
             props["index_var_name"] = params[1].name
         else:
-            render_fn = self.render_fn
             # Otherwise, use a deterministic index, based on the render function bytecode.
             code_hash = (
-                hash(
-                    getattr(
-                        render_fn,
-                        "__code__",
-                        (
-                            repr(self.render_fn)
-                            if not isinstance(render_fn, functools.partial)
-                            else render_fn.func.__code__
-                        ),
-                    )
-                )
+                hash(self.render_fn.__code__)
                 .to_bytes(
                     length=8,
                     byteorder="big",

reflex/components/core/html.py

@@ -14,7 +14,7 @@ class Html(Div):
     """
 
     # The HTML to render.
-    dangerouslySetInnerHTML: Var[Dict[str, str]]  # noqa: N815
+    dangerouslySetInnerHTML: Var[Dict[str, str]]
 
     @classmethod
     def create(cls, *children, **props):

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, Dict, Literal, Optional, Union, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.el.elements.typography import Div
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -19,232 +19,51 @@ class Html(Div):
         dangerouslySetInnerHTML: Optional[
             Union[Dict[str, str], Var[Dict[str, str]]]
         ] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
+        access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
         content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], bool, int, str]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
+            Union[Var[Union[bool, int, str]], bool, int, str]
         ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], bool, int, 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, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Html":
         """Create a html component.
@@ -252,7 +71,7 @@ class Html(Div):
         Args:
             *children: The children of the component.
             dangerouslySetInnerHTML: The HTML to render.
-            access_key: Provides a hint for generating a keyboard shortcut for the current element.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
             context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.

reflex/components/core/match.py

@@ -109,7 +109,7 @@ class Match(MemoizationLeaf):
         return cases, default
 
     @classmethod
-    def _create_case_var_with_var_data(cls, case_element: Any) -> Var:
+    def _create_case_var_with_var_data(cls, case_element):
         """Convert a case element into a Var.If the case
         is a Style type, we extract the var data and merge it with the
         newly created Var.
@@ -178,9 +178,9 @@ class Match(MemoizationLeaf):
         first_case_return = match_cases[0][-1]
         return_type = type(first_case_return)
 
-        if isinstance(first_case_return, BaseComponent):
+        if types._isinstance(first_case_return, BaseComponent):
             return_type = BaseComponent
-        elif isinstance(first_case_return, Var):
+        elif types._isinstance(first_case_return, Var):
             return_type = Var
 
         for index, case in enumerate(match_cases):
@@ -222,27 +222,27 @@ class Match(MemoizationLeaf):
                     cond=match_cond_var,
                     match_cases=match_cases,
                     default=default,
-                    children=[case[-1] for case in match_cases] + [default],  # pyright: ignore [reportArgumentType]
+                    children=[case[-1] for case in match_cases] + [default],  # type: ignore
                 )
             )
 
         # Validate the match cases (as well as the default case) to have Var return types.
         if any(
-            case for case in match_cases if not isinstance(case[-1], Var)
-        ) or not isinstance(default, Var):
+            case for case in match_cases if not types._isinstance(case[-1], Var)
+        ) or not types._isinstance(default, Var):
             raise ValueError("Return types of match cases should be Vars.")
 
         return Var(
             _js_expr=format.format_match(
                 cond=str(match_cond_var),
                 match_cases=match_cases,
-                default=default,  # pyright: ignore [reportArgumentType]
+                default=default,  # type: ignore
             ),
-            _var_type=default._var_type,  # pyright: ignore [reportAttributeAccessIssue,reportOptionalMemberAccess]
+            _var_type=default._var_type,  # type: ignore
             _var_data=VarData.merge(
                 match_cond_var._get_all_var_data(),
                 *[el._get_all_var_data() for case in match_cases for el in case],
-                default._get_all_var_data(),  # pyright: ignore [reportAttributeAccessIssue, reportOptionalMemberAccess]
+                default._get_all_var_data(),  # type: ignore
             ),
         )
 

reflex/components/core/sticky.py

@@ -1,134 +0,0 @@
-"""Components for displaying the Reflex sticky logo."""
-
-from reflex.components.component import ComponentNamespace
-from reflex.components.core.colors import color
-from reflex.components.core.cond import color_mode_cond
-from reflex.components.core.responsive import desktop_only
-from reflex.components.el.elements.inline import A
-from reflex.components.el.elements.media import Path, Rect, Svg
-from reflex.components.radix.themes.typography.text import Text
-from reflex.style import Style
-
-
-class StickyLogo(Svg):
-    """A simple Reflex logo SVG with only the letter R."""
-
-    @classmethod
-    def create(cls):
-        """Create the simple Reflex logo SVG.
-
-        Returns:
-            The simple Reflex logo SVG.
-        """
-        return super().create(
-            Rect.create(width="16", height="16", rx="2", fill="#6E56CF"),
-            Path.create(d="M10 9V13H12V9H10Z", fill="white"),
-            Path.create(d="M4 3V13H6V9H10V7H6V5H10V7H12V3H4Z", fill="white"),
-            width="16",
-            height="16",
-            viewBox="0 0 16 16",
-            xmlns="http://www.w3.org/2000/svg",
-        )
-
-    def add_style(self):
-        """Add the style to the component.
-
-        Returns:
-            The style of the component.
-        """
-        return Style(
-            {
-                "fill": "white",
-            }
-        )
-
-
-class StickyLabel(Text):
-    """A label that displays the Reflex sticky."""
-
-    @classmethod
-    def create(cls):
-        """Create the sticky label.
-
-        Returns:
-            The sticky label.
-        """
-        return super().create("Built with Reflex")
-
-    def add_style(self):
-        """Add the style to the component.
-
-        Returns:
-            The style of the component.
-        """
-        return Style(
-            {
-                "color": color("slate", 1),
-                "font_weight": "600",
-                "font_family": "'Instrument Sans', sans-serif",
-                "font_size": "0.875rem",
-                "line_height": "1rem",
-                "letter_spacing": "-0.00656rem",
-            }
-        )
-
-
-class StickyBadge(A):
-    """A badge that displays the Reflex sticky logo."""
-
-    @classmethod
-    def create(cls):
-        """Create the sticky badge.
-
-        Returns:
-            The sticky badge.
-        """
-        return super().create(
-            StickyLogo.create(),
-            desktop_only(StickyLabel.create()),
-            href="https://reflex.dev",
-            target="_blank",
-            width="auto",
-            padding="0.375rem",
-            align="center",
-            text_align="center",
-        )
-
-    def add_style(self):
-        """Add the style to the component.
-
-        Returns:
-            The style of the component.
-        """
-        return Style(
-            {
-                "position": "fixed",
-                "bottom": "1rem",
-                "right": "1rem",
-                "display": "flex",
-                "flex-direction": "row",
-                "gap": "0.375rem",
-                "align-items": "center",
-                "width": "auto",
-                "border-radius": "0.5rem",
-                "color": color_mode_cond("#E5E7EB", "#27282B"),
-                "border": color_mode_cond("1px solid #27282B", "1px solid #E5E7EB"),
-                "background-color": color_mode_cond("#151618", "#FCFCFD"),
-                "padding": "0.375rem",
-                "transition": "background-color 0.2s ease-in-out",
-                "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-                "z-index": "9998",
-                "cursor": "pointer",
-            },
-        )
-
-
-class StickyNamespace(ComponentNamespace):
-    """Sticky components namespace."""
-
-    __call__ = staticmethod(StickyBadge.create)
-    label = staticmethod(StickyLabel.create)
-    logo = staticmethod(StickyLogo.create)
-
-
-sticky = StickyNamespace()

reflex/components/core/upload.py

@@ -29,7 +29,7 @@ from reflex.event import (
 from reflex.utils import format
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
-from reflex.vars.base import Var, get_unique_variable_name
+from reflex.vars.base import CallableVar, LiteralVar, Var, get_unique_variable_name
 from reflex.vars.sequence import LiteralStringVar
 
 DEFAULT_UPLOAD_ID: str = "default"
@@ -45,6 +45,7 @@ upload_files_context_var_data: VarData = VarData(
 )
 
 
+@CallableVar
 def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     """Get the file upload drop trigger.
 
@@ -74,6 +75,7 @@ def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     )
 
 
+@CallableVar
 def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     """Get the list of selected files.
 
@@ -106,8 +108,7 @@ def clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec:
     # UploadFilesProvider assigns a special function to clear selected files
     # into the shared global refs object to make it accessible outside a React
     # component via `run_script` (otherwise backend could never clear files).
-    func = Var("__clear_selected_files")._as_ref()
-    return run_script(f"{func}({id_!r})")
+    return run_script(f"refs['__clear_selected_files']({id_!r})")
 
 
 def cancel_upload(upload_id: str) -> EventSpec:
@@ -119,8 +120,7 @@ def cancel_upload(upload_id: str) -> EventSpec:
     Returns:
         An event spec that cancels the upload when triggered.
     """
-    controller = Var(f"__upload_controllers_{upload_id}")._as_ref()
-    return run_script(f"{controller}?.abort()")
+    return run_script(f"upload_controllers[{LiteralVar.create(upload_id)!s}]?.abort()")
 
 
 def get_upload_dir() -> Path:
@@ -147,7 +147,7 @@ uploaded_files_url_prefix = Var(
 ).to(str)
 
 
-def get_upload_url(file_path: str | Var[str]) -> Var[str]:
+def get_upload_url(file_path: str) -> Var[str]:
     """Get the URL of an uploaded file.
 
     Args:
@@ -158,7 +158,7 @@ def get_upload_url(file_path: str | Var[str]) -> Var[str]:
     """
     Upload.is_used = True
 
-    return Var.create(f"{uploaded_files_url_prefix}/{file_path}")
+    return uploaded_files_url_prefix + "/" + file_path
 
 
 def _on_drop_spec(files: Var) -> Tuple[Var[Any]]:
@@ -190,7 +190,7 @@ class GhostUpload(Fragment):
 class Upload(MemoizationLeaf):
     """A file upload component."""
 
-    library = "react-dropzone@14.3.5"
+    library = "react-dropzone@14.2.10"
 
     tag = ""
 
@@ -267,7 +267,7 @@ class Upload(MemoizationLeaf):
             on_drop = upload_props["on_drop"]
             if isinstance(on_drop, Callable):
                 # Call the lambda to get the event chain.
-                on_drop = call_event_fn(on_drop, _on_drop_spec)
+                on_drop = call_event_fn(on_drop, _on_drop_spec)  # type: ignore
             if isinstance(on_drop, EventSpec):
                 # Update the provided args for direct use with on_drop.
                 on_drop = on_drop.with_args(

reflex/components/core/upload.pyi

@@ -9,16 +9,18 @@ from typing import Any, ClassVar, Dict, List, Optional, Union, overload
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
 from reflex.constants import Dirs
-from reflex.event import CallableEventSpec, EventSpec, EventType
+from reflex.event import BASE_STATE, CallableEventSpec, EventSpec, EventType
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
-from reflex.vars.base import Var
+from reflex.vars.base import CallableVar, Var
 
 DEFAULT_UPLOAD_ID: str
 upload_files_context_var_data: VarData
 
+@CallableVar
 def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var: ...
+@CallableVar
 def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var: ...
 @CallableEventSpec
 def clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec: ...
@@ -35,7 +37,7 @@ uploaded_files_url_prefix = Var(
     ),
 ).to(str)
 
-def get_upload_url(file_path: str | Var[str]) -> Var[str]: ...
+def get_upload_url(file_path: str) -> Var[str]: ...
 
 class UploadFilesProvider(Component):
     @overload
@@ -49,21 +51,21 @@ class UploadFilesProvider(Component):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "UploadFilesProvider":
         """Create the component.
@@ -95,22 +97,24 @@ class GhostUpload(Fragment):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_drop: Optional[
+            Union[EventType[[], BASE_STATE], EventType[[Any], BASE_STATE]]
+        ] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "GhostUpload":
         """Create the component.
@@ -154,22 +158,24 @@ class Upload(MemoizationLeaf):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_drop: Optional[
+            Union[EventType[[], BASE_STATE], EventType[[Any], BASE_STATE]]
+        ] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "Upload":
         """Create an upload component.
@@ -220,22 +226,24 @@ class StyledUpload(Upload):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_drop: Optional[
+            Union[EventType[[], BASE_STATE], EventType[[Any], BASE_STATE]]
+        ] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "StyledUpload":
         """Create the styled upload component.
@@ -286,22 +294,24 @@ class UploadNamespace(ComponentNamespace):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_blur: Optional[EventType[()]] = None,
-        on_click: Optional[EventType[()]] = None,
-        on_context_menu: Optional[EventType[()]] = None,
-        on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_drop: Optional[
+            Union[EventType[[], BASE_STATE], EventType[[Any], BASE_STATE]]
+        ] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "StyledUpload":
         """Create the styled upload component.

reflex/components/datadisplay/code.py

@@ -3,7 +3,6 @@
 from __future__ import annotations
 
 import dataclasses
-import typing
 from typing import ClassVar, Dict, Literal, Optional, Union
 
 from reflex.components.component import Component, ComponentNamespace
@@ -15,7 +14,7 @@ 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 ImportVar
 from reflex.vars.base import LiteralVar, Var, VarData
 
@@ -383,7 +382,7 @@ for theme_name in dir(Theme):
 class CodeBlock(Component, MarkdownComponentMap):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.6.1"
+    library = "react-syntax-highlighter@15.6.0"
 
     tag = "PrismAsyncLight"
 
@@ -439,8 +438,6 @@ class CodeBlock(Component, MarkdownComponentMap):
         can_copy = props.pop("can_copy", False)
         copy_button = props.pop("copy_button", None)
 
-        # react-syntax-highlighter doesn't have an explicit "light" or "dark" theme so we use one-light and one-dark
-        # themes respectively to ensure code compatibility.
         if "theme" not in props:
             # Default color scheme responds to global color mode.
             props["theme"] = color_mode_cond(
@@ -448,9 +445,20 @@ class CodeBlock(Component, MarkdownComponentMap):
                 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"] = 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]
-            copy_button = (
+            copy_button = (  # type: ignore
                 copy_button
                 if copy_button is not None
                 else Button.create(
@@ -494,8 +502,8 @@ class CodeBlock(Component, MarkdownComponentMap):
 
         theme = self.theme
 
-        out.add_props(style=theme).remove_props("theme", "code").add_props(
-            children=self.code,
+        out.add_props(style=theme).remove_props("theme", "code", "language").add_props(
+            children=self.code, language=_LANGUAGE
         )
 
         return out
@@ -504,57 +512,27 @@ class CodeBlock(Component, MarkdownComponentMap):
         return ["can_copy", "copy_button"]
 
     @classmethod
-    def _get_language_registration_hook(cls, language_var: Var = _LANGUAGE) -> Var:
+    def _get_language_registration_hook(cls) -> str:
         """Get the hook to register the language.
 
-        Args:
-            language_var: The const/literal Var of the language module to import.
-                For markdown, uses the default placeholder _LANGUAGE. For direct use,
-                a LiteralStringVar should be passed via the language prop.
-
         Returns:
             The hook to register the language.
         """
-        language_in_there = Var.create(typing.get_args(LiteralCodeLanguage)).contains(
-            language_var
-        )
-        async_load = f"""
-(async () => {{
-    try {{
-        const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${{{language_var!s}}}`);
-        SyntaxHighlighter.registerLanguage({language_var!s}, module.default);
-    }} catch (error) {{
-        console.error(`Language ${{{language_var!s}}} is not supported for code blocks inside of markdown: `, error);
-    }}
-}})();
-"""
-        return Var(
-            f"""
- if ({language_var!s}) {{
-    if (!{language_in_there!s}) {{
-        console.warn(`Language \\`${{{language_var!s}}}\\` is not supported for code blocks inside of markdown.`);
-        {language_var!s} = '';
-    }} else {{
-        {async_load!s}
-    }}
+        return f"""
+ if ({_LANGUAGE!s}) {{
+    (async () => {{
+      try {{
+        const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${{{_LANGUAGE!s}}}`);
+        SyntaxHighlighter.registerLanguage({_LANGUAGE!s}, module.default);
+      }} catch (error) {{
+        console.error(`Error importing language module for ${{{_LANGUAGE!s}}}:`, error);
+      }}
+    }})();
   }}
 """
-            if not isinstance(language_var, LiteralVar)
-            else f"""
-if ({language_var!s}) {{
-    {async_load!s}
-}}""",
-            _var_data=VarData(
-                imports={
-                    cls.__fields__["library"].default: [
-                        ImportVar(tag="PrismAsyncLight", alias="SyntaxHighlighter")
-                    ]
-                },
-            ),
-        )
 
     @classmethod
-    def get_component_map_custom_code(cls) -> Var:
+    def get_component_map_custom_code(cls) -> str:
         """Get the custom code for the component.
 
         Returns:
@@ -569,7 +547,8 @@ if ({language_var!s}) {{
             The hooks for the component.
         """
         return [
-            self._get_language_registration_hook(language_var=self.language),
+            f"const {_LANGUAGE!s} = {self.language!s}",
+            self._get_language_registration_hook(),
         ]
 
 

reflex/components/datadisplay/code.pyi

@@ -9,7 +9,7 @@ from typing import Any, ClassVar, Dict, Literal, Optional, Union, overload
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.markdown.markdown import MarkdownComponentMap
 from reflex.constants.colors import Color
-from reflex.event import EventType
+from reflex.event import BASE_STATE, EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
@@ -938,21 +938,21 @@ class CodeBlock(Component, MarkdownComponentMap):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "CodeBlock":
         """Create a text component.
@@ -984,7 +984,7 @@ class CodeBlock(Component, MarkdownComponentMap):
 
     def add_style(self): ...
     @classmethod
-    def get_component_map_custom_code(cls) -> Var: ...
+    def get_component_map_custom_code(cls) -> str: ...
     def add_hooks(self) -> list[str | Var]: ...
 
 class CodeblockNamespace(ComponentNamespace):
@@ -1576,21 +1576,21 @@ class CodeblockNamespace(ComponentNamespace):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, Any]]] = 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,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
         **props,
     ) -> "CodeBlock":
         """Create a text component.

reflex/components/datadisplay/dataeditor.py

@@ -3,7 +3,9 @@
 from __future__ import annotations
 
 from enum import Enum
-from typing import Any, Dict, List, Literal, Optional, Tuple, TypedDict, 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
@@ -49,6 +51,27 @@ class GridColumnIcons(Enum):
     VideoUri = "video_uri"
 
 
+# @serializer
+# def serialize_gridcolumn_icon(icon: GridColumnIcons) -> str:
+#     """Serialize grid column icon.
+
+#     Args:
+#         icon: the Icon to serialize.
+
+#     Returns:
+#         The serialized value.
+#     """
+#     return "prefix" + str(icon)
+
+
+# class DataEditorColumn(Base):
+#     """Column."""
+
+#     title: str
+#     id: Optional[str] = None
+#     type_: str = "str"
+
+
 class DataEditorTheme(Base):
     """The theme for the DataEditor component."""
 
@@ -163,7 +186,7 @@ class DataEditor(NoSSRComponent):
 
     tag = "DataEditor"
     is_default = True
-    library: str | None = "@glideapps/glide-data-grid@^6.0.3"
+    library: str = "@glideapps/glide-data-grid@^6.0.3"
     lib_dependencies: List[str] = [
         "lodash@^4.17.21",
         "react-responsive-carousel@^3.2.7",
@@ -206,7 +229,7 @@ class DataEditor(NoSSRComponent):
     header_height: Var[int]
 
     # Additional header icons:
-    # header_icons: Var[Any] # (TODO: must be a map of name: svg) #noqa: ERA001
+    # header_icons: Var[Any] # (TODO: must be a map of name: svg)
 
     # The maximum width a column can be automatically sized to.
     max_column_auto_width: Var[int]
@@ -217,7 +240,7 @@ class DataEditor(NoSSRComponent):
     # The minimum width a column can be resized to.
     min_column_width: Var[int]
 
-    # Determines the height of each row.
+    # Determins the height of each row.
     row_height: Var[int]
 
     # Kind of row markers.
@@ -319,8 +342,6 @@ class DataEditor(NoSSRComponent):
         Returns:
             The import dict.
         """
-        if self.library is None:
-            return {}
         return {
             "": f"{format.format_library_name(self.library)}/dist/index.css",
             self.library: "GridCellKind",
@@ -339,13 +360,10 @@ class DataEditor(NoSSRComponent):
         editor_id = get_unique_variable_name()
 
         # Define the name of the getData callback associated with this component and assign to get_cell_content.
-        if self.get_cell_content is not None:
-            data_callback = self.get_cell_content._js_expr
-        else:
-            data_callback = f"getData_{editor_id}"
-            self.get_cell_content = Var(_js_expr=data_callback)
+        data_callback = f"getData_{editor_id}"
+        self.get_cell_content = Var(_js_expr=data_callback)  # type: ignore
 
-        code = [f"function {data_callback}([col, row]){{"]
+        code = [f"function {data_callback}([col, row])" "{"]
 
         columns_path = str(self.columns)
         data_path = str(self.data)
@@ -385,8 +403,7 @@ class DataEditor(NoSSRComponent):
                 raise ValueError(
                     "DataEditor data must be an ArrayVar if rows is not provided."
                 )
-
-            props["rows"] = data.length() if isinstance(data, ArrayVar) else len(data)
+            props["rows"] = data.length() if isinstance(data, Var) else len(data)
 
         if not isinstance(columns, Var) and len(columns):
             if types.is_dataframe(type(data)) or (