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

jac_client/plugin/client.jac

@@ -18,6 +18,31 @@ glob JsonValue: TypeAlias = None | str | int | float | bool | list['JsonValue']
      ],
      StatusCode: TypeAlias = Literal[(200, 201, 400, 401, 404, 503)];
 
+"""Builds HTML head content from meta data."""
+obj HeaderBuilder {
+    has meta_data: dict,
+        function_name: str,
+        DEFAULTS: dict = {
+            "charset": "UTF-8",
+            "viewport": "width=device-width,initial-scale=1"
+        },
+        standard_tags: list = [
+            "description",
+            "keywords",
+            "author",
+            "robots",
+            "theme_color"
+        ];
+
+    def build_head -> str;
+    def _get_value(key: str) -> str;
+    def _build_special_tags -> list[str];
+    def _build_meta_tags -> list[str];
+    def _build_og_tags -> list[str];
+    def _build_link_tags -> list[str];
+    def _build_generic_meta_tags -> list[str];
+}
+
 """Jac Client."""
 class JacClient {
     @hookimpl

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,
@@ -13,11 +13,14 @@ import from 'react-router-dom' {
     useLocation as reactRouterUseLocation,
     useParams as reactRouterUseParams
 }
+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,
@@ -25,7 +28,8 @@ glob:pub useState = reactUseState,
      Navigate = ReactRouterNavigate,
      useNavigate = reactRouterUseNavigate,
      useLocation = reactRouterUseLocation,
-     useParams = reactRouterUseParams;
+     useParams = reactRouterUseParams,
+     JacClientErrorBoundary = ErrorBoundary;
 
 def:pub useRouter -> dict;
 def:pub navigate(path: str) -> None;
@@ -39,4 +43,6 @@ def:pub jacIsLoggedIn -> bool;
 def:pub __getLocalStorage(key: str) -> str;
 def:pub __setLocalStorage(key: str, value: str) -> None;
 def:pub __removeLocalStorage(key: str) -> None;
+def:pub ErrorFallback(error: str, resetErrorBoundary: any) -> any;
+def:pub errorOverlay(filePath: str, errors: str) -> any;
 # React Router components

jac_client/plugin/impl/client.impl.jac

@@ -126,61 +126,8 @@ impl JacClient.render_page(
     # Get meta data from config
     client_cfg = config.get_plugin_config("client") if config else None;
     meta_data = client_cfg.get("app_meta_data", {}) if client_cfg else {};
-    charset = meta_data.get("charset", "UTF-8");
-    title = meta_data.get("title", function_name);
-    viewport = meta_data.get("viewport", "width=device-width, initial-scale=1");
-    description = meta_data.get("description", None);
-    robots = meta_data.get("robots", "index, follow");
-    canonical = meta_data.get("canonical", None);
-    og_type = meta_data.get("og_type", "website");
-    og_title = meta_data.get("og_title", title);
-    og_description = meta_data.get("og_description", None);
-    og_url = meta_data.get("og_url", None);
-    og_image = meta_data.get("og_image", None);
-    theme_color = meta_data.get("theme_color", "#ffffff");
-    icon = meta_data.get("icon", None);
-    # Build head content from TOML metadata
-    head_content = f'<meta charset="{html.escape(charset)}"/>\n            <meta name="viewport" content="{html.escape(
-        viewport
-    )}"/>\n            <title>{html.escape(title)}</title>';
-    head_content += f'\n            <meta name="robots" content="{html.escape(robots)}"/>';
-    head_content += f'\n            <meta name="theme-color" content="{html.escape(
-        theme_color
-    )}"/>';
-    head_content += f'\n            <meta property="og:type" content="{html.escape(
-        og_type
-    )}"/>';
-    head_content += f'\n            <meta property="og:title" content="{html.escape(
-        og_title
-    )}"/>';
-    if description {
-        head_content += f'\n            <meta name="description" content="{html.escape(
-            description
-        )}"/>';
-    }
-    if canonical {
-        head_content += f'\n            <link rel="canonical" href="{html.escape(
-            canonical
-        )}"/>';
-    }
-    if icon {
-        head_content += f'\n            <link rel="icon" href="{html.escape(icon)}"/>';
-    }
-    if og_url {
-        head_content += f'\n            <meta property="og:url" content="{html.escape(
-            og_url
-        )}"/>';
-    }
-    if og_image {
-        head_content += f'\n            <meta property="og:image" content="{html.escape(
-            og_image
-        )}"/>';
-    }
-    if og_description {
-        head_content += f'\n            <meta property="og:description" content="{html.escape(
-            og_description
-        )}"/>';
-    }
+    head_builder = HeaderBuilder(meta_data, function_name);
+    head_content = head_builder.build_head();
     if css_link {
         head_content += f"\n            {css_link}";
     }
