@ktjs/core 0.20.3 → 0.22.0

package/dist/index.iife.js

@@ -3,15 +3,13 @@ var __ktjs_core__ = (function (exports) {
 
     // Cached native methods for performance optimization
     const $isArray = Array.isArray;
+    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
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -51,7 +49,97 @@ var __ktjs_core__ = (function (exports) {
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.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) {
@@ -117,6 +205,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -194,7 +283,29 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    document.createElement('div');
+    function register(element, valueRef, propName, eventName) {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange((newValue) => (element[propName] = newValue));
+        element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+    }
+    function applyModel(element, valueRef) {
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                register(element, valueRef, 'checked', 'change');
+            }
+            else {
+                register(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            register(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            register(element, valueRef, 'value', 'input');
+        }
+        console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+    }
+
     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);
@@ -212,7 +323,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
+     * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -241,101 +352,60 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        // if (tag === 'svg') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
-        // if (tag === 'math') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
-        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);
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            const kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyModel(element, kmodel);
             }
-            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;
-                }
+            else {
+                $throw('k-model value must be a KTRef.');
             }
-            return false;
         }
-    }
-    /**
-     * Reference to the created HTML 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] : []);
-    }
+        return element;
+    };
 
     const dummyRef = { value: null };
+    const create = (tag, props) => {
+        if (typeof tag === 'function') {
+            return tag(props);
+        }
+        else {
+            return h(tag, props, props.children);
+        }
+    };
+    const placeholder = () => document.createComment('k-if');
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
     function jsx(tag, props) {
-        const ref = props.ref?.isKT ? props.ref : dummyRef;
+        const maybeDummyRef = isKTRef(props.ref) ? props.ref : dummyRef;
         let el;
-        if ('k-if' in props && !props['k-if']) {
-            // & make comment placeholder in case that ref might be redrawn later
-            el = document.createComment('k-if');
-            ref.value = el;
-            return el;
-        }
-        // Handle function components
-        if (typeof tag === 'function') {
-            el = tag(props);
-        }
-        else {
-            el = h(tag, props, props.children);
+        if ('k-if' in props) {
+            const kif = props['k-if'];
+            let condition = kif; // assume boolean by default
+            // Handle reactive k-if
+            if (isKTRef(kif)) {
+                kif.addOnChange((newValue, oldValue) => {
+                    if (newValue === oldValue) {
+                        return;
+                    }
+                    const oldEl = el;
+                    el = newValue ? create(tag, props) : placeholder();
+                    oldEl.replaceWith(el);
+                    maybeDummyRef.value = el;
+                });
+                condition = kif.value;
+            }
+            if (!condition) {
+                // & make comment placeholder in case that ref might be redrawn later
+                el = placeholder();
+                maybeDummyRef.value = el;
+                return el;
+            }
         }
-        ref.value = el;
+        el = create(tag, props);
+        maybeDummyRef.value = el;
         return el;
     }
     /**
@@ -634,10 +704,12 @@ var __ktjs_core__ = (function (exports) {
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.h = h;
+    exports.isKTRef = isKTRef;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;
     exports.jsxs = jsxs;
     exports.ref = ref;
+    exports.surfaceRef = surfaceRef;
 
     return exports;
 

package/dist/index.legacy.js

@@ -3,15 +3,13 @@ var __ktjs_core__ = (function (exports) {
 
     // Cached native methods for performance optimization
     const $isArray = Array.isArray;
+    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
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -51,7 +49,94 @@ var __ktjs_core__ = (function (exports) {
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.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) {
@@ -119,6 +204,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
+                key.startsWith('k-model') ||
                 key === 'ref') {
                 continue;
             }
@@ -199,7 +285,29 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    document.createElement('div');
+    function register(element, valueRef, propName, eventName) {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange(function (newValue) { return (element[propName] = newValue); });
+        element.addEventListener(eventName, function () { return (valueRef.value = element[propName]); });
+    }
+    function applyModel(element, valueRef) {
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                register(element, valueRef, 'checked', 'change');
+            }
+            else {
+                register(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            register(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            register(element, valueRef, 'value', 'input');
+        }
+        console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+    }
+
     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); };
@@ -217,7 +325,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
+     * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -246,99 +354,60 @@ var __ktjs_core__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        // if (tag === 'svg') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
-        // if (tag === 'math') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            var kmodel = attr['k-model'];
+            if (isKTRef(kmodel)) {
+                applyModel(element, kmodel);
+            }
+            else {
+                $throw('k-model value must be a KTRef.');
+            }
+        }
         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;
-                }
-            }
-            return false;
-        };
-        return KTRef;
-    }());
-    /**
-     * Reference to the created HTML 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] : []);
-    }
-
     var dummyRef = { value: null };
+    var create = function (tag, props) {
+        if (typeof tag === 'function') {
+            return tag(props);
+        }
+        else {
+            return h(tag, props, props.children);
+        }
+    };
+    var placeholder = function () { return document.createComment('k-if'); };
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
     function jsx(tag, props) {
-        var _a;
-        var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : dummyRef;
+        var maybeDummyRef = isKTRef(props.ref) ? props.ref : dummyRef;
         var el;
-        if ('k-if' in props && !props['k-if']) {
-            // & make comment placeholder in case that ref might be redrawn later
-            el = document.createComment('k-if');
-            ref.value = el;
-            return el;
-        }
-        // Handle function components
-        if (typeof tag === 'function') {
-            el = tag(props);
-        }
-        else {
-            el = h(tag, props, props.children);
+        if ('k-if' in props) {
+            var kif = props['k-if'];
+            var condition = kif; // assume boolean by default
+            // Handle reactive k-if
+            if (isKTRef(kif)) {
+                kif.addOnChange(function (newValue, oldValue) {
+                    if (newValue === oldValue) {
+                        return;
+                    }
+                    var oldEl = el;
+                    el = newValue ? create(tag, props) : placeholder();
+                    oldEl.replaceWith(el);
+                    maybeDummyRef.value = el;
+                });
+                condition = kif.value;
+            }
+            if (!condition) {
+                // & make comment placeholder in case that ref might be redrawn later
+                el = placeholder();
+                maybeDummyRef.value = el;
+                return el;
+            }
         }
-        ref.value = el;
+        el = create(tag, props);
+        maybeDummyRef.value = el;
         return el;
     }
     /**
@@ -644,10 +713,12 @@ var __ktjs_core__ = (function (exports) {
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.h = h;
+    exports.isKTRef = isKTRef;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;
     exports.jsxs = jsxs;
     exports.ref = ref;
+    exports.surfaceRef = surfaceRef;
 
     return exports;