@ktjs/core 0.7.3 → 0.8.0

package/dist/index.d.ts

@@ -22,8 +22,15 @@ type otherstring = string & {};
  */
 type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
 
-type Ctt = HTMLElement | string | number | undefined;
-type KTRawContent = (Ctt | (() => Ctt))[] | Ctt;
+declare class Ref<T> {
+    value: T;
+    update: () => T;
+    constructor(value: T);
+}
+declare function ref<T>(value: T): Ref<T>;
+
+type Ctt = Ref<any> | HTMLElement | string | number | undefined;
+type KTRawContent = Ctt[] | Ctt;
 type KTRawAttr = KTAttribute | string;
 type KTRawContents = (HTMLElement | string | undefined)[];
 
@@ -103,16 +110,38 @@ type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagN
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.7.3 (Last Update: 2025.12.25 09:51:02.157)
+ * @version 0.8.0 (Last Update: 2025.12.25 11:01:24.676)
  * @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
+ * @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 function notSupportTextNode(tag: HTMLTag): boolean;
+/**
+ * @param tag html tag
+ * @param props properties/attributes
+ * @param _metadata metadata is ignored
+ */
+declare function jsx<T extends HTMLTag>(tag: T, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T];
+/**
+ * Fragment support - returns an array of children
+ * Note: kt.js doesn't have a real Fragment concept,
+ * so we return ktnull for empty fragments or flatten children
+ */
+declare function Fragment(props: {
+    children?: KTRawContent;
+}): HTMLElement | typeof ktnull;
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+declare const jsxDEV: typeof jsx;
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+declare const jsxs: typeof jsx;
 
-export { h, ktnull, notSupportTextNode };
+export { Fragment, Ref, h as createElement, h, jsx, jsxDEV, jsxs, ktnull, ref };
 export type { EventHandler, HTMLTag, KTAttribute, KTRawAttr, KTRawContent, KTRawContents, KTRuntime };

package/dist/index.iife.js

