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

jac_client/examples/basic-full-stack/{app.jac → src/app.jac}

@@ -1,67 +1,69 @@
 # Todo App
-cl import from react {useState, useEffect}
+cl import from react { useEffect }
 
 node Todo {
-    has text: str;
-    has done: bool = False;
+    has text: str,
+        done: bool = False;
 }
 
 walker create_todo {
-    has text:str;
+    has text: str;
+
     can create with `root entry {
-        new_todo = here ++> Todo(text= self.text);
-        report new_todo;
+        new_todo = here ++> Todo(text=self.text);
+        report new_todo ;
     }
 }
+
 walker toggle_todo {
     can toggle with Todo entry {
         here.done = not here.done;
-        report here;
+        report here ;
     }
 }
+
 walker read_todos {
     can read with `root entry {
         visit [-->(`?Todo)];
     }
+
     can report_todos with exit {
-        report here;
+        report here ;
     }
 }
 
 cl {
-    def app() -> any {
-        let [todos, setTodos] = useState([]);
-        let [inputValue, setInputValue] = useState("");
-        let [filter, setFilter] = useState("all");
+    def:pub app -> any {
+        has todos: list = [];
+        has inputValue: str = "";
+        has filter: str = "all";
 
-        useEffect(lambda -> None {
-            async def loadTodos() -> None {
-                todos = root spawn read_todos();
-                setTodos(todos.reports);
-            }
-            loadTodos();
-        }, []);
+        useEffect(
+            lambda   -> None{ async def loadTodos -> None {
+                result = root spawn read_todos();
+                todos = result.reports;
+            } loadTodos();} ,
+            []
+        );
 
         # Add a new todo
-        async def addTodo() -> None {
-            if not inputValue.trim() { return; }
-            newTodo = {
-                "id": Date.now(),
-                "text": inputValue.trim(),
-                "done": False
-            };
+        async def addTodo -> None {
+            if not inputValue.trim() {
+                return;
+            }
+            newTodo = {"id": Date.now(), "text": inputValue.trim(), "done": False};
             response = root spawn create_todo(text=inputValue.trim());
             newTodos = todos.concat([response.reports[0][0]]);
-            setTodos(newTodos);
-            setInputValue("");
+            todos = newTodos;
+            inputValue = "";
         }
 
         # Toggle todo completion status
         async def toggleTodo(id: any) -> None {
             console.log("toggleTodo", id);
             id spawn toggle_todo();
-            setTodos(todos.map(lambda todo: any -> any {
-                if todo._jac_id == id {
+            todos = todos.map(
+                lambda  todo: any  -> any{ if todo._jac_id == id {
                     updatedTodo = {
                         "_jac_id": todo._jac_id,
                         "text": todo.text,
@@ -69,70 +71,79 @@ cl {
                         "id": todo.id
                     };
                     return updatedTodo;
-                }
-                return todo;
-            }));
+                }return todo; }
+            );
         }
 
         # Delete a todo
         def deleteTodo(id: any) -> None {
-            setTodos(todos.filter(lambda todo: any -> bool { return todo.id != id; }));
+            todos = todos.filter(lambda  todo: any  -> bool{ return todo.id != id; } );
         }
 
         # Clear all completed todos
-        def clearCompleted() -> None {
-            setTodos(todos.filter(lambda todo: any -> bool { return not todo.done; }));
+        def clearCompleted -> None {
+            todos = todos.filter(lambda  todo: any  -> bool{ return not todo.done; } );
         }
 
         # Filter todos based on current filter
-        def getFilteredTodos() -> list {
+        def getFilteredTodos -> list {
             if filter == "active" {
-                return todos.filter(lambda todo: any -> bool { return not todo.done; });
+                return todos.filter(
+                    lambda  todo: any  -> bool{ return not todo.done; }
+                );
             } elif filter == "completed" {
-                return todos.filter(lambda todo: any -> bool { return todo.done; });
+                return todos.filter(lambda  todo: any  -> bool{ return todo.done; } );
             }
             return todos;
         }
 
         # Count active todos
-        activeCount = todos.filter(lambda todo: any -> bool { return not todo.done; }).length;
+        activeCount = todos.filter(
+            lambda  todo: any  -> bool{ return not todo.done; }
+        ).length;
 
         filteredTodos = getFilteredTodos();
 
-
-        return <div style={{
-            "maxWidth": "600px",
-            "margin": "40px auto",
-            "padding": "24px",
-            "fontFamily": "system-ui, -apple-system, sans-serif",
-            "background": "#f9fafb",
-            "minHeight": "100vh"
-        }}>
-            <h1 style={{
-                "textAlign": "center",
-                "color": "#1f2937",
-                "marginBottom": "32px",
-                "fontSize": "2.5rem",
-                "fontWeight": "700"
-            }}>📝 My Todo App</h1>
-
+        return <div
+            style={{
+                "maxWidth": "600px",
+                "margin": "40px auto",
+                "padding": "24px",
+                "fontFamily": "system-ui, -apple-system, sans-serif",
+                "background": "#f9fafb",
+                "minHeight": "100vh"
+            }}
+        >
+            <h1
+                style={{
+                    "textAlign": "center",
+                    "color": "#1f2937",
+                    "marginBottom": "32px",
+                    "fontSize": "2.5rem",
+                    "fontWeight": "700"
+                }}
+            >
+                📝 My Todo App
+            </h1>
             # Add todo form
-            <div style={{
-                "display": "flex",
-                "gap": "8px",
-                "marginBottom": "24px",
-                "background": "#ffffff",
-                "padding": "16px",
-                "borderRadius": "12px",
-                "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
-            }}>
+            <div
+                style={{
+                    "display": "flex",
+                    "gap": "8px",
+                    "marginBottom": "24px",
+                    "background": "#ffffff",
+                    "padding": "16px",
+                    "borderRadius": "12px",
+                    "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
+                }}
+            >
                 <input
                     type="text"
                     value={inputValue}
-                    onChange={lambda e: any -> None { setInputValue(e.target.value); }}
-                    onKeyPress={lambda e: any -> None {
-                        if e.key == "Enter" { addTodo(); }
-                    }}
+                    onChange={lambda  e: any  -> None{ inputValue = e.target.value;} }
+                    onKeyPress={lambda  e: any  -> None{ if e.key == "Enter" {
+                        addTodo();
+                    }} }
                     placeholder="What needs to be done?"
                     style={{
                         "flex": "1",
@@ -160,16 +171,17 @@ cl {
                     Add
                 </button>
             </div>
-
             # Filter buttons
-            <div style={{
-                "display": "flex",
-                "gap": "8px",
-                "marginBottom": "24px",
-                "justifyContent": "center"
-            }}>
+            <div
+                style={{
+                    "display": "flex",
+                    "gap": "8px",
+                    "marginBottom": "24px",
+                    "justifyContent": "center"
+                }}
+            >
                 <button
-                    onClick={lambda -> None { setFilter("all"); }}
+                    onClick={lambda   -> None{ filter = "all";} }
                     style={{
                         "padding": "8px 16px",
                         "background": ("#3b82f6" if filter == "all" else "#ffffff"),
@@ -184,7 +196,7 @@ cl {
                     All
                 </button>
                 <button
-                    onClick={lambda -> None { setFilter("active"); }}
+                    onClick={lambda   -> None{ filter = "active";} }
                     style={{
                         "padding": "8px 16px",
                         "background": ("#3b82f6" if filter == "active" else "#ffffff"),
@@ -199,10 +211,12 @@ cl {
                     Active
                 </button>
                 <button
-                    onClick={lambda -> None { setFilter("completed"); }}
+                    onClick={lambda   -> None{ filter = "completed";} }
                     style={{
                         "padding": "8px 16px",
-                        "background": ("#3b82f6" if filter == "completed" else "#ffffff"),
+                        "background": (
+                            "#3b82f6" if filter == "completed" else "#ffffff"
+                        ),
                         "color": ("#ffffff" if filter == "completed" else "#3b82f6"),
                         "border": "1px solid #3b82f6",
                         "borderRadius": "6px",
@@ -214,25 +228,38 @@ cl {
                     Completed
                 </button>
             </div>
-
             # Todo list
-            <div style={{
-                "background": "#ffffff",
-                "borderRadius": "12px",
-                "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
-                "overflow": "hidden"
-            }}>
-                {(<div style={{
-                        "padding": "40px",
-                        "textAlign": "center",
-                        "color": "#9ca3af"
-                    }}>
-                        {("No todos yet. Add one above!" if filter == "all" else
-                         ("No active todos!" if filter == "active" else
-                         "No completed todos!"))}
-                    </div>) if filteredTodos.length == 0 else (
-                    filteredTodos.map(lambda todo: any -> any {
-                        return <div
+            <div
+                style={{
+                    "background": "#ffffff",
+                    "borderRadius": "12px",
+                    "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
+                    "overflow": "hidden"
+                }}
+            >
+                {(
+                    <div
+                        style={{
+                            "padding": "40px",
+                            "textAlign": "center",
+                            "color": "#9ca3af"
+                        }}
+                    >
+                        {(
+                            "No todos yet. Add one above!"
+                            if filter == "all"
+                            else (
+                                "No active todos!"
+                                if filter == "active"
+                                else "No completed todos!"
+                            )
+                        )}
+                    </div>
+                )
+                if filteredTodos.length == 0
+                else (
+                    filteredTodos.map(
+                        lambda  todo: any  -> any{ return <div
                             key={todo._jac_id}
                             style={{
                                 "display": "flex",
@@ -246,23 +273,27 @@ cl {
                             <input
                                 type="checkbox"
                                 checked={todo.done}
-                                onChange={lambda -> None { toggleTodo(todo._jac_id); }}
+                                onChange={lambda   -> None{ toggleTodo(todo._jac_id);} }
                                 style={{
                                     "width": "20px",
                                     "height": "20px",
                                     "cursor": "pointer"
                                 }}
                             />
-                            <span style={{
-                                "flex": "1",
-                                "textDecoration": ("line-through" if todo.done else "none"),
-                                "color": ("#9ca3af" if todo.done else "#1f2937"),
-                                "fontSize": "16px"
-                            }}>
+                            <span
+                                style={{
+                                    "flex": "1",
+                                    "textDecoration": (
+                                        "line-through" if todo.done else "none"
+                                    ),
+                                    "color": ("#9ca3af" if todo.done else "#1f2937"),
+                                    "fontSize": "16px"
+                                }}
+                            >
                                 {todo.text}
                             </span>
                             <button
-                                onClick={lambda -> None { deleteTodo(todo.__jac_id); }}
+                                onClick={lambda   -> None{ deleteTodo(todo.__jac_id);} }
                                 style={{
                                     "padding": "6px 12px",
                                     "background": "#ef4444",
@@ -277,29 +308,31 @@ cl {
                             >
                                 Delete
                             </button>
-                        </div>;
-                    })
+                        </div>; }
+                    )
                 )}
             </div>
-
             # Stats and clear completed button
-            {(<div style={{
-                    "display": "flex",
-                    "justifyContent": "space-between",
-                    "alignItems": "center",
-                    "marginTop": "24px",
-                    "padding": "16px",
-                    "background": "#ffffff",
-                    "borderRadius": "12px",
-                    "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
-                }}>
-                    <span style={{
-                        "color": "#6b7280",
-                        "fontSize": "14px"
-                    }}>
+            {(
+                <div
+                    style={{
+                        "display": "flex",
+                        "justifyContent": "space-between",
+                        "alignItems": "center",
+                        "marginTop": "24px",
+                        "padding": "16px",
+                        "background": "#ffffff",
+                        "borderRadius": "12px",
+                        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
+                    }}
+                >
+                    <span
+                        style={{"color": "#6b7280", "fontSize": "14px"}}
+                    >
                         {activeCount} {"item" if activeCount == 1 else "items"} left
                     </span>
-                    {(<button
+                    {(
+                        <button
                             onClick={clearCompleted}
                             style={{
                                 "padding": "8px 16px",
@@ -313,8 +346,14 @@ cl {
                             }}
                         >
                             Clear Completed
-                        </button>) if todos.some(lambda todo: any -> bool { return todo.done; }) else None}
-                </div>) if todos.length > 0 else None}
+                        </button>
+                    )
+                    if todos.some(lambda  todo: any  -> bool{ return todo.done; } )
+                    else None}
+                </div>
+            )
+            if todos.length > 0
+            else None}
         </div>;
     }
 }

jac_client/examples/css-styling/js-styling/{app.jac → src/app.jac}

@@ -1,20 +1,20 @@
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import from .styles { default as styles }
 
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
-        let countStyle = styles.countDisplayZero
+        countStyle = styles.countDisplayZero
         if count == 0
         else (
             styles.countDisplayPositive if count > 0 else styles.countDisplayNegative

jac_client/examples/css-styling/material-ui/{app.jac → src/app.jac}

@@ -1,4 +1,4 @@
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import from '@mui/material/Button' { default as Button }
 cl import from '@mui/material/Card' { default as Card }
 cl import from '@mui/material/CardContent' { default as CardContent }
@@ -12,16 +12,16 @@ cl import from '@mui/icons-material/Remove' { default as RemoveIcon }
 cl import from '@mui/icons-material/Refresh' { default as RefreshIcon }
 
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
         return <Box
             sx={{

jac_client/examples/css-styling/pure-css/{app.jac → src/app.jac}

@@ -1,20 +1,20 @@
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import ".styles.css";
 
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
-        let countClass = "countDisplay " + (
+        countClass = "countDisplay " + (
             "positive" if count > 0 else "negative" if count < 0 else "zero"
         );
 

jac_client/examples/css-styling/sass-example/{app.jac → src/app.jac}

@@ -1,20 +1,20 @@
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import ".styles.scss";
 
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
-        let countClass = "countDisplay " + (
+        countClass = "countDisplay " + (
             "positive" if count > 0 else "negative" if count < 0 else "zero"
         );
 

jac_client/examples/css-styling/styled-components/{app.jac → src/app.jac}

@@ -1,5 +1,5 @@
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import from .styled {
     Container,
     Card,
@@ -14,16 +14,16 @@ cl import from .styled {
 }
 
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
         return <Container>
             <Card>

jac_client/examples/css-styling/tailwind-example/{app.jac → src/app.jac}

@@ -1,19 +1,19 @@
 # Pages
-cl import from react { useState, useEffect }
+cl import from react { useEffect }
 cl import ".global.css";
 cl {
-    def app()  -> any {
-        let [count, setCount] = useState(0);
+    def:pub app -> any {
+        has count: int = 0;
 
         useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
 
-        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
 
-        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
 
-        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+        handleReset = lambda  e: any  -> None{ count = 0;} ;
 
-        let countColorClass = "text-gray-800"
+        countColorClass = "text-gray-800"
         if count == 0
         else ("text-green-600" if count > 0 else "text-red-600");