kt.js 0.0.8 → 0.1.0

package/README.md

@@ -1,86 +1,66 @@
 # 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)
+[中文](README.zh.md) | [English](README.md) | [CHANGLOG✨](CHANGELOG.md)
 
-> Note: This framework is still under development. APIs, type declarations, and other parts may change. If you use it, please watch for updates in the near future.
+> 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';
-
-const app = h('div', { id: 'app' }, 'Hello, KT.js!');
+import { h, div } from 'kt.js';
 
-createApp(app);
+const container = div('container', [div('header'), div('body', 'something'), div('footer')]);
+const app = h('section', { id: 'app' }, container);
 ```
 
-## Core Api
-
-- `h` — hyperscript helper
-  - 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).
+This will create the following DOM structure:
 
-- `createApp` — mount helper
-  - Mounts a root `HTMLKEnhancedElement` to the document.
-  - Signature: `createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
-  - If `mountTo` is omitted, it tries `#app` and falls back to `document.body`.
-
-## Enhance-added properties and methods
-
-After calling `enhance(element)` (done internally by `h` when appropriate), an HTMLElement becomes an `HTMLKEnhancedElement` with the following additions:
+```html
+<section id="app">
+  <div class="container">
+    <div class="header"></div>
+    <div class="body">something</div>
+    <div class="footer"></div>
+  </div>
+</section>
+```
 
-- Properties
-  - `kid` (number): a per-element unique index generated by an internal `Indexer.nextKid()`.
-  - `isKT` (true): boolean marker that identifies the element as a KText element.
-  - `ktext` (string): getter/setter that proxies to an internal Text node stored on the element (reads/writes element text content).
-  - `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.
+** Work with `@emotion/css`**
 
-- 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.
+```ts
+import { css } from '@emotion/css';
 
-## Notes and caveats
+const className = css`
+  color: red;
+  font-size: 20px;
+`;
 
-- This library manipulates the DOM directly and intentionally keeps re-rendering minimal.
-- `enhance` augments elements with non-enumerable descriptors for `ktext`, `isKT`, and `kid`, and assigns `kon`, `koff`, and `kmount` methods directly.
-- The API is small and low-level by design — it's intended as a performance-focused building block rather than a full component framework.
+h('div', { class: className }, 'Styled text');
+```
 
-## Contributing
+## Notes
 
-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/README.zh.md

@@ -2,28 +2,28 @@
 
 [![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) | [更新日志](CHANGELOG.md)
+[中文](README.zh.md) | [English](README.md) | [CHANGLOG](CHANGELOG.md)
 
-> Note: 本框架还在开发中，api、类型声明等可能会有变化，如果使用，近期请关注更新
+> 注意：本框架仍在开发中。API、类型声明及其它部分可能会经常变更。若在生产中使用，请关注后续更新；有问题也欢迎发邮件联系我。
 
-KT.js 是一个微小的高性能 DOM 工具，专注于最小化重绘和直接操作 DOM。它的设计目标是尽量不强制重绘，只在必要时更新 DOM，从而获得极致性能。
+KT.js 是一个极简、高性能的 DOM 工具库，专注于最小化重渲染和直接的 DOM 操作。它避免不必要的强制重渲染，力求将 DOM 更新控制在最少范围，从而获得最佳性能。
 
-For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
+更多优秀的项目请访问作者主页：[我的主页💛](https://baendlorel.github.io/?repoType=npm)
 
-## 核心理念
+## 设计理念
 
-作为一个web框架，反复创建大量对象、反复重绘是不可接受的，这是对浏览器和V8引擎(或者SpiderMonkey, 或者说JSC)的挑衅。所以我创建了 KT.js。
+作为一个前端工具库，频繁创建大量变量与对象会对浏览器及 JS 引擎（如 V8、SpiderMonkey 或 JSC）造成负担。因此我设计了 KT.js。
 
-KT.js 遵循一条原则：尽量避免不必要的重绘。它直接按需更新 DOM —— 无虚拟 DOM、无自动 diff。这样能保持界面可预测且高效，同时把更新控制权交给开发者。
+KT.js 遵循一条简单规则：避免不必要的重绘（repaint）。它直接并且只在必要的位置更新 DOM —— 无虚拟 DOM、无自动 diff。这样可以让 UI 更可预测且更快，同时把控制权交还给开发者。
 
-- **直接操作 DOM**：只更新真正改变的部分。
-- **最小化更新**：避免不必要的回流与重绘。
-- **可预测且高效**：界面稳定，性能优秀。
-- **开发者掌控**：什么时候更新由你决定。
+- 直接操作 DOM：仅更新发生变化的部分。
+- 最小化更新：避免不必要的重排（reflow）与重绘（repaint）。
+- 可预测且高性能：界面稳定、响应迅速。
+- 开发者掌控：你决定何时更新。
 
 ## 快速开始
 
-通过 npm 安装，但推荐使用 pnpm：
+推荐使用 pnpm 安装，但也支持 npm：
 
 ```bash
 npm install kt.js
