@primate/angular 0.4.1 → 0.6.0

package/lib/private/Default.d.ts

@@ -1,6 +1,4 @@
 import Runtime from "#Runtime";
-import type NextServe from "@primate/core/NextServe";
-import type ServeApp from "@primate/core/ServeApp";
 export default class Default extends Runtime {
     root: {
         create: (depth: number, i18n_active: boolean) => string;
@@ -15,6 +13,5 @@ export default class Default extends Runtime {
         };
         server: (text: string) => string;
     };
-    serve(app: ServeApp, next: NextServe): Promise<ServeApp>;
 }
 //# sourceMappingURL=Default.d.ts.map

package/lib/private/Default.js

@@ -1,6 +1,5 @@
 import create_root from "#create-root";
 import Runtime from "#Runtime";
-import { enableProdMode } from "@angular/core";
 import * as ts from "typescript";
 export default class Default extends Runtime {
     root = {
@@ -51,9 +50,5 @@ export default class Default extends Runtime {
             return `import "@angular/compiler";\n${result.outputText}`;
         },
     };
-    async serve(app, next) {
-        app.mode === "production" && enableProdMode();
-        return super.serve(app, next);
-    }
 }
 //# sourceMappingURL=Default.js.map

package/lib/private/INITIAL_PROPS.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from "@angular/core";
-import type Dict from "@rcompat/type/Dict";
+import type { Dict } from "@rcompat/type";
 type RootProps = {
     views: any[];
     props: Dict[];

package/lib/private/Runtime.d.ts

@@ -2,12 +2,14 @@ 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 "zone.js/node";
+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

package/lib/private/Runtime.js

@@ -1,11 +1,10 @@
 import INITIAL_PROPS from "#INITIAL_PROPS";
 import root from "#root-selector";
 import "@angular/compiler";
-import { importProvidersFrom, provideZoneChangeDetection, } 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";
-import "zone.js/node";
 export default class Runtime extends FrontendModule {
     name = "angular";
     defaultExtensions = [".component.ts"];
@@ -16,7 +15,6 @@ export default class Runtime extends FrontendModule {
             importProvidersFrom(BrowserModule),
             provideServerRendering(),
             provideClientHydration(),
-            provideZoneChangeDetection({ eventCoalescing: true }),
             {
                 provide: INITIAL_PROPS,
                 useValue: props,
@@ -34,5 +32,9 @@ export default class Runtime extends FrontendModule {
             head: headMatch?.[1] || "",
         };
     };
+    async serve(app, next) {
+        app.mode === "production" && enableProdMode();
+        return super.serve(app, next);
+    }
 }
 //# sourceMappingURL=Runtime.js.map

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

@@ -1,6 +1,5 @@
-import { type Signal } from "@angular/core";
-import type ValidateUpdater from "@primate/core/client/ValidateUpdater";
-import type ValidationError from "@primate/core/client/ValidationError";
+import type { Signal } from "@angular/core";
+import type { ValidateUpdater, ValidationError } from "@primate/core/client";
 type Validated<T> = {
     error: Signal<null | ValidationError>;
     loading: Signal<boolean>;

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

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

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

@@ -1,7 +1,6 @@
 import INITIAL_PROPS from "#INITIAL_PROPS";
-import "zone.js";
 import "@angular/compiler";
-import { NgZone, provideZoneChangeDetection, } 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";
@@ -15,21 +14,22 @@ const make_props = (data) => ({
     },
     update: () => undefined,
 });
-export default class AngularClient {
+export default class AngularApp {
     static #app;
     static #root;
-    static #zone;
     static async mount(_view, data) {
+        if (data.mode === "production")
+            enableProdMode();
         const providers = [];
-        // Add hydration provider for SSR
-        if (data.ssr) {
+        // add hydration provider for SSR
+        if (data.ssr)
             providers.push(provideClientHydration());
-        }
-        // Add zone.js change detection
-        providers.push(provideZoneChangeDetection({ eventCoalescing: true }));
-        // Create the root view props
+        // 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
+        // bootstrap the application
         try {
             this.#app = await bootstrapApplication(root, {
                 providers: [
@@ -54,19 +54,16 @@ export default class AngularClient {
         catch (error) {
             console.error("Failed to bootstrap Angular application:", error);
         }
-        this.#zone = this.#root.injector.get(NgZone);
     }
     static #spa() {
         window.addEventListener("DOMContentLoaded", () => {
             spa((next, update) => {
                 const props = { ...make_props(next), update };
-                this.#zone.run(() => {
-                    this.#root.instance.p = props;
-                    this.#app.tick();
-                });
+                this.#root.instance.p = props;
+                this.#app.tick();
                 update?.();
             });
         });
     }
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=app.js.map

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

@@ -0,0 +1,25 @@
+import type Validated from "#client/Validated";
+declare const field: <T>(initial: T) => {
+    delete: (url: string, options?: {
+        headers?: import("@rcompat/type").Dict<string>;
+        map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+        path?: import("@rcompat/type").JSONPointer;
+    } | undefined) => Validated<T>;
+    patch: (url: string, options?: {
+        headers?: import("@rcompat/type").Dict<string>;
+        map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+        path?: import("@rcompat/type").JSONPointer;
+    } | undefined) => Validated<T>;
+    post: (url: string, options?: {
+        headers?: import("@rcompat/type").Dict<string>;
+        map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+        path?: import("@rcompat/type").JSONPointer;
+    } | undefined) => Validated<T>;
+    put: (url: string, options?: {
+        headers?: import("@rcompat/type").Dict<string>;
+        map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+        path?: import("@rcompat/type").JSONPointer;
+    } | undefined) => Validated<T>;
+};
+export default field;
+//# sourceMappingURL=field.d.ts.map

package/lib/private/client/{validate.js → field.js}

@@ -1,6 +1,5 @@
 import { signal } from "@angular/core";
-import toValidated from "@primate/core/client/toValidated";
-import validate from "@primate/core/client/validate";
+import client from "@primate/core/client";
 function useValidate(init) {
     const value = signal(init.initial);
     const loading = signal(false);
@@ -12,7 +11,7 @@ function useValidate(init) {
         loading.set(true);
         error.set(null);
         try {
-            await validate(init, next);
+            await client.validateField(init, next);
         }
         catch (e) {
             // rollback
@@ -25,5 +24,6 @@ function useValidate(init) {
     }
     return { error, loading, update, value };
 }
-export default toValidated(useValidate);
-//# sourceMappingURL=validate.js.map
+const field = client.toValidated(useValidate);
+export default field;
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1,23 @@
+import { type Signal } from "@angular/core";
+import { type FormInit } from "@primate/core/client";
+import type { Dict } from "@rcompat/type";
+type Field<T> = {
+    name: string;
+    value: T;
+    errors: Signal<readonly string[]>;
+    error: Signal<string | null>;
+};
+type FormView<Values extends Dict> = {
+    id: string;
+    submitting: Signal<boolean>;
+    submit: (event?: Event) => Promise<void>;
+    errors: Signal<readonly 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>(init: Initial<Values>): FormView<Values>;
+declare function form(init?: FormInit): FormView<Dict>;
+export default form;
+//# sourceMappingURL=form.d.ts.map

package/lib/private/client/form.js

@@ -0,0 +1,47 @@
+import { DestroyRef, computed, inject, signal, } from "@angular/core";
+import core from "@primate/core/client";
+function try_destroy_ref() {
+    try {
+        return inject(DestroyRef);
+    }
+    catch {
+        return null;
+    }
+}
+function form(init) {
+    const { initial, ...form_init } = init ?? {};
+    const controller = core.createForm(form_init);
+    const values = initial ?? {};
+    const snap = signal(controller.read());
+    const unsub = controller.subscribe((next) => snap.set(next));
+    try_destroy_ref()?.onDestroy(unsub);
+    const submitting = computed(() => snap().submitting);
+    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);
+        if (cached)
+            return cached;
+        const form_errors = computed(() => snap().errors.fields[key] ?? []);
+        const view = {
+            name: key,
+            value: values[name],
+            errors: form_errors,
+            error: computed(() => form_errors()[0] ?? null),
+        };
+        cache.set(key, view);
+        return view;
+    }
+    return {
+        id: controller.id,
+        submitting,
+        submit: (event) => controller.submit(event),
+        errors,
+        field,
+    };
+}
+export default form;
+//# sourceMappingURL=form.js.map

package/lib/private/create-root.js

@@ -72,7 +72,7 @@ export default class RootComponent implements OnDestroy {
   @Input({ required: true })
   set p(value: RootProps) {
     this.#p = value;
-    this.#cdr.markForCheck();  // root on default CD, zone ticks traverse
+    this.#cdr.markForCheck();  // root on default CD
   }
   get p(): RootProps { return this.#p; }
   get P(): RootProps { return this.#p; }
@@ -94,9 +94,9 @@ export default class RootComponent implements OnDestroy {
     return { ...base, slot };
   }
 
-  ngAfterViewInit() {
+  ${i18n_active ? `ngAfterViewInit() {
     t[sInternal].restore();
-  }
+  }` : ""}
 
   ngOnDestroy() { this.#off?.(); }
 }

package/lib/public/browser.d.ts

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

package/lib/public/browser.js

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

package/lib/public/client.d.ts

@@ -0,0 +1,30 @@
+import type Validated from "#client/Validated";
+import form from "#client/form";
+declare const client: {
+    form: typeof form;
+    field: <T>(initial: T) => {
+        delete: (url: string, options?: {
+            headers?: import("@rcompat/type").Dict<string>;
+            map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+            path?: import("@rcompat/type").JSONPointer;
+        } | undefined) => Validated<T>;
+        patch: (url: string, options?: {
+            headers?: import("@rcompat/type").Dict<string>;
+            map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+            path?: import("@rcompat/type").JSONPointer;
+        } | undefined) => Validated<T>;
+        post: (url: string, options?: {
+            headers?: import("@rcompat/type").Dict<string>;
+            map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+            path?: import("@rcompat/type").JSONPointer;
+        } | undefined) => Validated<T>;
+        put: (url: string, options?: {
+            headers?: import("@rcompat/type").Dict<string>;
+            map?: ((v: T) => import("@rcompat/type").JSONValue) | undefined;
+            path?: import("@rcompat/type").JSONPointer;
+        } | undefined) => Validated<T>;
+    };
+};
+export default client;
+export type { Validated };
+//# sourceMappingURL=client.d.ts.map

package/lib/public/client.js

@@ -0,0 +1,5 @@
+import field from "#client/field";
+import form from "#client/form";
+const client = { form, field };
+export default client;
+//# sourceMappingURL=client.js.map

package/package.json

@@ -1,40 +1,37 @@
 {
   "name": "@primate/angular",
-  "version": "0.4.1",
-  "description": "Primate Angular frontend",
+  "version": "0.6.0",
+  "description": "Angular for Primate",
   "homepage": "https://primate.run/docs/frontend/angular",
   "bugs": "https://github.com/primate-run/primate/issues",
+  "type": "module",
   "license": "MIT",
-  "files": [
-    "/lib/**/*.js",
-    "/lib/**/*.d.ts",
-    "!/**/*.spec.*"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/primate-run/primate",
     "directory": "packages/angular"
   },
+  "files": [
+    "/lib/**/*.js",
+    "/lib/**/*.d.ts",
+    "!/**/*.spec.*"
+  ],
   "dependencies": {
-    "@angular/common": "^20.3.2",
-    "@angular/compiler": "^20.3.2",
-    "@angular/core": "^20.3.2",
-    "@angular/platform-browser": "^20.3.2",
-    "@angular/platform-server": "^20.3.2",
-    "@angular/ssr": "^20.3.3",
-    "@rcompat/assert": "^0.3.1",
-    "@rcompat/build": "^0.14.0",
-    "@rcompat/crypto": "^0.10.0",
-    "@rcompat/fs": "^0.21.1",
-    "@rcompat/record": "^0.9.1",
-    "typescript": "^5.9.2",
-    "zone.js": "^0.15.1",
-    "@primate/core": "^0.3.1"
+    "@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"
+  },
+  "devDependencies": {
+    "@rcompat/type": "^0.9.0"
   },
   "peerDependencies": {
-    "primate": "^0.34.0"
+    "primate": "^0.36.0"
   },
-  "type": "module",
   "imports": {
     "#*": {
       "apekit": "./src/private/*.ts",

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

@@ -1,25 +0,0 @@
-import type Validated from "#client/Validated";
-declare const _default: <T>(initial: T) => {
-    delete: (url: string, options?: {
-        headers?: import("@rcompat/type/Dict").default<string>;
-        map?: ((v: T) => import("@rcompat/type/JSONValue").default) | undefined;
-        path?: import("@rcompat/type/JSONPointer").default;
-    } | undefined) => Validated<T>;
-    patch: (url: string, options?: {
-        headers?: import("@rcompat/type/Dict").default<string>;
-        map?: ((v: T) => import("@rcompat/type/JSONValue").default) | undefined;
-        path?: import("@rcompat/type/JSONPointer").default;
-    } | undefined) => Validated<T>;
-    post: (url: string, options?: {
-        headers?: import("@rcompat/type/Dict").default<string>;
-        map?: ((v: T) => import("@rcompat/type/JSONValue").default) | undefined;
-        path?: import("@rcompat/type/JSONPointer").default;
-    } | undefined) => Validated<T>;
-    put: (url: string, options?: {
-        headers?: import("@rcompat/type/Dict").default<string>;
-        map?: ((v: T) => import("@rcompat/type/JSONValue").default) | undefined;
-        path?: import("@rcompat/type/JSONPointer").default;
-    } | undefined) => Validated<T>;
-};
-export default _default;
-//# sourceMappingURL=validate.d.ts.map

package/lib/public/Validated.d.ts

@@ -1,2 +0,0 @@
-export { default } from "#client/Validated";
-//# sourceMappingURL=Validated.d.ts.map

package/lib/public/Validated.js

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

package/lib/public/validate.d.ts

@@ -1,2 +0,0 @@
-export { default } from "#client/validate";
-//# sourceMappingURL=validate.d.ts.map

package/lib/public/validate.js

@@ -1,2 +0,0 @@
-export { default } from "#client/validate";
-//# sourceMappingURL=validate.js.map