@ktjs/core 0.13.2 → 0.14.1

package/dist/index.d.ts

@@ -69,6 +69,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   ref?: KTRef<HTMLElement>;
+  'k-if'?: any;
 
   id?: string;
   class?: string;
@@ -160,7 +161,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.iife.js

@@ -5,52 +5,6 @@ var __ktjs_core__ = (function (exports) {
         throw new Error('kt.js: ' + message);
     };
 
-    /**
-     * & Remove `bind` because it is shockingly slower than wrapper
-     * & `window.document` is safe because it is not configurable and its setter is undefined
-     */
-    const $appendChild = HTMLElement.prototype.appendChild;
-    const originAppend = HTMLElement.prototype.append;
-    const $append = // for ie 9/10/11
-     typeof originAppend === 'function'
-        ? function (...args) {
-            return originAppend.apply(this, args);
-        }
-        : function (...nodes) {
-            if (nodes.length < 50) {
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(this, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(this, node);
-                    }
-                }
-            }
-            else {
-                const fragment = document.createDocumentFragment();
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(fragment, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(fragment, node);
-                    }
-                }
-                $appendChild.call(this, fragment);
-            }
-        };
-
-    const $isArray = Array.isArray;
-    const $keys = Object.keys;
-    const emptyPromiseHandler = () => ({});
-    if (typeof Promise === 'undefined') {
-        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-    }
-    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
     const booleanHandler = (element, key, value) => {
         if (key in element) {
             element[key] = !!value;
@@ -102,6 +56,12 @@ var __ktjs_core__ = (function (exports) {
 
     const defaultHandler = (element, key, value) => element.setAttribute(key, value);
     function attrIsObject(element, attr) {
+        // & deal k-if first
+        if ('k-if' in attr) {
+            if (!attr['k-if']) {
+                return false;
+            }
+        }
         const classValue = attr.class;
         const style = attr.style;
         if (classValue !== undefined) {
@@ -119,10 +79,7 @@ var __ktjs_core__ = (function (exports) {
             }
             delete attr.style;
         }
-        const keys = $keys(attr);
-        // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
-        for (let i = keys.length - 1; i >= 0; i--) {
-            const key = keys[i];
+        for (const key in attr) {
             const o = attr[key];
             // force register on:xxx as an event handler
             // !if o is not valid, the throwing job will be done by `on`, not kt.js
@@ -150,19 +107,66 @@ var __ktjs_core__ = (function (exports) {
         if (style !== undefined) {
             attr.style = style;
         }
+        return true;
     }
     function applyAttr(element, attr) {
         if (typeof attr === 'string') {
             element.className = attr;
+            return true;
         }
         else if (typeof attr === 'object' && attr !== null) {
-            attrIsObject(element, attr);
+            return attrIsObject(element, attr);
         }
         else {
-            $throw('attr must be an object/string.');
+            throw new Error('kt.js: attr must be an object/string.');
         }
     }
 
+    /**
+     * & Remove `bind` because it is shockingly slower than wrapper
+     * & `window.document` is safe because it is not configurable and its setter is undefined
+     */
+    const $appendChild = HTMLElement.prototype.appendChild;
+    const originAppend = HTMLElement.prototype.append;
+    const $append = // for ie 9/10/11
+     typeof originAppend === 'function'
+        ? function (...args) {
+            return originAppend.apply(this, args);
+        }
+        : function (...nodes) {
+            if (nodes.length < 50) {
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(this, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(this, node);
+                    }
+                }
+            }
+            else {
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(fragment, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(fragment, node);
+                    }
+                }
+                $appendChild.call(this, fragment);
+            }
+        };
+
+    const $isArray = Array.isArray;
+    const emptyPromiseHandler = () => ({});
+    if (typeof Promise === 'undefined') {
+        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+    }
+    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
@@ -219,7 +223,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+     * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -233,7 +237,10 @@ var __ktjs_core__ = (function (exports) {
         // * start creating the element
         const element = document.createElement(tag);
         // * Handle content
-        applyAttr(element, attr);
+        const kif = applyAttr(element, attr);
+        if (!kif) {
+            return document.createComment('k-if');
+        }
         applyContent(element, content);
         return element;
     });

package/dist/index.legacy.js

@@ -5,62 +5,6 @@ var __ktjs_core__ = (function (exports) {
         throw new Error('kt.js: ' + message);
     };
 
-    /**
-     * & Remove `bind` because it is shockingly slower than wrapper
-     * & `window.document` is safe because it is not configurable and its setter is undefined
-     */
-    var $appendChild = HTMLElement.prototype.appendChild;
-    var originAppend = HTMLElement.prototype.append;
-    var $append = // for ie 9/10/11
-     typeof originAppend === 'function'
-        ? function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return originAppend.apply(this, args);
-        }
-        : function () {
-            var nodes = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                nodes[_i] = arguments[_i];
-            }
-            if (nodes.length < 50) {
-                for (var i = 0; i < nodes.length; i++) {
-                    var node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(this, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(this, node);
-                    }
-                }
-            }
-            else {
-                var fragment = document.createDocumentFragment();
-                for (var i = 0; i < nodes.length; i++) {
-                    var node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(fragment, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(fragment, node);
-                    }
-                }
-                $appendChild.call(this, fragment);
-            }
-        };
-
-    var $isArray = Array.isArray;
-    var $keys = Object.keys;
-    var emptyPromiseHandler = function () { return ({}); };
-    if (typeof Promise === 'undefined') {
-        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-    }
-    var $isThenable = function (o) {
-        return typeof o === 'object' && o !== null && typeof o.then === 'function';
-    };
-
     var booleanHandler = function (element, key, value) {
         if (key in element) {
             element[key] = !!value;
@@ -124,6 +68,12 @@ var __ktjs_core__ = (function (exports) {
 
     var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
     function attrIsObject(element, attr) {
+        // & deal k-if first
+        if ('k-if' in attr) {
+            if (!attr['k-if']) {
+                return false;
+            }
+        }
         var classValue = attr.class;
         var style = attr.style;
         if (classValue !== undefined) {
@@ -141,10 +91,7 @@ var __ktjs_core__ = (function (exports) {
             }
             delete attr.style;
         }
-        var keys = $keys(attr);
-        // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
-        for (var i = keys.length - 1; i >= 0; i--) {
-            var key = keys[i];
+        for (var key in attr) {
             var o = attr[key];
             // force register on:xxx as an event handler
             // !if o is not valid, the throwing job will be done by `on`, not kt.js
@@ -172,19 +119,76 @@ var __ktjs_core__ = (function (exports) {
         if (style !== undefined) {
             attr.style = style;
         }
+        return true;
     }
     function applyAttr(element, attr) {
         if (typeof attr === 'string') {
             element.className = attr;
+            return true;
         }
         else if (typeof attr === 'object' && attr !== null) {
-            attrIsObject(element, attr);
+            return attrIsObject(element, attr);
         }
         else {
-            $throw('attr must be an object/string.');
+            throw new Error('kt.js: attr must be an object/string.');
         }
     }
 
+    /**
+     * & Remove `bind` because it is shockingly slower than wrapper
+     * & `window.document` is safe because it is not configurable and its setter is undefined
+     */
+    var $appendChild = HTMLElement.prototype.appendChild;
+    var originAppend = HTMLElement.prototype.append;
+    var $append = // for ie 9/10/11
+     typeof originAppend === 'function'
+        ? function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return originAppend.apply(this, args);
+        }
+        : function () {
+            var nodes = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                nodes[_i] = arguments[_i];
+            }
+            if (nodes.length < 50) {
+                for (var i = 0; i < nodes.length; i++) {
+                    var node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(this, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(this, node);
+                    }
+                }
+            }
+            else {
+                var fragment = document.createDocumentFragment();
+                for (var i = 0; i < nodes.length; i++) {
+                    var node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(fragment, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(fragment, node);
+                    }
+                }
+                $appendChild.call(this, fragment);
+            }
+        };
+
+    var $isArray = Array.isArray;
+    var emptyPromiseHandler = function () { return ({}); };
+    if (typeof Promise === 'undefined') {
+        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+    }
+    var $isThenable = function (o) {
+        return typeof o === 'object' && o !== null && typeof o.then === 'function';
+    };
+
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
@@ -244,7 +248,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+     * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -260,7 +264,10 @@ var __ktjs_core__ = (function (exports) {
         // * start creating the element
         var element = document.createElement(tag);
         // * Handle content
-        applyAttr(element, attr);
+        var kif = applyAttr(element, attr);
+        if (!kif) {
+            return document.createComment('k-if');
+        }
         applyContent(element, content);
         return element;
     });

package/dist/index.mjs

@@ -2,52 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? function (...args) {
-        return originAppend.apply(this, args);
-    }
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
 const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -99,6 +53,12 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
+    // & deal k-if first
+    if ('k-if' in attr) {
+        if (!attr['k-if']) {
+            return false;
+        }
+    }
     const classValue = attr.class;
     const style = attr.style;
     if (classValue !== undefined) {
@@ -116,10 +76,7 @@ function attrIsObject(element, attr) {
         }
         delete attr.style;
     }
-    const keys = $keys(attr);
-    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
-    for (let i = keys.length - 1; i >= 0; i--) {
-        const key = keys[i];
+    for (const key in attr) {
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
@@ -147,19 +104,66 @@ function attrIsObject(element, attr) {
     if (style !== undefined) {
         attr.style = style;
     }
+    return true;
 }
 function applyAttr(element, attr) {
     if (typeof attr === 'string') {
         element.className = attr;
+        return true;
     }
     else if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
+        return attrIsObject(element, attr);
     }
     else {
-        $throw('attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object/string.');
     }
 }
 
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        return originAppend.apply(this, args);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+const $isArray = Array.isArray;
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
@@ -216,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -230,7 +234,10 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    applyAttr(element, attr);
+    const kif = applyAttr(element, attr);
+    if (!kif) {
+        return document.createComment('k-if');
+    }
     applyContent(element, content);
     return element;
 });

package/dist/jsx/index.d.ts

@@ -63,6 +63,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   ref?: KTRef<HTMLElement>;
+  'k-if'?: any;
 
   id?: string;
   class?: string;
@@ -146,7 +147,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -2,52 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? function (...args) {
-        return originAppend.apply(this, args);
-    }
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
 const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -99,6 +53,12 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
+    // & deal k-if first
+    if ('k-if' in attr) {
+        if (!attr['k-if']) {
+            return false;
+        }
+    }
     const classValue = attr.class;
     const style = attr.style;
     if (classValue !== undefined) {
@@ -116,10 +76,7 @@ function attrIsObject(element, attr) {
         }
         delete attr.style;
     }
-    const keys = $keys(attr);
-    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
-    for (let i = keys.length - 1; i >= 0; i--) {
-        const key = keys[i];
+    for (const key in attr) {
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
@@ -147,19 +104,66 @@ function attrIsObject(element, attr) {
     if (style !== undefined) {
         attr.style = style;
     }
+    return true;
 }
 function applyAttr(element, attr) {
     if (typeof attr === 'string') {
         element.className = attr;
+        return true;
     }
     else if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
+        return attrIsObject(element, attr);
     }
     else {
-        $throw('attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object/string.');
     }
 }
 
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        return originAppend.apply(this, args);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+const $isArray = Array.isArray;
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
@@ -216,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -230,7 +234,10 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    applyAttr(element, attr);
+    const kif = applyAttr(element, attr);
+    if (!kif) {
+        return document.createComment('k-if');
+    }
     applyContent(element, content);
     return element;
 });

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

@@ -57,6 +57,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   ref?: KTRef<HTMLElement>;
+  'k-if'?: any;
 
   id?: string;
   class?: string;
@@ -140,7 +141,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -172,4 +173,20 @@ declare const jsxDEV: typeof jsx;
  */
 declare const jsxs: typeof jsx;
 
-export { Fragment, h as createElement, h, jsx, jsxDEV, jsxs };
+/**
+ * A helper to create redrawable elements
+ * ```tsx
+ * export function MyComponent() {
+ *    let aa = 10;
+ *    // ...
+ *    // aa might be changed
+ *    return createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator
+ * @returns created element
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+
+export { Fragment, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs };

package/dist/jsx/jsx-runtime.mjs

@@ -2,52 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? function (...args) {
-        return originAppend.apply(this, args);
-    }
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
 const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
@@ -99,6 +53,12 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
+    // & deal k-if first
+    if ('k-if' in attr) {
+        if (!attr['k-if']) {
+            return false;
+        }
+    }
     const classValue = attr.class;
     const style = attr.style;
     if (classValue !== undefined) {
@@ -116,10 +76,7 @@ function attrIsObject(element, attr) {
         }
         delete attr.style;
     }
-    const keys = $keys(attr);
-    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
-    for (let i = keys.length - 1; i >= 0; i--) {
-        const key = keys[i];
+    for (const key in attr) {
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
@@ -147,18 +104,65 @@ function attrIsObject(element, attr) {
     if (style !== undefined) {
         attr.style = style;
     }
+    return true;
 }
 function applyAttr(element, attr) {
     if (typeof attr === 'string') {
         element.className = attr;
+        return true;
     }
     else if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
+        return attrIsObject(element, attr);
     }
     else {
-        $throw('attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object/string.');
+    }
+}
+
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        return originAppend.apply(this, args);
     }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+const $isArray = Array.isArray;
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
 }
+const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
 function apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
@@ -216,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
+ * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -230,7 +234,10 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    applyAttr(element, attr);
+    const kif = applyAttr(element, attr);
+    if (!kif) {
+        return document.createComment('k-if');
+    }
     applyContent(element, content);
     return element;
 });
@@ -328,5 +335,30 @@ const jsxDEV = (...args) => {
  * This is called when using jsx: "react-jsx" or "react-jsxdev"
  */
 const jsxs = jsx;
+/**
+ * A helper to create redrawable elements
+ * ```tsx
+ * export function MyComponent() {
+ *    let aa = 10;
+ *    // ...
+ *    // aa might be changed
+ *    return createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator
+ * @returns created element
+ */
+function createRedrawable(creator) {
+    let element = creator();
+    const redraw = () => {
+        const old = element;
+        element = creator();
+        old.replaceWith(element);
+        element.redraw = redraw;
+    };
+    element.redraw = redraw;
+    return element;
+}
 
-export { Fragment, h as createElement, h, jsx, jsxDEV, jsxs };
+export { Fragment, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.13.2",
+  "version": "0.14.1",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",