@ktjs/core 0.15.0 → 0.15.2

package/dist/index.d.ts

@@ -139,10 +139,6 @@ type KTComponent = (
 ) => KTHTMLElement | Promise<KTHTMLElement> | any;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
-type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
-    kDepth: number;
-    kUpdater: (() => void)[];
-};
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -153,14 +149,14 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: H;
+declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
 
 type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
 /**
@@ -192,14 +188,29 @@ declare const jsxs: typeof jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+declare function createRedrawableNoref(creator: () => KTHTMLElement): KTHTMLElement;
+/**
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTRef<KTHTMLElement>;
 
 /**
  * Extract component props type (excluding ref and children)
@@ -212,5 +223,5 @@ declare function KTAsync<T extends KTComponent>(props: {
     children?: KTRawContent;
 } & ExtractComponentProps<T>): KTHTMLElement;
 
-export { Fragment, KTAsync, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTAsync, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
 export type { EventHandler, HTMLTag, KTAttribute, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };

package/dist/index.iife.js

@@ -57,10 +57,10 @@ var __ktjs_core__ = (function (exports) {
     const defaultHandler = (element, key, value) => element.setAttribute(key, value);
     function attrIsObject(element, attr) {
         const classValue = attr.class;
-        const style = attr.style;
         if (classValue !== undefined) {
             element.className = classValue;
         }
+        const style = attr.style;
         if (style) {
             if (typeof style === 'string') {
                 element.setAttribute('style', style);
@@ -92,12 +92,12 @@ var __ktjs_core__ = (function (exports) {
         }
     }
     function applyAttr(element, attr) {
-        if (typeof attr === 'string') {
-            element.className = attr;
-        }
-        else if (typeof attr === 'object' && attr !== null) {
+        if (typeof attr === 'object' && attr !== null) {
             attrIsObject(element, attr);
         }
+        else if (typeof attr === 'string') {
+            element.className = attr;
+        }
         else {
             throw new Error('kt.js: attr must be an object/string.');
         }
@@ -194,6 +194,9 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    const defaultCreator = (tag) => document.createElement(tag);
+    const svgCreator = (tag) => document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+    let creator = defaultCreator;
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -204,31 +207,45 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+     * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
      * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
      * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
      */
