@ktjs/core 0.14.5 → 0.15.0

package/README.md

@@ -12,7 +12,7 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
 
 `@ktjs/core` is the foundation of KT.js, providing the essential `h` function and DOM utilities for building web applications with direct DOM manipulation. It emphasizes performance, type safety, and minimal abstraction over native DOM APIs.
 
-**Current Version:** 0.13.0
+**Current Version:** 0.14.6
 
 ## Features
 
@@ -25,7 +25,9 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
   - Zero virtual DOM - JSX compiles directly to `h()` function calls
   - Full HTML element type inference (`<button>` returns `HTMLButtonElement`)
   - Support for function components
-  - **NEW**: `redraw()` method for controlled re-rendering
+  - `redraw()` method for controlled re-rendering
+  - **k-if directive**: Conditional element creation with `k-if` attribute
+  - Array children support for seamless list rendering
 - **KTAsync Component**: Handle async components with ease
   - Automatic handling of Promise-based components
   - Seamless integration with JSX/TSX
@@ -87,7 +89,7 @@ const button1 = h(
   {
     'on:click': () => alert('Clicked!'),
   },
-  'Button 1'
+  'Button 1',
 );
 
 // Function attribute (also treated as event listener)
@@ -97,7 +99,7 @@ const button2 = h(
     click: (e) => console.log('Event:', e),
     'data-id': '123', // Regular attribute
   },
-  'Button 2'
+  'Button 2',
 );
 
 // Both regular and event handler for same name
