@ktjs/core 0.22.5 → 0.23.0

package/dist/index.d.ts

@@ -95,6 +95,12 @@ interface KTBaseAttribute {
    */
   'k-model'?: KTRef<any>;
 
+  /**
+   * Directly apply html string to `innerHTML`.
+   * - Would be reactive if `KTRef` instance is provided
+   */
+  'k-html'?: any;
+
   // # normal HTML attributes
   id?: string;
   class?: string;
@@ -172,7 +178,7 @@ type KTComponent = (
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.iife.js

@@ -8,6 +8,7 @@ var __ktjs_core__ = (function (exports) {
 
     // DOM manipulation utilities
     // # dom natives
+    const $isNode = (x) => x?.nodeType > 0;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -54,8 +55,9 @@ var __ktjs_core__ = (function (exports) {
     };
 
     // Shared utilities and cached native methods for kt.js framework
+    // import './misc/symbol-polyfill.js';
     // Re-export all utilities
-    Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
 
     class KTRef {
         /**
@@ -235,13 +237,24 @@ var __ktjs_core__ = (function (exports) {
                 }
             }
         }
+        if ('k-html' in attr) {
+            const html = attr['k-html'];
+            if (isKTRef(html)) {
+                element.innerHTML = html.value;
+                html.addOnChange((v) => (element.innerHTML = v));
+            }
+            else {
+                element.innerHTML = html;
+            }
+        }
         for (const key in attr) {
             if (key === 'class' ||
                 key === 'className' ||
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
-                key.startsWith('k-model') ||
+                key === 'k-model' ||
+                key === 'k-html' ||
                 key === 'ref') {
                 continue;
             }
@@ -252,6 +265,7 @@ var __ktjs_core__ = (function (exports) {
             }
             // normal attributes
             else {
+                // todo 这里也可以绑定ref的
                 (handlers[key] || defaultHandler)(element, key, o);
             }
         }
@@ -268,13 +282,25 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
             return;
         }
-        if (typeof c === 'object' && c !== null && 'isKT' in c) {
-            $append.call(element, c.value);
+        if (isKTRef(c)) {
+            let node = assureNode(c.value);
+            $append.call(element, node);
+            c.addOnChange((newValue, oldValue) => {
+                if ($isNode(newValue) && $isNode(oldValue)) {
+                    // & this case is handled automically in `class KTRef`
+                    // todo 2 cases might be able to merge into 1
+                    return;
+                }
+                const oldNode = node;
+                node = assureNode(newValue);
+                oldNode.replaceWith(node);
+            });
         }
         else {
             $append.call(element, c);
@@ -360,7 +386,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+     * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.legacy.js

@@ -8,6 +8,7 @@ var __ktjs_core__ = (function (exports) {
 
     // DOM manipulation utilities
     // # dom natives
+    const $isNode = (x) => x?.nodeType > 0;
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -54,8 +55,9 @@ var __ktjs_core__ = (function (exports) {
     };
 
     // Shared utilities and cached native methods for kt.js framework
+    // import './misc/symbol-polyfill.js';
     // Re-export all utilities
-    Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
 
     var KTRef = /** @class */ (function () {
         function KTRef(_value, _onChanges) {
@@ -234,13 +236,24 @@ var __ktjs_core__ = (function (exports) {
                 }
             }
         }
+        if ('k-html' in attr) {
+            var html = attr['k-html'];
+            if (isKTRef(html)) {
+                element.innerHTML = html.value;
+                html.addOnChange(function (v) { return (element.innerHTML = v); });
+            }
+            else {
+                element.innerHTML = html;
+            }
+        }
         for (var key in attr) {
             if (key === 'class' ||
                 key === 'className' ||
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-if' ||
-                key.startsWith('k-model') ||
+                key === 'k-model' ||
+                key === 'k-html' ||
                 key === 'ref') {
                 continue;
             }
@@ -251,6 +264,7 @@ var __ktjs_core__ = (function (exports) {
             }
             // normal attributes
             else {
+                // todo 这里也可以绑定ref的
                 (handlers[key] || defaultHandler)(element, key, o);
             }
         }
@@ -267,13 +281,25 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    var assureNode = function (o) { return ($isNode(o) ? o : document.createTextNode(o)); };
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
             return;
         }
-        if (typeof c === 'object' && c !== null && 'isKT' in c) {
-            $append.call(element, c.value);
+        if (isKTRef(c)) {
+            var node_1 = assureNode(c.value);
+            $append.call(element, node_1);
+            c.addOnChange(function (newValue, oldValue) {
+                if ($isNode(newValue) && $isNode(oldValue)) {
+                    // & this case is handled automically in `class KTRef`
+                    // todo 2 cases might be able to merge into 1
+                    return;
+                }
+                var oldNode = node_1;
+                node_1 = assureNode(newValue);
+                oldNode.replaceWith(node_1);
+            });
         }
         else {
             $append.call(element, c);
@@ -362,7 +388,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+     * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.mjs

@@ -5,6 +5,7 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 
 // DOM manipulation utilities
 // # dom natives
+const $isNode = (x) => x?.nodeType > 0;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -51,8 +52,9 @@ const applyModel = (element, valueRef, propName, eventName) => {
 };
 
 // Shared utilities and cached native methods for kt.js framework
+// import './misc/symbol-polyfill.js';
 // Re-export all utilities
-Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
 
 class KTRef {
     /**
@@ -232,13 +234,24 @@ function attrIsObject(element, attr) {
             }
         }
     }
+    if ('k-html' in attr) {
+        const html = attr['k-html'];
+        if (isKTRef(html)) {
+            element.innerHTML = html.value;
+            html.addOnChange((v) => (element.innerHTML = v));
+        }
+        else {
+            element.innerHTML = html;
+        }
+    }
     for (const key in attr) {
         if (key === 'class' ||
             key === 'className' ||
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
-            key.startsWith('k-model') ||
+            key === 'k-model' ||
+            key === 'k-html' ||
             key === 'ref') {
             continue;
         }
@@ -249,6 +262,7 @@ function attrIsObject(element, attr) {
         }
         // normal attributes
         else {
+            // todo 这里也可以绑定ref的
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
@@ -265,13 +279,25 @@ function applyAttr(element, attr) {
     }
 }
 
+const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
         return;
     }
-    if (typeof c === 'object' && c !== null && 'isKT' in c) {
-        $append.call(element, c.value);
+    if (isKTRef(c)) {
+        let node = assureNode(c.value);
+        $append.call(element, node);
+        c.addOnChange((newValue, oldValue) => {
+            if ($isNode(newValue) && $isNode(oldValue)) {
+                // & this case is handled automically in `class KTRef`
+                // todo 2 cases might be able to merge into 1
+                return;
+            }
+            const oldNode = node;
+            node = assureNode(newValue);
+            oldNode.replaceWith(node);
+        });
     }
     else {
         $append.call(element, c);
@@ -357,7 +383,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.d.ts

@@ -87,6 +87,12 @@ interface KTBaseAttribute {
    */
   'k-model'?: KTRef<any>;
 
+  /**
+   * Directly apply html string to `innerHTML`.
+   * - Would be reactive if `KTRef` instance is provided
+   */
+  'k-html'?: any;
+
   // # normal HTML attributes
   id?: string;
   class?: string;
@@ -156,7 +162,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -5,6 +5,7 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 
 // DOM manipulation utilities
 // # dom natives
+const $isNode = (x) => x?.nodeType > 0;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -51,8 +52,9 @@ const applyModel = (element, valueRef, propName, eventName) => {
 };
 
 // Shared utilities and cached native methods for kt.js framework
+// import './misc/symbol-polyfill.js';
 // Re-export all utilities
-Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
 
 class KTRef {
     /**
@@ -232,13 +234,24 @@ function attrIsObject(element, attr) {
             }
         }
     }
+    if ('k-html' in attr) {
+        const html = attr['k-html'];
+        if (isKTRef(html)) {
+            element.innerHTML = html.value;
+            html.addOnChange((v) => (element.innerHTML = v));
+        }
+        else {
+            element.innerHTML = html;
+        }
+    }
     for (const key in attr) {
         if (key === 'class' ||
             key === 'className' ||
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
-            key.startsWith('k-model') ||
+            key === 'k-model' ||
+            key === 'k-html' ||
             key === 'ref') {
             continue;
         }
@@ -249,6 +262,7 @@ function attrIsObject(element, attr) {
         }
         // normal attributes
         else {
+            // todo 这里也可以绑定ref的
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
@@ -265,13 +279,25 @@ function applyAttr(element, attr) {
     }
 }
 
+const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
         return;
     }
-    if (typeof c === 'object' && c !== null && 'isKT' in c) {
-        $append.call(element, c.value);
+    if (isKTRef(c)) {
+        let node = assureNode(c.value);
+        $append.call(element, node);
+        c.addOnChange((newValue, oldValue) => {
+            if ($isNode(newValue) && $isNode(oldValue)) {
+                // & this case is handled automically in `class KTRef`
+                // todo 2 cases might be able to merge into 1
+                return;
+            }
+            const oldNode = node;
+            node = assureNode(newValue);
+            oldNode.replaceWith(node);
+        });
     }
     else {
         $append.call(element, c);
@@ -357,7 +383,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.d.ts

@@ -60,6 +60,12 @@ interface KTBaseAttribute {
    */
   'k-model'?: KTRef<any>;
 
+  /**
+   * Directly apply html string to `innerHTML`.
+   * - Would be reactive if `KTRef` instance is provided
+   */
+  'k-html'?: any;
+
   // # normal HTML attributes
   id?: string;
   class?: string;
@@ -129,7 +135,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -4,6 +4,7 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 
 // DOM manipulation utilities
 // # dom natives
+const $isNode = (x) => x?.nodeType > 0;
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,8 +51,9 @@ const applyModel = (element, valueRef, propName, eventName) => {
 };
 
 // Shared utilities and cached native methods for kt.js framework
+// import './misc/symbol-polyfill.js';
 // Re-export all utilities
-Object.defineProperty(window, '__ktjs__', { value: '0.22.2' });
+Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
 
 class KTRef {
     /**
@@ -186,13 +188,24 @@ function attrIsObject(element, attr) {
             }
         }
     }
+    if ('k-html' in attr) {
+        const html = attr['k-html'];
+        if (isKTRef(html)) {
+            element.innerHTML = html.value;
+            html.addOnChange((v) => (element.innerHTML = v));
+        }
+        else {
+            element.innerHTML = html;
+        }
+    }
     for (const key in attr) {
         if (key === 'class' ||
             key === 'className' ||
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
-            key.startsWith('k-model') ||
+            key === 'k-model' ||
+            key === 'k-html' ||
             key === 'ref') {
             continue;
         }
@@ -203,6 +216,7 @@ function attrIsObject(element, attr) {
         }
         // normal attributes
         else {
+            // todo 这里也可以绑定ref的
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
@@ -219,13 +233,25 @@ function applyAttr(element, attr) {
     }
 }
 
+const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
         return;
     }
-    if (typeof c === 'object' && c !== null && 'isKT' in c) {
-        $append.call(element, c.value);
+    if (isKTRef(c)) {
+        let node = assureNode(c.value);
+        $append.call(element, node);
+        c.addOnChange((newValue, oldValue) => {
+            if ($isNode(newValue) && $isNode(oldValue)) {
+                // & this case is handled automically in `class KTRef`
+                // todo 2 cases might be able to merge into 1
+                return;
+            }
+            const oldNode = node;
+            node = assureNode(newValue);
+            oldNode.replaceWith(node);
+        });
     }
     else {
         $append.call(element, c);
@@ -311,7 +337,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.22.5 (Last Update: 2026.02.03 09:07:21.411)
+ * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.22.5",
+  "version": "0.23.0",
   "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.22.2"
+    "@ktjs/shared": "0.22.3"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",