From 9e7ab6d21552dcab02ac5ae361838bf53bed837f Mon Sep 17 00:00:00 2001 From: pinnnguyen Date: Mon, 15 Jul 2024 17:23:21 +0700 Subject: [PATCH] chore: update md --- README.md | 140 +++++++++++++++++------------------------- package.json | 9 +-- playground/index.html | 2 +- playground/main.js | 3 +- src/index.ts | 14 ++--- tsconfig.json | 2 +- 6 files changed, 68 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index 2c7fff0..0f6472f 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,33 @@ -### Why Cona? +# **Cona** -- Writing a Web Component (WC) using vanilla JavaScript can be such tedious. Alternatively, popular WC libraries can be overkill and overweighted (4KB+) for creating small components like a `"Buy now" button` or a `cart listing`. +[![npm version](https://img.shields.io/npm/v/@pinjs/cona?color=yellow)](https://www.npmjs.com/package/@pinjs/cona) +[![npm downloads](https://img.shields.io/npm/dm/@pinjs/cona?color=yellow)](https://www.npmjs.com/package/@pinjs/cona) -- `Cona` simplifies the process by staying lightweight, removing unnecessary APIs, and using a simple DOM diffing algorithm. - -### Features - -- `1.3KB` gzipped. -- Simple API inspired from `Vue`. +**Web Component Nano - Simple API inspired by Vue** -# Cona +## **Table of Contents** - +- [Why Cona?](#why-cona) +- [Features](#features) +- [Usage](#usage) + - [Installation](#installation) + - [Using CDN](#using-cdn) +- [Example](#example) +- [Development](#development) -[![npm version](https://img.shields.io/npm/v/packageName?color=yellow)](https://www.npmjs.com/package/@pinjs/cona) -[![npm downloads](https://img.shields.io/npm/dm/packageName?color=yellow)](https://www.npmjs.com/package/@pinjs/cona) +## **Why Cona?** - +- Writing a Web Component (WC) using vanilla JavaScript can be tedious. Alternatively, popular WC libraries can be overkill and overweight (4KB+) for creating small components like a `"Buy now" button` or a `cart listing`. +- `Cona` simplifies the process by staying lightweight, removing unnecessary APIs, and using a simple DOM diffing algorithm. -Web Component Nano Simple API inspired from Vue +## **Features** -## Usage +- **1.3KB** gzipped. +- Simple API inspired by `Vue`. -Install package: +## **Usage** - +### **Installation** ```sh # ✨ Auto-detect @@ -43,34 +46,27 @@ pnpm install @pinjs/cona bun install @pinjs/cona ``` - -```js -import { Cona } from '@pinjs/cona'; -class MyCounterChild extends Cona {} +##Using CDN +First, add the script to the HTML file: +`````` +Then, add your component script: +``` + ``` - - -#### using `CDN` -First, add `script` to the `html` file -```html - ``` - -then, add `script` to the `html` file - -```html ``` - -### Usage - -```js +##Example +``` /* main.js */ -/* declare global style. Styles will be injected to all Cona Elements */ +/* Declare global style. Styles will be injected to all Cona Elements */ Cona.style = ` .box { background: blue; @@ -80,33 +76,33 @@ Cona.style = ` class MyCounterChild extends Cona { render(h) { - /* bind value from props */ + /* Bind value from props */ return h`
Child: ${this.props.count}
` } } class MyCounter extends Cona { setup() { - /* this method runs before mount */ + /* This method runs before mount */ - /* create component state using "this.reactive", state must be an object */ + /* Create component state using "this.reactive", state must be an object */ this.state = this.reactive({ count: 1 }); - /* only use ref for storing DOM reference */ + /* Only use ref for storing DOM reference */ this.pRef = this.ref(); - /* effect */ + /* Effect */ this.effect( - // effect value: fn -> value + // Effect value: fn -> value () => this.state.count, - // effect callback: fn(old value, new value) + // Effect callback: fn(old value, new value) (oldValue, newValue) => { console.log(oldValue, newValue) } ) /* Watch */ - this.watch( + this.watch( () => this.state.count, (newValue, oldValue) => { console.log(`Count changed from ${oldValue} to ${newValue}`); @@ -115,12 +111,12 @@ class MyCounter extends Cona { } onMounted() { - /* this method runs after mount */ + /* This method runs after mount */ console.log('Mounted'); } onUpdated() { - /* this method runs after each update. */ + /* This method runs after each update. */ console.log('Updated'); /* P tag ref */ @@ -128,24 +124,24 @@ class MyCounter extends Cona { } onUnmounted() { - /* this method runs before unmount */ + /* This method runs before unmount */ console.log('Before unmount'); } addCount() { - /* update state by redeclaring its key-value. Avoid updating the whole state. */ + /* Update state by redeclaring its key-value. Avoid updating the whole state. */ this.state.count += 1; } render(h) { - /* this method is used to render */ + /* This method is used to render */ /* JSX template alike - Must have only 1 root element - Bind state / event using value in literal string - Pass state to child element using props with 'p:' prefix - */ + */ return h`

