diff --git a/README.md b/README.md
index 64b0ddd..85a6e17 100644
--- a/README.md
+++ b/README.md
@@ -5,46 +5,53 @@
[](https://www.npmjs.com/package/web-component-base)
[](https://bundlephobia.com/package/web-component-base)
-> A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily
+🤷♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨
When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render.
The result is a reactive UI on property changes. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
-
-Table of Contents
-
- - Import via unpkg
- - Installation via npm
- - Usage
- - `template` vs `render()`
- - Prop access
-
- - Alternatives
-
-
- - Quick Start Example
- - Life-Cycle Hooks
-
- - `onInit` - the component is connected to the DOM, before view is initialized
- - `afterViewInit` - after the view is first initialized
- - `onDestroy` - the component is disconnected from the DOM
- - `onChanges` - every time an attribute value changes
-
-
- - Library Size
-
-
+## Features
-## Import via unpkg
+- A props API that synchronizes your components' property values and HTML attributes
+- Sensible life-cycle hooks that you understand and remember
+- An html tagged templates powered by preact's html/mini
+- Attach functions as "side effects" that gets triggered on property value changes with attachEffect (example)
+- Provided out-of-the-box with McFly, a powerful no-framework framework
+
+## Table of Contents
+
+1. [Installation](#installation)
+ 1. [Import via unpkg](#import-via-unpkg)
+ 2. [Installation via npm](#installation-via-npm)
+3. [Usage](#usage)
+4. [`template` vs `render()`](#template-vs-render)
+5. [Prop access](#prop-access)
+ 1. [Alternatives](#alternatives)
+6. [Quick Start Example](#quick-start-example)
+7. [Life-Cycle Hooks](#life-cycle-hooks)
+ 1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized
+ 2. [`afterViewInit`](#afterviewinit) - after the view is first initialized
+ 3. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM
+ 4. [`onChanges`](#onchanges) - every time an attribute value changes
+8. [Library Size](#library-size)
+
+
+## Installation
+
+The library is distributed as complete ESM modules, published on [NPM](https://ayco.io/n/web-component-base). Please file an issue in our [issue tracker](https://ayco.io/gh/web-component-base/issues) for problems or requests regarding our distribution.
+
+### Import via unpkg (no bundlers needed!)
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).
+Please check
+
```js
-import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
+import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js";
```
-## Installation via npm
-Usable for projects with bundlers or using import maps.
+### Installation via npm
+Usable for projects with bundlers or using import maps pointing to to the specific files in downloaded in your `node_modules/web-component-base`.
```bash
npm i web-component-base
@@ -56,13 +63,17 @@ In your component class:
```js
// HelloWorld.mjs
-import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
+import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js";
class HelloWorld extends WebComponent {
- static properties = ["my-name", "emotion"];
+ static props ={
+ myName: 'World',
+ emotion: 'sad'
+ }
get template() {
return `
- Hello ${this.props.myName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}
`;
+ Hello ${this.props.myName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}
+ `;
}
}
@@ -108,13 +119,11 @@ This mental model attempts to reduce the cognitive complexity of authoring compo
```js
class HelloWorld extends WebComponent {
- static properties = ["my-prop"];
- onInit() {
- let count = 0;
- this.onclick = () => this.props.myProp = `${++count}`
+ static props = {
+ myProp: 'World'
}
get template() {
- return `
+ return html`
Hello ${this.props.myProp}
`;
}
@@ -133,7 +142,7 @@ this.props.myName = 'hello'
this.setAttribute('my-name','hello');
```
-Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static properties = ['my-name']`;
+Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static props`;
> [!NOTE]
> The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
@@ -155,10 +164,12 @@ Here is an example of using a custom element in a single .html file.
WC Base Test
-
-
-
-
-
-