nextpy-framework 3.7.2__tar.gz → 3.8.0__tar.gz

{nextpy_framework-3.7.2 → nextpy_framework-3.8.0}/.nextpy_framework/nextpy/__init__.py

@@ -3,7 +3,7 @@ NextPy - The Python Web Framdwork
 File-based routing, SSR, SSG, and more with FastAPI + PSX (True JSX)
 """
 
-__version__ = "3.7.2"
+__version__ = "3.8.0"
 
 from nextpy.core.router import Router, Route, DynamicRoute
 from nextpy.core.renderer import Renderer

{nextpy_framework-3.7.2 → nextpy_framework-3.8.0}/.nextpy_framework/nextpy/cli.py

@@ -243,7 +243,7 @@ def cli():
 
 
 @cli.command()
-@click.option("--port", "-p", default=5000, help="Port to run the server on")
+@click.option("--port", "-p", default=8000, help="Port to run the server on")
 @click.option("--host", "-h", default="0.0.0.0", help="Host to bind to")
 @click.option("--reload/--no-reload", default=True, help="Enable hot reload")
 @click.option("--debug/--no-debug", default=True, help="Enable debug mode")
@@ -322,6 +322,7 @@ def dev(port: int, host: str, reload: bool, debug: bool):
         # Enhanced reload patterns for JSX files
         reload_includes = [
             "*.py",
+            "*.psx",
             "*.py.jsx",
             "*.jsx",
             "*.html",
@@ -627,12 +628,8 @@ def create(name: str, psx: bool, template: str):
                 f"  💡 Check the error message above for more details", fg="yellow"
             )
         )
-        # Clean up partial creation
-
         # Clean up partial creation
         if project_dir.exists():
-            import shutil
-
             shutil.rmtree(project_dir, ignore_errors=True)
 
         click.echo(click.style(f"  🧹 Cleaned up partial files", fg="yellow"))
@@ -997,7 +994,10 @@ def _generate_page(name: str):
     page_path.parent.mkdir(parents=True, exist_ok=True)
 
     content = f'''"""Generated {name} page"""
+    
+from nextpy.psx import interactive_component as component
 
+@component
 def {name.title()}(props = None):
     """{name.title()} page component"""
     props = props or {{}}
@@ -1105,13 +1105,16 @@ def _create_project_structure(
         "components/ui",
         "components/layout",
         "docs",
+        "hooks",
         "styles",
         "public",
         "public/images",
         "public/fonts",
         "public/css",
         "public/js",
+        "middleware",
         "templates",
+        "tests",
         "utils",
         ".nextpy",
         ".nextpy/plugins",
@@ -1329,213 +1332,132 @@ module.exports = {
         _create_traditional_homepage(project_dir)
 
     (project_dir / "pages" / "index.py").write_text('''"""Interactive Homepage """
-
-from nextpy.psx import component
-
+   from nextpy.psx import interactive_component as component
+    
 
 @component
 def Home(props=None):
     props = props or {}
     title = props.get("title", "Welcome to NextPy!")
     message = props.get("message", "Build amazing web apps with Python and True JSX")
-    
+
     return (
-        <div class="min-h-screen bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
-            <div class="bg-white border-b border-white bg-opacity-10 backdrop-blur-md border-opacity-20">
-                <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
-                    <div class="flex items-center justify-between h-16">
-                        <div class="flex items-center">
-                            <h1 class="text-xl font-bold text-white">NextPy</h1>
-                        </div>
-                        <div class="flex space-x-4">
-                            <a href="/about" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
-                                About
-                            </a>
-                            <a href="/features" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
-                                Features
-                            </a>
-                            <a href="/docs" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
-                                Docs
-                            </a>
-                        </div>
-                    </div>
+        <div class="flex flex-col items-center justify-between min-h-screen p-24 font-sans text-white bg-black">
+            <div class="flex items-center justify-between w-full max-w-5xl text-sm">
+                <p>
+                    Get started by editing index.py in the
+                    <code class="font-mono font-bold">/pages</code>
+                        directory.
+                </p>
+                <div>
+                    <a
+                        href="https://rahimstudios.dev"
+                        class="flex items-center gap-2 hover:underline"
+                    >
+                        By
+                        <span class="font-bold">RahimStudios</span>
+                    </a>
                 </div>
-            </div>   
             </div>
-            
-            
-            
-        </div>
-    )
 
-def getServerSideProps(context):
-    return {
-        "props": {
-            "title": "Welcome to NextPy!",
-            "message": "Build amazing web apps with Python and True JSX"
-        }
-    }
-
-default = Home
-''')
-    click.echo("  Created: pages/index.py ")
+            <div class="flex flex-col items-center gap-8">
+                <div class="flex items-center gap-4">
+                    <h1 class="text-6xl font-bold text-transparent bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text">
+                        NextPy
+                    </h1>
+                    <span class="inline-flex items-center justify-center w-12 h-12 text-lg font-bold bg-gray-800 rounded-full">
+                        3.7.3
+                    </span>
+                </div>
+            </div>
 
-    # Create enhanced about page with interactive features
-    (project_dir / "pages" / "about.py").write_text(
-        '''"""Enhanced About page with True JSX"""
+            <div class="grid w-full max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <a
+                    href="https://nextpy-framework.onrender.com/"
+                    class="p-6 transition-colors border border-gray-700 rounded-lg hover:border-gray-400 group"
+                >
+                    <h2 class="mb-3 text-2xl font-semibold">
+                        Docs
+                        <span class="inline-block transition-transform group-hover:translate-x-1">
+                            -&gt;
+                        </span>
+                    </h2>
+                    <p class="text-sm text-gray-400">
+                        Find in-depth information about NextPy features and API.
+                    </p>
+                </a>
 
-from nextpy.psx import component
+                <a
+                    href="https://nextpy-framework.onrender.com/learn"
+                    class="p-6 transition-colors border border-gray-700 rounded-lg hover:border-gray-400 group"
+                >
+                    <h2 class="mb-3 text-2xl font-semibold">
+                        Learn
+                        <span class="inline-block transition-transform group-hover:translate-x-1">
+                            -&gt;
+                        </span>
+                    </h2>
+                    <p class="text-sm text-gray-400">
+                        Learn about NextPy in an interactive course with quizzes!
+                    </p>
+                </a>
 
+                <a
+                    href="https://nextpy-framework.onrender.com/templates"
+                    class="p-6 transition-colors border border-gray-700 rounded-lg hover:border-gray-400 group"
+                >
+                    <h2 class="mb-3 text-2xl font-semibold">
+                        Templates
+                        <span class="inline-block transition-transform group-hover:translate-x-1">
+                            -&gt;
+                        </span>
+                    </h2>
+                    <p class="text-sm text-gray-400">
+                        Explore starter templates for NextPy.
+                    </p>
+                </a>
 
-@component
-def About(props=None):
-    """About page component with interactive features"""
-    props = props or {}
-    
-    title = props.get("title", "About NextPy")
-    description = props.get("description", "The Python web framework that brings React-like development to Python")
-    
-    return (
-        <div class="min-h-screen bg-gray-50">
-                        <div class="text-white bg-gradient-to-r from-blue-600 to-purple-600">
-                <div class="px-4 py-16 mx-auto max-w-7xl sm:py-24 sm:px-6 lg:px-8">
-                    <div class="text-center">
-                        <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
-                            {title}
-                        </h1>
-                        <p class="max-w-2xl mx-auto mt-6 text-xl text-blue-100">
-                            {description}
-                        </p>
-                        <div class="flex justify-center mt-10 space-x-4">
-                            <a href="/features" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-blue-600 bg-white border border-transparent rounded-md hover:bg-blue-50 md:py-4 md:text-lg md:px-10">
-                                Explore Features
-                            </a>
-                            <a href="/getting-started" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 md:py-4 md:text-lg md:px-10">
-                                Get Started
-                            </a>
-                        </div>
-                    </div>
-                </div>
+                <a
+                    href="https://nextpy-framework.onrender.com/deploy"
+                    class="p-6 transition-colors border border-gray-700 rounded-lg hover:border-gray-400 group"
+                >
+                    <h2 class="mb-3 text-2xl font-semibold">
+                        Deploy
+                        <span class="inline-block transition-transform group-hover:translate-x-1">
+                            -&gt;
+                        </span>
+                    </h2>
+                    <p class="text-sm text-gray-400">
+                        Instantly deploy your NextPy site to a shareable URL with RahimStudios.
+                    </p>
+                </a>
             </div>
-            
-            
         </div>
     )
 
+
 def getServerSideProps(context):
     return {
         "props": {
-            "title": "About NextPy",
-            "description": "The Python web framework that brings React-like development to Python"
+            "title": "Welcome to NextPy!",
+            "message": "Build amazing web apps with Python and True JSX"
         }
     }
 
-default = About
-'''
-    )
-    click.echo("  Created: pages/about.py (enhanced interactive page)")
-
-    # Create interactive demo pages
-    (project_dir / "pages" / "interactive.py").write_text('''"""Interactive Demo Page"""
 
-from nextpy.psx import component
+default = Home                                                 
 
 
-@component
-def InteractiveDemo(props=None):
-    """Interactive demo showcasing NextPy capabilities"""
-    return (
-        <div class="min-h-screen py-12 bg-gradient-to-br from-indigo-50 to-purple-100">
-            <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
-                <h1 class="mb-12 text-4xl font-extrabold text-center text-gray-900">
-                    Interactive NextPy Demos
-                </h1>
-                
-                <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-                    
-                    <div class="p-6 bg-white shadow-lg rounded-xl">
-                        <h2 class="mb-4 text-2xl font-bold text-gray-900">Live Counter</h2>
-                        <div class="text-center">
-                            <div class="mb-4 text-6xl font-bold text-blue-600" id="counter">0</div>
-                            <div class="space-x-4">
-                                <button onclick="updateCounter(-1)" class="px-6 py-3 text-white transition-colors bg-red-500 rounded-lg hover:bg-red-600">
-                                    -
-                                </button>
-                                <button onclick="updateCounter(1)" class="px-6 py-3 text-white transition-colors bg-green-500 rounded-lg hover:bg-green-600">
-                                    +
-                                </button>
-                                <button onclick="resetCounter()" class="px-6 py-3 text-white transition-colors bg-gray-500 rounded-lg hover:bg-gray-600">
-                                    Reset
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    
-                    <div class="p-6 bg-white shadow-lg rounded-xl">
-                        <h2 class="mb-4 text-2xl font-bold text-gray-900">Todo List</h2>
-                        <div class="space-y-4">
-                            <div class="flex space-x-2">
-                                <input type="text" id="todoInput" placeholder="Add a new todo..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg" />
-                                <button onclick="addTodo()" class="px-6 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
-                                    Add
-                                </button>
-                            </div>
-                            <ul id="todoList" class="space-y-2">
-                                
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    
-                    <div class="p-6 bg-white shadow-lg rounded-xl">
-                        <h2 class="mb-4 text-2xl font-bold text-gray-900">Color Picker</h2>
-                        <div class="space-y-4">
-                            <input type="color" id="colorPicker" class="w-full h-20 rounded-lg cursor-pointer" />
-                            <div id="colorDisplay" class="p-4 font-mono text-lg text-center bg-gray-100 rounded-lg">
-                                Selected: #3B82F6
-                            </div>
-                        </div>
-                    </div>
-                    
-                    
-                    <div class="p-6 bg-white shadow-lg rounded-xl">
-                        <h2 class="mb-4 text-2xl font-bold text-gray-900">Form Validation</h2>
-                        <form onsubmit="validateForm(event)" class="space-y-4">
-                            <div>
-                                <label class="block mb-2 text-sm font-medium text-gray-700">Email</label>
-                                <input type="email" id="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="you@example.com" />
-                            </div>
-                            <div>
-                                <label class="block mb-2 text-sm font-medium text-gray-700">Password</label>
-                                <input type="password" id="password" required minlength="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="•••••••••" />
-                            </div>
-                            <button type="submit" class="w-full px-6 py-3 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
-                                Validate & Submit
-                            </button>
-                        </form>
-                        <div id="validationResult" class="hidden p-4 mt-4 rounded-lg">
-                            
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-
-def getServerSideProps(context):
-    return {"props": {}}
-
-default = InteractiveDemo
 ''')
-    click.echo("  Created: pages/interactive.py (interactive demos)")
+    click.echo("  Created: pages/index.py ")
+
 
     (project_dir / "components" / "ui" / "Button.py").write_text(
         '''"""Button component"""
-from nextpy.psx import component
+from nextpy.psx import psx
+
 
 
-@component
 def Button(props = None):
     """Reusable Button component"""
     props = props or {}
@@ -1557,14 +1479,14 @@ def Button(props = None):
     
     class_attr = f"px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 {variant_class} {className}"
     
-    return (
+    return psx(f"
         <button class={class_attr} 
                 id={props.get("id")}
                 disabled={props.get("disabled", False)}
                 onclick={props.get("onClick", "")}>
             {children}
         </button>
-    )
+    ")
 
 default = Button
 '''
@@ -1614,119 +1536,7 @@ default = Layout
     )
     click.echo("  Created: components/layout/Layout.py")
 
-    # Create VS Code configuration for PSX support
-    (project_dir / ".vscode").mkdir(exist_ok=True)
-    (project_dir / ".vscode" / "settings.json").write_text("""{
-  "files.associations": {
-    "*.py": "python",
-    "*.py.jsx": "python",
-    "*.jsx": "javascriptreact"
-  },
-  "emmet.includeLanguages": {
-    "python": "html",
-    "javascriptreact": "html",
-    "typescriptreact": "html"
-  },
-  "emmet.triggerExpansionOnTab": true,
-  "typescript.preferences.includePackageJsonAutoImports": "on",
-  "editor.quickSuggestions": {
-    "strings": true
-  },
-  "editor.suggestSelection": "first",
-  "editor.wordBasedSuggestions": true,
-  "editor.snippetSuggestions": "top",
-  "editor.parameterHints": {
-    "enabled": true
-  },
-  "editor.snippetSuggestions": "top",
-  "html.autoClosingTags": true,
-  "css.autoClosingTags": true,
-  "javascript.autoClosingTags": true,
-  "typescript.autoClosingTags": true,
-  "editor.autoClosingBrackets": "always",
-  "editor.autoClosingQuotes": "always",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
-  },
-  "emmet.preferences": {
-    "css.property.endWithSemicolon": true,
-    "css.value.unit": "rem"
-  },
-  "files.exclude": {
-    "*}__pycache__": true,
-    "*}*.pyc": true,
-    "*}node_modules": true,
-    "*}out": true,
-    "*}.next": true,
-    "*}.pytest_cache": true,
-    "*}.mypy_cache": true
-  },
-  "search.exclude": {
-    "*}node_modules": true,
-    "*}out": true,
-    "*}.next": true,
-    "*}__pycache__": true,
-    "*}.pytest_cache": true,
-    "*}.mypy_cache": true
-  },
-  "python.linting.enabled": true,
-  "python.linting.pylintEnabled": false,
-  "python.linting.flake8Enabled": false,
-  "python.linting.pylintArgs": [
-    "--disable=C0114,C0115,C0116,E1132,E1131,E1130"
-  ],
-  "python.formatting.provider": "black",
-  "[python]": {
-    "editor.defaultFormatter": "ms-python.black-formatter",
-    "editor.formatOnSave": true,
-    "editor.rulers": [88],
-    "editor.tabSize": 4,
-    "editor.insertSpaces": true
-  }
-}""")
-    click.echo("  Created: .vscode/settings.json")
-
-    (project_dir / ".vscode" / "extensions.json").write_text("""{
-  "recommendations": [
-    "ms-python.python",
-    "ms-python.vscode-pylance",
-    "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode",
-    "ms-vscode.vscode-json",
-    "formulahendry.auto-rename-tag",
-    "christian-kohler.path-intellisense",
-    "ms-vscode.vscode-html-css-class-completion",
-    "ms-vscode.vscode-emmet",
-    "ms-vscode.vscode-eslint",
-    "dbaeumer.vscode-eslint",
-    "ms-vscode.vscode-typescript-next",
-    "ritwickdey.liveserver",
-    "ms-vscode.vscode-jest",
-    "esbenp.prettier-vscode",
-    "streetsidesoftware.code-spell-checker",
-    "gruntfuggly.todo-tree",
-    "ms-vscode.vscode-git-graph",
-    "eamodio.gitlens",
-    "ms-vscode.vscode-docker",
-    "ms-vscode.remote-explorer",
-    "ms-vscode-remote.remote-containers",
-    "ms-vscode.vscode-remote-wsl",
-    "redhat.vscode-yaml",
-    "ms-vscode.vscode-markdown",
-    "yzhang.markdown-all-in-one",
-    "shd101wyy.markdown-preview-enhanced",
-    "ms-vscode.vscode-python",
-    "kevinrose.vsc-python-indent",
-    "ms-python.black-formatter",
-    "ms-python.isort",
-    "ms-python.flake8",
-    "ms-python.mypy-type-checker"
-  ]
-}""")
-    click.echo("  Created: .vscode/extensions.json")
-
+    
     # Create comprehensive API examples
     (project_dir / "pages" / "api" / "hello.py").write_text(
         '''"""API example - Hello endpoint"""
@@ -2209,77 +2019,6 @@ Thumbs.db
 ''')
     click.echo("  Created: .gitignore")
 
-    # Create main.py with Tailwind compilation (for pip-installed NextPy)
-    (project_dir / "main.py").write_text('''"""NextPy ASGI Application Entry Point"""
-
-import os
-import sys
-import subprocess
-from pathlib import Path
-
-try:
-    print("Compiling Tailwind CSS...")
-    proj_root = Path.cwd()
-    framework_dir = Path(__file__).parent
-    # If the project root doesn't have a styles.css yet, warn the user and create a minimal one.
-    styles_file = proj_root / "styles.css"
-    if not styles_file.exists():
-        print("Warning: styles.css not found, creating a minimal file.")
-        styles_file.write_text("@tailwind base;\n@tailwind components;\n@tailwind utilities;\n")
-
-    import shutil
-    npm_bin = shutil.which("npm")
-    if not npm_bin:
-        raise FileNotFoundError("npm not found on PATH")
-
-    lockfile = framework_dir / "package-lock.json"
-    node_modules = framework_dir / "node_modules"
-    if not node_modules.exists():
-        if lockfile.exists():
-            subprocess.run([npm_bin, "ci"], cwd=str(framework_dir), check=True)
-        else:
-            subprocess.run([npm_bin, "install"], cwd=str(framework_dir), check=True)
-
-    subprocess.run([npm_bin, "run", "build:tailwind"], cwd=str(framework_dir), check=True)
-    print("Tailwind CSS compiled successfully.")
-except subprocess.CalledProcessError as e:
-    print(f"Error compiling Tailwind CSS: {e}")
-    print("You can also run `cd .nextpy_framework/nextpy && npm ci && npm run build:tailwind` manually.")
-except FileNotFoundError:
-    print("Error: npm not found. Make sure Node.js is installed and available on PATH.")
-    print("See https://nodejs.org/ for installation instructions.")
-
-# Import NextPy modules (works when installed via pip)
-from nextpy.server.app import create_app
-from nextpy.db import init_db
-from nextpy.config import settings
-
-# Initialize database
-try:
-    init_db(settings["database_url"])
-    print("Database initialized successfully.")
-except Exception as e:
-    print(f"Warning: Database initialization failed: {e}")
-
-# Create NextPy app with file-based routing
-app = create_app(
-    pages_dir="pages",
-    templates_dir="templates", 
-    public_dir="public",
-    out_dir="out",
-    debug=settings["debug"],
-)
-
-# Note: Routes are automatically loaded from pages/ directory
-# - / -> pages/index.py
-# - /about -> pages/about.py  
-# - /api/* -> pages/api/*.py
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
-''')
-    click.echo("  Created: main.py (pip-compatible)")
 
     # Create .env file for development
     (project_dir / ".env").write_text("""# NextPy Development Environment

