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

3
.gitignore vendored
View file

@ -4,4 +4,5 @@ node_modules
.cache
.output
.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
*/
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) {

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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Nitro</title>
<script type="module" src="_registry.js"></script>
<script type="module" src="registry.js"></script>
</head>
<body>
<hello-world name="Ayo" />