@@ -191,3 +138,97 @@ impl JacClient.render_page(
         'bundle_code': introspector._bundle.code
     };
 }
+
+"""Build complete HTML head."""
+impl HeaderBuilder.build_head -> str {
+    lines: list = [];
+    lines.extend(self._build_special_tags());  # charset, viewport, title
+    lines.extend(self._build_meta_tags());  # description, robots, etc
+    lines.extend(self._build_og_tags());  # Open Graph
+    lines.extend(self._build_link_tags());  # canonical, icon, etc
+    lines.extend(self._build_generic_meta_tags());  # custom meta_* tags
+    return "\n            ".join(lines);
+}
+
+"""Build generic meta tags (meta_* prefix for any custom metadata)."""
+impl HeaderBuilder._build_generic_meta_tags -> list[str] {
+    lines: list = [];
+    for (key, val) in self.meta_data.items() {
+        if key.startswith("meta_") and val {
+            # meta_custom_field → name="custom-field"
+            name = key[5:].replace("_", "-");
+            lines.append(f'<meta name={name} content={html.escape(str(val))} />');
+        }
+    }
+    return lines;
+}
+
+"""Build link tags (link_* prefix or special cases)."""
+impl HeaderBuilder._build_link_tags -> list[str] {
+    lines: list = [];
+    special_links = {
+        "canonical": "canonical",
+        "icon": "icon",
+        "apple_touch_icon": "apple-touch-icon",
+        "manifest": "manifest"
+    };
+    for (key, rel) in special_links.items() {
+        if val := self._get_value(key) {
+            lines.append(f'<link rel={rel} href={html.escape(str(val))} />');
+        }
+    }
+    for (key, val) in self.meta_data.items() {
+        if key.startswith("link_") and val {
+            # link_preconnect_google → rel="preconnect"
+            rel = key[5:].replace("_", "-");
+            lines.append(f'<link rel={rel} href={html.escape(str(val))} />');
+        }
+    }
+    return lines;
+}
+
+"""Build Open Graph tags (og_* prefix)."""
+impl HeaderBuilder._build_og_tags -> list[str] {
+    lines: list = [];
+    for (key, val) in self.meta_data.items() {
+        if key.startswith("og_") and val {
+            property_name = key[3:].replace("_", ":");
+            lines.append(
+                f'<meta property=og:{property_name} content={html.escape(str(val))} />'
+            );
+        }
+    }
+    return lines;
+}
+
+"""Build standard meta tags (description, robots, keywords, author, etc)."""
+impl HeaderBuilder._build_meta_tags -> list[str] {
+    lines: list = [];
+    for key in self.standard_tags {
+        if val := self._get_value(key) {
+            # Convert underscore to dash (theme_color → theme-color)
+            name = key.replace("_", "-");
+            lines.append(f'<meta name={name} content={html.escape(val)} />');
+        }
+    }
+    return lines;
+}
+
+"""Build special tags (charset, viewport, title)."""
+impl HeaderBuilder._build_special_tags -> list[str] {
+    lines: list = [];
+    if charset := self._get_value("charset") {
+        lines.append(f'<meta charset={html.escape(charset)} />');
+    }
+    if viewport := self._get_value("viewport") {
+        lines.append(f'<meta name="viewport" content={html.escape(viewport)} />');
+    }
+    title = self._get_value("title") or self.function_name;
+    lines.append(f'<title>{html.escape(title)}</title>');
+    return lines;
+}
+
+"""Get value with fallback to defaults."""
+impl HeaderBuilder._get_value(key: str) -> str {
+    return self.meta_data.get(key) or self.DEFAULTS.get(key);
+}

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();
@@ -193,3 +193,157 @@ impl __removeLocalStorage(key: str) -> None {
         storage.removeItem(key);
     }
 }
