jac-client 0.2.0__py3-none-any.whl

jac_client/examples/with-router/.babelrc

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

jac_client/examples/with-router/README.md

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

jac_client/examples/with-router/app.jac

@@ -0,0 +1,323 @@
+# React Router HashRouter Example
+cl import from react { useState, useEffect }
+cl import from "@jac-client/utils" {
+    Router,
+    Routes,
+    Route,
+    Link,
+    useNavigate,
+    useLocation,
+    useParams
+}
+
+cl {
+    # Home Page Component
+    def Home()  -> any {
+        location = useLocation();
+        navigate = useNavigate();
+
+        def goToAbout(e: any) -> None {
+            navigate("/about");
+        }
+
+        return <div>
+            <h1>
+                🏠 Home Page
+            </h1>
+            <p>
+                Welcome to the home page!
+            </p>
+            <p>
+                This example uses React Router's
+                <strong>
+                    HashRouter
+                </strong>
+                 for client-side routing.
+            </p>
+            <p>
+                Current path:
+                <code>
+                    {location.pathname}
+                </code>
+            </p>
+            <button
+                onClick={goToAbout}
+            >
+                Go to About →
+            </button>
+        </div>;
+    }
+
+    # About Page Component
+    def About()  -> any {
+        location = useLocation();
+
+        return <div>
+            <h1>
+                ℹ️ About Page
+            </h1>
+            <p>
+                This is the about page.
+            </p>
+            <p>
+                Learn more about our application here.
+            </p>
+            <p>
+                Current path:
+                <code>
+                    {location.pathname}
+                </code>
+            </p>
+            <div
+                style={{"marginTop": "1rem"}}
+            >
+                <Link to="/about/team">
+                    View Team →
+                </Link>
+            </div>
+        </div>;
+    }
+
+    # Team Page Component (nested route example)
+    def Team()  -> any {
+        return <div>
+            <h1>
+                👥 Our Team
+            </h1>
+            <p>
+                Meet the amazing team behind this project!
+            </p>
+            <Link to="/about">
+                ← Back to About
+            </Link>
+        </div>;
+    }
+
+    # User Profile Component (with URL parameters)
+    def UserProfile()  -> any {
+        params = useParams();
+        userId = params.id if params.id else "Unknown";
+
+        return <div>
+            <h1>
+                👤 User Profile
+            </h1>
+            <p>
+                Viewing profile for user:
+                <strong>
+                    {userId}
+                </strong>
+            </p>
+            <p>
+                This demonstrates URL parameters using
+                <code>
+                    /user/:id
+                </code>
+            </p>
+            <Link to="/">
+                ← Back to Home
+            </Link>
+        </div>;
+    }
+
+    # Contact Page Component
+    def Contact()  -> any {
+        [submitted, setSubmitted] = useState(False);
+
+        def handleSubmit(e: any) -> None {
+            e.preventDefault();
+            setSubmitted(True);
+        }
+
+        def resetForm(e: any) -> None {
+            setSubmitted(False);
+        }
+
+        if submitted {
+            return <div>
+                <h1>
+                    📧 Contact Page
+                </h1>
+                <div
+                    style={{"color": "green"}}
+                >
+                    <p>
+                        ✓ Thank you! Your message has been sent.
+                    </p>
+                    <button
+                        onClick={resetForm}
+                    >
+                        Send another
+                    </button>
+                </div>
+            </div>;
+        }
+
+        return <div>
+            <h1>
+                📧 Contact Page
+            </h1>
+            <p>
+                Get in touch with us!
+            </p>
+            <form
+                onSubmit={handleSubmit}
+            >
+                <input
+                    type="text"
+                    placeholder="Your name"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                />
+                <input
+                    type="email"
+                    placeholder="Your email"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                />
+                <textarea
+                    placeholder="Your message"
+                    style={{"margin": "0.5rem 0", "display": "block"}}
+                ></textarea>
+                <button type="submit">
+                    Send Message
+                </button>
+            </form>
+        </div>;
+    }
+
+    # 404 Not Found Component
+    def NotFound()  -> any {
+        location = useLocation();
+        navigate = useNavigate();
+
+        def goHome(e: any) -> None {
+            navigate("/");
+        }
+
+        return <div
+            style={{"textAlign": "center", "padding": "2rem"}}
+        >
+            <h1>
+                🔍 404 - Page Not Found
+            </h1>
+            <p>
+                The page
+                <code>
+                    {location.pathname}
+                </code>
+                 does not exist.
+            </p>
+            <button
+                onClick={goHome}
+            >
+                Go Home
+            </button>
+        </div>;
+    }
+
+    # Navigation Component with active link styling
+    def Navigation()  -> any {
+        location = useLocation();
+
+        def linkStyle(path: str) -> dict {
+            isActive = location.pathname == path;
+            return {
+                "padding": "0.5rem 1rem",
+                "textDecoration": "none",
+                "color": "#0066cc" if isActive else "#333",
+                "fontWeight": "bold" if isActive else "normal",
+                "backgroundColor": "#e3f2fd" if isActive else "transparent",
+                "borderRadius": "4px",
+                "display": "inline-block"
+            };
+        }
+
+        return <nav
+            style={{
+                "padding": "1rem",
+                "backgroundColor": "#f5f5f5",
+                "marginBottom": "2rem",
+                "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
+            }}
+        >
+            <div
+                style={{
+                    "maxWidth": "1200px",
+                    "margin": "0 auto",
+                    "display": "flex",
+                    "gap": "1rem",
+                    "alignItems": "center"
+                }}
+            >
+                <Link
+                    to="/"
+                    style={linkStyle("/")}
+                >
+                    Home
+                </Link>
+                <Link
+                    to="/about"
+                    style={linkStyle("/about")}
+                >
+                    About
+                </Link>
+                <Link
+                    to="/contact"
+                    style={linkStyle("/contact")}
+                >
+                    Contact
+                </Link>
+                <Link
+                    to="/user/123"
+                    style={linkStyle("/user/123")}
+                >
+                    Profile Demo
+                </Link>
+            </div>
+        </nav>;
+    }
+
+    # Main App Component with React Router HashRouter
+    def app()  -> any {
+        return <Router>
+            <div
+                style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}
+            >
+                <Navigation />
+                <div
+                    style={{
+                        "maxWidth": "1200px",
+                        "margin": "0 auto",
+                        "padding": "0 1rem"
+                    }}
+                >
+                    <Routes>
+                        <Route
+                            path="/"
+                            element={<Home />}
+                        />
+                        <Route
+                            path="/about"
+                            element={<About />}
+                        />
+                        <Route
+                            path="/about/team"
+                            element={<Team />}
+                        />
+                        <Route
+                            path="/contact"
+                            element={<Contact />}
+                        />
+                        <Route
+                            path="/user/:id"
+                            element={<UserProfile />}
+                        />
+                        <Route
+                            path="*"
+                            element={<NotFound />}
+                        />
+                    </Routes>
+                </div>
+            </div>
+        </Router>;
+    }
+}

