From 031d18f44852ab2479114eb8c13afb64fcfffd85 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 17 Sep 2023 22:04:12 +0200 Subject: [PATCH] chore: update readme, package description --- README.md | 16 +++++++++------- package.json | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) 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"