kt.js 0.0.9 → 0.1.1

package/README.md

@@ -1,62 +1,60 @@
 # KT.js
 
+[![npm version](https://img.shields.io/npm/v/kt.js.svg)](https://www.npmjs.com/package/kt.js)
+
 [![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
 
-[中文](README.zh.md) | [English](README.md) | [CHANGLOG✨](CHANGELOG.md)
+[CHANGLOG✨](CHANGELOG.md)
 
 > Note: This framework is still under development. APIs, type declarations, and other parts **may change frequently**. If you use it, please watch for updates in the near future. Feel free to mail me if you have any questions!
 
-KT.js is a tiny, high-performance DOM utility focused on minimal re-rendering and direct DOM manipulation. It favors not forcing re-renders and aims to keep DOM updates to the absolute minimum for maximum performance.
+KT.js is a tiny(1.3KB runtime without alias helpers and 0.68kb gzipped) DOM utility focused on direct DOM manipulation. It favors not forcing re-renders and aims to keep DOM updates to the absolute minimum for maximum performance.
 
 For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
 
 ## Philosophy
 
-As a web framework, repeatedly creating a large number of variables and objects is unacceptable. This is a provocation against browsers and the V8 engine(or SpiderMonkey, or JSC). So I created KT.js.
-
-KT.js follows one rule: avoid repainting unless necessary. It updates the DOM directly and only where needed — no virtual DOM, no automatic diffing. That keeps the UI predictable and fast, while leaving control to the developer.
+As a web framework, repeatedly creating a large number of variables and objects is unacceptable. So I created KT.js.
 
-- **Direct DOM**: update only what changes.
-- **Minimal updates**: avoid unnecessary reflows and repaints.
-- **Predictable and fast**: stable UI with high performance.
-- **Developer control**: you decide when to update.
+KT.js follows one rule: full controll of dom and avoid unless repainting.
 
 ## Getting started
 
-Install via npm but pnpm is recommended:
-
 ```bash
 npm install kt.js
 # or
 pnpm add kt.js
 ```
 
-Import KT.js into your project.
-
 ```ts
-import { h, createApp } from 'kt.js';
+import { h, div } from 'kt.js';
 
-const app = h('div', { id: 'app' }, 'Hello, KT.js!');
-
-createApp(app);
+const container = div('container', [div('header'), div('body', 'something'), div('footer')]);
+const app = h('section', { id: 'app' }, container);
 ```
 
-## Api
+This will create the following DOM structure:
 
-- `h` — Creates a KT-enhanced DOM element representation.
-  - Typical usage:` h('div', { id: 'root' }, 'Hello')`.
-  - Returns an `HTMLKEnhancedElement` (an HTMLElement with extra `enhance` properties described below).
-  - Rich aliases like `div`, `span`, `ul`, etc. are available for convenience.
-    - `div(attr, content)` is equivalent to `h('div', attr, content)`.
+```html
+<section id="app">
+  <div class="container">
+    <div class="header"></div>
+    <div class="body">something</div>
+    <div class="footer"></div>
+  </div>
+</section>
+```
 
-- `createApp` — mount helper
-  - Mounts a root element to the document.
-  - Signature: `createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
-  - If `mountTo` is omitted, it tries `#app` and falls back to `document.body`.
+If you give a function in the attributes, it will be treated as an event listener, and the key will be considered as the event name:
 
-** Work with `@emotion/css`**
+```ts
+const button = btn({ click: () => alert('Clicked!') }, 'Click me');
+// this equals
+const button = btn(undefined, 'Click me');
+button.addEventListener('click', () => alert('Clicked!'));
+```
 
-_Once I wrote my own css handler, but it turned out to be unnecessary._
+Work with `@emotion/css`
 
 ```ts
 import { css } from '@emotion/css';
@@ -69,33 +67,9 @@ const className = css`
 h('div', { class: className }, 'Styled text');
 ```
 
-## Enhance-added properties and methods
-
-After calling `enhance(element)` (done internally by `h` when appropriate), an HTMLElement becomes an `HTMLKEnhancedElement` with the following additions:
-
-- Properties
-  - `ktext` (string): getter/setter that proxies to an internal Text node stored on the element (reads/writes element text content).
-    - the text node is stored by a WeakMap, so normally it is not possible to stop it from showing up unless you set ktext to `''`.
-  - `kchildren` (array): getter/setter that exposes the element's children as an array of strings / enhanced elements. Setting `kchildren` replaces the element's content and accepts strings, Text nodes or other KT.js enhanced elements.
-
-- Methods
-  - `kon(type, listener, options?)` — enhanced addEventListener
-    - Normalizes options. Supports a `triggerLimit` option which will remove the listener after N triggers (if `triggerLimit === 1` it becomes `once`).
-    - Returns the listener (or a wrapped listener used for limited triggers).
-  - `koff(type, listener, options?)` — enhanced removeEventListener
-    - Removes event listeners respecting provided options.
-  - `kmount(element)` — append/mount helper
-    - Equivalent to `element.appendChild(this)` and returns `this` for chaining.
-
 ## Notes
 
-- This library manipulates the DOM directly and intentionally keeps re-rendering minimal.
-- The API is small and low-level by design — it's intended as a performance-focused building block rather than a full component framework.
-- `Function.prototype.call` is trusted.
-
-## Contributing
-
-PRs and issues are welcome. If you add features that affect the public API, update README and tests accordingly.
+- `call`, `apply` on `Function.prototype` is trusted.
 
 ## License
 

package/dist/index.d.ts

@@ -1,107 +1,17 @@
-/** Alias for h('div', ...) - Block-level container */
-declare const div: HAlias<'div'>;
-/** Alias for h('span', ...) - Inline container */
-declare const span: HAlias<'span'>;
-/** Alias for h('a', ...) - Hyperlink */
-declare const a: HAlias<'a'>;
-/** Alias for h('img', ...) - Image */
-declare const img: HAlias<'img'>;
-/** Alias for h('p', ...) - Paragraph */
-declare const p: HAlias<'p'>;
-/** Alias for h('ul', ...) - Unordered list */
-declare const ul: HAlias<'ul'>;
-/** Alias for h('li', ...) - List item */
-declare const li: HAlias<'li'>;
-/** Alias for h('mark', ...) - Marked/highlighted text */
-declare const mark: HAlias<'mark'>;
-/** Alias for h('time', ...) - Time/date */
-declare const time: HAlias<'time'>;
-/** Alias for h('code', ...) - Inline code */
-declare const code: HAlias<'code'>;
-/** Alias for h('pre', ...) - Preformatted text */
-declare const pre: HAlias<'pre'>;
-
-/** Alias for h('header', ...) - Header section */
-declare const header: HAlias<'header'>;
-/** Alias for h('nav', ...) - Navigation section */
-declare const nav: HAlias<'nav'>;
-/** Alias for h('main', ...) - Main content */
-declare const main: HAlias<'main'>;
-/** Alias for h('article', ...) - Article block */
-declare const article: HAlias<'article'>;
-/** Alias for h('section', ...) - Section block */
-declare const section: HAlias<'section'>;
-/** Alias for h('aside', ...) - Aside (sidebar) */
-declare const aside: HAlias<'aside'>;
-/** Alias for h('footer', ...) - Footer section */
-declare const footer: HAlias<'footer'>;
-/** Alias for h('figure', ...) - Figure with caption */
-declare const figure: HAlias<'figure'>;
-/** Alias for h('figcaption', ...) - Figure caption */
-declare const figcaption: HAlias<'figcaption'>;
-
-/** Alias for h('input', ...) - Input field */
-declare const input: HAlias<'input'>;
-/** Alias for h('select', ...) - Select */
-declare const select: HAlias<'select'>;
-/** Alias for h('option', ...) - Options */
-declare const option: HAlias<'option'>;
-/** Alias for h('optgroup', ...) - Option Groups */
-declare const optgroup: HAlias<'optgroup'>;
-/** Alias for h('textarea', ...) - Textarea */
-declare const textarea: HAlias<'textarea'>;
-/** Alias for h('form', ...) - Form */
-declare const form: HAlias<'form'>;
-/** Alias for h('label', ...) - Label */
-declare const label: HAlias<'label'>;
-
-/**
- * Create an enhanced HTMLElement.
- * @param tag tag of an `HTMLElement`
- * @param attr attribute object or className
- * @param content a string or an array of HTMLEnhancedElement as child nodes
- */
-declare function h<T extends HTMLTag>(tag: T, attr?: KAttribute | string, content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string): HTMLKEnhancedElement<T>;
+type otherstring = string & {};
 
 /**
- * ## About
- * @package Kt.js
- * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.0.9 (Last Update: 2025.09.20 16:19:02.366)
- * @license MIT
- * @link https://github.com/baendlorel/kt.js
- * @link https://baendlorel.github.io/ Welcome to my site!
- * @description A simple and easy-to-use web framework, never re-render. Abbreviation of Kasukabe Tsumugi.
- * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
- *
- * ## Usage
- * Mount root element to `#app`(`body` if not found) or to the given element.
- * @param rootElement an instance of `HTMLKEnhancedElement`, created by `h` function.
- * @param mountTo any `HTMLElement` to mount to, if omitted, will mount to `#app` or `body`.
+ * Normal HTML tags like `div`, `span`, `a`, etc.
  */
-declare function createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement): void;
+type HTMLTag = keyof HTMLElementTagNameMap;
 
-export { a, article, aside, code, createApp, div, figcaption, figure, footer, form, h, header, img, input, label, li, main, mark, nav, optgroup, option, p, pre, section, select, span, textarea, time, ul };
-
-// # from: src/global.d.ts
-
-// # from: src/types/core.d.ts
-type HFunction = <T extends HTMLTag>(
-  tag: T,
-  attr?: KAttribute | string,
-  content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string
-) => HTMLKEnhancedElement<T>;
-
-type HAlias<T extends HTMLTag> = (
-  attr?: KAttribute | string,
-  content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string
-) => HTMLKEnhancedElement<T>;
+type RawContent = (HTMLElement | string | undefined)[] | HTMLElement | string;
+type RawAttr = KAttribute | string;
 
 /**
  * Used to create enhanced HTML elements
  */
-export interface KAttribute {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface KAttribute {
   [k: string]: any;
 
   id?: string;
@@ -110,152 +20,54 @@ export interface KAttribute {
   for?: string;
   name?: string;
   value?: string;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
   label?: string;
   disabled?: string;
   min?: string;
   max?: string;
   selected?: boolean;
   checked?: boolean;
-  class?: string | string[];
+  class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   action?: string;
-  method?:
-    | 'POST'
-    | 'GET'
-    | 'PUT'
-    | 'DELETE'
-    | 'PATCH'
-    | 'HEAD'
-    | 'OPTIONS'
-    | 'CONNECT'
-    | 'TRACE'
-    | (string & {});
-}
-
-// # from: src/types/enhance.d.ts
-export type HTMLTag = keyof HTMLElementTagNameMap;
-
-export type KChildren = HTMLKEnhancedElement | Text;
-
-interface KOnOptions extends AddEventListenerOptions {
-  /**
-   * This option's priority is higher than `once`.
-   * - when this is `1`, go with `once: true`.
-   */
-  triggerLimit?: number;
-}
-
-type KListener<E extends HTMLElement, K extends keyof HTMLElementEventMap> = (
-  this: E,
-  ev: HTMLElementEventMap[K]
-) => unknown;
-
-interface KEnhancedPrivates {
-  /**
-   * Unique numeric identifier for a KT.js enhanced element instance.
-   * Used internally to track and distinguish enhanced elements.
-   */
-  id: number;
-
-  text: Text;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
 }
 
-interface KEnhanced {
-  /**
-   * The element's text content as maintained by KT.js.
-   * - it is not recommended to use `textContent` any more
-   */
-  ktext: string;
-
-  /**
-   * Array of children for this enhanced element.
-   * - read as `Array`, not `HTMLCollection`.
-   * - can be set to replace all child nodes.
-   */
-  kchildren: KChildren[];
-
-  /**
-   * Attach an event listener to the element and return a typed listener
-   * function. The generic parameters ensure the listener and returned
-   * function are correctly typed for the element and event.
-   * - `triggerLimit` option is the max trigger time of a listner.
-   *   - its priority is higher than `once` option.
-   *   - if it is `1`, will fallback to `once` behavior.
-   *
-   * @param type event type (e.g., 'click')
-   * @param listener event listener callback
-   * @param options listener options or capture flag
-   * @returns the listener function typed for the specific element and event
-   */
-  kon: <El extends HTMLElement, K extends keyof HTMLElementEventMap>(
-    this: El,
-    type: K,
-    listener: KListener<HTMLElement, K>,
-    options?: KOnOptions
-  ) => KListener<El, K>;
-
-  /**
-   * Remove or detach an event listener from the element. Semantically this
-   * is the counterpart to `kon` and accepts the same arguments. Returns
-   * nothing.
-   *
-   * Note: the original inline comment said "Equivalent to `element.appendChild(this)`"
-   * which does not apply to event removal — keep this method focused on
-   * removing listeners according to the project's implementation.
-   *
-   * @param type event type
-   * @param listener event listener to remove
-   * @param options listener options
-   */
-  koff: <El extends HTMLElement, K extends keyof HTMLElementEventMap>(
-    this: El,
-    type: K,
-    listener: KListener<HTMLElement, K>,
-    options?: KOnOptions
-  ) => void;
-
-  /**
-   * Mount this enhanced element onto a host DOM element. This typically
-   * appends the enhanced element to the supplied `element` and performs any
-   * needed setup. Returns the mounted enhanced element.
-   *
-   * @param element the DOM element to mount into
-   * @returns the mounted enhanced element (this)
-   */
-  kmount: <El extends HTMLKEnhancedElement>(this: El, element: HTMLKEnhancedElement) => El;
-}
+declare const div: (attr?: RawAttr, content?: RawContent) => HTMLDivElement;
+declare const span: (attr?: RawAttr, content?: RawContent) => HTMLSpanElement;
+declare const label: (attr?: RawAttr, content?: RawContent) => HTMLLabelElement;
+declare const p: (attr?: RawAttr, content?: RawContent) => HTMLParagraphElement;
+declare const h1: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const h2: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const h3: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const h4: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const h5: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const h6: (attr?: RawAttr, content?: RawContent) => HTMLHeadingElement;
+declare const ul: (attr?: RawAttr, content?: RawContent) => HTMLUListElement;
+declare const ol: (attr?: RawAttr, content?: RawContent) => HTMLOListElement;
+declare const li: (attr?: RawAttr, content?: RawContent) => HTMLLIElement;
+declare const btn: (attr?: RawAttr, content?: RawContent) => HTMLButtonElement;
+declare const form: (attr?: RawAttr, content?: RawContent) => HTMLFormElement;
+declare const input: (attr?: RawAttr, content?: RawContent) => HTMLInputElement;
+declare const select: (attr?: RawAttr, content?: RawContent) => HTMLSelectElement;
+declare const option: (attr?: RawAttr, content?: RawContent) => HTMLOptionElement;
+declare const table: (attr?: RawAttr, content?: RawContent) => HTMLTableElement;
+declare const thead: (attr?: RawAttr, content?: RawContent) => HTMLTableSectionElement;
+declare const tbody: (attr?: RawAttr, content?: RawContent) => HTMLTableSectionElement;
+declare const tr: (attr?: RawAttr, content?: RawContent) => HTMLTableRowElement;
+declare const th: (attr?: RawAttr, content?: RawContent) => HTMLTableCellElement;
+declare const td: (attr?: RawAttr, content?: RawContent) => HTMLTableCellElement;
+declare const a: (attr?: RawAttr, content?: RawContent) => HTMLAnchorElement;
+declare const img: (attr?: RawAttr, content?: RawContent) => HTMLImageElement;
 
 /**
- * Get the tags that makes HTMLElementTagNameMap[tag] = HTMLElement
- */
-type NonSpecialTags = {
-  [K in keyof HTMLElementTagNameMap]: HTMLElement extends HTMLElementTagNameMap[K] ? K : never;
-}[keyof HTMLElementTagNameMap];
-
-/**
- * This is the core feature of KT.js - enhanced HTML elements.
- *
- * It combines the standard HTMLElement properties and methods
- * with KT.js enhancements defined in KEnhanced.
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
  */
-export type HTMLKEnhancedElement<T extends HTMLTag = NonSpecialTags> =
-  (HTMLElement extends HTMLElementTagNameMap[T] ? HTMLElement : HTMLElementTagNameMap[T]) &
-    KEnhanced;
-
-// # from: src/types/type-utils.d.ts
-type IsSameType<A, B> =
-  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2
-    ? (<T>() => T extends B ? 1 : 2) extends <T>() => T extends A ? 1 : 2
-      ? true
-      : false
-    : false;
-
-type PickProperty<T> = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
-};
+declare function h<T extends HTMLTag>(tag: T, attr?: RawAttr, content?: RawContent): HTMLElementTagNameMap[T];
 
-type PickMethod<T> = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
-};
+export { a, btn, div, form, h, h1, h2, h3, h4, h5, h6, img, input, label, li, ol, option, p, select, span, table, tbody, td, th, thead, tr, ul };

package/dist/index.mjs

@@ -1 +1 @@
-const e=Math.max,t=Reflect.defineProperty;function n(n,...o){if("function"!=typeof n)throw new TypeError("First argument must be a function");if(0===o.length)return n;const i=function(...e){return n.call(this,...o,...e)};return t(i,"length",{value:e(0,n.length-o.length),configurable:!0}),i}class o extends(null){static kid=0;static nextKid(){return++o.kid}}const i=document.getElementById,r=document.createElement,s=document.createTextNode,a=e=>s.call(document,e),l=HTMLElement.prototype.addEventListener,c=HTMLElement.prototype.removeEventListener,f=HTMLElement.prototype.appendChild,u=HTMLElement.prototype.setAttribute,m=Array.isArray,T=Array.from,h=Object.keys,p=Object.assign,d=Object.defineProperties,E=Object.is,M=Number.isSafeInteger,L=e=>"object"==typeof e&&null!==e,H=Symbol("NotProvided"),y=new WeakMap,g=e=>y.get(e),w=e=>y.has(e),b={kon(e,t,n=H){if(E(n,H))return l.call(this,e,t),t;if(!L(n)||!("triggerLimit"in n))return l.call(this,e,t,n),t;const o=n.triggerLimit;if(delete n.triggerLimit,!M(o)||o<=0)throw new TypeError("[Kt.js:kon] options.triggerLimit must be a positive safe integer.");if(1===o)return n.once=!0,l.call(this,e,t,n),t;let i=o;const r=function(o){const s=t.call(this,o);return i--,i<=0&&c.call(this,e,r,n),s};return l.call(this,e,r,n),r},koff(e,t,n=H){E(H,n)?c.call(this,e,t):c.call(this,e,t,n)},kmount(e){if(!w(e))throw new TypeError("[Kt.js:kmount] target must be a KText element.");return f.call(e,this)}},B={ktext:{get(){return g(this).text.textContent},set(e){g(this).text.textContent=e}},kchildren:{get(){return T(this.children)},set(e){this.textContent="",f.call(this,g(this).text);const t=e.length;for(let n=0;n<t;n++){const t=e[n];if("string"!=typeof t){if(!(t instanceof Text||w(t)))throw new TypeError(`[Kt.js:kchildren] Invalid child element at index ${n}. Only string, Text nodes or KT.js enhanced elements are allowed.`);f.call(this,t)}else f.call(this,a(t))}}}};class x{t=null;o=null;add(e,t){if("function"!=typeof t)throw new TypeError("Branch must be a function");return e&&(this.t=t),this}nomatch(e){if("function"!=typeof e)throw new TypeError("Branch must be a function");return this.t||e(),this}deferedNomatch(e){if("function"!=typeof e)throw new TypeError("Branch must be a function");return this.o=e,this}run(...e){return this.t?this.t(...e):this.o?this.o(...e):void 0}}const j=()=>new x,k=(e,t)=>e.className=t,S=(e,t)=>{t.class&&(m(t.class)?e.classList.add(...t.class):e.className=t.class,delete t.class),t.style&&("string"==typeof t.style?e.setAttribute("style",t.style):p(e.style,t.style),delete t.style);const n=h(t),o=n.length;for(let i=0;i<o;i++){const o=n[i],r=t[o];"function"!=typeof r&&("checked"!==o?"value"!==o?"selected"!==o?"defaultValue"!==o?"defaultChecked"!==o?"defaultSelected"!==o?"disabled"!==o?"readOnly"!==o?"multiple"!==o?"autofocus"!==o?"required"!==o?"hidden"!==o?"open"===o&&e instanceof HTMLDetailsElement?e.open=Boolean(r):"controls"===o&&e instanceof HTMLMediaElement?e.controls=Boolean(r):"autoplay"===o&&e instanceof HTMLMediaElement?e.autoplay=Boolean(r):"loop"===o&&e instanceof HTMLMediaElement?e.loop=Boolean(r):"muted"===o&&e instanceof HTMLMediaElement?e.muted=Boolean(r):"defer"===o&&e instanceof HTMLScriptElement?e.defer=Boolean(r):"async"===o&&e instanceof HTMLScriptElement?e.async=Boolean(r):u.call(e,String(o),r):e.hidden=Boolean(r):e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.required=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLButtonElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.autofocus=Boolean(r):u.call(e,o,r):e instanceof HTMLSelectElement?e.multiple=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.readOnly=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLButtonElement||e instanceof HTMLSelectElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement||e instanceof HTMLTextAreaElement?e.disabled=Boolean(r):u.call(e,o,r):e instanceof HTMLOptionElement?e.defaultSelected=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement?e.defaultChecked=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.defaultValue=String(r):u.call(e,o,r):e instanceof HTMLOptionElement?e.selected=Boolean(r):u.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?e.value=String(r):u.call(e,o,r):e instanceof HTMLInputElement?e.checked=Boolean(r):u.call(e,o,r))}},v=()=>{throw new TypeError("[Kt.js:h] attr must be an object.")},K=(e,t)=>{e.ktext=t},O=(e,t)=>{const n=t.length;for(let o=0;o<n;o++){const n=t[o];"string"!=typeof n?w(n)?f.call(e,n):A():f.call(e,a(n))}},I=(e,t)=>{w(t)||A(),f.call(e,t)},A=()=>{throw new TypeError("[Kt.js:h] content must be a string, HTMLEnhancedElement or an array of HTMLEnhancedElement.")};function N(e,t="",n=""){if("string"!=typeof e)throw new TypeError("[Kt.js:h] tagName must be a string.");const i=(e=>j().add("string"==typeof e,k).add(L(e),S).nomatch(v))(t),s=(e=>j().add("string"==typeof e,K).add(L(e),I).add(m(e),O).nomatch(A))(n),l=(c=e,r.call(document,c));var c;const u=a("");return f.call(l,u),((e,t)=>{y.set(e,t)})(l,{id:o.nextKid(),text:u}),function(e){d(e,B),e.kon=b.kon,e.koff=b.koff,e.kmount=b.kmount}(l),s.run(l,n),i.run(l,t),l}const F=n(N,"div"),R=n(N,"span"),q=n(N,"a"),C=n(N,"img"),D=n(N,"p"),G=n(N,"ul"),P=n(N,"li"),V=n(N,"mark"),W=n(N,"time"),$=n(N,"code"),z=n(N,"pre"),J=n(N,"header"),Q=n(N,"nav"),U=n(N,"main"),X=n(N,"article"),Y=n(N,"section"),Z=n(N,"aside"),_=n(N,"footer"),ee=n(N,"figure"),te=n(N,"figcaption"),ne=n(N,"input"),oe=n(N,"select"),ie=n(N,"option"),re=n(N,"optgroup"),se=n(N,"textarea"),ae=n(N,"form"),le=n(N,"label");function ce(e,t=H){if(!w(e))throw new TypeError("Root element must be a KText element.");const n=(o="app",i.call(document,o)??document.body);var o;if(E(t,H))f.call(n,e);else if(!L(t))throw new TypeError("mountTo must be an HTMLElement or omitted.")}export{q as a,X as article,Z as aside,$ as code,ce as createApp,F as div,te as figcaption,ee as figure,_ as footer,ae as form,N as h,J as header,C as img,ne as input,le as label,P as li,U as main,V as mark,Q as nav,re as optgroup,ie as option,D as p,z as pre,Y as section,oe as select,R as span,se as textarea,W as time,G as ul};
+const t=document.createElement,e=HTMLElement.prototype.append,n=HTMLElement.prototype.addEventListener,o=HTMLElement.prototype.setAttribute,l=Array.isArray,a=Object.keys,c=Object.assign,d=t=>{throw new Error("Kt.js:"+t)},i=(t,e,n)=>{e in t?t[e]=!!n:o.call(t,e,n)},u=(t,e,n)=>{e in t?t[e]=n:o.call(t,e,n)},r={checked:i,selected:i,value:u,valueAsDate:u,valueAsNumber:u,defaultValue:u,defaultChecked:i,defaultSelected:i,disabled:i,readOnly:i,multiple:i,required:i,autofocus:i,open:i,controls:i,autoplay:i,loop:i,muted:i,defer:i,async:i,hidden:(t,e,n)=>t.hidden=!!n},s=(t,e,n)=>o.call(t,e,n);function f(t,e){"string"==typeof e?t.className=e:"object"==typeof e&&null!==e?function(t,e){const l=e.class,d=e.style;void 0!==l&&(t.className=l,delete e.class),void 0!==d&&("string"==typeof d?o.call(t,"style",d):c(t.style,d),delete e.style);const i=a(e);for(let o=i.length-1;o>=0;o--){const l=i[o],a=e[l];"function"!=typeof a?(r[l]||s)(t,l,a):n.call(t,l,a)}void 0!==l&&(e.style=l),void 0!==d&&(e.style=d)}(t,e):d("applyAttr attr must be an object.")}function p(n,o="",a=""){"string"!=typeof n&&d("h tagName must be a string.");const c=(i=n,t.call(document,i));var i;return f(c,o),function(t,n){"string"==typeof n?t.ktext=n:l(n)?e.apply(t,n):n instanceof HTMLElement?e.call(t,n):d("applyContent invalid content.")}(c,a),c}const m=t=>(e,n)=>p(t,e,n),y=m("div"),h=m("span"),b=m("label"),v=m("p"),g=m("h1"),j=m("h2"),E=m("h3"),A=m("h4"),H=m("h5"),L=m("h6"),M=m("ul"),T=m("ol"),O=m("li"),k=m("button"),w=m("form"),C=m("input"),N=m("select"),q=m("option"),x=m("table"),D=m("thead"),K=m("tbody"),S=m("tr"),V=m("th"),z=m("td"),B=m("a"),F=m("img");export{B as a,k as btn,y as div,w as form,p as h,g as h1,j as h2,E as h3,A as h4,H as h5,L as h6,F as img,C as input,b as label,O as li,T as ol,q as option,v as p,N as select,h as span,x as table,K as tbody,z as td,V as th,D as thead,S as tr,M as ul};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kt.js",
-	"version": "0.0.9",
+	"version": "0.1.1",
 	"author": {
 		"name": "Kasukabe Tsumugi",
 		"email": "futami16237@gmail.com"
@@ -33,18 +33,16 @@
 		"javascript"
 	],
 	"scripts": {
+		"gsize": "cat dist/index.mjs | wc -c && gzip -c dist/index.mjs | wc -c",
+		"lines": "clear && find ./src -type f \\( -name \"*.ts\" -o -name \"*.tsx\" -o -name \"*.js\" -o -name \"*.mjs\" -o -name \"*.cjs\" -o -name \"*.cpp\" -o -name \"*.h\" -o -name \"*.py\"  -o -name \"*.css\" -o -name \"*.rs\" -o -name \"*.rc\" \\) | xargs wc -l",
 		"test": "clear & vitest",
 		"lint": "oxlint .",
 		"cover": "clear & vitest --coverage",
-		"build": "node ./scripts/rollup.mjs"
+		"build": "tsx ./.scripts/rollup.ts"
 	},
 	"license": "MIT",
 	"devDependencies": {
-		"@babel/plugin-proposal-decorators": "^7.28.0",
-		"@babel/preset-env": "^7.28.3",
-		"@emotion/css": "^11.13.5",
 		"@rollup/plugin-alias": "^5.1.1",
-		"@rollup/plugin-babel": "^6.0.4",
 		"@rollup/plugin-commonjs": "^28.0.6",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@rollup/plugin-replace": "^6.0.2",
@@ -57,15 +55,13 @@
 		"prettier": "^3.6.2",
 		"rimraf": "^6.0.1",
 		"rollup": "^4.50.2",
+		"rollup-plugin-conditional-compilation": "^1.0.6",
+		"rollup-plugin-const-enum": "^1.1.4",
 		"rollup-plugin-dts": "^6.2.3",
-		"rollup-plugin-dts-merger": "^1.3.0",
+		"rollup-plugin-func-macro": "^1.1.1",
 		"tinyrainbow": "^3.0.3",
 		"tslib": "^2.8.1",
 		"typescript": "^5.9.2",
 		"vitest": "^3.2.4"
-	},
-	"dependencies": {
-		"bind-params": "^1.1.0",
-		"defered-branch": "^1.2.2"
 	}
 }

package/README.zh.md

@@ -1,103 +0,0 @@
-# KT.js
-
-[![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
-
-[中文](README.zh.md) | [English](README.md) | [CHANGLOG](CHANGELOG.md)
-
-> 注意：本框架仍在开发中。API、类型声明及其它部分可能会经常变更。若在生产中使用，请关注后续更新；有问题也欢迎发邮件联系我。
-
-KT.js 是一个极简、高性能的 DOM 工具库，专注于最小化重渲染和直接的 DOM 操作。它避免不必要的强制重渲染，力求将 DOM 更新控制在最少范围，从而获得最佳性能。
-
-更多优秀的项目请访问作者主页：[我的主页💛](https://baendlorel.github.io/?repoType=npm)
-
-## 设计理念
-
-作为一个前端工具库，频繁创建大量变量与对象会对浏览器及 JS 引擎（如 V8、SpiderMonkey 或 JSC）造成负担。因此我设计了 KT.js。
-
-KT.js 遵循一条简单规则：避免不必要的重绘（repaint）。它直接并且只在必要的位置更新 DOM —— 无虚拟 DOM、无自动 diff。这样可以让 UI 更可预测且更快，同时把控制权交还给开发者。
-
-- 直接操作 DOM：仅更新发生变化的部分。
-- 最小化更新：避免不必要的重排（reflow）与重绘（repaint）。
-- 可预测且高性能：界面稳定、响应迅速。
-- 开发者掌控：你决定何时更新。
-
-## 快速开始
-
-推荐使用 pnpm 安装，但也支持 npm：
-
-```bash
-npm install kt.js
-# or
-pnpm add kt.js
-```
-
-在项目中引入并使用：
-
-```ts
-import { h, createApp } from 'kt.js';
-
-const app = h('div', { id: 'app' }, 'Hello, KT.js!');
-
-createApp(app);
-```
-
-## API 概览
-
-- `h` — 创建一个加强版的HTML元素。
-  - 常见用法：`h('div', { id: 'root' }, 'Hello')`。
-  - 返回一个 `HTMLKEnhancedElement`（即带有额外 enhance 属性的 HTMLElement，详见下文）。
-  - 提供一组别名，例如 `div`、`span`、`ul` 等。
-    - `div(attr, content)` 等价于 `h('div', attr, content)`。
-
-- `createApp` — 将根元素挂载到文档中。
-  - 默认查找 `#app`，找不到时回退到 `document.body`，也可以通过`mountTo`入参指定挂载位置。
-  - 函数签名：`createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
-
-** 与 `@emotion/css` 一起使用 **
-
-> 早期我实现过自己的 CSS 处理器，但后来发现没必要。
-
-示例：
-
-```ts
-import { css } from '@emotion/css';
-
-const className = css`
-  color: red;
-  font-size: 20px;
-`;
-
-h('div', { class: className }, 'Styled text');
-```
-
-## Enhance 增强后新增的属性与方法
-
-当对一个元素调用 `enhance(element)`（`h` 在需要时会在内部完成该步骤）后，HTMLElement 会变为 `HTMLKEnhancedElement`，并添加如下扩展：
-
-- 属性
-  - `ktext`（字符串）：getter/setter，代理到存放在元素内部的 Text 节点（用于读写元素文本内容）。
-    - 该 Text 节点由 WeakMap 存储，因此通常无法移除它。将 `ktext` 设为空字符串 `''`可以让它看不见。
-  - `kchildren`（数组）：getter/setter，将元素的子节点以字符串或增强元素数组的形式暴露。设置 `kchildren` 会替换元素的内容，接受字符串、Text 节点或其它 KT.js 的增强元素。
-
-- 方法
-  - `kon(type, listener, options?)` — 增强版的 addEventListener
-    - 规范化事件选项。支持 `triggerLimit` 选项：当事件触发次数达到限制时会自动移除监听器（若 `triggerLimit === 1` 则等同于 `once`）。
-    - 返回实际注册的监听器（可能是包裹器以支持触发次数限制）。
-  - `koff(type, listener, options?)` — 增强版的 removeEventListener
-    - 在移除监听器时会考虑传入的选项。
-  - `kmount(element)` — 挂载/追加助手
-    - 等价于 `element.appendChild(this)`，并返回 `this` 以便链式调用。
-
-## 说明与注意事项
-
-- 本库直接操作 DOM，并有意将重渲染控制到最小。
-- API 设计小而精，偏底层 —— 目标是作为构建高性能 UI 的基础工具，而不是完整的组件框架。
-- `Function.prototype.call` 被信任，这在某些环境或代码审计中需要注意。
-
-## 参与贡献
-
-欢迎提交 PR 与 issue。如果你的改动会影响公共 API，请同时更新 README 与相应的测试。
-
-## 许可证
-
-MIT