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

2
demo/SimpleText.mjs
View file

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

9
demo/index.html
View file

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

1
package.json
View file

@ -3,6 +3,7 @@
"version": "1.6.15", "version": "1.6.15",
"description": "Minimal base class for creating reactive custom elements easily", "description": "Minimal base class for creating reactive custom elements easily",
"main": "index.d.ts", "main": "index.d.ts",
"type": "module",
"scripts": { "scripts": {
"start": "npx simple-server .", "start": "npx simple-server .",
"build": "tsc --allowJs src/* --outDir dist --declaration --emitDeclarationOnly", "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 * Triggered after view is initialized
* @returns void
*/ */
afterViewInit() {} afterViewInit() {}
/** /**
* Triggered when the component is connected to the DOM * Triggered when the component is connected to the DOM
* @returns void
*/ */
onInit() {} onInit() {}
/** /**
* Triggered when the component is disconnected from the DOM * Triggered when the component is disconnected from the DOM
* @returns void
*/ */
onDestroy() {} onDestroy() {}
/** /**
* @param {{'property': string, 'previousValue': any, 'currentValue': any}} changes * @param {{'property': string, 'previousValue': any, 'currentValue': any}} changes
* @returns void
*/ */
onChanges(changes) {} 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;