@ktjs/core 0.21.1 → 0.22.2

package/dist/jsx/jsx-runtime.mjs

@@ -2,14 +2,8 @@
 const $isArray = Array.isArray;
 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
@@ -46,10 +40,84 @@ 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, []);
+}
 
 const booleanHandler = (element, key, value) => {
     if (key in element) {
@@ -115,6 +183,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -137,7 +206,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.');
     }
 }
 
@@ -192,6 +261,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);
@@ -209,7 +302,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!
@@ -218,7 +311,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) {
@@ -238,74 +331,17 @@ 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;
+    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+        const kmodel = attr['k-model'];
+        if (isKTRef(kmodel)) {
+            applyKModel(element, kmodel);
         }
-        // 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;
-            }
+        else {
+            throw new Error('[kt.js error] k-model value must be a KTRef.');
         }
-        return false;
     }
-}
-const isKTRef = (obj) => {
-    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+    return element;
 };
-/**
- * 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, []);
-}
 
 const dummyRef = { value: null };
 const create = (tag, props) => {
@@ -335,7 +371,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;
@@ -356,7 +392,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.21.1",
+  "version": "0.22.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -44,7 +44,7 @@
     "directory": "packages/core"
   },
   "dependencies": {
-    "@ktjs/shared": "0.20.2"
+    "@ktjs/shared": "0.22.2"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",