@@ -175,19 +175,25 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    function applyContent(element, content) {
-        console.log('applyContent', content);
-        if (typeof content === 'function') {
-            content = content();
+    const noop = () => ({});
+    class Ref {
+        value;
+        update;
+        constructor(value) {
+            this.value = value;
+            this.update = noop;
         }
+    }
+    function ref(value) {
+        return new Ref(value);
+    }
+
+    function applyContent(element, content) {
         if ($isArray(content)) {
             for (let i = 0; i < content.length; i++) {
                 let c = content[i];
-                if (typeof c === 'function') {
-                    c = c();
-                }
-                else if (typeof c === 'number') {
-                    $append.call(element, c.toString());
+                if (c instanceof Ref) {
+                    $append.call(element, c.value);
                 }
                 else {
                     $append.call(element, c);
@@ -195,8 +201,8 @@ var __ktjs_core__ = (function (exports) {
             }
         }
         else {
-            if (typeof content === 'number') {
-                $append.call(element, content.toString());
+            if (content instanceof Ref) {
+                $append.call(element, content.value);
             }
             else {
                 $append.call(element, content);
@@ -214,11 +220,11 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.7.3 (Last Update: 2025.12.25 09:51:02.157)
+     * @version 0.8.0 (Last Update: 2025.12.25 11:01:24.676)
      * @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
+     * @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 = '') => {
@@ -235,87 +241,87 @@ var __ktjs_core__ = (function (exports) {
     $mark(h, 'h');
 
     /**
-     * # Specialized Ehancement
-     *
-     * Different elements should be enhanced in different ways. For example, we should have `kvalue` to handle `<input>` values.
-     * While we have no need to have `ktext` for `<br>` tags.
-     *
-     * ## Tags where appending a text node has no effect
-     *
-     * There are some HTML elements that appending a text node as their child takes no effect.
-     * They are mostly void elements, but some non-void elements are also included.
-     *
-     * ## What means no effect
-     * 1. appending a text node to these tags takes no effect.
-     * 2. No effect means `innerText` does not include the text in the text node.
-     *
-     * After testing 15 browsers testing, I found that these elements are:
-     *
-     * - FireFox(as base):
-     *   - script -- this is skipped due to some bugs in The World 7
-     *   - area, audio, base, basefont, br, canvas, datalist, details, dialog, frameset, head, iframe, img, input, link, meta, meter, noembed, noframes, noscript, optgroup, param, progress, rp, select, style, template, textarea, title, video, wbr
-     * - 360: embed
-     * - 2345: embed
-     * - maxthon: embed
-     * - quark: embed
-     * - uc: embed
-     * - chrome: embed,frame
-     * - qq: embed
-     * - sogou: embed
-     * - cent: embed
-     * - world: embed,frame,keygen,option
-     * - opera: embed
-     * - edge: embed
-     * - liebao: embed
-     * - 360turbo: embed,frame
-     *
-     * Since `Set.prototype.has` is about 80 times faster than `Array.prototype.includes`,
-     * We put these tags into a `Set` object.
+     * @param tag html tag
+     * @param props properties/attributes
+     * @param _metadata metadata is ignored
      */
-    const INVALID_TAGS = {
-        area: true,
-        audio: true,
-        base: true,
-        basefont: true,
-        br: true,
-        canvas: true,
-        datalist: true,
-        details: true,
-        dialog: true,
-        frameset: true,
-        head: true,
-        iframe: true,
-        img: true,
-        input: true,
-        link: true,
-        meta: true,
-        meter: true,
-        noembed: true,
-        noframes: true,
-        noscript: true,
-        optgroup: true,
-        param: true,
-        progress: true,
-        rp: true,
-        select: true,
-        style: true,
-        template: true,
-        textarea: true,
-        title: true,
-        video: true,
-        wbr: true,
-        embed: true,
-        frame: true,
-        keygen: true,
-        option: true,
-    };
-    function notSupportTextNode(tag) {
-        return INVALID_TAGS[tag];
+    function jsx(tag, props, ..._metadata) {
+        const propObj = typeof props === 'string' ? { class: props } : props;
+        if (propObj === undefined || propObj === null) {
+            return h(tag);
+        }
+        const children = propObj.children;
+        delete propObj.children;
+        // deal with ref attribute
+        const ref = 'ref' in propObj && propObj.ref instanceof Ref ? propObj.ref : null;
+        if (ref) {
+            delete propObj.ref;
+        }
+        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;
+    }
+    /**
+     * Fragment support - returns an array of children
+     * Note: kt.js doesn't have a real Fragment concept,
+     * so we return ktnull for empty fragments or flatten children
+     */
+    function Fragment(props) {
+        window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
+        // const { children } = props || {};
+        // if (!children) {
+        //   return ktnull;
+        // }
+        // // If single child, return it directly
+        // if (!Array.isArray(children)) {
+        //   return children as HTMLElement;
+        // }
+        // // For multiple children, create a document fragment wrapper
+        // // This is a limitation - JSX fragments must be wrapped in kt.js
+        // const wrapper = document.createElement('div');
+        // wrapper.setAttribute('data-kt-fragment', 'true');
+        // children.forEach((child) => {
+        //   if (child && child !== ktnull) {
+        //     if (typeof child === 'string') {
+        //       wrapper.appendChild(document.createTextNode(child));
+        //     } else if (child instanceof HTMLElement) {
+        //       wrapper.appendChild(child);
+        //     }
+        //   }
+        // });
+        // return wrapper;
     }
+    /**
+     * JSX Development runtime - same as jsx but with additional dev checks
+     */
+    const jsxDEV = (...args) => {
+        console.log('JSX DEV called:', ...args);
+        console.log('chilren', args[1]?.children);
+        return jsx(...args);
+    };
+    /**
+     * JSX runtime for React 17+ automatic runtime
+     * This is called when using jsx: "react-jsx" or "react-jsxdev"
+     */
+    const jsxs = jsx;
 
+    exports.Fragment = Fragment;
+    exports.Ref = Ref;
+    exports.createElement = h;
     exports.h = h;
+    exports.jsx = jsx;
+    exports.jsxDEV = jsxDEV;
+    exports.jsxs = jsxs;
     exports.ktnull = ktnull;
-    exports.notSupportTextNode = notSupportTextNode;
+    exports.ref = ref;
 
     return exports;
 

package/dist/index.legacy.js

@@ -186,19 +186,24 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    function applyContent(element, content) {
-        console.log('applyContent', content);
-        if (typeof content === 'function') {
-            content = content();
+    var noop = function () { return ({}); };
+    var Ref = /** @class */ (function () {
+        function Ref(value) {
+            this.value = value;
+            this.update = noop;
         }
+        return Ref;
+    }());
+    function ref(value) {
+        return new Ref(value);
+    }
+
+    function applyContent(element, content) {
         if ($isArray(content)) {
             for (var i = 0; i < content.length; i++) {
                 var c = content[i];
-                if (typeof c === 'function') {
-                    c = c();
-                }
-                else if (typeof c === 'number') {
-                    $append.call(element, c.toString());
+                if (c instanceof Ref) {
+                    $append.call(element, c.value);
                 }
                 else {
                     $append.call(element, c);
@@ -206,8 +211,8 @@ var __ktjs_core__ = (function (exports) {
             }
         }
         else {
-            if (typeof content === 'number') {
-                $append.call(element, content.toString());
+            if (content instanceof Ref) {
+                $append.call(element, content.value);
             }
             else {
                 $append.call(element, content);
@@ -225,11 +230,11 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.7.3 (Last Update: 2025.12.25 09:51:02.157)
+     * @version 0.8.0 (Last Update: 2025.12.25 11:01:24.676)
      * @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
+     * @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) {
@@ -247,88 +252,125 @@ var __ktjs_core__ = (function (exports) {
     };
     $mark(h, 'h');
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+    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)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
     /**
-     * # Specialized Ehancement
-     *
-     * Different elements should be enhanced in different ways. For example, we should have `kvalue` to handle `<input>` values.
-     * While we have no need to have `ktext` for `<br>` tags.
-     *
-     * ## Tags where appending a text node has no effect
-     *
-     * There are some HTML elements that appending a text node as their child takes no effect.
-     * They are mostly void elements, but some non-void elements are also included.
-     *
-     * ## What means no effect
-     * 1. appending a text node to these tags takes no effect.
-     * 2. No effect means `innerText` does not include the text in the text node.
-     *
-     * After testing 15 browsers testing, I found that these elements are:
-     *
-     * - FireFox(as base):
-     *   - script -- this is skipped due to some bugs in The World 7
-     *   - area, audio, base, basefont, br, canvas, datalist, details, dialog, frameset, head, iframe, img, input, link, meta, meter, noembed, noframes, noscript, optgroup, param, progress, rp, select, style, template, textarea, title, video, wbr
-     * - 360: embed
-     * - 2345: embed
-     * - maxthon: embed
-     * - quark: embed
-     * - uc: embed
-     * - chrome: embed,frame
-     * - qq: embed
-     * - sogou: embed
-     * - cent: embed
-     * - world: embed,frame,keygen,option
-     * - opera: embed
-     * - edge: embed
-     * - liebao: embed
-     * - 360turbo: embed,frame
-     *
-     * Since `Set.prototype.has` is about 80 times faster than `Array.prototype.includes`,
-     * We put these tags into a `Set` object.
+     * @param tag html tag
+     * @param props properties/attributes
+     * @param _metadata metadata is ignored
      */
-    var INVALID_TAGS = {
-        area: true,
-        audio: true,
-        base: true,
-        basefont: true,
-        br: true,
-        canvas: true,
-        datalist: true,
-        details: true,
-        dialog: true,
-        frameset: true,
-        head: true,
-        iframe: true,
-        img: true,
-        input: true,
-        link: true,
-        meta: true,
-        meter: true,
-        noembed: true,
-        noframes: true,
-        noscript: true,
-        optgroup: true,
-        param: true,
-        progress: true,
-        rp: true,
-        select: true,
-        style: true,
-        template: true,
-        textarea: true,
-        title: true,
-        video: true,
-        wbr: true,
-        embed: true,
-        frame: true,
-        keygen: true,
-        option: true,
-    };
-    function notSupportTextNode(tag) {
-        return INVALID_TAGS[tag];
+    function jsx(tag, props) {
+        var propObj = typeof props === 'string' ? { class: props } : props;
+        if (propObj === undefined || propObj === null) {
+            return h(tag);
+        }
+        var children = propObj.children;
+        delete propObj.children;
+        // deal with ref attribute
+        var ref = 'ref' in propObj && propObj.ref instanceof Ref ? propObj.ref : null;
+        if (ref) {
+            delete propObj.ref;
+        }
+        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;
+    }
+    /**
+     * Fragment support - returns an array of children
+     * Note: kt.js doesn't have a real Fragment concept,
+     * so we return ktnull for empty fragments or flatten children
+     */
+    function Fragment(props) {
+        window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
+        // const { children } = props || {};
+        // if (!children) {
+        //   return ktnull;
+        // }
+        // // If single child, return it directly
+        // if (!Array.isArray(children)) {
+        //   return children as HTMLElement;
+        // }
+        // // For multiple children, create a document fragment wrapper
+        // // This is a limitation - JSX fragments must be wrapped in kt.js
+        // const wrapper = document.createElement('div');
+        // wrapper.setAttribute('data-kt-fragment', 'true');
+        // children.forEach((child) => {
+        //   if (child && child !== ktnull) {
+        //     if (typeof child === 'string') {
+        //       wrapper.appendChild(document.createTextNode(child));
+        //     } else if (child instanceof HTMLElement) {
+        //       wrapper.appendChild(child);
+        //     }
+        //   }
+        // });
+        // return wrapper;
     }
+    /**
+     * JSX Development runtime - same as jsx but with additional dev checks
+     */
+    var jsxDEV = function () {
+        var _a;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        console.log.apply(console, __spreadArray(['JSX DEV called:'], args, false));
+        console.log('chilren', (_a = args[1]) === null || _a === void 0 ? void 0 : _a.children);
+        return jsx.apply(void 0, args);
+    };
+    /**
+     * JSX runtime for React 17+ automatic runtime
+     * This is called when using jsx: "react-jsx" or "react-jsxdev"
+     */
+    var jsxs = jsx;
 
+    exports.Fragment = Fragment;
+    exports.Ref = Ref;
+    exports.createElement = h;
     exports.h = h;
+    exports.jsx = jsx;
+    exports.jsxDEV = jsxDEV;
+    exports.jsxs = jsxs;
     exports.ktnull = ktnull;
-    exports.notSupportTextNode = notSupportTextNode;
+    exports.ref = ref;
 
     return exports;