kt.js 0.0.3 → 0.0.4

package/README.md

@@ -1,44 +1,55 @@
-# kt.js
+# KT.js
 
-[中文](./README.zh.md) [English](./README.md)
+[中文](./README.zh.md) | [English](./README.md)
 
 For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
 
-> Note: this library is under active development.
+> Note: developing
 
 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.
 
-Key philosophy
+## 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.
 
-- No forced re-rendering. Changes are applied only when needed.
-- Nearly zero unnecessary reflows/repaints.
-- Minimal overhead and extremely small runtime cost.
-- Direct DOM operations for predictable, fast updates.
+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.
+
+- **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.
 
 ## Getting started
 
-Install via npm or your preferred package manager and import the functions you need from `src/index.ts`.
+Install via npm but pnpm is recommended:
 
-Primary exports (from `src/index.ts`)
+```bash
+npm install kt.js
+# or
+pnpm add kt.js
+```
 
-- `h` — hyperscript helper
-  - Creates a KText-enhanced DOM element representation.
-  - Typical usage: h('div', { id: 'root' }, 'Hello') or using JSX-like helpers from the project.
-  - Returns an `HTMLKEnhancedElement` (an HTMLElement with extra `enhance` properties described below).
+Import KT.js into your project.
 
-- `css` — global CSS collector
-  - Tagged template helper that collects provided CSS text into an internal list.
-  - Usage: css`.foo { color: red; }`
-  - The collected CSS is applied by `applyCss()` (invoked automatically by `createApp` if appropriate).
+```ts
+import { h, createApp } from 'kt.js';
 
-- `useScope` — scoped CSS helper
-  - Provides a mechanism to scope CSS rules to a specific name/namespace. Works with the `css` helper and the library's scoped utilities.
+const app = h('div', { id: 'app' }, 'Hello, KT.js!');
+
+createApp(app);
+```
+
+## 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).
 
 - `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`.
-  - Will call `applyCss()` to flush collected CSS to the document.
 
 ## Enhance-added properties and methods
 
@@ -48,6 +59,7 @@ After calling `enhance(element)` (done internally by `h` when appropriate), an H
   - `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.
 
 - Methods
   - `kon(type, listener, options?)` — enhanced addEventListener
@@ -58,22 +70,6 @@ After calling `enhance(element)` (done internally by `h` when appropriate), an H
   - `kmount(element)` — append/mount helper
     - Equivalent to `element.appendChild(this)` and returns `this` for chaining.
 
-## Examples
-
-Create and mount an app:
-
-```ts
-import { h, css, createApp } from './src/index';
-
-const root = h('div', { id: 'root' }, 'Hello world');
-css`
-  .root {
-    color: hotpink;
-  }
-`;
-createApp(root);
-```
-
 ## Notes and caveats
 
 - This library manipulates the DOM directly and intentionally keeps re-rendering minimal.
@@ -86,27 +82,4 @@ PRs and issues are welcome. If you add features that affect the public API, upda
 
 ## License
 
-See the repository `LICENSE` file.
-
-# KT.js
-
-For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
-
-(image wait to be placed here)
-
-## Philosophy: No Forced Repaint
-
-KT.js is designed with a simple but radical philosophy: **never repaint unless absolutely necessary**. Unlike most frontend frameworks that rely on frequent DOM diffing and re-rendering, KT.js believes in minimal DOM operations and maximum stability.
-
-- **Direct DOM Manipulation**: KT.js works with the DOM as it is, updating only what truly needs to change. No virtual DOM, no diffing, no hidden magic.
-- **Predictable UI**: Your UI remains stable and predictable. If you don't explicitly change something, KT.js won't touch it.
-- **Performance First**: By avoiding unnecessary redraws, KT.js achieves high performance, especially in complex or dynamic interfaces.
-- **Developer Control**: You decide when and what to update. KT.js gives you the tools, not the rules.
-
-> "Just don't repaint. Let the DOM be."
-
-KT.js is for developers who want full control, minimal abstraction, and a framework that respects the browser's native strengths.
-
----
-
-For API details and usage, see the documentation and examples in the `example/` folder.
+MIT

package/README.zh.md

@@ -1,44 +1,55 @@
-# kt.js
+# KT.js
 
-[中文](./README.zh.md) [English](./README.md)
+[中文](./README.zh.md) | [English](./README.md)
 
 For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
 
-> 注意：这个库仍在开发中。
+> Note: 持续开发中。
 
-kt.js 是一个微小的高性能 DOM 工具，专注于最小化重绘和直接操作 DOM。它的设计目标是尽量不强制重绘，只在必要时更新 DOM，从而获得极致性能。
+KT.js 是一个微小的高性能 DOM 工具，专注于最小化重绘和直接操作 DOM。它的设计目标是尽量不强制重绘，只在必要时更新 DOM，从而获得极致性能。
 
-核心理念
+## 核心理念
 
-- 不强制重绘。只有在需要时才更新。
-- 极少无谓的重排/重绘。
-- 最小开销，极低运行时成本。
-- 直接操作 DOM，获得可预测且快速的更新。
+作为一个web框架，反复创建大量对象、反复重绘是不可接受的，这是对浏览器和V8引擎(或者SpiderMonkey, 或者说JSC)的挑衅。所以我创建了 KT.js。
+
+KT.js 遵循一条原则：尽量避免不必要的重绘。它直接按需更新 DOM —— 无虚拟 DOM、无自动 diff。这样能保持界面可预测且高效，同时把更新控制权交给开发者。
+
+- **直接操作 DOM**：只更新真正改变的部分。
+- **最小化更新**：避免不必要的回流与重绘。
+- **可预测且高效**：界面稳定，性能优秀。
+- **开发者掌控**：什么时候更新由你决定。
 
 ## 快速开始
 
-通过 npm 或你喜欢的包管理器安装，然后从 `src/index.ts` 中导入所需函数。
+通过 npm 安装，但推荐使用 pnpm：
+
+```bash
+npm install kt.js
+# or
+pnpm add kt.js
+```
+
+将 KT.js 导入到你的项目：
+
+```ts
+import { h, createApp } from 'kt.js';
+
+const app = h('div', { id: 'app' }, 'Hello, KT.js!');
 