@@ -31,7 +31,7 @@ npm install kt.js
 pnpm add kt.js
 ```
 
-将 KT.js 导入到你的项目：
+在项目中引入并使用：
 
 ```ts
 import { h, createApp } from 'kt.js';
@@ -41,47 +41,69 @@ const app = h('div', { id: 'app' }, 'Hello, KT.js!');
 createApp(app);
 ```
 
-## 核心 API
+## API 概览
 
-- `h` — hyperscript 辅助函数
-  - 创建带有 KText 增强属性的 DOM 元素。
-  - 用法示例：h('div', { id: 'root' }, 'Hello')。
-  - 返回 `HTMLKEnhancedElement`（一个带有额外 `enhance` 属性的 HTMLElement）。
+- `h` — 创建一个加强版的HTML元素。
+  - 常见用法：`h('div', { id: 'root' }, 'Hello')`。
+  - 返回一个 `HTMLKElement`（即带有额外 enhance 属性的 HTMLElement，详见下文）。
+  - 提供一组别名，例如 `div`、`span`、`ul` 等。
+    - `div(attr, content)` 等价于 `h('div', attr, content)`。
 
-- `createApp` — 挂载助手
-  - 将根 `HTMLKEnhancedElement` 挂载到文档。
-  - 签名：`createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
-  - 若省略 `mountTo`，会尝试 `#app`，找不到则回退到 `document.body`。
+- `createApp` — 将根元素挂载到文档中。
+  - 默认查找 `#app`，找不到时回退到 `document.body`，也可以通过`mountTo`入参指定挂载位置。
+  - 函数签名：`createApp(rootElement: HTMLKElement, mountTo?: HTMLElement)`
 
-## enhance 增添的属性和方法
+** 与 `@emotion/css` 一起使用 **
 
-当调用 `enhance(element)`（在需要时 `h` 会内部调用）后，HTMLElement 会被增强为 `HTMLKEnhancedElement`，包含以下新增项：
+> 早期我实现过自己的 CSS 处理器，但后来发现没必要。
 
-- 属性
-  - `kid`（number）：由内部 `Indexer.nextKid()` 生成的每个元素唯一索引。
-  - `isKT`（true）：标记元素是 KText 元素的布尔值。
-  - `ktext`（string）：getter/setter，代理内部 Text 节点，可方便地设置文本内容。
-  - `kchildren`（数组）：getter/setter，暴露元素的子项为字符串或增强元素数组。设置 `kchildren` 会替换元素内容，接受字符串、Text 节点或 KT.js 增强元素。
+示例：
 
-- 方法
-  - `kon(type, listener, options?)` — 增强的 addEventListener
-    - 规范化 options，支持 `triggerLimit`（监听器在触发 N 次后移除；若 `triggerLimit === 1` 则等同于 `once`）。
-    - 返回 listener（或用于限制触发次数的包装监听器）。
-  - `koff(type, listener, options?)` — 增强的 removeEventListener
-    - 移除事件监听，遵循提供的 options。
-  - `kmount(element)` — 挂载/追加辅助方法
-    - 等价于 `element.appendChild(this)`，并返回 `this` 以方便链式调用。
+```ts
+import { css } from '@emotion/css';
 
-## 注意
+const className = css`
+  color: red;
+  font-size: 20px;
+`;
 
-- 本库直接操作 DOM，故意将重绘控制在最低。
-- `enhance` 为元素添加了非枚举描述符的属性 `ktext`、`isKT` 和 `kid`，并直接赋值 `kon`、`koff`、`kmount` 方法。
-- 该 API 小且低级，旨在作为性能优先的构建块，而非完整的组件框架。
+h('div', { class: className }, 'Styled text');
+```
 
