@ktjs/core 0.12.0 → 0.13.2

package/dist/jsx/index.mjs

@@ -2,16 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const $defines = Object.defineProperties;
-const $mark = (func, tag) => $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && 'then' in o && typeof o.then === 'function';
-
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,22 +40,30 @@ const $append = // for ie 9/10/11
         }
     };
 
-function booleanHandler(element, key, value) {
+const $isArray = Array.isArray;
+const $keys = Object.keys;
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -88,13 +86,18 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
     const style = attr.style;
@@ -114,11 +117,19 @@ function attrIsObject(element, attr) {
         delete attr.style;
     }
     const keys = $keys(attr);
+    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
     for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -205,7 +216,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.12.0 (Last Update: 2026.01.14 15:48:26.320)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -223,45 +234,67 @@ const h = ((tag, attr = '', content = '') => {
     applyContent(element, content);
     return element;
 });
-$mark(h, 'h');
 
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
- * @param _metadata metadata is ignored
  */
-function jsx(tag, props, ..._metadata) {
+function jsx(tag, props = {}) {
+    const ref = props.ref?.isKT ? props.ref : null;
+    if (ref) {
+        delete props.ref;
+    }
     // Handle function components
     if (typeof tag === 'function') {
-        const propObj = typeof props === 'string' ? { class: props } : props || {};
-        const children = propObj.children;
-        return tag({ ...propObj, children });
-    }
-    // Handle regular HTML tags
-    const propObj = typeof props === 'string' ? { class: props } : props;
-    if (propObj === undefined || propObj === null) {
-        return h(tag);
-    }
-    const children = propObj.children;
-    delete propObj.children;
-    // deal with ref attribute
-    const ref = propObj.ref?.isKT ? propObj.ref : null;
-    if (ref) {
-        delete propObj.ref;
+        let el = tag(props);
+        if (!el.redraw) {
+            el.redraw = (newProps) => {
+                props = newProps ? { ...props, ...newProps } : props;
+                // $ same as below
+                const old = el;
+                el = tag(props);
+                el.redraw = old.redraw; // inherit redraw
+                if (ref) {
+                    ref.value = el;
+                }
+                old.replaceWith(el);
+            };
+        }
+        if (ref) {
+            ref.value = el;
+        }
+        return el;
     }
-    const el = h(tag, propObj, children);
-    if (ref) {
-        ref.value = el;
+    else {
+        // & deal children here
+        let children = props.children;
+        delete props.children;
+        let el = h(tag, props, children);
+        if (ref) {
+            ref.value = el;
+        }
+        el.redraw = (newProps, newChildren) => {
+            props = newProps ? { ...props, ...newProps } : props;
+            children = (newChildren ?? children);
+            // $ same as above
+            const old = el;
+            el = h(tag, props, children);
+            el.redraw = old.redraw; // inherit redraw
+            if (ref) {
+                ref.value = el;
+            }
+            old.replaceWith(el);
+        };
+        return el;
     }
-    return el;
 }
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
 function Fragment(props) {
-    window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
-    // const { children } = props || {};
+    throw new Error("kt.js doesn't have a Fragment concept");
+    // const { children } = props ?? {};
     // if (!children) {
     //   return ;
     // }

package/dist/jsx/jsx-runtime.d.ts

@@ -10,6 +10,33 @@ interface KTRef<T> {
     isKT: true;
 }
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -86,7 +113,17 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
+
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -103,7 +140,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.12.0 (Last Update: 2026.01.14 15:48:26.320)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -112,12 +149,12 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  */
 declare const h: H;
 
+type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
- * @param _metadata metadata is ignored
  */
-declare function jsx<T extends HTMLTag>(tag: T | Function, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T] | HTMLElement;
+declare function jsx(tag: JSXTag, props?: KTAttribute): KTHTMLElement;
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,

package/dist/jsx/jsx-runtime.mjs

@@ -2,16 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const $defines = Object.defineProperties;
-const $mark = (func, tag) => $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && 'then' in o && typeof o.then === 'function';
-
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,22 +40,30 @@ const $append = // for ie 9/10/11
         }
     };
 
-function booleanHandler(element, key, value) {
+const $isArray = Array.isArray;
+const $keys = Object.keys;
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -88,13 +86,18 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
     const style = attr.style;
@@ -114,11 +117,19 @@ function attrIsObject(element, attr) {
         delete attr.style;
     }
     const keys = $keys(attr);
+    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
     for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -205,7 +216,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.12.0 (Last Update: 2026.01.14 15:48:26.320)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -223,45 +234,67 @@ const h = ((tag, attr = '', content = '') => {
     applyContent(element, content);
     return element;
 });
-$mark(h, 'h');
 
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
- * @param _metadata metadata is ignored
  */
-function jsx(tag, props, ..._metadata) {
+function jsx(tag, props = {}) {
+    const ref = props.ref?.isKT ? props.ref : null;
+    if (ref) {
+        delete props.ref;
+    }
     // Handle function components
     if (typeof tag === 'function') {
-        const propObj = typeof props === 'string' ? { class: props } : props || {};
-        const children = propObj.children;
-        return tag({ ...propObj, children });
-    }
-    // Handle regular HTML tags
-    const propObj = typeof props === 'string' ? { class: props } : props;
-    if (propObj === undefined || propObj === null) {
-        return h(tag);
-    }
-    const children = propObj.children;
-    delete propObj.children;
-    // deal with ref attribute
-    const ref = propObj.ref?.isKT ? propObj.ref : null;
-    if (ref) {
-        delete propObj.ref;
+        let el = tag(props);
+        if (!el.redraw) {
+            el.redraw = (newProps) => {
+                props = newProps ? { ...props, ...newProps } : props;
+                // $ same as below
+                const old = el;
+                el = tag(props);
+                el.redraw = old.redraw; // inherit redraw
+                if (ref) {
+                    ref.value = el;
+                }
+                old.replaceWith(el);
+            };
+        }
+        if (ref) {
+            ref.value = el;
+        }
+        return el;
     }
-    const el = h(tag, propObj, children);
-    if (ref) {
-        ref.value = el;
+    else {
+        // & deal children here
+        let children = props.children;
+        delete props.children;
+        let el = h(tag, props, children);
+        if (ref) {
+            ref.value = el;
+        }
+        el.redraw = (newProps, newChildren) => {
+            props = newProps ? { ...props, ...newProps } : props;
+            children = (newChildren ?? children);
+            // $ same as above
+            const old = el;
+            el = h(tag, props, children);
+            el.redraw = old.redraw; // inherit redraw
+            if (ref) {
+                ref.value = el;
+            }
+            old.replaceWith(el);
+        };
+        return el;
     }
-    return el;
 }
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
 function Fragment(props) {
-    window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
-    // const { children } = props || {};
+    throw new Error("kt.js doesn't have a Fragment concept");
+    // const { children } = props ?? {};
     // if (!children) {
     //   return ;
     // }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.12.0",
+  "version": "0.13.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",