@ktjs/core 0.28.1 → 0.29.0

package/dist/jsx/index.mjs

@@ -1,676 +0,0 @@
-// Cached native methods for performance optimization
-const $isArray = Array.isArray;
-const $is = Object.is;
-const $random = Math.random;
-const $isThenable = (o) => typeof o?.then === 'function';
-
-if (typeof Symbol === 'undefined') {
-    window.Symbol = function Symbol(description) {
-        return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
-    };
-}
-
-// Shared constants
-// Empty for now - can be extended with framework-wide constants
-/**
- * Mark the attribute as SVG to handle special cases during rendering.
- */
-const SVG_ATTR_FLAG = '__kt_svg__';
-/**
- * Mark the attribute as MathML to handle special cases during rendering.
- */
-const MATHML_ATTR_FLAG = '__kt_mathml__';
-
-// DOM manipulation utilities
-// # dom natives
-const $isNode = (x) => x?.nodeType > 0;
-/**
- * Safe replace `oldNode` With `newNode`
- */
-const $replaceNode = (oldNode, newNode) => {
-    if ($isNode(oldNode) && $isNode(newNode)) {
-        if (newNode.contains(oldNode)) {
-            newNode.remove();
-        }
-        oldNode.replaceWith(newNode);
-    }
-};
-/**
- * & 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'
-    ? originAppend
-    : 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 {
-                    $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 {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-/**
- * Used for `k-model`
- */
-const $applyModel = (element, valueRef, propName, eventName) => {
-    element[propName] = valueRef.value; // initialize
-    valueRef.addOnChange((newValue) => (element[propName] = newValue));
-    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
-};
-/**
- * Safe and quick forEach implementation that works with array-like objects and handles sparse arrays.
- */
-const $forEach = (array, callback) => {
-    const len = array.length;
-    for (let i = 0; i < len; i++) {
-        callback(array[i], i, array);
-    }
-};
-
-// incase that symbol is not supported
-Object.defineProperty(window, '__ktjs__', { value: '0.23.11' });
-
-const isKT = (obj) => obj?.isKT;
-const isRef = (obj) => obj?.ktType === 1 /* KTReactiveType.REF */;
-const isComputed = (obj) => obj?.ktType === 2 /* KTReactiveType.COMPUTED */;
-
-const booleanHandler = (element, key, value) => {
-    if (key in element) {
-        element[key] = !!value;
-    }
-    else {
-        element.setAttribute(key, value);
-    }
-};
-const 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: (element, _key, value) => (element.hidden = !!value),
-};
-
-const defaultHandler = (element, key, value) => element.setAttribute(key, value);
-const setElementStyle = (element, style) => {
-    if (typeof style === 'string') {
-        element.style.cssText = style;
-        return;
-    }
-    for (const key in style) {
-        element.style[key] = style[key];
-    }
-};
-function attrIsObject(element, attr) {
-    const classValue = attr.class || attr.className;
-    if (classValue !== undefined) {
-        if (isKT(classValue)) {
-            element.setAttribute('class', classValue.value);
-            classValue.addOnChange((v) => element.setAttribute('class', v));
-        }
-        else {
-            element.setAttribute('class', classValue);
-        }
-    }
-    const style = attr.style;
-    if (style) {
-        if (typeof style === 'string') {
-            element.setAttribute('style', style);
-        }
-        else if (typeof style === 'object') {
-            if (isKT(style)) {
-                setElementStyle(element, style.value);
-                style.addOnChange((v) => setElementStyle(element, v));
-            }
-            else {
-                setElementStyle(element, style);
-            }
-        }
-    }
-    if ('k-html' in attr) {
-        const html = attr['k-html'];
-        if (isKT(html)) {
-            element.innerHTML = html.value;
-            html.addOnChange((v) => (element.innerHTML = v));
-        }
-        else {
-            element.innerHTML = html;
-        }
-    }
-    for (const key in attr) {
-        if (key === 'k-if' ||
-            key === 'k-model' ||
-            key === 'ref' ||
-            key === 'class' ||
-            key === 'className' ||
-            key === 'style' ||
-            key === 'children' ||
-            key === 'k-html') {
-            continue;
-        }
-        const o = attr[key];
-        // normal event handler
-        if (key.startsWith('on:')) {
-            element.addEventListener(key.slice(3), o); // chop off the `on:`
-        }
-        // normal attributes
-        else {
-            const handler = handlers[key] || defaultHandler;
-            if (isKT(o)) {
-                handler(element, key, o.value);
-                o.addOnChange((v) => handler(element, key, v));
-            }
-            else {
-                handler(element, key, o);
-            }
-        }
-    }
-}
-function applyAttr(element, attr) {
-    if (!attr) {
-        return;
-    }
-    if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
-    }
-    else {
-        throw new Error('[kt.js error] attr must be an object.');
-    }
-}
-
-const assureNode = (o) => ($isNode(o) ? o : document.createTextNode(o));
-function apdSingle(element, c) {
-    // & JSX should ignore false, undefined, and null
-    if (c === false || c === undefined || c === null) {
-        return;
-    }
-    if (isKT(c)) {
-        let node = assureNode(c.value);
-        $append.call(element, node);
-        c.addOnChange((newValue, oldValue) => {
-            if ($isNode(newValue) && $isNode(oldValue)) {
-                // & this case is handled automically in `class KTRef`
-                return;
-            }
-            const oldNode = node;
-            node = assureNode(newValue);
-            oldNode.replaceWith(node);
-        });
-    }
-    else {
-        $append.call(element, c);
-        // Handle KTFor anchor
-        // todo Maybe not needed anymore
-        const list = c.__kt_for_list__;
-        if ($isArray(list)) {
-            apd(element, list);
-        }
-    }
-}
-function apd(element, c) {
-    if ($isThenable(c)) {
-        c.then((r) => apd(element, r));
-    }
-    else if ($isArray(c)) {
-        for (let i = 0; i < c.length; i++) {
-            // & might be thenable here too
-            const ci = c[i];
-            if ($isThenable(ci)) {
-                const comment = document.createComment('ktjs-promise-placeholder');
-                $append.call(element, comment);
-                ci.then((awaited) => comment.replaceWith(awaited));
-            }
-            else {
-                apdSingle(element, ci);
-            }
-        }
-    }
-    else {
-        // & here is thened, so must be a simple elementj
-        apdSingle(element, c);
-    }
-}
-function applyContent(element, content) {
-    if ($isArray(content)) {
-        for (let i = 0; i < content.length; i++) {
-            apd(element, content[i]);
-        }
-    }
-    else {
-        apd(element, content);
-    }
-}
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    ktType = 1 /* KTReactiveType.REF */;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    /**
-     * @internal
-     */
-    _emit(newValue, oldValue) {
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    constructor(_value, _onChanges) {
-        this._value = _value;
-        this._onChanges = _onChanges;
-    }
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if ($is(newValue, this._value)) {
-            return;
-        }
-        const oldValue = this._value;
-        $replaceNode(oldValue, newValue);
-        this._value = newValue;
-        this._emit(newValue, oldValue);
-    }
-    /**
-     * Force all listeners to run even when reference identity has not changed.
-     * Useful for in-place array/object mutations.
-     */
-    notify() {
-        this._emit(this._value, this._value);
-    }
-    /**
-     * Mutate current value in-place and notify listeners once.
-     *
-     * @example
-     * const items = ref<number[]>([1, 2]);
-     * items.mutate((list) => list.push(3));
-     */
-    mutate(mutator) {
-        if (typeof mutator !== 'function') {
-            throw new Error('[kt.js error] KTRef.mutate: mutator must be a function');
-        }
-        const oldValue = this._value;
-        const result = mutator(this._value);
-        this._emit(this._value, oldValue);
-        return result;
-    }
-    /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
-     */
-    addOnChange(callback) {
-        if (typeof callback !== 'function') {
-            throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
-        }
-        this._onChanges.push(callback);
-    }
-    removeOnChange(callback) {
-        for (let i = this._onChanges.length - 1; i >= 0; i--) {
-            if (this._onChanges[i] === callback) {
-                this._onChanges.splice(i, 1);
-                return true;
-            }
-        }
-        return false;
-    }
-}
-/**
- * Reference to the created HTML element.
- * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
- * - can alse be used to store normal values, but it is not reactive.
- * - if the value is already a `KTRef`, it will be returned **directly**.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, onChange ? [onChange] : []);
-}
-const $setRef = (props, node) => {
-    if ('ref' in props) {
-        const r = props.ref;
-        if (isRef(r)) {
-            r.value = node;
-        }
-        else {
-            throw new Error('[kt.js error] Fragment: ref must be a KTRef');
-        }
-    }
-};
-
-const toReactive = (value, onChange) => {
-    if (isKT(value)) {
-        if (onChange) {
-            value.addOnChange(onChange);
-        }
-        return value;
-    }
-    else {
-        return ref(value, onChange);
-    }
-};
-
-function applyKModel(element, valueRef) {
-    if (!isKT(valueRef)) {
-        console.warn('[kt.js warn]','k-model value must be a KTRef.');
-        return;
-    }
-    if (element instanceof HTMLInputElement) {
-        if (element.type === 'radio' || element.type === 'checkbox') {
-            $applyModel(element, valueRef, 'checked', 'change');
-        }
-        else {
-            $applyModel(element, valueRef, 'value', 'input');
-        }
-    }
-    else if (element instanceof HTMLSelectElement) {
-        $applyModel(element, valueRef, 'value', 'change');
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        $applyModel(element, valueRef, 'value', 'input');
-    }
-    else {
-        console.warn('[kt.js warn]','not supported element for k-model:');
-    }
-}
-
-const htmlCreator = (tag) => document.createElement(tag);
-const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
-const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
-let creator = htmlCreator;
-/**
- * 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.28.1 (Last Update: 2026.02.10 11:23:01.128)
- * @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) => {
-    if (typeof tag !== 'string') {
-        throw new Error('[kt.js error] tagName must be a string.');
-    }
-    if (attr) {
-        if (SVG_ATTR_FLAG in attr) {
-            delete attr[SVG_ATTR_FLAG];
-            creator = svgCreator;
-        }
-        else if (MATHML_ATTR_FLAG in attr) {
-            delete attr[MATHML_ATTR_FLAG];
-            creator = mathMLCreator;
-        }
-        else {
-            creator = htmlCreator;
-        }
-    }
-    // * start creating the element
-    const element = creator(tag);
-    // * Handle content
-    applyAttr(element, attr);
-    applyContent(element, content);
-    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
-        applyKModel(element, attr['k-model']);
-    }
-    return element;
-};
-
-/**
- * Fragment - Container component for managing arrays of child elements
- *
- * Features:
- * 1. Returns a comment anchor node, child elements are inserted after the anchor
- * 2. Supports reactive arrays, automatically updates DOM when array changes
- * 3. Basic version uses simple replacement algorithm (remove all old elements, insert all new elements)
- * 4. Future enhancement: key-based optimization
- *
- * Usage example:
- * ```tsx
- * const children = ref([<div>A</div>, <div>B</div>]);
- * const fragment = <Fragment children={children} />;
- * document.body.appendChild(fragment);
- *
- * // Automatic update
- * children.value = [<div>C</div>, <div>D</div>];
- * ```
- */
-function Fragment$1(props) {
-    // key parameter reserved for future enhancement, currently unused
-    // const { key: _key } = props;
-    const redraw = () => {
-        const newElements = childrenRef.value;
-        const parent = anchor.parentNode;
-        if (!parent) {
-            // If anchor is not in DOM, only update internal state
-            elements.length = 0;
-            for (let i = 0; i < newElements.length; i++) {
-                elements.push(newElements[i]);
-            }
-            return;
-        }
-        // Simple replacement algorithm: remove all old elements, insert all new elements
-        // todo Future enhancement: key-based optimization
-        // 1. Remove all old elements
-        for (let i = 0; i < elements.length; i++) {
-            elements[i].remove();
-        }
-        // 2. Insert all new elements
-        const fragment = document.createDocumentFragment();
-        elements.length = 0;
-        for (let i = 0; i < newElements.length; i++) {
-            const element = newElements[i];
-            elements.push(element);
-            fragment.appendChild(element);
-        }
-        // Insert after anchor
-        parent.insertBefore(fragment, anchor.nextSibling);
-    };
-    let initialized = false;
-    const childrenRef = toReactive(props.children, redraw);
-    const elements = [];
-    const anchor = document.createComment('kt-fragment');
-    // Observe DOM insertion
-    const observer = new MutationObserver(() => {
-        if (anchor.isConnected && !initialized) {
-            initialized = true;
-            redraw();
-            observer.disconnect();
-        }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-    // Set ref reference
-    $setRef(props, anchor);
-    return anchor;
-}
-/**
- * Convert KTRawContent to HTMLElement array
- */
-function convertChildrenToElements(children) {
-    const elements = [];
-    const processChild = (child) => {
-        if (child == null || child === false || child === true) {
-            // Ignore null, undefined, false, true
-            return;
-        }
-        if ($isArray(child)) {
-            // Recursively process array
-            $forEach(child, processChild);
-            return;
-        }
-        if (typeof child === 'string' || typeof child === 'number') {
-            // & Wrap text in span element? No! use text node instead
-            const textNode = document.createTextNode(String(child));
-            elements.push(textNode);
-            return;
-        }
-        if (child instanceof HTMLElement) {
-            elements.push(child);
-            return;
-        }
-        if (isKT(child)) {
-            processChild(child.value);
-            return;
-        }
-        // Other types ignored or converted to string
-        console.warn('[kt.js warn]','Fragment: unsupported child type', child);
-    };
-    processChild(children);
-    return elements;
-}
-
-const create = (tag, props) => {
-    if (typeof tag === 'function') {
-        return tag(props);
-    }
-    else {
-        return h(tag, props, props.children);
-    }
-};
-const placeholder = () => document.createComment('k-if');
-/**
- * @param tag html tag or function component
- * @param props properties/attributes
- */
-function jsx(tag, props) {
-    if (isComputed(props.ref)) {
-        throw new Error('[kt.js error] Cannot assign a computed value to an element.');
-    }
-    let el;
-    if ('k-if' in props) {
-        const kif = props['k-if'];
-        let condition = kif; // assume boolean by default
-        // Handle reactive k-if
-        if (isKT(kif)) {
-            kif.addOnChange((newValue, oldValue) => {
-                if (newValue === oldValue) {
-                    return;
-                }
-                const oldEl = el;
-                $setRef(props, (el = newValue ? create(tag, props) : placeholder()));
-                $replaceNode(oldEl, el);
-            });
-            condition = kif.value;
-        }
-        if (!condition) {
-            // & make comment placeholder in case that ref might be redrawn later
-            $setRef(props, (el = placeholder()));
-            return el;
-        }
-    }
-    $setRef(props, (el = create(tag, props)));
-    return el;
-}
-/**
- * Fragment support - returns an array of children
- * Enhanced Fragment component that manages arrays of elements
- */
-function Fragment(props) {
-    const { children } = props ?? {};
-    if (!children) {
-        return document.createComment('kt-fragment-empty');
-    }
-    const elements = convertChildrenToElements(children);
-    return Fragment$1({ children: elements });
-}
-/**
- * JSX Development runtime - same as jsx but with additional dev checks
- */
-const jsxDEV = (...args) => {
-    // console.log('JSX DEV called:', ...args);
-    // console.log('children', (args[1] as any)?.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;
-/**
- * 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();
-    const redraw = () => {
-        elRef.value = creator(); // ref setter automatically calls replaceWith
-        elRef.redraw = redraw;
-        return elRef.value;
-    };
-    redraw();
-    return elRef;
-}
-
-export { Fragment, h as createElement, createRedrawable, jsx, jsxDEV, jsxs };