jac_client/examples/with-router/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-app",
+  "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: my-app",
+  "type": "module",
+  "devDependencies": {
+    "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"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/with-router/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/plugin/cli.py

@@ -0,0 +1,239 @@
+"""Command line interface tool for the Jac Client."""
+
+import json
+import os
+import re
+import subprocess
+import sys
+
+from jaclang.cli.cmdreg import cmd_registry
+from jaclang.runtimelib.machine import hookimpl
+
+
+class JacCmd:
+    """Jac CLI."""
+
+    @staticmethod
+    @hookimpl
+    def create_cmd() -> None:
+        """Create Jac CLI cmds."""
+
+        @cmd_registry.register
+        def create_jac_app(name: str) -> None:
+            """Create a new Jac application with npm and Vite setup.
+
+            Bootstraps a new Jac project by creating a temporary directory, initializing
+            npm, installing Vite, and setting up the basic project structure.
+
+            Args:
+                name: Name of the project to create
+
+            Examples:
+                jac create_jac_app my-app
+                jac create_jac_app my-jac-project
+            """
+            if not name:
+                print(
+                    "Error: Project name is required. Use --name=your-project-name",
+                    file=sys.stderr,
+                )
+                exit(1)
+
+            # Validate project name (basic npm package name validation)
+            if not re.match(r"^[a-zA-Z0-9_-]+$", name):
+                print(
+                    "Error: Project name must contain only letters, numbers, hyphens, and underscores",
+                    file=sys.stderr,
+                )
+                exit(1)
+
+            print(f"Creating new Jac application: {name}")
+
+            # Create project directory in current working directory
+            project_path = os.path.join(os.getcwd(), name)
+
+            if os.path.exists(project_path):
+                print(
+                    f"Error: Directory '{name}' already exists in current location",
+                    file=sys.stderr,
+                )
+                exit(1)
+
+            os.makedirs(project_path, exist_ok=True)
+
+            try:
+                # Change to project directory
+                original_cwd = os.getcwd()
+                os.chdir(project_path)
+
+                # Initialize npm package
+                print("Initializing npm package...")
+                npm_init_cmd = ["npm", "init", "-y"]
+                subprocess.run(npm_init_cmd, capture_output=True, text=True, check=True)
+
+                # Read the generated package.json
+                package_json_path = os.path.join(project_path, "package.json")
+                with open(package_json_path, "r") as f:
+                    package_data = json.load(f)
+
+                # create temp folder
+                src_folder = os.path.join(project_path, "src")
+                os.makedirs(src_folder, exist_ok=True)
+
+                # create build folder
+                build_folder = os.path.join(project_path, "build")
+                os.makedirs(build_folder, exist_ok=True)
+
+                # Update package.json with Jac-specific configuration
+                package_data.update(
+                    {
+                        "name": name,
+                        "description": f"Jac application: {name}",
+                        "type": "module",
+                        "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',
+                        },
+                        "devDependencies": {
+                            "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",
+                        },
+                        "dependencies": {
+                            "react": "^19.2.0",
+                            "react-dom": "^19.2.0",
+                            "react-router-dom": "^6.30.1",
+                        },
+                    }
+                )
+
+                # Write updated package.json
+                with open(package_json_path, "w") as f:
+                    json.dump(package_data, f, indent=2)
+
+                print("Installing Vite...")
+                # Install Vite
+                npm_install_cmd = ["npm", "install"]
+                subprocess.run(
+                    npm_install_cmd, capture_output=True, text=True, check=True
+                )
+
+                # Create basic project structure
+                print("Setting up project structure...")
+
+                # Create a basic Jac file
+                main_jac_content = """
+# Pages
+cl import from react {useState, useEffect}
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+        useEffect(lambda -> None {
+            console.log("Count: ", count);
+        }, [count]);
+        return <div>
+            <h1>Hello, World!</h1>
+            <p>Count: {count}</p>
+            <button onClick={lambda e: any ->  None {setCount(count + 1);}}>Increment</button>
+        </div>;
+    }
+}
+"""
+
+                with open(os.path.join(project_path, "app.jac"), "w") as f:
+                    f.write(main_jac_content)
+
+                # create .babelrc file
+                babel_config_content = """
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}
+"""
+                with open(os.path.join(project_path, ".babelrc"), "w") as f:
+                    f.write(babel_config_content)
+
+                # create vite.config.js file
+                vite_config_content = """
+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"),
+    },
+  },
+});
+
+"""
+                with open(os.path.join(project_path, "vite.config.js"), "w") as f:
+                    f.write(vite_config_content)
+
+                # Create README.md
+                readme_content = f"""# {name}
+
+## 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!
+"""
+
+                with open(os.path.join(project_path, "README.md"), "w") as f:
+                    f.write(readme_content)
+
+                # Return to original directory
+                os.chdir(original_cwd)
+
+                print(f"✅ Successfully created Jac application '{name}'!")
+                print(f"📁 Project location: {os.path.abspath(project_path)}")
+                print("\nNext steps:")
+                print(f"  cd {name}")
+                print("  jac serve app.jac")
+
+            except subprocess.CalledProcessError as e:
+                # Return to original directory on error
+                os.chdir(original_cwd)
+                print(f"Error running npm command: {e}", file=sys.stderr)
+                print(f"Command output: {e.stdout}", file=sys.stderr)
+                print(f"Command error: {e.stderr}", file=sys.stderr)
+                exit(1)
+            except Exception as e:
+                # Return to original directory on error
+                os.chdir(original_cwd)
+                print(f"Error creating project: {e}", file=sys.stderr)
+                exit(1)