@primate/angular 0.1.5 → 0.3.0

package/lib/private/Default.d.ts

@@ -0,0 +1,17 @@
+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/Default.js

@@ -0,0 +1,53 @@
+import create_root from "#create-root";
+import Runtime from "#Runtime";
+import * as ts from "typescript";
+export default class Default extends Runtime {
+    root = {
+        create: create_root,
+    };
+    css = {
+        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,
+                },
+            });
+            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();
+            }
+            return {
+                js: result.outputText,
+                css,
+            };
+        },
+        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,
+                },
+            });
+            return result.outputText;
+        },
+    };
+}
+//# sourceMappingURL=Default.js.map

package/lib/private/INITIAL_PROPS.d.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from "@angular/core";
+import type Dict from "@rcompat/type/Dict";
+type RootProps = {
+    components: any[];
+    props: Dict[];
+    request: any;
+    update?: () => void;
+};
+declare const _default: InjectionToken<RootProps>;
+export default _default;
+//# sourceMappingURL=INITIAL_PROPS.d.ts.map

package/lib/private/INITIAL_PROPS.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from "@angular/core";
+export default new InjectionToken("INITIAL_PROPS");
+//# sourceMappingURL=INITIAL_PROPS.js.map

package/lib/private/Runtime.d.ts

@@ -0,0 +1,13 @@
+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";
+export default class Runtime extends FrontendModule<Type<any>> {
+    name: string;
+    defaultExtensions: string[];
+    layouts: boolean;
+    client: boolean;
+    render: Render<Type<any>>;
+}
+//# sourceMappingURL=Runtime.d.ts.map

package/lib/private/Runtime.js

@@ -0,0 +1,38 @@
+import INITIAL_PROPS from "#INITIAL_PROPS";
+import root from "#root-selector";
+import "@angular/compiler";
+import { importProvidersFrom, provideZoneChangeDetection, } 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"];
+    layouts = true;
+    client = true;
+    render = async (RootComponent, props) => {
+        const providers = [
+            importProvidersFrom(BrowserModule),
+            provideServerRendering(),
+            provideClientHydration(),
+            provideZoneChangeDetection({ eventCoalescing: true }),
+            {
+                provide: INITIAL_PROPS,
+                useValue: props,
+            },
+        ];
+        const bootstrap = (context) => bootstrapApplication(RootComponent, { providers }, context);
+        const html = await renderApplication(bootstrap, {
+            document: `<${root}></${root}>`,
+        });
+        const headMatch = html.match(/<head>(.*?)<\/head>/s);
+        const bodyRegex = new RegExp(`<${root}>([\\s\\S]*?)<\\/${root}>`);
+        const bodyMatch = html.match(bodyRegex);
+        return {
+            body: bodyMatch?.[1] || html,
+            head: headMatch?.[1] || "",
+        };
+    };
+}
+//# sourceMappingURL=Runtime.js.map

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

@@ -0,0 +1,11 @@
+import { type Signal } from "@angular/core";
+import type ValidateUpdater from "@primate/core/client/ValidateUpdater";
+import type ValidationError from "@primate/core/client/ValidationError";
+type Validated<T> = {
+    error: Signal<null | ValidationError>;
+    loading: Signal<boolean>;
+    update: (updater: ValidateUpdater<T>) => Promise<void>;
+    value: Signal<T>;
+};
+export type { Validated as default };
+//# sourceMappingURL=Validated.d.ts.map

package/lib/private/client/Validated.js

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

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

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

package/lib/private/client/index.js

