@ktjs/core 0.21.1 → 0.22.2

package/dist/index.mjs

@@ -3,14 +3,8 @@ 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
-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
@@ -47,10 +41,108 @@ const $append = // for ie 9/10/11
         }
     };
 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) {
@@ -116,6 +208,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -138,7 +231,7 @@ function applyAttr(element, attr) {
         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.');
     }
 }
 
@@ -193,6 +286,30 @@ function applyContent(element, content) {
     }
 }
 
+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);
@@ -210,7 +327,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## 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!
@@ -219,7 +336,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  */
 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) {
@@ -239,97 +356,16 @@ const h = (tag, attr, content) => {
     // * 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 };
@@ -360,7 +396,7 @@ function jsx(tag, props) {
                 }
                 const oldEl = el;
                 el = newValue ? create(tag, props) : placeholder();
-                $replaceWith.call(oldEl, el);
+                oldEl.replaceWith(el);
                 maybeDummyRef.value = el;
             });
             condition = kif.value;
@@ -381,7 +417,7 @@ function jsx(tag, props) {
  * 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/jsx/index.d.ts

@@ -66,12 +66,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
@@ -143,7 +146,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## 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!

package/dist/jsx/index.mjs

@@ -3,14 +3,8 @@ 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
-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
@@ -47,10 +41,108 @@ const $append = // for ie 9/10/11
         }
     };
 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) {
@@ -116,6 +208,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -138,7 +231,7 @@ function applyAttr(element, attr) {
         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.');
     }
 }
 
@@ -193,6 +286,30 @@ function applyContent(element, content) {
     }
 }
 
+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);
@@ -210,7 +327,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## 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!
@@ -219,7 +336,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  */
 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) {
@@ -239,97 +356,16 @@ const h = (tag, attr, content) => {
     // * 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 };
@@ -360,7 +396,7 @@ function jsx(tag, props) {
                 }
                 const oldEl = el;
                 el = newValue ? create(tag, props) : placeholder();
-                $replaceWith.call(oldEl, el);
+                oldEl.replaceWith(el);
                 maybeDummyRef.value = el;
             });
             condition = kif.value;
@@ -381,7 +417,7 @@ function jsx(tag, props) {
  * 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/jsx/jsx-runtime.d.ts

@@ -45,12 +45,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
@@ -122,7 +125,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## 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!