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

jac_client/examples/with-router/main.jac

@@ -1,6 +1,6 @@
 # React Router HashRouter Example
 cl import from react { useEffect }
-cl import from "@jac-client/utils" {
+cl import from "@jac/runtime" {
     Router,
     Routes,
     Route,
@@ -20,104 +20,104 @@ cl {
             navigate("/about");
         }
 
-        return <div>
-            <h1>
-                🏠 Home Page
-            </h1>
-            <p>
-                Welcome to the home page!
-            </p>
-            <p>
-                This example uses React Router's
-                <strong>
-                    HashRouter
-                </strong>
-                #  for client-side routing.
-            </p>
-            <p>
-                Current path:
-                <code>
-                    {location.pathname}
-                </code>
-            </p>
-            <button
-                onClick={goToAbout}
-            >
-                Go to About →
-            </button>
-        </div>;
+        return
+            <div>
+                <h1>
+                    🏠 Home Page
+                </h1>
+                <p>
+                    Welcome to the home page!
+                </p>
+                <p>
+                    This example uses React Router's
+                    <strong>
+                        HashRouter
+                    </strong>
+                    #  for client-side routing.
+                </p>
+                <p>
+                    Current path:
+                    <code>
+                        {location.pathname}
+                    </code>
+                </p>
+                <button onClick={goToAbout}>
+                    Go to About →
+                </button>
+            </div>;
     }
 
     # About Page Component
     def About -> any {
         location = useLocation();
 
-        return <div>
-            <h1>
-                ℹ️ About Page
-            </h1>
-            <p>
-                This is the about page.
-            </p>
-            <p>
-                Learn more about our application here.
-            </p>
-            <p>
-                Current path:
-                <code>
-                    {location.pathname}
-                </code>
-            </p>
-            <div
-                style={{"marginTop": "1rem"}}
-            >
-                <Link to="/about/team">
-                    View Team →
-                </Link>
-            </div>
-        </div>;
+        return
+            <div>
+                <h1>
+                    ℹ️ About Page
+                </h1>
+                <p>
+                    This is the about page.
+                </p>
+                <p>
+                    Learn more about our application here.
+                </p>
+                <p>
+                    Current path:
+                    <code>
+                        {location.pathname}
+                    </code>
+                </p>
+                <div style={{"marginTop": "1rem"}}>
+                    <Link to="/about/team">
+                        View Team →
+                    </Link>
+                </div>
+            </div>;
     }
 
     # Team Page Component (nested route example)
     def Team -> any {
-        return <div>
-            <h1>
-                👥 Our Team
-            </h1>
-            <p>
-                Meet the amazing team behind this project!
-            </p>
-            <Link to="/about">
-                ← Back to About
-            </Link>
-        </div>;
+        return
+            <div>
+                <h1>
+                    👥 Our Team
+                </h1>
+                <p>
+                    Meet the amazing team behind this project!
+                </p>
+                <Link to="/about">
+                    ← Back to About
+                </Link>
+            </div>;
     }
 
     # User Profile Component (with URL parameters)
     def UserProfile -> any {
         params = useParams();
-        userId = params.id if params.id else "Unknown";
+        userId = params.id or "Unknown";
 
-        return <div>
-            <h1>
-                👤 User Profile
-            </h1>
-            <p>
-                Viewing profile for user:
-                <strong>
-                    {userId}
-                </strong>
-            </p>
-            <p>
-                This demonstrates URL parameters using
-                <code>
-                    /user/:id
-                </code>
-            </p>
-            <Link to="/">
-                ← Back to Home
-            </Link>
-        </div>;
+        return
+            <div>
+                <h1>
+                    👤 User Profile
+                </h1>
+                <p>
+                    Viewing profile for user:
+                    <strong>
+                        {userId}
+                    </strong>
+                </p>
+                <p>
+                    This demonstrates URL parameters using
+                    <code>
+                        /user/:id
+                    </code>
+                </p>
+                <Link to="/">
+                    ← Back to Home
+                </Link>
+            </div>;
     }
 
     # Contact Page Component
@@ -134,54 +134,50 @@ cl {
         }
 
         if submitted {
-            return <div>
+            return
+                <div>
+                    <h1>
+                        📧 Contact Page
+                    </h1>
+                    <div style={{"color": "green"}}>
+                        <p>
+                            ✓ Thank you! Your message has been sent.
+                        </p>
+                        <button onClick={resetForm}>
+                            Send another
+                        </button>
+                    </div>
+                </div>;
+        }
+
+        return
+            <div>
                 <h1>
                     📧 Contact Page
                 </h1>
-                <div
-                    style={{"color": "green"}}
-                >
-                    <p>
-                        ✓ Thank you! Your message has been sent.
-                    </p>
-                    <button
-                        onClick={resetForm}
-                    >
-                        Send another
+                <p>
+                    Get in touch with us!
+                </p>
+                <form onSubmit={handleSubmit}>
+                    <input
+                        type="text"
+                        placeholder="Your name"
+                        style={{"margin": "0.5rem 0", "display": "block"}}
+                    />
+                    <input
+                        type="text"
+                        placeholder="Your username"
+                        style={{"margin": "0.5rem 0", "display": "block"}}
+                    />
+                    <textarea
+                        placeholder="Your message"
+                        style={{"margin": "0.5rem 0", "display": "block"}}
+                    ></textarea>
+                    <button type="submit">
+                        Send Message
                     </button>
-                </div>
+                </form>
             </div>;
-        }
-
-        return <div>
-            <h1>
-                📧 Contact Page
-            </h1>
-            <p>
-                Get in touch with us!
-            </p>
-            <form
-                onSubmit={handleSubmit}
-            >
-                <input
-                    type="text"
-                    placeholder="Your name"
-                    style={{"margin": "0.5rem 0", "display": "block"}}
-                />
-                <input
-                    type="text"
-                    placeholder="Your username"
-                    style={{"margin": "0.5rem 0", "display": "block"}}
-                />
-                <textarea
-                    placeholder="Your message"
-                    style={{"margin": "0.5rem 0", "display": "block"}}
-                ></textarea>
-                <button type="submit">
-                    Send Message
-                </button>
-            </form>
-        </div>;
     }
 
     # 404 Not Found Component