@@ -136,9 +138,43 @@ const Greeting = ({ name }: { name: string }) => (
 const app = <Greeting name="World" />;
 ```
 
+### Conditional Rendering with k-if (v0.14.6+)
+
+The `k-if` directive allows conditional element creation:
+
+```tsx
+import { h } from '@ktjs/core';
+
+// Element will only be created if condition is true
+const isVisible = true;
+const element = <div k-if={isVisible}>This will be rendered</div>;
+
+// Element will not be created if condition is false
+const isHidden = false;
+const hidden = <div k-if={isHidden}>This will NOT be rendered</div>;
+// hidden will be undefined/null
+
+// Practical example
+const UserProfile = ({ user, isLoggedIn }: { user: any; isLoggedIn: boolean }) => (
+  <div>
+    <h1>User Profile</h1>
+    <div k-if={isLoggedIn}>
+      <p>Welcome, {user.name}!</p>
+      <button>Logout</button>
+    </div>
+    <div k-if={!isLoggedIn}>
+      <p>Please log in to continue</p>
+      <button>Login</button>
+    </div>
+  </div>
+);
+```
+
+**Note**: `k-if` is evaluated **once** at element creation time. It's not reactive - if you need dynamic visibility, use CSS or manually recreate the element.
+
 ### Redraw Mechanism (v0.11+)
 
-The new `redraw()` method allows you to update components efficiently:
+The `redraw()` method allows you to update components efficiently:
 
 ```tsx
 import { h, KTHTMLElement } from '@ktjs/core';
@@ -164,6 +200,39 @@ const div = (<div>Old content</div>) as KTHTMLElement;
 div.redraw(undefined, 'New content');
 ```
 
+### Array Children Support (v0.14.1+)
+
+Children can now be arrays for easier list rendering:
+
+```tsx
+import { h } from '@ktjs/core';
+
+// Map arrays directly as children
+const items = ['Apple', 'Banana', 'Orange'];
+const list = (
+  <ul>
+    {items.map((item) => (
+      <li>{item}</li>
+    ))}
+  </ul>
+);
+
+// Mix mapped elements with other elements
+const TodoList = ({ todos }: { todos: string[] }) => (
+  <div>
+    <h2>Todo List</h2>
+    <ul>
+      {todos.map((todo) => (
+        <li>{todo}</li>
+      ))}
+      <li>
+        <button>Add More</button>
+      </li>
+    </ul>
+  </div>
+);
+```
+
 ### Async Components
 
 ```typescript

package/dist/index.d.ts

@@ -16,12 +16,12 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
-type KTHTMLElement = HTMLElement & {
+type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
   /**
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
+  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
 };
 
 declare global {
@@ -153,7 +153,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -196,7 +196,7 @@ declare const jsxs: typeof jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;

package/dist/index.iife.js

@@ -56,17 +56,10 @@ 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) {
             element.className = classValue;
-            delete attr.class;
         }
         if (style) {
             if (typeof style === 'string') {
@@ -77,45 +70,33 @@ var __ktjs_core__ = (function (exports) {
                     element.style[key] = style[key];
                 }
             }
-            delete attr.style;
         }
         for (const key in attr) {
+            if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+                continue;
+            }
             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
             // # special handling for kt.js specific events
             const ktEvent = ktEventHandlers[key];
             if (ktEvent) {
                 ktEvent(element, o);
-                continue;
             }
-            // # normal event handler
-            if (key.startsWith('on:')) {
+            // normal event handler
+            else if (key.startsWith('on:')) {
                 element.addEventListener(key.slice(3), o); // chop off the `@`
-                continue;
-            }
-            if (typeof o === 'function') {
-                (handlers[key] || defaultHandler)(element, key, o());
             }
+            // normal attributes
             else {
                 (handlers[key] || defaultHandler)(element, key, o);
             }
         }
-        if (classValue !== undefined) {
-            attr.class = classValue;
-        }
-        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) {
-            return attrIsObject(element, attr);
+            attrIsObject(element, attr);
         }
         else {
             throw new Error('kt.js: attr must be an object/string.');
@@ -223,7 +204,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+     * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -237,68 +218,43 @@ var __ktjs_core__ = (function (exports) {
         // * start creating the element
         const element = document.createElement(tag);
         // * Handle content
-        const kif = applyAttr(element, attr);
-        if (!kif) {
-            return document.createComment('k-if');
-        }
+        applyAttr(element, attr);
         applyContent(element, content);
         return element;
     });
 
+    const dummyRef = { value: null };
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
+    // todo 加入对k-if的全面支持
     function jsx(tag, props = {}) {
-        const ref = props.ref?.isKT ? props.ref : null;
-        if (ref) {
-            delete props.ref;
+        const ref = props.ref?.isKT ? props.ref : dummyRef;
+        let el;
+        const redraw = (newProps) => {
+            props = newProps ? { ...props, ...newProps } : props;
+            const old = el;
+            el = jsx(tag, props);
+            old.replaceWith(el);
+            return el;
+        };
+        if ('k-if' in props && !props['k-if']) {
+            el = document.createComment('k-if');
+            ref.value = el;
+            el.redraw = redraw;
+            return el;
         }
         // Handle function components
         if (typeof tag === 'function') {
-            let el = tag(props);
-            if (!el.redraw) {
-                el.redraw = (newProps) => {
-                    props = newProps ? { ...props, ...newProps } : props;
-                    // $ same as below
-                    const old = el;
-                    el = tag(props);
-                    el.redraw = old.redraw; // inherit redraw
-                    if (ref) {
-                        ref.value = el;
-                    }
-                    old.replaceWith(el);
-                    return el;
-                };
-            }
-            if (ref) {
-                ref.value = el;
-            }
-            return el;
+            el = tag(props);
         }
         else {
-            // & deal children here
-            let children = props.children;
-            delete props.children;
-            let el = h(tag, props, children);
-            if (ref) {
-                ref.value = el;
-            }
-            el.redraw = (newProps, newChildren) => {
-                props = newProps ? { ...props, ...newProps } : props;
-                children = (newChildren ?? children);
-                // $ same as above
-                const old = el;
-                el = h(tag, props, children);
-                el.redraw = old.redraw; // inherit redraw
-                if (ref) {
-                    ref.value = el;
-                }
-                old.replaceWith(el);
-                return el;
-            };
-            return el;
+            el = h(tag, props, props.children);
         }
+        el.redraw ??= redraw;
+        ref.value = el;
+        return el;
     }
     /**
      * Fragment support - returns an array of children
@@ -351,20 +307,20 @@ var __ktjs_core__ = (function (exports) {
      * }
      * ```
      * Then the returned element has a `redraw` method to redraw itself with new values.
-     * @param creator
+     * @param creator a simple creator function that returns an element
      * @returns created element
      */
     function createRedrawable(creator) {
-        let element = creator();
+        let el = creator();
         const redraw = () => {
-            const old = element;
-            element = creator();
-            old.replaceWith(element);
-            element.redraw = redraw;
-            return element;
+            const old = el;
+            el = creator();
+            old.replaceWith(el);
+            el.redraw = redraw;
+            return el;
         };
-        element.redraw = redraw;
-        return element;
+        el.redraw = redraw;
+        return el;
     }
 
     /**

package/dist/index.legacy.js

@@ -68,17 +68,10 @@ 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) {
             element.className = classValue;
-            delete attr.class;
         }
         if (style) {
             if (typeof style === 'string') {
@@ -89,45 +82,33 @@ var __ktjs_core__ = (function (exports) {
                     element.style[key] = style[key];
                 }
             }
-            delete attr.style;
         }
         for (var key in attr) {
+            if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+                continue;
+            }
             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
             // # special handling for kt.js specific events
             var ktEvent = ktEventHandlers[key];
             if (ktEvent) {
                 ktEvent(element, o);
-                continue;
             }
-            // # normal event handler
-            if (key.startsWith('on:')) {
+            // normal event handler
+            else if (key.startsWith('on:')) {
                 element.addEventListener(key.slice(3), o); // chop off the `@`
-                continue;
-            }
-            if (typeof o === 'function') {
-                (handlers[key] || defaultHandler)(element, key, o());
             }
+            // normal attributes
             else {
                 (handlers[key] || defaultHandler)(element, key, o);
             }
         }
-        if (classValue !== undefined) {
-            attr.class = classValue;
-        }
-        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) {
-            return attrIsObject(element, attr);
+            attrIsObject(element, attr);
         }
         else {
             throw new Error('kt.js: attr must be an object/string.');
@@ -248,7 +229,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+     * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -264,10 +245,7 @@ var __ktjs_core__ = (function (exports) {
         // * start creating the element
         var element = document.createElement(tag);
         // * Handle content
-        var kif = applyAttr(element, attr);
-        if (!kif) {
-            return document.createComment('k-if');
-        }
+        applyAttr(element, attr);
         applyContent(element, content);
         return element;
     });
@@ -305,62 +283,40 @@ var __ktjs_core__ = (function (exports) {
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
+    var dummyRef = { value: null };
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
+    // todo 加入对k-if的全面支持
     function jsx(tag, props) {
-        var _a;
+        var _a, _b;
         if (props === void 0) { props = {}; }
-        var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : null;
-        if (ref) {
-            delete props.ref;
+        var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : dummyRef;
+        var el;
+        var redraw = function (newProps) {
+            props = newProps ? __assign(__assign({}, props), newProps) : props;
+            var old = el;
+            el = jsx(tag, props);
+            old.replaceWith(el);
+            return el;
+        };
+        if ('k-if' in props && !props['k-if']) {
+            el = document.createComment('k-if');
+            ref.value = el;
+            el.redraw = redraw;
+            return el;
         }
         // Handle function components
         if (typeof tag === 'function') {
-            var el_1 = tag(props);
-            if (!el_1.redraw) {
-                el_1.redraw = function (newProps) {
-                    props = newProps ? __assign(__assign({}, props), newProps) : props;
-                    // $ same as below
-                    var old = el_1;
-                    el_1 = tag(props);
-                    el_1.redraw = old.redraw; // inherit redraw
-                    if (ref) {
-                        ref.value = el_1;
-                    }
-                    old.replaceWith(el_1);
-                    return el_1;
-                };
-            }
-            if (ref) {
-                ref.value = el_1;
-            }
-            return el_1;
+            el = tag(props);
         }
         else {
-            // & deal children here
-            var children_1 = props.children;
-            delete props.children;
-            var el_2 = h(tag, props, children_1);
-            if (ref) {
-                ref.value = el_2;
-            }
-            el_2.redraw = function (newProps, newChildren) {
-                props = newProps ? __assign(__assign({}, props), newProps) : props;
-                children_1 = (newChildren !== null && newChildren !== void 0 ? newChildren : children_1);
-                // $ same as above
-                var old = el_2;
-                el_2 = h(tag, props, children_1);
-                el_2.redraw = old.redraw; // inherit redraw
-                if (ref) {
-                    ref.value = el_2;
-                }
-                old.replaceWith(el_2);
-                return el_2;
-            };
-            return el_2;
+            el = h(tag, props, props.children);
         }
+        (_b = el.redraw) !== null && _b !== void 0 ? _b : (el.redraw = redraw);
+        ref.value = el;
+        return el;
     }
     /**
      * Fragment support - returns an array of children
@@ -417,20 +373,20 @@ var __ktjs_core__ = (function (exports) {
      * }
      * ```
      * Then the returned element has a `redraw` method to redraw itself with new values.
-     * @param creator
+     * @param creator a simple creator function that returns an element
      * @returns created element
      */
     function createRedrawable(creator) {
-        var element = creator();
+        var el = creator();
         var redraw = function () {
-            var old = element;
-            element = creator();
-            old.replaceWith(element);
-            element.redraw = redraw;
-            return element;
+            var old = el;
+            el = creator();
+            old.replaceWith(el);
+            el.redraw = redraw;
+            return el;
         };
-        element.redraw = redraw;
-        return element;
+        el.redraw = redraw;
+        return el;
     }
 
     /**

package/dist/index.mjs

@@ -53,17 +53,10 @@ 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) {
         element.className = classValue;
-        delete attr.class;
     }
     if (style) {
         if (typeof style === 'string') {
@@ -74,45 +67,33 @@ function attrIsObject(element, attr) {
                 element.style[key] = style[key];
             }
         }
-        delete attr.style;
     }
     for (const key in attr) {
+        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+            continue;
+        }
         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
         // # special handling for kt.js specific events
         const ktEvent = ktEventHandlers[key];
         if (ktEvent) {
             ktEvent(element, o);
-            continue;
         }
-        // # normal event handler
-        if (key.startsWith('on:')) {
+        // normal event handler
+        else if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
-            continue;
-        }
-        if (typeof o === 'function') {
-            (handlers[key] || defaultHandler)(element, key, o());
         }
+        // normal attributes
         else {
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
-    if (classValue !== undefined) {
-        attr.class = classValue;
-    }
-    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) {
-        return attrIsObject(element, attr);
+        attrIsObject(element, attr);
     }
     else {
         throw new Error('kt.js: attr must be an object/string.');
@@ -220,7 +201,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -234,68 +215,43 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    const kif = applyAttr(element, attr);
-    if (!kif) {
-        return document.createComment('k-if');
-    }
+    applyAttr(element, attr);
     applyContent(element, content);
     return element;
 });
 
+const dummyRef = { value: null };
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
  */
+// todo 加入对k-if的全面支持
 function jsx(tag, props = {}) {
-    const ref = props.ref?.isKT ? props.ref : null;
-    if (ref) {
-        delete props.ref;
+    const ref = props.ref?.isKT ? props.ref : dummyRef;
+    let el;
+    const redraw = (newProps) => {
+        props = newProps ? { ...props, ...newProps } : props;
+        const old = el;
+        el = jsx(tag, props);
+        old.replaceWith(el);
+        return el;
+    };
+    if ('k-if' in props && !props['k-if']) {
+        el = document.createComment('k-if');
+        ref.value = el;
+        el.redraw = redraw;
+        return el;
     }
     // Handle function components
     if (typeof tag === 'function') {
-        let el = tag(props);
-        if (!el.redraw) {
-            el.redraw = (newProps) => {
-                props = newProps ? { ...props, ...newProps } : props;
-                // $ same as below
-                const old = el;
-                el = tag(props);
-                el.redraw = old.redraw; // inherit redraw
-                if (ref) {
-                    ref.value = el;
-                }
-                old.replaceWith(el);
-                return el;
-            };
-        }
-        if (ref) {
-            ref.value = el;
-        }
-        return el;
+        el = tag(props);
     }
     else {
-        // & deal children here
-        let children = props.children;
-        delete props.children;
-        let el = h(tag, props, children);
-        if (ref) {
-            ref.value = el;
-        }
-        el.redraw = (newProps, newChildren) => {
-            props = newProps ? { ...props, ...newProps } : props;
-            children = (newChildren ?? children);
-            // $ same as above
-            const old = el;
-            el = h(tag, props, children);
-            el.redraw = old.redraw; // inherit redraw
-            if (ref) {
-                ref.value = el;
-            }
-            old.replaceWith(el);
-            return el;
-        };
-        return el;
+        el = h(tag, props, props.children);
     }
+    el.redraw ??= redraw;
+    ref.value = el;
+    return el;
 }
 /**
  * Fragment support - returns an array of children
@@ -348,20 +304,20 @@ const jsxs = jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 function createRedrawable(creator) {
-    let element = creator();
+    let el = creator();
     const redraw = () => {
-        const old = element;
-        element = creator();
-        old.replaceWith(element);
-        element.redraw = redraw;
-        return element;
+        const old = el;
+        el = creator();
+        old.replaceWith(el);
+        el.redraw = redraw;
+        return el;
     };
-    element.redraw = redraw;
-    return element;
+    el.redraw = redraw;
+    return el;
 }
 
 /**

package/dist/jsx/index.d.ts

@@ -16,12 +16,12 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
-type KTHTMLElement = HTMLElement & {
+type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
   /**
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
+  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
 };
 
 declare global {
@@ -139,7 +139,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -182,7 +182,7 @@ declare const jsxs: typeof jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;

package/dist/jsx/index.mjs

@@ -53,17 +53,10 @@ 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) {
         element.className = classValue;
-        delete attr.class;
     }
     if (style) {
         if (typeof style === 'string') {
@@ -74,45 +67,33 @@ function attrIsObject(element, attr) {
                 element.style[key] = style[key];
             }
         }
-        delete attr.style;
     }
     for (const key in attr) {
+        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+            continue;
+        }
         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
         // # special handling for kt.js specific events
         const ktEvent = ktEventHandlers[key];
         if (ktEvent) {
             ktEvent(element, o);
-            continue;
         }
-        // # normal event handler
-        if (key.startsWith('on:')) {
+        // normal event handler
+        else if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
-            continue;
-        }
-        if (typeof o === 'function') {
-            (handlers[key] || defaultHandler)(element, key, o());
         }
+        // normal attributes
         else {
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
-    if (classValue !== undefined) {
-        attr.class = classValue;
-    }
-    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) {
-        return attrIsObject(element, attr);
+        attrIsObject(element, attr);
     }
     else {
         throw new Error('kt.js: attr must be an object/string.');
@@ -220,7 +201,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -234,68 +215,43 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    const kif = applyAttr(element, attr);
-    if (!kif) {
-        return document.createComment('k-if');
-    }
+    applyAttr(element, attr);
     applyContent(element, content);
     return element;
 });
 
+const dummyRef = { value: null };
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
  */
+// todo 加入对k-if的全面支持
 function jsx(tag, props = {}) {
-    const ref = props.ref?.isKT ? props.ref : null;
-    if (ref) {
-        delete props.ref;
+    const ref = props.ref?.isKT ? props.ref : dummyRef;
+    let el;
+    const redraw = (newProps) => {
+        props = newProps ? { ...props, ...newProps } : props;
+        const old = el;
+        el = jsx(tag, props);
+        old.replaceWith(el);
+        return el;
+    };
+    if ('k-if' in props && !props['k-if']) {
+        el = document.createComment('k-if');
+        ref.value = el;
+        el.redraw = redraw;
+        return el;
     }
     // Handle function components
     if (typeof tag === 'function') {
-        let el = tag(props);
-        if (!el.redraw) {
-            el.redraw = (newProps) => {
-                props = newProps ? { ...props, ...newProps } : props;
-                // $ same as below
-                const old = el;
-                el = tag(props);
-                el.redraw = old.redraw; // inherit redraw
-                if (ref) {
-                    ref.value = el;
-                }
-                old.replaceWith(el);
-                return el;
-            };
-        }
-        if (ref) {
-            ref.value = el;
-        }
-        return el;
+        el = tag(props);
     }
     else {
-        // & deal children here
-        let children = props.children;
-        delete props.children;
-        let el = h(tag, props, children);
-        if (ref) {
-            ref.value = el;
-        }
-        el.redraw = (newProps, newChildren) => {
-            props = newProps ? { ...props, ...newProps } : props;
-            children = (newChildren ?? children);
-            // $ same as above
-            const old = el;
-            el = h(tag, props, children);
-            el.redraw = old.redraw; // inherit redraw
-            if (ref) {
-                ref.value = el;
-            }
-            old.replaceWith(el);
-            return el;
-        };
-        return el;
+        el = h(tag, props, props.children);
     }
+    el.redraw ??= redraw;
+    ref.value = el;
+    return el;
 }
 /**
  * Fragment support - returns an array of children
@@ -348,20 +304,20 @@ const jsxs = jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 function createRedrawable(creator) {
-    let element = creator();
+    let el = creator();
     const redraw = () => {
-        const old = element;
-        element = creator();
-        old.replaceWith(element);
-        element.redraw = redraw;
-        return element;
+        const old = el;
+        el = creator();
+        old.replaceWith(el);
+        el.redraw = redraw;
+        return el;
     };
-    element.redraw = redraw;
-    return element;
+    el.redraw = redraw;
+    return el;
 }
 
 /**

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

@@ -10,12 +10,12 @@ interface KTRef<T> {
     isKT: true;
 }
 
-type KTHTMLElement = HTMLElement & {
+type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
   /**
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
+  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
 };
 
 declare global {
@@ -133,7 +133,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -176,7 +176,7 @@ declare const jsxs: typeof jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;

package/dist/jsx/jsx-runtime.mjs

@@ -53,17 +53,10 @@ 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) {
         element.className = classValue;
-        delete attr.class;
     }
     if (style) {
         if (typeof style === 'string') {
@@ -74,45 +67,33 @@ function attrIsObject(element, attr) {
                 element.style[key] = style[key];
             }
         }
-        delete attr.style;
     }
     for (const key in attr) {
+        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+            continue;
+        }
         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
         // # special handling for kt.js specific events
         const ktEvent = ktEventHandlers[key];
         if (ktEvent) {
             ktEvent(element, o);
-            continue;
         }
-        // # normal event handler
-        if (key.startsWith('on:')) {
+        // normal event handler
+        else if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
-            continue;
-        }
-        if (typeof o === 'function') {
-            (handlers[key] || defaultHandler)(element, key, o());
         }
+        // normal attributes
         else {
             (handlers[key] || defaultHandler)(element, key, o);
         }
     }
-    if (classValue !== undefined) {
-        attr.class = classValue;
-    }
-    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) {
-        return attrIsObject(element, attr);
+        attrIsObject(element, attr);
     }
     else {
         throw new Error('kt.js: attr must be an object/string.');
@@ -220,7 +201,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.5 (Last Update: 2026.01.17 09:00:04.049)
+ * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -234,68 +215,43 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    const kif = applyAttr(element, attr);
-    if (!kif) {
-        return document.createComment('k-if');
-    }
+    applyAttr(element, attr);
     applyContent(element, content);
     return element;
 });
 
+const dummyRef = { value: null };
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
  */
+// todo 加入对k-if的全面支持
 function jsx(tag, props = {}) {
-    const ref = props.ref?.isKT ? props.ref : null;
-    if (ref) {
-        delete props.ref;
+    const ref = props.ref?.isKT ? props.ref : dummyRef;
+    let el;
+    const redraw = (newProps) => {
+        props = newProps ? { ...props, ...newProps } : props;
+        const old = el;
+        el = jsx(tag, props);
+        old.replaceWith(el);
+        return el;
+    };
+    if ('k-if' in props && !props['k-if']) {
+        el = document.createComment('k-if');
+        ref.value = el;
+        el.redraw = redraw;
+        return el;
     }
     // Handle function components
     if (typeof tag === 'function') {
-        let el = tag(props);
-        if (!el.redraw) {
-            el.redraw = (newProps) => {
-                props = newProps ? { ...props, ...newProps } : props;
-                // $ same as below
-                const old = el;
-                el = tag(props);
-                el.redraw = old.redraw; // inherit redraw
-                if (ref) {
-                    ref.value = el;
-                }
-                old.replaceWith(el);
-                return el;
-            };
-        }
-        if (ref) {
-            ref.value = el;
-        }
-        return el;
+        el = tag(props);
     }
     else {
-        // & deal children here
-        let children = props.children;
-        delete props.children;
-        let el = h(tag, props, children);
-        if (ref) {
-            ref.value = el;
-        }
-        el.redraw = (newProps, newChildren) => {
-            props = newProps ? { ...props, ...newProps } : props;
-            children = (newChildren ?? children);
-            // $ same as above
-            const old = el;
-            el = h(tag, props, children);
-            el.redraw = old.redraw; // inherit redraw
-            if (ref) {
-                ref.value = el;
-            }
-            old.replaceWith(el);
-            return el;
-        };
-        return el;
+        el = h(tag, props, props.children);
     }
+    el.redraw ??= redraw;
+    ref.value = el;
+    return el;
 }
 /**
  * Fragment support - returns an array of children
@@ -348,20 +304,20 @@ const jsxs = jsx;
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
- * @param creator
+ * @param creator a simple creator function that returns an element
  * @returns created element
  */
 function createRedrawable(creator) {
-    let element = creator();
+    let el = creator();
     const redraw = () => {
-        const old = element;
-        element = creator();
-        old.replaceWith(element);
-        element.redraw = redraw;
-        return element;
+        const old = el;
+        el = creator();
+        old.replaceWith(el);
+        el.redraw = redraw;
+        return el;
     };
-    element.redraw = redraw;
-    return element;
+    el.redraw = redraw;
+    return el;
 }
 
 export { Fragment, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs };

package/package.json

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