jac-client 0.2.2__py3-none-any.whl → 0.2.4__py3-none-any.whl

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

@@ -1,320 +0,0 @@
-# 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

@@ -1,28 +0,0 @@
-{
-  "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

@@ -1,27 +0,0 @@
-
-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

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

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

@@ -1,183 +0,0 @@
-# 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

@@ -1,84 +0,0 @@
-# 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

@@ -1,28 +0,0 @@
-{
-  "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"
-  }
-}