-    const h = ((tag, attr = '', content = '') => {
+    const h = (tag, attr, content) => {
         if (typeof tag !== 'string') {
             $throw('tagName must be a string.');
         }
+        let lastCreator = creator;
+        if (tag === 'svg') {
+            creator = svgCreator;
+        }
         // * start creating the element
-        const element = document.createElement(tag);
+        const element = creator(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
+        creator = lastCreator; // restore previous creator
         return element;
-    });
+    };
+
+    /**
+     * Reference to the created HTML element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value) {
+        return { value: value, isKT: true };
+    }
 
     const dummyRef = { value: null };
+    // todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
     /**
      * @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 : dummyRef;
         let el;
@@ -303,14 +320,14 @@ var __ktjs_core__ = (function (exports) {
      *    let aa = 10;
      *    // ...
      *    // aa might be changed
-     *    return createRedrawable(() => <div>{aa}</div>);
+     *    return createRedrawableNoref(() => <div>{aa}</div>);
      * }
      * ```
      * Then the returned element has a `redraw` method to redraw itself with new values.
      * @param creator a simple creator function that returns an element
      * @returns created element
      */
-    function createRedrawable(creator) {
+    function createRedrawableNoref(creator) {
         let el = creator();
         const redraw = () => {
             const old = el;
@@ -322,14 +339,32 @@ var __ktjs_core__ = (function (exports) {
         el.redraw = redraw;
         return el;
     }
-
     /**
-     * Reference to the created HTML element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
+     * 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 a simple creator function that returns an element
+     * @returns created element's ref
      */
-    function ref(value) {
-        return { value: value, isKT: true };
+    function createRedrawable(creator) {
+        const elRef = ref();
+        elRef.value = creator();
+        const redraw = () => {
+            const old = elRef.value;
+            elRef.value = creator();
+            old.replaceWith(elRef.value);
+            elRef.value.redraw = redraw;
+            return elRef.value;
+        };
+        elRef.value.redraw = redraw;
+        return elRef;
     }
 
     function KTAsync(props) {
@@ -348,6 +383,7 @@ var __ktjs_core__ = (function (exports) {
     exports.KTAsync = KTAsync;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
+    exports.createRedrawableNoref = createRedrawableNoref;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;

package/dist/index.legacy.js

@@ -69,10 +69,10 @@ var __ktjs_core__ = (function (exports) {
     var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
     function attrIsObject(element, attr) {
         var classValue = attr.class;
-        var style = attr.style;
         if (classValue !== undefined) {
             element.className = classValue;
         }
+        var style = attr.style;
         if (style) {
             if (typeof style === 'string') {
                 element.setAttribute('style', style);
@@ -104,12 +104,12 @@ var __ktjs_core__ = (function (exports) {
         }
     }
     function applyAttr(element, attr) {
-        if (typeof attr === 'string') {
-            element.className = attr;
-        }
-        else if (typeof attr === 'object' && attr !== null) {
+        if (typeof attr === 'object' && attr !== null) {
             attrIsObject(element, attr);
         }
+        else if (typeof attr === 'string') {
+            element.className = attr;
+        }
         else {
             throw new Error('kt.js: attr must be an object/string.');
         }
@@ -219,6 +219,9 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    var defaultCreator = function (tag) { return document.createElement(tag); };
+    var svgCreator = function (tag) { return document.createElementNS('http://www.w3.org/1999/xhtml', tag); };
+    var creator = defaultCreator;
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -229,26 +232,29 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+     * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
      * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
      * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
      */
-    var h = (function (tag, attr, content) {
-        if (attr === void 0) { attr = ''; }
-        if (content === void 0) { content = ''; }
+    var h = function (tag, attr, content) {
         if (typeof tag !== 'string') {
             $throw('tagName must be a string.');
         }
+        var lastCreator = creator;
+        if (tag === 'svg') {
+            creator = svgCreator;
+        }
         // * start creating the element
-        var element = document.createElement(tag);
+        var element = creator(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
+        creator = lastCreator; // restore previous creator
         return element;
-    });
+    };
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -283,12 +289,21 @@ var __ktjs_core__ = (function (exports) {
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
+    /**
+     * Reference to the created HTML element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value) {
+        return { value: value, isKT: true };
+    }
+
     var dummyRef = { value: null };
+    // todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
-    // todo 加入对k-if的全面支持
     function jsx(tag, props) {
         var _a, _b;
         if (props === void 0) { props = {}; }
@@ -369,14 +384,14 @@ var __ktjs_core__ = (function (exports) {
      *    let aa = 10;
      *    // ...
      *    // aa might be changed
-     *    return createRedrawable(() => <div>{aa}</div>);
+     *    return createRedrawableNoref(() => <div>{aa}</div>);
      * }
      * ```
      * Then the returned element has a `redraw` method to redraw itself with new values.
      * @param creator a simple creator function that returns an element
      * @returns created element
      */
-    function createRedrawable(creator) {
+    function createRedrawableNoref(creator) {
         var el = creator();
         var redraw = function () {
             var old = el;
@@ -388,14 +403,32 @@ var __ktjs_core__ = (function (exports) {
         el.redraw = redraw;
         return el;
     }
-
     /**
-     * Reference to the created HTML element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
+     * 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 a simple creator function that returns an element
+     * @returns created element's ref
      */
-    function ref(value) {
-        return { value: value, isKT: true };
+    function createRedrawable(creator) {
+        var elRef = ref();
+        elRef.value = creator();
+        var redraw = function () {
+            var old = elRef.value;
+            elRef.value = creator();
+            old.replaceWith(elRef.value);
+            elRef.value.redraw = redraw;
+            return elRef.value;
+        };
+        elRef.value.redraw = redraw;
+        return elRef;
     }
 
     function KTAsync(props) {
@@ -415,6 +448,7 @@ var __ktjs_core__ = (function (exports) {
     exports.KTAsync = KTAsync;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
+    exports.createRedrawableNoref = createRedrawableNoref;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;

package/dist/index.mjs

@@ -54,10 +54,10 @@ const ktEventHandlers = {
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
-    const style = attr.style;
     if (classValue !== undefined) {
         element.className = classValue;
     }
+    const style = attr.style;
     if (style) {
         if (typeof style === 'string') {
             element.setAttribute('style', style);
@@ -89,12 +89,12 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
-    if (typeof attr === 'string') {
-        element.className = attr;
-    }
-    else if (typeof attr === 'object' && attr !== null) {
+    if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
+    else if (typeof attr === 'string') {
+        element.className = attr;
+    }
     else {
         throw new Error('kt.js: attr must be an object/string.');
     }
@@ -191,6 +191,9 @@ function applyContent(element, content) {
     }
 }
 
+const defaultCreator = (tag) => document.createElement(tag);
+const svgCreator = (tag) => document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+let creator = defaultCreator;
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -201,31 +204,45 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-const h = ((tag, attr = '', content = '') => {
+const h = (tag, attr, content) => {
     if (typeof tag !== 'string') {
         $throw('tagName must be a string.');
     }
+    let lastCreator = creator;
+    if (tag === 'svg') {
+        creator = svgCreator;
+    }
     // * start creating the element
-    const element = document.createElement(tag);
+    const element = creator(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
+    creator = lastCreator; // restore previous creator
     return element;
-});
+};
+
+/**
+ * Reference to the created HTML element.
+ * - can alse be used to store normal values, but it is not reactive.
+ * @param value mostly an HTMLElement
+ */
+function ref(value) {
+    return { value: value, isKT: true };
+}
 
 const dummyRef = { value: null };
+// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @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 : dummyRef;
     let el;
@@ -300,14 +317,14 @@ const jsxs = jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-function createRedrawable(creator) {
+function createRedrawableNoref(creator) {
     let el = creator();
     const redraw = () => {
         const old = el;
@@ -319,14 +336,32 @@ function createRedrawable(creator) {
     el.redraw = redraw;
     return el;
 }
-
 /**
- * Reference to the created HTML element.
- * - can alse be used to store normal values, but it is not reactive.
- * @param value mostly an HTMLElement
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
  */
-function ref(value) {
-    return { value: value, isKT: true };
+function createRedrawable(creator) {
+    const elRef = ref();
+    elRef.value = creator();
+    const redraw = () => {
+        const old = elRef.value;
+        elRef.value = creator();
+        old.replaceWith(elRef.value);
+        elRef.value.redraw = redraw;
+        return elRef.value;
+    };
+    elRef.value.redraw = redraw;
+    return elRef;
 }
 
 function KTAsync(props) {
@@ -341,4 +376,4 @@ function KTAsync(props) {
     return comp;
 }
 
-export { Fragment, KTAsync, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTAsync, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.d.ts

@@ -125,10 +125,6 @@ type KTSpecialEventHandlers = {
 type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
-type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
-    kDepth: number;
-    kUpdater: (() => void)[];
-};
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -139,14 +135,14 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: H;
+declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
 
 type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
 /**
@@ -178,14 +174,29 @@ declare const jsxs: typeof jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+declare function createRedrawableNoref(creator: () => KTHTMLElement): KTHTMLElement;
+/**
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTRef<KTHTMLElement>;
 
-export { Fragment, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };
+export { Fragment, h as createElement, createRedrawable, createRedrawableNoref, jsx, jsxDEV, jsxs, ref };
 export type { KTHTMLElement, KTRef };

package/dist/jsx/index.mjs

@@ -54,10 +54,10 @@ const ktEventHandlers = {
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
-    const style = attr.style;
     if (classValue !== undefined) {
         element.className = classValue;
     }
+    const style = attr.style;
     if (style) {
         if (typeof style === 'string') {
             element.setAttribute('style', style);
@@ -89,12 +89,12 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
-    if (typeof attr === 'string') {
-        element.className = attr;
-    }
-    else if (typeof attr === 'object' && attr !== null) {
+    if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
+    else if (typeof attr === 'string') {
+        element.className = attr;
+    }
     else {
         throw new Error('kt.js: attr must be an object/string.');
     }
@@ -191,6 +191,9 @@ function applyContent(element, content) {
     }
 }
 
+const defaultCreator = (tag) => document.createElement(tag);
+const svgCreator = (tag) => document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+let creator = defaultCreator;
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -201,31 +204,45 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-const h = ((tag, attr = '', content = '') => {
+const h = (tag, attr, content) => {
     if (typeof tag !== 'string') {
         $throw('tagName must be a string.');
     }
+    let lastCreator = creator;
+    if (tag === 'svg') {
+        creator = svgCreator;
+    }
     // * start creating the element
-    const element = document.createElement(tag);
+    const element = creator(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
+    creator = lastCreator; // restore previous creator
     return element;
-});
+};
+
+/**
+ * Reference to the created HTML element.
+ * - can alse be used to store normal values, but it is not reactive.
+ * @param value mostly an HTMLElement
+ */
+function ref(value) {
+    return { value: value, isKT: true };
+}
 
 const dummyRef = { value: null };
+// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @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 : dummyRef;
     let el;
@@ -300,14 +317,14 @@ const jsxs = jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-function createRedrawable(creator) {
+function createRedrawableNoref(creator) {
     let el = creator();
     const redraw = () => {
         const old = el;
@@ -319,14 +336,32 @@ function createRedrawable(creator) {
     el.redraw = redraw;
     return el;
 }
-
 /**
- * Reference to the created HTML element.
- * - can alse be used to store normal values, but it is not reactive.
- * @param value mostly an HTMLElement
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
  */
-function ref(value) {
-    return { value: value, isKT: true };
+function createRedrawable(creator) {
+    const elRef = ref();
+    elRef.value = creator();
+    const redraw = () => {
+        const old = elRef.value;
+        elRef.value = creator();
+        old.replaceWith(elRef.value);
+        elRef.value.redraw = redraw;
+        return elRef.value;
+    };
+    elRef.value.redraw = redraw;
+    return elRef;
 }
 
-export { Fragment, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };
+export { Fragment, h as createElement, createRedrawable, createRedrawableNoref, jsx, jsxDEV, jsxs, ref };

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

@@ -119,10 +119,6 @@ type KTSpecialEventHandlers = {
 type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
-type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
-    kDepth: number;
-    kUpdater: (() => void)[];
-};
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -133,14 +129,14 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: H;
+declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
 
 type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
 /**
@@ -172,13 +168,28 @@ declare const jsxs: typeof jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+declare function createRedrawableNoref(creator: () => KTHTMLElement): KTHTMLElement;
+/**
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTRef<KTHTMLElement>;
 
-export { Fragment, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs };
+export { Fragment, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs };

package/dist/jsx/jsx-runtime.mjs

@@ -54,10 +54,10 @@ const ktEventHandlers = {
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
-    const style = attr.style;
     if (classValue !== undefined) {
         element.className = classValue;
     }
+    const style = attr.style;
     if (style) {
         if (typeof style === 'string') {
             element.setAttribute('style', style);
@@ -89,12 +89,12 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
-    if (typeof attr === 'string') {
-        element.className = attr;
-    }
-    else if (typeof attr === 'object' && attr !== null) {
+    if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
+    else if (typeof attr === 'string') {
+        element.className = attr;
+    }
     else {
         throw new Error('kt.js: attr must be an object/string.');
     }
@@ -191,6 +191,9 @@ function applyContent(element, content) {
     }
 }
 
+const defaultCreator = (tag) => document.createElement(tag);
+const svgCreator = (tag) => document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+let creator = defaultCreator;
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -201,31 +204,45 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.15.0 (Last Update: 2026.01.24 00:25:38.464)
+ * @version 0.15.2 (Last Update: 2026.01.25 14:25:37.357)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
  */
-const h = ((tag, attr = '', content = '') => {
+const h = (tag, attr, content) => {
     if (typeof tag !== 'string') {
         $throw('tagName must be a string.');
     }
+    let lastCreator = creator;
+    if (tag === 'svg') {
+        creator = svgCreator;
+    }
     // * start creating the element
-    const element = document.createElement(tag);
+    const element = creator(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
+    creator = lastCreator; // restore previous creator
     return element;
-});
+};
+
+/**
+ * Reference to the created HTML element.
+ * - can alse be used to store normal values, but it is not reactive.
+ * @param value mostly an HTMLElement
+ */
+function ref(value) {
+    return { value: value, isKT: true };
+}
 
 const dummyRef = { value: null };
+// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @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 : dummyRef;
     let el;
@@ -300,14 +317,14 @@ const jsxs = jsx;
  *    let aa = 10;
  *    // ...
  *    // aa might be changed
- *    return createRedrawable(() => <div>{aa}</div>);
+ *    return createRedrawableNoref(() => <div>{aa}</div>);
  * }
  * ```
  * Then the returned element has a `redraw` method to redraw itself with new values.
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-function createRedrawable(creator) {
+function createRedrawableNoref(creator) {
     let el = creator();
     const redraw = () => {
         const old = el;
@@ -319,5 +336,32 @@ function createRedrawable(creator) {
     el.redraw = redraw;
     return el;
 }
+/**
+ * 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 a simple creator function that returns an element
+ * @returns created element's ref
+ */
+function createRedrawable(creator) {
+    const elRef = ref();
+    elRef.value = creator();
+    const redraw = () => {
+        const old = elRef.value;
+        elRef.value = creator();
+        old.replaceWith(elRef.value);
+        elRef.value.redraw = redraw;
+        return elRef.value;
+    };
+    elRef.value.redraw = redraw;
+    return elRef;
+}
 
-export { Fragment, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs };
+export { Fragment, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs };

package/package.json

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