@@ -193,25 +189,22 @@ cl {
             navigate("/");
         }
 
-        return <div
-            style={{"textAlign": "center", "padding": "2rem"}}
-        >
-            <h1>
-                🔍 404 - Page Not Found
-            </h1>
-            <p>
-                The page
-                <code>
-                    {location.pathname}
-                </code>
-                does not exist.
-            </p>
-            <button
-                onClick={goHome}
-            >
-                Go Home
-            </button>
-        </div>;
+        return
+            <div style={{"textAlign": "center", "padding": "2rem"}}>
+                <h1>
+                    🔍 404 - Page Not Found
+                </h1>
+                <p>
+                    The page
+                    <code>
+                        {location.pathname}
+                    </code>
+                    does not exist.
+                </p>
+                <button onClick={goHome}>
+                    Go Home
+                </button>
+            </div>;
     }
 
     # Navigation Component with active link styling
@@ -231,93 +224,63 @@ cl {
             };
         }
 
-        return <nav
-            style={{
-                "padding": "1rem",
-                "backgroundColor": "#f5f5f5",
-                "marginBottom": "2rem",
-                "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
-            }}
-        >
-            <div
+        return
+            <nav
                 style={{
-                    "maxWidth": "1200px",
-                    "margin": "0 auto",
-                    "display": "flex",
-                    "gap": "1rem",
-                    "alignItems": "center"
+                    "padding": "1rem",
+                    "backgroundColor": "#f5f5f5",
+                    "marginBottom": "2rem",
+                    "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
                 }}
             >
