mcfly/packages/custom-elements.ts
2023-10-12 19:48:50 +02:00

47 lines
1.6 KiB
TypeScript

import { existsSync, mkdirSync, writeFileSync } from "node:fs";
export default function components() {
return () => {
copyComponents();
registerComponents();
};
}
const copyComponents = 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 (!existsSync("./public/.output")) mkdirSync("./public/.output");
writeFileSync(`./public/.output/${cleanKey}`, content.toString());
});
};
const registerComponents = 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 (!existsSync("./public/.output")) {
mkdirSync("./public/.output");
}
writeFileSync(
"./public/.output/registry.js",
[...imports, registryObject, customElementsDefine].join(";")
);
};