jac-client 0.1.0__py3-none-any.whl → 0.2.1__py3-none-any.whl

jac_client/plugin/vite_client_bundle.py

@@ -4,12 +4,11 @@ from __future__ import annotations
 
 import contextlib
 import hashlib
-import json
 import shutil
 import subprocess
 from pathlib import Path
 from types import ModuleType
-from typing import Any, Sequence, TYPE_CHECKING
+from typing import Any, TYPE_CHECKING
 
 from jaclang.runtimelib.client_bundle import (
     ClientBundle,
@@ -53,7 +52,6 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
         and local .js files we embed). Bare package specifiers (e.g., "antd") are left as real
         ES imports so Vite can resolve and bundle them.
         """
-        # TODO: return pure js files separately
         imported_js_modules: list[Path | None] = []
 
         if manifest and manifest.imports:
@@ -86,10 +84,8 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
         self,
         module_path: Path,
         visited: set[Path] | None = None,
-        is_root: bool = False,
         collected_exports: set[str] | None = None,
         collected_globals: dict[str, Any] | None = None,
-        runtime_js: str | None = None,
     ) -> None:
         """Recursively compile/copy .jac/.js imports to temp, skipping bundling.
 
@@ -97,8 +93,6 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
         or copying local JS (.js) into the temp directory. Bare specifiers are left
         untouched for Vite to resolve.
         """
-        from jaclang.runtimelib.machine import JacMachine as Jac
-
         if visited is None:
             visited = set()
         if collected_exports is None:
@@ -111,40 +105,33 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
             return
         visited.add(module_path)
         manifest = None
-        if not is_root:
-            # Compile current module to JS and append registration
-            module_js, mod = self._compile_to_js(module_path)
-            manifest = mod.gen.client_manifest if mod else None
-
-            # Extract exports from manifest
-            exports_list = self._extract_client_exports(manifest)
-            collected_exports.update(exports_list)
-
-            # Build globals map using manifest.globals_values only for non-root
-            non_root_globals: dict[str, Any] = {}
-            if manifest:
-                for name in manifest.globals:
-                    non_root_globals[name] = manifest.globals_values.get(name)
-            collected_globals.update(non_root_globals)
-
-            exposure_js = self._generate_global_exposure_code(exports_list)
-            registration_js = self._generate_registration_js(
-                module_path.stem,
-                exports_list,
-                non_root_globals,
-            )
-            export_block = (
-                f"export {{ {', '.join(exports_list)} }};\n" if exports_list else ""
-            )
 
-            combined_js = f"{module_js}\n{exposure_js}\n{registration_js}\n{runtime_js}\n{export_block}"
-            if self.vite_package_json is not None:
-                (
-                    self.vite_package_json.parent / "temp" / f"{module_path.stem}.js"
-                ).write_text(combined_js, encoding="utf-8")
-        else:
-            mod = Jac.program.mod.hub.get(str(module_path))
-            manifest = mod.gen.client_manifest if mod else None
+        # Compile current module to JS and append registration
+        module_js, mod = self._compile_to_js(module_path)
+        manifest = mod.gen.client_manifest if mod else None
+
+        # Extract exports from manifest
+        exports_list = self._extract_client_exports(manifest)
+        collected_exports.update(exports_list)
+
+        # Build globals map using manifest.globals_values only for non-root
+        non_root_globals: dict[str, Any] = {}
+        if manifest:
+            for name in manifest.globals:
+                non_root_globals[name] = manifest.globals_values.get(name)
+        collected_globals.update(non_root_globals)
+        export_block = (
+            f"export {{ {', '.join(exports_list)} }};\n" if exports_list else ""
+        )
+
+        # inport jacJsx from client_runtime_utils.jac
+        jac_jsx_path = 'import {__jacJsx, __jacSpawn} from "@jac-client/utils";'
+
+        combined_js = f"{jac_jsx_path}\n{module_js}\n{export_block}"
+        if self.vite_package_json is not None:
+            (
+                self.vite_package_json.parent / "src" / f"{module_path.stem}.js"
+            ).write_text(combined_js, encoding="utf-8")
 
         if not manifest or not manifest.imports:
             return
@@ -159,22 +146,24 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
                 self._compile_dependencies_recursively(
                     path_obj,
                     visited,
-                    is_root=False,
                     collected_exports=collected_exports,
                     collected_globals=collected_globals,
-                    runtime_js=runtime_js,
                 )
             elif path_obj.suffix == ".js":
                 try:
                     js_code = path_obj.read_text(encoding="utf-8")
                     if self.vite_package_json is not None:
                         (
-                            self.vite_package_json.parent / "temp" / path_obj.name
+                            self.vite_package_json.parent / "src" / path_obj.name
                         ).write_text(js_code, encoding="utf-8")
                 except FileNotFoundError:
                     pass
             else:
                 # Bare specifiers or other assets handled by Vite
+                if self.vite_package_json is not None and path_obj.is_file():
+                    (self.vite_package_json.parent / "src" / path_obj.name).write_text(
+                        path_obj.read_text(encoding="utf-8"), encoding="utf-8"
+                    )
                 continue
 
     def _compile_bundle(
@@ -183,62 +172,82 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
         module_path: Path,
     ) -> ClientBundle:
         """Override to use Vite bundling instead of simple concatenation."""
-        # Get manifest from JacProgram first to check for imports
-        from jaclang.runtimelib.machine import JacMachine as Jac
 
-        mod = Jac.program.mod.hub.get(str(module_path))
-        manifest = mod.gen.client_manifest if mod else None
+        # Check if package.json exists before proceeding
+        if not self.vite_package_json or not self.vite_package_json.exists():
+            raise ClientBundleError(
+                "Vite package.json not found. Set vite_package_json when using ViteClientBundleBuilder"
+            )
 
-        module_js, _ = self._compile_to_js(module_path)
+        # client_runtime for jac client utils
+        runtime_utils_path = self.runtime_path.parent / "client_runtime.jac"
+        runtimeutils_js, mod = self._compile_to_js(runtime_utils_path)
+        runtimeutils_manifest = mod.gen.client_manifest if mod else None
+        runtimeutils_exports_list = self._extract_client_exports(runtimeutils_manifest)
+
+        # Add React Router exports that are variable declarations (not functions)
+        # These need to be manually added since they're 'let' declarations, not 'def' functions
+        router_exports = [
+            "Router",
+            "Routes",
+            "Route",
+            "Link",
+            "Navigate",
+            "useNavigate",
+            "useLocation",
+            "useParams",
+        ]
+
+        # Combine manifest exports with router exports
+        all_exports = sorted(set(runtimeutils_exports_list + router_exports))
+
+        export_block = (
+            f"export {{ {', '.join(all_exports)} }};\n" if all_exports else ""
+        )
 
-        # Compile runtime to JS and add to temp for Vite to consume
-        runtime_js, mod = self._compile_to_js(self.runtime_path)
+        combined_runtime_utils_js = f"{runtimeutils_js}\n{export_block}"
+        (self.vite_package_json.parent / "src" / "client_runtime.js").write_text(
+            combined_runtime_utils_js, encoding="utf-8"
+        )
 
+        # Get manifest from JacProgram first to check for imports
         # Collect exports/globals across root and recursive deps
-        collected_exports: set[str] = set(self._extract_client_exports(manifest))
-        client_globals_map = self._extract_client_globals(manifest, module)
+        module_js, mod = self._compile_to_js(module_path)
+        module_manifest = mod.gen.client_manifest if mod else None
+        collected_exports: set[str] = set(self._extract_client_exports(module_manifest))
+        client_globals_map = self._extract_client_globals(module_manifest, module)
         collected_globals: dict[str, Any] = dict(client_globals_map)
 
         # Recursively prepare dependencies and accumulate symbols
         self._compile_dependencies_recursively(
             module_path,
-            is_root=True,
             collected_exports=collected_exports,
             collected_globals=collected_globals,
-            runtime_js=runtime_js,
         )
 
+        # Copy assets from root assets/ folder to src/assets/ for @jac-client/assets alias
+        project_dir = self.vite_package_json.parent
+        root_assets_dir = project_dir / "assets"
+        src_assets_dir = project_dir / "src" / "assets"
+        if root_assets_dir.exists() and root_assets_dir.is_dir():
+            self._copy_asset_files(root_assets_dir, src_assets_dir)
+
         client_exports = sorted(collected_exports)
         client_globals_map = collected_globals
 
-        bundle_pieces = []
-
-        # Add main module (without registration_js - we'll handle that in Jac init script)
-        bundle_pieces.extend(
-            [
-                "// Runtime module:",
-                runtime_js,
-                f"// Client module: {module.__name__}",
-                module_js,
-                "",
-            ]
-        )
-
-        # Add global exposure code first (before Jac initialization)
-        global_exposure_code = self._generate_global_exposure_code(client_exports)
-        bundle_pieces.append(global_exposure_code)
+        entry_file = self.vite_package_json.parent / "src" / "main.js"
 
-        # Add Jac runtime initialization script (includes globals)
-        jac_init_script = self._generate_jac_init_script(
-            module_path.stem, client_exports, client_globals_map
-        )
-        bundle_pieces.append(jac_init_script)
+        entry_content = """import React from "react";
+import { createRoot } from "react-dom/client";
+import { app as App } from "./app.js";
 