-主要导出（来自 `src/index.ts`）
+createApp(app);
+```
+
+## 核心 API
 
 - `h` — hyperscript 辅助函数
   - 创建带有 KText 增强属性的 DOM 元素。
   - 用法示例：h('div', { id: 'root' }, 'Hello')。
   - 返回 `HTMLKEnhancedElement`（一个带有额外 `enhance` 属性的 HTMLElement）。
 
-- `css` — 全局 CSS 收集器
-  - 模板字符串标签函数，把传入的 CSS 文本收集到内部数组中。
-  - 用法： css`.foo { color: red; }`
-  - 收集到的 CSS 会通过 `applyCss()` 注入到文档中（`createApp` 在合适时会调用它）。
-
-- `useScope` — 作用域 CSS 助手
-  - 提供将 CSS 作用域化到特定名称/命名空间的能力，配合 `css` 使用。
-
 - `createApp` — 挂载助手
   - 将根 `HTMLKEnhancedElement` 挂载到文档。
   - 签名：`createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
   - 若省略 `mountTo`，会尝试 `#app`，找不到则回退到 `document.body`。
-  - 会调用 `applyCss()` 来刷新已收集的 CSS。
 
 ## enhance 增添的属性和方法
 
@@ -47,7 +58,8 @@ kt.js 是一个微小的高性能 DOM 工具，专注于最小化重绘和直接
 - 属性
   - `kid`（number）：由内部 `Indexer.nextKid()` 生成的每个元素唯一索引。
   - `isKT`（true）：标记元素是 KText 元素的布尔值。
-  - `ktext`（string）：代理内部 Text 节点的 getter/setter（读写元素文本内容）。
+  - `ktext`（string）：getter/setter，代理内部 Text 节点，可方便地设置文本内容。
+  - `kchildren`（数组）：getter/setter，暴露元素的子项为字符串或增强元素数组。设置 `kchildren` 会替换元素内容，接受字符串、Text 节点或 KT.js 增强元素。
 
 - 方法
   - `kon(type, listener, options?)` — 增强的 addEventListener
@@ -58,20 +70,6 @@ kt.js 是一个微小的高性能 DOM 工具，专注于最小化重绘和直接
   - `kmount(element)` — 挂载/追加辅助方法
     - 等价于 `element.appendChild(this)`，并返回 `this` 以方便链式调用。
 
-## 示例
-
-```ts
-import { h, css, createApp } from './src/index';
-
-const root = h('div', { id: 'root' }, 'Hello world');
-css`
-  .root {
-    color: hotpink;
-  }
-`;
-createApp(root);
-```
-
 ## 注意
 
 - 本库直接操作 DOM，故意将重绘控制在最低。
@@ -82,6 +80,6 @@ createApp(root);
 
 欢迎 PR 和 issue。如果你修改了公共 API，请同步更新 README 和测试。
 
-## 许可证
+## License
 
-参见仓库中的 `LICENSE` 文件。
+MIT

package/dist/index.d.ts

@@ -1,19 +1,3 @@
-/**
- * Tagged template helper to collect CSS strings.
- *
- * Usage:
- *   css` .cls { color: red } `;
- *
- * The function concatenates the template literal parts and any interpolated
- * values, trims the result, pushes it into `cssList` and returns the final
- * string.
- *
- * @param strings Template string parts
- * @param values Interpolated values
- * @returns The concatenated CSS string that was pushed into `cssList`
- */
-declare function css(strings: TemplateStringsArray, ...values: any[]): string;
-
 /**
  * Create an enhanced HTMLElement.
  * @param tag tag of an `HTMLElement`
@@ -22,19 +6,24 @@ declare function css(strings: TemplateStringsArray, ...values: any[]): string;
  */
 declare function h<Tag extends HTMLElementTag>(tag: Tag, attr?: KAttribute | string, content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string): HTMLKEnhancedElement<Tag>;
 
