irgen 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 All notable changes to the `irgen` project will be documented in this file.
 
+## [0.2.2] - 2026-01-18
+
+### Core Extensions & Architecture (Phase 10)
+- **Universal Action Model**: Introduced `ActionSpec` type and `onClick` support for buttons, enabling a consistent "invoke operation" or "navigate" behavior across all UI components.
+- **Operation-Backed Forms**: Updated `DeclFormSchema` to support `operationId` in submission configuration, allowing forms to bind directly to backend operations instead of hardcoded URLs.
+- **Micro-Frontend Support**: Added `macro` field to `DeclComponentSchema`, enabling the definition of "Page Templates" (like `TablePage`, `EditorPage`) as single high-level components with props.
+- **Dependency Declaration**: Added `requiredComponentKeys` to `DeclFrontendAppSchema`, allowing extensions and presets to explicitly declare their UI component dependencies.
+- **Active Runtime Signals**: Implemented functional execution of `toast`, `redirect`, `openUrl`, and `downloadAs` signals in the headless runtime (`BaseRuntime`), replacing passive data with active behavior.
+- **Frontend auth contract**: Added `frontend.auth` to declare login/logout operations, login path, and nav visibility rules in a deterministic, policy-driven way.
+- **Form lifecycle upgrades**: Added `form.load` with args/when/mapFields, plus `form.submit.label` for configurable submit text.
+- **Table UX contracts**: Added `table.rowNavigateTo` (row click navigation) and `table.rowActions` with per-row actions and optional confirm dialogs.
+- **Runtime logic evaluation**: Frontend runtime now evaluates logic expressions for path params, action arguments, and field mapping, enabling dynamic behaviors without recompilation.
+- **Frontend build hooks**: Added `build.copyTo`/`build.postbuild` policy to emit postbuild copy scripts in frontend outputs (`copyToPublic` is deprecated).
+- **Component UI variants**: Added `component.props.uiVariant` (`header`/`inline`) and `component.props.layoutVariant` (`header`) to control header-style layouts without card wrappers.
+- **Visual policy (best-effort)**: Emitter reads `policies.frontend.visual` knobs (`navLayout`, `contentWidth`, `density`) without adding schema validation.
+- **Topbar controls (best-effort)**: `visual.topbarControls` controls right-side navbar items (search/notifications/theme/avatar), avatar visibility, and optional custom links.
+- **Branding controls (best-effort)**: `visual.brand` can hide/show logos and override logo src/text/icon in topbar/sidebar.
+- **Nav overrides (best-effort)**: `visual.navItems` can define separate menus for topbar and sidebar, and hide topbar.
+- **Footer/search overrides (best-effort)**: `visual.footerLinks` and `visual.search` allow replacing footer links and search copy without core edits.
+- **Footer layout (best-effort)**: `visual.footer` can disable or compact footer and override footer text.
+- **Form styling (best-effort)**: `visual.form` allows overriding form label/input/error/button/form classes.
+- **Button styling (best-effort)**: `visual.button` allows overriding base/variant button classes.
+- **Table styling (best-effort)**: `visual.table` allows overriding table container/row/cell/action classes.
+- **Tabs styling (best-effort)**: `visual.tabs` allows overriding tabs container/header/button/panel classes.
+- **Marketing blocks (best-effort)**: `visual.marketing` allows overriding hero/features/logos/etc container/title classes.
+- **Card styling (best-effort)**: `visual.cards` allows overriding card/empty/placeholder classes.
+- **Prose styling (best-effort)**: `visual.prose` allows overriding markdown/prose wrapper class.
+- **Motion styling (best-effort)**: `visual.motion` allows overriding page enter + hover/alert/tag motion classes.
+- **Copy overrides (best-effort)**: `visual.copy` allows overriding empty/placeholder/table/tab strings plus common UI labels, including runtime error text.
+- **Token overrides (best-effort)**: `visual.tokens` allows overriding typography/spacing/radius/shadow/color/motion tokens.
+- **Icon overrides (best-effort)**: `visual.icons` allows overriding default UI chrome icons, including docs section + docs item + nav + footer + search modal + row action icons.
+- **SSR fix**: ensure `App.tsx` imports React when using `React.createElement` in generated UI.
+- **Breakpoint overrides (best-effort)**: `visual.breakpoints` allows overriding responsive layout classes (padding/sidebar/docs grid).
+- **Docs/background overrides (best-effort)**: `visual.docs` and `visual.background` control docs labels/sidebar/TOC and decorative gradients.
+- **Labels/avatar overrides (best-effort)**: `visual.labels.sidebarLabel` and `visual.topbarControls.avatar.src` replace hardcoded sidebar label and avatar URL.
+
+## [0.2.1] - 2026-01-11
+
+### GitHub Pages (SSG/Hybrid)
+- Generate and build SSG/hybrid output for `examples/irgen-web.dsl.ts` in CI.
+- Fix basePath handling so nav/docs links keep `/irgen` prefix after hydration.
+- Add favicon/apple-touch-icon links in SSG output.
+- Fix PWA manifest icon path and service worker cache paths under basePath.
+- Set `SITE_URL` in Pages workflow for correct sitemap/robots URLs.
+
+### Packaging
+- Remove TypeScript sourcemaps and declaration maps from build output.
+- Align README outputs with generated examples and keep example script in sync.
+
 ## [0.2.0] - 2026-01-11
 
 ### General Purpose Frontend & Headless Runtime (Phase 3)

