jac-client 0.2.3__tar.gz → 0.2.9__tar.gz

{jac_client-0.2.3 → jac_client-0.2.9}/PKG-INFO

@@ -1,24 +1,20 @@
 Metadata-Version: 2.4
 Name: jac-client
-Version: 0.2.3
+Version: 0.2.9
 Summary: Build full-stack web applications with Jac - one language for frontend and backend.
-License: MIT
-Keywords: jac,jaclang,jaseci,frontend,full-stack,web-development
-Author: Jason Mars
-Author-email: jason@mars.ninja
-Maintainer: Jason Mars
-Maintainer-email: jason@mars.ninja
-Requires-Python: >=3.12.0,<4.0.0
-Classifier: License :: OSI Approved :: MIT License
-Classifier: Programming Language :: Python :: 3
-Classifier: Programming Language :: Python :: 3.12
-Classifier: Programming Language :: Python :: 3.13
-Classifier: Programming Language :: Python :: 3.14
-Requires-Dist: jaclang (==0.9.3)
-Project-URL: Documentation, https://jac-lang.org
-Project-URL: Homepage, https://jaseci.org
+Author-email: Jason Mars <jason@mars.ninja>
+Maintainer-email: Jason Mars <jason@mars.ninja>
+License-Expression: MIT
 Project-URL: Repository, https://github.com/Jaseci-Labs/jaseci
+Project-URL: Homepage, https://jaseci.org
+Project-URL: Documentation, https://jac-lang.org
+Keywords: jac,jaclang,jaseci,frontend,full-stack,web-development
+Requires-Python: >=3.12
 Description-Content-Type: text/markdown
+Requires-Dist: jaclang>=0.9.9
+Provides-Extra: dev
+Requires-Dist: python-dotenv==1.0.1; extra == "dev"
+Requires-Dist: pytest==8.3.5; extra == "dev"
 
 # Jac Client
 
@@ -28,11 +24,11 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 ---
 
-## ✨ Features
+## Features
 
 - **Single Language**: Write frontend and backend in Jac
 - **No HTTP Client**: Use `jacSpawn()` instead of fetch/axios
-- **React Hooks**: Use standard React `useState` and `useEffect` hooks
+- **React Hooks**: Use standard React `useState` and `useEffect` hooks (useState is auto-injected when using `has` variables)
 - **Component-Based**: Build reusable UI components with JSX
 - **Graph Database**: Built-in graph data model eliminates need for SQL/NoSQL
 - **Type Safety**: Type checking across frontend and backend
@@ -40,7 +36,7 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 ---
 
-## 🚀 Quick Start
+## Quick Start
 
 ### Installation
 
@@ -51,16 +47,20 @@ pip install jac-client
 ### Create a New App
 
 ```bash
-jac create_jac_app my-app
+jac create --use client my-app
 cd my-app
-jac serve app.jac
+jac start src/app.jac
 ```
 
-Visit `http://localhost:8000/page/app` to see your app!
+Visit `http://localhost:8000` to see your app! (The `app` component is served at the root by default.)
+
+You can also access the app at `http://localhost:8000/cl/app`.
+
+> **Note**: The `--npm` flag creates a client-side project with an organized folder structure. Without `--npm`, `jac create` creates a standard Jac project.
 
 ---
 
-## 📚 Documentation
+## Documentation
 
 For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 
@@ -72,16 +72,19 @@ For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 
 ---
 
-## 💡 Example
+## Example
 
 ### Simple Counter with React Hooks
 
 ```jac
-cl import from react { useState, useEffect }
+# Note: useState is auto-injected when using has variables in cl blocks
+# Only useEffect needs explicit import
+cl import from react { useEffect }
 
 cl {
     def Counter() -> any {
-        let [count, setCount] = useState(0);
+        # useState is automatically available - no import needed!
+        [count, setCount] = useState(0);
 
         useEffect(lambda -> None {
             console.log("Count changed:", count);
@@ -103,10 +106,13 @@ cl {
 }
 ```
 
