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

jac_client/examples/css-styling/styled-components/styled.js

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    min-height: 100vh;
+    background: linear-gradient(to bottom right, #dbeafe, #e0e7ff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+`;
+
+export const Card = styled.div`
+    background-color: #ffffff;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    padding: 2rem;
+    max-width: 28rem;
+    width: 100%;
+`;
+
+export const Title = styled.h1`
+    font-size: 1.875rem;
+    font-weight: bold;
+    color: #1f2937;
+    text-align: center;
+    margin-bottom: 1.5rem;
+`;
+
+export const Divider = styled.div`
+    height: 1px;
+    background: linear-gradient(to right, transparent, #d1d5db, transparent);
+    margin-bottom: 1.5rem;
+`;
+
+export const CounterSection = styled.div`
+    text-align: center;
+    margin-bottom: 2rem;
+`;
+
+export const Label = styled.div`
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #4b5563;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+`;
+
+export const CountDisplay = styled.div`
+    font-size: 3.75rem;
+    font-weight: bold;
+    transition: color 0.3s ease;
+    color: ${props => props.count === 0 ? "#1f2937" : (props.count > 0 ? "#16a34a" : "#dc2626")};
+`;
+
+export const ButtonGroup = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+`;
+
+export const Button = styled.button`
+    color: #ffffff;
+    font-weight: bold;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+    font-size: 1.25rem;
+    border: none;
+    cursor: pointer;
+    background-color: ${props => props.bgColor};
+
+    &:hover {
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+`;
+
+export const Hint = styled.div`
+    text-align: center;
+    font-size: 0.875rem;
+    color: #6b7280;
+    font-style: italic;
+`;
+

jac_client/examples/css-styling/styled-components/vite.config.js

@@ -0,0 +1,28 @@
+
+import { defineConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});
+

jac_client/examples/css-styling/tailwind-example/.babelrc

@@ -0,0 +1,9 @@
+
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}

jac_client/examples/css-styling/tailwind-example/README.md

@@ -0,0 +1,16 @@
+# tailwind-example
+
+## Running Jac Code
+
+make sure node modules are installed:
+```bash
+npm install
+```
+
+To run your Jac code, use the Jac CLI:
+
+```bash
+jac serve app.jac
+```
+
+Happy coding with Jac!

jac_client/examples/css-styling/tailwind-example/app.jac

@@ -0,0 +1,64 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import ".global.css";
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+
+        useEffect(lambda -> None {
+            console.log("Count changed: ", count);
+        }, [count]);
+
+        let handleIncrement = lambda e: any -> None {
+            setCount(count + 1);
+        };
+
+        let handleDecrement = lambda e: any -> None {
+            setCount(count - 1);
+        };
+
+        let handleReset = lambda e: any -> None {
+            setCount(0);
+        };
+
+        let countColorClass = "text-gray-800" if count == 0 else ("text-green-600" if count > 0 else "text-red-600");
+
+        return <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+            <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full">
+                <h1 className="text-3xl font-bold text-gray-800 text-center mb-6">Counter Application</h1>
+                <div className="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent mb-6"></div>
+
+                <div className="text-center mb-8">
+                    <div className="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Current Count</div>
+                    <div className={"text-6xl font-bold " + countColorClass + " transition-colors duration-300"}>
+                        {count}
+                    </div>
+                </div>
+
+                <div className="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent mb-6"></div>
+
+                <div className="flex justify-center items-center gap-4 mb-6">
+                    <button
+                        className="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleDecrement}>
+                        -
+                    </button>
+                    <button
+                        className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleReset}>
+                        ↻
+                    </button>
+                    <button
+                        className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95 text-xl"
+                        onClick={handleIncrement}>
+                        +
+                    </button>
+                </div>
+
+                <div className="text-center text-sm text-gray-500 italic">
+                    Click the buttons to increment, decrement, or reset the counter
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/css-styling/tailwind-example/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

jac_client/examples/css-styling/tailwind-example/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tailwind-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compile && vite build",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Jac application: tailwind-example",
+  "type": "module",
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1",
+    "tailwindcss": "^4.1.17"
+  }
+}

jac_client/examples/css-styling/tailwind-example/vite.config.js

@@ -0,0 +1,30 @@
+
+import { defineConfig } from "vite";
+import tailwindcss from '@tailwindcss/vite'
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  plugins: [    tailwindcss(),  ],
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});
+

jac_client/examples/with-router/app.jac

@@ -32,7 +32,7 @@ cl {
                 <strong>
                     HashRouter
                 </strong>
-                 for client-side routing.
+                #  for client-side routing.
             </p>
             <p>
                 Current path:

jac_client/plugin/cli.py

@@ -84,6 +84,10 @@ class JacCmd:
                 build_folder = os.path.join(project_path, "build")
                 os.makedirs(build_folder, exist_ok=True)
 
+                # create assets folder for static assets (images, fonts, etc.)
+                assets_folder = os.path.join(project_path, "assets")
+                os.makedirs(assets_folder, exist_ok=True)
+
                 # Update package.json with Jac-specific configuration
                 package_data.update(
                     {
@@ -186,6 +190,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+      "@jac-client/assets": path.resolve(__dirname, "src/assets"),
     },
   },
 });

jac_client/plugin/client.py

@@ -1,7 +1,10 @@
+import hashlib
 import html
+import mimetypes
 import types
+from http.server import BaseHTTPRequestHandler
 from pathlib import Path
-from typing import Any
+from typing import Any, Literal, TypeAlias
 
 from jaclang.runtimelib.client_bundle import ClientBundle
 from jaclang.runtimelib.machine import (
@@ -12,6 +15,11 @@ from jaclang.runtimelib.server import ModuleIntrospector
 
 from .vite_client_bundle import ViteClientBundleBuilder
 
+JsonValue: TypeAlias = (
+    None | str | int | float | bool | list["JsonValue"] | dict[str, "JsonValue"]
+)
+StatusCode: TypeAlias = Literal[200, 201, 400, 401, 404, 503]
+
 
 class JacClientModuleIntrospector(ModuleIntrospector):
     """Jac Client Module Introspector."""
@@ -30,12 +38,28 @@ class JacClientModuleIntrospector(ModuleIntrospector):
 
         bundle_hash = self.ensure_bundle()
 
+        # Find CSS file in dist directory
+        base_path = Path(Jac.base_path_dir)
+        dist_dir = base_path / "dist"
+        css_link = ""
+
+        # Try to find CSS file (main.css is the default Vite output)
+        css_file = dist_dir / "main.css"
+        if css_file.exists():
+            css_hash = hashlib.sha256(css_file.read_bytes()).hexdigest()[:8]
+            css_link = (
+                f'<link rel="stylesheet" href="/static/main.css?hash={css_hash}"/>'
+            )
+
+        head_content = f'<meta charset="utf-8"/>\n            <title>{html.escape(function_name)}</title>'
+        if css_link:
+            head_content += f"\n            {css_link}"
+
         page = (
             "<!DOCTYPE html>"
             '<html lang="en">'
             "<head>"
-            '<meta charset="utf-8"/>'
-            f"<title>{html.escape(function_name)}</title>"
+            f"{head_content}"
             "</head>"
             "<body>"
             '<div id="root"></div>'
@@ -87,3 +111,40 @@ class JacClient:
     ) -> ModuleIntrospector:
         """Get a module introspector for the supplied module."""
         return JacClientModuleIntrospector(module_name, base_path)
+
+    @staticmethod
+    @hookimpl
+    def send_static_file(
+        handler: BaseHTTPRequestHandler,
+        file_path: Path,
+        content_type: str | None = None,
+    ) -> None:
+        """Send static file response (images, fonts, etc.).
+
+        Args:
+            handler: HTTP request handler
+            file_path: Path to the file to serve
+            content_type: MIME type (auto-detected if None)
+        """
+        from jaclang.runtimelib.server import ResponseBuilder
+
+        if not file_path.exists() or not file_path.is_file():
+            ResponseBuilder.send_json(handler, 404, {"error": "File not found"})
+            return
+
+        try:
+            file_content = file_path.read_bytes()
+            if content_type is None:
+                content_type, _ = mimetypes.guess_type(str(file_path))
+                if content_type is None:
+                    content_type = "application/octet-stream"
+
+            handler.send_response(200)
+            handler.send_header("Content-Type", content_type)
+            handler.send_header("Content-Length", str(len(file_content)))
+            handler.send_header("Cache-Control", "public, max-age=3600")
+            ResponseBuilder._add_cors_headers(handler)
+            handler.end_headers()
+            handler.wfile.write(file_content)
+        except Exception as exc:
+            ResponseBuilder.send_json(handler, 500, {"error": str(exc)})

jac_client/plugin/vite_client_bundle.py

@@ -160,6 +160,10 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
                     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(
@@ -221,6 +225,13 @@ class ViteClientBundleBuilder(ClientBundleBuilder):
             collected_globals=collected_globals,
         )
 
+        # 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
 
@@ -283,6 +294,9 @@ root.render(<App />);
             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(
@@ -336,12 +350,93 @@ root.render(<App />);
             }});
         """
 
+    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 _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 src directory and its contents."""
         if not self.vite_package_json or not self.vite_package_json.exists():
@@ -351,5 +446,5 @@ root.render(<App />);
         temp_dir = project_dir / "src"
 
         if temp_dir.exists():
-            with contextlib.suppress(OSError):
+            with contextlib.suppress(OSError, shutil.Error):
                 shutil.rmtree(temp_dir)

jac_client/tests/__init__.py

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

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/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>

jac_client/tests/fixtures/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>;
 }

jac_client/tests/fixtures/test_fragments_spread/app.jac

@@ -11,7 +11,7 @@ cl def FragmentTest() {
 cl def SpreadPropsTest() {
     # Test spread props
     unwrapped = {"id": "my-div", "class": "container", "data-role": "main"};
-    
+
     return <div {...unwrapped}>
         <span>{"Spread props work!"}</span>
     </div>;
@@ -20,7 +20,7 @@ cl def SpreadPropsTest() {
 cl def MixedTest() {
     # Test mixing spread props with regular props
     baseStyle = {"id": "base-id", "color": "blue"};
-    
+
     return <>
         <div {...baseStyle} class="override">
             {"Mixed test"}