From 781a7384d3cc2b8d83bae9abbddfbe1d78d1fbd5 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 8 Oct 2023 01:37:25 +0200 Subject: [PATCH] feat: generate registry.js from src/components --- .gitignore | 3 ++- plugins/register-components.ts | 43 +++++++++++++++++++++------------- public/_registry.js | 13 ---------- src/pages/404.html | 1 + src/pages/about.html | 11 +++++++++ src/pages/index.html | 2 +- 6 files changed, 42 insertions(+), 31 deletions(-) delete mode 100644 public/_registry.js create mode 100644 src/pages/404.html create mode 100644 src/pages/about.html diff --git a/.gitignore b/.gitignore index eee04ce..661897c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ node_modules .cache .output .env -dist \ No newline at end of file +dist +public/registry.js diff --git a/plugins/register-components.ts b/plugins/register-components.ts index d4b4817..1e80f36 100644 --- a/plugins/register-components.ts +++ b/plugins/register-components.ts @@ -1,26 +1,37 @@ +import * as fs from "fs"; /** build registry of custom elements */ export default defineNitroPlugin(async () => { console.log("Building registry of custom elements..."); - useStorage() - .getKeys("/assets/components") - .then((keys) => { - keys.forEach((key) => { - const name = key - .replace("assets:components:", "") - .replace(".ts", "") - .replace(".js", ""); - const constructor = name - .split("-") - .map((word) => capitalizeFirstLetter(word)) - .join(""); + const rawKeys = await useStorage().getKeys("/assets/components"); + const keys = rawKeys.map((key) => key.replace("assets:components:", "")); + console.log("Found components:", keys); + const imports = keys.map((key, index) => { + return `import C${index} from "/components/${key}"`; + }); - useStorage().setItem(`registry:${name}`, constructor); - console.log(`> ${name}, ${constructor}`); - }); - }); + const registryObject = ` + const registry = { + ${keys + .map((key, index) => { + const name = key.replace(".js", "").replace(".ts", ""); + return `"${name}": C${index}`; + }) + .join(",")} + }`; + + const customElementsDefine = ` + Object.keys(registry).forEach((key) => { + if (window?.hasOwnProperty("customElements")) + customElements.define(key, registry[key]); + })`; + + fs.writeFileSync( + "./public/registry.js", + [...imports, registryObject, customElementsDefine].join(";") + ); }); function capitalizeFirstLetter(string) { diff --git a/public/_registry.js b/public/_registry.js deleted file mode 100644 index 75123c8..0000000 --- a/public/_registry.js +++ /dev/null @@ -1,13 +0,0 @@ -import HelloWorld from "/components/hello-world.js"; - -/** - * Map of custom element name to the class constructor - */ -const registry = { - "hello-world": HelloWorld, -}; - -Object.keys(registry).forEach((key) => { - if (window?.hasOwnProperty("customElements")) - customElements.define(key, registry[key]); -}); diff --git a/src/pages/404.html b/src/pages/404.html new file mode 100644 index 0000000..5abe1ef --- /dev/null +++ b/src/pages/404.html @@ -0,0 +1 @@ +wow we can't find that diff --git a/src/pages/about.html b/src/pages/about.html new file mode 100644 index 0000000..1fa5293 --- /dev/null +++ b/src/pages/about.html @@ -0,0 +1,11 @@ + + + + + + top about + + +

Top Level About

+ + diff --git a/src/pages/index.html b/src/pages/index.html index 1becafc..50b9ca7 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -4,7 +4,7 @@ Hello Nitro - +