Name: ${this.state.count}

@@ -159,42 +155,16 @@ class MyCounter extends Cona { customElements.define("my-counter", MyCounter); customElements.define("my-counter-child", MyCounterChild); ``` - -```html +``` /* index.html */ - -## Development - +``` +##Development
- -local development - -- Clone this repository -- Install latest LTS version of [Node.js](https://nodejs.org/en/) -- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` -- Install dependencies using `pnpm install` -- Run interactive tests using `pnpm dev` - +Local Development +Clone this repository +Install the latest LTS version of Node.js +Enable Corepack using corepack enable +Install dependencies using pnpm install +Run interactive tests using pnpm dev
- -## License - - - -Published under the [MIT](https://github.com/unjs/packageName/blob/main/LICENSE) license. -Made by [community](https://github.com/unjs/packageName/graphs/contributors) 💛 -

- - - - - - - - ---- - -_🤖 auto updated with [automd](https://automd.unjs.io)_ - - diff --git a/package.json b/package.json index 27f0bcc..aa68f2a 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,12 @@ "main": "./dist/index.cjs", "module": "./dist/index.mjs", "types": "./dist/index.d.ts", - "files": [ - "dist" - ], + "files": ["dist"], "scripts": { "build": "unbuild", "dev": "vite serve ./playground", - "lint": "eslint . && biome check .", - "lint:fix": "automd && eslint . --fix && biome check --apply .", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "prepack": "pnpm build", "play": "jiti playground", "release": "changelogen --release && npm publish && git push --follow-tags", @@ -37,7 +35,6 @@ "@biomejs/biome": "^1.7.2", "@types/node": "^20.12.7", "@vitest/coverage-v8": "^1.5.3", - "automd": "^0.3.7", "changelogen": "^0.5.5", "eslint": "^9.1.1", "eslint-config-unjs": "^0.3.0-rc.7", diff --git a/playground/index.html b/playground/index.html index a1d3164..25fd6b4 100644 --- a/playground/index.html +++ b/playground/index.html @@ -3,7 +3,7 @@ - Nho Example + Cona Example diff --git a/playground/main.js b/playground/main.js index 29dae97..cb1bef7 100644 --- a/playground/main.js +++ b/playground/main.js @@ -135,7 +135,7 @@ class AlbumList extends Cona { () => this.state.search, (newValue, oldValue) => { console.log(`Count changed from ${oldValue} to ${newValue}`); - } + }, ); } @@ -156,7 +156,6 @@ class AlbumList extends Cona { console.log("H1 Ref", this.h1Ref?.current); } - async viewAlbum(id) { const response = await fetch( `https://jsonplaceholder.typicode.com/albums/${id}/photos`, diff --git a/src/index.ts b/src/index.ts index 831b3ec..22ab7f8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -229,13 +229,13 @@ export class Cona extends HTMLElement { }); } -/** - * Watches for changes in the value returned by the getter function and invokes the callback function when a change occurs. - * @param getter - A function that returns the value to watch for changes. - * @param callback - A function that will be called when a change occurs, with the new value and the old value as arguments. - * @typeparam T - The type of the value returned by the getter function. - */ - watch(getter: () => T, callback: (newValue: T, oldValue: T) => void) { + /** + * Watches for changes in the value returned by the getter function and invokes the callback function when a change occurs. + * @param getter - A function that returns the value to watch for changes. + * @param callback - A function that will be called when a change occurs, with the new value and the old value as arguments. + * @typeparam T - The type of the value returned by the getter function. + */ + watch(getter: () => T, callback: (newValue: T, oldValue: T) => void) { this.effect(getter, (oldValue, newValue) => { callback(newValue, oldValue); }); diff --git a/tsconfig.json b/tsconfig.json index 65e9692..50585e0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "moduleResolution": "Node", "esModuleInterop": true, "strict": true, - "skipLibCheck": true, + "skipLibCheck": true }, "include": ["src"] }