package/README.md

@@ -38,6 +38,7 @@ irgen focuses on **architecture and determinism**, not convenience shortcuts. ir
 - **Multi-app Support**: Set `basePath` to deploy multiple apps (e.g., `/admin`, `/docs`) under a single project or domain.
 - **Form Logic & UX**: JSONLogic predicates, dependency-tracked hooks, async select with debounce/pagination/search.
 - **Submission Pipeline**: Lifecycle hooks, confirm dialogs, response handling, and draft persistence.
+- **Auth + Table Contracts**: `frontend.auth` for login/logout flows; `form.load` for prefill; `table.rowNavigateTo` + `table.rowActions` for row navigation/actions.
 
 ### Static Site (HTML-first)
 - **HTML-only output**: emits final HTML (no React hydration), JS is strictly progressive enhancement.
@@ -149,7 +150,7 @@ See [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for details on:
 - Generation Gap Pattern
 - Port & Adapters (Hexagonal)
 - Frontend Runtime & IR
-- Frontend SSG plan: [docs/FRONTEND-SSG-PLAN.md](docs/FRONTEND-SSG-PLAN.md)
+- Macro System: [docs/MACRO-SYSTEM.md](docs/MACRO-SYSTEM.md)
 
 ## Roadmap
 - [x] Separation of Concerns (Generated vs User space)

package/dist/cli.d.ts

@@ -1,3 +1,2 @@
 #!/usr/bin/env node
 export {};
-//# sourceMappingURL=cli.d.ts.map

package/dist/cli.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 import path from "node:path";
+import fs from "node:fs";
 import { pathToFileURL } from "node:url";
+import { createRequire } from "node:module";
 import { aggregateDecls } from "./dsl/aggregator.js";
 import { registerBuiltins, runMapper } from "./mappers/index.js";
 // Guard: require a modern Node (tsx loader relies on module.register)
@@ -186,13 +188,37 @@ Examples:
             return;
         const { createExtensionContext } = await import("./extensions/context.js");
         const ctx = createExtensionContext();
+        const require = createRequire(import.meta.url);
+        const pickExtensionFn = (mod) => {
+            const candidate = (mod?.default ?? mod?.extension ?? mod);
+            if (typeof candidate === "function")
+                return candidate;
+            if (candidate && typeof candidate === "object") {
+                if (typeof candidate.default === "function")
+                    return candidate.default;
+                if (typeof candidate.extension === "function")
+                    return candidate.extension;
+            }
+            return null;
+        };
+        const resolveExtensionModule = (spec) => {
+            const isPathLike = path.isAbsolute(spec) || spec.startsWith(".") || spec.startsWith("/") || /^[A-Za-z]:[\\/]/.test(spec);
+            if (isPathLike) {
+                const abs = path.isAbsolute(spec) ? spec : path.resolve(process.cwd(), spec);
+                if (!fs.existsSync(abs)) {
+                    throw new Error(`extension module not found: ${spec}`);
+                }
+                return pathToFileURL(abs).href;
+            }
+            const resolved = require.resolve(spec, { paths: [process.cwd()] });
+            return pathToFileURL(resolved).href;
+        };
         for (const modPath of extModules) {
-            const abs = path.isAbsolute(modPath) ? modPath : path.resolve(process.cwd(), modPath);
-            const modUrl = pathToFileURL(abs).href;
+            const modUrl = resolveExtensionModule(modPath);
             const imported = await import(modUrl);
-            const fn = (imported.default ?? imported.extension ?? imported);
+            const fn = pickExtensionFn(imported);
             if (typeof fn === "function") {
-                fn(ctx, imported.options ?? undefined);
+                await fn(ctx, imported.options ?? undefined);
             }
             else {
                 console.warn(`extension module ${modPath} did not export a function`);
@@ -309,4 +335,3 @@ main().catch((err) => {
     console.error(err);
     process.exit(1);
 });
-//# sourceMappingURL=cli.js.map

package/dist/dsl/aggregator.d.ts

@@ -5,4 +5,3 @@ import { DeclBundle } from "../ir/decl/index.js";
 export declare function aggregateDecls(entries: string[], opts?: {
     prefer?: "frontend" | "backend";
 }): Promise<DeclBundle>;
-//# sourceMappingURL=aggregator.d.ts.map

package/dist/dsl/aggregator.js

@@ -61,4 +61,3 @@ function mergeMeta(metas) {
     }
     return Object.keys(finalMeta).length ? finalMeta : undefined;
 }
-//# sourceMappingURL=aggregator.js.map

package/dist/dsl/frontend-runtime.d.ts

@@ -1,5 +1,5 @@
 import { DeclFrontendApp, DeclComponent } from "../ir/decl/frontend.raw.schema.js";
-export type RuntimeComponent = Omit<DeclComponent, "agentChat" | "cliUsage" | "table"> & {
+export type RuntimeComponent = Omit<DeclComponent, "agentChat" | "cliUsage" | "table" | "macro"> & {
     field: (fieldName: string, type: string, label?: string, validators?: Record<string, any>, config?: any) => void;
     prop: (key: string, value: string) => void;
     agentChat: (data: {
@@ -39,21 +39,25 @@ export type RuntimeComponent = Omit<DeclComponent, "agentChat" | "cliUsage" | "t
             render?: string;
         }>;
     }) => void;
+    useMacro: (type: string, props?: Record<string, any>) => void;
 };
 type FrontendOptions = {
     basePath?: string;
     pwa?: DeclFrontendApp["pwa"];
+    auth?: DeclFrontendApp["auth"];
     meta?: Record<string, any>;
     policies?: Record<string, any>;
     datasources?: DeclFrontendApp["datasources"];
     operations?: DeclFrontendApp["operations"];
     resources?: DeclFrontendApp["resources"];
+    requiredComponentKeys?: string[];
 };
 export declare function datasource(id: string, config: any): void;
 export declare function operation(id: string, config: any): void;
 export declare function resource(id: string, config: any): void;
 export declare function meta(key: string, value: unknown): void;
 export declare function policy(target: string, value: Record<string, any>): void;
+export declare function requiredComponents(keys: string[]): void;
 export declare function page(pName: string, opts: {
     path: string;
     hideHeader?: boolean;
@@ -72,6 +76,7 @@ type FrontendCallbackArgs = {
     resource: typeof resource;
     meta: typeof meta;
     policy: typeof policy;
+    requiredComponents: typeof requiredComponents;
 };
 export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a: FrontendCallbackArgs) => void), maybeFn?: (a: FrontendCallbackArgs) => void): {
     type: "frontend";
@@ -130,7 +135,7 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
     components: {
         type: "component";
         name: string;
-        props?: Record<string, string> | undefined;
+        props?: Record<string, any> | undefined;
         form?: {
             fields: {
                 type: "number" | "date" | "text" | "select" | "textarea" | "checkbox" | "radio" | "datetime" | "time" | "url" | "phone" | "file" | "slider" | "currency" | "tags" | "signature" | "daterange" | "email" | "password";
@@ -193,6 +198,8 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
             }[];
             submit?: {
                 url?: string | undefined;
+                label?: string | undefined;
+                operationId?: string | undefined;
                 method?: "POST" | "PUT" | "PATCH" | undefined;
                 successMessage?: string | undefined;
                 errorMessage?: string | undefined;
@@ -203,6 +210,14 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
                 onError?: any;
                 redirect?: string | undefined;
             } | undefined;
+            load?: {
+                operationId: string;
+                onSuccess?: any;
+                onError?: any;
+                args?: any;
+                when?: any;
+                mapFields?: Record<string, any> | undefined;
+            } | undefined;
         } | undefined;
         entityRef?: string | undefined;
         content?: string | undefined;
@@ -236,16 +251,40 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
         button?: {
             label: string;
             icon?: string | undefined;
+            onClick?: {
+                kind: "invoke";
+                operationId: string;
+                confirmMessage?: string | undefined;
+                args?: any;
+            } | {
+                kind: "navigate";
+                confirmMessage?: string | undefined;
+                to?: any;
+            } | undefined;
             variant?: "primary" | "secondary" | "ghost" | undefined;
         } | undefined;
         table?: {
+            operationId?: string | undefined;
             columns?: {
                 header: string;
                 accessor: string;
                 render?: string | undefined;
             }[] | undefined;
             resourceId?: string | undefined;
-            operationId?: string | undefined;
+            rowNavigateTo?: string | undefined;
+            rowActions?: {
+                label: string;
+                onClick?: {
+                    kind: "invoke";
+                    operationId: string;
+                    confirmMessage?: string | undefined;
+                    args?: any;
+                } | {
+                    kind: "navigate";
+                    confirmMessage?: string | undefined;
+                    to?: any;
+                } | undefined;
+            }[] | undefined;
         } | undefined;
         themeToggle?: boolean | undefined;
         codeBlock?: {
@@ -253,6 +292,7 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
             language: string;
             showLineNumbers: boolean;
         } | undefined;
+        macro?: string | undefined;
         marketing?: {
             kind: "hero" | "features" | "testimonials" | "faq" | "logos" | "cta" | "stats" | "timeline";
             align?: "left" | "center" | undefined;
@@ -270,8 +310,18 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
             }[] | undefined;
             actions?: {
                 label: string;
-                href: string;
                 icon?: string | undefined;
+                href?: string | undefined;
+                onClick?: {
+                    kind: "invoke";
+                    operationId: string;
+                    confirmMessage?: string | undefined;
+                    args?: any;
+                } | {
+                    kind: "navigate";
+                    confirmMessage?: string | undefined;
+                    to?: any;
+                } | undefined;
                 variant?: "primary" | "secondary" | "ghost" | undefined;
             }[] | undefined;
             badge?: string | undefined;
@@ -285,7 +335,7 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
         components: {
             type: "component";
             name: string;
-            props?: Record<string, string> | undefined;
+            props?: Record<string, any> | undefined;
             form?: {
                 fields: {
                     type: "number" | "date" | "text" | "select" | "textarea" | "checkbox" | "radio" | "datetime" | "time" | "url" | "phone" | "file" | "slider" | "currency" | "tags" | "signature" | "daterange" | "email" | "password";
@@ -348,6 +398,8 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
                 }[];
                 submit?: {
                     url?: string | undefined;
+                    label?: string | undefined;
+                    operationId?: string | undefined;
                     method?: "POST" | "PUT" | "PATCH" | undefined;
                     successMessage?: string | undefined;
                     errorMessage?: string | undefined;
@@ -358,6 +410,14 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
                     onError?: any;
                     redirect?: string | undefined;
                 } | undefined;
+                load?: {
+                    operationId: string;
+                    onSuccess?: any;
+                    onError?: any;
+                    args?: any;
+                    when?: any;
+                    mapFields?: Record<string, any> | undefined;
+                } | undefined;
             } | undefined;
             entityRef?: string | undefined;
             content?: string | undefined;
@@ -391,16 +451,40 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
             button?: {
                 label: string;
                 icon?: string | undefined;
+                onClick?: {
+                    kind: "invoke";
+                    operationId: string;
+                    confirmMessage?: string | undefined;
+                    args?: any;
+                } | {
+                    kind: "navigate";
+                    confirmMessage?: string | undefined;
+                    to?: any;
+                } | undefined;
                 variant?: "primary" | "secondary" | "ghost" | undefined;
             } | undefined;
             table?: {
+                operationId?: string | undefined;
                 columns?: {
                     header: string;
                     accessor: string;
                     render?: string | undefined;
                 }[] | undefined;
                 resourceId?: string | undefined;
-                operationId?: string | undefined;
+                rowNavigateTo?: string | undefined;
+                rowActions?: {
+                    label: string;
+                    onClick?: {
+                        kind: "invoke";
+                        operationId: string;
+                        confirmMessage?: string | undefined;
+                        args?: any;
+                    } | {
+                        kind: "navigate";
+                        confirmMessage?: string | undefined;
+                        to?: any;
+                    } | undefined;
+                }[] | undefined;
             } | undefined;
             themeToggle?: boolean | undefined;
             codeBlock?: {
@@ -408,6 +492,7 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
                 language: string;
                 showLineNumbers: boolean;
             } | undefined;
+            macro?: string | undefined;
             marketing?: {
                 kind: "hero" | "features" | "testimonials" | "faq" | "logos" | "cta" | "stats" | "timeline";
                 align?: "left" | "center" | undefined;
@@ -425,8 +510,18 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
                 }[] | undefined;
                 actions?: {
                     label: string;
-                    href: string;
                     icon?: string | undefined;
+                    href?: string | undefined;
+                    onClick?: {
+                        kind: "invoke";
+                        operationId: string;
+                        confirmMessage?: string | undefined;
+                        args?: any;
+                    } | {
+                        kind: "navigate";
+                        confirmMessage?: string | undefined;
+                        to?: any;
+                    } | undefined;
                     variant?: "primary" | "secondary" | "ghost" | undefined;
                 }[] | undefined;
                 badge?: string | undefined;
@@ -480,7 +575,14 @@ export declare function frontend(name: string, optsOrFn: FrontendOptions | ((a:
             purpose?: string | undefined;
         }[] | undefined;
     } | undefined;
+    auth?: {
+        enabled?: boolean | undefined;
+        loginPath?: string | undefined;
+        meOperationId?: string | undefined;
+        logoutOperationId?: string | undefined;
+        hideLoginWhenAuthed?: boolean | undefined;
+    } | undefined;
+    requiredComponentKeys?: string[] | undefined;
 };
 export declare function loadFrontendDsl(entry: string): Promise<DeclFrontendApp>;
 export {};
-//# sourceMappingURL=frontend-runtime.d.ts.map

package/dist/dsl/frontend-runtime.js

@@ -1,17 +1,19 @@
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { DeclFrontendAppSchema } from "../ir/decl/frontend.raw.schema.js";
-let CURRENT_FRONTEND = null;
+// Use globalThis to share state across multiple module instances (e.g., src vs dist)
+const _global = globalThis;
+_global.__IR_CURRENT_FRONTEND = _global.__IR_CURRENT_FRONTEND || null;
 function assert(cond, msg) {
     if (!cond)
         throw new Error(msg);
 }
 function mergePolicy(target, value) {
-    if (!CURRENT_FRONTEND)
+    if (!_global.__IR_CURRENT_FRONTEND)
         return;
-    CURRENT_FRONTEND.meta = CURRENT_FRONTEND.meta ?? {};
-    const existing = (CURRENT_FRONTEND.meta.policies ?? {});
-    CURRENT_FRONTEND.meta.policies = { ...existing, [target]: { ...(existing[target] ?? {}), ...value } };
+    _global.__IR_CURRENT_FRONTEND.meta = _global.__IR_CURRENT_FRONTEND.meta ?? {};
+    const existing = (_global.__IR_CURRENT_FRONTEND.meta.policies ?? {});
+    _global.__IR_CURRENT_FRONTEND.meta.policies = { ...existing, [target]: { ...(existing[target] ?? {}), ...value } };
 }
 const RUNTIME_HELPERS = [
     "field",
@@ -29,6 +31,7 @@ const RUNTIME_HELPERS = [
     "enableThemeToggle",
     "code",
     "table",
+    "useMacro",
 ];
 function stripRuntimeHelpers(comp) {
     for (const key of RUNTIME_HELPERS) {
@@ -38,28 +41,32 @@ function stripRuntimeHelpers(comp) {
     }
 }
 export function datasource(id, config) {
-    assert(CURRENT_FRONTEND, "datasource() harus di dalam frontend()");
-    CURRENT_FRONTEND.datasources.push({ id, ...config });
+    assert(_global.__IR_CURRENT_FRONTEND, "datasource() harus di dalam frontend()");
+    _global.__IR_CURRENT_FRONTEND.datasources.push({ id, ...config });
 }
 export function operation(id, config) {
-    assert(CURRENT_FRONTEND, "operation() harus di dalam frontend()");
-    CURRENT_FRONTEND.operations.push({ id, ...config });
+    assert(_global.__IR_CURRENT_FRONTEND, "operation() harus di dalam frontend()");
+    _global.__IR_CURRENT_FRONTEND.operations.push({ id, ...config });
 }
 export function resource(id, config) {
-    assert(CURRENT_FRONTEND, "resource() harus di dalam frontend()");
-    CURRENT_FRONTEND.resources.push({ id, ...config });
+    assert(_global.__IR_CURRENT_FRONTEND, "resource() harus di dalam frontend()");
+    _global.__IR_CURRENT_FRONTEND.resources.push({ id, ...config });
 }
 export function meta(key, value) {
-    assert(CURRENT_FRONTEND, "meta() harus di dalam frontend()");
-    CURRENT_FRONTEND.meta = CURRENT_FRONTEND.meta ?? {};
-    CURRENT_FRONTEND.meta[key] = value;
+    assert(_global.__IR_CURRENT_FRONTEND, "meta() harus di dalam frontend()");
+    _global.__IR_CURRENT_FRONTEND.meta = _global.__IR_CURRENT_FRONTEND.meta ?? {};
+    _global.__IR_CURRENT_FRONTEND.meta[key] = value;
 }
 export function policy(target, value) {
-    assert(CURRENT_FRONTEND, "policy() harus di dalam frontend()");
+    assert(_global.__IR_CURRENT_FRONTEND, "policy() harus di dalam frontend()");
     mergePolicy(target, value);
 }
+export function requiredComponents(keys) {
+    assert(_global.__IR_CURRENT_FRONTEND, "requiredComponents() harus di dalam frontend()");
+    _global.__IR_CURRENT_FRONTEND.requiredComponentKeys = keys;
+}
 export function page(pName, opts, cb) {
-    assert(CURRENT_FRONTEND, "page() harus di dalam frontend()");
+    assert(_global.__IR_CURRENT_FRONTEND, "page() harus di dalam frontend()");
     const page = {
         type: "page",
         name: pName,
@@ -102,6 +109,11 @@ export function page(pName, opts, cb) {
                     comp.codeBlock = { snippet, language, showLineNumbers: options?.showLineNumbers ?? true };
                 };
                 comp.table = function (data) { comp.table = data; };
+                comp.useMacro = function (type, props) {
+                    comp.macro = type;
+                    if (props)
+                        comp.props = props;
+                };
                 if (typeof cCb === "function")
                     cCb(comp);
                 stripRuntimeHelpers(comp);
@@ -110,16 +122,16 @@ export function page(pName, opts, cb) {
                 }
                 const finalized = comp;
                 page.components.push(finalized);
-                if (CURRENT_FRONTEND)
-                    CURRENT_FRONTEND.components.push(finalized);
+                if (_global.__IR_CURRENT_FRONTEND)
+                    _global.__IR_CURRENT_FRONTEND.components.push(finalized);
             }
         });
     }
-    if (CURRENT_FRONTEND)
-        CURRENT_FRONTEND.pages.push(page);
+    if (_global.__IR_CURRENT_FRONTEND)
+        _global.__IR_CURRENT_FRONTEND.pages.push(page);
 }
 export function component(name, cb) {
-    assert(CURRENT_FRONTEND, "component() harus di dalam frontend()");
+    assert(_global.__IR_CURRENT_FRONTEND, "component() harus di dalam frontend()");
     const comp = { type: "component", name: name, props: {}, form: { fields: [] } };
     // add convenience methods to the comp object for DSL users: field() and prop()
     comp.field = function (fieldName, type, label, validators, config) {
@@ -149,14 +161,19 @@ export function component(name, cb) {
         comp.codeBlock = { snippet, language, showLineNumbers: options?.showLineNumbers ?? true };
     };
     comp.table = function (data) { comp.table = data; };
+    comp.useMacro = function (type, props) {
+        comp.macro = type;
+        if (props)
+            comp.props = props;
+    };
     if (typeof cb === "function")
         cb(comp);
     stripRuntimeHelpers(comp);
     if (comp.html) {
         throw new Error(`component.html is not allowed (component: ${comp.name}). Use component.content with Markdown instead.`);
     }
-    if (CURRENT_FRONTEND)
-        CURRENT_FRONTEND.components.push(comp);
+    if (_global.__IR_CURRENT_FRONTEND)
+        _global.__IR_CURRENT_FRONTEND.components.push(comp);
 }
 export function frontend(name, optsOrFn, maybeFn) {
     assert(typeof name === "string" && name.length > 0, "frontend(name) harus string");
@@ -164,7 +181,7 @@ export function frontend(name, optsOrFn, maybeFn) {
     const fn = (typeof optsOrFn === "function" ? optsOrFn : maybeFn);
     assert(typeof fn === "function", "frontend(..., fn) fn harus function");
     const baseMeta = opts?.meta ?? {};
-    CURRENT_FRONTEND = {
+    _global.__IR_CURRENT_FRONTEND = {
         type: "frontend",
         name,
         basePath: opts?.basePath ?? "/",
@@ -174,6 +191,8 @@ export function frontend(name, optsOrFn, maybeFn) {
         operations: opts?.operations ?? [],
         resources: opts?.resources ?? [],
         ...(opts?.pwa ? { pwa: opts.pwa } : {}),
+        ...(opts?.auth ? { auth: opts.auth } : {}),
+        ...(opts?.requiredComponentKeys ? { requiredComponentKeys: opts.requiredComponentKeys } : {}),
         meta: { ...baseMeta },
     };
     if (opts?.policies) {
@@ -189,16 +208,17 @@ export function frontend(name, optsOrFn, maybeFn) {
         component,
         meta,
         policy,
+        requiredComponents,
     });
-    const parsed = DeclFrontendAppSchema.parse(CURRENT_FRONTEND);
-    CURRENT_FRONTEND = parsed;
+    const parsed = DeclFrontendAppSchema.parse(_global.__IR_CURRENT_FRONTEND);
+    _global.__IR_CURRENT_FRONTEND = parsed;
     return parsed;
 }
 export async function loadFrontendDsl(entry) {
     const abs = path.resolve(process.cwd(), entry);
     const url = pathToFileURL(abs).href;
     // reset
-    CURRENT_FRONTEND = null;
+    _global.__IR_CURRENT_FRONTEND = null;
     try {
         await import(url);
     }
@@ -224,9 +244,8 @@ export async function loadFrontendDsl(entry) {
             throw new Error(`Failed to load frontend DSL (${entry}): ${err2?.message ?? err2}`);
         }
     }
-    if (!CURRENT_FRONTEND)
+    if (!_global.__IR_CURRENT_FRONTEND)
         throw new Error(`Frontend DSL did not call frontend(...)`);
-    const parsed = DeclFrontendAppSchema.parse(CURRENT_FRONTEND);
+    const parsed = DeclFrontendAppSchema.parse(_global.__IR_CURRENT_FRONTEND);
     return parsed;
 }
-//# sourceMappingURL=frontend-runtime.js.map

package/dist/dsl/runtime.d.ts

@@ -30,4 +30,3 @@ export declare function app(name: string, opts: AppOptions, fn: (a: AppBuilder)
  */
 export declare function loadDsl(entry: string): Promise<DeclApp>;
 export {};
-//# sourceMappingURL=runtime.d.ts.map