chore: update md

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**
 
-<!-- automd:badges color=yellow -->
+- [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?**
 
-<!-- /automd -->
+- 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**
 
-<!-- automd:pm-install -->
+### **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:
+```<script src="https://unpkg.com/@pinjs/cona"></script>```
+Then, add your component script:
+```
+<script>
+  let Cona = cona.Cona;
+  class MyCounterChild extends Cona {}
+</script>
 ```
-
-
-#### using `CDN`
-First, add `script` to the `html` file
-```html
-<script src="https://unpkg.com/@pinjs/cona"></script>
 ```
-
-then, add `script` to the `html` file
-
-```html
 <script>
   let Cona = cona.Cona;
   class MyCounterChild extends Cona {}
 </script>
 ```
-
-### 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`<div>Child: ${this.props.count}</div>`
   }
 }
 
 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,37 +111,37 @@ 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 */
     console.log('P Ref', this.pRef?.current);
   }
 
   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`
       <div class="box">
         <p ref=${this.pRef}>Name: ${this.state.count}</p>
@@ -159,42 +155,16 @@ class MyCounter extends Cona {
 customElements.define("my-counter", MyCounter);
 customElements.define("my-counter-child", MyCounterChild);
 ```
-
-```html
+```
 /* index.html */
 <my-counter />
-
-## Development
-
+```
+##Development
 <details>
-
-<summary>local development</summary>
-
-- 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`
-
+<summary>Local Development</summary>
+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
 </details>
-
-## License
-
-<!-- automd:contributors license=MIT -->
-
-Published under the [MIT](https://github.com/unjs/packageName/blob/main/LICENSE) license.
-Made by [community](https://github.com/unjs/packageName/graphs/contributors) 💛
-<br><br>
-<a href="https://github.com/unjs/packageName/graphs/contributors">
-<img src="https://contrib.rocks/image?repo=unjs/packageName" />
-</a>
-
-<!-- /automd -->
-
-<!-- automd:with-automd -->
-
----
-
-_🤖 auto updated with [automd](https://automd.unjs.io)_
-
-<!-- /automd -->

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",

playground/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nho Example</title>
+    <title>Cona Example</title>
   </head>
   <body>
     <album-list></album-list>

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`,

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<T>(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<T>(getter: () => T, callback: (newValue: T, oldValue: T) => void) {
     this.effect(getter, (oldValue, newValue) => {
       callback(newValue, oldValue);
     });

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "Node",
     "esModuleInterop": true,
     "strict": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true
   },
   "include": ["src"]
 }