@@ -0,0 +1,72 @@
+import INITIAL_PROPS from "#INITIAL_PROPS";
+import "zone.js";
+import "@angular/compiler";
+import { NgZone, provideZoneChangeDetection, } from "@angular/core";
+import { bootstrapApplication, provideClientHydration, } from "@angular/platform-browser";
+import spa from "@primate/core/client/spa";
+import * as components from "angular:components";
+import root from "angular:root";
+const make_props = (data) => ({
+    components: data.components.map(name => components[name]),
+    props: data.props,
+    request: {
+        ...data.request,
+        url: new URL(location.href),
+    },
+    update: () => undefined,
+});
+export default class AngularClient {
+    static #app;
+    static #root;
+    static #zone;
+    static async mount(_component, data) {
+        const providers = [];
+        // Add hydration provider for SSR
+        if (data.ssr) {
+            providers.push(provideClientHydration());
+        }
+        // Add zone.js change detection
+        providers.push(provideZoneChangeDetection({ eventCoalescing: true }));
+        // Create the root component props
+        const props = make_props(data);
+        // Bootstrap the application
+        try {
+            this.#app = await bootstrapApplication(root, {
+                providers: [
+                    ...providers,
+                    {
+                        provide: INITIAL_PROPS,
+                        useValue: props,
+                    },
+                ],
+            });
+            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();
+            }
+        }
+        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();
+                });
+                update?.();
+            });
+        });
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,25 @@
+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/private/client/validate.js

@@ -0,0 +1,29 @@
+import { signal } from "@angular/core";
+import toValidated from "@primate/core/client/toValidated";
+import validate from "@primate/core/client/validate";
+function useValidate(init) {
+    const value = signal(init.initial);
+    const loading = signal(false);
+    const error = signal(null);
+    async function update(updater) {
+        const previous = value();
+        const next = updater(previous);
+        value.set(next);
+        loading.set(true);
+        error.set(null);
+        try {
+            await validate(init, next);
+        }
+        catch (e) {
+            // rollback
+            value.set(previous);
+            error.set(e);
+        }
+        finally {
+            loading.set(false);
+        }
+    }
+    return { error, loading, update, value };
+}
+export default toValidated(useValidate);
+//# sourceMappingURL=validate.js.map

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

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

package/lib/private/create-root.js

