@ktjs/core 0.8.3 → 0.9.0

package/dist/index.d.ts

@@ -24,13 +24,12 @@ type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
 
 interface KTRef<T> {
     value: T;
-    update: () => T;
-    isRef: true;
+    isKT: true;
 }
 declare function ref<T>(value?: T): KTRef<T>;
 
-type Ctt = KTRef<any> | HTMLElement | string | number | undefined;
-type KTRawContent = Ctt[] | Ctt;
+type KTAvailableContent = KTRef<any> | HTMLElement | string | number | undefined;
+type KTRawContent = KTAvailableContent[] | KTAvailableContent;
 type KTRawAttr = KTAttribute | string;
 type KTRawContents = (HTMLElement | string | undefined)[];
 
@@ -100,6 +99,10 @@ type KTPrefixedEventHandlers = {
 type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
 
 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.
@@ -110,21 +113,21 @@ type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagN
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+declare const h: H;
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
-declare function jsx<T extends HTMLTag>(tag: T, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T];
+declare function jsx<T extends HTMLTag>(tag: T | Function, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T] | HTMLElement;
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,

package/dist/index.iife.js

@@ -175,25 +175,22 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function apd(element, content) {
+        if (content && content.isKT) {
+            $append.call(element, content.value);
+        }
+        else {
+            $append.call(element, content);
+        }
+    }
     function applyContent(element, content) {
         if ($isArray(content)) {
             for (let i = 0; i < content.length; i++) {
-                let c = content[i];
-                if (c && c.isRef) {
-                    $append.call(element, c.value);
-                }
-                else {
-                    $append.call(element, c);
-                }
+                apd(element, content[i]);
             }
         }
         else {
-            if (content && content.isRef) {
-                $append.call(element, content.value);
-            }
-            else {
-                $append.call(element, content);
-            }
+            apd(element, content);
         }
     }
 
@@ -207,14 +204,14 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+     * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
      * @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) 2025 Kasukabe Tsumugi. All rights reserved.
      */
