@primate/angular 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/angular",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Primate Angular frontend",
   "homepage": "https://primatejs.com/modules/angular",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -15,32 +15,42 @@
     "directory": "packages/angular"
   },
   "dependencies": {
-    "@angular/compiler": "^18.1.4",
-    "@angular/platform-browser": "^18.1.4",
-    "@angular/platform-server": "^18.1.4",
-    "@angular/ssr": "^18.1.4",
-    "@rcompat/build": "^0.4.0",
+    "@angular/compiler": "^18.2.2",
+    "@angular/platform-browser": "^18.2.2",
+    "@angular/platform-server": "^18.2.2",
+    "@angular/ssr": "^18.2.2",
+    "@rcompat/build": "^0.6.0",
+    "@rcompat/crypto": "^0.5.0",
+    "@rcompat/fs": "^0.7.0",
     "@rcompat/object": "^0.5.0",
     "zone.js": "^0.14.10",
-    "@primate/frontend": "^0.16.1"
+    "@primate/frontend": "^0.16.4"
   },
   "peerDependencies": {
     "@angular/core": "18",
-    "primate": "^0.32.2"
+    "primate": "^0.32.6"
   },
   "type": "module",
   "imports": {
     "#*": {
-      "@primate/lt": "./src/private/*.js",
+      "livetypes": "./src/private/*.js",
       "default": "./src/private/*.js"
     },
     "#build": {
-      "@primate/lt": "./src/private/build/index.js",
+      "livetypes": "./src/private/build/index.js",
       "default": "./src/private/build/index.js"
     },
     "#serve": {
-      "@primate/lt": "./src/private/serve/index.js",
+      "livetypes": "./src/private/serve/index.js",
       "default": "./src/private/serve/index.js"
+    },
+    "#client": {
+      "livetypes": "./src/private/client/index.js",
+      "default": "./src/private/client/index.js"
+    },
+    "#client/*": {
+      "livetypes": "./src/private/client/*.js",
+      "default": "./src/private/client/*.js"
     }
   },
   "exports": {

package/src/private/build/client.js

@@ -0,0 +1,11 @@
+import normalize from "#normalize";
+
+export default async (app, component) => {
+  const location = app.get("location");
+  const source = app.runpath(location.components);
+  const { path } = component.debase(source, "/");
+
+  const code = `export { default as ${await normalize(path)} } from
+    "./${location.components}/${path}";`;
+  app.build.export(code);
+};

package/src/private/build/compile.js

@@ -0,0 +1,12 @@
+import transform from "@rcompat/build/transform";
+
+const options = {
+  loader: "ts",
+  tsconfig: {
+    compilerOptions: {
+      experimentalDecorators: true,
+    },
+  },
+};
+
+export default async text => (await transform(text, options)).code;

package/src/private/build/index.js

@@ -1,5 +1,17 @@
+import create_root from "#client/create-root-client";
+import expose from "#client/expose";
+import name from "#name";
+import client from "./client.js";
+import publish from "./publish.js";
 import server from "./server.js";
 
+const client_root = async app => {
+  const root = create_root();
+  const code = `export { default as root_${name} } from "root:${name}";`;
+  app.build.save(`root:${name}`, root);
+  app.build.export(code);
+};
+
 export default extension => async (app, next) => {
   const extensions = {
     from: extension,
@@ -8,8 +20,12 @@ export default extension => async (app, next) => {
 
   app.register(extension, {
     server: component => server(app, component, extensions),
-    client: _ => _,
+    client: component => client(app, component, extensions),
   });
 
+  await client_root(app);
+  app.build.plugin(publish(app, extension));
+  app.build.export(expose);
+
   return next(app);
 };

package/src/private/build/publish.js

@@ -0,0 +1,27 @@
+import file from "@rcompat/fs/file";
+import compile from "./compile.js";
+import name from "#name";
+
+const root_filter = /^root:angular/u;
+
+export default (app, extension) => ({
+  name,
+  setup(build) {
+    const resolveDir = app.path.build.path;
+
+    build.onResolve({ filter: root_filter }, ({ path }) => {
+      return { path, namespace: `${name}-root` };
+    });
+    build.onLoad({ filter: root_filter }, ({ path }) => {
+      const contents = app.build.load(path);
+      return contents ? { contents, loader: "js", resolveDir } : null;
+    });
+    build.onLoad({ filter: new RegExp(`${extension}$`, "u") }, async args => {
+      // Load the file from the file system
+      const source = await file(args.path).text();
+
+      // Compile component.ts file to JavaScript
+      return { contents: await compile(source) };
+    });
+  },
+});

package/src/private/build/server.js

@@ -1,18 +1,9 @@
-import transform from "@rcompat/build/transform";
-
-const options = {
-  loader: "ts",
-  tsconfig: {
-    compilerOptions: {
-      experimentalDecorators: true,
-    },
-  },
-};
+import compile from "./compile.js";
 
 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 code = await compile(await component.text());
   const target_base = app.runpath(location.server, location.components);
   const path = target_base.join(`${component.path}.js`.replace(source, ""));
   await path.directory.create();

package/src/private/client/create-root-client.js

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

package/src/private/client/create-root.js

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

package/src/private/client/expose.js

@@ -0,0 +1,9 @@
+export default `
+  // side effects
+  import "@angular/compiler";
+  import "zone.js";
+
+  export {
+    bootstrapApplication,
+    provideClientHydration,
+  } from "@angular/platform-browser";`;

package/src/private/client/index.js

@@ -0,0 +1,11 @@
+export default ({ component, props }) => `
+  import { bootstrapApplication, provideClientHydration } from "app";
+  import * as components from "app";
+
+  const config = { providers: [provideClientHydration()] };
+
+  const rendered = components.root_angular(components.${component},
+    ${JSON.stringify(props)});
+
+  bootstrapApplication(rendered, config)
+    .catch(error => console.error(error));`;

package/src/private/name.js

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

package/src/private/normalize.js

@@ -0,0 +1,4 @@
+import hash from "@rcompat/crypto/hash";
+import name from "#name";
+
+export default async path => `${name}_${await hash(path)}`;

package/src/private/serve/index.js

@@ -1,10 +1,29 @@
-import serve from "@primate/frontend/core/serve";
 import render from "./render.js";
 import set_mode from "./set-mode.js";
+import client from "#client";
+import normalize from "#normalize";
 
-export default extension => {
+const serve = (name, props = {}, options = {}) => async app => {
+  const component = await app.get_component(name);
+
+  const normalized = await normalize(name);
+  const code = client({ component: normalized, props });
+  const inlined = await app.inline(code, "module");
+  const script_src = [inlined.integrity];
+
+  return app.view({
+    body: await render(component, props),
+    head: inlined.head,
+    headers: app.headers({ "script-src": script_src }),
+    ...options,
+  });
+};
+
+export default extension => (app, next) => {
   // todo: base on app mode
   set_mode("production");
 
-  return serve({ render })(extension);
+  app.register(extension, serve);
+
+  return next(app);
 };

package/src/private/serve/render.js

@@ -5,18 +5,18 @@ import {
 } from "@angular/platform-browser";
 import {
   provideServerRendering,
-  renderApplication,
   ɵSERVER_CONTEXT,
 } from "@angular/platform-server";
+import { CommonEngine } from "@angular/ssr";
 import "zone.js";
-import make_root from "./make-root.js";
-import selector from "./selector.js";
+import create_root from "#client/create-root";
+import root_selector from "#client/root-selector";
 
-// const common_engine = new CommonEngine();
+const common_engine = new CommonEngine();
 
 export default async (given_component, props) => {
-  const component = make_root(given_component, props);
-  const document = `<${selector}></${selector}>`;
+  const component = create_root(given_component, props);
+  const document = `<${root_selector}></${root_selector}>`;
   const bootstrap = () => bootstrapApplication(component, {
     providers: [
       provideServerRendering(),
@@ -25,9 +25,9 @@ export default async (given_component, props) => {
      provideClientHydration(),
     ],
   });
-  const html = await renderApplication(bootstrap, { document });
   const b_s = "<body>";
   const b_e = "</body>";
-  // await common_engine.render({ bootstrap, document });
+  const html = await common_engine.render({ bootstrap, document });
+
   return html.slice(html.indexOf(b_s) + b_s.length, html.indexOf(b_e));
 };

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/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 {});