@primate/webc 0.1.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) Terrablue <terrablue@proton.me> and contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@primate/webc",
+  "version": "0.1.0",
+  "description": "Primate Web Components frontend",
+  "homepage": "https://primatejs.com/modules/webc",
+  "bugs": "https://github.com/primatejs/primate/issues",
+  "license": "MIT",
+  "files": [
+    "src/**/*.js",
+    "!src/**/*.spec.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/primatejs/primate",
+    "directory": "packages/webc"
+  },
+  "dependencies": {
+    "@rcompat/fs": "^0.4.0",
+    "@primate/frontend": "^0.16.0"
+  },
+  "peerDependencies": {
+    "primate": "^0.32.0"
+  },
+  "type": "module",
+  "imports": {
+    "#*": {
+      "@primate/lt": "./src/private/*.js",
+      "default": "./src/private/*.js"
+    },
+    "#build": {
+      "@primate/lt": "./src/private/build/index.js",
+      "default": "./src/private/build/index.js"
+    },
+    "#serve": {
+      "@primate/lt": "./src/private/serve/index.js",
+      "default": "./src/private/serve/index.js"
+    },
+    "#client": {
+      "@primate/lt": "./src/private/client/index.js",
+      "default": "./src/private/client/index.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "runtime": "./src/public/runtime.js",
+      "default": "./src/public/default.js"
+    },
+    "./Component": "./src/public/Component.js"
+  }
+}

package/src/private/build/client.js

@@ -0,0 +1,20 @@
+import no_class_name from "#error/no-class-name";
+import file from "@rcompat/fs/file";
+
+const script_re = /(?<=<script)>(?<code>.*?)(?=<\/script>)/gus;
+const webc_class_name_re = /export default class (?<name>.*?) extends/u;
+
+export default (app, extension) => async (text, component) => {
+  const [script] = await Promise.all([...text.matchAll(script_re)]
+    .map(({ groups: { code } }) => code));
+  const { name } = script.match(webc_class_name_re)?.groups ?? {};
+  // app.assert(name !== undefined, NoClassName._(component))
+  name === undefined && no_class_name(component);
+  const tag = file(component)
+    .debase(`${app.path.components}/`)
+    .path.replaceAll("/", "-").slice(0, -extension.length);
+
+  const js = `${script} globalThis.customElements.define("${tag}", ${name});`;
+
+  return { js };
+};

package/src/private/build/index.js

@@ -0,0 +1,21 @@
+import name from "#name";
+import compile from "@primate/frontend/core/compile";
+import client from "./client.js";
+import publish from "./publish.js";
+
+export default extension => async (app, next) => {
+  app.register(extension, {
+    ...await compile({
+      app,
+      extension,
+      name,
+      compile: { client: client(app, extension) },
+    }),
+    // noop
+    server: _ => _,
+  });
+
+  app.build.plugin(publish(app, extension));
+
+  return next(app);
+};

package/src/private/build/publish.js

@@ -0,0 +1,14 @@
+import file from "@rcompat/fs/file";
+import client from "./client.js";
+
+export default (app, extension) => ({
+  name: "webc",
+  setup(build) {
+    build.onLoad({ filter: new RegExp(`${extension}$`, "u") }, async args => {
+      // Load the file from the file system
+      const source = await file(args.path).text();
+
+      return { contents: (await client(app, extension)(source, args.path)).js };
+    });
+  },
+});

package/src/private/client/index.js

@@ -0,0 +1,20 @@
+export default (name, props) => `
+  import * as components from "app";
+
+  globalThis.customElements.define("p-wrap-with", class extends HTMLElement {
+    connectedCallback() {
+      this.attachShadow({ mode: "open" });
+
+      const id = this.getAttribute("id");
+      const wrapped = globalThis.registry[id];
+      this.shadowRoot.appendChild(wrapped);
+      wrapped.render();
+      delete globalThis.registry[id];
+    }
+  });
+  globalThis.registry = {};
+
+  const element = globalThis.document.createElement("${name.replaceAll("/", "-")}");
+  element.props = ${JSON.stringify(props)};
+  globalThis.document.body.appendChild(element)
+`;

package/src/private/error/no-class-name.js

@@ -0,0 +1,11 @@
+import pkgname from "#pkgname";
+import log from "@primate/core/log";
+import file from "@rcompat/fs/file";
+
+export default (...params) => log.error({
+  params,
+  name: file(import.meta.url).base,
+  module: pkgname,
+  message: "the component at {0} is missing a class name",
+  fix: "add a class name to the component",
+});

package/src/private/extension.js

@@ -0,0 +1 @@
+export default ".webc";

package/src/private/name.js

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

package/src/private/pkgname.js

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

package/src/private/serve/handler.js

@@ -0,0 +1,11 @@
+import client from "#client";
+
+export default (name, props = {}, options = {}) => async app => {
+  const [component] = name.split(".");
+  const assets = [await app.inline(client(component, props), "module")];
+  const head = assets.map(asset => asset.head).join("\n");
+  const script_src = assets.map(asset => asset.integrity);
+  const headers = app.headers({ "script-src": script_src });
+
+  return app.view({ head, headers, body: "", ...options });
+};

package/src/private/serve/index.js

@@ -0,0 +1,7 @@
+import handler from "./handler.js";
+
+export default extension => (app, next) => {
+  app.register(extension, handler);
+
+  return next(app);
+};

package/src/public/Component.js

@@ -0,0 +1,28 @@
+const ServerHTMLElement = class {};
+
+const HTMLElement = globalThis.HTMLElement ?? ServerHTMLElement;
+
+export default class Component extends HTMLElement {
+  constructor(props) {
+    super();
+    this.props = props === undefined
+      // <sub-component name="bob" />
+      ? Object.fromEntries(this.getAttributeNames().map(key =>
+        [key, this.getAttribute(key)]))
+      // new SubComponent({ name: "bob" }).render()
+      : props;
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.render(this.props);
+    this.mounted?.(this.shadowRoot);
+  }
+
+  toString() {
+    const uuid = crypto.randomUUID();
+    globalThis.registry[uuid] = this;
+    return `<p-wrap-with id="${uuid}"></p-wrap-with>`;
+  }
+}
+

package/src/public/default.js

@@ -0,0 +1,10 @@
+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

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