@primate/angular 0.6.0 → 0.8.0

package/lib/app.d.ts

@@ -0,0 +1,5 @@
+declare module "app:angular" {
+  import type { RequestPublic } from "@primate/core";
+  import type { Signal } from "@angular/core";
+  export const request: Signal<RequestPublic>;
+}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+import "./app.d.ts";
+export { default as client } from "#client/index";
+export type { Validated } from "#client/index";
+export { default } from "#default";
+

package/lib/private/client/AAA.d.ts

@@ -0,0 +1,2 @@
+import "@angular/compiler";
+//# sourceMappingURL=AAA.d.ts.map

package/lib/private/client/AAA.js

@@ -0,0 +1,2 @@
+import "@angular/compiler";
+//# sourceMappingURL=AAA.js.map

package/lib/private/client/Data.d.ts

@@ -0,0 +1,5 @@
+import type Payload from "#client/Payload";
+import type { Data as CoreData } from "@primate/core/client";
+type Data = CoreData<Payload>;
+export default Data;
+//# sourceMappingURL=Data.d.ts.map

package/lib/private/client/Data.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Data.js.map

package/lib/private/client/Payload.d.ts

@@ -0,0 +1,9 @@
+import type { Mode } from "@primate/core";
+import type { Dict } from "@rcompat/type";
+type Payload = {
+    views: string[];
+    props: Dict[];
+    mode: Mode;
+};
+export default Payload;
+//# sourceMappingURL=Payload.d.ts.map

package/lib/private/client/Payload.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Payload.js.map

package/lib/private/client/app.d.ts

@@ -1,15 +1,7 @@
-import "@angular/compiler";
-import type ClientData from "@primate/core/client/Data";
-import type Mode from "@primate/core/Mode";
-import type { Dict } from "@rcompat/type";
-type Data = ClientData<{
-    views: string[];
-    props: Dict[];
-    mode: Mode;
-}>;
+import "#client/AAA";
+import type Data from "#client/Data";
 export default class AngularApp {
     #private;
-    static mount(_view: string, data: ClientData<Data>): Promise<void>;
+    static mount(_view: string, data: Data): Promise<void>;
 }
-export {};
 //# sourceMappingURL=app.d.ts.map

package/lib/private/client/app.js

@@ -1,37 +1,27 @@
+import "#client/AAA";
+import root from "#client/root";
 import INITIAL_PROPS from "#INITIAL_PROPS";
-import "@angular/compiler";
-import { enableProdMode, } from "@angular/core";
+import { enableProdMode } from "@angular/core";
 import { bootstrapApplication, provideClientHydration, } from "@angular/platform-browser";
-import spa from "@primate/core/client/spa";
-import root from "angular:root";
-import * as views from "angular:views";
-const make_props = (data) => ({
-    views: data.views.map(name => views[name]),
-    props: data.props,
-    request: {
-        ...data.request,
-        url: new URL(location.href),
-    },
-    update: () => undefined,
-});
+import client from "@primate/core/client";
+import RootView from "angular:root";
 export default class AngularApp {
     static #app;
     static #root;
     static async mount(_view, data) {
+        const interactive = !data.ssr || data.csr;
+        if (!interactive)
+            return;
         if (data.mode === "production")
             enableProdMode();
         const providers = [];
-        // add hydration provider for SSR
         if (data.ssr)
             providers.push(provideClientHydration());
-        // in non-SSR mode, the HTML won't contain app-root, inject it
         else
             document.body.appendChild(document.createElement("app-root"));
-        // create the root view props
-        const props = make_props(data);
-        // bootstrap the application
+        const props = root.toProps(data);
         try {
-            this.#app = await bootstrapApplication(root, {
+            this.#app = await bootstrapApplication(RootView, {
                 providers: [
                     ...providers,
                     {
@@ -41,29 +31,25 @@ export default class AngularApp {
                 ],
             });
             this.#root = this.#app.components[0];
-            // initial props
-            if (this.#root.instance) {
-                this.#root.instance.p = props;
-                // change detection
-                this.#app.tick();
-            }
-            if (data.spa) {
-                this.#spa();
+            this.#root.instance.p = props;
+            this.#app.tick();
+            if (data.csr) {
+                const start = () => client.boot((next, update) => {
+                    this.#root.instance.p = root.toProps(next, update);
+                    this.#app.tick();
+                    update?.();
+                });
+                if (document.readyState === "loading") {
+                    window.addEventListener("DOMContentLoaded", start, { once: true });
+                }
+                else {
+                    start();
+                }
             }
         }
         catch (error) {
             console.error("Failed to bootstrap Angular application:", error);
         }
     }
-    static #spa() {
-        window.addEventListener("DOMContentLoaded", () => {
-            spa((next, update) => {
-                const props = { ...make_props(next), update };
-                this.#root.instance.p = props;
-                this.#app.tick();
-                update?.();
-            });
-        });
-    }
 }
 //# sourceMappingURL=app.js.map

