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

jac_client/examples/basic-full-stack/app.jac

@@ -0,0 +1,320 @@
+# Todo App
+cl import from react {useState, useEffect}
+
+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;
+    }
+}
+walker toggle_todo {
+    can toggle with Todo entry {
+        here.done = not here.done;
+        report here;
+    }
+}
+walker read_todos {
+    can read with `root entry {
+        visit [-->(`?Todo)];
+    }
+    can report_todos with exit {
+        report here;
+    }
+}
+
+cl {
+    def app() -> any {
+        let [todos, setTodos] = useState([]);
+        let [inputValue, setInputValue] = useState("");
+        let [filter, setFilter] = useState("all");
+
+        useEffect(lambda -> None {
+            async def loadTodos() -> None {
+                todos = root spawn read_todos();
+                setTodos(todos.reports);
+            }
+            loadTodos();
+        }, []);
+
+        # Add a new todo
+        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("");
+        }
+
+        # 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 {
+                    updatedTodo = {
+                        "_jac_id": todo._jac_id,
+                        "text": todo.text,
+                        "done": not todo.done,
+                        "id": todo.id
+                    };
+                    return updatedTodo;
+                }
+                return todo;
+            }));
+        }
+
+        # Delete a todo
+        def deleteTodo(id: any) -> None {
+            setTodos(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; }));
+        }
+
+        # Filter todos based on current filter
+        def getFilteredTodos() -> list {
+            if filter == "active" {
+                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;
+        }
+
+        # Count active todos
+        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>
+
+            # 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)"
+            }}>
+                <input
+                    type="text"
+                    value={inputValue}
+                    onChange={lambda e: any -> None { setInputValue(e.target.value); }}
+                    onKeyPress={lambda e: any -> None {
+                        if e.key == "Enter" { addTodo(); }
+                    }}
+                    placeholder="What needs to be done?"
+                    style={{
+                        "flex": "1",
+                        "padding": "12px 16px",
+                        "border": "1px solid #e5e7eb",
+                        "borderRadius": "8px",
+                        "fontSize": "16px",
+                        "outline": "none"
+                    }}
+                />
+                <button
+                    onClick={addTodo}
+                    style={{
+                        "padding": "12px 24px",
+                        "background": "#3b82f6",
+                        "color": "#ffffff",
+                        "border": "none",
+                        "borderRadius": "8px",
+                        "fontSize": "16px",
+                        "fontWeight": "600",
+                        "cursor": "pointer",
+                        "transition": "background 0.2s"
+                    }}
+                >
+                    Add
+                </button>
+            </div>
+
+            # Filter buttons
+            <div style={{
+                "display": "flex",
+                "gap": "8px",
+                "marginBottom": "24px",
+                "justifyContent": "center"
+            }}>
+                <button
+                    onClick={lambda -> None { setFilter("all"); }}
+                    style={{
+                        "padding": "8px 16px",
+                        "background": ("#3b82f6" if filter == "all" else "#ffffff"),
+                        "color": ("#ffffff" if filter == "all" else "#3b82f6"),
+                        "border": "1px solid #3b82f6",
+                        "borderRadius": "6px",
+                        "fontSize": "14px",
+                        "fontWeight": "600",
+                        "cursor": "pointer"
+                    }}
+                >
+                    All
+                </button>
+                <button
+                    onClick={lambda -> None { setFilter("active"); }}
+                    style={{
+                        "padding": "8px 16px",
+                        "background": ("#3b82f6" if filter == "active" else "#ffffff"),
+                        "color": ("#ffffff" if filter == "active" else "#3b82f6"),
+                        "border": "1px solid #3b82f6",
+                        "borderRadius": "6px",
+                        "fontSize": "14px",
+                        "fontWeight": "600",
+                        "cursor": "pointer"
+                    }}
+                >
+                    Active
+                </button>
+                <button
+                    onClick={lambda -> None { setFilter("completed"); }}
+                    style={{
+                        "padding": "8px 16px",
+                        "background": ("#3b82f6" if filter == "completed" else "#ffffff"),
+                        "color": ("#ffffff" if filter == "completed" else "#3b82f6"),
+                        "border": "1px solid #3b82f6",
+                        "borderRadius": "6px",
+                        "fontSize": "14px",
+                        "fontWeight": "600",
+                        "cursor": "pointer"
+                    }}
+                >
+                    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
+                            key={todo._jac_id}
+                            style={{
+                                "display": "flex",
+                                "alignItems": "center",
+                                "gap": "12px",
+                                "padding": "16px",
+                                "borderBottom": "1px solid #e5e7eb",
+                                "transition": "background 0.2s"
+                            }}
+                        >
+                            <input
+                                type="checkbox"
+                                checked={todo.done}
+                                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"
+                            }}>
+                                {todo.text}
+                            </span>
+                            <button
+                                onClick={lambda -> None { deleteTodo(todo.__jac_id); }}
+                                style={{
+                                    "padding": "6px 12px",
+                                    "background": "#ef4444",
+                                    "color": "#ffffff",
+                                    "border": "none",
+                                    "borderRadius": "6px",
+                                    "fontSize": "14px",
+                                    "fontWeight": "500",
+                                    "cursor": "pointer",
+                                    "transition": "background 0.2s"
+                                }}
+                            >
+                                Delete
+                            </button>
+                        </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"
+                    }}>
+                        {activeCount} {"item" if activeCount == 1 else "items"} left
+                    </span>
+                    {(<button
+                            onClick={clearCompleted}
+                            style={{
+                                "padding": "8px 16px",
+                                "background": "#ef4444",
+                                "color": "#ffffff",
+                                "border": "none",
+                                "borderRadius": "6px",
+                                "fontSize": "14px",
+                                "fontWeight": "600",
+                                "cursor": "pointer"
+                            }}
+                        >
+                            Clear Completed
+                        </button>) if todos.some(lambda todo: any -> bool { return todo.done; }) else None}
+                </div>) if todos.length > 0 else None}
+        </div>;
+    }
+}