-## 贡献
+## Enhance 增强后新增的属性与方法
 
-欢迎 PR 和 issue。如果你修改了公共 API，请同步更新 README 和测试。
+当对一个元素调用 `enhance(element)`（`h` 在需要时会在内部完成该步骤）后，HTMLElement 会变为 `HTMLKElement`，并添加如下扩展：
 
-## License
+- 属性
+  - `ktext`（字符串）：getter/setter，代理到存放在元素内部的 Text 节点（用于读写元素文本内容）。
+    - 该 Text 节点由 WeakMap 存储，因此通常无法移除它。将 `ktext` 设为空字符串 `''`可以让它看不见。
+  - `kchildren`（数组）：getter/setter，将元素的子节点以字符串或增强元素数组的形式暴露。设置 `kchildren` 会替换元素的内容，接受字符串、Text 节点或其它 KT.js 的增强元素。
+
+- 方法
+  - `kon(type, listener, options?)` — 增强版的 addEventListener
+    - 规范化事件选项。支持 `triggerLimit` 选项：当事件触发次数达到限制时会自动移除监听器（若 `triggerLimit === 1` 则等同于 `once`）。
+    - 返回实际注册的监听器（可能是包裹器以支持触发次数限制）。
+    - **重要提示**：当使用 `triggerLimit` 时，`kon` 会返回一个新的包装函数而不是原始监听器。在调用 `koff` 时必须使用这个返回值才能正确移除监听器。示例：
+      ```ts
+      const wrappedHandler = element.kon('click', handler, { triggerLimit: 3 });
+      // 稍后要移除时：
+      element.koff('click', wrappedHandler); // 使用 wrappedHandler，而不是原始的 handler
+      ```
+  - `koff(type, listener, options?)` — 增强版的 removeEventListener
+    - 在移除监听器时会考虑传入的选项。
+  - `kmount(element)` — 挂载/追加助手
+    - 等价于 `element.appendChild(this)`，并返回 `this` 以便链式调用。
+
+## 说明与注意事项
+
+- 本库直接操作 DOM，并有意将重渲染控制到最小。
+- API 设计小而精，偏底层 —— 目标是作为构建高性能 UI 的基础工具，而不是完整的组件框架。
+- 本库假设`Function.prototype` 上的 `call`, `apply` 未被改动过。
+
+## 参与贡献
+
+欢迎提交 PR 与 issue。如果你的改动会影响公共 API，请同时更新 README 与相应的测试。
+
+## 许可证
 
 MIT

package/dist/index.d.ts