-                <Link
-                    to="/"
-                    style={linkStyle("/")}
-                >
-                    Home
-                </Link>
-                <Link
-                    to="/about"
-                    style={linkStyle("/about")}
-                >
-                    About
-                </Link>
-                <Link
-                    to="/contact"
-                    style={linkStyle("/contact")}
-                >
-                    Contact
-                </Link>
-                <Link
-                    to="/user/123"
-                    style={linkStyle("/user/123")}
-                >
-                    Profile Demo
-                </Link>
-            </div>
-        </nav>;
-    }
-
-    # Main App Component with React Router HashRouter
-    def:pub app -> any {
-        return <Router>
-            <div
-                style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}
-            >
-                <Navigation />
                 <div
                     style={{
                         "maxWidth": "1200px",
                         "margin": "0 auto",
-                        "padding": "0 1rem"
+                        "display": "flex",
+                        "gap": "1rem",
+                        "alignItems": "center"
                     }}
                 >
-                    <Routes>
-                        <Route
-                            path="/"
-                            element={<Home />}
-                        />
-                        <Route
-                            path="/about"
-                            element={<About />}
-                        />
-                        <Route
-                            path="/about/team"
-                            element={<Team />}
-                        />
-                        <Route
-                            path="/contact"
-                            element={<Contact />}
-                        />
-                        <Route
-                            path="/user/:id"
-                            element={<UserProfile />}
-                        />
-                        <Route
-                            path="*"
-                            element={<NotFound />}
-                        />
-                    </Routes>
+                    <Link to="/" style={linkStyle("/")}>
+                        Home
+                    </Link>
+                    <Link to="/about" style={linkStyle("/about")}>
+                        About
+                    </Link>
+                    <Link to="/contact" style={linkStyle("/contact")}>
+                        Contact
+                    </Link>
+                    <Link to="/user/123" style={linkStyle("/user/123")}>
+                        Profile Demo
+                    </Link>
+                </div>
+            </nav>;
+    }
+
+    # Main App Component with React Router HashRouter
+    def:pub app -> any {
+        return
+            <Router>
+                <div style={{"fontFamily": "system-ui, -apple-system, sans-serif"}}>
+                    <Navigation />
+                    <div
+                        style={{
+                            "maxWidth": "1200px",
+                            "margin": "0 auto",
+                            "padding": "0 1rem"
+                        }}
+                    >
+                        <Routes>
+                            <Route path="/" element={<Home />} />
+                            <Route path="/about" element={<About />} />
+                            <Route path="/about/team" element={<Team />} />
+                            <Route path="/contact" element={<Contact />} />
+                            <Route path="/user/:id" element={<UserProfile />} />
+                            <Route path="*" element={<NotFound />} />
+                        </Routes>
+                    </div>
                 </div>
-            </div>
-        </Router>;
+            </Router>;
     }
 }

jac_client/plugin/client_runtime.cl.jac

@@ -1,7 +1,7 @@
 """Client-side runtime for Jac JSX and walker interactions."""
 
 import from 'react' { * as React }
-import from 'react' { useState as reactUseState }
+import from 'react' { useState as reactUseState, useEffect as reactUseEffect }
 import from 'react-dom/client' { * as ReactDOM }
 import from 'react-router-dom' {
     HashRouter as ReactRouterHashRouter,
@@ -17,8 +17,10 @@ import from 'react-error-boundary' { ErrorBoundary }
 
 def:pub __jacJsx(tag: any, props: dict = {}, children: any = []) -> any;
 
-# React hooks re-exported for auto-injection by `has` variables
-glob:pub useState = reactUseState,
+# React hooks re-exported for auto-injection by `has` variables and `can with entry/exit` effects
+glob:
+    pub useState = reactUseState,
+     useEffect = reactUseEffect,
      Router = ReactRouterHashRouter,
      Routes = ReactRouterRoutes,
      Route = ReactRouterRoute,

jac_client/plugin/impl/client_runtime.impl.jac

@@ -86,7 +86,7 @@ impl __jacCallFunction(function_name: str, args: dict = {}) -> any {
                 "Content-Type": "application/json",
                 "Authorization": f"Bearer {token}" if token else ""
             },
-            "body": JSON.stringify({"args": args})
+            "body": JSON.stringify(args)
         }
     );
     payload = await response.json();