test output directory

plugins/1-copy-components.ts

@@ -0,0 +1,11 @@
+import * as fs from "fs";
+export default defineNitroPlugin(async () => {
+  console.log("Copying components to public folder...");
+  const rawKeys = await useStorage().getKeys("/assets/components");
+  rawKeys.forEach(async (key) => {
+    const cleanKey = key.replace("assets:components:", "");
+    const content = await useStorage().getItem(key);
+    if (!fs.existsSync("./public/output")) fs.mkdirSync("./public/output");
+    fs.writeFileSync(`./public/output/${cleanKey}`, content.toString());
+  });
+});

plugins/2-register-components.ts

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+export default defineNitroPlugin(async () => {
+  console.log("Building registry of custom elements...");
+  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 "./${key}"`;
+  });
+
+  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]);})`;
+
+  if (!fs.existsSync("./public/output")) {
+    fs.mkdirSync("./public/output");
+  }
+  fs.writeFileSync(
+    "./public/output/registry.js",
+    [...imports, registryObject, customElementsDefine].join(";")
+  );
+});

routes/[...index].ts

@@ -12,7 +12,7 @@ export default eventHandler(async (event) => {
 
   // temporary; use ultrahtml later
   const registryScript =
-    '<script type="module" src="./.output/registry.js"></script>';
+    '<script type="module" src="./output/registry.js"></script>';
   html = html.toString().replace("</head>", registryScript + "</head>");
 
   return html ?? new Response("Not found", { status: 404 });