ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: generate registry.js from src/components

Browse source
This commit is contained in:
Ayo 2023-10-08 01:37:25 +02:00
parent 7b45dc3ae6
commit 781a7384d3
6 changed files with 42 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -5,3 +5,4 @@ node_modules
.output .output
.env .env
dist dist
public/registry.js

43
plugins/register-components.ts
View file

@ -1,26 +1,37 @@
import * as fs from "fs";
/** /**
build registry of custom elements build registry of custom elements
*/ */
export default defineNitroPlugin(async () => { export default defineNitroPlugin(async () => {
console.log("Building registry of custom elements..."); console.log("Building registry of custom elements...");
useStorage() const rawKeys = await useStorage().getKeys("/assets/components");
.getKeys("/assets/components") const keys = rawKeys.map((key) => key.replace("assets:components:", ""));
.then((keys) => { console.log("Found components:", keys);
keys.forEach((key) => { const imports = keys.map((key, index) => {
const name = key return `import C${index} from "/components/${key}"`;
.replace("assets:components:", "") });
.replace(".ts", "")
.replace(".js", "");
const constructor = name
.split("-")
.map((word) => capitalizeFirstLetter(word))
.join("");
useStorage().setItem(`registry:${name}`, constructor); const registryObject = `
console.log(`> ${name}, ${constructor}`); 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) { function capitalizeFirstLetter(string) {

13
public/_registry.js
View file

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

1
src/pages/404.html Normal file
View file

@ -0,0 +1 @@
wow we can't find that

11
src/pages/about.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>top about</title>
</head>
<body>
<h1>Top Level About</h1>
</body>
</html>

2
src/pages/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Nitro</title> <title>Hello Nitro</title>
<script type="module" src="_registry.js"></script> <script type="module" src="registry.js"></script>
</head> </head>
<body> <body>
<hello-world name="Ayo" /> <hello-world name="Ayo" />