+
+impl ErrorFallback(error: str, resetErrorBoundary: any) -> any {
+    return
+        <div
+            role="alert"
+            style={{
+                minHeight: "100vh",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "#f9fafb",
+                fontFamily: "system-ui, sans-serif",
+
+            }}
+        >
+            <div
+                role="alert"
+                style={{
+                    minHeight: "100vh",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "#f9fafb",
+                    fontFamily: "system-ui, sans-serif",
+
+                }}
+            >
+                <h2 style={{color: "#dc2626", marginBottom: "12px"}}>
+                    🚨 Something went wrong
+                </h2>
+                <p style={{color: "#374151", marginBottom: "16px"}}>
+                    An unexpected error occurred. Please try again.
+                </p>
+                <pre
+                    style={{
+                        color: "#991b1b",
+                        background: "#fee2e2",
+                        padding: "12px",
+                        borderRadius: "8px",
+                        fontSize: "14px",
+                        overflowX: "auto",
+                        marginBottom: "16px",
+
+                    }}
+                >
+                    {error.error.message}
+                </pre>
+                <button
+                    onClick={lambda -> None { error.resetErrorBoundary();}}
+                    style={{
+                        backgroundColor: "#2563eb",
+                        color: "#fff",
+                        padding: "10px 16px",
+                        borderRadius: "8px",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: "14px",
+
+                    }}
+                >
+                    🔄 Try again
+                </button>
+            </div>
+        </div>;
+}
+
+impl errorOverlay(filePath: str, errors: str) -> any {
+    return (
+        <div
+            style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                background: "rgba(0, 0, 0, 0.85)",
+                color: "#fff",
+                fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
+                fontSize: 14,
+                zIndex: 999999,
+                overflow: "auto",
+                padding: 20,
+                boxSizing: "border-box",
+
+            }}
+        >
+            <div style={{maxWidth: 1200, margin: "0 auto"}}>
+                <div
+                    style={{
+                        background: "#d32f2f",
+                        color: "white",
+                        padding: "16px 24px",
+                        borderRadius: "8px 8px 0 0",
+                        fontSize: 18,
+                        fontWeight: "bold",
+
+                    }}
+                >
+                    ⚠️ Compilation Error
+                </div>
+                <div
+                    style={{
+                        background: "#1e1e1e",
+                        padding: 24,
+                        borderRadius: "0 0 8px 8px",
+
+                    }}
+                >
+                    <div style={{marginBottom: 16}}>
+                        <div style={{color: "#888", marginBottom: 8}}>
+                            File:
+                        </div>
+                        <div style={{color: "#64b5f6", fontWeight: "bold"}}>
+                            {filePath}
+                        </div>
+                    </div>
+                    <div>
+                        <div style={{color: "#888", marginBottom: 8}}>
+                            Error:
+                        </div>
+                        <pre
+                            style={{
+                                background: "#2d2d2d",
+                                padding: 16,
+                                borderRadius: 4,
+                                overflowX: "auto",
+                                margin: 0,
+                                borderLeft: "4px solid #d32f2f",
+                                lineHeight: 1.6,
+                                color: "#ff6b6b",
+
+                            }}
+                        >
+                            {errors}
+                        </pre>
+                    </div>
+                    <div
+                        style={{
+                            marginTop: 24,
+                            paddingTop: 16,
+                            borderTop: "1px solid #444",
+                            color: "#888",
+                            fontSize: 13,
+
+                        }}
+                    >
+                        💡 Fix the error and save the file to continue development.
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}