-    const h = (tag, attr = '', content = '') => {
+    const h = ((tag, attr = '', content = '') => {
         if (typeof tag !== 'string') {
             $throw('__func__ tagName must be a string.');
         }
@@ -224,15 +221,22 @@ var __ktjs_core__ = (function (exports) {
         applyAttr(element, attr);
         applyContent(element, content);
         return element;
-    };
+    });
     $mark(h, 'h');
 
     /**
-     * @param tag html tag
+     * @param tag html tag or function component
      * @param props properties/attributes
      * @param _metadata metadata is ignored
      */
     function jsx(tag, props, ..._metadata) {
+        // Handle function components
+        if (typeof tag === 'function') {
+            const propObj = typeof props === 'string' ? { class: props } : props || {};
+            const children = propObj.children;
+            return tag({ ...propObj, children });
+        }
+        // Handle regular HTML tags
         const propObj = typeof props === 'string' ? { class: props } : props;
         if (propObj === undefined || propObj === null) {
             return h(tag);
@@ -247,12 +251,6 @@ var __ktjs_core__ = (function (exports) {
         const el = h(tag, propObj, children);
         if (ref) {
             ref.value = el;
-            ref.update = () => {
-                const old = ref.value;
-                ref.value = h(tag, propObj, children);
-                old.replaceWith(ref.value);
-                return ref.value;
-            };
         }
         return el;
     }
@@ -300,9 +298,8 @@ var __ktjs_core__ = (function (exports) {
      */
     const jsxs = jsx;
 
-    const noop = () => ({});
     function ref(value) {
-        return { value: value, update: noop, isRef: true };
+        return { value: value, isKT: true };
     }
 
     exports.Fragment = Fragment;

package/dist/index.legacy.js

@@ -186,25 +186,22 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    function apd(element, content) {
+        if (content && content.isKT) {
+            $append.call(element, content.value);
+        }
+        else {
+            $append.call(element, content);
+        }
+    }
     function applyContent(element, content) {
         if ($isArray(content)) {
             for (var i = 0; i < content.length; i++) {
-                var c = content[i];
-                if (c && c.isRef) {
-                    $append.call(element, c.value);
-                }
-                else {
-                    $append.call(element, c);
-                }
+                apd(element, content[i]);
             }
         }
         else {
-            if (content && content.isRef) {
-                $append.call(element, content.value);
-            }
-            else {
-                $append.call(element, content);
-            }
+            apd(element, content);
         }
     }
 
@@ -218,14 +215,14 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+     * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
      * @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) 2025 Kasukabe Tsumugi. All rights reserved.
      */
-    var h = function (tag, attr, content) {
+    var h = (function (tag, attr, content) {
         if (attr === void 0) { attr = ''; }
         if (content === void 0) { content = ''; }
         if (typeof tag !== 'string') {
@@ -237,7 +234,7 @@ var __ktjs_core__ = (function (exports) {
         applyAttr(element, attr);
         applyContent(element, content);
         return element;
-    };
+    });
     $mark(h, 'h');
 
     /******************************************************************************
@@ -257,6 +254,17 @@ var __ktjs_core__ = (function (exports) {
     /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
     function __spreadArray(to, from, pack) {
         if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
             if (ar || !(i in from)) {
@@ -273,12 +281,19 @@ var __ktjs_core__ = (function (exports) {
     };
 
     /**
-     * @param tag html tag
+     * @param tag html tag or function component
      * @param props properties/attributes
      * @param _metadata metadata is ignored
      */
     function jsx(tag, props) {
         var _a;
+        // Handle function components
+        if (typeof tag === 'function') {
+            var propObj_1 = typeof props === 'string' ? { class: props } : props || {};
+            var children_1 = propObj_1.children;
+            return tag(__assign(__assign({}, propObj_1), { children: children_1 }));
+        }
+        // Handle regular HTML tags
         var propObj = typeof props === 'string' ? { class: props } : props;
         if (propObj === undefined || propObj === null) {
             return h(tag);
@@ -293,12 +308,6 @@ var __ktjs_core__ = (function (exports) {
         var el = h(tag, propObj, children);
         if (ref) {
             ref.value = el;
-            ref.update = function () {
-                var old = ref.value;
-                ref.value = h(tag, propObj, children);
-                old.replaceWith(ref.value);
-                return ref.value;
-            };
         }
         return el;
     }
@@ -351,9 +360,8 @@ var __ktjs_core__ = (function (exports) {
      */
     var jsxs = jsx;
 
-    var noop = function () { return ({}); };
     function ref(value) {
-        return { value: value, update: noop, isRef: true };
+        return { value: value, isKT: true };
     }
 
     exports.Fragment = Fragment;

package/dist/index.mjs

@@ -172,25 +172,22 @@ function applyAttr(element, attr) {
     }
 }
 
+function apd(element, content) {
+    if (content && content.isKT) {
+        $append.call(element, content.value);
+    }
+    else {
+        $append.call(element, content);
+    }
+}
 function applyContent(element, content) {
     if ($isArray(content)) {
         for (let i = 0; i < content.length; i++) {
-            let c = content[i];
-            if (c && c.isRef) {
-                $append.call(element, c.value);
-            }
-            else {
-                $append.call(element, c);
-            }
+            apd(element, content[i]);
         }
     }
     else {
-        if (content && content.isRef) {
-            $append.call(element, content.value);
-        }
-        else {
-            $append.call(element, content);
-        }
+        apd(element, content);
     }
 }
 
@@ -204,14 +201,14 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-const h = (tag, attr = '', content = '') => {
+const h = ((tag, attr = '', content = '') => {
     if (typeof tag !== 'string') {
         $throw('__func__ tagName must be a string.');
     }
@@ -221,15 +218,22 @@ const h = (tag, attr = '', content = '') => {
     applyAttr(element, attr);
     applyContent(element, content);
     return element;
-};
+});
 $mark(h, 'h');
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
 function jsx(tag, props, ..._metadata) {
+    // Handle function components
+    if (typeof tag === 'function') {
+        const propObj = typeof props === 'string' ? { class: props } : props || {};
+        const children = propObj.children;
+        return tag({ ...propObj, children });
+    }
+    // Handle regular HTML tags
     const propObj = typeof props === 'string' ? { class: props } : props;
     if (propObj === undefined || propObj === null) {
         return h(tag);
@@ -244,12 +248,6 @@ function jsx(tag, props, ..._metadata) {
     const el = h(tag, propObj, children);
     if (ref) {
         ref.value = el;
-        ref.update = () => {
-            const old = ref.value;
-            ref.value = h(tag, propObj, children);
-            old.replaceWith(ref.value);
-            return ref.value;
-        };
     }
     return el;
 }
@@ -297,9 +295,8 @@ const jsxDEV = (...args) => {
  */
 const jsxs = jsx;
 
-const noop = () => ({});
 function ref(value) {
-    return { value: value, update: noop, isRef: true };
+    return { value: value, isKT: true };
 }
 
 export { Fragment, h as createElement, h, jsx, jsxDEV, jsxs, ktnull, ref };

package/dist/jsx/index.d.ts

@@ -7,13 +7,12 @@ type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
 
 interface KTRef<T> {
     value: T;
-    update: () => T;
-    isRef: true;
+    isKT: true;
 }
 declare function ref<T>(value?: T): KTRef<T>;
 
-type Ctt = KTRef<any> | HTMLElement | string | number | undefined;
-type KTRawContent = Ctt[] | Ctt;
+type KTAvailableContent = KTRef<any> | HTMLElement | string | number | undefined;
+type KTRawContent = KTAvailableContent[] | KTAvailableContent;
 type KTRawAttr = KTAttribute | string;
 
 /**
@@ -77,6 +76,10 @@ type KTPrefixedEventHandlers = {
 type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
 
 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.
@@ -87,14 +90,14 @@ type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagN
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+declare const h: H;
 
 /**
  * This is a `falsy` value used to indicate "no node" in `h` function.
@@ -103,11 +106,11 @@ declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawCo
 declare const ktnull: any;
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
-declare function jsx<T extends HTMLTag>(tag: T, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T];
+declare function jsx<T extends HTMLTag>(tag: T | Function, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T] | HTMLElement;
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
@@ -126,5 +129,23 @@ declare const jsxDEV: typeof jsx;
  */
 declare const jsxs: typeof jsx;
 
+declare global {
+  namespace JSX {
+    type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    interface IntrinsicAttributes {
+      key?: string | number;
+    }
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 export { Fragment, h as createElement, jsx, jsxDEV, jsxs, ref };
 export type { KTRef };

package/dist/jsx/index.mjs

@@ -155,25 +155,22 @@ function applyAttr(element, attr) {
     }
 }
 
+function apd(element, content) {
+    if (content && content.isKT) {
+        $append.call(element, content.value);
+    }
+    else {
+        $append.call(element, content);
+    }
+}
 function applyContent(element, content) {
     if ($isArray(content)) {
         for (let i = 0; i < content.length; i++) {
-            let c = content[i];
-            if (c && c.isRef) {
-                $append.call(element, c.value);
-            }
-            else {
-                $append.call(element, c);
-            }
+            apd(element, content[i]);
         }
     }
     else {
-        if (content && content.isRef) {
-            $append.call(element, content.value);
-        }
-        else {
-            $append.call(element, content);
-        }
+        apd(element, content);
     }
 }
 
@@ -187,14 +184,14 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-const h = (tag, attr = '', content = '') => {
+const h = ((tag, attr = '', content = '') => {
     if (typeof tag !== 'string') {
         $throw('__func__ tagName must be a string.');
     }
@@ -204,15 +201,22 @@ const h = (tag, attr = '', content = '') => {
     applyAttr(element, attr);
     applyContent(element, content);
     return element;
-};
+});
 $mark(h, 'h');
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
 function jsx(tag, props, ..._metadata) {
+    // Handle function components
+    if (typeof tag === 'function') {
+        const propObj = typeof props === 'string' ? { class: props } : props || {};
+        const children = propObj.children;
+        return tag({ ...propObj, children });
+    }
+    // Handle regular HTML tags
     const propObj = typeof props === 'string' ? { class: props } : props;
     if (propObj === undefined || propObj === null) {
         return h(tag);
@@ -227,12 +231,6 @@ function jsx(tag, props, ..._metadata) {
     const el = h(tag, propObj, children);
     if (ref) {
         ref.value = el;
-        ref.update = () => {
-            const old = ref.value;
-            ref.value = h(tag, propObj, children);
-            old.replaceWith(ref.value);
-            return ref.value;
-        };
     }
     return el;
 }
@@ -280,9 +278,8 @@ const jsxDEV = (...args) => {
  */
 const jsxs = jsx;
 
-const noop = () => ({});
 function ref(value) {
-    return { value: value, update: noop, isRef: true };
+    return { value: value, isKT: true };
 }
 
 export { Fragment, h as createElement, jsx, jsxDEV, jsxs, ref };

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

@@ -7,12 +7,11 @@ type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
 
 interface KTRef<T> {
     value: T;
-    update: () => T;
-    isRef: true;
+    isKT: true;
 }
 
-type Ctt = KTRef<any> | HTMLElement | string | number | undefined;
-type KTRawContent = Ctt[] | Ctt;
+type KTAvailableContent = KTRef<any> | HTMLElement | string | number | undefined;
+type KTRawContent = KTAvailableContent[] | KTAvailableContent;
 type KTRawAttr = KTAttribute | string;
 
 /**
@@ -76,6 +75,10 @@ type KTPrefixedEventHandlers = {
 type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
 
 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.
@@ -86,14 +89,14 @@ type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagN
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+declare const h: H;
 
 /**
  * This is a `falsy` value used to indicate "no node" in `h` function.
@@ -102,11 +105,11 @@ declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawCo
 declare const ktnull: any;
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
-declare function jsx<T extends HTMLTag>(tag: T, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T];
+declare function jsx<T extends HTMLTag>(tag: T | Function, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T] | HTMLElement;
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,

package/dist/jsx/jsx-runtime.mjs

@@ -155,25 +155,22 @@ function applyAttr(element, attr) {
     }
 }
 
+function apd(element, content) {
+    if (content && content.isKT) {
+        $append.call(element, content.value);
+    }
+    else {
+        $append.call(element, content);
+    }
+}
 function applyContent(element, content) {
     if ($isArray(content)) {
         for (let i = 0; i < content.length; i++) {
-            let c = content[i];
-            if (c && c.isRef) {
-                $append.call(element, c.value);
-            }
-            else {
-                $append.call(element, c);
-            }
+            apd(element, content[i]);
         }
     }
     else {
-        if (content && content.isRef) {
-            $append.call(element, content.value);
-        }
-        else {
-            $append.call(element, content);
-        }
+        apd(element, content);
     }
 }
 
@@ -187,14 +184,14 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.8.3 (Last Update: 2025.12.25 11:27:17.924)
+ * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
  * @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) 2025 Kasukabe Tsumugi. All rights reserved.
  */
-const h = (tag, attr = '', content = '') => {
+const h = ((tag, attr = '', content = '') => {
     if (typeof tag !== 'string') {
         $throw('__func__ tagName must be a string.');
     }
@@ -204,15 +201,22 @@ const h = (tag, attr = '', content = '') => {
     applyAttr(element, attr);
     applyContent(element, content);
     return element;
-};
+});
 $mark(h, 'h');
 
 /**
- * @param tag html tag
+ * @param tag html tag or function component
  * @param props properties/attributes
  * @param _metadata metadata is ignored
  */
 function jsx(tag, props, ..._metadata) {
+    // Handle function components
+    if (typeof tag === 'function') {
+        const propObj = typeof props === 'string' ? { class: props } : props || {};
+        const children = propObj.children;
+        return tag({ ...propObj, children });
+    }
+    // Handle regular HTML tags
     const propObj = typeof props === 'string' ? { class: props } : props;
     if (propObj === undefined || propObj === null) {
         return h(tag);
@@ -227,12 +231,6 @@ function jsx(tag, props, ..._metadata) {
     const el = h(tag, propObj, children);
     if (ref) {
         ref.value = el;
-        ref.update = () => {
-            const old = ref.value;
-            ref.value = h(tag, propObj, children);
-            old.replaceWith(ref.value);
-            return ref.value;
-        };
     }
     return el;
 }

package/package.json

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