@ktjs/core 0.7.1 → 0.8.0

package/dist/index.mjs

@@ -172,18 +172,25 @@ function applyAttr(element, attr) {
     }
 }
 
-function applyContent(element, 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);
@@ -191,8 +198,8 @@ function applyContent(element, content) {
         }
     }
     else {
-        if (typeof content === 'number') {
-            $append.call(element, content.toString());
+        if (content instanceof Ref) {
+            $append.call(element, content.value);
         }
         else {
             $append.call(element, content);
@@ -210,11 +217,11 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.7.1 (Last Update: 2025.12.25 09:44:03.948)
+ * @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 = '') => {
@@ -231,82 +238,76 @@ const h = (tag, attr = '', content = '') => {
 $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;
 
-export { h, ktnull, notSupportTextNode };
+export { Fragment, Ref, h as createElement, h, jsx, jsxDEV, jsxs, ktnull, ref };

package/dist/jsx/index.d.ts

@@ -0,0 +1,129 @@
+type otherstring = string & {};
+
+/**
+ * Normal HTML tags like `div`, `span`, `a`, etc.
+ */
+type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
+
+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;
+
+/**
+ * Used to create enhanced HTML elements
+ */
+interface KTBaseAttribute {
+  [k: string]: any;
+
+  id?: string;
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+  for?: string;
+
+  name?: string;
+  value?: string;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
+  label?: string;
+  disabled?: boolean;
+
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+
+  selected?: boolean;
+  checked?: boolean;
+
+  action?: string;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+type KTPrefixedEventHandlers = {
+  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+
+type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
+/**
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
+ *
+ * ## About
+ * @package @ktjs/core
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @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 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>;
+
+/**
+ * This is a `falsy` value used to indicate "no node" in `h` function.
+ * - It's an object, so it's guaranteed to be unique and no need for polyfill of `symbol`.
+ */
+declare const ktnull: any;
+
+/**
+ * @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 { Fragment, Ref, h as createElement, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.mjs

@@ -0,0 +1,296 @@
+const $throw = (message) => {
+    throw new Error('kt.js: ' + message);
+};
+
+const $isArray = Array.isArray;
+const $keys = Object.keys;
+const $defines = Object.defineProperties;
+const $mark = (func, tag) => $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+
+/**
+ * This is a `falsy` value used to indicate "no node" in `h` function.
+ * - It's an object, so it's guaranteed to be unique and no need for polyfill of `symbol`.
+ */
+const ktnull = Object.create(null);
+
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        const nodes = args.filter((a) => a !== ktnull);
+        return originAppend.apply(this, nodes);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else if (node !== ktnull) {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else if (node !== ktnull) {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+function booleanHandler(element, key, value) {
+    if (key in element) {
+        element[key] = !!value;
+    }
+    else {
+        element.setAttribute(key, value);
+    }
+}
+function valueHandler(element, key, value) {
+    if (key in element) {
+        element[key] = value;
+    }
+    else {
+        element.setAttribute(key, value);
+    }
+}
+// Attribute handlers map for optimized lookup
+const handlers = {
+    checked: booleanHandler,
+    selected: booleanHandler,
+    value: valueHandler,
+    valueAsDate: valueHandler,
+    valueAsNumber: valueHandler,
+    defaultValue: valueHandler,
+    defaultChecked: booleanHandler,
+    defaultSelected: booleanHandler,
+    disabled: booleanHandler,
+    readOnly: booleanHandler,
+    multiple: booleanHandler,
+    required: booleanHandler,
+    autofocus: booleanHandler,
+    open: booleanHandler,
+    controls: booleanHandler,
+    autoplay: booleanHandler,
+    loop: booleanHandler,
+    muted: booleanHandler,
+    defer: booleanHandler,
+    async: booleanHandler,
+    hidden: function (element, _key, value) {
+        element.hidden = !!value;
+    },
+};
+const defaultHandler = function (element, key, value) {
+    return element.setAttribute(key, value);
+};
+function attrIsObject(element, attr) {
+    const classValue = attr.class;
+    const style = attr.style;
+    if (classValue !== undefined) {
+        element.className = classValue;
+        delete attr.class;
+    }
+    if (style) {
+        if (typeof style === 'string') {
+            element.setAttribute('style', style);
+        }
+        else if (typeof style === 'object') {
+            for (const key in style) {
+                element.style[key] = style[key];
+            }
+        }
+        delete attr.style;
+    }
+    const keys = $keys(attr);
+    for (let i = keys.length - 1; i >= 0; i--) {
+        const key = keys[i];
+        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
+        if (key.startsWith('on:')) {
+            element.addEventListener(key.slice(3), o); // chop off the `@`
+            continue;
+        }
+        if (typeof o === 'function') {
+            (handlers[key] || defaultHandler)(element, key, o());
+        }
+        else {
+            (handlers[key] || defaultHandler)(element, key, o);
+        }
+    }
+    if (classValue !== undefined) {
+        attr.class = classValue;
+    }
+    if (style !== undefined) {
+        attr.style = style;
+    }
+}
+function applyAttr(element, attr) {
+    if (typeof attr === 'string') {
+        element.className = attr;
+    }
+    else if (typeof attr === 'object' && attr !== null) {
+        attrIsObject(element, attr);
+    }
+    else {
+        $throw('attr must be an object/string.');
+    }
+}
+
+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 (c instanceof Ref) {
+                $append.call(element, c.value);
+            }
+            else {
+                $append.call(element, c);
+            }
+        }
+    }
+    else {
+        if (content instanceof Ref) {
+            $append.call(element, content.value);
+        }
+        else {
+            $append.call(element, content);
+        }
+    }
+}
+
+/**
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
+ *
+ * ## About
+ * @package @ktjs/core
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @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 with JSX/TSX support
+ * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
+ */
+const h = (tag, attr = '', content = '') => {
+    if (typeof tag !== 'string') {
+        $throw('__func__ tagName must be a string.');
+    }
+    // * start creating the element
+    const element = document.createElement(tag);
+    // * Handle content
+    applyAttr(element, attr);
+    applyContent(element, content);
+    return element;
+};
+$mark(h, 'h');
+
+/**
+ * @param tag html tag
+ * @param props properties/attributes
+ * @param _metadata metadata is ignored
+ */
+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;
+
+export { Fragment, Ref, h as createElement, jsx, jsxDEV, jsxs, ref };