kt.js 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -11
- package/README.zh.md +60 -42
- package/dist/index.d.ts +103 -15
- package/dist/index.mjs +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
# KT.js
|
|
2
2
|
|
|
3
|
-
[
|
|
3
|
+
[](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[中文](README.zh.md) | [English](README.md) | [CHANGLOG✨](CHANGELOG.md)
|
|
6
6
|
|
|
7
|
-
> Note: This framework is still under development. APIs, type declarations, and other parts may change
|
|
7
|
+
> 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!
|
|
8
8
|
|
|
9
9
|
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.
|
|
10
10
|
|
|
11
|
+
For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
|
|
12
|
+
|
|
11
13
|
## Philosophy
|
|
12
14
|
|
|
13
15
|
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.
|
|
@@ -39,26 +41,41 @@ const app = h('div', { id: 'app' }, 'Hello, KT.js!');
|
|
|
39
41
|
createApp(app);
|
|
40
42
|
```
|
|
41
43
|
|
|
42
|
-
##
|
|
44
|
+
## Api
|
|
43
45
|
|
|
44
|
-
- `h` —
|
|
45
|
-
- Creates a KT-enhanced DOM element representation.
|
|
46
|
+
- `h` — Creates a KT-enhanced DOM element representation.
|
|
46
47
|
- Typical usage:` h('div', { id: 'root' }, 'Hello')`.
|
|
47
48
|
- Returns an `HTMLKEnhancedElement` (an HTMLElement with extra `enhance` properties described below).
|
|
49
|
+
- Rich aliases like `div`, `span`, `ul`, etc. are available for convenience.
|
|
50
|
+
- `div(attr, content)` is equivalent to `h('div', attr, content)`.
|
|
48
51
|
|
|
49
52
|
- `createApp` — mount helper
|
|
50
|
-
- Mounts a root
|
|
53
|
+
- Mounts a root element to the document.
|
|
51
54
|
- Signature: `createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
|
|
52
55
|
- If `mountTo` is omitted, it tries `#app` and falls back to `document.body`.
|
|
53
56
|
|
|
57
|
+
** Work with `@emotion/css`**
|
|
58
|
+
|
|
59
|
+
_Once I wrote my own css handler, but it turned out to be unnecessary._
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import { css } from '@emotion/css';
|
|
63
|
+
|
|
64
|
+
const className = css`
|
|
65
|
+
color: red;
|
|
66
|
+
font-size: 20px;
|
|
67
|
+
`;
|
|
68
|
+
|
|
69
|
+
h('div', { class: className }, 'Styled text');
|
|
70
|
+
```
|
|
71
|
+
|
|
54
72
|
## Enhance-added properties and methods
|
|
55
73
|
|
|
56
74
|
After calling `enhance(element)` (done internally by `h` when appropriate), an HTMLElement becomes an `HTMLKEnhancedElement` with the following additions:
|
|
57
75
|
|
|
58
76
|
- Properties
|
|
59
|
-
- `kid` (number): a per-element unique index generated by an internal `Indexer.nextKid()`.
|
|
60
|
-
- `isKT` (true): boolean marker that identifies the element as a KText element.
|
|
61
77
|
- `ktext` (string): getter/setter that proxies to an internal Text node stored on the element (reads/writes element text content).
|
|
78
|
+
- 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 `''`.
|
|
62
79
|
- `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.
|
|
63
80
|
|
|
64
81
|
- Methods
|
|
@@ -70,11 +87,11 @@ After calling `enhance(element)` (done internally by `h` when appropriate), an H
|
|
|
70
87
|
- `kmount(element)` — append/mount helper
|
|
71
88
|
- Equivalent to `element.appendChild(this)` and returns `this` for chaining.
|
|
72
89
|
|
|
73
|
-
## Notes
|
|
90
|
+
## Notes
|
|
74
91
|
|
|
75
92
|
- This library manipulates the DOM directly and intentionally keeps re-rendering minimal.
|
|
76
|
-
- `enhance` augments elements with non-enumerable descriptors for `ktext`, `isKT`, and `kid`, and assigns `kon`, `koff`, and `kmount` methods directly.
|
|
77
93
|
- The API is small and low-level by design — it's intended as a performance-focused building block rather than a full component framework.
|
|
94
|
+
- `Function.prototype.call` is trusted.
|
|
78
95
|
|
|
79
96
|
## Contributing
|
|
80
97
|
|
package/README.zh.md
CHANGED
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
# KT.js
|
|
2
2
|
|
|
3
|
-
[
|
|
3
|
+
[](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[中文](README.zh.md) | [English](README.md) | [CHANGLOG](CHANGELOG.md)
|
|
6
6
|
|
|
7
|
-
>
|
|
7
|
+
> 注意：本框架仍在开发中。API、类型声明及其它部分可能会经常变更。若在生产中使用，请关注后续更新；有问题也欢迎发邮件联系我。
|
|
8
8
|
|
|
9
|
-
KT.js
|
|
9
|
+
KT.js 是一个极简、高性能的 DOM 工具库，专注于最小化重渲染和直接的 DOM 操作。它避免不必要的强制重渲染，力求将 DOM 更新控制在最少范围，从而获得最佳性能。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
更多优秀的项目请访问作者主页：[我的主页💛](https://baendlorel.github.io/?repoType=npm)
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
## 设计理念
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
作为一个前端工具库，频繁创建大量变量与对象会对浏览器及 JS 引擎（如 V8、SpiderMonkey 或 JSC）造成负担。因此我设计了 KT.js。
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
17
|
+
KT.js 遵循一条简单规则：避免不必要的重绘（repaint）。它直接并且只在必要的位置更新 DOM —— 无虚拟 DOM、无自动 diff。这样可以让 UI 更可预测且更快，同时把控制权交还给开发者。
|
|
18
|
+
|
|
19
|
+
- 直接操作 DOM：仅更新发生变化的部分。
|
|
20
|
+
- 最小化更新：避免不必要的重排（reflow）与重绘（repaint）。
|
|
21
|
+
- 可预测且高性能：界面稳定、响应迅速。
|
|
22
|
+
- 开发者掌控：你决定何时更新。
|
|
21
23
|
|
|
22
24
|
## 快速开始
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
推荐使用 pnpm 安装，但也支持 npm：
|
|
25
27
|
|
|
26
28
|
```bash
|
|
27
29
|
npm install kt.js
|
|
@@ -29,7 +31,7 @@ npm install kt.js
|
|
|
29
31
|
pnpm add kt.js
|
|
30
32
|
```
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
在项目中引入并使用：
|
|
33
35
|
|
|
34
36
|
```ts
|
|
35
37
|
import { h, createApp } from 'kt.js';
|
|
@@ -39,47 +41,63 @@ const app = h('div', { id: 'app' }, 'Hello, KT.js!');
|
|
|
39
41
|
createApp(app);
|
|
40
42
|
```
|
|
41
43
|
|
|
42
|
-
##
|
|
44
|
+
## API 概览
|
|
45
|
+
|
|
46
|
+
- `h` — 创建一个加强版的HTML元素。
|
|
47
|
+
- 常见用法：`h('div', { id: 'root' }, 'Hello')`。
|
|
48
|
+
- 返回一个 `HTMLKEnhancedElement`（即带有额外 enhance 属性的 HTMLElement，详见下文）。
|
|
49
|
+
- 提供一组别名，例如 `div`、`span`、`ul` 等。
|
|
50
|
+
- `div(attr, content)` 等价于 `h('div', attr, content)`。
|
|
51
|
+
|
|
52
|
+
- `createApp` — 将根元素挂载到文档中。
|
|
53
|
+
- 默认查找 `#app`，找不到时回退到 `document.body`，也可以通过`mountTo`入参指定挂载位置。
|
|
54
|
+
- 函数签名：`createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement)`
|
|
55
|
+
|
|
56
|
+
** 与 `@emotion/css` 一起使用 **
|
|
57
|
+
|
|
58
|
+
> 早期我实现过自己的 CSS 处理器，但后来发现没必要。
|
|
43
59
|
|
|
44
|
-
|
|
45
|
-
- 创建带有 KText 增强属性的 DOM 元素。
|
|
46
|
-
- 用法示例：h('div', { id: 'root' }, 'Hello')。
|
|
47
|
-
- 返回 `HTMLKEnhancedElement`（一个带有额外 `enhance` 属性的 HTMLElement）。
|
|
60
|
+
示例：
|
|
48
61
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
62
|
+
```ts
|
|
63
|
+
import { css } from '@emotion/css';
|
|
64
|
+
|
|
65
|
+
const className = css`
|
|
66
|
+
color: red;
|
|
67
|
+
font-size: 20px;
|
|
68
|
+
`;
|
|
69
|
+
|
|
70
|
+
h('div', { class: className }, 'Styled text');
|
|
71
|
+
```
|
|
53
72
|
|
|
54
|
-
##
|
|
73
|
+
## Enhance 增强后新增的属性与方法
|
|
55
74
|
|
|
56
|
-
|
|
75
|
+
当对一个元素调用 `enhance(element)`（`h` 在需要时会在内部完成该步骤）后，HTMLElement 会变为 `HTMLKEnhancedElement`，并添加如下扩展：
|
|
57
76
|
|
|
58
77
|
- 属性
|
|
59
|
-
- `
|
|
60
|
-
|
|
61
|
-
- `
|
|
62
|
-
- `kchildren`（数组）：getter/setter，暴露元素的子项为字符串或增强元素数组。设置 `kchildren` 会替换元素内容，接受字符串、Text 节点或 KT.js 增强元素。
|
|
78
|
+
- `ktext`（字符串）：getter/setter，代理到存放在元素内部的 Text 节点（用于读写元素文本内容）。
|
|
79
|
+
- 该 Text 节点由 WeakMap 存储，因此通常无法移除它。将 `ktext` 设为空字符串 `''`可以让它看不见。
|
|
80
|
+
- `kchildren`（数组）：getter/setter，将元素的子节点以字符串或增强元素数组的形式暴露。设置 `kchildren` 会替换元素的内容，接受字符串、Text 节点或其它 KT.js 的增强元素。
|
|
63
81
|
|
|
64
82
|
- 方法
|
|
65
|
-
- `kon(type, listener, options?)` —
|
|
66
|
-
-
|
|
67
|
-
-
|
|
68
|
-
- `koff(type, listener, options?)` —
|
|
69
|
-
-
|
|
70
|
-
- `kmount(element)` —
|
|
71
|
-
- 等价于 `element.appendChild(this)`，并返回 `this`
|
|
83
|
+
- `kon(type, listener, options?)` — 增强版的 addEventListener
|
|
84
|
+
- 规范化事件选项。支持 `triggerLimit` 选项：当事件触发次数达到限制时会自动移除监听器（若 `triggerLimit === 1` 则等同于 `once`）。
|
|
85
|
+
- 返回实际注册的监听器（可能是包裹器以支持触发次数限制）。
|
|
86
|
+
- `koff(type, listener, options?)` — 增强版的 removeEventListener
|
|
87
|
+
- 在移除监听器时会考虑传入的选项。
|
|
88
|
+
- `kmount(element)` — 挂载/追加助手
|
|
89
|
+
- 等价于 `element.appendChild(this)`，并返回 `this` 以便链式调用。
|
|
72
90
|
|
|
73
|
-
##
|
|
91
|
+
## 说明与注意事项
|
|
74
92
|
|
|
75
|
-
- 本库直接操作 DOM
|
|
76
|
-
-
|
|
77
|
-
-
|
|
93
|
+
- 本库直接操作 DOM，并有意将重渲染控制到最小。
|
|
94
|
+
- API 设计小而精，偏底层 —— 目标是作为构建高性能 UI 的基础工具，而不是完整的组件框架。
|
|
95
|
+
- `Function.prototype.call` 被信任，这在某些环境或代码审计中需要注意。
|
|
78
96
|
|
|
79
|
-
##
|
|
97
|
+
## 参与贡献
|
|
80
98
|
|
|
81
|
-
|
|
99
|
+
欢迎提交 PR 与 issue。如果你的改动会影响公共 API，请同时更新 README 与相应的测试。
|
|
82
100
|
|
|
83
|
-
##
|
|
101
|
+
## 许可证
|
|
84
102
|
|
|
85
103
|
MIT
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,76 @@
|
|
|
1
|
+
/** Alias for h('div', ...) - Block-level container */
|
|
2
|
+
declare const div: HAlias<'div'>;
|
|
3
|
+
/** Alias for h('span', ...) - Inline container */
|
|
4
|
+
declare const span: HAlias<'span'>;
|
|
5
|
+
/** Alias for h('a', ...) - Hyperlink */
|
|
6
|
+
declare const a: HAlias<'a'>;
|
|
7
|
+
/** Alias for h('img', ...) - Image */
|
|
8
|
+
declare const img: HAlias<'img'>;
|
|
9
|
+
/** Alias for h('p', ...) - Paragraph */
|
|
10
|
+
declare const p: HAlias<'p'>;
|
|
11
|
+
/** Alias for h('ul', ...) - Unordered list */
|
|
12
|
+
declare const ul: HAlias<'ul'>;
|
|
13
|
+
/** Alias for h('li', ...) - List item */
|
|
14
|
+
declare const li: HAlias<'li'>;
|
|
15
|
+
/** Alias for h('mark', ...) - Marked/highlighted text */
|
|
16
|
+
declare const mark: HAlias<'mark'>;
|
|
17
|
+
/** Alias for h('time', ...) - Time/date */
|
|
18
|
+
declare const time: HAlias<'time'>;
|
|
19
|
+
/** Alias for h('code', ...) - Inline code */
|
|
20
|
+
declare const code: HAlias<'code'>;
|
|
21
|
+
/** Alias for h('pre', ...) - Preformatted text */
|
|
22
|
+
declare const pre: HAlias<'pre'>;
|
|
23
|
+
|
|
24
|
+
/** Alias for h('header', ...) - Header section */
|
|
25
|
+
declare const header: HAlias<'header'>;
|
|
26
|
+
/** Alias for h('nav', ...) - Navigation section */
|
|
27
|
+
declare const nav: HAlias<'nav'>;
|
|
28
|
+
/** Alias for h('main', ...) - Main content */
|
|
29
|
+
declare const main: HAlias<'main'>;
|
|
30
|
+
/** Alias for h('article', ...) - Article block */
|
|
31
|
+
declare const article: HAlias<'article'>;
|
|
32
|
+
/** Alias for h('section', ...) - Section block */
|
|
33
|
+
declare const section: HAlias<'section'>;
|
|
34
|
+
/** Alias for h('aside', ...) - Aside (sidebar) */
|
|
35
|
+
declare const aside: HAlias<'aside'>;
|
|
36
|
+
/** Alias for h('footer', ...) - Footer section */
|
|
37
|
+
declare const footer: HAlias<'footer'>;
|
|
38
|
+
/** Alias for h('figure', ...) - Figure with caption */
|
|
39
|
+
declare const figure: HAlias<'figure'>;
|
|
40
|
+
/** Alias for h('figcaption', ...) - Figure caption */
|
|
41
|
+
declare const figcaption: HAlias<'figcaption'>;
|
|
42
|
+
|
|
43
|
+
/** Alias for h('input', ...) - Input field */
|
|
44
|
+
declare const input: HAlias<'input'>;
|
|
45
|
+
/** Alias for h('select', ...) - Select */
|
|
46
|
+
declare const select: HAlias<'select'>;
|
|
47
|
+
/** Alias for h('option', ...) - Options */
|
|
48
|
+
declare const option: HAlias<'option'>;
|
|
49
|
+
/** Alias for h('optgroup', ...) - Option Groups */
|
|
50
|
+
declare const optgroup: HAlias<'optgroup'>;
|
|
51
|
+
/** Alias for h('textarea', ...) - Textarea */
|
|
52
|
+
declare const textarea: HAlias<'textarea'>;
|
|
53
|
+
/** Alias for h('form', ...) - Form */
|
|
54
|
+
declare const form: HAlias<'form'>;
|
|
55
|
+
/** Alias for h('label', ...) - Label */
|
|
56
|
+
declare const label: HAlias<'label'>;
|
|
57
|
+
|
|
1
58
|
/**
|
|
2
59
|
* Create an enhanced HTMLElement.
|
|
3
60
|
* @param tag tag of an `HTMLElement`
|
|
4
61
|
* @param attr attribute object or className
|
|
5
62
|
* @param content a string or an array of HTMLEnhancedElement as child nodes
|
|
6
63
|
*/
|
|
7
|
-
declare function h<
|
|
64
|
+
declare function h<T extends HTMLTag>(tag: T, attr?: KAttribute | string, content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string): HTMLKEnhancedElement<T>;
|
|
8
65
|
|
|
9
66
|
/**
|
|
10
67
|
* ## About
|
|
11
68
|
* @package Kt.js
|
|
12
69
|
* @author Kasukabe Tsumugi <futami16237@gmail.com>
|
|
13
|
-
* @version 0.0.
|
|
70
|
+
* @version 0.0.9 (Last Update: 2025.09.20 16:19:02.366)
|
|
14
71
|
* @license MIT
|
|
15
72
|
* @link https://github.com/baendlorel/kt.js
|
|
73
|
+
* @link https://baendlorel.github.io/ Welcome to my site!
|
|
16
74
|
* @description A simple and easy-to-use web framework, never re-render. Abbreviation of Kasukabe Tsumugi.
|
|
17
75
|
* @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
|
|
18
76
|
*
|
|
@@ -23,14 +81,27 @@ declare function h<Tag extends HTMLElementTag>(tag: Tag, attr?: KAttribute | str
|
|
|
23
81
|
*/
|
|
24
82
|
declare function createApp(rootElement: HTMLKEnhancedElement, mountTo?: HTMLElement): void;
|
|
25
83
|
|
|
26
|
-
export { createApp, h };
|
|
84
|
+
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 };
|
|
27
85
|
|
|
28
86
|
// # from: src/global.d.ts
|
|
29
87
|
|
|
88
|
+
// # from: src/types/core.d.ts
|
|
89
|
+
type HFunction = <T extends HTMLTag>(
|
|
90
|
+
tag: T,
|
|
91
|
+
attr?: KAttribute | string,
|
|
92
|
+
content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string
|
|
93
|
+
) => HTMLKEnhancedElement<T>;
|
|
94
|
+
|
|
95
|
+
type HAlias<T extends HTMLTag> = (
|
|
96
|
+
attr?: KAttribute | string,
|
|
97
|
+
content?: (HTMLKEnhancedElement | string)[] | HTMLKEnhancedElement | string
|
|
98
|
+
) => HTMLKEnhancedElement<T>;
|
|
99
|
+
|
|
30
100
|
/**
|
|
31
101
|
* Used to create enhanced HTML elements
|
|
32
102
|
*/
|
|
33
103
|
export interface KAttribute {
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34
105
|
[k: string]: any;
|
|
35
106
|
|
|
36
107
|
id?: string;
|
|
@@ -61,6 +132,11 @@ export interface KAttribute {
|
|
|
61
132
|
| (string & {});
|
|
62
133
|
}
|
|
63
134
|
|
|
135
|
+
// # from: src/types/enhance.d.ts
|
|
136
|
+
export type HTMLTag = keyof HTMLElementTagNameMap;
|
|
137
|
+
|
|
138
|
+
export type KChildren = HTMLKEnhancedElement | Text;
|
|
139
|
+
|
|
64
140
|
interface KOnOptions extends AddEventListenerOptions {
|
|
65
141
|
/**
|
|
66
142
|
* This option's priority is higher than `once`.
|
|
@@ -74,23 +150,17 @@ type KListener<E extends HTMLElement, K extends keyof HTMLElementEventMap> = (
|
|
|
74
150
|
ev: HTMLElementEventMap[K]
|
|
75
151
|
) => unknown;
|
|
76
152
|
|
|
77
|
-
|
|
78
|
-
export type HTMLElementTag = keyof HTMLElementTagNameMap;
|
|
79
|
-
|
|
80
|
-
export type KChildren = HTMLKEnhancedElement | Text;
|
|
81
|
-
|
|
82
|
-
interface KEnhanced {
|
|
153
|
+
interface KEnhancedPrivates {
|
|
83
154
|
/**
|
|
84
155
|
* Unique numeric identifier for a KT.js enhanced element instance.
|
|
85
156
|
* Used internally to track and distinguish enhanced elements.
|
|
86
157
|
*/
|
|
87
|
-
|
|
158
|
+
id: number;
|
|
88
159
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
*/
|
|
92
|
-
isKT: true;
|
|
160
|
+
text: Text;
|
|
161
|
+
}
|
|
93
162
|
|
|
163
|
+
interface KEnhanced {
|
|
94
164
|
/**
|
|
95
165
|
* The element's text content as maintained by KT.js.
|
|
96
166
|
* - it is not recommended to use `textContent` any more
|
|
@@ -168,6 +238,24 @@ type NonSpecialTags = {
|
|
|
168
238
|
* It combines the standard HTMLElement properties and methods
|
|
169
239
|
* with KT.js enhancements defined in KEnhanced.
|
|
170
240
|
*/
|
|
171
|
-
export type HTMLKEnhancedElement<T extends
|
|
241
|
+
export type HTMLKEnhancedElement<T extends HTMLTag = NonSpecialTags> =
|
|
172
242
|
(HTMLElement extends HTMLElementTagNameMap[T] ? HTMLElement : HTMLElementTagNameMap[T]) &
|
|
173
243
|
KEnhanced;
|
|
244
|
+
|
|
245
|
+
// # from: src/types/type-utils.d.ts
|
|
246
|
+
type IsSameType<A, B> =
|
|
247
|
+
(<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2
|
|
248
|
+
? (<T>() => T extends B ? 1 : 2) extends <T>() => T extends A ? 1 : 2
|
|
249
|
+
? true
|
|
250
|
+
: false
|
|
251
|
+
: false;
|
|
252
|
+
|
|
253
|
+
type PickProperty<T> = {
|
|
254
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
255
|
+
[K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
type PickMethod<T> = {
|
|
259
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
260
|
+
[K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
|
|
261
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=
|
|
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};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kt.js",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Kasukabe Tsumugi",
|
|
6
6
|
"email": "futami16237@gmail.com"
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
"vitest": "^3.2.4"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
+
"bind-params": "^1.1.0",
|
|
68
69
|
"defered-branch": "^1.2.2"
|
|
69
70
|
}
|
|
70
71
|
}
|