feat: generate .output for custom elements
This commit is contained in:
Ayo
parent
781a7384d3
commit
bd66b1ccae
6 changed files with 32 additions and 42 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -5,4 +5,3 @@ node_modules
|
||||||
.output
|
.output
|
||||||
.env
|
.env
|
||||||
dist
|
dist
|
||||||
public/registry.js
|
|
||||||
|
|
|
||||||
11
plugins/1-copy-components.ts
Normal file
11
plugins/1-copy-components.ts
Normal 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());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,7 +1,4 @@
|
||||||
import * as fs from "fs";
|
import * as fs from "fs";
|
||||||
/**
|
|
||||||
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...");
|
||||||
|
|
@ -9,31 +6,21 @@ export default defineNitroPlugin(async () => {
|
||||||
const keys = rawKeys.map((key) => key.replace("assets:components:", ""));
|
const keys = rawKeys.map((key) => key.replace("assets:components:", ""));
|
||||||
console.log("Found components:", keys);
|
console.log("Found components:", keys);
|
||||||
const imports = keys.map((key, index) => {
|
const imports = keys.map((key, index) => {
|
||||||
return `import C${index} from "/components/${key}"`;
|
return `import C${index} from "./${key}"`;
|
||||||
});
|
});
|
||||||
|
|
||||||
const registryObject = `
|
const registryObject = `const registry = {
|
||||||
const registry = {
|
|
||||||
${keys
|
${keys
|
||||||
.map((key, index) => {
|
.map((key, index) => {
|
||||||
const name = key.replace(".js", "").replace(".ts", "");
|
const name = key.replace(".js", "").replace(".ts", "");
|
||||||
return `"${name}": C${index}`;
|
return `"${name}": C${index}`;
|
||||||
})
|
})
|
||||||
.join(",")}
|
.join(",")}}`;
|
||||||
}`;
|
|
||||||
|
|
||||||
const customElementsDefine = `
|
const customElementsDefine = `Object.keys(registry).forEach((key) => {if(window?.hasOwnProperty("customElements"))customElements.define(key, registry[key]);})`;
|
||||||
Object.keys(registry).forEach((key) => {
|
|
||||||
if (window?.hasOwnProperty("customElements"))
|
|
||||||
customElements.define(key, registry[key]);
|
|
||||||
})`;
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
"./public/registry.js",
|
"./public/.output/registry.js",
|
||||||
[...imports, registryObject, customElementsDefine].join(";")
|
[...imports, registryObject, customElementsDefine].join(";")
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
function capitalizeFirstLetter(string) {
|
|
||||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
||||||
}
|
|
||||||
|
|
@ -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
10
src/components/clickable-text.js
Normal 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>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,10 +4,14 @@
|
||||||
<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="./.output/registry.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<hello-world name="Ayo" />
|
<div>
|
||||||
|
<hello-world name="Ayo"></hello-world>
|
||||||
|
</div>
|
||||||
|
<span>some text</span>
|
||||||
|
<clickable-text></clickable-text>
|
||||||
<script>
|
<script>
|
||||||
const helloWorld = document.querySelector("hello-world");
|
const helloWorld = document.querySelector("hello-world");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue