@htmlplus/element 0.8.6 → 1.1.0

package/README.md

@@ -1,197 +1,254 @@
 # Create Custom HTML Element
 
-A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by [Web Component](https://mdn.io/using-custom-elements).
+A powerful tool for building a scalable, reusable, fast, and lightweight `UI Component Library` for any web technologies, powered by [Custom Elements](https://mdn.io/using-custom-elements).
 
-## Table of content
+## Table Of Content
 
-- [Install](#install)
-- [Start](#start)
-- [First Element](#FirstElement)
-- [Styles](#Styles)
-- [Development Environment](#DevelopmentEnvironment)
+- [Features](#features)
+- [Quick Start](#quick-start)
+- [First Element](#first-element)
 - [Decorators](#decorators)
-- [Helpers](#helpers)
+- [Utilities](#utilities)
+- [JSX](#jsx)
 - [Lifecycles](#lifecycles)
-- [Services](#services)
-- [Tag Name Configuration](#TagNameConfiguration)
-- [Compiler](#compiler)
+- [Bundlers](#bundlers)
+- [Transformer](#transformer)
 
-## Install
+## Features
 
-Choose one of the commands.
+- **Plugin-Based**: Facilitates the seamless development of diverse plugins and the customization of outputs to meet specific requirements
+- **Built-In Plugins**: Provides a variety of plugins that cater to different requirements.
+- **Global Config**: Provides the ability to define global configs for all elements.
+- **Typings**: Creates TypeScript types for seamless element usage across different environments.
+- **TypeScript + JSX**: Using two powerful tools, TypeScript and JSX, to create elements.
+- **Built-In Utilities**: Provides a set of JavaScript utility functions used across multiple elements.
+- **Secure**: Restricts unwanted access to internal properties and methods.
+- **Style File Recognition**: Identifies and links the relevant style file to the element.
+- **Tag Name Recognition**: Generates tag name from the class name.
+- **Clean Syntax**: Uses a minimal amount of code to achieve the same functionality, making the code easier to read, understand, and maintain.
+- **Attribute Over Class**: Uses HTML attributes instead of HTML class names to keep the size of the start tag short, making it more readable and preventing the DOM from getting dirty.
 
-```bash
-# with npm
-npm init @htmlplus/element@latest
+## Quick Start
 
-# with yarn
-yarn create @htmlplus/element
+Before proceeding, ensure you have the latest LTS version of [Node.js](https://nodejs.org/en/download) installed on your system.
 
-# with pnpm
-pnpm create @htmlplus/element
+1- Create a new project
+
+```bash
+npm init @htmlplus/element@latest
 ```
 
-## Start
+2- Navigate to the project directory
 
 ```bash
 cd htmlplus-project
 ```
 
-To start the project, run:
+3- Install the dependencies
 
 ```bash
-# with npm
 npm i
-npm start
+```
 
-# with yarn
-yarn install
-yarn start
+4- Start the project
 
-# with pnpm
-pnpm install
-pnpm start
+```bash
+npm start
 ```
 
 ## First Element
 
-Element is based on classes, so all components are based on `decorator`.
-The decorator converts the next component code based on it's properties during the build.
+An example demonstrating the implementation and usage of an element.
+
+Each element is stored in a file such as `my-counter.tsx`.
 
 ```tsx
-// my-element.tsx
+import { Element, State } from '@htmlplus/element';
 
-import { Element } from '@htmlplus/element';
+@Element()
+export class MyCounter {
+  @State()
+  value: number = 0;
 
-@Element('my-element')
-export class MyElement {
   render() {
-    return <h1>Hi Everybody</h1>
+    return (
+      <host onClick={() => this.value++}>
+        Count is {this.value}
+      </host>
+    )
   }
 }
 ```
 
-The result of this component after build is provide `my-element` web component.
-
-```html
-<my-element></my-element>
-```
-
-## Styles
-
-The element automatically adds a same name style file to this component. Create `my-element.scss` file for style.
-
-```scss
-// my-element.scss
+The element's style is stored in a file such as `my-counter.css`, which shares the same name as the element file `my-counter.tsx`.
 
+```css
 :host {
-  display: block;
-  background-color: red;
-  font-size: 2rem;
+  display: inline-block;
+  border: 1px solid black;
+  color: black;
+  padding: 1em;
+  cursor: pointer;
 }
 ```
 
-## Development Environment
-
-For run any of the component, you must write element name tag into the `index.html`
+To execute the element, include it in the `index.html` file.
 
 ```html
-<!-- index.html -->
-
 <body>
-  <my-element></my-element>
+  <my-counter></my-counter>
 </body>
 ```
 
 ## Decorators
 
-With the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that require additional features to support annotating or modifying classes and class members. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members [More information](https://www.typescriptlang.org/docs/handbook/decorators.html).
+Decorators can greatly enhance code maintainability, improving efficiency, readability, and reusability.
 
 <details>
-  <summary>Element</summary>
+  <summary>Bind</summary>
+
+Used to bind a method of a class to the current context, making it easier to reference `this` within the method.
+
+In the `my-counter.tsx` file.
+
+```tsx
+import { Bind, Element, State } from '@htmlplus/element';
+
+@Element()
+export class MyCounter {
+  @State()
+  value: number = 0;
+
+  @Bind()
+  onClick() {
+    this.value++;
+  }
+
+  render() {
+    return (
+      <host onClick={this.onClick}>
+        Count is {this.value}
+      </host>
+    )
+  }
+}
+```
 
-Any component must be decorated with `@Element()` decorator. It also makes your web component tag name.
+In the `index.html` file.
 
-Options:
+```html
+<my-counter></my-counter>
+```
+
+</details>
 
-- **name**: `String` tag name
+<details>
+  <summary>Direction</summary>
+  
+Indicates whether the [Direction](https://mdn.io/css-direction) of the element is `Right-To-Left` or `Left-To-Right`.
+
+In the `my-element.tsx` file.
 
 ```tsx
-import { Element } from '@htmlplus/element';
+import { Direction, Element } from '@htmlplus/element';
 
-@Element('my-element')
+@Element()
 export class MyElement {
-  render() {
-    return <h1>Hi Everybody</h1>
+  @Direction()
+  direction!: 'ltr' | 'rtl';
+
+  render()  {
+    return (
+      <div>
+        The direction of the element is
+        <u>
+          {this.direction}
+        </u>
+      </div>
+    )
   }
 }
 ```
 
+In the `index.html` file.
+
 ```html
-<my-element></my-element>
+<body dir="rtl">
+  <my-element></my-element>
+</body>
 ```
 
 </details>
 
 <details>
-  <summary>Property</summary>
+  <summary>Element</summary>
 
-Property is decorated all the component properties for exposed attributes.
+The class marked with this decorator is considered a [Custom Element](https://mdn.io/using-custom-elements), and its name, in kebab-case, serves as the element name.
 
-Options:
+> It is important to note that each file can only contain one class with this condition.
 
-- **attribute**: TODO
-- **reflect**: `Boolean` For watch mode, when you want to be notified of the attribute change.
+In the `say-hello.tsx` file.
 
 ```tsx
-import { Element, Property } from '@htmlplus/element';
+import { Element } from '@htmlplus/element';
 
 @Element()
-export class SayGreeting {
-
-  @Property()
-  name?: string = 'Simon';
-
+export class SayHello {
   render() {
-    return <h1>Hi {this.name}</h1>
+    return <div>Hello World</div>
   }
 }
 ```
 
-```html
-<say-greeting name="Jan" id="greeting"></say-greeting>
+In the `index.html` file.
 
-<script>
-  document.getElementById('greeting').name; // Jan
-</script>
+```html
+<say-hello></say-hello>
 ```
 
 </details>
 
 <details>
   <summary>Event</summary>
+  
+Provides the capability to dispatch a [CustomEvent](https://mdn.io/custom-event) from an element.
 
-Components can emit data and events using the Event decorator.
-
-Options:
+Parameters:
 
-- **name**: A `String` custom event name to override the default.
-- **bubbles**: A `Boolean` indicating whether the event bubbles up through the DOM or not. default is `false`.
-- **cancelable**: A `Boolean` indicating whether the event is cancelable. default is `false`.
-- **composed**: A `Boolean` value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is `false`.
+- `options` (Optional)
+  <br />
+  An object that configures [options](https://developer.mozilla.org/docs/Web/API/Event/EventEvent#options) for the event dispatcher.
+  <br />
+  <br />
+  - `bubbles` (Optional)
+    <br />
+    A boolean value indicating whether the event bubbles. The default is `false`.
+    <br />
+    <br />
+  - `cancelable` (Optional)
+    <br />
+    A boolean value indicating whether the event can be cancelled. The default is `false`.
+    <br />
+    <br />
+  - `composed` (Optional)
+    <br />
+    A boolean value indicating whether the event will trigger listeners outside of a shadow root (see [Event.composed](https://mdn.io/event-composed) for more details). The default is `false`.
+    <br />
+    <br />
+
+In the `my-button.tsx` file.
 
 ```tsx
 import { Element, Event, EventEmitter } from '@htmlplus/element';
 
 @Element()
 export class MyButton {
-
   @Event()
-  clicked!: EventEmitter;
+  myClick!: EventEmitter<string>;
 
   render() {
     return (
-      <button onClick={() => this.clicked()}>
+      <button onClick={() => this.myClick("It's a message form MyButton!")}>
         <slot />
       </button>
     )
@@ -199,164 +256,283 @@ export class MyButton {
 }
 ```
 
+In the `index.html` file.
+
 ```html
 <my-button id="button">Button</my-button>
 
 <script>
-  document.getElementById('button').addEventListener('clicked', () => alert('Clicked!'));
+  document
+    .getElementById('button')
+    .addEventListener('my-click', (event) => {
+      alert(event.detail);
+    });
 </script>
 ```
 
 </details>
 
 <details>
-  <summary>Method</summary>
+  <summary>Host</summary>
 
-Ths `@Method` decorator can be called directly from the element. It can be called from the outside.
+Indicates the host of the element.
+
+In the `my-element.tsx` file.
 
 ```tsx
-import { Element, Method, State } from '@htmlplus/element';
+import { Element, Host } from '@htmlplus/element';
 
 @Element()
-export class MyCounter {
+export class MyElement {
+  @Host()
+  host!: HTMLElement;
 
-  @State()
-  counter?: number;
+  get isSame() {
+    return this.host == document.querySelector('my-element');
+  }
 
-  @Method()
-  increase() {
-    this.counter++;
+  connectedCallback() {
+    console.log('Is Same: ' + this.isSame);
   }
+}
+```
 
-  render() {
+In the `index.html` file.
+
+```html
+<my-element></my-element>
+```
+
+</details>
+
+<details>
+  <summary>IsRTL</summary>
+
+Indicates whether the direction of the element is `Right-To-Left` or not.
+
+In the `my-element.tsx` file.
+
+```tsx
+import { Element, IsRTL } from '@htmlplus/element';
+
+@Element()
+export class MyElement {
+  @IsRTL()
+  isRTL!: boolean;
+
+  render()  {
     return (
-      <button>
-        {this.counter}
-      </button>
+      <div>
+        The direction of the element is
+        <u>
+          {this.isRTL ? 'rtl' : 'ltr'}
+        </u>
+      </div>
     )
   }
 }
 ```
 
-```html
-<my-counter id="counter"></my-counter>
+In the `index.html` file.
 
-<script>
-  document.getElementById('counter').increase();
-</script>
+```html
+<body dir="rtl">
+  <my-element></my-element>
+</body>
 ```
 
 </details>
 
 <details>
-  <summary>Attributes</summary>
+  <summary>Listen</summary>
 
-TODO
+Will be called whenever the specified event is delivered to the target [More](https://mdn.io/add-event-listener).
+
+Parameters:
+
+- `type` (Required)
+  <br />
+  A case-sensitive string representing the [Event Type](https://mdn.io/events) to listen for.
+  <br />
+  <br />
+- `options` (Optional)
+  <br />
+  An object that configures [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options) for the event listener.
+  <br />
+  <br />
+  - `capture` (Optional)
+    <br />
+    A boolean value indicating that events of this type will be dispatched to the registered `listener` before being dispatched to any `EventTarget` beneath it in the DOM tree. If not specified, defaults to `false`.
+    <br />
+    <br />
+  - `once` (Optional)
+    <br />
+    A boolean value indicating that the `listener` should be invoked at most once after being added. If `true`, the `listener` would be automatically removed when invoked. If not specified, defaults to `false`.
+    <br />
+    <br />
+  - `passive` (Optional)
+    <br />
+    A boolean value that, if `true`, indicates that the function specified by `listener` will never call [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault). If a passive listener does call `preventDefault()`, the user agent will do nothing other than generate a console warning.
+    <br />
+    <br />
+  - `signal` (Optional)
+    <br />
+    An [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). The listener will be removed when the given `AbortSignal` object's [abort()](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort) method is called. If not specified, no `AbortSignal` is associated with the listener.
+    <br />
+    <br />
+  - `target` (Optional)
+    <br />
+    The target element, defaults to `host`.
+    <br />
+    <br />
+
+In the `my-button.tsx` file.
 
 ```tsx
-import { Attributes, Element } from '@htmlplus/element';
+import { Element, Listen } from '@htmlplus/element';
 
-@Element('my-button')
+@Element()
 export class MyButton {
-
-  @Attributes()
-  get attributes() {
-    return {
-      role: 'button'
-    }
+  @Listen('click')
+  onClick(event) {
+    alert('The my-button was clicked!');
   }
 
   render() {
-    return <button><slot /></button>
+    return <slot />
   }
 }
 ```
 
+In the `index.html` file.
+
 ```html
-<my-button role="button"></my-button>
+<my-button>Click Me</my-button>
 ```
 
 </details>
 
 <details>
-<summary>Watch</summary>
-
-Monitors `@Property` and `@State` to catch changes.
-The decorated method will be invoked after any
-changes with the `key`, `newValue`, and `oldValue` as parameters.
-If the arguments aren't defined, all of the `@Property` and `@State` are considered.
+  <summary>Method</summary>
 
-Parameters:
+Provides a way to encapsulate functionality within an element and invoke it as needed, both internally and externally.
 
-- **keys**: Collection of `@Property` and `@State` names.
-  - **type**: string | string[]
-  - **default**: undefined
-- **immediate**: Triggers the callback immediately after initialization.
-  - **type**: boolean
-  - **default**: undefined
+In the `my-counter.tsx` file.
 
 ```tsx
-import { Element, Property, Watch } from '@htmlplus/element';
+import { Element, Method, State } from '@htmlplus/element';
 
 @Element()
-export class MyElement {
+export class MyCounter {
+  @State()
+  value: number = 0;
 
-  @Property()
-  name?: string;
+  @Method()
+  increase() {
+    this.value++;
+  }
 
-  @Watch('name')
-  watcher(key, newValue, oldValue) {}
+  render() {
+    return (
+      <host>
+        Count is {this.value}
+      </host>
+    )
+  }
 }
 ```
 
+In the `index.html` file.
+
+```html
+<my-counter id="counter"></my-counter>
+
+<script>
+  setInterval(() => {
+    document.getElementById('counter').increase();
+  }, 1000);
+</script>
+```
+
 </details>
 
 <details>
-  <summary>Listen</summary>
+  <summary>Property</summary>
 
-The `@Listen` decorates a function that will handle the event.
-It takes two parameter, event name and event config.
+Creates a reactive property, reflecting a corresponding attribute value, and updates the element when the property is set.
 
-Options:
+Parameters:
 
-- **target**: `body | document | window | host` This option allows us to set where we will listen for the event.
-- **once**: `Boolean` Listen just for one time.
-- **passive**: `Boolean` This will guarantee to the DOM that the event being fired will not `.stopPropagation()`.
-- **signal**: TODO
-- **capture**: `Boolean` This option is about when during the event lifecycle the handler will be called.
+- `options` (Optional)
+  <br />
+  The configuration for property decorator.
+  <br />
+  <br />
+  - `reflect` (Optional)
+    <br />
+    Whether property value is reflected back to the associated attribute. default is `false`.
+    <br />
+    <br />
+  - `type` (Optional)
+    <br />
+    Do not set the value to this property. This value is automatically set during transpiling.
+    <br />
+    <br />
+
+In the `say-greeting.tsx` file.
 
 ```tsx
-import { Element, Listen } from '@htmlplus/element';
+import { Element, Property } from '@htmlplus/element';
 
 @Element()
-export class MyButton {
-  @Listen('click')
-  onClick(event) {}
+export class SayGreeting {
+  @Property()
+  name?: string = 'Simon';
+
+  render() {
+    return <div>Hi {this.name}</div>
+  }
 }
 ```
 
-```tsx
-import { Element, Listen } from '@htmlplus/element';
+In the `index.html` file.
 
-@Element()
-export class MyContainer {
-  @Listen('scroll', { target: 'window' })
-  onScroll(event) {}
-}
+```html
+<say-greeting name="Jan"></say-greeting>
 ```
 
+</details>
+
+<details>
+  <summary>Query</summary>
+
+Selects the first element in the shadow dom that matches a specified CSS selector.
+
+Parameters:
+
+- `selectors` (Required)
+  <br />
+  A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a `SyntaxError` exception is thrown. See [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) for more about selectors and how to manage them.
+  <br />
+  <br />
+
+In the `my-button.tsx` file.
+
 ```tsx
-import { Element, ListenOptions } from '@htmlplus/element';
+import { Element, Query } from '@htmlplus/element';
 
 @Element()
 export class MyButton {
+  @Query('.btn')
+  buttonRef!: HTMLButtonElement;
 
-  @ListenOptions({ once: true })
-  onClick(event) {}
+  loadedCallback() {
+    console.log(this.buttonRef); // <button class="btn"></button>
+  }
 
   render() {
     return (
-      <button onClick={this.onClick}>
+      <button class="btn">
         <slot />
       </button>
     )
@@ -364,403 +540,367 @@ export class MyButton {
 }
 ```
 
+In the `index.html` file.
+
+```html
+<my-button>
+  Button
+</my-button>
+```
+
 </details>
 
 <details>
-  <summary>State</summary>
+  <summary>QueryAll</summary>
 
-The `@State` decorator is for manage data inside the component.
-Any changes of `@State` will cause the render function to called again.
+Selects all elements in the shadow dom that match a specified CSS selector.
+
+Parameters:
+
+- `selectors` (Required)
+  <br />
+  A string containing one or more selectors to match against. This string must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) string; if it's not, a `SyntaxError` exception is thrown. See [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.
+  <br />
+  <br />
+
+In the `my-button.tsx` file.
 
 ```tsx
-import { Element, Listen, State } from '@htmlplus/element';
+import { Element, QueryAll } from '@htmlplus/element';
 
 @Element()
-export class MySwitch {
-
-  @State()
-  active?: boolean;
+export class MyButton {
+  @QueryAll('span')
+  spanRefs!: NodeList;
 
-  @Listen('click')
-  onClick() {
-    this.active = !this.active;
+  loadedCallback() {
+    console.log(this.spanRefs); // [span, span]
   }
 
   render() {
     return (
       <button>
-        {this.active ? 'On' : 'Off'}
+        <span> Suffix </span>
+        <b>
+          <slot />
+        </b>
+        <span> Prefix </span>
       </button>
     )
   }
 }
 ```
 
+In the `index.html` file.
+
+```html
+<my-button>
+  Button
+</my-button>
+```
+
 </details>
 
 <details>
-  <summary>Bind</summary>
+  <summary>Slots</summary>
+  
+Returns the slots name.
 
-The `@Bind` for decorating methods only, by binding them to the current context.
+In the `my-element.tsx` file.
 
 ```tsx
-import { Bind, Element } from '@htmlplus/element';
+import { Element, Slots } from '@htmlplus/element';
 
 @Element()
-export class MyButton {
-
-  @Bind()
-  onScroll(event) {
-    console.log(event);
-  }
+export class MyElement {
+  @Slots()
+  slots;
 
   connectedCallback() {
-    document.addEventListener('scroll', this.onScroll);
+    console.log(this.slots); // {header: true, default: true, footer: true}
   }
 
-  disconnectedCallback() {
-    document.removeEventListener('scroll', this.onScroll);
+  render() {
+    return (
+      <host>
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="footer"></slot>
+      </host>
+    )
   }
 }
 ```
 
+In the `index.html` file.
+
+```html
+<my-element>
+  <div slot="header">HEADER</div>
+  <div>BODY</div>
+  <div slot="footer">FOOTER</div>
+</my-element>
+```
+
 </details>
 
-## Helpers
+<details>
+  <summary>State</summary>
 
-What is helpers?
+Applying this decorator to any `class property` will trigger the element to re-render upon the desired property changes.
 
-Helpers are a versatile tool in the web component building project that eliminates the need for rewriting.
+In the `my-button.tsx` file.
 
-You can import `Helpers` two ways:
+```tsx
+import { Element, State } from '@htmlplus/element';
 
-```js
-import { direction } from '@htmlplus/element';
-import * as Helpers from '@htmlplus/element/helpers';
+@Element()
+export class MyButton {
+  @State()
+  active?: boolean;
 
-direction === Helpers.direction; // true
+  toggle() {
+    this.active = !this.active;
+  }
+
+  render() {
+    return (
+      <button onClick={() => this.toggle()}>
+        Click To Change The Status ({this.active ? 'On' : 'Off'})
+      </button>
+    )
+  }
+}
 ```
 
-<details>
-  <summary>classes</summary>
+In the `index.html` file.
 
-TODO
-`¯\_(ツ)_/¯`
+```html
+<my-button></my-button>
+```
 
 </details>
 
 <details>
-  <summary>direction</summary>
+  <summary>Watch</summary>
+  
+Monitors `@Property()` and `@State()` to detect changes. The decorated method will be called after any changes, with the `key`, `newValue`, and `oldValue` as parameters. If the `key` is not defined, all `@Property()` and `@State()` are considered.
+
+Parameters:
 
-This helper returns `ltr` or `rtl` from component.
+- `keys` (Optional)
+  <br />
+  Collection of `@Property()` and `@State()` names.
+  <br />
+  <br />
+- `immediate` (Optional)
+  <br />
+  Triggers the callback immediately after initialization.
+  <br />
+  <br />
 
-```js
-import { Element, direction } from '@htmlplus/element';
+In the `my-element.tsx` file.
+
+```tsx
+import { Element, Property, Watch } from '@htmlplus/element';
 
 @Element()
 export class MyElement {
-  connectedCallback() {
-    direction(this); // 'ltr' | 'rtl'
+  @Property()
+  value?: string;
+
+  @Watch('value')
+  watcher(key, newValue, oldValue) {
+    console.log(key, newValue, oldValue);
   }
 }
 ```
 
-</details>
-
-<details>
-  <summary>event</summary>
-
-`Event` is a wrapper of event listener, in JavaScript. `on` is like a `addEventListener` and `off` is like `removeEventListener` and used when you want to add or remove event on `window | documnet | Element`.
-
-Options:
+In the `index.html` file.
 
-- target: `window | documnet | Element`
-- event: `string`
-- handler: `EventListenerOrEventListenerObject`
-- options: `boolean | AddEventListenerOptions`
+```html
+<my-element id="element"></my-element>
 
-```js
-import { Bind, Element, on, off } from '@htmlplus/element';
+<script>
+  setInterval(() => {
+    document.getElementById('element').value = new Date();
+  }, 1000);
+</script>
+```
 
-@Element()
-export class MyElement {
+</details>
 
-  @Bind()
-  onClick(event) {
-    console.log(event);
-  }
+## Utilities
 
-  connectedCallback() {
-    on(window, 'click', this.onClick /*, options*/);
-  }
+Utilities are a versatile tool in element building projects, eliminating the need for rewriting.
 
-  disconnectedCallback() {
-    off(window, 'click', this.onClick /*, options*/);
-  }
-}
-```
+<details>
+  <summary>classes</summary>
+TODO
+</details>
 
+<details>
+  <summary>getConfig</summary>
+TODO
 </details>
 
 <details>
-  <summary>host</summary>
+  <summary>setConfig</summary>
+TODO
+</details>
 
-Returns output element of component.
+<details>
+  <summary>direction</summary>
 
-```js
-import { Element, host } from '@htmlplus/element';
+Indicates whether the [Direction](https://mdn.io/css-direction) of the element is `Right-To-Left` or `Left-To-Right`.
 
-@Element()
-export class MyElement {
-  connectedCallback() {
-    host(this); // <my-element></my-element>
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
-  <summary>isRTL</summary>
-
-Returns a `boolean` to diagnosis direction style of element.
-
-```js
-import { Element, isRTL } from '@htmlplus/element';
+  <summary>host</summary>
+  
+Indicates the host of the element.
 
-@Element()
-export class MyElement {
-  connectedCallback() {
-    isRTL(this); // false | true
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
-  <summary>isServer</summary>
+  <summary>isCSSColor</summary>
 
-Is a way to understand to component is mounted in DOM or not.
+Determines whether the given input string is a valid
+[CSS Color](https://developer.mozilla.org/docs/Web/CSS/color_value)
+or not.
 
-```js
-import { Element, isServer } from '@htmlplus/element';
+TODO
 
-@Element()
-export class MyElement {
-  connectedCallback() {
-    isServer(this); // false | true
-  }
-}
+```js
+isCSSColor('red')                       // true
+isCSSColor('#ff0000')                   // true
+isCSSColor('#ff000080')                 // true
+isCSSColor('rgb(255, 0, 0)')            // true
+isCSSColor('rgba(255, 0, 0, 0.3)')      // true
+isCSSColor('hsl(120, 100%, 50%)')       // true
+isCSSColor('hsla(120, 100%, 50%, 0.3)') // true
+isCSSColor('invalid color')             // false
 ```
 
 </details>
 
 <details>
-  <summary>query</summary>
-
-Is a wrapper of `querySelector` Is a way to find an element with a specific features.
-
-Options:
-
-- target: `HTML Element` or `Element Component(this)`
-- selectors: `string` any specific features such as `id`, `class`, `element name`, ...
-
-```js
-import { Element, query } from '@htmlplus/element';
-
-@Element()
-export class MyElement {
+  <summary>isRTL</summary>
 
-  connectedCallback() {
-    query(this, 'h1');      // <h1></h1>
-    query(this, '#first');  // <h2></h2>
-    query(this, '.second'); // <h3></h3>
-  }
+Indicates whether the direction of the element is `Right-To-Left` or not.
 
-  render() {
-    return (
-      <div>
-        <h1></h1>
-        <h2 id="first"></h2>
-        <h3 class="second"></h3>
-      </div>
-    )
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
-  <summary>queryAll</summary>
+  <summary>on</summary>
+TODO 
+</details>
 
-Is a wrapper of `querySelectorAll` Is a way to find an array of elements with a specific features.
+<details>
+  <summary>off</summary>
+TODO 
+</details>
 
-Options:
+<details>
+  <summary>query</summary>
 
-- target: `HTML Element` or `Element Component(this)`
-- selectors: `string` any specific features such as `id`, `class`, `element name`, ...
+Selects the first element in the shadow dom that matches a specified CSS selector.
 
-```js
-import { Element, queryAll } from '@htmlplus/element';
+TODO
 
-@Element()
-export class MyElement {
+</details>
 
-  connectedCallback() {
-    queryAll(this, 'div > *'); // [<h1></h1>, <h2></h2>, <h3></h3>]
-  }
+<details>
+  <summary>queryAll</summary>
+  
+Selects all elements in the shadow dom that match a specified CSS selector.
 
-  render() {
-    return (
-      <div>
-        <h1></h1>
-        <h2 id="first"></h2>
-        <h3 class="second"></h3>
-      </div>
-    )
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
   <summary>slots</summary>
 
-Sometimes components need to render dynamic children in specific locations in their component, so we use `slot` for separate these.
-
-`slots` return the state of the slots of a component (is empty or not).
-
-```js
-import { Element, Property, slots } from '@htmlplus/element';
+Returns the slots name.
 
-@Element()
-export class MyElement {
+TODO
 
-  loadedCallback() {
-    slots(this) // { default: true, main: true, empty: false }
-  }
+</details>
 
-  render() {
-    return (
-      <div>
-        <slot />
-        <slot name="main" />
-        <slot name="empty" />
-      </div>
-    )
-  }
-}
-```
+<details>
+  <summary>styles</summary>
+  
+Converts a JavaScript object containing CSS styles to a CSS string.
 
-```html
-<my-element>
-  <h1></h1>
-  <h2 slot="main"></h2>
-  <h3 slot="extra"></h3>
-</my-element>
-```
+TODO
 
 </details>
 
 <details>
-  <summary>styles</summary>
-
-Returns css style of your `array` or `object` style.
+  <summary>toUnit</summary>
 
-Options:
+Converts a value to a unit.
 
-- input: `array | object`
+TODO
 
-```js
-import { Element, Property, styles } from '@htmlplus/element';
+</details>
 
-@Element()
-export class MyElement {
+## JSX
 
-  @Property()
-  top?: number = 0;
+TODO
 
-  get styles() {
-    return styles({
-      top: this.top + 'px',
-      position: 'absolute',
-    })
-  }
+<details>
+  <summary>host</summary>
 
-  render() {
-    return (
-      <div style={this.styles}>
-        <slot />
-      </div>
-    )
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
-  <summary>toUnit</summary>
-
-Transformer to `number` type or make unit based on unit input.
-
-Options:
+  <summary>part</summary>
 
-- input: `number | string`
-- unit: `string`
+TODO
 
-```js
-import { Element, Property, toUnit } from '@htmlplus/element';
+</details>
 
-@Element()
-export class MyElement {
+## Lifecycles
 
-  @Property()
-  width?: string | number;
+Elements encompass several lifecycle methods, each triggered at different stages in the element's life cycle, enabling developers to control the element's behavior and perform customized actions.
 
-  render() {
-    return (
-      <div style={`width: ${toUnit(this.width)}`}>
-        <slot />
-      </div>
-    )
-  }
-}
-```
+<details>
+  <summary>adoptedCallback</summary>
 
-```html
-<my-element width="150"></my-element>   <!-- 150px -->
-<my-element width="150px"></my-element> <!-- 150px -->
-```
+TODO
 
 </details>
 
-## Lifecycles
+<details>
+  <summary>connectCallback</summary>
 
-Components have numerous lifecycle methods which can be used to know when the component.
+TODO
+
+</details>
 
 <details>
   <summary>connectedCallback</summary>
 
-Called every time the component is connected to the DOM. When the component is first connected, this method is called before `loadedCallback`.
+A lifecycle callback method that is called each time the element is added to the document.
 
 ```js
 import { Element } from '@htmlplus/element';
 
 @Element()
 export class MyElement {
-
   connectedCallback() {
-    console.log("Component is connected!")
-  }
-
-  render() {
-    return (
-      <slot />
-    )
+    console.log('Element is connected!');
   }
 }
 ```
@@ -770,22 +910,15 @@ export class MyElement {
 <details>
   <summary>disconnectedCallback</summary>
 
-Called every time the component is disconnected from the DOM.
+TODO
 
 ```js
 import { Element } from '@htmlplus/element';
 
 @Element()
 export class MyElement {
-
   disconnectedCallback() {
-    console.log("Component is disconnected!")
-  }
-
-  render() {
-    return (
-      <slot />
-    )
+    console.log('Element is disconnected!');
   }
 }
 ```
@@ -795,22 +928,15 @@ export class MyElement {
 <details>
   <summary>loadedCallback</summary>
 
-Called once just after the component is fully loaded and the first `render()`.
+TODO
 
 ```js
 import { Element } from '@htmlplus/element';
 
 @Element()
 export class MyElement {
-
   loadedCallback() {
-    console.log("Component is loaded!")
-  }
-
-  render() {
-    return (
-      <slot />
-    )
+    console.log('Element is loaded!');
   }
 }
 ```
@@ -818,143 +944,99 @@ export class MyElement {
 </details>
 
 <details>
-  <summary>updatedCallback</summary>
-
-Called everytime when `states` or `props` changed.It's never called during the first `render()`.
-
-```js
-import { Element } from '@htmlplus/element';
-
-@Element()
-export class MyElement {
+  <summary>updateCallback</summary>
 
-  loadedCallback(prevProps, prevState, snapshot) {
-    console.log("Component is updated!")
-  }
-
-  render() {
-    return (
-      <slot />
-    )
-  }
-}
-```
+TODO
 
 </details>
 
 <details>
-  <summary>adoptedCallback</summary>
+  <summary>updatedCallback</summary>
 
 TODO
 
 </details>
 
-## Services
+## Bundlers
 
 TODO
 
 <details>
-  <summary>Link</summary>
+  <summary>Rollup</summary>
 
 TODO
 
 </details>
 
-## Tag Name Configuration
-
-All examples below produce output `<plus-button></plus-button>`
-
 <details>
-  <summary>Explicitly tag name</summary>
-
-You can give the final name of your component as an input to the `@Element`.
-
-```js
-import { Element } from '@htmlplus/element';
-
-@Element('plus-button')
-export class Button {}
-```
-
-</details>
-
-<details>
-  <summary>Class name with at least 2 syllables</summary>
-
-The name of your element should eventually be `two` syllables.
-
-```js
-import { Element } from '@htmlplus/element';
-
-@Element()
-export class PlusButton {} // <plus-button></plus-button>
-```
-
-</details>
-
-<details>
-  <summary>With global prefix (recommended)</summary>
-
-You can set a prefix for all elements and this prefix attached to all elements.
-
-```js
-import { Element } from '@htmlplus/element';
-
-@Element()
-export class Button {}
-```
-
-Use `prefix` key in `plus.config.js` file.
-
-```js
-export default [
-  ...
-  extract({
-    prefix: 'plus',
-  })
-  ...
-]
-```
-
-</details>
-
-<details>
-  <summary>Conditional</summary>
+  <summary>Vite</summary>
 
 TODO
 
 </details>
 
-## Compiler
+## Transformer
 
 TODO
 
-```js
-import { compiler } from '@htmlplus/element/compiler';
-
-const { start, next, finish } = compiler(...plugins);
-```
-
-## Compiler plugins
+<details>
+  <summary>Getting Started</summary>
 
 TODO
 
-```js
-import { compiler } from '@htmlplus/element/compiler/index.js';
-import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler/index.js';
-
-const { start, next, finish } = compiler(
+```ts
+import { TransformerPlugin, transformer } from '@htmlplus/element';
+import {
+  customElement,
+  extract,
+  parse,
+  read,
+  style,
+  validate,
+} from '@htmlplus/element/transformer/index.js';
+
+const plugins = [
   read(),
   parse(),
   validate(),
   extract(),
   style(),
-  customElement(),
-);
+  customElement()
+];
+
+const { start, run, finish } = transformer(...plugins);
 
 await start();
 
-const { script } = await next('element.tsx');
+const context1 = await run('/my-avatar.tsx');
+const context2 = await run('/my-button.tsx');
+const context3 = await run('/my-switch.tsx');
 
 await finish();
 ```
+
+</details>
+
+<details>
+  <summary>Plugins</summary>
+
+TODO
+
+```ts
+import {
+  assets,
+  copy,
+  customElement,
+  document,
+  extract,
+  parse,
+  read,
+  readme,
+  style,
+  validate,
+  visualStudioCode,
+  webTypes
+} from '@htmlplus/element/transformer/index.js';
+```
+
+</details>