kt.js 0.1.0 → 0.1.2

package/README.md

@@ -4,7 +4,7 @@
 
 [![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
 
-[中文](README.zh.md) | [English](README.md) | [CHANGLOG✨](CHANGELOG.md)
+[CHANGLOG✨](CHANGELOG.md)
 
 > Note: This framework is still under development. APIs, type declarations, and other parts **may change frequently**. If you use it, please watch for updates in the near future. Feel free to mail me if you have any questions!
 
@@ -45,7 +45,16 @@ This will create the following DOM structure:
 </section>
 ```
 
-** Work with `@emotion/css`**
+If you give a function in the attributes, it will be treated as an event listener, and the key will be considered as the event name:
+
+```ts
+const button = btn({ click: () => alert('Clicked!') }, 'Click me');
+// this equals
+const button = btn(undefined, 'Click me');
+button.addEventListener('click', () => alert('Clicked!'));
+```
+
+Work with `@emotion/css`
 
 ```ts
 import { css } from '@emotion/css';
@@ -58,6 +67,40 @@ const className = css`
 h('div', { class: className }, 'Styled text');
 ```
 
+## Router
+
+KT.js includes a lightweight client-side router:
+
+```ts
+import { createRouter, div, h1 } from 'kt.js';
+
+const router = createRouter({
+  mode: 'hash', // or 'history'
+  container: document.getElementById('app'),
+  routes: [
+    {
+      path: '/',
+      handler: () => div({}, [h1({}, 'Home Page')]),
+    },
+    {
+      path: '/user/:id',
+      handler: (ctx) => div({}, [h1({}, `User ${ctx.params.id}`)]),
+    },
+  ],
+});
+
+router.start();
+```
+
+**Features:**
+
+- Hash and History API routing
+- Dynamic route parameters
+- Query string parsing
+- Navigation guards
+- Lazy loading support
+- No dependencies
+
 ## Notes
 
 - `call`, `apply` on `Function.prototype` is trusted.

package/dist/index.mjs

@@ -1 +1 @@
-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};
+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.textContent=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.1.0",
+	"version": "0.1.2",
 	"author": {
 		"name": "Kasukabe Tsumugi",
 		"email": "futami16237@gmail.com"

package/README.zh.md

@@ -1,109 +0,0 @@
-# KT.js
-
-[![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
-
-[中文](README.zh.md) | [English](README.md) | [CHANGLOG](CHANGELOG.md)
-
-> 注意：本框架仍在开发中。API、类型声明及其它部分可能会经常变更。若在生产中使用，请关注后续更新；有问题也欢迎发邮件联系我。
-
-KT.js 是一个极简、高性能的 DOM 工具库，专注于最小化重渲染和直接的 DOM 操作。它避免不必要的强制重渲染，力求将 DOM 更新控制在最少范围，从而获得最佳性能。
-
-更多优秀的项目请访问作者主页：[我的主页💛](https://baendlorel.github.io/?repoType=npm)
-
-## 设计理念
-
-作为一个前端工具库，频繁创建大量变量与对象会对浏览器及 JS 引擎（如 V8、SpiderMonkey 或 JSC）造成负担。因此我设计了 KT.js。
-
-KT.js 遵循一条简单规则：避免不必要的重绘（repaint）。它直接并且只在必要的位置更新 DOM —— 无虚拟 DOM、无自动 diff。这样可以让 UI 更可预测且更快，同时把控制权交还给开发者。
-
-- 直接操作 DOM：仅更新发生变化的部分。
-- 最小化更新：避免不必要的重排（reflow）与重绘（repaint）。
-- 可预测且高性能：界面稳定、响应迅速。
-- 开发者掌控：你决定何时更新。
-
-## 快速开始
-
-推荐使用 pnpm 安装，但也支持 npm：
-
-```bash
-npm install kt.js
-# or
-pnpm add kt.js
-```
-
-在项目中引入并使用：
-
-```ts
-import { h, createApp } from 'kt.js';
-
-const app = h('div', { id: 'app' }, 'Hello, KT.js!');
-
-createApp(app);
-```
-
-## API 概览
-
-- `h` — 创建一个加强版的HTML元素。
-  - 常见用法：`h('div', { id: 'root' }, 'Hello')`。
-  - 返回一个 `HTMLKElement`（即带有额外 enhance 属性的 HTMLElement，详见下文）。
-  - 提供一组别名，例如 `div`、`span`、`ul` 等。
-    - `div(attr, content)` 等价于 `h('div', attr, content)`。
-
-- `createApp` — 将根元素挂载到文档中。
-  - 默认查找 `#app`，找不到时回退到 `document.body`，也可以通过`mountTo`入参指定挂载位置。
-  - 函数签名：`createApp(rootElement: HTMLKElement, mountTo?: HTMLElement)`
-
-** 与 `@emotion/css` 一起使用 **
-
-> 早期我实现过自己的 CSS 处理器，但后来发现没必要。
-
-示例：
-
-```ts
-import { css } from '@emotion/css';
-
-const className = css`
-  color: red;
-  font-size: 20px;
-`;
-
-h('div', { class: className }, 'Styled text');
-```
-
-## Enhance 增强后新增的属性与方法
-
-当对一个元素调用 `enhance(element)`（`h` 在需要时会在内部完成该步骤）后，HTMLElement 会变为 `HTMLKElement`，并添加如下扩展：
-
-- 属性
-  - `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