@primate/angular 0.7.0 → 0.9.0

package/lib/index.d.ts

@@ -1,3 +1,2 @@
 import "./app.d.ts";
-
-export { default } from "./public/default";
+export { default } from "#default";

package/lib/private/client/app.js

@@ -9,6 +9,9 @@ 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 = [];
@@ -30,7 +33,7 @@ export default class AngularApp {
             this.#root = this.#app.components[0];
             this.#root.instance.p = props;
             this.#app.tick();
-            if (data.spa) {
+            if (data.csr) {
                 const start = () => client.boot((next, update) => {
                     this.#root.instance.p = root.toProps(next, update);
                     this.#app.tick();

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

@@ -1,23 +1,29 @@
 import type { Signal } from "@angular/core";
-import type { FormInit } from "@primate/core/client";
+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> = {
+type FormView<Values extends Dict, Result = unknown> = {
     id: string;
     submitting: Signal<boolean>;
     submitted: Signal<boolean>;
+    result: Signal<Result | null>;
     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, Path extends Dict, Result = unknown>(action: ClientMethod<Values, Path> & {
+    _result?: Result;
+}, init?: Initial<Values> & {
+    path?: Path;
+}): FormView<Values, Result>;
 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

@@ -8,36 +8,48 @@ function try_destroy_ref() {
         return null;
     }
 }
-function form(init) {
-    const { initial, ...form_init } = (init ?? {});
-    const controller = core.createForm(form_init);
+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 result = computed(() => snap().result);
     const errors = computed(() => snap().errors.form);
     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,
+        result,
         submit: (event) => controller.submit(event),
         errors,
         field,

package/lib/private/create-root.d.ts

@@ -1,3 +1,3 @@
-declare const _default: (depth: number, i18n_active: boolean) => string;
+declare const _default: (depth: number) => string;
 export default _default;
 //# sourceMappingURL=create-root.d.ts.map

package/lib/private/create-root.js

@@ -1,5 +1,5 @@
 import root_selector from "#root-selector";
-export default (depth, i18n_active) => {
+export default (depth) => {
     const n = depth;
     const layer = (i, child) => {
         const slot = `slot_${i}`;
@@ -17,31 +17,17 @@ export default (depth, i18n_active) => {
     let body = layer(n, null);
     for (let i = n - 1; i >= 0; i--)
         body = layer(i, body);
-    const i18n_imports = i18n_active
-        ? `import t from "#i18n";
-import sInternal from "primate/s/internal";`
-        : "";
-    const i18n_setup = i18n_active ?
-        `if (this.#p.request.context.i18n.locale) {
-  t[sInternal].init(this.#p.request.context.i18n.locale);
-  }
-  this.#off = t.subscribe(() => this.#cdr.markForCheck());
-`
-        : "";
     return `
 import {
   Component,
   Input,
   inject,
   ChangeDetectorRef,
-  OnDestroy,
   TemplateRef,
-  AfterViewInit,
 } 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>;
 type RootProps = {
@@ -57,10 +43,9 @@ type RootProps = {
   imports: [CommonModule, NgComponentOutlet],
   template: \`<ng-container *ngIf="P as P">${body}</ng-container>\`
 })
-export default class RootComponent implements OnDestroy {
+export default class RootComponent {
   #p!: RootProps;
   #cdr = inject(ChangeDetectorRef);
-  #off?: () => void;
 
   constructor() {
     try {
@@ -70,40 +55,30 @@ export default class RootComponent implements OnDestroy {
         request.set(initial.request);
       }
     } catch {}
-    ${i18n_setup}
   }
 
   @Input({ required: true })
   set p(value: RootProps) {
     this.#p = value;
     request.set(value.request);
-    this.#cdr.markForCheck();  // root on default CD
+    this.#cdr.markForCheck();
   }
+
   get p(): RootProps { return this.#p; }
   get P(): RootProps { return this.#p; }
 
-  // is there a view at index i?
   has(i: number) { return !!this.P?.views?.[i]; }
 
-  // view type for index i
   comp(i: number) { return this.P?.views?.[i]; }
 
-  // per-layer inputs without slot
   inputs(i: number) {
     return (this.P?.props?.[i] ?? {}) as Dict;
   }
 
-  // per-layer inputs + slot template (only used when has(i+1) is true)
   slotInputs(i: number, slot: TemplateRef<unknown>) {
     const base = (this.P?.props?.[i] ?? {}) as Dict;
     return { ...base, slot };
   }
-
-  ${i18n_active ? `ngAfterViewInit() {
-    t[sInternal].restore();
-  }` : ""}
-
-  ngOnDestroy() { this.#off?.(); }
 }
 `;
 };

package/lib/private/default.d.ts

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

package/lib/private/default.js

@@ -1,7 +1,28 @@
 import create_root from "#create-root";
 import init from "#init";
+import signal_inputs from "#signal-inputs";
 import frontend from "@primate/core/frontend";
-import * as ts from "typescript";
+import ts from "typescript";
+function compile(text, lib) {
+    const result = ts.transpileModule(signal_inputs(text), {
+        compilerOptions: {
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2020,
+            experimentalDecorators: true,
+            emitDecoratorMetadata: true,
+            lib,
+            moduleResolution: ts.ModuleResolutionKind.NodeNext,
+        },
+    });
+    const style_match = text.match(/styles:\s*\[([\s\S]*?)\]/);
+    return {
+        js: result.outputText,
+        css: style_match === null ? "" : style_match[1]
+            .replace(/['"`]/g, "")
+            .replace(/\\n/g, "\n")
+            .trim(),
+    };
+}
 export default frontend({
     ...init,
     root: {
@@ -11,41 +32,10 @@ export default frontend({
         filter: /\.component\.(css)$/,
     },
     compile: {
-        client: (text) => {
-            const result = ts.transpileModule(text, {
-                compilerOptions: {
-                    module: ts.ModuleKind.ESNext,
-                    target: ts.ScriptTarget.ES2020,
-                    experimentalDecorators: true,
-                    emitDecoratorMetadata: true,
-                    lib: ["es2020", "dom"],
-                    moduleResolution: ts.ModuleResolutionKind.NodeJs,
-                },
-            });
-            // extract inline styles
-            const style_match = text.match(/styles:\s*\[([\s\S]*?)\]/);
-            return {
-                js: result.outputText,
-                css: style_match === null ? "" : style_match[1]
-                    .replace(/['"`]/g, "")
-                    .replace(/\\n/g, "\n")
-                    .trim(),
-            };
-        },
+        client: (text) => compile(text, ["es2020", "dom"]),
         server: (text) => {
-            // TypeScript compilation for server (SSR)
-            const result = ts.transpileModule(text, {
-                compilerOptions: {
-                    module: ts.ModuleKind.ESNext,
-                    target: ts.ScriptTarget.ES2020,
-                    experimentalDecorators: true,
-                    emitDecoratorMetadata: true,
-                    lib: ["es2020"],
-                    moduleResolution: ts.ModuleResolutionKind.NodeJs,
-                },
-            });
-            // hinder treeshaking
-            return `import "@angular/compiler";\n${result.outputText}`;
+            const result = compile(text, ["es2020"]);
+            return `import "@angular/compiler";\n${result.js}`;
         },
     },
 });

package/lib/private/i18n.d.ts

@@ -0,0 +1,3 @@
+import type { BridgedTranslator, HeadlessTranslator } from "@primate/core/i18n";
+export default function i18n<const T extends HeadlessTranslator>(source: T): BridgedTranslator<T>;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/private/i18n.js

@@ -0,0 +1,51 @@
+import request from "#request/store";
+import { signal } from "@angular/core";
+export default function i18n(source) {
+    const version = signal(0);
+    let restored = false;
+    let restored_request;
+    const current_request = () => request();
+    const restore_from_request = () => {
+        const next = current_request();
+        if (restored && next === restored_request)
+            return;
+        restored = true;
+        restored_request = next;
+        source.restore(next);
+    };
+    const depend = () => {
+        version();
+        restore_from_request();
+    };
+    const restore = (next = current_request()) => {
+        const before = source.locale.get();
+        restored = true;
+        restored_request = next;
+        source.restore(next);
+        if (source.locale.get() !== before)
+            version.update(value => value + 1);
+    };
+    const get = () => {
+        depend();
+        return source.locale.get();
+    };
+    const set = (locale) => {
+        const before = source.locale.get();
+        source.locale.set(locale);
+        if (source.locale.get() !== before)
+            version.update(value => value + 1);
+    };
+    const value = ((...args) => {
+        depend();
+        return source(...args);
+    });
+    value.defaultLocale = source.defaultLocale;
+    value.locales = source.locales;
+    value.catalogs = source.catalogs;
+    value.currency = source.currency;
+    value.locale = { get, set };
+    value.restore = restore;
+    restore();
+    return value;
+}
+//# sourceMappingURL=i18n.js.map

package/lib/private/init.js

@@ -24,7 +24,7 @@ const module = {
             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,

package/lib/private/root-selector.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "app-root";
+declare const _default = "app-root";
 export default _default;
 //# sourceMappingURL=root-selector.d.ts.map

package/lib/private/runtime.d.ts

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

package/lib/private/signal-inputs.d.ts

@@ -0,0 +1,2 @@
+export default function signal_inputs(text: string): string;
+//# sourceMappingURL=signal-inputs.d.ts.map

package/lib/private/signal-inputs.js

@@ -0,0 +1,190 @@
+import ts from "typescript";
+const factory = ts.factory;
+const CORE_NS = "__primate_angular_core";
+function TRUE() {
+    return factory.createTrue();
+}
+function UNDEFINED() {
+    return factory.createIdentifier("undefined");
+}
+function STRING_LITERAL(text) {
+    return factory.createStringLiteral(text);
+}
+function core(name) {
+    return factory.createPropertyAccessExpression(factory.createIdentifier(CORE_NS), name);
+}
+function is_angular_core_import(node) {
+    return ts.isImportDeclaration(node)
+        && ts.isStringLiteral(node.moduleSpecifier)
+        && node.moduleSpecifier.text === "@angular/core";
+}
+function import_name(node) {
+    return (node.propertyName ?? node.name).text;
+}
+function local_name(node) {
+    return node.name.text;
+}
+function collect_angular_core_refs(source) {
+    const input_names = new Set(["input"]);
+    const namespaces = new Set();
+    for (const statement of source.statements) {
+        if (!is_angular_core_import(statement))
+            continue;
+        const bindings = statement.importClause?.namedBindings;
+        if (bindings === undefined)
+            continue;
+        if (ts.isNamedImports(bindings)) {
+            for (const element of bindings.elements) {
+                if (import_name(element) === "input") {
+                    input_names.add(local_name(element));
+                }
+            }
+        }
+        if (ts.isNamespaceImport(bindings)) {
+            namespaces.add(bindings.name.text);
+        }
+    }
+    return { input_names, namespaces };
+}
+function is_input_identifier_call(expr, refs) {
+    return ts.isCallExpression(expr)
+        && ts.isIdentifier(expr.expression)
+        && refs.input_names.has(expr.expression.text);
+}
+function is_input_namespace_call(expr, refs) {
+    return ts.isCallExpression(expr)
+        && ts.isPropertyAccessExpression(expr.expression)
+        && expr.expression.name.text === "input"
+        && ts.isIdentifier(expr.expression.expression)
+        && refs.namespaces.has(expr.expression.expression.text);
+}
+function is_input_call(expr, refs) {
+    return is_input_identifier_call(expr, refs)
+        || is_input_namespace_call(expr, refs);
+}
+function is_required_input_identifier_call(expr, refs) {
+    return ts.isCallExpression(expr)
+        && ts.isPropertyAccessExpression(expr.expression)
+        && expr.expression.name.text === "required"
+        && ts.isIdentifier(expr.expression.expression)
+        && refs.input_names.has(expr.expression.expression.text);
+}
+function is_required_input_namespace_call(expr, refs) {
+    return ts.isCallExpression(expr)
+        && ts.isPropertyAccessExpression(expr.expression)
+        && expr.expression.name.text === "required"
+        && ts.isPropertyAccessExpression(expr.expression.expression)
+        && expr.expression.expression.name.text === "input"
+        && ts.isIdentifier(expr.expression.expression.expression)
+        && refs.namespaces.has(expr.expression.expression.expression.text);
+}
+function is_required_input_call(expr, refs) {
+    return is_required_input_identifier_call(expr, refs)
+        || is_required_input_namespace_call(expr, refs);
+}
+function has_object_key(object, key) {
+    return object.properties.some(property => ts.isPropertyAssignment(property)
+        && (ts.isIdentifier(property.name) && property.name.text === key
+            || ts.isStringLiteral(property.name) && property.name.text === key));
+}
+function input_decorator_arg(public_name, options, required) {
+    if (options === undefined) {
+        if (!required)
+            return factory.createStringLiteral(public_name);
+        return factory.createObjectLiteralExpression([
+            factory.createPropertyAssignment("alias", STRING_LITERAL(public_name)),
+            factory.createPropertyAssignment("required", TRUE()),
+        ], false);
+    }
+    if (ts.isObjectLiteralExpression(options)) {
+        const props = [...options.properties];
+        if (!has_object_key(options, "alias")) {
+            props.push(factory.createPropertyAssignment("alias", STRING_LITERAL(public_name)));
+        }
+        if (required && !has_object_key(options, "required")) {
+            props.push(factory.createPropertyAssignment("required", TRUE()));
+        }
+        return factory.createObjectLiteralExpression(props, false);
+    }
+    return factory.createObjectLiteralExpression([
+        factory.createSpreadAssignment(options),
+        factory.createPropertyAssignment("alias", STRING_LITERAL(public_name)),
+        ...(required
+            ? [factory.createPropertyAssignment("required", TRUE())]
+            : []),
+    ], false);
+}
+function has_primate_core_namespace_import(source) {
+    return source.statements.some(statement => {
+        if (!is_angular_core_import(statement))
+            return false;
+        const bindings = statement.importClause?.namedBindings;
+        return bindings !== undefined
+            && ts.isNamespaceImport(bindings)
+            && bindings.name.text === CORE_NS;
+    });
+}
+function ensure_primate_core_namespace_import(source) {
+    if (has_primate_core_namespace_import(source))
+        return source;
+    const import_statement = factory.createImportDeclaration(undefined, factory.createImportClause(undefined, undefined, factory.createNamespaceImport(factory.createIdentifier(CORE_NS))), factory.createStringLiteral("@angular/core"));
+    return factory.updateSourceFile(source, [
+        import_statement,
+        ...source.statements,
+    ]);
+}
+function transform_class_member(member, refs) {
+    if (!ts.isPropertyDeclaration(member)
+        || member.initializer === undefined
+        || !ts.isIdentifier(member.name)) {
+        return [member];
+    }
+    const name = member.name.text;
+    const initializer = member.initializer;
+    const regular = is_input_call(initializer, refs);
+    const required = is_required_input_call(initializer, refs);
+    if (!regular && !required)
+        return [member];
+    const args = initializer.arguments;
+    const default_value = regular
+        ? args[0] ?? UNDEFINED()
+        : factory.createNonNullExpression(UNDEFINED());
+    const options = regular ? args[1] : args[0];
+    const signal_call = factory.createCallExpression(core("signal"), initializer.typeArguments, [default_value]);
+    const signal_property = factory.updatePropertyDeclaration(member, member.modifiers, member.name, member.questionToken, member.type, signal_call);
+    const decorator = factory.createDecorator(factory.createCallExpression(core("Input"), undefined, [input_decorator_arg(name, options, required)]));
+    const setter = factory.createSetAccessorDeclaration([decorator], factory.createIdentifier(`__primate_input_${name}`), [
+        factory.createParameterDeclaration(undefined, undefined, "value", undefined, factory.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword)),
+    ], factory.createBlock([
+        factory.createExpressionStatement(factory.createCallExpression(factory.createPropertyAccessExpression(factory.createPropertyAccessExpression(factory.createThis(), name), "set"), undefined, [factory.createIdentifier("value")])),
+    ], true));
+    return [signal_property, setter];
+}
+function transform_source(source) {
+    const refs = collect_angular_core_refs(source);
+    let found = false;
+    const statements = source.statements.map(statement => {
+        if (!ts.isClassDeclaration(statement))
+            return statement;
+        const members = statement.members.flatMap(member => {
+            const next = transform_class_member(member, refs);
+            if (next.length !== 1 || next[0] !== member) {
+                found = true;
+            }
+            return next;
+        });
+        return factory.updateClassDeclaration(statement, statement.modifiers, statement.name, statement.typeParameters, statement.heritageClauses, members);
+    });
+    if (!found)
+        return source;
+    return ensure_primate_core_namespace_import(factory.updateSourceFile(source, statements));
+}
+export default function signal_inputs(text) {
+    const source = ts.createSourceFile("component.ts", text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const transformed = transform_source(source);
+    if (transformed === source)
+        return text;
+    const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+    return printer.printNode(ts.EmitHint.SourceFile, transformed, source);
+}
+//# sourceMappingURL=signal-inputs.js.map

package/lib/public/browser.d.ts

@@ -1,2 +1,6 @@
-export { default } from "#client/app";
+export default function angular(): {
+    name: string;
+    setup(): void;
+};
+export { default as app } from "#client/app";
 //# sourceMappingURL=browser.d.ts.map

package/lib/public/browser.js

@@ -1,2 +1,8 @@
-export { default } from "#client/app";
+export default function angular() {
+    return {
+        name: "angular",
+        setup() { },
+    };
+}
+export { default as app } from "#client/app";
 //# sourceMappingURL=browser.js.map

package/lib/public/client.d.ts

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

package/lib/public/i18n.d.ts

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

package/lib/public/i18n.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/angular",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Angular for Primate",
   "homepage": "https://primate.run/docs/frontend/angular",
   "bugs": "https://github.com/primate-run/primate/issues",
@@ -18,21 +18,20 @@
   ],
   "types": "lib/index.d.ts",
   "dependencies": {
-    "@angular/common": "^21.2.7",
-    "@angular/compiler": "^21.2.7",
-    "@angular/core": "^21.2.7",
-    "@angular/platform-browser": "^21.2.7",
-    "@angular/platform-server": "^21.2.7",
-    "@angular/ssr": "^21.2.6",
-    "typescript": "^5.9.3",
-    "@primate/core": "^0.6.0"
+    "@angular/common": "^21.2.15",
+    "@angular/compiler": "^21.2.15",
+    "@angular/core": "^21.2.15",
+    "@angular/platform-browser": "^21.2.15",
+    "@angular/platform-server": "^21.2.15",
+    "@angular/ssr": "^21.2.13",
+    "typescript": "^6.0.3",
+    "@primate/core": "^0.8.0"
   },
   "devDependencies": {
-    "@rcompat/type": "^0.11.1",
-    "@primate/test": "^0.0.0"
+    "@rcompat/type": "^0.17.0"
   },
   "peerDependencies": {
-    "primate": "^0.37.0"
+    "primate": "^0.39.0"
   },
   "imports": {
     "#*": {
@@ -43,8 +42,12 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
+      "browser": {
+        "@primate/source": "./src/public/browser.ts",
+        "default": "./lib/public/browser.js"
+      },
+      "@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"
     },
@@ -54,9 +57,8 @@
     }
   },
   "scripts": {
-    "build": "npm run clean && tsc && cp src/types/{app,index}.d.ts lib",
+    "build": "npm run clean && tsgo && cp src/types/{app,index}.d.ts lib",
     "clean": "rm -rf ./lib",
-    "lint": "eslint .",
-    "test": "npx proby"
+    "lint": "eslint ."
   }
 }