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

chore: reorder sections

Browse source 
- move examples next to usage
This commit is contained in:
Ayo 2023-12-27 22:15:17 +01:00
parent 41b4a32673
commit 82cf06df62
1 changed files with 50 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
README.md
View file

@ -22,6 +22,9 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
1. [Main Exports](#main-exports) 1. [Main Exports](#main-exports)
1. [Utilities](#utilities) 1. [Utilities](#utilities)
1. [Usage](#usage) 1. [Usage](#usage)
1. [Examples](#Examples)
1. [To-Do App](#1-to-do-app)
1. [Single HTML file](#2-single-html-file-example)
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. [Alternatives](#alternatives)
@ -33,9 +36,6 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
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. [`onChanges`](#onchanges) - every time an attribute value changes
1. [Examples](#Examples)
1. [To-Do App](#1-to-do-app)
1. [Single HTML file](#2-single-html-file-example)
1. [Library Size](#library-size) 1. [Library Size](#library-size)
## Project Status ## Project Status
@ -100,7 +100,6 @@ import { createElement } from "web-component-base/utils/create-element.js";
``` ```
## Usage ## Usage
In your component class: In your component class:
@ -124,7 +123,6 @@ class HelloWorld extends WebComponent {
customElements.define('hello-world', HelloWorld); customElements.define('hello-world', HelloWorld);
``` ```
In your HTML page: In your HTML page:
```html ```html
@ -147,6 +145,53 @@ The result is a reactive UI that updates on attribute changes:
<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" /> <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
## Examples
### 1. To-Do App
A simple app that allows adding / completing tasks:
[View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/GRegyVe?editors=1010)
![To-Do App screen recording](https://raw.githubusercontent.com/ayoayco/web-component-base/main/assets/todo-app.gif)
### 2. Single HTML file Example
Here is an example of using a custom element in a single .html file. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WC Base Test</title>
<script type="module">
import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js";
class HelloWorld extends WebComponent {
static props = {
myName: 'World'
}
get template() {
return `<h1>Hello ${this.props.myName}!</h1>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
</head>
<body>
<hello-world my-name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.props.myName = 'Ayo zzzZzzz';
}, 2500);
</script>
</body>
</html>
```
## `template` vs `render()` ## `template` vs `render()`
This mental model attempts to reduce the cognitive complexity of authoring components: This mental model attempts to reduce the cognitive complexity of authoring components:
@ -275,52 +320,6 @@ class MyQuote extends HTMLElement {
customElements.define('my-quote', MyQuote) customElements.define('my-quote', MyQuote)
``` ```
## Examples
### 1. To-Do App
A simple app that allows adding / completing tasks:
[View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/GRegyVe?editors=1010)
![To-Do App screen recording](https://raw.githubusercontent.com/ayoayco/web-component-base/main/assets/todo-app.gif)
### 2. Single HTML file Example
Here is an example of using a custom element in a single .html file. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WC Base Test</title>
<script type="module">
import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js";
class HelloWorld extends WebComponent {
static props = {
myName: 'World'
}
get template() {
return `<h1>Hello ${this.props.myName}!</h1>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
</head>
<body>
<hello-world my-name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.props.myName = 'Ayo zzzZzzz';
}, 2500);
</script>
</body>
</html>
```
## Life-Cycle Hooks ## Life-Cycle Hooks
Define behavior when certain events in the component's life cycle is triggered by providing hook methods Define behavior when certain events in the component's life cycle is triggered by providing hook methods