jac-client 0.2.10__py3-none-any.whl → 0.2.12__py3-none-any.whl

jac_client/examples/all-in-one/main.jac

@@ -8,29 +8,27 @@ node Todo {
         done: bool = False;
 }
 
-walker : pub create_todo {
+walker:pub create_todo {
     has text: str;
 
     can create with `root entry {
         new_todo = here ++> Todo(text=self.text);
-        report new_todo ;
+        report new_todo;
     }
 }
 
-walker : pub ping_server {
+walker:pub ping_server {
     can ping with `root entry {
-        report "pong from backend!" ;
+        report "pong from backend!";
     }
 }
 
-walker : pub get_server_message {
+walker:pub get_server_message {
     can info with `root entry {
-        report "hello from a basic walker!" ;
+        report "hello from a basic walker!";
     }
 }
 
-
-
 # Features Test Page - Backend Logic
 # This file is intentionally kept empty to demonstrate the separation of concerns
 # where UI logic resides in .cl.jac files and backend walker logic in app.jac
@@ -40,12 +38,11 @@ walker : pub get_server_message {
 # Features Test - Backend Walkers
 # This file demonstrates walker functionality for testing various JAC features
 
-
 # Node definition for storing test data
 node TestData {
-    has message: str;
-    has count: int = 0;
-    has created_at: str = "";
+    has message: str,
+        count: int = 0,
+        created_at: str = "";
 }
 
 # Walker: Create test data
@@ -138,12 +135,14 @@ walker process_complex_data {
     can process with `root entry {
         processed = [];
         for item in self.items {
-            processed.append({
-                "id": item.get("id", 0),
-                "name": item.get("name", "").upper(),
-                "value": item.get("value", 0) * 2,
-                "processed_at": datetime.now().strftime("%H:%M:%S")
-            });
+            processed.append(
+                {
+                    "id": item.get("id", 0),
+                    "name": item.get("name", "").upper(),
+                    "value": item.get("value", 0) * 2,
+                    "processed_at": datetime.now().strftime("%H:%M:%S")
+                }
+            );
         }
 
         result = {
@@ -157,12 +156,11 @@ walker process_complex_data {
     }
 }
 
-
 #
 # Combined example: auth + routing + CSS styling + asset serving + nested folder imports
 #
 cl import from react { useEffect, useRef }
-cl import from "@jac-client/utils" {
+cl import from "@jac/runtime" {
     Router,
     Routes,
     Route,
@@ -170,13 +168,12 @@ cl import from "@jac-client/utils" {
     useNavigate,
     Navigate,
     jacIsLoggedIn
-
 }
 
 # Pure CSS + asset-in-CSS example
 cl import ".styles/styles.css";
 
- # Login Page
+# Login Page
 cl import from .pages.loginPage { LoginPage }
 
 # Signup Page
@@ -186,10 +183,14 @@ cl import from .pages.signupPage { SignupPage }
 cl import from .pages.notFound { NotFound }
 
 # Navigation component with active link styling and auth
-cl import from .components.navigation { Navigation }
+cl import from .components.navigation {
+    Navigation
+}
 
 # Page showing nested imports from different folders
-cl import from .pages.nestedDemo { NestedImportsDemo }
+cl import from .pages.nestedDemo {
+    NestedImportsDemo
+}
 
 cl import from .pages.FeaturesTest { FeaturesTest }
 
@@ -200,374 +201,342 @@ cl import from .pages.BudgetPlanner { BudgetPlanner }
 # Context provider
 cl import from .context.BudgetContext { BudgetProvider }
 
-
-
 # TypeScript component import
 cl import from ".components/Card.tsx" { Card }
 
-
 # Main app wrapped in Router (same API as with-router/ example)
 cl {
     def:pub HomePage -> any {
-    # Check if user is logged in, redirect if not
-    if not jacIsLoggedIn() {
-        return <Navigate to="/login" />;
-    }
-    has count: int = 0;
-    has pingResult: str = "";
-    has serverMessage: str = "";
-    has lastTodoMessage: str = "";
-
-    useEffect(
-        lambda   -> None{ console.log("Home count changed: ", count);} , [count]
-    );
-
-    # Call simple backend walkers
-    async def handlePing -> None {
-        result = root spawn ping_server();
-        if result.reports and result.reports.length > 0 {
-            pingResult = result.reports[0][0];
+        # Check if user is logged in, redirect if not
+        if not jacIsLoggedIn() {
+            return
+                <Navigate to="/login" />;
         }
-    }
+        has count: int = 0,
+            pingResult: str = "",
+            serverMessage: str = "",
+            lastTodoMessage: str = "";
 
-    async def loadServerMessage -> None {
-        result = root spawn get_server_message();
-        if result.reports and result.reports.length > 0 {
-            serverMessage = result.reports[0][0];
+        can with count entry {
+            console.log("Home count changed: ", count);
         }
-    }
 
-    # Create a sample Todo node in the graph with a hardcoded payload
-    async def handleCreateSampleTodo -> None {
-        result = root spawn create_todo(text="Sample todo from all-in-one app");
-        if result.reports and result.reports.length > 0 {
-            todo = result.reports[0][0];
-            lastTodoMessage = "Created Todo: " + todo.text;
-            console.log("Created Todo node:", todo);
+        # Call simple backend walkers
+        async def handlePing -> None {
+            result = root spawn ping_server();
+            if result.reports and result.reports.length > 0 {
+                pingResult = result.reports[0][0];
+            }
         }
-    }
 
-    useEffect(lambda   -> None{ loadServerMessage();} , []);
+        async def loadServerMessage -> None {
+            result = root spawn get_server_message();
+            if result.reports and result.reports.length > 0 {
+                serverMessage = result.reports[0][0];
+            }
+        }
 
-    # Initialize a Web Worker and handle message-based communication
-    workerRef = useRef(None);
-    has message: str = "";
+        # Create a sample Todo node in the graph with a hardcoded payload
+        async def handleCreateSampleTodo -> None {
+            result = root spawn create_todo(text="Sample todo from all-in-one app");
+            if result.reports and result.reports.length > 0 {
+                todo = result.reports[0][0];
+                lastTodoMessage = "Created Todo: " + todo.text;
+                console.log("Created Todo node:", todo);
+            }
+        }
 
-    useEffect(lambda -> None {
-        workerRef.current = Reflect.construct(Worker, ["/workers/worker.js"]);
-        workerRef.current.onmessage = lambda event: any -> None {
-            console.log("Message received from worker:", event.data);
-            message = event.data;
-        };
-        return (lambda -> None {
-            workerRef.current.terminate();
-        });
-    }, []);
-    handleClick = lambda -> None {
-        workerRef.current.postMessage("");
-    };
-
-    return <div
-        style={{
-            "padding": "2rem",
-            "fontFamily": "system-ui, -apple-system, sans-serif"
-        }}
-    >
-        <h1>
-            🍔 Router + Styling + Assets Demo
-        </h1>
-        <p>
-            This home page combines
-            {" "}
-            <strong>
-                React Router,
-            </strong>
-            {" "}
-            <strong>
-                pure CSS styling,
-            </strong>
-            {" "}
-            <strong>
-                static assets
-            </strong>
-            {" "}
-            and
-            {" "}
-            <strong>
-                nested folder imports
-            </strong>
-        </p>
-        <div className="container">
-            <h2
-                style={{
-                    "color": "white",
-                    "textShadow": "2px 2px 4px rgba(0,0,0,0.6)"
-                }}
-            >
-                CSS Background Image
-            </h2>
-            <p
-                style={{
-                    "color": "white",
-                    "maxWidth": "480px",
-                    "textShadow": "1px 1px 3px rgba(0,0,0,0.7)"
-                }}
-            >
-                This section uses the burger image as a background via CSS, just like the
-                {" "}
-                <code>
-                    asset-serving/css-with-image
-                </code>
-                {" "}
-                example.
-            </p>
-        </div>
-        <Card
-            title="TypeScript Card Component"
-            description="This card is built with TypeScript and demonstrates type-safe component usage in Jac"
-            variant="highlighted"
-        >
-            <p
-                style={{"margin": "0.5rem 0", "color": "#374151"}}
-            >
-                This is a TypeScript component imported and used in Jac code!
-            </p>
-        </Card>
-        <div className="card">
-            <h3>
-                Direct &lt;img&gt; asset
-            </h3>
-            <img
-                src="/static/assets/burger.png"
-                alt="Burger asset served by Jac"
-                className="burgerImage"
-            />
-            <p
-                style={{"marginTop": "0.75rem", "color": "#555"}}
-            >
-                This image is served from the project
-                {" "}
-                <code>
-                    assets/
-                </code>
-                {" "}
-                folder using the
-                {" "}
-                <code>
-                    /static/assets/
-                </code>
-                {" "}
-                path.
-            </p>
-        </div>
-        <div
-            style={{"marginTop": "2rem"}}
-        >
-            <h3>
-                Counter with pure CSS classes
-            </h3>
-            <p>
-                You've clicked the burger
-                {" "}
-                <strong>
-                    {count}
-                </strong>
-                {" "}
-                times.
-            </p>
-            <button
-                onClick={lambda  e: any  -> None{ count = count + 1;} }
-                style={{
-                    "padding": "0.6rem 1.4rem",
-                    "fontSize": "1rem",
-                    "backgroundColor": "#ff6b35",
-                    "color": "white",
-                    "border": "none",
-                    "borderRadius": "6px",
-                    "cursor": "pointer",
-                    "boxShadow": "0 2px 4px rgba(0,0,0,0.2)"
-                }}
-            >
-                Click the Burger! 🍔
-            </button>
-        </div>
-        <div
-            style={{"marginTop": "2rem"}}
-        >
-            <h3>
-                Backend Walkers
-            </h3>
-            <p>
-                Basic example walkers:
-                {" "}
-                <code>
-                    ping_server
-                </code>
-                {" "}
-                and
-                {" "}
-                <code>
-                    get_server_message
-                </code>
-            </p>
-            <button
-                onClick={lambda  e: any  -> None{ handlePing();} }
-                style={{
-                    "padding": "0.5rem 1.2rem",
-                    "marginRight": "0.75rem",
-                    "backgroundColor": "#3b82f6",
-                    "color": "white",
-                    "border": "none",
-                    "borderRadius": "6px",
-                    "cursor": "pointer"
-                }}
-            >
-                Ping Backend
-            </button>
-            <button
-                onClick={lambda  e: any  -> None{ handleCreateSampleTodo();} }
+        async can with entry {
+            await loadServerMessage();
+        }
+
+        # Initialize a Web Worker and handle message-based communication
+        workerRef = useRef(None);
+        has message: str = "";
+
+        useEffect(
+            lambda -> None { workerRef.current = Reflect.construct(
+                Worker, ["/workers/worker.js"]
+            );workerRef.current.onmessage = lambda event: any  -> None { console.log(
+                "Message received from worker:", event.data
+            );message = event.data;};return (
+                lambda -> None { workerRef.current.terminate();}
+            ); },
+            []
+        );
+        handleClick = lambda -> None { workerRef.current.postMessage("");};
+
+        return
+            <div
                 style={{
-                    "padding": "0.5rem 1.2rem",
-                    "backgroundColor": "#10b981",
-                    "color": "white",
-                    "border": "none",
-                    "borderRadius": "6px",
-                    "cursor": "pointer"
+                    "padding": "2rem",
+                    "fontFamily": "system-ui, -apple-system, sans-serif"
                 }}
             >
-                Create Sample Todo
-            </button>
-            {pingResult
-            and (
-                <span
-                    style={{"marginLeft": "0.5rem", "color": "#374151"}}
-                >
-                    Result:
+                <h1>
+                    🍔 Router + Styling + Assets Demo
+                </h1>
+                <p>
+                    This home page combines
                     {" "}
-                    <code>
-                        {pingResult}
-                    </code>
-                </span>
-            )}
-            {serverMessage
-            and (
-                <p
-                    style={{"marginTop": "0.75rem", "color": "#374151"}}
-                >
-                    Message:
+                    <strong>
+                        React Router,
+                    </strong>
+                    {" "}
+                    <strong>
+                        pure CSS styling,
+                    </strong>
+                    {" "}
+                    <strong>
+                        staticassets
+                    </strong>
                     {" "}
-                    <code>
-                        {serverMessage}
-                    </code>
+                    and
+                    {" "}
+                    <strong>
+                        nested folder imports
+                    </strong>
                 </p>
-            )}
-            {lastTodoMessage
-            and (
-                <p
-                    style={{"marginTop": "0.5rem", "color": "#111827"}}
+                <div className="container">
+                    <h2
+                        style={{
+                            "color": "white",
+                            "textShadow": "2px 2px 4px rgba(0,0,0,0.6)"
+                        }}
+                    >
+                        CSS Background Image
+                    </h2>
+                    <p
+                        style={{
+                            "color": "white",
+                            "maxWidth": "480px",
+                            "textShadow": "1px 1px 3px rgba(0,0,0,0.7)"
+                        }}
+                    >
+                        This section uses the burger image as a background via CSS, just like the
+                        {" "}
+                        <code>
+                            asset-serving/css-with-image
+                        </code>
+                        {" "}
+                        example.
+                    </p>
+                </div>
+                <Card
+                    title="TypeScript Card Component"
+                    description="This card is built with TypeScript and demonstrates type-safe component usage in Jac"
+                    variant="highlighted"
                 >
-                    {lastTodoMessage}
-                </p>
-            )}
-        </div>
-        <div
-            style={{"marginTop": "2rem"}}
-        >
-            <h3>
-                Web Worker
-            </h3>
-            <p>
-                This demonstrates how to communicate with a
-                {" "}
-                <strong>Python backend worker</strong>
-                {" "}
-                using Web Workers for asynchronous processing.
-            </p>
-            <p
-                style={{"fontSize": "0.9rem", "color": "#666", "marginTop": "0.5rem"}}
-            >
-                File:
-                {" "}
-                <code>
-                    worker.py
-                </code>
-                {" "}
-                — Runs in a separate thread to avoid blocking the UI.
-            </p>
-            <button
-                onClick={lambda -> None { handleClick(); }}
-                style={{
-                    "padding": "0.5rem 1.2rem",
-                    "marginRight": "0.75rem",
-                    "backgroundColor": "#d73bf6ff",
-                    "color": "white",
-                    "border": "none",
-                    "borderRadius": "6px",
-                    "cursor": "pointer"
-                }}
-            >
-                Call Python Worker
-            </button>
-            {message && (
-                <p style={{ marginTop: "1rem", fontWeight: "bold" }}>
-                {message}
-                </p>
-            )}
-        </div>
-    </div>;
-}
+                    <p style={{"margin": "0.5rem 0", "color": "#374151"}}>
+                        This is a TypeScript component imported and used in Jac code!
+                    </p>
+                </Card>
+                <div className="card">
+                    <h3>
+                        Direct &lt;img&gt; asset
+                    </h3>
+                    <img
+                        src="/static/assets/burger.png"
+                        alt="Burger asset served by Jac"
+                        className="burgerImage"
+                    />
+                    <p style={{"marginTop": "0.75rem", "color": "#555"}}>
+                        This image is served from the project
+                        {" "}
+                        <code>
+                            assets/
+                        </code>
+                        {" "}
+                        folder using the
+                        {" "}
+                        <code>
+                            /static/assets/
+                        </code>
+                        {" "}
+                        path.
+                    </p>
+                </div>
+                <div style={{"marginTop": "2rem"}}>
+                    <h3>
+                        Counter with pure CSS classes
+                    </h3>
+                    <p>
+                        You've clicked the burger
+                        {" "}
+                        <strong>
+                            {count}
+                        </strong>
+                        {" "}
+                        times.
+                    </p>
+                    <button
+                        onClick={lambda e: any  -> None { count = count + 1;}}
+                        style={{
+                            "padding": "0.6rem 1.4rem",
+                            "fontSize": "1rem",
+                            "backgroundColor": "#ff6b35",
+                            "color": "white",
+                            "border": "none",
+                            "borderRadius": "6px",
+                            "cursor": "pointer",
+                            "boxShadow": "0 2px 4px rgba(0,0,0,0.2)"
+                        }}
+                    >
+                        Click the Burger! 🍔
+                    </button>
+                </div>
+                <div style={{"marginTop": "2rem"}}>
+                    <h3>
+                        Backend Walkers
+                    </h3>
+                    <p>
+                        Basic example walkers:
+                        {" "}
+                        <code>
+                            ping_server
+                        </code>
+                        {" "}
+                        and
+                        {" "}
+                        <code>
+                            get_server_message
+                        </code>
+                    </p>
+                    <button
+                        onClick={lambda e: any  -> None { handlePing();}}
+                        style={{
+                            "padding": "0.5rem 1.2rem",
+                            "marginRight": "0.75rem",
+                            "backgroundColor": "#3b82f6",
+                            "color": "white",
+                            "border": "none",
+                            "borderRadius": "6px",
+                            "cursor": "pointer"
+                        }}
+                    >
+                        Ping Backend
+                    </button>
+                    <button
+                        onClick={lambda e: any  -> None { handleCreateSampleTodo();}}
+                        style={{
+                            "padding": "0.5rem 1.2rem",
+                            "backgroundColor": "#10b981",
+                            "color": "white",
+                            "border": "none",
+                            "borderRadius": "6px",
+                            "cursor": "pointer"
+                        }}
+                    >
+                        Create Sample Todo
+                    </button>
+                    {pingResult
+                    and (
+                        <span style={{"marginLeft": "0.5rem", "color": "#374151"}}>
+                            Result:
+                            {" "}
+                            <code>
+                                {pingResult}
+                            </code>
+                        </span>
+                    )}
+                    {serverMessage
+                    and (
+                        <p style={{"marginTop": "0.75rem", "color": "#374151"}}>
+                            Message:
+                            {" "}
+                            <code>
+                                {serverMessage}
+                            </code>
+                        </p>
+                    )}
+                    {lastTodoMessage
+                    and (
+                        <p style={{"marginTop": "0.5rem", "color": "#111827"}}>
+                            {lastTodoMessage}
+                        </p>
+                    )}
+                </div>
+                <div style={{"marginTop": "2rem"}}>
+                    <h3>
+                        Web Worker
+                    </h3>
+                    <p>
+                        This demonstrates how to communicate with a
+                        {" "}
+                        <strong>
+                            Python backend worker
+                        </strong>
+                        {" "}
+                        using Web Workers for asynchronous processing.
+                    </p>
+                    <p
+                        style={{
+                            "fontSize": "0.9rem",
+                            "color": "#666",
+                            "marginTop": "0.5rem"
+                        }}
+                    >
+                        File:
+                        {" "}
+                        <code>
+                            worker.py
+                        </code>
+                        {" "}
+                        — Runs in a separate thread to avoid blocking the UI.
+                    </p>
+                    <button
+                        onClick={lambda -> None { handleClick();}}
+                        style={{
+                            "padding": "0.5rem 1.2rem",
+                            "marginRight": "0.75rem",
+                            "backgroundColor": "#d73bf6ff",
+                            "color": "white",
+                            "border": "none",
+                            "borderRadius": "6px",
+                            "cursor": "pointer"
+                        }}
+                    >
+                        Call Python Worker
+                    </button>
+                    {message
+                    && (
+                        <p style={{marginTop: "1rem", fontWeight: "bold"}}>
+                            {message}
+                        </p>
+                    )}
+                </div>
+            </div>;
+    }
 
     def:pub app -> any {
-    return <Router>
-        <div
-            style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}
-        >
-            <Navigation />
-            <div
-                style={{
-                    "maxWidth": "960px",
-                    "margin": "0 auto",
-                    "padding": "0 1rem 3rem 1rem"
-                }}
-            >
-                <Routes>
-                    <Route
-                        path="/"
-                        element={<HomePage />}
-                    />
-                    <Route
-                        path="/login"
-                        element={<LoginPage />}
-                    />
-                    <Route
-                        path="/signup"
-                        element={<SignupPage />}
-                    />
-                    <Route
-                        path="/nested"
-                        element={<NestedImportsDemo />}
-                    />
-                    <Route
-                        path="/features-test"
-                        element={<FeaturesTest />}
-                    />
-                    <Route
-                        path="/landing"
-                        element={<LandingPage />}
-                    />
-                    <Route
-                        path="/budget-planner"
-                        element={<BudgetProvider>
-                            <BudgetPlanner />
-                        </BudgetProvider>}
-                    />
-                    <Route
-                        path="*"
-                        element={<NotFound />}
-                    />
-                </Routes>
-            </div>
-        </div>
-    </Router>;
-}
+        return
+            <Router>
+                <div style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}>
+                    <Navigation />
+                    <div
+                        style={{
+                            "maxWidth": "960px",
+                            "margin": "0 auto",
+                            "padding": "0 1rem 3rem 1rem"
+                        }}
+                    >
+                        <Routes>
+                            <Route path="/" element={<HomePage />} />
+                            <Route path="/login" element={<LoginPage />} />
+                            <Route path="/signup" element={<SignupPage />} />
+                            <Route path="/nested" element={<NestedImportsDemo />} />
+                            <Route path="/features-test" element={<FeaturesTest />} />
+                            <Route path="/landing" element={<LandingPage />} />
+                            <Route
+                                path="/budget-planner"
+                                element={<BudgetProvider>
+                                    <BudgetPlanner />
+                                </BudgetProvider>}
+                            />
+                            <Route path="*" element={<NotFound />} />
+                        </Routes>
+                    </div>
+                </div>
+            </Router>;
+    }
 }