From 82cf06df62570b8d68cecf5c6873551de1711914 Mon Sep 17 00:00:00 2001 From: Ayo Date: Wed, 27 Dec 2023 22:15:17 +0100 Subject: [PATCH] chore: reorder sections - move examples next to usage --- README.md | 101 +++++++++++++++++++++++++++--------------------------- 1 file changed, 50 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 6d33c77..38670ee 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,9 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c 1. [Main Exports](#main-exports) 1. [Utilities](#utilities) 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. [Prop access](#prop-access) 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. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM 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) ## Project Status @@ -100,7 +100,6 @@ import { createElement } from "web-component-base/utils/create-element.js"; ``` - ## Usage In your component class: @@ -124,7 +123,6 @@ class HelloWorld extends WebComponent { customElements.define('hello-world', HelloWorld); ``` - In your HTML page: ```html @@ -147,6 +145,53 @@ The result is a reactive UI that updates on attribute changes: UI showing feeling toward Web Components changing from SAD to EXCITED +## 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 + + + + WC Base Test + + + + + + + +``` + + + ## `template` vs `render()` 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) ``` - -## 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 - - - - WC Base Test - - - - - - - -``` - ## Life-Cycle Hooks Define behavior when certain events in the component's life cycle is triggered by providing hook methods