-declare function useScope(scopeName?: string): {
-    h: typeof h;
-    css: typeof css;
-};
-
 /**
+ * ## About
+ * @package Kt.js
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.0.4 (Last Update: 2025.09.19 19:11:25.259)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @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`.
  */
 declare function createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement): void;
 
-export { createApp, css, h, useScope };
+export { createApp, h };
 
 // # from: src/global.d.ts
 declare const __IS_DEV__: boolean;
@@ -43,6 +32,7 @@ interface KAttribute {
   [k: string]: any;
 
   id?: string;
+
   type?: string;
   for?: string;
   name?: string;
@@ -56,7 +46,17 @@ interface KAttribute {
   class?: string | string[];
   style?: string | Partial<CSSStyleDeclaration>;
   action?: string;
-  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
+  method?:
+    | 'POST'
+    | 'GET'
+    | 'PUT'
+    | 'DELETE'
+    | 'PATCH'
+    | 'HEAD'
+    | 'OPTIONS'
+    | 'CONNECT'
+    | 'TRACE'
+    | (string & {});
 }
 
 interface KOnOptions extends AddEventListenerOptions {
@@ -75,17 +75,46 @@ type KListener<E extends HTMLElement, K extends keyof HTMLElementEventMap> = (
 // # from: src/types/enhance.d.ts
 type HTMLElementTag = keyof HTMLElementTagNameMap;
 
+type KChildren = HTMLKEnhancedElement | Text;
+
 interface KEnhanced {
   /**
-   * Unique id of the KT.js enhanced html element;
+   * Unique numeric identifier for a KT.js enhanced element instance.
+   * Used internally to track and distinguish enhanced elements.
    */
   kid: number;
 
+  /**
+   * Marker property that is always true for enhanced elements.
+   */
   isKT: true;
 
-  // getter/setter
+  /**
+   * 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,
@@ -93,6 +122,19 @@ interface KEnhanced {
     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,
@@ -100,6 +142,14 @@ interface KEnhanced {
     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: HTMLElement) => El;
 }
 

package/dist/index.mjs

@@ -1 +1 @@
-const t=Symbol("KText"),n=Symbol("NotProvided");let e=class extends Error{reason;filename;line;column;source;constructor(t,n,e,s,i){super(`${t}:${e}:${s}: ${n}`),this.reason=n,this.filename=t,this.line=e,this.column=s,this.source=i}};class s{start;end;source;constructor(t,n,e){this.start=t,this.end=n,this.source=e}}var i;!function(t){t.stylesheet="stylesheet",t.rule="rule",t.declaration="declaration",t.comment="comment",t.container="container",t.charset="charset",t.document="document",t.customMedia="custom-media",t.fontFace="font-face",t.host="host",t.import="import",t.keyframes="keyframes",t.keyframe="keyframe",t.layer="layer",t.media="media",t.namespace="namespace",t.page="page",t.startingStyle="starting-style",t.supports="supports"}(i||(i={}));const r=(t,n,e)=>{let s=e,i=1e4;do{const e=n.map(n=>t.indexOf(n,s));e.push(t.indexOf("\\",s));const r=e.filter(t=>-1!==t);if(0===r.length)return-1;const o=Math.min(...r);if("\\"!==t[o])return o;s=o+2,i--}while(i>0);throw new Error("Too many escaping")},o=(t,n,e)=>{let s=e,i=1e4;do{const e=n.map(n=>t.indexOf(n,s));e.push(t.indexOf("(",s)),e.push(t.indexOf('"',s)),e.push(t.indexOf("'",s)),e.push(t.indexOf("\\",s));const c=e.filter(t=>-1!==t);if(0===c.length)return-1;const u=Math.min(...c);switch(t[u]){case"\\":s=u+2;break;case"(":{const n=o(t,[")"],u+1);if(-1===n)return-1;s=n+1}break;case'"':{const n=r(t,['"'],u+1);if(-1===n)return-1;s=n+1}break;case"'":{const n=r(t,["'"],u+1);if(-1===n)return-1;s=n+1}break;default:return u}i--}while(i>0);throw new Error("Too many escaping")},c=/\/\*[^]*?(?:\*\/|$)/g;function u(t){return t?t.trim():""}function h(t,n){const e=t&&"string"==typeof t.type,s=e?t:n;for(const n in t){const e=t[n];Array.isArray(e)?e.forEach(t=>{h(t,s)}):e&&"object"==typeof e&&h(e,s)}return e&&Object.defineProperty(t,"parent",{configurable:!0,writable:!0,enumerable:!1,value:n||null}),t}class a{level=0;indentation="  ";compress=!1;constructor(t){"string"==typeof t?.indent&&(this.indentation=t?.indent),t?.compress&&(this.compress=!0)}emit(t,n){return t}indent(t){return this.level=this.level||1,t?(this.level+=t,""):Array(this.level).join(this.indentation)}visit(t){switch(t.type){case i.stylesheet:return this.stylesheet(t);case i.rule:return this.rule(t);case i.declaration:return this.declaration(t);case i.comment:return this.comment(t);case i.container:return this.container(t);case i.charset:return this.charset(t);case i.document:return this.document(t);case i.customMedia:return this.customMedia(t);case i.fontFace:return this.fontFace(t);case i.host:return this.host(t);case i.import:return this.import(t);case i.keyframes:return this.keyframes(t);case i.keyframe:return this.keyframe(t);case i.layer:return this.layer(t);case i.media:return this.media(t);case i.namespace:return this.namespace(t);case i.page:return this.page(t);case i.startingStyle:return this.startingStyle(t);case i.supports:return this.supports(t)}}mapVisit(t,n){let e="";n=n||"";for(let s=0,i=t.length;s<i;s++)e+=this.visit(t[s]),n&&s<i-1&&(e+=this.emit(n));return e}compile(t){return this.compress?t.stylesheet.rules.map(this.visit,this).join(""):this.stylesheet(t)}stylesheet(t){return this.mapVisit(t.stylesheet.rules,"\n\n")}comment(t){return this.compress?this.emit("",t.position):this.emit(`${this.indent()}/*${t.comment}*/`,t.position)}container(t){return this.compress?this.emit(`@container ${t.container}`,t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit(`${this.indent()}@container ${t.container}`,t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`\n${this.indent(-1)}${this.indent()}}`)}layer(t){return this.compress?this.emit(`@layer ${t.layer}`,t.position)+(t.rules?this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):";"):this.emit(`${this.indent()}@layer ${t.layer}`,t.position)+(t.rules?this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`\n${this.indent(-1)}${this.indent()}}`):";")}import(t){return this.emit(`@import ${t.import};`,t.position)}media(t){return this.compress?this.emit(`@media ${t.media}`,t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit(`${this.indent()}@media ${t.media}`,t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`\n${this.indent(-1)}${this.indent()}}`)}document(t){const n=`@${t.vendor||""}document ${t.document}`;return this.compress?this.emit(n,t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit(n,t.position)+this.emit(`  {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`${this.indent(-1)}\n}`)}charset(t){return this.emit(`@charset ${t.charset};`,t.position)}namespace(t){return this.emit(`@namespace ${t.namespace};`,t.position)}startingStyle(t){return this.compress?this.emit("@starting-style",t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit(`${this.indent()}@starting-style`,t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`\n${this.indent(-1)}${this.indent()}}`)}supports(t){return this.compress?this.emit(`@supports ${t.supports}`,t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit(`${this.indent()}@supports ${t.supports}`,t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`\n${this.indent(-1)}${this.indent()}}`)}keyframes(t){return this.compress?this.emit(`@${t.vendor||""}keyframes ${t.name}`,t.position)+this.emit("{")+this.mapVisit(t.keyframes)+this.emit("}"):this.emit(`@${t.vendor||""}keyframes ${t.name}`,t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.keyframes,"\n")+this.emit(`${this.indent(-1)}}`)}keyframe(t){const n=t.declarations;return this.compress?this.emit(t.values.join(","),t.position)+this.emit("{")+this.mapVisit(n)+this.emit("}"):this.emit(this.indent())+this.emit(t.values.join(", "),t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(n,"\n")+this.emit(`${this.indent(-1)}\n${this.indent()}}\n`)}page(t){if(this.compress){const n=t.selectors.length?t.selectors.join(", "):"";return this.emit(`@page ${n}`,t.position)+this.emit("{")+this.mapVisit(t.declarations)+this.emit("}")}const n=t.selectors.length?`${t.selectors.join(", ")} `:"";return this.emit(`@page ${n}`,t.position)+this.emit("{\n")+this.emit(this.indent(1))+this.mapVisit(t.declarations,"\n")+this.emit(this.indent(-1))+this.emit("\n}")}fontFace(t){return this.compress?this.emit("@font-face",t.position)+this.emit("{")+this.mapVisit(t.declarations)+this.emit("}"):this.emit("@font-face ",t.position)+this.emit("{\n")+this.emit(this.indent(1))+this.mapVisit(t.declarations,"\n")+this.emit(this.indent(-1))+this.emit("\n}")}host(t){return this.compress?this.emit("@host",t.position)+this.emit("{")+this.mapVisit(t.rules)+this.emit("}"):this.emit("@host",t.position)+this.emit(` {\n${this.indent(1)}`)+this.mapVisit(t.rules,"\n\n")+this.emit(`${this.indent(-1)}\n}`)}customMedia(t){return this.emit(`@custom-media ${t.name} ${t.media};`,t.position)}rule(t){const n=t.declarations;if(!n.length)return"";if(this.compress)return this.emit(t.selectors.join(","),t.position)+this.emit("{")+this.mapVisit(n)+this.emit("}");const e=this.indent();return this.emit(t.selectors.map(t=>e+t).join(",\n"),t.position)+this.emit(" {\n")+this.emit(this.indent(1))+this.mapVisit(n,"\n")+this.emit(this.indent(-1))+this.emit(`\n${this.indent()}}`)}declaration(t){return this.compress?this.emit(`${t.property}:${t.value}`,t.position)+this.emit(";"):"grid-template-areas"===t.property?this.emit(this.indent())+this.emit(t.property+": "+t.value.split("\n").join("\n".padEnd(22)+this.indent()),t.position)+this.emit(";"):this.emit(this.indent())+this.emit(`${t.property}: ${t.value}`,t.position)+this.emit(";")}}const f=(t,n)=>{n=n||{};let r=1,a=1;function f(){const t={line:r,column:a};return e=>(e.position=new s(t,{line:r,column:a},n?.source||""),$(),e)}const l=[];function m(s){const i=new e(n?.source||"",s,r,a,t);if(!n?.silent)throw i;l.push(i)}function p(){const n=/^{\s*/.exec(t);return!!n&&(g(n),!0)}function d(){const n=/^}/.exec(t);return!!n&&(g(n),!0)}function y(){let n;const e=[];for($(),T(e);t.length&&"}"!==t.charAt(0)&&(n=x()||v(),n);)e.push(n),T(e);return e}function g(n){const e=n[0];return function(t){const n=t.match(/\n/g);n&&(r+=n.length);const e=t.lastIndexOf("\n");a=~e?t.length-e:a+t.length}(e),t=t.slice(e.length),n}function $(){const n=/^\s*/.exec(t);n&&g(n)}function T(t){t=t||[];let n=E();for(;n;)t.push(n),n=E();return t}function E(){const n=f();if("/"!==t.charAt(0)||"*"!==t.charAt(1))return;const e=/^\/\*[^]*?\*\//.exec(t);return e?(g(e),n({type:i.comment,comment:e[0].slice(2,-2)})):m("End of comment missing")}function M(){const n=/^([^{]+)/.exec(t);if(n)return g(n),((t,n)=>{const e=[];let s=0;for(;s<t.length;){const i=o(t,n,s);if(-1===i)return e.push(t.substring(s)),e;e.push(t.substring(s,i)),s=i+1}return e})(u(n[0]).replace(c,""),[","]).map(t=>u(t))}function L(){const n=f(),e=/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/.exec(t);if(!e)return;g(e);const s=u(e[0]),r=/^:\s*/.exec(t);if(!r)return m("property missing ':'");g(r);let h="";const a=o(t,[";","}"]);-1!==a&&(h=t.substring(0,a),g([h]),h=u(h).replace(c,""));const l=n({type:i.declaration,property:s.replace(c,""),value:h}),p=/^[;\s]*/.exec(t);return p&&g(p),l}function H(){const t=[];if(!p())return m("missing '{'");T(t);let n=L();for(;n;)t.push(n),T(t),n=L();return d()?t:m("missing '}'")}function w(){const n=[],e=f();let s=/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/.exec(t);for(;s;){const e=g(s);n.push(e[1]);const i=/^,\s*/.exec(t);i&&g(i),s=/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/.exec(t)}if(n.length)return e({type:i.keyframe,values:n,declarations:H()||[]})}const b=S("import"),k=S("charset"),B=S("namespace");function S(n){const e=new RegExp("^@"+n+"\\s*((?::?[^;'\"]|\"(?:\\\\\"|[^\"])*?\"|'(?:\\\\'|[^'])*?')+)(?:;|$)");return()=>{const s=f(),i=e.exec(t);if(!i)return;const r=g(i),o={type:n};return o[n]=r[1].trim(),s(o)}}function x(){if("@"===t[0])return function(){const n=f(),e=/^@([-\w]+)?keyframes\s*/.exec(t);if(!e)return;const s=g(e)[1],r=/^([-\w]+)\s*/.exec(t);if(!r)return m("@keyframes missing name");const o=g(r)[1];if(!p())return m("@keyframes missing '{'");let c=T(),u=w();for(;u;)c.push(u),c=c.concat(T()),u=w();return d()?n({type:i.keyframes,name:o,vendor:s,keyframes:c}):m("@keyframes missing '}'")}()||function(){const n=f(),e=/^@media *([^{]+)/.exec(t);if(!e)return;const s=u(g(e)[1]);if(!p())return m("@media missing '{'");const r=T().concat(y());return d()?n({type:i.media,media:s,rules:r}):m("@media missing '}'")}()||function(){const n=f(),e=/^@custom-media\s+(--\S+)\s+([^{;\s][^{;]*);/.exec(t);if(!e)return;const s=g(e);return n({type:i.customMedia,name:u(s[1]),media:u(s[2])})}()||function(){const n=f(),e=/^@supports *([^{]+)/.exec(t);if(!e)return;const s=u(g(e)[1]);if(!p())return m("@supports missing '{'");const r=T().concat(y());return d()?n({type:i.supports,supports:s,rules:r}):m("@supports missing '}'")}()||b()||k()||B()||function(){const n=f(),e=/^@([-\w]+)?document *([^{]+)/.exec(t);if(!e)return;const s=g(e),r=u(s[1]),o=u(s[2]);if(!p())return m("@document missing '{'");const c=T().concat(y());return d()?n({type:i.document,document:o,vendor:r,rules:c}):m("@document missing '}'")}()||function(){const n=f(),e=/^@page */.exec(t);if(!e)return;g(e);const s=M()||[];if(!p())return m("@page missing '{'");let r=T(),o=L();for(;o;)r.push(o),r=r.concat(T()),o=L();return d()?n({type:i.page,selectors:s,declarations:r}):m("@page missing '}'")}()||function(){const n=f(),e=/^@host\s*/.exec(t);if(!e)return;if(g(e),!p())return m("@host missing '{'");const s=T().concat(y());return d()?n({type:i.host,rules:s}):m("@host missing '}'")}()||function(){const n=f(),e=/^@font-face\s*/.exec(t);if(!e)return;if(g(e),!p())return m("@font-face missing '{'");let s=T(),r=L();for(;r;)s.push(r),s=s.concat(T()),r=L();return d()?n({type:i.fontFace,declarations:s}):m("@font-face missing '}'")}()||function(){const n=f(),e=/^@container *([^{]+)/.exec(t);if(!e)return;const s=u(g(e)[1]);if(!p())return m("@container missing '{'");const r=T().concat(y());return d()?n({type:i.container,container:s,rules:r}):m("@container missing '}'")}()||function(){const n=f(),e=/^@starting-style\s*/.exec(t);if(!e)return;if(g(e),!p())return m("@starting-style missing '{'");const s=T().concat(y());return d()?n({type:i.startingStyle,rules:s}):m("@starting-style missing '}'")}()||function(){const n=f(),e=/^@layer *([^{;@]+)/.exec(t);if(!e)return;const s=u(g(e)[1]);if(!p()){const e=/^[;\s]*/.exec(t);return e&&g(e),n({type:i.layer,layer:s})}const r=T().concat(y());return d()?n({type:i.layer,layer:s,rules:r}):m("@layer missing '}'")}()}function v(){const t=f(),n=M();return n?(T(),t({type:i.rule,selectors:n,declarations:H()||[]})):m("selector missing")}return h(function(){const t=y();return{type:i.stylesheet,stylesheet:{source:n?.source,rules:t,parsingErrors:l}}}())},l=Reflect.apply,m=Reflect.set,p=Reflect.get,d=Reflect.defineProperty,y=Array.isArray,g=Object.keys,$=Object.assign,T=Object.is,E=Number.isSafeInteger,M=t=>"object"==typeof t&&null!==t,L=document.getElementById.bind(document),H=document.createElement.bind(document),w=document.createTextNode.bind(document),b=HTMLElement.prototype.addEventListener,k=HTMLElement.prototype.removeEventListener,B=[];function S(t,n){const e=[];for(let s=0;s<t.length;s++)e.push(t[s]),s<n.length&&e.push(String(n[s]));return e.join("").replace(/\r\n/g,"\n").trim()}function x(t,...n){const e=S(t,n);return B.push(e),e}function v(t){return function(n,...e){const s=S(n,e),r=f(s),o=n=>{if(!M(n))return;n.type===i.rule&&(n.selectors=n.selectors.map(n=>`[${t}]${n}`));const e=g(n),s=e.length;for(let t=0;t<s;t++){const s=p(n,e[t]);if(y(s)){const t=s.length;for(let n=0;n<t;n++)o(s[n]);continue}M(s)&&o(s)}};o(r);const c=((t,n)=>new a(n||{}).compile(t))(r);return B.push(c),c}}class j extends(null){static kid=0;static scopeIndex=0;static genScopeName(){return"data-k-"+(++j.scopeIndex).toString(36).padStart(6,"0")}static nextKid(){return++j.kid}}const A={get:function(){return p(this,t).textContent},set:function(n){p(this,t).textContent=n}},I={value:!0};function O(t,e,s=n){if(T(s,n))return l(b,this,[t,e]),e;if(!M(s)||!("triggerLimit"in s))return l(b,this,[t,e,s]),e;const i=s.triggerLimit;if(delete s.triggerLimit,!E(i)||i<=0)throw new TypeError("[Kt.js:kon] options.triggerLimit must be a positive safe integer.");if(1===i)return s.once=!0,l(b,this,[t,e,s]),e;let r=i;const o=function(n){const i=l(e,this,[n]);return r--,r<=0&&l(k,this,[t,o,s]),i};return l(b,this,[t,o,s]),o}function K(t,e,s=n){T(n,s)?l(k,this,[t,e]):l(k,this,[t,e,s])}function R(t){return t.appendChild(this)}function N(t){d(t,"kid",{value:j.nextKid(),enumerable:!0}),d(t,"isKT",I),d(t,"ktext",A),t.kon=O,t.koff=K,t.kmount=R}class z{t=null;o=null;add(t,n){if("function"!=typeof n)throw new TypeError("Branch must be a function");return t&&(this.t=n),this}nomatch(t){if("function"!=typeof t)throw new TypeError("Branch must be a function");return this.t||t(),this}deferedNomatch(t){if("function"!=typeof t)throw new TypeError("Branch must be a function");return this.o=t,this}run(...t){return this.t?this.t(...t):this.o?this.o(...t):void 0}}const F=()=>new z,V=(t,n)=>t.className=n,q=(t,n)=>{n.class&&(y(n.class)?t.classList.add(...n.class):t.className=n.class,delete n.class),n.style&&("string"==typeof n.style?t.setAttribute("style",n.style):$(t.style,n.style),delete n.style);const e=g(n),s=e.length;for(let i=0;i<s;i++){const s=e[i],r=n[s];"function"!=typeof r&&("checked"!==s?"value"!==s?"selected"!==s?"defaultValue"!==s?"defaultChecked"!==s?"defaultSelected"!==s?"disabled"!==s?"readOnly"!==s?"multiple"!==s?"autofocus"!==s?"required"!==s?"hidden"!==s?"open"===s&&t instanceof HTMLDetailsElement?t.open=Boolean(r):"controls"===s&&t instanceof HTMLMediaElement?t.controls=Boolean(r):"autoplay"===s&&t instanceof HTMLMediaElement?t.autoplay=Boolean(r):"loop"===s&&t instanceof HTMLMediaElement?t.loop=Boolean(r):"muted"===s&&t instanceof HTMLMediaElement?t.muted=Boolean(r):"defer"===s&&t instanceof HTMLScriptElement?t.defer=Boolean(r):"async"===s&&t instanceof HTMLScriptElement?t.async=Boolean(r):t.setAttribute(s,r):t.hidden=Boolean(r):t instanceof HTMLInputElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement?t.required=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement?t.autofocus=Boolean(r):t.setAttribute(s,r):t instanceof HTMLSelectElement?t.multiple=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement?t.readOnly=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLOptGroupElement||t instanceof HTMLOptionElement||t instanceof HTMLFieldSetElement||t instanceof HTMLTextAreaElement?t.disabled=Boolean(r):t.setAttribute(s,r):t instanceof HTMLOptionElement?t.defaultSelected=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement?t.defaultChecked=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement?t.defaultValue=String(r):t.setAttribute(s,r):t instanceof HTMLOptionElement?t.selected=Boolean(r):t.setAttribute(s,r):t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement?t.value=String(r):t.setAttribute(s,r):t instanceof HTMLInputElement?t.checked=Boolean(r):t.setAttribute(s,r))}},C=()=>{throw new TypeError("[Kt.js:h] attr must be an object.")},D=(t,n)=>{t.ktext=n},G=(t,n)=>{const e=n.length;for(let s=0;s<e;s++){const e=n[s];"string"!=typeof e?e.isKT?t.appendChild(e):_():t.appendChild(w(e))}},P=(t,n)=>{n.isKT||_(),t.appendChild(n)},_=()=>{throw new TypeError("[Kt.js:h] content must be a string, HTMLEnhancedElement or an array of HTMLEnhancedElement.")};function J(n,e="",s=""){if("string"!=typeof n)throw new TypeError("[Kt.js:h] tagName must be a string.");const i=(t=>F().add("string"==typeof t,V).add(M(t),q).nomatch(C))(e),r=(t=>F().add("string"==typeof t,D).add(M(t),P).add(y(t),G).nomatch(_))(s),o=H(n),c=w("");return o.appendChild(c),m(o,t,c),N(o),r.run(o,s),i.run(o,e),o}function Q(t){return function(...n){const e=J(...n);return e.setAttribute(t,""),e}}function U(t=j.genScopeName()){return{h:Q(t),css:v(t)}}function W(t,e=n){if(!t.isKT)throw new TypeError("Root element must be a KText element.");const s=L("app")??document.body;if(T(e,n)&&t.kmount(s),!M(e))throw new TypeError("mountTo must be an HTMLElement or omitted.");!function(){const t=H("style");t.id="kt.js-style",t.innerHTML=B.join("\n"),B.splice(0),t.innerHTML}()}export{W as createApp,x as css,J as h,U as useScope};
+const e=Symbol("KText"),t=Symbol("NotProvided"),n=Reflect.set,o=Reflect.get,i=Reflect.defineProperty,r=Array.isArray,s=Array.from,a=Object.keys,l=Object.assign,c=document.getElementById.bind(document),f=document.createElement.bind(document),u=document.createTextNode.bind(document),m=HTMLElement.prototype.addEventListener,T=HTMLElement.prototype.removeEventListener,d=HTMLElement.prototype.appendChild,h=HTMLElement.prototype.setAttribute;class E extends(null){static kid=0;static index=0;static genIndex(){return"data-k-"+(++E.index).toString(36).padStart(6,"0")}static nextKid(){return++E.kid}}const p=Object.is,M=Number.isSafeInteger,L=e=>"object"==typeof e&&null!==e,H={get:function(){return o(this,e).textContent},set:function(t){o(this,e).textContent=t}},y={value:!0},w={get(){return s(this.children)},set(e){this.innerHTML="";const t=e.length;for(let n=0;n<t;n++){const t=e[n];if("string"!=typeof t){if(!(t instanceof Text||t.isKT))throw new TypeError(`[Kt.js:kchildren] Invalid child element at index ${n}. Only string, Text nodes or KT.js enhanced elements are allowed.`);d.call(this,t)}else d.call(this,u(t))}}};function B(e,n,o=t){if(p(o,t))return m.call(this,e,n),n;if(!L(o)||!("triggerLimit"in o))return m.call(this,e,n,o),n;const i=o.triggerLimit;if(delete o.triggerLimit,!M(i)||i<=0)throw new TypeError("[Kt.js:kon] options.triggerLimit must be a positive safe integer.");if(1===i)return o.once=!0,m.call(this,e,n,o),n;let r=i;const s=function(t){const i=n.call(this,t);return r--,r<=0&&T.call(this,e,s,o),i};return m.call(this,e,s,o),s}function g(e,n,o=t){p(t,o)?T.call(this,e,n):T.call(this,e,n,o)}function b(e){return d.call(e,this)}function x(e){i(e,"kid",{value:E.nextKid(),enumerable:!0}),i(e,"isKT",y),i(e,"ktext",H),i(e,"kchildren",w),e.kon=B,e.koff=g,e.kmount=b}class S{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 S,I=(e,t)=>e.className=t,K=(e,t)=>{t.class&&(r(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):l(e.style,t.style),delete t.style);const n=a(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):h.call(e,String(o),r):e.hidden=Boolean(r):e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.required=Boolean(r):h.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLButtonElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.autofocus=Boolean(r):h.call(e,o,r):e instanceof HTMLSelectElement?e.multiple=Boolean(r):h.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.readOnly=Boolean(r):h.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):h.call(e,o,r):e instanceof HTMLOptionElement?e.defaultSelected=Boolean(r):h.call(e,o,r):e instanceof HTMLInputElement?e.defaultChecked=Boolean(r):h.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?e.defaultValue=String(r):h.call(e,o,r):e instanceof HTMLOptionElement?e.selected=Boolean(r):h.call(e,o,r):e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?e.value=String(r):h.call(e,o,r):e instanceof HTMLInputElement?e.checked=Boolean(r):h.call(e,o,r))}},k=()=>{throw new TypeError("[Kt.js:h] attr must be an object.")},O=(e,t)=>{e.ktext=t},A=(e,t)=>{const n=t.length;for(let o=0;o<n;o++){const n=t[o];"string"!=typeof n?n.isKT?d.call(e,n):N():d.call(e,u(n))}},v=(e,t)=>{t.isKT||N(),d.call(e,t)},N=()=>{throw new TypeError("[Kt.js:h] content must be a string, HTMLEnhancedElement or an array of HTMLEnhancedElement.")};function R(t,o="",i=""){if("string"!=typeof t)throw new TypeError("[Kt.js:h] tagName must be a string.");const s=(e=>j().add("string"==typeof e,I).add(L(e),K).nomatch(k))(o),a=(e=>j().add("string"==typeof e,O).add(L(e),v).add(r(e),A).nomatch(N))(i),l=f(t),c=u("");return d.call(l,c),n(l,e,c),x(l),a.run(l,i),s.run(l,o),l}function q(e,n=t){if(!e.isKT)throw new TypeError("Root element must be a KText element.");const o=c("app")??document.body;if(p(n,t)&&e.kmount(o),!L(n))throw new TypeError("mountTo must be an HTMLElement or omitted.")}export{q as createApp,R as h};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kt.js",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"author": {
 		"name": "Kasukabe Tsumugi",
 		"email": "futami16237@gmail.com"
@@ -42,6 +42,7 @@
 	"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",
@@ -64,7 +65,6 @@
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@adobe/css-tools": "^4.4.4",
 		"defered-branch": "^1.2.2"
 	}
 }