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

chore: update readme, package description

Browse source
This commit is contained in:
Ayo 2023-09-17 22:04:12 +02:00
parent 4d791dc3a4
commit 031d18f448
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -1,4 +1,4 @@
> **>>> TLDR;** See the [Quick Start Example](#quick-start-example) you can just copy, refactor, and modify 😉 > **>>> TLDR;** See the [Quick Start Example](#quick-start-example) you can just copy, refactor, and modify
Web Component Base Web Component Base
--- ---
@ -14,23 +14,26 @@ When you extend the `WebComponent` class for your component, you only have to de
The result is a reactive UI on property changes. The result is a reactive UI on property changes.
## Table of Contents ## Table of Contents
1. [Vanilla JS import](#vanilla-js-import) 1. [Import via unpkg](#import-via-unpkg)
1. [Installation](#installation) 1. [Installation via npm](#installation-via-npm)
1. [Usage](#usage) 1. [Usage](#usage)
1. [Quick Start Example](#quick-start-example) 😉 1. [Quick Start Example](#quick-start-example)
1. [Life-Cycle Hooks](#life-cycle-hooks) 1. [Life-Cycle Hooks](#life-cycle-hooks)
1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized 1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized
1. [`afterViewInit`](#afterviewinit) - after the view is first initialized 1. [`afterViewInit`](#afterviewinit) - after the view is first initialized
1. [`onChanges`](#onchanges) - every time an attribute value changes 1. [`onChanges`](#onchanges) - every time an attribute value changes
## Vanilla JS import ## Import via unpkg
Import using [unpkg](https://unpkg.com/web-component-base) in your component. We will use this in the rest of our [usage examples](#usage). Import using [unpkg](https://unpkg.com/web-component-base) in your component. We will use this in the rest of our [usage examples](#usage).
```js ```js
import WebComponent from "https://unpkg.com/web-component-base"; import WebComponent from "https://unpkg.com/web-component-base";
// or a specific version
import WebComponent from "https://unpkg.com/web-component-base@1.6.0/index.mjs";
``` ```
## Installation ## Installation via npm
If you have a bundler to help resolving imports: If you have a bundler to help resolving imports:
```bash ```bash
@ -39,7 +42,6 @@ npm i web-component-base
## Usage ## Usage
In your component class: In your component class:
```js ```js

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "web-component-base", "name": "web-component-base",
"version": "1.6.0", "version": "1.6.0",
"description": "JavaScript Web Component base class", "description": "Minimal base class for creating reactive custom elements easily",
"main": "index.mjs", "main": "index.mjs",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"