jac_client/examples/basic-full-stack/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "basic-full-stack",
+  "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: basic-full-stack",
+  "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": "^7.3.0"
+  }
+}

jac_client/examples/basic-full-stack/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/js-styling/.babelrc

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

jac_client/examples/css-styling/js-styling/README.md

@@ -0,0 +1,183 @@
+# JavaScript Styling Example
+
+This example demonstrates styling a Jac application using JavaScript objects for inline styles.
+
+## Overview
+
+JavaScript styling uses JavaScript objects to define styles, which are then applied via the `style` prop. This approach is perfect for:
+- Dynamic styling based on state
+- Programmatic style generation
+- Component-scoped styles without CSS files
+- React-style inline styling
+
+## Project Structure
+
+```
+js-styling/
+├── app.jac          # Main application component
+├── styles.js        # Style objects exported as default
+├── package.json     # Dependencies
+└── vite.config.js   # Vite configuration
+```
+
+## Setup
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run the application:
+```bash
+jac serve app.jac
+```
+
+## How It Works
+
+### 1. Define Style Objects
+
+In `styles.js`, export a default object with all styles:
+
+```javascript
+const countDisplay = {
+    fontSize: "3.75rem",
+    fontWeight: "bold",
+    transition: "color 0.3s ease"
+};
+
+export default {
+    container: {
+        minHeight: "100vh",
+        background: "linear-gradient(to bottom right, #dbeafe, #e0e7ff)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        borderRadius: "1rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "2rem",
+        maxWidth: "28rem",
+        width: "100%"
+    },
+    countDisplayZero: {
+        ...countDisplay,
+        color: "#1f2937"
+    },
+    countDisplayPositive: {
+        ...countDisplay,
+        color: "#16a34a"
+    },
+    // ... more styles
+};
+```
+
+### 2. Import Styles
+
+In your Jac file:
+
+```jac
+cl import from .styles { default as styles }
+```
+
+### 3. Apply Styles
+
+Use the `style` prop with style objects:
+
+```jac
+return <div style={styles.container}>
+    <div style={styles.card}>
+        <h1 style={styles.title}>Counter Application</h1>
+    </div>
+</div>;
+```
+
+### 4. Dynamic Styles
+
+Select styles based on state:
+
+```jac
+let countStyle = styles.countDisplayZero if count == 0 else (styles.countDisplayPositive if count > 0 else styles.countDisplayNegative);
+
+return <div style={countStyle}>{count}</div>;
+```
+
+## Style Object Format
+
+JavaScript style objects use camelCase property names (React convention):
+
+```javascript
+{
+    backgroundColor: "#ffffff",  // not background-color
+    fontSize: "1.5rem",         // not font-size
+    marginTop: "10px",          // not margin-top
+    zIndex: 1                   // not z-index
+}
+```
+
+## Best Practices
+
+1. **Use object spread**: Share common styles with spread operator
+2. **Organize by component**: Group related styles together
+3. **Use constants**: Define reusable values at the top
+4. **CamelCase properties**: Follow React naming convention
+5. **Extract complex logic**: Move style calculations to functions
+
+## Advantages
+
+- ✅ Dynamic styling based on props/state
+- ✅ No CSS file needed
+- ✅ Type-safe (with TypeScript)
+- ✅ Component-scoped by default
+- ✅ Programmatic style generation
+
+## Limitations
+
+- ❌ No pseudo-classes (hover, focus, etc.)
+- ❌ No media queries
+- ❌ No CSS animations (use JavaScript)
+- ❌ Verbose for complex styles
+- ❌ No CSS preprocessor features
+
+## When to Use
+
+Choose JavaScript Styling when:
+- You need dynamic styles based on state
+- You want programmatic style generation
+- You prefer keeping styles in JavaScript
+- You're building component libraries
+- You need runtime style calculations
+
+## Advanced Patterns
+
+### Style Functions
+
+Create functions that return styles:
+
+```javascript
+export const getButtonStyle = (variant) => ({
+    ...buttonBase,
+    backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d'
+});
+```
+
+### Conditional Styles
+
+Use ternary operators for conditional styles:
+
+```javascript
+export default {
+    button: {
+        backgroundColor: isActive ? '#007bff' : '#6c757d',
+        opacity: isDisabled ? 0.5 : 1,
+    }
+};
+```
+
+## Next Steps
+
+- Explore [Styled Components](../styled-components/) for CSS-in-JS with more features
+- Check out [Emotion](../emotion-example/) for similar CSS-in-JS approach (coming soon)
+- Learn about [CSS Modules](../css-modules/) for scoped CSS (coming soon)

