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

chore: initialize package; update examples

Browse source
This commit is contained in:
Ayo 2023-09-16 23:33:46 +02:00
parent f2409ab545
commit c9db257d98
7 changed files with 58 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
README.md
View file

@ -2,9 +2,18 @@
This is a base JavaScript class for creating Web Components easily.
## Installation
```bash
npm i web-component-base
```
## Usage
When you extend the 'WebComponent' class for your component, you only have to define the `template()` and `observedAttributes()`, and the UI will be reactive on attribute changes.
```js
// HelloWorld.mjs
import { WebComponent } from "./WebComponent.mjs";
export class HelloWorld extends WebComponent {
@ -17,11 +26,7 @@ export class HelloWorld extends WebComponent {
get template() {
return `
<h1>Hello ${this.name}${
this.emotion === 'sad'
? '. 😭'
: '! 🙌'
}</h1>`
<h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
}
}
```
@ -29,6 +34,14 @@ export class HelloWorld extends WebComponent {
Then changes in the attributes observed will cause the UI to render.
```html
<head>
...
<script type="module">
import {HelloWorld} from './HelloWorld.mjs';
customElements.define('hello-world', HelloWorld);
</script>
</head>
<body>
<hello-world name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
@ -36,6 +49,7 @@ Then changes in the attributes observed will cause the UI to render.
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
</body>
```
<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="./assets/wc-base-demo.gif" width="250" />

0
components/WebComponent.mjs → WebComponent.mjs
View file

2
components/HelloWorld.mjs → demo/HelloWorld.mjs
View file

@ -1,5 +1,5 @@
// @ts-check
import { WebComponent } from "./WebComponent.mjs";
import WebComponent from "../index.mjs";
export class HelloWorld extends WebComponent {
name = "World";

5
index.html → demo/index.html
View file

@ -4,7 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World WC</title>
<script type="module" src="./index.js"></script>
<script type="module">
import {HelloWorld} from './HelloWorld.mjs';
customElements.define('hello-world', HelloWorld);
</script>
</head>
<body>
<hello-world name="Ayo" emotion="sad" />

5
index.js
View file

@ -1,5 +0,0 @@
// @ts-check
import { HelloWorld } from './components/HelloWorld.mjs'
customElements.define('hello-world', HelloWorld)

3
index.mjs Normal file
View file

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

25
package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "web-component-base",
"version": "1.0.0",
"description": "JavaScript Web Component base class",
"main": "index.mjs",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.sr.ht/~ayoayco/web-component-base.git"
},
"keywords": [
"web components",
"web component",
"custom elements",
"custom element"
],
"author": "Ayo Ayco",
"license": "MIT",
"bugs": {
"url": "https://todo.sr.ht/~ayoayco/web-component-base"
},
"homepage": "https://git.sr.ht/~ayoayco/web-component-base#readme"
}