package/lib/private/client/form.d.ts

@@ -1,22 +1,24 @@
-import { type Signal } from "@angular/core";
-import { type FormInit } from "@primate/core/client";
+import type { Signal } from "@angular/core";
+import type { ClientMethod, FormInit } from "@primate/core/client";
 import type { Dict } from "@rcompat/type";
 type Field<T> = {
     name: string;
     value: T;
-    errors: Signal<readonly string[]>;
+    errors: Signal<string[]>;
     error: Signal<string | null>;
 };
 type FormView<Values extends Dict> = {
     id: string;
     submitting: Signal<boolean>;
+    submitted: Signal<boolean>;
     submit: (event?: Event) => Promise<void>;
-    errors: Signal<readonly string[]>;
+    errors: Signal<string[]>;
     field: <K extends keyof Values & string>(name: K) => Field<Values[K]>;
 };
 type Initial<Values extends Dict> = FormInit & {
     initial?: Values;
 };
+declare function form<Values extends Dict>(action: ClientMethod<Values>, init?: Initial<Values>): FormView<Values>;
 declare function form<Values extends Dict>(init: Initial<Values>): FormView<Values>;
 declare function form(init?: FormInit): FormView<Dict>;
 export default form;

package/lib/private/client/form.js

@@ -1,4 +1,4 @@
-import { DestroyRef, computed, inject, signal, } from "@angular/core";
+import { DestroyRef, computed, inject, signal } from "@angular/core";
 import core from "@primate/core/client";
 function try_destroy_ref() {
     try {
@@ -8,36 +8,46 @@ function try_destroy_ref() {
         return null;
     }
 }
-function form(init) {
-    const { initial, ...form_init } = init ?? {};
-    const controller = core.createForm(form_init);
-    const values = initial ?? {};
+function form(action_or_init, maybe_init) {
+    const is_action = typeof action_or_init === "function";
+    const { initial, ...form_init } = (is_action ? (maybe_init ?? {}) : (action_or_init ?? {}));
+    const action = is_action ? action_or_init : undefined;
+    const contentType = is_action
+        ? action_or_init.contentType
+        : undefined;
+    const controller = core.createForm({
+        ...form_init,
+        ...(action !== undefined && {
+            action: action,
+            contentType,
+        }),
+    });
+    const values = (initial ?? {});
     const snap = signal(controller.read());
-    const unsub = controller.subscribe((next) => snap.set(next));
-    try_destroy_ref()?.onDestroy(unsub);
+    const unsubscribe = controller.subscribe(next => snap.set(next));
+    try_destroy_ref()?.onDestroy(unsubscribe);
     const submitting = computed(() => snap().submitting);
+    const submitted = computed(() => snap().submitted);
     const errors = computed(() => snap().errors.form);
-    // cache per-field views so templates calling field("x") repeatedly
-    // don't recreate computed signals every change detection cycle
     const cache = new Map();
     function field(name) {
-        const key = name;
-        const cached = cache.get(key);
+        const cached = cache.get(name);
         if (cached)
             return cached;
-        const form_errors = computed(() => snap().errors.fields[key] ?? []);
+        const form_errors = computed(() => snap().errors.fields[name] ?? []);
         const view = {
-            name: key,
+            name,
             value: values[name],
             errors: form_errors,
             error: computed(() => form_errors()[0] ?? null),
         };
-        cache.set(key, view);
+        cache.set(name, view);
         return view;
     }
     return {
         id: controller.id,
         submitting,
+        submitted,
         submit: (event) => controller.submit(event),
         errors,
         field,

package/lib/{public/client.d.ts → private/client/index.d.ts}

@@ -27,4 +27,4 @@ declare const client: {
 };
 export default client;
 export type { Validated };
-//# sourceMappingURL=client.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/{public/client.js → private/client/index.js}

@@ -2,4 +2,4 @@ import field from "#client/field";
 import form from "#client/form";
 const client = { form, field };
 export default client;
-//# sourceMappingURL=client.js.map
+//# sourceMappingURL=index.js.map

package/lib/private/client/root.d.ts

@@ -0,0 +1,18 @@
+import type Data from "#client/Data";
+import type { Type } from "@angular/core";
+import type { Dict } from "@rcompat/type";
+type ViewComponent = Type<unknown>;
+export type RootProps = {
+    views: ViewComponent[];
+    props: Dict[];
+    request: Data["request"] & {
+        url: URL;
+    };
+    update?: () => void;
+};
+declare function toProps(data: Data, update?: () => void): RootProps;
+declare const root: {
+    toProps: typeof toProps;
+};
+export default root;
+//# sourceMappingURL=root.d.ts.map

package/lib/private/client/root.js

@@ -0,0 +1,17 @@
+import * as Views from "angular:views";
+function toProps(data, update) {
+    return {
+        views: data.views.map(name => Views[name]),
+        props: data.props,
+        request: {
+            ...data.request,
+            url: new URL(data.request.url),
+        },
+        update,
+    };
+}
+const root = {
+    toProps,
+};
+export default root;
+//# sourceMappingURL=root.js.map

package/lib/private/create-root.js

@@ -40,6 +40,7 @@ import {
 } from "@angular/core";
 import { CommonModule, NgComponentOutlet } from "@angular/common";
 import INITIAL_PROPS from "@primate/angular/INITIAL_PROPS";
+import { request } from "@primate/angular/app";
 ${i18n_imports}
 
 type Dict = Record<string, any>;
@@ -64,7 +65,10 @@ export default class RootComponent implements OnDestroy {
   constructor() {
     try {
       const initial = inject<any>(INITIAL_PROPS);
-      if (initial) this.#p = initial;
+      if (initial) {
+        this.#p = initial;
+        request.set(initial.request);
+      }
     } catch {}
     ${i18n_setup}
   }
@@ -72,6 +76,7 @@ export default class RootComponent implements OnDestroy {
   @Input({ required: true })
   set p(value: RootProps) {
     this.#p = value;
+    request.set(value.request);
     this.#cdr.markForCheck();  // root on default CD
   }
   get p(): RootProps { return this.#p; }

package/lib/private/default.d.ts

@@ -0,0 +1,7 @@
+declare const _default: (input?: {
+    extensions?: string[] | undefined;
+    csr?: boolean | undefined;
+    ssr?: boolean | undefined;
+} | undefined) => import("@primate/core/frontend").Module;
+export default _default;
+//# sourceMappingURL=default.d.ts.map

package/lib/private/{Default.js → default.js}

@@ -1,14 +1,16 @@
 import create_root from "#create-root";
-import Runtime from "#Runtime";
+import init from "#init";
+import frontend from "@primate/core/frontend";
 import * as ts from "typescript";
-export default class Default extends Runtime {
-    root = {
+export default frontend({
+    ...init,
+    root: {
         create: create_root,
-    };
-    css = {
+    },
+    css: {
         filter: /\.component\.(css)$/,
-    };
-    compile = {
+    },
+    compile: {
         client: (text) => {
             const result = ts.transpileModule(text, {
                 compilerOptions: {
@@ -20,18 +22,14 @@ export default class Default extends Runtime {
                     moduleResolution: ts.ModuleResolutionKind.NodeJs,
                 },
             });
-            const styleMatch = text.match(/styles:\s*\[([\s\S]*?)\]/);
-            let css = "";
-            if (styleMatch) {
-                // Extract and process inline styles
-                css = styleMatch[1]
-                    .replace(/['"`]/g, "")
-                    .replace(/\\n/g, "\n")
-                    .trim();
-            }
+            // extract inline styles
+            const style_match = text.match(/styles:\s*\[([\s\S]*?)\]/);
             return {
                 js: result.outputText,
-                css,
+                css: style_match === null ? "" : style_match[1]
+                    .replace(/['"`]/g, "")
+                    .replace(/\\n/g, "\n")
+                    .trim(),
             };
         },
         server: (text) => {
@@ -49,6 +47,6 @@ export default class Default extends Runtime {
             // hinder treeshaking
             return `import "@angular/compiler";\n${result.outputText}`;
         },
-    };
-}
-//# sourceMappingURL=Default.js.map
+    },
+});
+//# sourceMappingURL=default.js.map

package/lib/private/init.d.ts

@@ -0,0 +1,6 @@
+import "@angular/compiler";
+import type { Type } from "@angular/core";
+import type { Init } from "@primate/core/frontend";
+declare const module: Init<Type<any>>;
+export default module;
+//# sourceMappingURL=init.d.ts.map

package/lib/private/{Runtime.js → init.js}

@@ -1,16 +1,15 @@
 import INITIAL_PROPS from "#INITIAL_PROPS";
 import root from "#root-selector";
 import "@angular/compiler";
-import { enableProdMode, importProvidersFrom, } from "@angular/core";
+import { enableProdMode, importProvidersFrom } from "@angular/core";
 import { bootstrapApplication, BrowserModule, provideClientHydration, } from "@angular/platform-browser";
 import { provideServerRendering, renderApplication, } from "@angular/platform-server";
-import FrontendModule from "@primate/core/frontend/Module";
-export default class Runtime extends FrontendModule {
-    name = "angular";
-    defaultExtensions = [".component.ts"];
-    layouts = true;
-    client = true;
-    render = async (view, props) => {
+const module = {
+    name: "angular",
+    extensions: [".component.ts"],
+    layouts: true,
+    client: true,
+    async render(view, props) {
         const providers = [
             importProvidersFrom(BrowserModule),
             provideServerRendering(),
@@ -25,16 +24,16 @@ export default class Runtime extends FrontendModule {
             document: `<${root}></${root}>`,
         });
         const headMatch = html.match(/<head>(.*?)<\/head>/s);
-        const bodyRegex = new RegExp(`<${root}>([\\s\\S]*?)<\\/${root}>`);
+        const bodyRegex = new RegExp(`(<${root}(?:\\s[^>]*)?>[\\s\\S]*?<\\/${root}>)`);
         const bodyMatch = html.match(bodyRegex);
         return {
             body: bodyMatch?.[1] || html,
             head: headMatch?.[1] || "",
         };
-    };
-    async serve(app, next) {
+    },
+    onServe(app) {
         app.mode === "production" && enableProdMode();
-        return super.serve(app, next);
-    }
-}
-//# sourceMappingURL=Runtime.js.map
+    },
+};
+export default module;
+//# sourceMappingURL=init.js.map

package/lib/private/request/store.d.ts

@@ -0,0 +1,4 @@
+import type { RequestPublic } from "@primate/core";
+declare const request: import("@angular/core").WritableSignal<RequestPublic>;
+export default request;
+//# sourceMappingURL=store.d.ts.map

package/lib/private/request/store.js

@@ -0,0 +1,4 @@
+import { signal } from "@angular/core";
+const request = signal(undefined);
+export default request;
+//# sourceMappingURL=store.js.map

package/lib/private/runtime.d.ts

@@ -0,0 +1,7 @@
+declare const _default: (input?: {
+    extensions?: string[] | undefined;
+    csr?: boolean | undefined;
+    ssr?: boolean | undefined;
+} | undefined) => import("@primate/core/frontend").Module;
+export default _default;
+//# sourceMappingURL=runtime.d.ts.map

package/lib/private/runtime.js

@@ -0,0 +1,4 @@
+import init from "#init";
+import frontend from "@primate/core/frontend";
+export default frontend(init);
+//# sourceMappingURL=runtime.js.map

package/lib/public/app.d.ts

@@ -0,0 +1,2 @@
+export { default as request } from "#request/store";
+//# sourceMappingURL=app.d.ts.map

package/lib/public/app.js

@@ -0,0 +1,2 @@
+export { default as request } from "#request/store";
+//# sourceMappingURL=app.js.map

package/lib/public/browser.d.ts

@@ -1,2 +1,3 @@
 export { default } from "#client/app";
+export { default as client } from "#client/index";
 //# sourceMappingURL=browser.d.ts.map

package/lib/public/browser.js

@@ -1,2 +1,3 @@
 export { default } from "#client/app";
+export { default as client } from "#client/index";
 //# sourceMappingURL=browser.js.map

package/lib/public/default.d.ts

@@ -1,4 +1,2 @@
-import Default from "#Default";
-declare const _default: (options?: typeof Default.input) => Default;
-export default _default;
+export { default } from "#default";
 //# sourceMappingURL=default.d.ts.map

package/lib/public/default.js

@@ -1,3 +1,2 @@
-import Default from "#Default";
-export default (options) => new Default(options);
+export { default } from "#default";
 //# sourceMappingURL=default.js.map

package/lib/public/runtime.d.ts

@@ -1,4 +1,3 @@
-import Runtime from "#Runtime";
-declare const _default: (options?: typeof Runtime.input) => Runtime;
-export default _default;
+export { default as client } from "#client/index";
+export { default } from "#runtime";
 //# sourceMappingURL=runtime.d.ts.map

package/lib/public/runtime.js

@@ -1,3 +1,3 @@
-import Runtime from "#Runtime";
-export default (options) => new Runtime(options);
+export { default as client } from "#client/index";
+export { default } from "#runtime";
 //# sourceMappingURL=runtime.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/angular",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Angular for Primate",
   "homepage": "https://primate.run/docs/frontend/angular",
   "bugs": "https://github.com/primate-run/primate/issues",
@@ -16,41 +16,45 @@
     "/lib/**/*.d.ts",
     "!/**/*.spec.*"
   ],
+  "types": "lib/index.d.ts",
   "dependencies": {
-    "@angular/common": "^21.1.4",
-    "@angular/compiler": "^21.1.4",
-    "@angular/core": "^21.1.4",
-    "@angular/platform-browser": "^21.1.4",
-    "@angular/platform-server": "^21.1.4",
-    "@angular/ssr": "^21.1.4",
-    "typescript": "^5.9.3",
-    "@primate/core": "^0.5.0"
+    "@angular/common": "^21.2.11",
+    "@angular/compiler": "^21.2.11",
+    "@angular/core": "^21.2.11",
+    "@angular/platform-browser": "^21.2.11",
+    "@angular/platform-server": "^21.2.11",
+    "@angular/ssr": "^21.2.9",
+    "typescript": "^6.0.3",
+    "@primate/core": "^0.7.0"
   },
   "devDependencies": {
-    "@rcompat/type": "^0.9.0"
+    "@rcompat/type": "^0.17.0"
   },
   "peerDependencies": {
-    "primate": "^0.36.0"
+    "primate": "^0.38.0"
   },
   "imports": {
     "#*": {
-      "apekit": "./src/private/*.ts",
+      "@primate/source": "./src/private/*.ts",
       "default": "./lib/private/*.js"
     }
   },
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
+      "@primate/runtime": "./src/public/runtime.ts",
+      "@primate/source": "./src/public/default.ts",
       "browser": "./lib/public/browser.js",
       "runtime": "./lib/public/runtime.js",
       "default": "./lib/public/default.js"
     },
     "./*": {
-      "apekit": "./src/public/*.ts",
+      "@primate/source": "./src/public/*.ts",
       "default": "./lib/public/*.js"
     }
   },
   "scripts": {
-    "build": "npm run clean && tsc",
+    "build": "npm run clean && tsc && cp src/types/{app,index}.d.ts lib",
     "clean": "rm -rf ./lib",
     "lint": "eslint ."
   }

package/lib/private/Default.d.ts

@@ -1,17 +0,0 @@
-import Runtime from "#Runtime";
-export default class Default extends Runtime {
-    root: {
-        create: (depth: number, i18n_active: boolean) => string;
-    };
-    css: {
-        filter: RegExp;
-    };
-    compile: {
-        client: (text: string) => {
-            js: string;
-            css: string;
-        };
-        server: (text: string) => string;
-    };
-}
-//# sourceMappingURL=Default.d.ts.map

package/lib/private/Runtime.d.ts

@@ -1,15 +0,0 @@
-import "@angular/compiler";
-import { type Type } from "@angular/core";
-import FrontendModule from "@primate/core/frontend/Module";
-import type Render from "@primate/core/frontend/Render";
-import type NextServe from "@primate/core/NextServe";
-import type ServeApp from "@primate/core/ServeApp";
-export default class Runtime extends FrontendModule<Type<any>> {
-    name: string;
-    defaultExtensions: string[];
-    layouts: boolean;
-    client: boolean;
-    render: Render<Type<any>>;
-    serve(app: ServeApp, next: NextServe): Promise<ServeApp>;
-}
-//# sourceMappingURL=Runtime.d.ts.map