jac_client/examples/css-styling/js-styling/app.jac

@@ -0,0 +1,63 @@
+# Pages
+cl import from react {useState, useEffect}
+cl import from .styles { default as styles }
+
+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 countStyle = styles.countDisplayZero if count == 0 else (styles.countDisplayPositive if count > 0 else styles.countDisplayNegative);
+
+        return <div style={styles.container}>
+            <div style={styles.card}>
+                <h1 style={styles.title}>Counter Application</h1>
+                <div style={styles.divider}></div>
+
+                <div style={styles.counterSection}>
+                    <div style={styles.label}>Current Count</div>
+                    <div style={countStyle}>{count}</div>
+                </div>
+
+                <div style={styles.divider}></div>
+
+                <div style={styles.buttonGroup}>
+                    <button
+                        style={styles.buttonDecrement}
+                        onClick={handleDecrement}>
+                        -
+                    </button>
+                    <button
+                        style={styles.buttonReset}
+                        onClick={handleReset}>
+                        ↻
+                    </button>
+                    <button
+                        style={styles.buttonIncrement}
+                        onClick={handleIncrement}>
+                        +
+                    </button>
+                </div>
+
+                <div style={styles.hint}>
+                    Click the buttons to increment, decrement, or reset the counter
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client/examples/css-styling/js-styling/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bootstrap-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: bootstrap-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": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}