From c9db257d988909f306c41faa659c602776baf927 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sat, 16 Sep 2023 23:33:46 +0200 Subject: [PATCH] chore: initialize package; update examples --- README.md | 36 +++++++++++++------ .../WebComponent.mjs => WebComponent.mjs | 0 {components => demo}/HelloWorld.mjs | 2 +- index.html => demo/index.html | 5 ++- index.js | 5 --- index.mjs | 3 ++ package.json | 25 +++++++++++++ 7 files changed, 58 insertions(+), 18 deletions(-) rename components/WebComponent.mjs => WebComponent.mjs (100%) rename {components => demo}/HelloWorld.mjs (87%) rename index.html => demo/index.html (74%) delete mode 100644 index.js create mode 100644 index.mjs create mode 100644 package.json diff --git a/README.md b/README.md index 449cad1..2c15be1 100644 --- a/README.md +++ b/README.md @@ -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 ` -

Hello ${this.name}${ - this.emotion === 'sad' - ? '. 😭' - : '! 🙌' - }

` +

Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}

`; } } ``` @@ -29,13 +34,22 @@ export class HelloWorld extends WebComponent { Then changes in the attributes observed will cause the UI to render. ```html - - + + + + + }, 2500) + + ``` UI showing feeling toward Web Components changing from SAD to EXCITED diff --git a/components/WebComponent.mjs b/WebComponent.mjs similarity index 100% rename from components/WebComponent.mjs rename to WebComponent.mjs diff --git a/components/HelloWorld.mjs b/demo/HelloWorld.mjs similarity index 87% rename from components/HelloWorld.mjs rename to demo/HelloWorld.mjs index 1c58310..e02eef2 100644 --- a/components/HelloWorld.mjs +++ b/demo/HelloWorld.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent } from "./WebComponent.mjs"; +import WebComponent from "../index.mjs"; export class HelloWorld extends WebComponent { name = "World"; diff --git a/index.html b/demo/index.html similarity index 74% rename from index.html rename to demo/index.html index 7d0d3bc..089c4c5 100644 --- a/index.html +++ b/demo/index.html @@ -4,7 +4,10 @@ Hello World WC - + diff --git a/index.js b/index.js deleted file mode 100644 index f3ba126..0000000 --- a/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// @ts-check - -import { HelloWorld } from './components/HelloWorld.mjs' - -customElements.define('hello-world', HelloWorld) \ No newline at end of file diff --git a/index.mjs b/index.mjs new file mode 100644 index 0000000..fe0312e --- /dev/null +++ b/index.mjs @@ -0,0 +1,3 @@ +import { WebComponent } from './WebComponent.mjs'; + +export default WebComponent; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..9467719 --- /dev/null +++ b/package.json @@ -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" +}