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

chore: update readme import instructions & examples

Browse source
This commit is contained in:
Ayo 2023-09-19 16:30:18 +02:00
parent 0880f9d188
commit 99ea3a4d57
1 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
README.md
View file

@ -14,7 +14,7 @@ The result is a reactive UI on property changes.
## Table of Contents ## Table of Contents
1. [Import via unpkg](#import-via-unpkg) 1. [Import via unpkg](#import-via-unpkg)
1. ~~[Installation via npm](#installation-via-npm)~~ - in-progress 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)
@ -23,21 +23,18 @@ The result is a reactive UI on property changes.
1. [`onChanges`](#onchanges) - every time an attribute value changes 1. [`onChanges`](#onchanges) - every time an attribute value changes
## Import via unpkg ## 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 vanilla JS 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/index.js";
// or a specific version
import WebComponent from "https://unpkg.com/web-component-base@1.6.0/index.mjs";
``` ```
## ~~Installation via npm~~ - in-progress ## Installation via npm
Still fixing the module for this to be used as a node module Usable for projects using typescript, or with bundlers, or using import maps.
<!--```bash ```bash
npm i web-component-base npm i web-component-base
```--> ```
## Usage ## Usage
@ -45,7 +42,7 @@ In your component class:
```js ```js
// HelloWorld.mjs // HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base"; import WebComponent from "https://unpkg.com/web-component-base/index.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
name = "World"; name = "World";
@ -99,7 +96,7 @@ Here is an example of using a custom element in a single .html file:
<script type="module"> <script type="module">
// import from unpkg // import from unpkg
import WebComponent from "https://unpkg.com/web-component-base"; import WebComponent from "https://unpkg.com/web-component-base/index.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
static properties = ["name"]; static properties = ["name"];
@ -134,7 +131,7 @@ Define behavior when certain events in the component's life cycle is triggered b
- best for setting up the component - best for setting up the component
```js ```js
import WebComponent from "https://unpkg.com/web-component-base"; import WebComponent from "https://unpkg.com/web-component-base/index.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document // gets called when the component is used in an HTML document
@ -169,7 +166,7 @@ class ClickableText extends WebComponent {
- triggered when an attribute value changed - triggered when an attribute value changed
```js ```js
import WebComponent from "https://unpkg.com/web-component-base"; import WebComponent from "https://unpkg.com/web-component-base/index.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
// gets called when an attribute value changes // gets called when an attribute value changes