{nextpy_framework-3.7.2 → nextpy_framework-3.8.0}/.nextpy_framework/nextpy/core/component_renderer.py

@@ -243,7 +243,7 @@ class ComponentRenderer:
             elif has_interactive_decorator and not hasattr(component, '__wrapped__'):
                 # The original file had @interactive_component but the decorator wasn't applied
                 # This means we need to apply the decorator to the rendered HTML
-                html = self._apply_interactive_component_to_rendered_html(rendered, original_content, page_props)
+                html = self._apply_interactive_component_to_rendered_html(file_path, rendered, original_content, page_props)
             else:
                 # Convert to HTML, passing page props as context for {expressions}
                 # Check if this is a PSX component and handle Server/Client components
@@ -320,9 +320,20 @@ class ComponentRenderer:
 
         # 🔥 Inject Dev Tools (only in dev mode)
         dev_scripts = ""
+
+        # Ensure the Action runtime is always available on the page.
+        # Your button onclick handlers expect window.NextPyActionRuntime.
+        action_runtime_script = ""
+        try:
+            from ..psx.runtime.js_actions_runtime import JS_ACTION_RUNTIME_SCRIPT
+            action_runtime_script = f"<script>{JS_ACTION_RUNTIME_SCRIPT}</script>\n"
+        except ImportError:
+            action_runtime_script = ""
+
         if dev_mode:
             dev_scripts = """
     <script>
+
     /* ===============================
     NextPy Live Error Overlay
     ================================ */
@@ -581,14 +592,7 @@ class ComponentRenderer:
 
     <link rel="stylesheet" href="./public/tailwind.css">
 
-    <style>
-    * {{ margin: 0; padding: 0; box-sizing: border-box; }}
-
-    body {{
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      
-    }}
-    </style>
+    
 
     </head>
 
@@ -598,11 +602,12 @@ class ComponentRenderer:
     {content}
     </div>
 
-    {dev_scripts}
+    {action_runtime_script}{dev_scripts}
 
     </body>
     </html>
     """
+
         
    
 
@@ -895,6 +900,8 @@ class ComponentRenderer:
             # Extract handlers from the original content
             handlers = extract_handler_functions(lambda: None)  # We'll parse the content directly
             
+            print(f"new keys {handlers}")
+            
             # Parse the original content to find handler functions
             import re
             handler_pattern = r'def\s+(\w+)\s*\([^)]*\)\s*:'
@@ -933,6 +940,7 @@ class ComponentRenderer:
             # Extract state keys
             state_pattern = r'\[(\w+),\s*set\w+\]\s*=\s*useState'
             state_keys = re.findall(state_pattern, original_content)
+            print(f"here new keys {state_keys}")
             
             # Convert handler attributes in HTML
             html_with_handlers = convert_handler_attributes_in_html(rendered_html, handlers, state_keys)
@@ -957,7 +965,7 @@ class ComponentRenderer:
             
             # Generate scripts
             full_script = engine.generate_hydration_script()
-            handler_script = generate_handler_registration_script(handlers, component_id, state_keys=state_keys)
+            handler_script = generate_handler_registration_script(handlers, component_id, state_keys=state_keys, html=html_with_handlers)
             hydrator = get_component_hydrator()
             hydration_script = hydrator.generate_hydration_script()