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

feat: generate .output for custom elements

Browse source
This commit is contained in:
Ayo 2023-10-08 02:21:20 +02:00
parent 781a7384d3
commit bd66b1ccae
6 changed files with 32 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

11
plugins/1-copy-components.ts Normal file
View file

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

23
plugins/register-components.ts → plugins/2-register-components.ts
View file

@ -1,7 +1,4 @@
import * as fs from "fs";
/**
build registry of custom elements
*/
export default defineNitroPlugin(async () => {
console.log("Building registry of custom elements...");
@ -9,31 +6,21 @@ export default defineNitroPlugin(async () => {
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}"`;
return `import C${index} from "./${key}"`;
});
const registryObject = `
const registry = {
const registryObject = `const registry = {
${keys
.map((key, index) => {
const name = key.replace(".js", "").replace(".ts", "");
return `"${name}": C${index}`;
})
.join(",")}
}`;
.join(",")}}`;
const customElementsDefine = `
Object.keys(registry).forEach((key) => {
if (window?.hasOwnProperty("customElements"))
customElements.define(key, registry[key]);
})`;
const customElementsDefine = `Object.keys(registry).forEach((key) => {if(window?.hasOwnProperty("customElements"))customElements.define(key, registry[key]);})`;
fs.writeFileSync(
"./public/registry.js",
"./public/.output/registry.js",
[...imports, registryObject, customElementsDefine].join(";")
);
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

21
public/components/hello-world.js
View file

@ -1,21 +0,0 @@
import WebComponent from "https://unpkg.com/web-component-base/index.js";
export default class HelloWorld extends WebComponent {
name = "";
static properties = ["name"];
onInit() {
console.log(`Greeting for ${this.name} initialized`);
let count = 0;
this.onclick = () => {
console.log("Clicked!");
this.name = `I was clicked ${++count} times`;
this.render();
};
this.setAttribute("title", "Click me please");
}
get template() {
return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
}
}

10
src/components/clickable-text.js Normal file
View file

@ -0,0 +1,10 @@
import WebComponent from "https://unpkg.com/web-component-base/index.js";
export default class ClickableText extends WebComponent {
onInit() {
this.onclick = () => alert("Thank you for clicking the text!");
}
get template() {
return `<span style="cursor:pointer">Click me too!</span>`;
}
}

8
src/pages/index.html
View file

@ -4,10 +4,14 @@
<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="./.output/registry.js"></script>
</head>
<body>
<hello-world name="Ayo" />
<div>
<hello-world name="Ayo"></hello-world>
</div>
<span>some text</span>
<clickable-text></clickable-text>
<script>
const helloWorld = document.querySelector("hello-world");
setTimeout(() => {