+> **Note:** When using `has` variables in `cl {}` blocks or `.cl.jac` files, the `useState` import is automatically injected. You only need to explicitly import other hooks like `useEffect`.
+
 ### Full-Stack Todo App
 
 ```jac
-cl import from react { useState, useEffect }
+# useState is auto-injected, only import useEffect
+cl import from react { useEffect }
 cl import from '@jac-client/utils' { jacSpawn }
 
 # Backend: Jac nodes and walkers
@@ -132,7 +138,8 @@ walker read_todos {
 # Frontend: React component
 cl {
     def app() -> any {
-        let [todos, setTodos] = useState([]);
+        # useState is automatically available - no import needed!
+        [todos, setTodos] = useState([]);
 
         useEffect(lambda -> None {
             async def loadTodos() -> None {
@@ -154,7 +161,7 @@ cl {
 
 ---
 
-## 🔧 Requirements
+## Requirements
 
 - Python: 3.12+
 - Node.js: For npm and Vite
@@ -162,9 +169,10 @@ cl {
 
 ---
 
-## 🛠️ How It Works
+## ️ How It Works
 
 Jac Client is a plugin that:
+
 1. Compiles your `.jac` client code to JavaScript
 2. Bundles dependencies with Vite for optimal performance
 3. Provides a runtime for reactive state and components
@@ -172,7 +180,7 @@ Jac Client is a plugin that:
 
 ---
 
-## 📖 Learn More
+## Learn More
 
 - **Full Documentation**: See [docs/](jac_client/docs/) for comprehensive guides
 - **Examples**: Check `jac_client/examples/` for working examples
@@ -180,11 +188,10 @@ Jac Client is a plugin that:
 
 ---
 
-## 📄 License
+## License
 
 MIT License - see [LICENSE](../LICENSE) file.
 
 ---
 
-**Happy coding with Jac!** 🎉
-
+**Happy coding with Jac!**

{jac_client-0.2.3 → jac_client-0.2.9}/README.md

@@ -6,11 +6,11 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 ---
 
-## ✨ Features
+## Features
 
 - **Single Language**: Write frontend and backend in Jac
 - **No HTTP Client**: Use `jacSpawn()` instead of fetch/axios
-- **React Hooks**: Use standard React `useState` and `useEffect` hooks
+- **React Hooks**: Use standard React `useState` and `useEffect` hooks (useState is auto-injected when using `has` variables)
 - **Component-Based**: Build reusable UI components with JSX
 - **Graph Database**: Built-in graph data model eliminates need for SQL/NoSQL
 - **Type Safety**: Type checking across frontend and backend
@@ -18,7 +18,7 @@ Jac Client enables you to write React-like components, manage state, and build i
 
 ---
 
-## 🚀 Quick Start
+## Quick Start
 
 ### Installation
 
@@ -29,16 +29,20 @@ pip install jac-client
 ### Create a New App
 
 ```bash
-jac create_jac_app my-app
+jac create --use client my-app
 cd my-app
-jac serve app.jac
+jac start src/app.jac
 ```
 
-Visit `http://localhost:8000/page/app` to see your app!
+Visit `http://localhost:8000` to see your app! (The `app` component is served at the root by default.)
+
+You can also access the app at `http://localhost:8000/cl/app`.
+
+> **Note**: The `--npm` flag creates a client-side project with an organized folder structure. Without `--npm`, `jac create` creates a standard Jac project.
 
 ---
 
-## 📚 Documentation
+## Documentation
 
 For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 
@@ -50,16 +54,19 @@ For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**:
 
 ---
 
-## 💡 Example
+## Example
 
 ### Simple Counter with React Hooks
 
 ```jac
-cl import from react { useState, useEffect }
+# Note: useState is auto-injected when using has variables in cl blocks
+# Only useEffect needs explicit import
+cl import from react { useEffect }
 
 cl {
     def Counter() -> any {
-        let [count, setCount] = useState(0);
+        # useState is automatically available - no import needed!
+        [count, setCount] = useState(0);
 
         useEffect(lambda -> None {
             console.log("Count changed:", count);
@@ -81,10 +88,13 @@ cl {
 }
 ```
 
