@ktjs/core 0.12.0 → 0.13.2

package/dist/index.legacy.js

@@ -5,38 +5,6 @@ var __ktjs_core__ = (function (exports) {
         throw new Error('kt.js: ' + message);
     };
 
-    var $isArray = Array.isArray;
-    var $keys = Object.keys;
-    var $defines = Object.defineProperties;
-    var $mark = function (func, tag) {
-        return $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
-    };
-    var emptyPromiseHandler = function () { return ({}); };
-    if (typeof Promise === 'undefined') {
-        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-    }
-    var $isThenable = function (o) {
-        return typeof o === 'object' && o !== null && 'then' in o && typeof o.then === 'function';
-    };
-
-    ((function () {
-        var _a;
-        var runtimeKey = '__ktjs__';
-        if (runtimeKey in window) {
-            return;
-        }
-        var __ktjs__ = Object.create(null);
-        // & We can add new functions when we need more
-        var descriptor = {
-            throws: { value: $throw, enumerable: true },
-            defines: { value: $defines, enumerable: true },
-            mark: { value: $mark, enumerable: true },
-        };
-        $defines(__ktjs__, descriptor);
-        $defines(window, (_a = {}, _a[runtimeKey] = { value: __ktjs__, enumerable: true }, _a));
-        return {};
-    }))();
-
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -83,22 +51,32 @@ var __ktjs_core__ = (function (exports) {
             }
         };
 
-    function booleanHandler(element, key, value) {
+    var $isArray = Array.isArray;
+    var $keys = Object.keys;
+    var emptyPromiseHandler = function () { return ({}); };
+    if (typeof Promise === 'undefined') {
+        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+    }
+    var $isThenable = function (o) {
+        return typeof o === 'object' && o !== null && typeof o.then === 'function';
+    };
+
+    var booleanHandler = function (element, key, value) {
         if (key in element) {
             element[key] = !!value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
-    function valueHandler(element, key, value) {
+    };
+    var valueHandler = function (element, key, value) {
         if (key in element) {
             element[key] = value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
+    };
     // Attribute handlers map for optimized lookup
     var handlers = {
         checked: booleanHandler,
@@ -121,13 +99,30 @@ var __ktjs_core__ = (function (exports) {
         muted: booleanHandler,
         defer: booleanHandler,
         async: booleanHandler,
-        hidden: function (element, _key, value) {
-            element.hidden = !!value;
-        },
+        hidden: function (element, _key, value) { return (element.hidden = !!value); },
     };
-    var defaultHandler = function (element, key, value) {
-        return element.setAttribute(key, value);
+    var ktEventHandlers = {
+        'on:ktchange': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(element.value); });
+        },
+        'ontrim:ktchange': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(element.value.trim()); });
+        },
+        'on:ktchangenumber': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(Number(element.value)); });
+        },
+        'on:ktinput': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(element.value); });
+        },
+        'ontrim:ktinput': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(element.value.trim()); });
+        },
+        'on:ktinputnumber': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(Number(element.value)); });
+        },
     };
+
+    var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
     function attrIsObject(element, attr) {
         var classValue = attr.class;
         var style = attr.style;
@@ -147,11 +142,19 @@ var __ktjs_core__ = (function (exports) {
             delete attr.style;
         }
         var keys = $keys(attr);
+        // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
         for (var i = keys.length - 1; i >= 0; i--) {
             var key = keys[i];
             var 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
+            var 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;
@@ -241,7 +244,7 @@ var __ktjs_core__ = (function (exports) {
      * ## 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!
@@ -261,7 +264,6 @@ var __ktjs_core__ = (function (exports) {
         applyContent(element, content);
         return element;
     });
-    $mark(h, 'h');
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -299,41 +301,65 @@ var __ktjs_core__ = (function (exports) {
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
-     * @param _metadata metadata is ignored
      */
     function jsx(tag, props) {
         var _a;
+        if (props === void 0) { props = {}; }
+        var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : null;
+        if (ref) {
+            delete props.ref;
+        }
         // Handle function components
         if (typeof tag === 'function') {
-            var propObj_1 = typeof props === 'string' ? { class: props } : props || {};
-            var children_1 = propObj_1.children;
-            return tag(__assign(__assign({}, propObj_1), { children: children_1 }));
-        }
-        // Handle regular HTML tags
-        var propObj = typeof props === 'string' ? { class: props } : props;
-        if (propObj === undefined || propObj === null) {
-            return h(tag);
-        }
-        var children = propObj.children;
-        delete propObj.children;
-        // deal with ref attribute
-        var ref = ((_a = propObj.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? propObj.ref : null;
-        if (ref) {
-            delete propObj.ref;
+            var el_1 = tag(props);
+            if (!el_1.redraw) {
+                el_1.redraw = function (newProps) {
+                    props = newProps ? __assign(__assign({}, props), newProps) : props;
+                    // $ same as below
+                    var old = el_1;
+                    el_1 = tag(props);
+                    el_1.redraw = old.redraw; // inherit redraw
+                    if (ref) {
+                        ref.value = el_1;
+                    }
+                    old.replaceWith(el_1);
+                };
+            }
+            if (ref) {
+                ref.value = el_1;
+            }
+            return el_1;
         }
-        var el = h(tag, propObj, children);
-        if (ref) {
-            ref.value = el;
+        else {
+            // & deal children here
+            var children_1 = props.children;
+            delete props.children;
+            var el_2 = h(tag, props, children_1);
+            if (ref) {
+                ref.value = el_2;
+            }
+            el_2.redraw = function (newProps, newChildren) {
+                props = newProps ? __assign(__assign({}, props), newProps) : props;
+                children_1 = (newChildren !== null && newChildren !== void 0 ? newChildren : children_1);
+                // $ same as above
+                var old = el_2;
+                el_2 = h(tag, props, children_1);
+                el_2.redraw = old.redraw; // inherit redraw
+                if (ref) {
+                    ref.value = el_2;
+                }
+                old.replaceWith(el_2);
+            };
+            return el_2;
         }
-        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/index.mjs

@@ -2,33 +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';
-
-(() => {
-    const runtimeKey = '__ktjs__';
-    if (runtimeKey in window) {
-        return;
-    }
-    const __ktjs__ = Object.create(null);
-    // & We can add new functions when we need more
-    const descriptor = {
-        throws: { value: $throw, enumerable: true },
-        defines: { value: $defines, enumerable: true },
-        mark: { value: $mark, enumerable: true },
-    };
-    $defines(__ktjs__, descriptor);
-    $defines(window, { [runtimeKey]: { value: __ktjs__, enumerable: true } });
-    return {};
-})();
-
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -67,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,
@@ -105,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;
@@ -131,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;
@@ -222,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!
@@ -240,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/index.d.ts

@@ -16,6 +16,33 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
+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
@@ -92,7 +119,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>) & {
@@ -109,7 +146,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!
@@ -118,12 +155,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,
@@ -141,24 +178,5 @@ declare const jsxDEV: typeof jsx;
  */
 declare const jsxs: typeof jsx;
 
-declare global {
-  namespace JSX {
-    type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
-
 export { Fragment, h as createElement, jsx, jsxDEV, jsxs, ref };
-export type { KTRef };
+export type { KTHTMLElement, KTRef };