@@ -0,0 +1,105 @@
+import root_selector from "#root-selector";
+export default (depth, i18n_active) => {
+    const n = depth - 1;
+    const layer = (i, child) => {
+        const slot = `slot_${i}`;
+        const childTemplate = child
+            ? `<ng-template #${slot}>${child}</ng-template>`
+            : "";
+        const inputs = child
+            ? `(has(${i + 1}) ? slotInputs(${i}, ${slot}) : inputs(${i}))`
+            : `inputs(${i})`;
+        return `${childTemplate}
+      <ng-container *ngComponentOutlet="comp(${i}); inputs: ${inputs}">
+      </ng-container>
+    `;
+    };
+    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";
+${i18n_imports}
+
+type Dict = Record<string, any>;
+type RootProps = {
+  components: any[];
+  props: Dict[];
+  request: any;
+  update?: () => void
+};
+
+@Component({
+  standalone: true,
+  selector: "${root_selector}",
+  imports: [CommonModule, NgComponentOutlet],
+  template: \`<ng-container *ngIf="P as P">${body}</ng-container>\`
+})
+export default class RootComponent implements OnDestroy {
+  #p!: RootProps;
+  #cdr = inject(ChangeDetectorRef);
+  #off?: () => void;
+
+  constructor() {
+    try {
+      const initial = inject<any>(INITIAL_PROPS);
+      if (initial) this.#p = initial;
+    } catch {}
+    ${i18n_setup}
+  }
+
+  @Input({ required: true })
+  set p(value: RootProps) {
+    this.#p = value;
+    this.#cdr.markForCheck();  // root on default CD, zone ticks traverse
+  }
+  get p(): RootProps { return this.#p; }
+  get P(): RootProps { return this.#p; }
+
+  // is there a component at index i?
+  has(i: number) { return !!this.P?.components?.[i]; }
+
+  // component type for index i
+  comp(i: number) { return this.P?.components?.[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 };
+  }
+
+  ngAfterViewInit() {
+    t[sInternal].restore();
+  }
+
+  ngOnDestroy() { this.#off?.(); }
+}
+`;
+};
+//# sourceMappingURL=create-root.js.map

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

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

package/lib/private/root-selector.js

@@ -0,0 +1,2 @@
+export default "app-root";
+//# sourceMappingURL=root-selector.js.map

package/lib/public/INITIAL_PROPS.d.ts

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

package/lib/public/INITIAL_PROPS.js

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

package/lib/public/Validated.d.ts

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

package/lib/public/Validated.js

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

package/lib/public/browser.d.ts

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

package/lib/public/browser.js

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

package/lib/public/default.d.ts

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

package/lib/public/default.js

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

package/lib/public/runtime.d.ts

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

package/lib/public/runtime.js

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

package/lib/public/validate.d.ts

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

package/lib/public/validate.js

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

package/package.json

@@ -1,52 +1,60 @@
 {
   "name": "@primate/angular",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "Primate Angular frontend",
-  "homepage": "https://primatejs.com/modules/angular",
-  "bugs": "https://github.com/primatejs/primate/issues",
+  "homepage": "https://primate.run/docs/frontend/angular",
+  "bugs": "https://github.com/primate-run/primate/issues",
   "license": "MIT",
   "files": [
-    "src/**/*.js",
-    "!src/**/*.spec.js"
+    "/lib/**/*.js",
+    "/lib/**/*.d.ts",
+    "!/**/*.spec.*"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/primatejs/primate",
+    "url": "https://github.com/primate-run/primate",
     "directory": "packages/angular"
   },
   "dependencies": {
-    "@angular/compiler": "^18.2.1",
-    "@angular/platform-browser": "^18.2.1",
-    "@angular/platform-server": "^18.2.1",
-    "@angular/ssr": "^18.2.1",
-    "@rcompat/build": "^0.5.0",
-    "@rcompat/object": "^0.5.0",
-    "zone.js": "^0.14.10",
-    "@primate/frontend": "^0.16.3"
+    "@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.2.0"
   },
   "peerDependencies": {
-    "@angular/core": "18",
-    "primate": "^0.32.5"
+    "primate": "^0.33.0"
   },
   "type": "module",
   "imports": {
     "#*": {
-      "livetypes": "./src/private/*.js",
-      "default": "./src/private/*.js"
-    },
-    "#build": {
-      "livetypes": "./src/private/build/index.js",
-      "default": "./src/private/build/index.js"
-    },
-    "#serve": {
-      "livetypes": "./src/private/serve/index.js",
-      "default": "./src/private/serve/index.js"
+      "apekit": "./src/private/*.ts",
+      "default": "./lib/private/*.js"
     }
   },
   "exports": {
     ".": {
-      "runtime": "./src/public/runtime.js",
-      "default": "./src/public/default.js"
+      "browser": "./lib/public/browser.js",
+      "runtime": "./lib/public/runtime.js",
+      "default": "./lib/public/default.js"
+    },
+    "./*": {
+      "apekit": "./src/public/*.ts",
+      "default": "./lib/public/*.js"
     }
+  },
+  "scripts": {
+    "build": "npm run clean && tsc",
+    "clean": "rm -rf ./lib",
+    "lint": "eslint ."
   }
 }

package/src/private/build/index.js

@@ -1,15 +0,0 @@
-import server from "./server.js";
-
-export default extension => async (app, next) => {
-  const extensions = {
-    from: extension,
-    to: ".js",
-  };
-
-  app.register(extension, {
-    server: component => server(app, component, extensions),
-    client: _ => _,
-  });
-
-  return next(app);
-};

package/src/private/build/server.js

@@ -1,20 +0,0 @@
-import transform from "@rcompat/build/transform";
-
-const options = {
-  loader: "ts",
-  tsconfig: {
-    compilerOptions: {
-      experimentalDecorators: true,
-    },
-  },
-};
-
-export default async (app, component, extensions) => {
-  const location = app.get("location");
-  const source = app.runpath(location.components);
-  const { code } = await transform(await component.text(), options);
-  const target_base = app.runpath(location.server, location.components);
-  const path = target_base.join(`${component.path}.js`.replace(source, ""));
-  await path.directory.create();
-  await path.write(code.replaceAll(extensions.from, extensions.to));
-};

package/src/private/extension.js

@@ -1 +0,0 @@
-export default ".component.ts";

package/src/private/pkgname.js

@@ -1 +0,0 @@
-export default "@primate/angular";

package/src/private/serve/index.js

@@ -1,10 +0,0 @@
-import serve from "@primate/frontend/core/serve";
-import render from "./render.js";
-import set_mode from "./set-mode.js";
-
-export default extension => {
-  // todo: base on app mode
-  set_mode("production");
-
-  return serve({ render })(extension);
-};

package/src/private/serve/make-root.js

@@ -1,17 +0,0 @@
-import { reflectComponentType } from "@angular/core";
-import stringify from "@rcompat/object/stringify";
-import root_component from "./root-component.js";
-
-const double_to_single = string => string.replaceAll("\"", "'");
-
-export default (real_root, props) => {
-  const { selector } = reflectComponentType(real_root);
-  const attributes = Object.entries(props)
-    .map(([key, value]) => `[${key}]="${double_to_single(stringify(value))}"`)
-    .join(" ");
-
-  return root_component({
-    imports: [real_root],
-    template: `<${selector} ${attributes}></${selector}>`,
-  });
-};

package/src/private/serve/render.js

@@ -1,33 +0,0 @@
-import "@angular/compiler";
-import {
-  bootstrapApplication,
-  provideClientHydration,
-} from "@angular/platform-browser";
-import {
-  provideServerRendering,
-  renderApplication,
-  ɵSERVER_CONTEXT,
-} from "@angular/platform-server";
-import "zone.js";
-import make_root from "./make-root.js";
-import selector from "./selector.js";
-
-// const common_engine = new CommonEngine();
-
-export default async (given_component, props) => {
-  const component = make_root(given_component, props);
-  const document = `<${selector}></${selector}>`;
-  const bootstrap = () => bootstrapApplication(component, {
-    providers: [
-      provideServerRendering(),
-     { provide: ɵSERVER_CONTEXT, useValue: "analog" },
-     ...component.renderProviders || [],
-     provideClientHydration(),
-    ],
-  });
-  const html = await renderApplication(bootstrap, { document });
-  const b_s = "<body>";
-  const b_e = "</body>";
-  // await common_engine.render({ bootstrap, document });
-  return html.slice(html.indexOf(b_s) + b_s.length, html.indexOf(b_e));
-};

package/src/private/serve/root-component.js

@@ -1,9 +0,0 @@
-import { Component as component } from "@angular/core";
-import selector from "./selector.js";
-
-export default ({ template, imports }) => component({
-  selector,
-  imports,
-  template,
-  standalone: true,
-})(class {});

package/src/private/serve/selector.js

@@ -1 +0,0 @@
-export default "app-root";

package/src/private/serve/set-mode.js

@@ -1,7 +0,0 @@
-import { enableProdMode } from "@angular/core";
-
-export default mode => {
-  if (mode === "production") {
-    enableProdMode();
-  }
-};

package/src/public/default.js

@@ -1,10 +0,0 @@
-import build from "#build";
-import default_extension from "#extension";
-import pkgname from "#pkgname";
-import serve from "#serve";
-
-export default ({ extension = default_extension } = {}) => ({
-  name: pkgname,
-  build: build(extension),
-  serve: serve(extension),
-});

package/src/public/runtime.js

@@ -1,8 +0,0 @@
-import default_extension from "#extension";
-import pkgname from "#pkgname";
-import serve from "#serve";
-
-export default ({ extension = default_extension } = {}) => ({
-  name: pkgname,
-  serve: serve(extension),
-});