@primate/webc 0.1.2 → 0.3.0

package/lib/private/Default.d.ts

@@ -0,0 +1,12 @@
+import Runtime from "#Runtime";
+import type FileRef from "@rcompat/fs/FileRef";
+export default class Default extends Runtime {
+    compile: {
+        client: (text: string, view: FileRef) => Promise<{
+            js: string;
+        }>;
+        normalize: (name: string) => Promise<string>;
+        server: (text: string) => string;
+    };
+}
+//# sourceMappingURL=Default.d.ts.map

package/lib/private/Default.js

@@ -0,0 +1,29 @@
+import Runtime from "#Runtime";
+import fail from "@primate/core/fail";
+const script_re = /(?<=<script)>(?<code>.*?)(?=<\/script>)/gus;
+const webc_class_name_re = /export default class (?<name>.*?) extends/u;
+export default class Default extends Runtime {
+    compile = {
+        client: async (text, view) => {
+            const [script] = [...text.matchAll(script_re)]
+                .map(({ groups }) => groups.code);
+            const { name } = script.match(webc_class_name_re)?.groups
+                ?? { name: undefined };
+            if (name === undefined)
+                throw fail("view at {0} has no class name", view);
+            const tag = (await this.normalize(view
+                .debase(view.directory, "/").path)).replace("_", "-");
+            const js = `${script}
+        globalThis.customElements.define("${tag}", ${name});
+      `;
+            return { js };
+        },
+        normalize: this.normalize,
+        server: (text) => {
+            const [code] = [...text.matchAll(script_re)]
+                .map(({ groups }) => groups.code);
+            return code;
+        },
+    };
+}
+//# sourceMappingURL=Default.js.map

package/lib/private/Runtime.d.ts

@@ -0,0 +1,16 @@
+import type App from "@primate/core/App";
+import FrontendModule from "@primate/core/frontend/Module";
+import type Render from "@primate/core/frontend/Render";
+import type Next from "@primate/core/Next";
+import type FileRef from "@rcompat/fs/FileRef";
+export default class Runtime extends FrontendModule {
+    #private;
+    name: string;
+    defaultExtensions: string[];
+    layouts: boolean;
+    client: boolean;
+    render: Render;
+    get views(): FileRef | undefined;
+    init<T extends App>(app: T, next: Next<T>): import("@rcompat/type/MaybePromise").default<T>;
+}
+//# sourceMappingURL=Runtime.d.ts.map

package/lib/private/Runtime.js

@@ -0,0 +1,19 @@
+import FrontendModule from "@primate/core/frontend/Module";
+export default class Runtime extends FrontendModule {
+    #views;
+    name = "webc";
+    defaultExtensions = [".webc"];
+    layouts = false;
+    client = true;
+    render = (_view, _props) => {
+        return { body: "", head: "" };
+    };
+    get views() {
+        return this.#views;
+    }
+    init(app, next) {
+        this.#views = app.path.views;
+        return super.init(app, next);
+    }
+}
+//# sourceMappingURL=Runtime.js.map

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

@@ -0,0 +1,13 @@
+import type Dict from "@rcompat/type/Dict";
+export default class Component extends HTMLElement {
+    #private;
+    static tag: string;
+    constructor(props?: Dict);
+    get props(): Dict;
+    set props(props: Dict);
+    connectedCallback(): void;
+    render(props: Dict): string;
+    mounted(_: ShadowRoot): void;
+    toString(): string;
+}
+//# sourceMappingURL=Component.d.ts.map

package/lib/private/client/Component.js

@@ -0,0 +1,38 @@
+export default class Component extends HTMLElement {
+    #props;
+    #component;
+    static tag = "";
+    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;
+    }
+    get props() {
+        return this.#props;
+    }
+    set props(props) {
+        this.#props = props;
+    }
+    connectedCallback() {
+        this.attachShadow({ mode: "open" });
+        const root = this.shadowRoot;
+        if (root === null) {
+            return;
+        }
+        root.innerHTML = this.render(this.props);
+        this.mounted(root);
+    }
+    render(props) {
+        return "";
+    }
+    mounted(_) {
+        // noop
+    }
+    toString() {
+        return this.render(this.props);
+    }
+}
+//# sourceMappingURL=Component.js.map

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

@@ -0,0 +1,9 @@
+import type Dict from "@rcompat/type/Dict";
+type Props = {
+    props: Dict;
+};
+export default class WebComponentsClient {
+    static mount(view: string, props: Props): void;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/private/client/index.js

@@ -0,0 +1,7 @@
+import * as views from "webc:views";
+export default class WebComponentsClient {
+    static mount(view, props) {
+        globalThis.document.body.appendChild(new views[view](props.props));
+    }
+}
+//# sourceMappingURL=index.js.map

package/lib/private/server/Component.d.ts

@@ -0,0 +1,6 @@
+import type Dict from "@rcompat/type/Dict";
+export default class Component {
+    render(_props: Dict): string;
+    mounted(_: ShadowRoot): void;
+}
+//# sourceMappingURL=Component.d.ts.map

package/lib/private/server/Component.js

@@ -0,0 +1,9 @@
+export default class Component {
+    render(_props) {
+        return "";
+    }
+    mounted(_) {
+        // noop
+    }
+}
+//# sourceMappingURL=Component.js.map

package/lib/public/Component.d.ts

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

package/lib/public/Component.js

@@ -0,0 +1,2 @@
+export { default } from "#Component";
+//# sourceMappingURL=Component.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/package.json

@@ -1,50 +1,53 @@
 {
   "name": "@primate/webc",
-  "version": "0.1.2",
-  "description": "Primate Web Components frontend",
-  "homepage": "https://primatejs.com/modules/webc",
-  "bugs": "https://github.com/primatejs/primate/issues",
+  "version": "0.3.0",
+  "description": "Primate web components frontend",
+  "homepage": "https://primate.run/docs/frontend/web-components",
+  "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/webc"
   },
   "dependencies": {
-    "@rcompat/fs": "^0.7.0",
-    "@primate/frontend": "^0.16.3"
+    "@rcompat/fs": "^0.21.1",
+    "@primate/core": "^0.3.0"
   },
   "peerDependencies": {
-    "primate": "^0.32.5"
+    "primate": "^0.34.0"
   },
   "type": "module",
   "imports": {
     "#*": {
-      "livetypes": "./src/private/*.js",
-      "default": "./src/private/*.js"
+      "apekit": "./src/private/*.ts",
+      "default": "./lib/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"
-    },
-    "#client": {
-      "livetypes": "./src/private/client/index.js",
-      "default": "./src/private/client/index.js"
+    "#Component": {
+      "apekit": "./src/private/client/Component.ts",
+      "browser": "./lib/private/client/Component.js",
+      "default": "./lib/private/server/Component.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"
     },
-    "./Component": "./src/public/Component.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/client.js

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

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

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

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

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

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

package/src/private/name.js

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

package/src/private/pkgname.js

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

package/src/private/serve/handler.js

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

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

package/src/public/Component.js

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

@@ -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),
-});