+> **Note:** When using `has` variables in `cl {}` blocks or `.cl.jac` files, the `useState` import is automatically injected. You only need to explicitly import other hooks like `useEffect`.
+
 ### Full-Stack Todo App
 
 ```jac
-cl import from react { useState, useEffect }
+# useState is auto-injected, only import useEffect
+cl import from react { useEffect }
 cl import from '@jac-client/utils' { jacSpawn }
 
 # Backend: Jac nodes and walkers
@@ -110,7 +120,8 @@ walker read_todos {
 # Frontend: React component
 cl {
     def app() -> any {
-        let [todos, setTodos] = useState([]);
+        # useState is automatically available - no import needed!
+        [todos, setTodos] = useState([]);
 
         useEffect(lambda -> None {
             async def loadTodos() -> None {
@@ -132,7 +143,7 @@ cl {
 
 ---
 
-## 🔧 Requirements
+## Requirements
 
 - Python: 3.12+
 - Node.js: For npm and Vite
@@ -140,9 +151,10 @@ cl {
 
 ---
 
-## 🛠️ How It Works
+## ️ How It Works
 
 Jac Client is a plugin that:
+
 1. Compiles your `.jac` client code to JavaScript
 2. Bundles dependencies with Vite for optimal performance
 3. Provides a runtime for reactive state and components
@@ -150,7 +162,7 @@ Jac Client is a plugin that:
 
 ---
 
-## 📖 Learn More
+## Learn More
 
 - **Full Documentation**: See [docs/](jac_client/docs/) for comprehensive guides
 - **Examples**: Check `jac_client/examples/` for working examples
@@ -158,10 +170,10 @@ Jac Client is a plugin that:
 
 ---
 
-## 📄 License
+## License
 
 MIT License - see [LICENSE](../LICENSE) file.
 
 ---
 
-**Happy coding with Jac!** 🎉
+**Happy coding with Jac!**

jac_client-0.2.9/jac_client/examples/all-in-one/assets/workers/worker.py

@@ -0,0 +1,5 @@
+# worker.py
+
+
+def handle_message() -> str:
+    return "✓ Message processed by Python Worker | Successfully handled by worker.py"

{jac_client-0.2.3 → jac_client-0.2.9}/jac_client/examples/all-in-one/button.jac

@@ -1,6 +1,6 @@
 cl import from antd { Button }
 
-cl def CustomButtonRoot()  -> any {
+cl def:pub CustomButtonRoot -> any {
     return <Button>
         Root Button
     </Button>;

jac_client-0.2.9/jac_client/examples/all-in-one/components/CategoryFilter.jac

@@ -0,0 +1,35 @@
+# Category filter component
+# Demonstrates: iteration with map, conditional classes, events
+
+cl import from ..constants.categories { CATEGORIES, CATEGORY_LABELS, CATEGORY_COLORS }
+
+cl {
+    # Filter buttons for categories
+    def:pub CategoryFilter(selectedCategory: str, onSelect: any) -> any {
+        # Add "ALL" to the beginning of categories
+        allCategories = ["ALL"].concat(CATEGORIES);
+
+        return <div className="category-filter">
+            <h3 className="filter-title">Filter by Category</h3>
+            <div className="filter-buttons">
+                {allCategories.map(lambda cat: str -> any {
+                    isActive = selectedCategory == cat;
+                    color = CATEGORY_COLORS[cat] if cat != "ALL" else "#374151";
+
+                    return <button
+                        key={cat}
+                        className={("filter-btn active") if isActive else ("filter-btn")}
+                        style={{
+                            "borderColor": color,
+                            "backgroundColor": (color) if isActive else ("transparent"),
+                            "color": ("#fff") if isActive else (color)
+                        }}
+                        onClick={lambda: onSelect(cat)}
+                    >
+                        {(cat) if cat == "ALL" else (CATEGORY_LABELS[cat])}
+                    </button>;
+                })}
+            </div>
+        </div>;
+    }
+}

jac_client-0.2.9/jac_client/examples/all-in-one/components/Header.jac

@@ -0,0 +1,13 @@
+# Header component
+# Demonstrates: simple component, CSS classes
+
+cl {
+    def:pub Header() -> any {
+        return <header className="header">
+            <div className="header-content">
+                <h1 className="header-title">Budget Planner</h1>
+                <p className="header-subtitle">Track your income and expenses</p>
+            </div>
+        </header>;
+    }
+}

jac_client-0.2.9/jac_client/examples/all-in-one/components/ProfitOverview.jac

@@ -0,0 +1,50 @@
+# Profit Overview component - monthly profit snapshot
+# Demonstrates: context usage, calculated displays, formatting
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..utils.formatters { formatCurrency }
+
+cl {
+    def:pub ProfitOverview() -> any {
+        budget = useBudgetContext();
+
+        businessIncome = budget["businessIncome"];
+        businessExpenses = budget["businessExpenses"];
+        taxReserve = budget["taxReserve"];
+        netProfit = budget["netProfit"];
+
+        return <div className="profit-overview">
+            <h3 className="profit-title">Monthly Profit Snapshot</h3>
+
+            <div className="profit-breakdown">
+                <div className="profit-row income">
+                    <span className="profit-label">Business Income</span>
+                    <span className="profit-value positive">
+                        +{formatCurrency(businessIncome)}
+                    </span>
+                </div>
+
+                <div className="profit-row expense">
+                    <span className="profit-label">Business Expenses</span>
+                    <span className="profit-value negative">
+                        -{formatCurrency(businessExpenses)}
+                    </span>
+                </div>
+
+                <div className="profit-row tax">
+                    <span className="profit-label">Tax Reserve (20%)</span>
+                    <span className="profit-value negative">
+                        -{formatCurrency(taxReserve)}
+                    </span>
+                </div>
+
+                <div className="profit-row total">
+                    <span className="profit-label">Net Profit</span>
+                    <span className={("profit-value bold positive") if netProfit >= 0 else ("profit-value bold negative")}>
+                        {("+") if netProfit > 0 else ("")}{formatCurrency(netProfit)}
+                    </span>
+                </div>
+            </div>
+        </div>;
+    }
+}

jac_client-0.2.9/jac_client/examples/all-in-one/components/Summary.jac

@@ -0,0 +1,53 @@
+# Summary component - displays budget totals with business/personal breakdown
+# Demonstrates: context usage, conditional rendering, ternary operator, 6-card layout
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..utils.formatters { formatCurrency }
+
+cl {
+    def:pub Summary() -> any {
+        budget = useBudgetContext();
+
+        # Business/Personal breakdown
+        businessIncome = budget["businessIncome"];
+        businessExpenses = budget["businessExpenses"];
+        personalIncome = budget["personalIncome"];
+        personalExpenses = budget["personalExpenses"];
+        taxReserve = budget["taxReserve"];
+        netProfit = budget["netProfit"];
+
+        return <div className="summary">
+            <div className="summary-card business-income">
+                <span className="summary-label">Business Income</span>
+                <span className="summary-value">{formatCurrency(businessIncome)}</span>
+            </div>
+
+            <div className="summary-card business-expenses">
+                <span className="summary-label">Business Expenses</span>
+                <span className="summary-value">{formatCurrency(businessExpenses)}</span>
+            </div>
+
+            <div className="summary-card personal-income">
+                <span className="summary-label">Personal Income</span>
+                <span className="summary-value">{formatCurrency(personalIncome)}</span>
+            </div>
+
+            <div className="summary-card personal-expenses">
+                <span className="summary-label">Personal Expenses</span>
+                <span className="summary-value">{formatCurrency(personalExpenses)}</span>
+            </div>
+
+            <div className="summary-card tax-reserve">
+                <span className="summary-label">Tax Reserve (20%)</span>
+                <span className="summary-value">{formatCurrency(taxReserve)}</span>
+            </div>
+
+            <div className={("summary-card net-profit positive") if netProfit >= 0 else ("summary-card net-profit negative")}>
+                <span className="summary-label">Net Profit</span>
+                <span className="summary-value">
+                    {("+") if netProfit > 0 else ("")}{formatCurrency(netProfit)}
+                </span>
+            </div>
+        </div>;
+    }
+}

jac_client-0.2.9/jac_client/examples/all-in-one/components/TransactionForm.jac

@@ -0,0 +1,158 @@
+# Transaction form component
+# Demonstrates: form handling, useState, events, select options
+
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..constants.categories { CATEGORIES, CATEGORY_LABELS }
+cl import from ..constants.clients { CLIENTS }
+
+cl {
+    def:pub TransactionForm() -> any {
+        [description, setDescription] = useState("");
+        [amount, setAmount] = useState("");
+        [category, setCategory] = useState("OTHER");
+        [txType, setTxType] = useState("expense");
+        [isBusiness, setIsBusiness] = useState(false);
+        [clientName, setClientName] = useState("");
+        budget = useBudgetContext();
+
+        def handleSubmit(e: any) -> None {
+            e.preventDefault();
+
+            # Validate inputs
+            trimmedDesc = description.trim();
+            if trimmedDesc == "" or amount == "" {
+                return;
+            }
+
+            parsedAmount = parseFloat(amount);
+            if isNaN(parsedAmount) or parsedAmount <= 0 {
+                return;
+            }
+
+            # Add the transaction
+            budget["addTransaction"](trimmedDesc, parsedAmount, category, txType, isBusiness, clientName);
+
+            # Reset form
+            setDescription("");
+            setAmount("");
+            setCategory("OTHER");
+            setIsBusiness(false);
+            setClientName("");
+        }
+
+        # Filter categories based on type (income only has INCOME category)
+        availableCategories = CATEGORIES.filter(lambda cat: str -> bool {
+            if txType == "income" {
+                return cat == "INCOME";
+            }
+            return cat != "INCOME";
+        });
+
+        # Show client dropdown only for business income
+        showClientDropdown = (txType == "income" and isBusiness);
+
+        return <form className="transaction-form" onSubmit={handleSubmit}>
+            <div className="form-row">
+                <div className="form-group type-toggle">
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if txType == "expense" else ("toggle-btn")}
+                        onClick={lambda: setTxType("expense")}
+                    >
+                        Expense
+                    </button>
+                    <button
+                        type="button"
+                        className={("toggle-btn active income") if txType == "income" else ("toggle-btn")}
+                        onClick={lambda: setTxType("income")}
+                    >
+                        Income
+                    </button>
+                </div>
+
+                <div className="form-group business-toggle">
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if isBusiness else ("toggle-btn")}
+                        onClick={lambda: setIsBusiness(true)}
+                    >
+                        Business
+                    </button>
+                    <button
+                        type="button"
+                        className={("toggle-btn active") if not isBusiness else ("toggle-btn")}
+                        onClick={lambda: setIsBusiness(false)}
+                    >
+                        Personal
+                    </button>
+                </div>
+            </div>
+
+            <div className="form-row">
+                <div className="form-group">
+                    <label htmlFor="description">Description</label>
+                    <input
+                        id="description"
+                        type="text"
+                        value={description}
+                        onChange={lambda e: any -> None { setDescription(e.target.value); }}
+                        placeholder="Enter description..."
+                        className="form-input"
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="amount">Amount</label>
+                    <input
+                        id="amount"
+                        type="number"
+                        value={amount}
+                        onChange={lambda e: any -> None { setAmount(e.target.value); }}
+                        placeholder="0.00"
+                        min="0"
+                        step="0.01"
+                        className="form-input"
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="category">Category</label>
+                    <select
+                        id="category"
+                        value={category}
+                        onChange={lambda e: any -> None { setCategory(e.target.value); }}
+                        className="form-select"
+                    >
+                        {availableCategories.map(lambda cat: str -> any {
+                            return <option key={cat} value={cat}>
+                                {CATEGORY_LABELS[cat]}
+                            </option>;
+                        })}
+                    </select>
+                </div>
+
+                {showClientDropdown and <div className="form-group">
+                    <label htmlFor="client">Client</label>
+                    <select
+                        id="client"
+                        value={clientName}
+                        onChange={lambda e: any -> None { setClientName(e.target.value); }}
+                        className="form-select"
+                    >
+                        <option value="">Select Client (Optional)</option>
+                        {CLIENTS.map(lambda client: str -> any {
+                            return <option key={client} value={client}>{client}</option>;
+                        })}
+                    </select>
+                </div>}
+
+                <div className="form-group">
+                    <label>Action</label>
+                    <button type="submit" className="submit-btn">
+                        Add {(txType[0].toUpperCase() + txType.slice(1))}
+                    </button>
+                </div>
+            </div>
+        </form>;
+    }
+}