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

chore: add library size section

Browse source
This commit is contained in:
Ayo 2023-11-18 23:27:01 +01:00
parent 74e7c16335
commit 12acf83c8c
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
README.md
View file

@ -1,4 +1,3 @@
> **>>> TL;DR:** This provides a zero-dependency, ~760 Bytes (when minified & brotlied), JS base class that aims to reduce the complexity of creating reactive custom elements. [Skip to the Quick Start Example](#quick-start-example)
Web Component Base Web Component Base
--- ---
@ -6,6 +5,7 @@ Web Component Base
[![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://www.npmjs.com/package/web-component-base) [![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://www.npmjs.com/package/web-component-base)
[![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://www.npmjs.com/package/web-component-base) [![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://www.npmjs.com/package/web-component-base)
This provides a zero-dependency, ~760 Bytes (minified & brotlied), 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. 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.
@ -17,12 +17,14 @@ The result is a reactive UI on property changes.
1. [Usage](#usage) 1. [Usage](#usage)
1. [`template` vs `render()`](#template-vs-render) 1. [`template` vs `render()`](#template-vs-render)
1. [Prop access](#prop-access) 1. [Prop access](#prop-access)
1. [Alternatives](#alternatives)
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. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM 1. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM
1. [`onChanges`](#onchanges) - every time an attribute value changes 1. [`oChanges`](#onchanges) - every time an attribute value changes
1. [Library Size](#library-size)
## Import via unpkg ## Import via unpkg
@ -147,18 +149,17 @@ Here is an example of using a custom element in a single .html file:
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC Base Test</title> <title>WC Base Test</title>
<script type="module"> <script type="module">
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base/index.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
static properties = ["my-name"]; static properties = ["my-name"];
get template() { get template() {
return `<h1>Hello ${this.props.myName ?? 'World'}!</h1>`; return `<h1>Hello ${this.props.myName}!</h1>`;
} }
} }
customElements.define("hello-world", HelloWorld); customElements.define("hello-world", HelloWorld);
</script> </script>
</head> </head>
@ -265,3 +266,7 @@ class ClickableText extends WebComponent {
} }
} }
``` ```
## Library Size
Running [size-limit](https://npmjs.com/package/@size-limit/preset-small-lib) reports the library size as around 767 B, minified and brotlied. Read more about how to [minify and compress payload with brotli](https://web.dev/articles/codelab-text-compression-brotli) for your app.