@@ -1,50 +1,17 @@
-/**
- * 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.8 (Last Update: 2025.09.20 15:12:59.928)
- * @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;
-
-export { createApp, h };
-
-// # from: src/global.d.ts
+type HTMLTag = keyof HTMLElementTagNameMap;
 
-// # 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;
@@ -53,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;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
 }
 
-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;
-}
-
-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=Symbol("NotProvided");class t extends(null){static kid=0;static index=0;static genIndex(){return"data-k-"+(++t.index).toString(36).padStart(6,"0")}static nextKid(){return++t.kid}}const n=e=>document.createTextNode(e),o=HTMLElement.prototype.addEventListener,i=HTMLElement.prototype.removeEventListener,r=HTMLElement.prototype.appendChild,s=HTMLElement.prototype.setAttribute,a=Array.isArray,l=Array.from,c=Object.keys,f=Object.assign,m=Object.defineProperties,u=Object.is,T=Number.isSafeInteger,h=e=>"object"==typeof e&&null!==e,E=new WeakMap,d=e=>E.get(e),p=e=>E.has(e),M={kon(t,n,r=e){if(u(r,e))return o.call(this,t,n),n;if(!h(r)||!("triggerLimit"in r))return o.call(this,t,n,r),n;const s=r.triggerLimit;if(delete r.triggerLimit,!T(s)||s<=0)throw new TypeError("[Kt.js:kon] options.triggerLimit must be a positive safe integer.");if(1===s)return r.once=!0,o.call(this,t,n,r),n;let a=s;const l=function(e){const o=n.call(this,e);return a--,a<=0&&i.call(this,t,l,r),o};return o.call(this,t,l,r),l},koff(t,n,o=e){u(e,o)?i.call(this,t,n):i.call(this,t,n,o)},kmount(e){if(!p(e))throw new TypeError("[Kt.js:kmount] target must be a KText element.");return r.call(e,this)}},L={ktext:{get(){return d(this).text.textContent},set(e){d(this).text.textContent=e}},kchildren:{get(){return l(this.children)},set(e){this.textContent="",r.call(this,d(this).text);const t=e.length;for(let o=0;o<t;o++){const t=e[o];if("string"!=typeof t){if(!(t instanceof Text||p(t)))throw new TypeError(`[Kt.js:kchildren] Invalid child element at index ${o}. Only string, Text nodes or KT.js enhanced elements are allowed.`);r.call(this,t)}else r.call(this,n(t))}}}};class H{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 y=()=>new H,w=(e,t)=>e.className=t,g=(e,t)=>{t.class&&(a(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):f(e.style,t.style),delete t.style);const n=c(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):s.call(e,String(o),r):e.hidden=Boolean(r):e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.required=Boolean(r):s.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLButtonElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.autofocus=Boolean(r):s.call(e,o,r):e instanceof HTMLSelectElement?e.multiple=Boolean(r):s.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.readOnly=Boolean(r):s.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):s.call(e,o,r):e instanceof HTMLOptionElement?e.defaultSelected=Boolean(r):s.call(e,o,r):e instanceof HTMLInputElement?e.defaultChecked=Boolean(r):s.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.defaultValue=String(r):s.call(e,o,r):e instanceof HTMLOptionElement?e.selected=Boolean(r):s.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?e.value=String(r):s.call(e,o,r):e instanceof HTMLInputElement?e.checked=Boolean(r):s.call(e,o,r))}},B=()=>{throw new TypeError("[Kt.js:h] attr must be an object.")},b=(e,t)=>{e.ktext=t},x=(e,t)=>{const o=t.length;for(let i=0;i<o;i++){const o=t[i];"string"!=typeof o?p(o)?r.call(e,o):k():r.call(e,n(o))}},j=(e,t)=>{p(t)||k(),r.call(e,t)},k=()=>{throw new TypeError("[Kt.js:h] content must be a string, HTMLEnhancedElement or an array of HTMLEnhancedElement.")};function S(e,o="",i=""){if("string"!=typeof e)throw new TypeError("[Kt.js:h] tagName must be a string.");const s=(e=>y().add("string"==typeof e,w).add(h(e),g).nomatch(B))(o),l=(e=>y().add("string"==typeof e,b).add(h(e),j).add(a(e),x).nomatch(k))(i),c=(f=e,document.createElement(f));var f;const u=n("");return r.call(c,u),((e,t)=>{E.set(e,t)})(c,{id:t.nextKid(),text:u}),function(e){m(e,L),e.kon=M.kon,e.koff=M.koff,e.kmount=M.kmount}(c),l.run(c,i),s.run(c,o),c}function I(t,n=e){if(!p(t))throw new TypeError("Root element must be a KText element.");const o=(i="app",document.getElementById(i)??document.body);var i;if(u(n,e))r.call(o,t);else if(!h(n))throw new TypeError("mountTo must be an HTMLElement or omitted.")}export{I as createApp,S as h};
+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.8",
+	"version": "0.1.0",
 	"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.0.2",
-		"defered-branch": "^1.2.2"
 	}
 }