diff --git a/README.md b/README.md index d03785b..473c60c 100644 --- a/README.md +++ b/README.md @@ -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 --- @@ -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. ## Table of Contents -1. [Vanilla JS import](#vanilla-js-import) -1. [Installation](#installation) +1. [Import via unpkg](#import-via-unpkg) +1. [Installation via npm](#installation-via-npm) 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. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized 1. [`afterViewInit`](#afterviewinit) - after the view is first initialized 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). ```js 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: ```bash @@ -39,7 +42,6 @@ npm i web-component-base ## Usage - In your component class: ```js diff --git a/package.json b/package.json index d88b213..0872484 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "web-component-base", "version": "1.6.0", - "description": "JavaScript Web Component base class", + "description": "Minimal base class for creating reactive custom elements easily", "main": "index.mjs", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"