-        # Do not add export block for root since output is iife
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+"""
+        entry_file.write_text(entry_content, encoding="utf-8")
 
-        # Use Vite bundling instead of simple concatenation
         bundle_code, bundle_hash = self._bundle_with_vite(
-            bundle_pieces, module.__name__, client_exports
+            module.__name__, client_exports
         )
 
         return ClientBundle(
@@ -250,12 +259,11 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
         )
 
     def _bundle_with_vite(
-        self, bundle_pieces: list[str], module_name: str, client_functions: list[str]
+        self, module_name: str, client_functions: list[str]
     ) -> tuple[str, str]:
         """Bundle JavaScript code using Vite for optimization.
 
         Args:
-            bundle_pieces: List of JavaScript code pieces to bundle
             module_name: Name of the module being bundled
             client_functions: List of client function names
 
@@ -272,27 +280,25 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
 
         # Create temp directory for Vite build
         project_dir = self.vite_package_json.parent
-        temp_dir = project_dir / "temp"
-        temp_dir.mkdir(exist_ok=True)
+        src_dir = project_dir / "src"
+        src_dir.mkdir(exist_ok=True)
 
-        # Create entry file with stitched content
-        entry_file = temp_dir / "app.js"
-
-        entry_content = "\n".join(piece for piece in bundle_pieces if piece is not None)
-        entry_file.write_text(entry_content, encoding="utf-8")
-
-        # Create Vite config in the project directory (where node_modules exists)
-        vite_config = project_dir / "temp_vite.config.js"
-        output_dir = self.vite_output_dir or temp_dir / "dist"
-        output_dir.mkdir(exist_ok=True)
-
-        config_content = self._generate_vite_config(entry_file, output_dir)
-        vite_config.write_text(config_content, encoding="utf-8")
+        output_dir = self.vite_output_dir or src_dir / "dist" / "assets"
+        output_dir.mkdir(parents=True, exist_ok=True)
 
         try:
             # Run Vite build from project directory
             # need to install packages you told in package.json inside here
-            command = ["npx", "vite", "build", "--config", str(vite_config)]
+            # first compile the code
+            command = ["npm", "run", "compile"]
+            subprocess.run(
+                command, cwd=project_dir, check=True, capture_output=True, text=True
+            )
+            # Copy CSS and other asset files from src/ to build/ after Babel compilation
+            # Babel only transpiles JS, so we need to manually copy assets
+            self._copy_asset_files(project_dir / "src", project_dir / "build")
+            # then build the code
+            command = ["npm", "run", "build"]
             subprocess.run(
                 command, cwd=project_dir, check=True, capture_output=True, text=True
             )
@@ -302,11 +308,6 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
             raise ClientBundleError(
                 "npx or vite command not found. Ensure Node.js and npm are installed."
             )
-        finally:
-            # Clean up temp config file
-            if vite_config.exists():
-                vite_config.unlink()
-
         # Find the generated bundle file
         bundle_file = self._find_vite_bundle(output_dir)
         if not bundle_file:
@@ -349,122 +350,101 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
             }});
         """
 
+    def _copy_asset_files(self, src_dir: Path, build_dir: Path) -> None:
+        """Copy CSS and other asset files from src/ to build/ directory recursively.
+
+        Babel only transpiles JavaScript files, so CSS and other assets need to be
+        manually copied to the build directory for Vite to resolve them.
+        This method recursively copies assets from subdirectories (e.g., src/assets/)
+        while preserving the directory structure.
+        """
+        if not src_dir.exists():
+            return
+
+        # Ensure build directory exists
+        build_dir.mkdir(parents=True, exist_ok=True)
+
+        # Asset file extensions to copy
+        asset_extensions = {
+            ".css",
+            ".scss",
+            ".sass",
+            ".less",
+            ".svg",
+            ".png",
+            ".jpg",
+            ".jpeg",
+            ".gif",
+            ".webp",
+            ".ico",
+            ".woff",
+            ".woff2",
+            ".ttf",
+            ".eot",
+            ".otf",
+            ".mp4",
+            ".webm",
+            ".mp3",
+            ".wav",
+        }
+
+        def copy_recursive(
+            source: Path, destination: Path, base: Path | None = None
+        ) -> None:
+            """Recursively copy asset files from source to destination.
+
+            Args:
+                source: Source directory to copy from
+                destination: Destination directory to copy to
+                base: Base directory for calculating relative paths (defaults to source)
+            """
+            if not source.exists():
+                return
+
+            if base is None:
+                base = source
+
+            for item in source.iterdir():
+                if item.is_file() and item.suffix.lower() in asset_extensions:
+                    # Preserve relative path structure from base
+                    relative_path = item.relative_to(base)
+                    dest_file = destination / relative_path
+                    dest_file.parent.mkdir(parents=True, exist_ok=True)
+                    with contextlib.suppress(OSError, shutil.Error):
+                        shutil.copy2(item, dest_file)
+                elif item.is_dir():
+                    # Recursively process subdirectories
+                    copy_recursive(item, destination, base)
+
+        # Copy files from src_dir root and recursively from subdirectories
+        copy_recursive(src_dir, build_dir)
+
     def _find_vite_bundle(self, output_dir: Path) -> Path | None:
         """Find the generated Vite bundle file."""
         for file in output_dir.glob("client.*.js"):
             return file
         return None
 
-    def _generate_jac_init_script(
-        self,
-        module_name: str,
-        client_functions: list[str],
-        client_globals: dict[str, Any],
-    ) -> str:
-        """Generate Jac runtime initialization script."""
-        if not client_functions:
-            return ""
-
-        # Generate function map dynamically
-        map_entries = []
-        for func_name in client_functions:
-            map_entries.append(f'    "{func_name}": {func_name}')
-        function_map_str = "{\n" + ",\n".join(map_entries) + "\n}"
-
-        # Generate globals map
-        globals_entries = []
-        for name, value in client_globals.items():
-            identifier = json.dumps(name)
-            try:
-                value_literal = json.dumps(value)
-            except TypeError:
-                value_literal = "null"
-            globals_entries.append(f"{identifier}: {value_literal}")
-        globals_literal = (
-            "{ " + ", ".join(globals_entries) + " }" if globals_entries else "{}"
-        )
-
-        # Find the main app function (usually the last function or one ending with '_app')
-        main_app_func = (
-            "jac_app"  # this need to be always same and defined by our run time
-        )
-        # for func_name in reversed(client_functions):
-        #     if func_name.endswith('_app') or func_name == 'App':
-        #         main_app_func = func_name
-        #         break
-
-        return f"""
-            // --- JAC CLIENT INITIALIZATION SCRIPT ---
-            // Expose functions globally for Jac runtime registration
-            const clientFunctions = {client_functions};
-            const functionMap = {function_map_str};
-            for (const funcName of clientFunctions) {{
-                globalThis[funcName] = functionMap[funcName];
-            }}
-            __jacRegisterClientModule("{module_name}", clientFunctions, {globals_literal});
-            globalThis.start_app = {main_app_func};
-            // Call the start function immediately if we're not hydrating from the server
-            if (!document.getElementById('__jac_init__')) {{
-                globalThis.start_app();
-            }}
-            // --- END JAC CLIENT INITIALIZATION SCRIPT ---
-        """
-
-    def _generate_global_exposure_code(self, client_functions: list[str]) -> str:
-        """Generate code to expose functions globally for Vite IIFE."""
-        if not client_functions:
-            return ""
-
-        # Generate function map dynamically
-        map_entries = []
-        for func_name in client_functions:
-            map_entries.append(f'    "{func_name}": {func_name}')
-        function_map_str = "{\n" + ",\n".join(map_entries) + "\n}"
-
-        return f"""
-            // --- GLOBAL EXPOSURE FOR VITE IIFE ---
-            // Expose functions globally so they're available on globalThis
-            const globalClientFunctions = {client_functions};
-            const globalFunctionMap = {function_map_str};
-            for (const funcName of globalClientFunctions) {{
-                globalThis[funcName] = globalFunctionMap[funcName];
-            }}
-            // --- END GLOBAL EXPOSURE ---
-        """
+    def _find_vite_css(self, output_dir: Path) -> Path | None:
+        """Find the generated Vite CSS file."""
+        # Vite typically outputs CSS as main.css or with a hash
+        # Try main.css first (most common), then any .css file
+        css_file = output_dir / "main.css"
+        if css_file.exists():
+            return css_file
+        # Fallback: find any CSS file
+        for file in output_dir.glob("*.css"):
+            return file
+        return None
 
     def cleanup_temp_dir(self) -> None:
-        """Clean up the temp directory and its contents."""
+        """Clean up the src directory and its contents."""
         if not self.vite_package_json or not self.vite_package_json.exists():
             return
 
         project_dir = self.vite_package_json.parent
-        temp_dir = project_dir / "temp"
+        temp_dir = project_dir / "src"
 
         if temp_dir.exists():
-            with contextlib.suppress(OSError):
+            with contextlib.suppress(OSError, shutil.Error):
                 shutil.rmtree(temp_dir)
-
-    @staticmethod
-    def _generate_registration_js(
-        module_name: str,
-        client_functions: Sequence[str],
-        client_globals: dict[str, Any],
-    ) -> str:
-        """Generate registration code that exposes client symbols globally."""
-        globals_entries: list[str] = []
-        for name, value in client_globals.items():
-            identifier = json.dumps(name)
-            try:
-                value_literal = json.dumps(value)
-            except TypeError:
-                value_literal = "null"
-            globals_entries.append(f"{identifier}: {value_literal}")
-
-        globals_literal = (
-            "{ " + ", ".join(globals_entries) + " }" if globals_entries else "{}"
-        )
-        functions_literal = json.dumps(list(client_functions))
-        module_literal = json.dumps(module_name)
-
-        # Use the registration function from client_runtime.jac
-        return f"__jacRegisterClientModule({module_literal}, {functions_literal}, {globals_literal});"

jac_client/tests/__init__.py

@@ -1,2 +1 @@
 """Tests for jac-client package."""
-

jac_client/tests/fixtures/{client_app.jac → basic-app/app.jac}

@@ -7,7 +7,7 @@ cl obj ButtonProps {
     has color: str = "primary";
 }
 
-cl def client_page() {
+cl def app() {
     let props = ButtonProps(label="Tap Me", color="primary");
     return <div class="app">
         <h1>{API_LABEL}</h1>

jac_client/tests/fixtures/cl_file/app.cl.jac

@@ -0,0 +1,38 @@
+import from react {useState}
+
+
+def app() -> any {
+        let [todos, setTodos] = useState([]);
+        let [input, setInput] = useState("");
+
+        # Event Handler
+        async def addTodo() -> None {
+            if not input.trim() { return; }
+            response = root spawn create_todo(text=input.trim());
+            new_todo = response.reports[0][0];
+            setTodos(todos.concat([new_todo]));
+            setInput("");
+
+            def foo{}
+        }
+
+        return <div>
+            <h2>My Todos</h2>
+            <input
+                value={input}
+                onChange={lambda e: any -> None { setInput(e.target.value); }}
+                onKeyPress={lambda e: any -> None {
+                    if e.key == "Enter" { addTodo(); }
+                }}
+            />
+            <button onClick={addTodo}>Add Todo</button>
+
+            <div>
+                {todos.map(lambda todo: any -> any {
+                    return <div key={todo._jac_id}>
+                        <span>{todo.text}</span>
+                    </div>;
+                })}
+            </div>
+        </div>;
+}

jac_client/tests/fixtures/cl_file/app.jac

@@ -0,0 +1,15 @@
+
+'''Test file for .cl file serves the client module.'''
+
+node Todo {
+    has text: str;
+    has done: bool = False;
+}
+
+walker create_todo {
+    has text: str;
+    can create with `root entry {
+        new_todo = here ++> Todo(text=self.text);
+        report new_todo;
+    }
+}

jac_client/tests/fixtures/{client_app_with_antd.jac → client_app_with_antd/app.jac}

@@ -19,3 +19,10 @@ cl def CardTest() {
     </div>;
 }
 
+cl def app() {
+    return <div>
+        <ButtonTest />
+        <CardTest />
+    </div>;
+}
+

jac_client/tests/fixtures/{js_import.jac → js_import/app.jac}

@@ -14,7 +14,7 @@ cl def JsImportTest() -> any {
     let sum = calculateSum(5, 3);
     let formatter = MessageFormatter("JS");
     let formatted = formatter.format("Hello from JS class");
-    
+
     return <div class="js-import-test">
         <h1>{JS_IMPORT_LABEL}</h1>
         <p>Greeting: {greeting}</p>
@@ -24,7 +24,7 @@ cl def JsImportTest() -> any {
     </div>;
 }
 
-cl def Main() -> any {
+cl def app() -> any {
     return <JsImportTest />;
 }
 

jac_client/tests/fixtures/{relative_import.jac → relative_import/app.jac}

@@ -8,6 +8,6 @@ cl def RelativeImport() -> any {
     </div>;
 }
 
-cl def main() -> any {
+cl def app() -> any {
     return <RelativeImport />;
 }

jac_client/tests/fixtures/{button.jac → relative_import/button.jac}

@@ -1,6 +1,6 @@
 cl import from antd {
     Button
-}   
-cl def CustomButton() -> any { 
+}
+cl def CustomButton() -> any {
     return <Button>Click Me</Button>;
 }