@ktjs/core 0.21.1 → 0.22.2

package/dist/index.d.ts

@@ -7,6 +7,8 @@ type HTMLTag = keyof HTMLElementTagNameMap;
 type SVGTag = keyof SVGElementTagNameMap;
 type MathMLTag = keyof MathMLElementTagNameMap;
 
+type InputElementTag = 'input' | 'select' | 'textarea';
+
 type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
 declare class KTRef<T> {
     /**
@@ -72,12 +74,15 @@ interface KTBaseAttribute {
   // # kt-specific attributes
   ref?: KTRef<JSX.Element>;
 
-  // todo 是否要让k-if是KTRef的时候具备响应能力?
   /**
    * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
    */
   'k-if'?: any;
-  // todo k-model如何指定value还是checked还是别的什么?
+
+  /**
+   * Register two-way data binding between an input element and a KTRef.
+   * - Default to regist `input` event and `value` property(`checked` for checkboxes and radios).
+   */
   'k-model'?: KTRef<any>;
 
   // # normal HTML attributes
@@ -157,7 +162,7 @@ type KTComponent = (
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+ * @version 0.22.2 (Last Update: 2026.02.02 20:28:37.901)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -1463,4 +1468,4 @@ interface KTForProps<T> {
 declare function KTFor<T>(props: KTForProps<T>): KTForElement;
 
 export { Fragment, KTAsync, KTFor, KTRef, h as createElement, createRedrawable, h, isKTRef, jsx, jsxDEV, jsxs, ref, surfaceRef };
-export type { EventHandler, HTMLTag, KTAttribute, KTForElement, KTForProps, KTRawAttr, KTRawContent, KTRawContents, KTSurfaceRef };
+export type { EventHandler, HTMLTag, InputElementTag, KTAttribute, KTForElement, KTForProps, KTRawAttr, KTRawContent, KTRawContents, KTSurfaceRef, MathMLTag, SVGTag };

package/dist/index.iife.js

@@ -6,14 +6,8 @@ var __ktjs_core__ = (function (exports) {
     const $entries = Object.entries;
     const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-    // Error handling utilities
-    const $throw = (message) => {
-        throw new Error('@ktjs/shared: ' + message);
-    };
-
     // DOM manipulation utilities
     // # dom natives
-    const $replaceWith = Element.prototype.replaceWith;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,10 +44,108 @@ var __ktjs_core__ = (function (exports) {
             }
         };
     const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    /**
+     * Used for `k-model`
+     */
+    const applyModel = (element, valueRef, propName, eventName) => {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange((newValue) => (element[propName] = newValue));
+        element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+    };
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+
+    class KTRef {
+        /**
+         * Indicates that this is a KTRef instance
+         */
+        isKT = true;
+        /**
+         * @internal
+         */
+        _value;
+        /**
+         * @internal
+         */
+        _onChanges;
+        constructor(_value, _onChanges) {
+            this._value = _value;
+            this._onChanges = _onChanges;
+        }
+        /**
+         * If new value and old value are both nodes, the old one will be replaced in the DOM
+         */
+        get value() {
+            return this._value;
+        }
+        set value(newValue) {
+            if (newValue === this._value) {
+                return;
+            }
+            // replace the old node with the new one in the DOM if both are nodes
+            if (this._value instanceof Node && newValue instanceof Node) {
+                if (newValue.contains(this._value)) {
+                    this._value.remove();
+                }
+                this._value.replaceWith(newValue);
+            }
+            const oldValue = this._value;
+            this._value = newValue;
+            for (let i = 0; i < this._onChanges.length; i++) {
+                this._onChanges[i](newValue, oldValue);
+            }
+        }
+        addOnChange(callback) {
+            this._onChanges.push(callback);
+        }
+        removeOnChange(callback) {
+            for (let i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    const isKTRef = (obj) => {
+        return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    };
+    /**
+     * Reference to the created HTML element.
+     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    function kcollect() {
+        const newObj = {};
+        const entries = $entries(this);
+        for (let i = 0; i < entries.length; i++) {
+            const key = entries[i][0];
+            if (key === 'kcollect') {
+                continue;
+            }
+            newObj[key] = entries[i][1].value;
+        }
+        return newObj;
+    }
+    /**
+     * Make all first-level properties of the object a `KTRef`.
+     * - `obj.a.b` is not reactive
+     */
+    const surfaceRef = (obj) => {
+        const entries = $entries(obj);
+        const newObj = { kcollect };
+        for (let i = 0; i < entries.length; i++) {
+            newObj[entries[i][0]] = ref(entries[i][1]);
+        }
+        return newObj;
+    };
 
     const booleanHandler = (element, key, value) => {
         if (key in element) {
@@ -119,6 +211,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -141,7 +234,7 @@ var __ktjs_core__ = (function (exports) {
             attrIsObject(element, attr);
         }
         else {
-            throw new Error('kt.js: attr must be an object.');
+            throw new Error('[kt.js error] attr must be an object.');
         }
     }
 
@@ -196,6 +289,30 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function applyKModel(element, valueRef) {
+        if (!isKTRef(valueRef)) {
+            console.warn('[kt.js warn] k-model value must be a KTRef.');
+            return;
+        }
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                applyModel(element, valueRef, 'checked', 'change');
+            }
+            else {
+                applyModel(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            applyModel(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            applyModel(element, valueRef, 'value', 'input');
+        }
+        else {
+            console.warn('[kt.js warn] not supported element for k-model:');
+        }
+    }
+
     const htmlCreator = (tag) => document.createElement(tag);
     const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
     const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
@@ -213,7 +330,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+     * @version 0.22.2 (Last Update: 2026.02.02 20:28:37.901)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -222,7 +339,7 @@ var __ktjs_core__ = (function (exports) {
      */
     const h = (tag, attr, content) => {
         if (typeof tag !== 'string') {
-            $throw('tagName must be a string.');
+            throw new Error('[kt.js error] tagName must be a string.');
         }
         if (attr) {
             if (SVG_ATTR_FLAG in attr) {
@@ -242,97 +359,16 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        return element;
-    };
-
-    class KTRef {
-        /**
-         * Indicates that this is a KTRef instance
-         */
-        isKT = true;
-        /**
-         * @internal
-         */
-        _value;
-        /**
-         * @internal
-         */
-        _onChanges;
-        constructor(_value, _onChanges) {
-            this._value = _value;
-            this._onChanges = _onChanges;
-        }
-        /**
-         * If new value and old value are both nodes, the old one will be replaced in the DOM
-         */
-        get value() {
-            return this._value;
-        }
-        set value(newValue) {
-            if (newValue === this._value) {
-                return;
-            }
-            // replace the old node with the new one in the DOM if both are nodes
-            if (this._value instanceof Node && newValue instanceof Node) {
-                if (newValue.contains(this._value)) {
-                    this._value.remove();
-                }
-                this._value.replaceWith(newValue);
-            }
-            const oldValue = this._value;
-            this._value = newValue;
-            for (let i = 0; i < this._onChanges.length; i++) {
-                this._onChanges[i](newValue, oldValue);
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            const kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyKModel(element, kmodel);
             }
-        }
-        addOnChange(callback) {
-            this._onChanges.push(callback);
-        }
-        removeOnChange(callback) {
-            for (let i = this._onChanges.length - 1; i >= 0; i--) {
-                if (this._onChanges[i] === callback) {
-                    this._onChanges.splice(i, 1);
-                    return true;
-                }
-            }
-            return false;
-        }
-    }
-    const isKTRef = (obj) => {
-        return typeof obj === 'object' && obj !== null && obj.isKT === true;
-    };
-    /**
-     * Reference to the created HTML element.
-     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        return new KTRef(value, onChange ? [onChange] : []);
-    }
-    function kcollect() {
-        const newObj = {};
-        const entries = $entries(this);
-        for (let i = 0; i < entries.length; i++) {
-            const key = entries[i][0];
-            if (key === 'kcollect') {
-                continue;
+            else {
+                throw new Error('[kt.js error] k-model value must be a KTRef.');
             }
-            newObj[key] = entries[i][1].value;
-        }
-        return newObj;
-    }
-    /**
-     * Make all first-level properties of the object a `KTRef`.
-     * - `obj.a.b` is not reactive
-     */
-    const surfaceRef = (obj) => {
-        const entries = $entries(obj);
-        const newObj = { kcollect };
-        for (let i = 0; i < entries.length; i++) {
-            newObj[entries[i][0]] = ref(entries[i][1]);
         }
-        return newObj;
+        return element;
     };
 
     const dummyRef = { value: null };
@@ -363,7 +399,7 @@ var __ktjs_core__ = (function (exports) {
                     }
                     const oldEl = el;
                     el = newValue ? create(tag, props) : placeholder();
-                    $replaceWith.call(oldEl, el);
+                    oldEl.replaceWith(el);
                     maybeDummyRef.value = el;
                 });
                 condition = kif.value;
@@ -384,7 +420,7 @@ var __ktjs_core__ = (function (exports) {
      * Note: kt.js doesn't have a real Fragment concept,
      */
     function Fragment(_props) {
-        throw new Error("kt.js doesn't have a Fragment concept");
+        throw new Error("[kt.js error] doesn't have a Fragment concept");
         // const { children } = props ?? {};
         // if (!children) {
         //   return ;

package/dist/index.legacy.js

@@ -6,14 +6,8 @@ var __ktjs_core__ = (function (exports) {
     const $entries = Object.entries;
     const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-    // Error handling utilities
-    const $throw = (message) => {
-        throw new Error('@ktjs/shared: ' + message);
-    };
-
     // DOM manipulation utilities
     // # dom natives
-    const $replaceWith = Element.prototype.replaceWith;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,10 +44,105 @@ var __ktjs_core__ = (function (exports) {
             }
         };
     const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    /**
+     * Used for `k-model`
+     */
+    const applyModel = (element, valueRef, propName, eventName) => {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange((newValue) => (element[propName] = newValue));
+        element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+    };
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+
+    var KTRef = /** @class */ (function () {
+        function KTRef(_value, _onChanges) {
+            /**
+             * Indicates that this is a KTRef instance
+             */
+            this.isKT = true;
+            this._value = _value;
+            this._onChanges = _onChanges;
+        }
+        Object.defineProperty(KTRef.prototype, "value", {
+            /**
+             * If new value and old value are both nodes, the old one will be replaced in the DOM
+             */
+            get: function () {
+                return this._value;
+            },
+            set: function (newValue) {
+                if (newValue === this._value) {
+                    return;
+                }
+                // replace the old node with the new one in the DOM if both are nodes
+                if (this._value instanceof Node && newValue instanceof Node) {
+                    if (newValue.contains(this._value)) {
+                        this._value.remove();
+                    }
+                    this._value.replaceWith(newValue);
+                }
+                var oldValue = this._value;
+                this._value = newValue;
+                for (var i = 0; i < this._onChanges.length; i++) {
+                    this._onChanges[i](newValue, oldValue);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KTRef.prototype.addOnChange = function (callback) {
+            this._onChanges.push(callback);
+        };
+        KTRef.prototype.removeOnChange = function (callback) {
+            for (var i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        };
+        return KTRef;
+    }());
+    var isKTRef = function (obj) {
+        return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    };
+    /**
+     * Reference to the created HTML element.
+     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    function kcollect() {
+        var newObj = {};
+        var entries = $entries(this);
+        for (var i = 0; i < entries.length; i++) {
+            var key = entries[i][0];
+            if (key === 'kcollect') {
+                continue;
+            }
+            newObj[key] = entries[i][1].value;
+        }
+        return newObj;
+    }
+    /**
+     * Make all first-level properties of the object a `KTRef`.
+     * - `obj.a.b` is not reactive
+     */
+    var surfaceRef = function (obj) {
+        var entries = $entries(obj);
+        var newObj = { kcollect: kcollect };
+        for (var i = 0; i < entries.length; i++) {
+            newObj[entries[i][0]] = ref(entries[i][1]);
+        }
+        return newObj;
+    };
 
     var booleanHandler = function (element, key, value) {
         if (key in element) {
@@ -121,6 +210,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -143,7 +233,7 @@ var __ktjs_core__ = (function (exports) {
             attrIsObject(element, attr);
         }
         else {
-            throw new Error('kt.js: attr must be an object.');
+            throw new Error('[kt.js error] attr must be an object.');
         }
     }
 
@@ -201,6 +291,30 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function applyKModel(element, valueRef) {
+        if (!isKTRef(valueRef)) {
+            console.warn('[kt.js warn] k-model value must be a KTRef.');
+            return;
+        }
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                applyModel(element, valueRef, 'checked', 'change');
+            }
+            else {
+                applyModel(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            applyModel(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            applyModel(element, valueRef, 'value', 'input');
+        }
+        else {
+            console.warn('[kt.js warn] not supported element for k-model:');
+        }
+    }
+
     var htmlCreator = function (tag) { return document.createElement(tag); };
     var svgCreator = function (tag) { return document.createElementNS('http://www.w3.org/2000/svg', tag); };
     var mathMLCreator = function (tag) { return document.createElementNS('http://www.w3.org/1998/Math/MathML', tag); };
@@ -218,7 +332,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.21.1 (Last Update: 2026.02.02 09:20:07.959)
+     * @version 0.22.2 (Last Update: 2026.02.02 20:28:37.901)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -227,7 +341,7 @@ var __ktjs_core__ = (function (exports) {
      */
     var h = function (tag, attr, content) {
         if (typeof tag !== 'string') {
-            $throw('tagName must be a string.');
+            throw new Error('[kt.js error] tagName must be a string.');
         }
         if (attr) {
             if (SVG_ATTR_FLAG in attr) {
@@ -247,94 +361,16 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        return element;
-    };
-
-    var KTRef = /** @class */ (function () {
-        function KTRef(_value, _onChanges) {
-            /**
-             * Indicates that this is a KTRef instance
-             */
-            this.isKT = true;
-            this._value = _value;
-            this._onChanges = _onChanges;
-        }
-        Object.defineProperty(KTRef.prototype, "value", {
-            /**
-             * If new value and old value are both nodes, the old one will be replaced in the DOM
-             */
-            get: function () {
-                return this._value;
-            },
-            set: function (newValue) {
-                if (newValue === this._value) {
-                    return;
-                }
-                // replace the old node with the new one in the DOM if both are nodes
-                if (this._value instanceof Node && newValue instanceof Node) {
-                    if (newValue.contains(this._value)) {
-                        this._value.remove();
-                    }
-                    this._value.replaceWith(newValue);
-                }
-                var oldValue = this._value;
-                this._value = newValue;
-                for (var i = 0; i < this._onChanges.length; i++) {
-                    this._onChanges[i](newValue, oldValue);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        KTRef.prototype.addOnChange = function (callback) {
-            this._onChanges.push(callback);
-        };
-        KTRef.prototype.removeOnChange = function (callback) {
-            for (var i = this._onChanges.length - 1; i >= 0; i--) {
-                if (this._onChanges[i] === callback) {
-                    this._onChanges.splice(i, 1);
-                    return true;
-                }
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            var kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyKModel(element, kmodel);
             }
-            return false;
-        };
-        return KTRef;
-    }());
-    var isKTRef = function (obj) {
-        return typeof obj === 'object' && obj !== null && obj.isKT === true;
-    };
-    /**
-     * Reference to the created HTML element.
-     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        return new KTRef(value, onChange ? [onChange] : []);
-    }
-    function kcollect() {
-        var newObj = {};
-        var entries = $entries(this);
-        for (var i = 0; i < entries.length; i++) {
-            var key = entries[i][0];
-            if (key === 'kcollect') {
-                continue;
+            else {
+                throw new Error('[kt.js error] k-model value must be a KTRef.');
             }
-            newObj[key] = entries[i][1].value;
         }
-        return newObj;
-    }
-    /**
-     * Make all first-level properties of the object a `KTRef`.
-     * - `obj.a.b` is not reactive
-     */
-    var surfaceRef = function (obj) {
-        var entries = $entries(obj);
-        var newObj = { kcollect: kcollect };
-        for (var i = 0; i < entries.length; i++) {
-            newObj[entries[i][0]] = ref(entries[i][1]);
-        }
-        return newObj;
+        return element;
     };
 
     var dummyRef = { value: null };
@@ -365,7 +401,7 @@ var __ktjs_core__ = (function (exports) {
                     }
                     var oldEl = el;
                     el = newValue ? create(tag, props) : placeholder();
-                    $replaceWith.call(oldEl, el);
+                    oldEl.replaceWith(el);
                     maybeDummyRef.value = el;
                 });
                 condition = kif.value;
@@ -386,7 +422,7 @@ var __ktjs_core__ = (function (exports) {
      * Note: kt.js doesn't have a real Fragment concept,
      */
     function Fragment(_props) {
-        throw new Error("kt.js doesn't have a Fragment concept");
+        throw new Error("[kt.js error] doesn't have a Fragment concept");
         // const { children } = props ?? {};
         // if (!children) {
         //   return ;