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

feat: make package type module; rename to .mjs

Browse source
This commit is contained in:
Ayo 2023-10-19 18:10:10 +02:00
parent a250387246
commit c360bd1b7f
7 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
demo/HelloWorld.mjs
View file

@ -1,6 +1,4 @@
// @ts-check
import WebComponent from "../src/index.js";
import WebComponent from "../src/index.mjs";
export class HelloWorld extends WebComponent {
name = "World";
@ -9,7 +7,10 @@ export class HelloWorld extends WebComponent {
static properties = ["name", "emotion"];
onInit() {
console.log("onInit", this.querySelector("h1"));
let count = 0;
this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x!`);
};
}
afterViewInit() {
@ -22,9 +23,9 @@ export class HelloWorld extends WebComponent {
}
get template() {
return `<h1>Hello ${this.name}${
return `<button id="btn">Hello ${this.name}${
this.emotion === "sad" ? ". 😭" : "! 🙌"
}</h1>`;
}</button>`;
}
}

2
demo/SimpleText.mjs
View file

@ -1,6 +1,6 @@
// @ts-check
import WebComponent from "../src/index.js";
import { WebComponent } from "../src/WebComponent.mjs";
class SimpleText extends WebComponent {
clickCallback() {

7
demo/index.html
View file

@ -8,8 +8,10 @@
<script type="module" src="SimpleText.mjs"></script>
</head>
<body>
<hello-world name="Ayo" emotion="sad"></hello-world>
<hello-world id="hey" name="Ayo" emotion="sad"></hello-world>
<p>
<simple-text greeting="hey"></simple-text>
</p>
<script type="module">
const helloWorld = document.querySelector("hello-world");
@ -17,9 +19,6 @@
helloWorld.setAttribute("emotion", "excited");
}, 2500);
helloWorld.addEventListener("click", () => {
helloWorld.setAttribute("name", "Clicked");
});
const clickableText = document.querySelector("simple-text");
setTimeout(() => {
clickableText.remove();

1
package.json
View file

@ -3,6 +3,7 @@
"version": "1.6.15",
"description": "Minimal base class for creating reactive custom elements easily",
"main": "index.d.ts",
"type": "module",
"scripts": {
"start": "npx simple-server .",
"build": "tsc --allowJs src/* --outDir dist --declaration --emitDeclarationOnly",

4
src/WebComponent.js → src/WebComponent.mjs
View file

@ -19,21 +19,25 @@ export class WebComponent extends HTMLElement {
/**
* Triggered after view is initialized
* @returns void
*/
afterViewInit() {}
/**
* Triggered when the component is connected to the DOM
* @returns void
*/
onInit() {}
/**
* Triggered when the component is disconnected from the DOM
* @returns void
*/
onDestroy() {}
/**
* @param {{'property': string, 'previousValue': any, 'currentValue': any}} changes
* @returns void
*/
onChanges(changes) {}

2
src/index.js
View file

@ -1,2 +0,0 @@
import { WebComponent } from "./WebComponent.js";
export default WebComponent;

3
src/index.mjs Normal file
View file

@ -0,0 +1,3 @@
// @ts-check
import { WebComponent } from "./WebComponent.mjs";
export default WebComponent;