jac-client 0.2.6__py3-none-any.whl → 0.2.8__py3-none-any.whl

jac_client/plugin/src/impl/vite_bundler.impl.jac

@@ -1,11 +1,24 @@
-"""Create package.json from config.json during bundling."""
+"""Get the client build directory from project config."""
+impl ViteBundler._get_client_dir(self: ViteBundler) -> Path {
+    # Try to get from project config
+    try {
+        import from jaclang.project.config { get_config }
+        config = get_config();
+        if config is not None {
+            return config.get_client_dir();
+        }
+    } except ImportError { }
+    # Fallback to default
+    return self.project_dir / '.jac' / 'client';
+}
 
+"""Create package.json from config.json during bundling."""
 impl ViteBundler.create_package_json(
     self: ViteBundler, project_name: Optional[str] = None
 ) -> Path {
-    build_dir = self.project_dir / '.client-build';
-    build_dir.mkdir(exist_ok=True);
-    configs_dir = build_dir / '.jac-client.configs';
+    build_dir = self._get_client_dir();
+    build_dir.mkdir(parents=True, exist_ok=True);
+    configs_dir = build_dir / 'configs';
     configs_dir.mkdir(exist_ok=True);
     package_config = self.config_loader.get_package_config();
     package_json_path = configs_dir / 'package.json';
@@ -29,32 +42,12 @@ impl ViteBundler.create_package_json(
     if not name {
         name = self.project_dir.name or 'jac-app';
     }
-    # Default hardcoded dependencies (always included)
-    default_dependencies = {
-        'react': '^18.2.0',
-        'react-dom': '^18.2.0',
-        'react-router-dom': '^6.22.0'
-    };
-    default_dev_dependencies = {
-        'vite': '^6.4.1',
-        '@babel/cli': '^7.28.3',
-        '@babel/core': '^7.28.5',
-        '@babel/preset-env': '^7.28.5',
-        '@babel/preset-react': '^7.28.5',
-        '@vitejs/plugin-react': '^4.2.1',
-        'typescript': '^5.3.3',
-        '@types/react': '^18.2.0',
-        '@types/react-dom': '^18.2.0'
-    };
-    # Merge user dependencies from TOML with defaults (user can override)
-    user_dependencies = package_config.get('dependencies', {});
-    user_dev_dependencies = package_config.get('devDependencies', {});
-    dependencies = {** default_dependencies, ** user_dependencies};
-    dev_dependencies = {** default_dev_dependencies, ** user_dev_dependencies};
+    dependencies = package_config.get('dependencies', {});
+    dev_dependencies = package_config.get('devDependencies', {});
     scripts = {
-        'build': 'npm run compile && vite build --config .client-build/.jac-client.configs/vite.config.js',
-        'dev': 'vite dev --config .client-build/.jac-client.configs/vite.config.js',
-        'preview': 'vite preview --config .client-build/.jac-client.configs/vite.config.js',
+        'build': 'npm run compile && vite build --config .jac/client/configs/vite.config.js',
+        'dev': 'vite dev --config .jac/client/configs/vite.config.js',
+        'preview': 'vite preview --config .jac/client/configs/vite.config.js',
         'compile': 'babel compiled --out-dir build --extensions ".jsx,.js" --out-file-extension .js'
     };
     user_scripts = package_config.get('scripts', {});
@@ -90,9 +83,9 @@ impl ViteBundler.create_package_json(
 
 """Create tsconfig.json during build time, merging user config from jac.toml."""
 impl ViteBundler.create_tsconfig(self: ViteBundler) -> Path {
-    build_dir = self.project_dir / '.client-build';
-    build_dir.mkdir(exist_ok=True);
-    configs_dir = build_dir / '.jac-client.configs';
+    build_dir = self._get_client_dir();
+    build_dir.mkdir(parents=True, exist_ok=True);
+    configs_dir = build_dir / 'configs';
     configs_dir.mkdir(exist_ok=True);
     tsconfig_path = configs_dir / 'tsconfig.json';
     # Default tsconfig settings
@@ -114,7 +107,7 @@ impl ViteBundler.create_tsconfig(self: ViteBundler) -> Path {
         'noFallthroughCasesInSwitch': True
     };
     default_include = ['components/**/*'];
-    default_exclude = ['.client-build'];
+    default_exclude = ['.jac'];
     # Get user config from [plugins.client.ts] in jac.toml
     user_ts_config = self.config_loader.get_ts_config();
     user_compiler_options = user_ts_config.get('compilerOptions', {});
@@ -130,21 +123,21 @@ impl ViteBundler.create_tsconfig(self: ViteBundler) -> Path {
         'include': merged_include,
         'exclude': merged_exclude
     };
-    # Write the config to .client-build/.jac-client.configs/tsconfig.json (no root config file)
+    # Write the config to .jac/client/configs/tsconfig.json (no root config file)
     tsconfig_path.write_text(json.dumps(tsconfig_data, indent=2), encoding='utf-8');
     return tsconfig_path;
 }
 
 """
-Clean up root package.json and move package-lock.json to .jac-client.configs/.
+Clean up root package.json and move package-lock.json to configs/.
 
-        Remove root package.json and move package-lock.json to .jac-client.configs/.
+        Remove root package.json and move package-lock.json to configs/.
 """
 impl ViteBundler._cleanup_root_package_files(self: ViteBundler) -> None {
     root_package_json = self.project_dir / 'package.json';
     root_package_lock = self.project_dir / 'package-lock.json';
-    build_dir = self.project_dir / '.client-build';
-    configs_dir = build_dir / '.jac-client.configs';
+    build_dir = self._get_client_dir();
+    configs_dir = build_dir / 'configs';
     configs_package_lock = configs_dir / 'package-lock.json';
     if root_package_lock.exists() {
         configs_dir.mkdir(exist_ok=True);
@@ -164,7 +157,7 @@ Ensure root package.json exists temporarily for npm commands.
         Create root package.json temporarily if it doesn't exist.
 """
 impl ViteBundler._ensure_root_package_json(self: ViteBundler) -> None {
-    generated_package_json = self.project_dir / '.client-build' / '.jac-client.configs' / 'package.json';
+    generated_package_json = self._get_client_dir() / 'configs' / 'package.json';
     root_package_json = self.project_dir / 'package.json';
     if not generated_package_json.exists() {
         self.create_package_json();
@@ -235,51 +228,28 @@ impl ViteBundler._get_plugin_var_name(self: ViteBundler, plugin_name: str) -> st
 
 """Create vite.config.js from config.json during bundling."""
 impl ViteBundler.create_vite_config(self: ViteBundler, entry_file: Path) -> Path {
-    build_dir = self.project_dir / '.client-build';
-    build_dir.mkdir(exist_ok=True);
-    configs_dir = build_dir / '.jac-client.configs';
+    build_dir = self._get_client_dir();
+    build_dir.mkdir(parents=True, exist_ok=True);
+    configs_dir = build_dir / 'configs';
     configs_dir.mkdir(exist_ok=True);
     vite_config_data = self.config_loader.get_vite_config();
     config_path = configs_dir / 'vite.config.js';
     # TypeScript is always enabled by default
-    build_dir = self.project_dir / '.client-build';
     try {
-        # Entry file path relative to .client-build/ (not project root)
+        # Entry file path relative to client build dir (not project root)
         entry_relative = entry_file.relative_to(build_dir).as_posix();
     } except ValueError {
-        # Fallback: try relative to project_dir and strip .client-build/ prefix
-        try {
-            entry_relative_full = entry_file.relative_to(self.project_dir).as_posix();
-            prefix = '.client-build/';
-            if entry_relative_full.startswith(prefix) {
-                # Remove '.client-build/' prefix (15 characters)
-                entry_relative = entry_relative_full[15:];
-            } else {
-                entry_relative = entry_relative_full;
-            }
-        } except ValueError {
-            entry_relative = entry_file.as_posix();
-        }
+        # Fallback: use absolute path
+        entry_relative = entry_file.as_posix();
     }
     try {
-        # Output dir path relative to .client-build/ (not project root)
+        # Output dir path relative to client build dir (not project root)
         output_relative = self.output_dir.relative_to(build_dir).as_posix();
     } except ValueError {
-        # Fallback: try relative to project_dir and strip .client-build/ prefix
-        try {
-            output_relative_full = self.output_dir.relative_to(self.project_dir).as_posix();
-            prefix = '.client-build/';
-            if output_relative_full.startswith(prefix) {
-                # Remove '.client-build/' prefix (15 characters)
-                output_relative = output_relative_full[15:];
-            } else {
-                output_relative = output_relative_full;
-            }
-        } except ValueError {
-            output_relative = self.output_dir.as_posix();
-        }
+        # Fallback: use absolute path
+        output_relative = self.output_dir.as_posix();
     }
-    # Calculate compiled directory path for aliases (relative to .client-build/)
+    # Calculate compiled directory path for aliases (relative to client build dir)
     if entry_relative.endswith('/build/main.js') {
         compiled_utils_relative = entry_relative[:-13] + '/compiled/client_runtime.js';
         compiled_assets_relative = entry_relative[:-13] + '/compiled/assets';
@@ -333,9 +303,9 @@ impl ViteBundler.create_vite_config(self: ViteBundler, entry_file: Path) -> Path
 import path from "path";
 import {{ fileURLToPath }} from "url";
 {imports_section}const __dirname = path.dirname(fileURLToPath(import.meta.url));
-// Config is in .jac-client.configs/ inside .client-build/, so go up one level to .client-build/, then up one more to project root
+// Config is in configs/ inside .jac/client/, so go up one level to .jac/client/, then up two more to project root
 const buildDir = path.resolve(__dirname, "..");
-const projectRoot = path.resolve(__dirname, "../..");
+const projectRoot = path.resolve(__dirname, "../../..");
 
 /**
  * Vite configuration generated from config.json (in project root)
@@ -344,13 +314,13 @@ const projectRoot = path.resolve(__dirname, "../..");
 
 export default defineConfig({{
   plugins: [{(newline + plugins_str + newline + '  ') if plugins_str else ''}],
-  root: buildDir, // base folder (.client-build/) so vite can find node_modules
+  root: buildDir, // base folder (.jac/client/) so vite can find node_modules
     build: {{
     rollupOptions: {{
       input: path.resolve(buildDir, "{entry_relative}"), // your compiled entry file
       output: {{
         entryFileNames: "client.[hash].js", // name of the final js file
-        assetFileNames: "[name].[ext]",
+        assetFileNames: (assetInfo) => assetInfo.name?.endsWith('.css') ? 'styles.css' : '[name].[ext]',
       }},
     }},
     outDir: path.resolve(buildDir, "{output_relative}"), // final bundled output
@@ -391,14 +361,8 @@ impl ViteBundler.read_bundle(self: ViteBundler) -> tuple[str, str] {
 
 """Find the generated Vite CSS file."""
 impl ViteBundler.find_css(self: ViteBundler) -> Optional[Path] {
-    css_file = self.output_dir / 'main.css';
-    if css_file.exists() {
-        return css_file;
-    }
-    for file in self.output_dir.glob('*.css') {
-        return file;
-    }
-    return None;
+    css_file = self.output_dir / 'styles.css';
+    return css_file if css_file.exists() else None;
 }
 
 """Find the generated Vite bundle file."""
@@ -409,10 +373,10 @@ impl ViteBundler.find_bundle(self: ViteBundler) -> Optional[Path] {
     return None;
 }
 
-"""Run Vite build with generated config in .client-build/.jac-client.configs/."""
+"""Run Vite build with generated config in .jac/client/configs/."""
 impl ViteBundler.build(self: ViteBundler, entry_file: Optional[Path] = None) -> None {
     self.output_dir.mkdir(parents=True, exist_ok=True);
-    generated_package_json = self.project_dir / '.client-build' / '.jac-client.configs' / 'package.json';
+    generated_package_json = self._get_client_dir() / 'configs' / 'package.json';
     if not generated_package_json.exists() {
         self.create_package_json();
     } else {
@@ -420,18 +384,18 @@ impl ViteBundler.build(self: ViteBundler, entry_file: Optional[Path] = None) ->
         self.create_tsconfig();
     }
     try {
-        build_dir = self.project_dir / '.client-build';
+        build_dir = self._get_client_dir();
         node_modules = build_dir / 'node_modules';
         if not node_modules.exists() {
-            # Temporarily copy package.json to .client-build/ for npm install
+            # Temporarily copy package.json to client build dir for npm install
             build_package_json = build_dir / 'package.json';
-            configs_package_json = build_dir / '.jac-client.configs' / 'package.json';
+            configs_package_json = build_dir / 'configs' / 'package.json';
             if configs_package_json.exists() and not build_package_json.exists() {
                 import shutil;
                 shutil.copy2(configs_package_json, build_package_json);
             }
             try {
-                # Install to .client-build/node_modules
+                # Install to .jac/client/node_modules
                 subprocess.run(
                     ['npm', 'install'],
                     cwd=build_dir,
@@ -449,27 +413,24 @@ impl ViteBundler.build(self: ViteBundler, entry_file: Optional[Path] = None) ->
                 ) ;
             }
         }
-        build_dir = self.project_dir / '.client-build';
         if self.config_path {
             # Make config path relative to build_dir (where vite runs from)
-            config_str = str(self.config_path);
-            if '.client-build' in config_str {
-                # Config is in .client-build/, make it relative to build_dir
+            try {
                 config_rel = self.config_path.relative_to(build_dir);
                 command = ['npx', 'vite', 'build', '--config', str(config_rel)];
-            } else {
-                # Config is outside .client-build/, use absolute path
+            } except ValueError {
+                # Config is outside client build dir, use absolute path
                 command = ['npx', 'vite', 'build', '--config', str(self.config_path)];
             }
         } elif entry_file {
             generated_config = self.create_vite_config(entry_file);
-            # Config is in .client-build/.jac-client.configs/, make it relative to build_dir
+            # Config is in configs/, make it relative to build_dir
             config_rel = generated_config.relative_to(build_dir);
             command = ['npx', 'vite', 'build', '--config', str(config_rel)];
         } else {
             command = ['npm', 'run', 'build'];
         }
-        # Run vite from .client-build/ directory so it can find node_modules
+        # Run vite from client build directory so it can find node_modules
         result = subprocess.run(
             command, cwd=build_dir, check=False, capture_output=True, text=True
         );
@@ -480,15 +441,15 @@ impl ViteBundler.build(self: ViteBundler, entry_file: Optional[Path] = None) ->
             ) from None ;
         }
     } finally {
-        # Clean up temporary package.json in .client-build/
+        # Clean up temporary package.json in client build dir
         build_package_json = build_dir / 'package.json';
         if build_package_json.exists() {
             build_package_json.unlink();
         }
-        # Move package-lock.json to .jac-client.configs/ if it exists
+        # Move package-lock.json to configs/ if it exists
         build_package_lock = build_dir / 'package-lock.json';
         if build_package_lock.exists() {
-            configs_package_lock = build_dir / '.jac-client.configs' / 'package-lock.json';
+            configs_package_lock = build_dir / 'configs' / 'package-lock.json';
             if configs_package_lock.exists() {
                 configs_package_lock.unlink();
             }
@@ -506,8 +467,160 @@ impl ViteBundler.init(
     config_path: Optional[Path] = None
 ) {
     self.project_dir = project_dir;
-    self.output_dir = output_dir or (project_dir / '.client-build' / 'dist');
     self.minify = minify;
     self.config_path = config_path;
     self.config_loader = JacClientConfig(project_dir);
+    # Set output_dir after config_loader is initialized so _get_client_dir works
+    self.output_dir = output_dir or (self._get_client_dir() / 'dist');
+}
+
+"""Create a dev-mode vite config with API proxy for HMR."""
+impl ViteBundler.create_dev_vite_config(
+    self: ViteBundler, entry_file: Path, api_port: int = 8000
+) -> Path {
+    build_dir = self._get_client_dir();
+    build_dir.mkdir(parents=True, exist_ok=True);
+    configs_dir = build_dir / 'configs';
+    configs_dir.mkdir(exist_ok=True);
+    config_path = configs_dir / 'vite.dev.config.js';
+    # Get entry file relative path
+    try {
+        entry_relative = entry_file.relative_to(build_dir).as_posix();
+    } except ValueError {
+        entry_relative = entry_file.as_posix();
+    }
+    # Calculate paths for aliases
+    if entry_relative.endswith('/build/main.js') {
+        compiled_utils_relative = entry_relative[:-13] + '/compiled/client_runtime.js';
+        compiled_assets_relative = entry_relative[:-13] + '/compiled/assets';
+    } elif entry_relative.endswith('build/main.js') {
+        compiled_utils_relative = 'compiled/client_runtime.js';
+        compiled_assets_relative = 'compiled/assets';
+    } else {
+        compiled_utils_relative = 'compiled/client_runtime.js';
+        compiled_assets_relative = 'compiled/assets';
+    }
+    # Extensions for TypeScript
+    extensions = ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'];
+    extensions_str = ', '.join(f'"{ext}"' for ext in extensions);
+    # Generate dev config with proxy for API routes
+    config_content = f'''import {{ defineConfig }} from "vite";
+import path from "path";
+import {{ fileURLToPath }} from "url";
+import react from "@vitejs/plugin-react";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const buildDir = path.resolve(__dirname, "..");
+const projectRoot = path.resolve(__dirname, "../../..");
+
+/**
+ * Vite DEV configuration for HMR mode
+ * Proxies API routes to Python server at localhost:{api_port}
+ */
+export default defineConfig({{
+  plugins: [react()],
+  root: buildDir,
+  publicDir: false,
+  server: {{
+    watch: {{
+      usePolling: true,
+      interval: 100,
+    }},
+    proxy: {{
+      "/walker": {{
+        target: "http://localhost:{api_port}",
+        changeOrigin: true,
+      }},
+      "/function": {{
+        target: "http://localhost:{api_port}",
+        changeOrigin: true,
+      }},
+      "/user": {{
+        target: "http://localhost:{api_port}",
+        changeOrigin: true,
+      }},
+      "/introspect": {{
+        target: "http://localhost:{api_port}",
+        changeOrigin: true,
+      }},
+    }},
+  }},
+  resolve: {{
+    alias: {{
+      "@jac-client/utils": path.resolve(buildDir, "{compiled_utils_relative}"),
+      "@jac-client/assets": path.resolve(buildDir, "{compiled_assets_relative}"),
+    }},
+    extensions: [{extensions_str}],
+  }},
+}});
+''';
+    config_path.write_text(config_content, encoding='utf-8');
+    return config_path;
+}
+
+"""Start Vite dev server as a subprocess."""
+impl ViteBundler.start_dev_server(self: ViteBundler, port: int = 3000) -> Any {
+    build_dir = self._get_client_dir();
+    node_modules = build_dir / 'node_modules';
+    # Create/update index.html for dev server (load from compiled/ for HMR)
+    index_html = build_dir / 'index.html';
+    index_content = '''<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jac App (Dev)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/compiled/_entry.js"></script>
+  </body>
+</html>
+''';
+    index_html.write_text(index_content, encoding='utf-8');
+    # Ensure dependencies are installed
+    if not node_modules.exists() {
+        generated_package_json = build_dir / 'configs' / 'package.json';
+        if not generated_package_json.exists() {
+            self.create_package_json();
+        }
+        # Temporarily copy package.json for npm install
+        build_package_json = build_dir / 'package.json';
+        if not build_package_json.exists() {
+            shutil.copy2(generated_package_json, build_package_json);
+        }
+        try {
+            print("[Vite] Installing dependencies...");
+            subprocess.run(
+                ['npm', 'install'],
+                cwd=build_dir,
+                check=True,
+                capture_output=True,
+                text=True
+            );
+        } except subprocess.CalledProcessError as e {
+            print(f"[Vite] Error installing dependencies: {e.stderr}");
+            raise ;
+        } finally {
+            # Clean up temp package.json
+            if build_package_json.exists() {
+                build_package_json.unlink();
+            }
+        }
+    }
+    # Find the dev config
+    dev_config = build_dir / 'configs' / 'vite.dev.config.js';
+    if not dev_config.exists() {
+        raise ClientBundleError(
+            "Dev config not found. Call create_dev_vite_config first."
+        ) ;
+    }
+    config_rel = dev_config.relative_to(build_dir);
+    print(f"[Vite] Starting dev server on port {port}...");
+    # Start Vite in dev mode (let output go to terminal for HMR visibility)
+    process = subprocess.Popen(
+        ['npx', 'vite', '--config', str(config_rel), '--port', str(port)],
+        cwd=build_dir
+    );
+    return process;
 }

jac_client/plugin/src/package_installer.jac

@@ -22,5 +22,5 @@ class PackageInstaller {
         self: PackageInstaller, package_name: str, is_dev: bool = False
     ) -> None;
 
-    def list_packages(self: PackageInstaller) -> dict[str, dict[str, str]];
+    def list_packages(self: PackageInstaller) -> dict[str, dict[(str, str)]];
 }

jac_client/plugin/src/vite_bundler.jac

@@ -4,7 +4,7 @@ import json;
 import shutil;
 import subprocess;
 import from pathlib { Path }
-import from typing { Optional }
+import from typing { Any, Optional }
 import from jaclang.runtimelib.client_bundle { ClientBundleError }
 import from .config_loader { JacClientConfig }
 """Handles Vite bundling operations."""
@@ -17,6 +17,7 @@ class ViteBundler {
         config_path: Optional[Path] = None
     );
 
+    def _get_client_dir(self: ViteBundler) -> Path;
     def build(self: ViteBundler, entry_file: Optional[Path] = None) -> None;
     def find_bundle(self: ViteBundler) -> Optional[Path];
     def find_css(self: ViteBundler) -> Optional[Path];
@@ -33,4 +34,11 @@ class ViteBundler {
     ) -> Path;
 
     def create_tsconfig(self: ViteBundler) -> Path;
+    """Create a dev-mode vite config with API proxy for HMR."""
+    def create_dev_vite_config(
+        self: ViteBundler, entry_file: Path, api_port: int = 8000
+    ) -> Path;
+
+    """Start Vite dev server as a subprocess."""
+    def start_dev_server(self: ViteBundler, port: int = 3000) -> Any;
 }

jac_client/tests/conftest.py

@@ -108,7 +108,7 @@ def npm_cache_dir() -> Generator[Path, None, None]:
     """Session-scoped fixture that provides a directory with npm packages installed.
 
     This runs npm install once per test session and provides the path to the
-    .jac-client.configs directory containing node_modules.
+    .jac/client/configs directory containing node_modules.
     """
     global _npm_cache_dir
 
@@ -156,13 +156,14 @@ def vite_project_dir(npm_cache_dir: Path, tmp_path: Path) -> Path:
     jac_toml = tmp_path / "jac.toml"
     jac_toml.write_text(_get_minimal_jac_toml())
 
-    # Copy .jac-client.configs directory (contains package.json)
-    source_configs = npm_cache_dir / ".jac-client.configs"
-    dest_configs = tmp_path / ".jac-client.configs"
+    # Copy .jac/client/configs directory (contains package.json)
+    source_configs = npm_cache_dir / ".jac" / "client" / "configs"
+    dest_configs = tmp_path / ".jac" / "client" / "configs"
     if source_configs.exists():
+        dest_configs.parent.mkdir(parents=True, exist_ok=True)
         shutil.copytree(source_configs, dest_configs, symlinks=True)
 
-    # Copy node_modules from project root (npm installs there, not in .jac-client.configs)
+    # Copy node_modules from project root (npm installs there, not in .jac/client/configs)
     source_node_modules = npm_cache_dir / "node_modules"
     dest_node_modules = tmp_path / "node_modules"
     if source_node_modules.exists():
@@ -195,10 +196,11 @@ antd = "^6.0.0"
     jac_toml = tmp_path / "jac.toml"
     jac_toml.write_text(jac_toml_content)
 
-    # Copy base .jac-client.configs first for faster install
-    source_configs = npm_cache_dir / ".jac-client.configs"
-    dest_configs = tmp_path / ".jac-client.configs"
+    # Copy base .jac/client/configs first for faster install
+    source_configs = npm_cache_dir / ".jac" / "client" / "configs"
+    dest_configs = tmp_path / ".jac" / "client" / "configs"
     if source_configs.exists():
+        dest_configs.parent.mkdir(parents=True, exist_ok=True)
         shutil.copytree(source_configs, dest_configs, symlinks=True)
 
     # Copy base node_modules for faster install (npm will add antd on top)

jac_client/tests/fixtures/spawn_test/app.jac

@@ -32,51 +32,48 @@ walker positional_walker {
 }
 
 # Client-side code testing both spawn orderings
-cl import from react {
-    useState,
-    useEffect
-}
+cl import from react { useEffect }
 
 cl {
     def app()  -> any {
-        [standardResult, setStandardResult] = useState(None);
-        [standardComputed, setStandardComputed] = useState(None);
-        [reverseResult, setReverseResult] = useState(None);
-        [uuidResult, setUuidResult] = useState(None);
-        [reverseUuidResult, setReverseUuidResult] = useState(None);
-        [positionalResult, setPositionalResult] = useState(None);
-        [spreadResult, setSpreadResult] = useState(None);
+        has standardResult: any = None;
+        has standardComputed: any = None;
+        has reverseResult: any = None;
+        has uuidResult: any = None;
+        has reverseUuidResult: any = None;
+        has positionalResult: any = None;
+        has spreadResult: any = None;
 
         async def loadData()  -> None {
             # Test standard spawn order: node spawn walker()
             data1 = root spawn test_walker();
-            setStandardResult(data1);
+            standardResult = data1;
 
             data2 = root spawn parameterized_walker(value=42);
-            setStandardComputed(data2);
+            standardComputed = data2;
 
             # Test reverse spawn order: walker() spawn node
             data3 = test_walker(message="Reverse spawn!") spawn root;
-            setReverseResult(data3);
+            reverseResult = data3;
 
             # Test spawn with UUID string: uuid_string spawn walker()
             node_id = "550e8400-e29b-41d4-a716-446655440000";
             data4 = node_id spawn test_walker();
-            setUuidResult(data4);
+            uuidResult = data4;
 
             # Test reverse spawn with UUID string: walker() spawn uuid_string
             another_node_id = "6ba7b810-9dad-11d1-80b4-00c04fd430c8";
             data5 = parameterized_walker(value=100) spawn another_node_id;
-            setReverseUuidResult(data5);
+            reverseUuidResult = data5;
 
             # Test positional walker arguments inferred from has fields
             data6 = node_id spawn positional_walker("Node positional", 2);
-            setPositionalResult(data6);
+            positionalResult = data6;
 
             # Test **kwargs via spread when walker is on left-hand side
             extra_fields = {"metadata": {"source": "client-side"}};
             data7 = positional_walker("Spread order", 5, **extra_fields) spawn root;
-            setSpreadResult(data7);
+            spreadResult = data7;
         }
 
         useEffect(lambda   -> None{ loadData();} , []);

jac_client/tests/fixtures/with-ts/app.jac

@@ -1,11 +1,11 @@
 
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import from ".components/Button.tsx" { Button }
 
 cl {
     def app()  -> any {
-        [count, setCount] = useState(0);
+        has count: int = 0;
         useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
         return <div
             style={{padding: "2rem", fontFamily: "Arial, sans-serif"}}
@@ -21,12 +21,12 @@ cl {
             >
                 <Button
                     label="Increment"
-                    onClick={lambda   -> None{ setCount(count + 1);} }
+                    onClick={lambda   -> None{ count = count + 1;} }
                     variant="primary"
                 />
                 <Button
                     label="Reset"
-                    onClick={lambda   -> None{ setCount(0);} }
+                    onClick={lambda   -> None{ count = 0;} }
                     variant="secondary"
                 />
             </div>