@ktjs/core 0.29.8 → 0.29.11

package/dist/index.mjs

@@ -1,323 +1,1115 @@
-import { $replaceNode, $emptyFn, $isThenable } from '@ktjs/shared';
-import { K as KTReactiveType, i as isKT, t as toReactive, $ as $initRef } from './jsx-runtime-DGJHUQEM.js';
-export { d as $modelOrRef, F as Fragment, e as KTRef, h as createElement, c as createRedrawable, f as dereactive, h, g as isComputed, k as isRef, j as jsx, a as jsxDEV, b as jsxs, r as ref, s as surfaceRef, l as toRef } from './jsx-runtime-DGJHUQEM.js';
+import { $isArray, $isThenable, $append, $isNode, $emptyFn, $is, $replaceNode, $entries, $applyModel, $forEach } from '@ktjs/shared';
+
+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) {
+        // & Arranged in order of usage frequency
+        if (key === 'k-if' ||
+            key === 'k-model' ||
+            key === 'k-for' ||
+            key === 'k-key' ||
+            key === 'ref' ||
+            key === 'class' ||
+            key === 'className' ||
+            key === 'style' ||
+            key === 'children' ||
+            key === 'k-html' ||
+            key === 'k-else') {
+            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('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
+        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('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('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] : []);
+}
+/**
+ * Convert a value to `KTRef`.
+ * - Returns the original value if it is already a `KTRef`.
+ * - Throws error if the value is a `KTComputed`.
+ * - Otherwise wraps the value with `ref()`.
+ * @param o value to convert
+ */
+const toRef = (o) => {
+    if (isRef(o)) {
+        return o;
+    }
+    else if (isComputed(o)) {
+        $throw('Computed values cannot be used as KTRef.');
+    }
+    else {
+        return ref(o);
+    }
+};
+function kcollect() {
+    const newObj = {};
+    const entries = $entries(this);
+    for (let i = 0; i < entries.length; i++) {
+        const key = entries[i][0];
+        if (key === 'kcollect') {
+            continue;
+        }
+        newObj[key] = entries[i][1].value;
+    }
+    return newObj;
+}
+/**
+ * Make all first-level properties of the object a `KTRef`.
+ * - `obj.a.b` is not reactive
+ */
+const surfaceRef = (obj) => {
+    const entries = $entries(obj);
+    const newObj = { kcollect };
+    for (let i = 0; i < entries.length; i++) {
+        newObj[entries[i][0]] = ref(entries[i][1]);
+    }
+    return newObj;
+};
+// # asserts
+/**
+ * Assert k-model to be a ref object
+ */
+const $modelOrRef = (props, defaultValue) => {
+    // & props is an object. Won't use it in any other place
+    if ('k-model' in props) {
+        const kmodel = props['k-model'];
+        if (isRef(kmodel)) {
+            return kmodel;
+        }
+        else {
+            $throw(`k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
+        }
+    }
+    return ref(defaultValue);
+};
+const $refSetter = (props, node) => (props.ref.value = node);
+/**
+ * Whether `props.ref` is a `KTRef` only needs to be checked in the initial render
+ */
+const $initRef = (props, node) => {
+    if (!('ref' in props)) {
+        return $emptyFn;
+    }
+    const r = props.ref;
+    if (isRef(r)) {
+        r.value = node;
+        return $refSetter;
+    }
+    else {
+        $throw('Fragment: ref must be a KTRef');
+    }
+};
 
 class KTComputed {
-  /**
-   * Indicates that this is a KTRef instance
-   */
-  isKT = true;
-  ktType = KTReactiveType.COMPUTED;
-  /**
-   * @internal
-   */
-  _calculator;
-  /**
-   * @internal
-   */
-  _value;
-  /**
-   * @internal
-   */
-  _onChanges = [];
-  /**
-   * @internal
-   */
-  _emit(newValue, oldValue) {
-    for (let i = 0; i < this._onChanges.length; i++) {
-      this._onChanges[i](newValue, oldValue);
-    }
-  }
-  /**
-   * @internal
-   */
-  _recalculate(forceEmit = false) {
-    const oldValue = this._value;
-    const newValue = this._calculator();
-    if (oldValue === newValue) {
-      if (forceEmit) {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    ktType = 2 /* KTReactiveType.COMPUTED */;
+    /**
+     * @internal
+     */
+    _calculator;
+    /**
+     * @internal
+     */
+    _value;
+    /**
+     * @internal
+     */
+    _onChanges = [];
+    /**
+     * @internal
+     */
+    _emit(newValue, oldValue) {
+        for (let i = 0; i < this._onChanges.length; i++) {
+            this._onChanges[i](newValue, oldValue);
+        }
+    }
+    /**
+     * @internal
+     */
+    _recalculate(forceEmit = false) {
+        const oldValue = this._value;
+        const newValue = this._calculator();
+        if (oldValue === newValue) {
+            if (forceEmit) {
+                this._emit(newValue, oldValue);
+            }
+            return;
+        }
+        this._value = newValue;
+        $replaceNode(oldValue, newValue);
         this._emit(newValue, oldValue);
-      }
-      return;
-    }
-    this._value = newValue;
-    $replaceNode(oldValue, newValue);
-    this._emit(newValue, oldValue);
-  }
-  /**
-   * @internal
-   */
-  _subscribe(reactives) {
-    for (let i = 0; i < reactives.length; i++) {
-      const reactive = reactives[i];
-      reactive.addOnChange(() => this._recalculate());
-    }
-  }
-  constructor(_calculator, reactives) {
-    this._calculator = _calculator;
-    this._value = _calculator();
-    this._subscribe(reactives);
-  }
-  /**
-   * 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) {
-    throw new Error("[@ktjs/core error] KTComputed: cannot set value of a computed value");
-  }
-  /**
-   * Force listeners to run once with the latest computed result.
-   */
-  notify() {
-    this._recalculate(true);
-  }
-  /**
-   * Computed values are derived from dependencies and should not be mutated manually.
-   */
-  mutate() {
-    console.warn('[@ktjs/core warn]',"KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead");
-    return this._value;
-  }
-  /**
-   * Register a callback when the value changes
-   * @param callback (newValue, oldValue) => xxx
-   */
-  addOnChange(callback) {
-    if (typeof callback !== "function") {
-      throw new Error("[@ktjs/core error] KTRef.addOnChange: callback must be a function");
-    }
-    this._onChanges.push(callback);
-  }
-  /**
-   * Unregister a callback
-   * @param callback (newValue, oldValue) => xxx
-   */
-  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;
-  }
+    }
+    /**
+     * @internal
+     */
+    _subscribe(reactives) {
+        for (let i = 0; i < reactives.length; i++) {
+            const reactive = reactives[i];
+            reactive.addOnChange(() => this._recalculate());
+        }
+    }
+    constructor(_calculator, reactives) {
+        this._calculator = _calculator;
+        this._value = _calculator();
+        this._subscribe(reactives);
+    }
+    /**
+     * 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) {
+        $throw('KTComputed: cannot set value of a computed value');
+    }
+    /**
+     * Force listeners to run once with the latest computed result.
+     */
+    notify() {
+        this._recalculate(true);
+    }
+    /**
+     * Computed values are derived from dependencies and should not be mutated manually.
+     */
+    mutate() {
+        $warn('KTComputed.mutate: computed is derived automatically; manual mutate is ignored. Use notify() instead');
+        return this._value;
+    }
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback) {
+        if (typeof callback !== 'function') {
+            $throw('KTRef.addOnChange: callback must be a function');
+        }
+        this._onChanges.push(callback);
+    }
+    /**
+     * Unregister a callback
+     * @param callback (newValue, oldValue) => xxx
+     */
+    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;
+    }
 }
+/**
+ * Create a reactive computed value
+ * @param computeFn
+ * @param reactives refs and computeds that this computed depends on
+ */
 function computed(computeFn, reactives) {
-  if (reactives.some((v) => !isKT(v))) {
-    throw new Error("[@ktjs/core error] computed: all reactives must be KTRef or KTComputed instances");
-  }
-  return new KTComputed(computeFn, reactives);
+    if (reactives.some((v) => !isKT(v))) {
+        $throw('computed: all reactives must be KTRef or KTComputed instances');
+    }
+    return new KTComputed(computeFn, reactives);
 }
 
+/**
+ * Register a reactive effect with options.
+ * @param effectFn The effect function to run when dependencies change
+ * @param reactives The reactive dependencies
+ * @param options Effect options: lazy, onCleanup, debugName
+ * @returns stop function to remove all listeners
+ */
 function effect(effectFn, reactives, options) {
-  const { lazy = false, onCleanup = $emptyFn, debugName = "" } = Object(options);
-  let active = true;
-  const run = () => {
-    if (!active) {
-      return;
-    }
-    onCleanup();
-    try {
-      effectFn();
-    } catch (err) {
-      console.debug('[@ktjs/core debug]',"effect error:", debugName, err);
-    }
-  };
-  for (let i = 0; i < reactives.length; i++) {
-    reactives[i].addOnChange(run);
-  }
-  if (!lazy) {
-    run();
-  }
-  return () => {
-    if (!active) {
-      return;
-    }
-    active = false;
+    const { lazy = false, onCleanup = $emptyFn, debugName = '' } = Object(options);
+    let active = true;
+    const run = () => {
+        if (!active) {
+            return;
+        }
+        // cleanup before rerun
+        onCleanup();
+        try {
+            effectFn();
+        }
+        catch (err) {
+            $debug('effect error:', debugName, err);
+        }
+    };
+    // subscribe to dependencies
     for (let i = 0; i < reactives.length; i++) {
-      reactives[i].removeOnChange(run);
+        reactives[i].addOnChange(run);
+    }
+    // auto run unless lazy
+    if (!lazy) {
+        run();
+    }
+    // stop function
+    return () => {
+        if (!active) {
+            return;
+        }
+        active = false;
+        for (let i = 0; i < reactives.length; i++) {
+            reactives[i].removeOnChange(run);
+        }
+        // final cleanup
+        onCleanup();
+    };
+}
+
+const toReactive = (value, onChange) => {
+    if (isKT(value)) {
+        if (onChange) {
+            value.addOnChange(onChange);
+        }
+        return value;
+    }
+    else {
+        return ref(value, onChange);
+    }
+};
+/**
+ * Extracts the value from a KTReactive, or returns the value directly if it's not reactive.
+ */
+function dereactive(value) {
+    return isKT(value) ? value.value : value;
+}
+
+function applyKModel(element, valueRef) {
+    if (!isKT(valueRef)) {
+        $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 {
+        $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
+ *
+ * __PKG_INFO__
+ */
+const h = (tag, attr, content) => {
+    if (typeof tag !== 'string') {
+        $throw('tagName must be a string.');
+    }
+    if (attr) {
+        if (flags.svg in attr) {
+            delete attr[flags.svg];
+            creator = svgCreator;
+        }
+        else if (flags.mathml in attr) {
+            delete attr[flags.mathml];
+            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;
+};
+
+const FRAGMENT_MOUNT_PATCHED = '__kt_fragment_mount_patched__';
+const FRAGMENT_MOUNT = '__kt_fragment_mount__';
+if (typeof Node !== 'undefined' && !globalThis[FRAGMENT_MOUNT_PATCHED]) {
+    globalThis[FRAGMENT_MOUNT_PATCHED] = true;
+    const originAppendChild = Node.prototype.appendChild;
+    Node.prototype.appendChild = function (node) {
+        const result = originAppendChild.call(this, node);
+        const mount = node[FRAGMENT_MOUNT];
+        if (typeof mount === 'function') {
+            mount();
+        }
+        return result;
+    };
+    const originInsertBefore = Node.prototype.insertBefore;
+    Node.prototype.insertBefore = function (node, child) {
+        const result = originInsertBefore.call(this, node, child);
+        const mount = node[FRAGMENT_MOUNT];
+        if (typeof mount === 'function') {
+            mount();
+        }
+        return result;
+    };
+}
+/**
+ * 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) {
+    const elements = [];
+    const anchor = document.createComment('kt-fragment');
+    let inserted = false;
+    let observer;
+    const redraw = () => {
+        const newElements = childrenRef.value;
+        const parent = anchor.parentNode;
+        if (!parent) {
+            elements.length = 0;
+            for (let i = 0; i < newElements.length; i++) {
+                elements.push(newElements[i]);
+            }
+            anchor.__kt_fragment_list__ = elements;
+            return;
+        }
+        for (let i = 0; i < elements.length; i++) {
+            elements[i].remove();
+        }
+        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);
+        }
+        parent.insertBefore(fragment, anchor.nextSibling);
+        inserted = true;
+        delete anchor[FRAGMENT_MOUNT];
+        observer?.disconnect();
+        observer = undefined;
+        anchor.__kt_fragment_list__ = elements;
+    };
+    const childrenRef = toReactive(props.children, redraw);
+    const renderInitial = () => {
+        const current = childrenRef.value;
+        elements.length = 0;
+        const fragment = document.createDocumentFragment();
+        for (let i = 0; i < current.length; i++) {
+            const element = current[i];
+            elements.push(element);
+            fragment.appendChild(element);
+        }
+        anchor.__kt_fragment_list__ = elements;
+        const parent = anchor.parentNode;
+        if (parent && !inserted) {
+            parent.insertBefore(fragment, anchor.nextSibling);
+            inserted = true;
+        }
+    };
+    renderInitial();
+    anchor[FRAGMENT_MOUNT] = () => {
+        if (!inserted && anchor.parentNode) {
+            redraw();
+        }
+    };
+    observer = new MutationObserver(() => {
+        if (anchor.parentNode && !inserted) {
+            redraw();
+            observer?.disconnect();
+            observer = undefined;
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    $initRef(props, anchor);
+    return anchor;
+}
+/**
+ * Convert KTRawContent to HTMLElement array
+ */
+function convertChildrenToElements(children) {
+    const elements = [];
+    const processChild = (child) => {
+        if (child === undefined || 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') {
+            const span = document.createElement('span');
+            span.textContent = String(child);
+            elements.push(span);
+            return;
+        }
+        if (child instanceof HTMLElement) {
+            elements.push(child);
+            return;
+        }
+        if (isKT(child)) {
+            processChild(child.value);
+            return;
+        }
+        console.warn('Fragment: unsupported child type', child);
+    };
+    processChild(children);
+    return elements;
+}
+
+const jsxh = (tag, props) => {
+    if (typeof tag === 'function') {
+        return tag(props);
+    }
+    else {
+        return h(tag, props, props.children);
+    }
+};
+const placeholder = (data) => document.createComment(data);
+
+// # Only supports k-if/k-else, not k-else-if
+function kif(tag, props) {
+    const kif = toReactive(props['k-if']);
+    let el = (kif.value ? jsxh(tag, props) : placeholder('k-if'));
+    el.__kif__ = kif;
+    const setter = $initRef(props, el);
+    kif.addOnChange((newValue) => {
+        const old = el;
+        el = (newValue ? jsxh(tag, props) : placeholder('k-if'));
+        el.__kif__ = kif;
+        setter(props, el);
+        $replaceNode(old, el);
+    });
+    return el;
+}
+function kelse(tag, props) {
+    // k-else is not rendered by default
+    // until its corresponding k-if is true, then it will be rendered
+    // this will be detected when dealing with `children`
+    let el = placeholder('k-else');
+    const setter = $initRef(props, el);
+    el.__kelse__ = (newValue) => {
+        const old = el;
+        // reverse logic of `if`
+        el = (newValue ? placeholder('k-else') : jsxh(tag, props));
+        el.__kelse__ = old.__kelse__; // inherit
+        setter(props, el);
+        $replaceNode(old, el);
+    };
+    return el;
+}
+/**
+ * Deal with `k-if` and `k-else`, checking syntax and applying listeners
+ * @param el parent element
+ */
+function kifelseApply(el) {
+    const childNodes = el.childNodes;
+    // & We only need to check for k-else
+    if (childNodes.length === 0) {
+        return;
+    }
+    if (childNodes[0].__kelse__) {
+        $throw('k-else cannot be the first child of its parent element.');
+    }
+    for (let i = 1; i < childNodes.length; i++) {
+        const child = childNodes[i];
+        if (!child.__kelse__) {
+            continue;
+        }
+        const last = childNodes[i - 1];
+        if (!('__kif__' in last)) {
+            $throw('k-else must be immediately preceded by a k-if element.');
+        }
+        // falsy __kif__, not rendering
+        const kif = last.__kif__;
+        if (!kif) {
+            continue;
+        }
+        if (!isKT(kif)) {
+            continue;
+        }
+        kif.addOnChange(child.__kelse__);
+        if (!kif.value) {
+            child.__kelse__(false);
+        }
     }
-    onCleanup();
-  };
+}
+
+/**
+ * @param tag html tag or function component
+ * @param props properties/attributes
+ */
+function jsx(tag, props) {
+    if (isComputed(props.ref)) {
+        $throw('Cannot assign a computed value to an element.');
+    }
+    if ('k-if' in props) {
+        return kif(tag, props);
+    }
+    if ('k-else' in props) {
+        return kelse(tag, props);
+    }
+    const el = jsxh(tag, props);
+    $initRef(props, el);
+    kifelseApply(el);
+    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 placeholder('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;
 }
 
 function KTAsync(props) {
-  const raw = props.component(props);
-  let comp = props.skeleton ?? document.createComment("ktjs-suspense-placeholder");
-  if ($isThenable(raw)) {
-    raw.then((resolved) => comp.replaceWith(resolved));
-  } else {
-    comp = raw;
-  }
-  return comp;
+    const raw = props.component(props);
+    let comp = props.skeleton ?? document.createComment('ktjs-suspense-placeholder');
+    if ($isThenable(raw)) {
+        raw.then((resolved) => comp.replaceWith(resolved));
+    }
+    else {
+        comp = raw;
+    }
+    return comp;
 }
 
+// todo kfor的编译方式：在插件帮助下，将k-for编译为 k-for接收一个list，如果可以定义一个item变量和index，那么将children编译为()=>children的函数，用以创建
+/**
+ * KTFor - List rendering component with key-based optimization
+ * Returns a Comment anchor node with rendered elements in __kt_for_list__
+ */
 function KTFor(props) {
-  const redraw = () => {
-    const newList = listRef.value;
-    const parent = anchor.parentNode;
-    if (!parent) {
-      const newElements2 = [];
-      nodeMap.clear();
-      for (let index = 0; index < newList.length; index++) {
-        const item = newList[index];
-        const itemKey = currentKey(item, index, newList);
-        const node = currentMap(item, index, newList);
-        nodeMap.set(itemKey, node);
-        newElements2.push(node);
-      }
-      anchor.__kt_for_list__ = newElements2;
-      return anchor;
-    }
-    const oldLength = anchor.__kt_for_list__.length;
-    const newLength = newList.length;
-    if (newLength === 0) {
-      nodeMap.forEach((node) => node.remove());
-      nodeMap.clear();
-      anchor.__kt_for_list__ = [];
-      return anchor;
-    }
-    if (oldLength === 0) {
-      const newElements2 = [];
-      const fragment = document.createDocumentFragment();
-      for (let i = 0; i < newLength; i++) {
-        const item = newList[i];
-        const itemKey = currentKey(item, i, newList);
-        const node = currentMap(item, i, newList);
-        nodeMap.set(itemKey, node);
-        newElements2.push(node);
-        fragment.appendChild(node);
-      }
-      parent.insertBefore(fragment, anchor.nextSibling);
-      anchor.__kt_for_list__ = newElements2;
-      return anchor;
-    }
-    const newKeyToNewIndex = /* @__PURE__ */ new Map();
-    const newElements = new Array(newLength);
-    let maxNewIndexSoFar = 0;
-    let moved = false;
-    for (let i = 0; i < newLength; i++) {
-      const item = newList[i];
-      const itemKey = currentKey(item, i, newList);
-      newKeyToNewIndex.set(itemKey, i);
-      if (nodeMap.has(itemKey)) {
-        const node = nodeMap.get(itemKey);
-        newElements[i] = node;
-        if (i < maxNewIndexSoFar) {
-          moved = true;
-        } else {
-          maxNewIndexSoFar = i;
-        }
-      } else {
-        newElements[i] = currentMap(item, i, newList);
-      }
-    }
-    const toRemove = [];
-    nodeMap.forEach((node, key) => {
-      if (!newKeyToNewIndex.has(key)) {
-        toRemove.push(node);
-      }
-    });
-    for (let i = 0; i < toRemove.length; i++) {
-      toRemove[i].remove();
-    }
-    if (moved) {
-      const seq = getSequence(newElements.map((el, i) => nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1));
-      let j = seq.length - 1;
-      let anchor2 = null;
-      for (let i = newLength - 1; i >= 0; i--) {
-        const node = newElements[i];
-        if (j < 0 || i !== seq[j]) {
-          if (anchor2) {
-            parent.insertBefore(node, anchor2);
-          } else {
-            let nextSibling = anchor2.nextSibling;
-            let temp = nextSibling;
-            while (temp && newElements.includes(temp)) {
-              temp = temp.nextSibling;
+    const redraw = () => {
+        const newList = listRef.value;
+        const parent = anchor.parentNode;
+        if (!parent) {
+            // If not in DOM yet, just rebuild the list
+            const newElements = [];
+            nodeMap.clear();
+            for (let index = 0; index < newList.length; index++) {
+                const item = newList[index];
+                const itemKey = currentKey(item, index, newList);
+                const node = currentMap(item, index, newList);
+                nodeMap.set(itemKey, node);
+                newElements.push(node);
+            }
+            anchor.__kt_for_list__ = newElements;
+            return anchor;
+        }
+        const oldLength = anchor.__kt_for_list__.length;
+        const newLength = newList.length;
+        // Fast path: empty list
+        if (newLength === 0) {
+            nodeMap.forEach((node) => node.remove());
+            nodeMap.clear();
+            anchor.__kt_for_list__ = [];
+            return anchor;
+        }
+        // Fast path: all new items
+        if (oldLength === 0) {
+            const newElements = [];
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < newLength; i++) {
+                const item = newList[i];
+                const itemKey = currentKey(item, i, newList);
+                const node = currentMap(item, i, newList);
+                nodeMap.set(itemKey, node);
+                newElements.push(node);
+                fragment.appendChild(node);
+            }
+            parent.insertBefore(fragment, anchor.nextSibling);
+            anchor.__kt_for_list__ = newElements;
+            return anchor;
+        }
+        // Build key index map and new elements array in one pass
+        const newKeyToNewIndex = new Map();
+        const newElements = new Array(newLength);
+        let maxNewIndexSoFar = 0;
+        let moved = false;
+        for (let i = 0; i < newLength; i++) {
+            const item = newList[i];
+            const itemKey = currentKey(item, i, newList);
+            newKeyToNewIndex.set(itemKey, i);
+            if (nodeMap.has(itemKey)) {
+                // Reuse existing node
+                const node = nodeMap.get(itemKey);
+                newElements[i] = node;
+                // Track if items moved
+                if (i < maxNewIndexSoFar) {
+                    moved = true;
+                }
+                else {
+                    maxNewIndexSoFar = i;
+                }
+            }
+            else {
+                // Create new node
+                newElements[i] = currentMap(item, i, newList);
+            }
+        }
+        // Remove nodes not in new list
+        const toRemove = [];
+        nodeMap.forEach((node, key) => {
+            if (!newKeyToNewIndex.has(key)) {
+                toRemove.push(node);
+            }
+        });
+        for (let i = 0; i < toRemove.length; i++) {
+            toRemove[i].remove();
+        }
+        // Update DOM with minimal operations
+        if (moved) {
+            // Use longest increasing subsequence to minimize moves
+            const seq = getSequence(newElements.map((el, i) => (nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1)));
+            let j = seq.length - 1;
+            let anchor = null;
+            // Traverse from end to start for stable insertions
+            for (let i = newLength - 1; i >= 0; i--) {
+                const node = newElements[i];
+                if (j < 0 || i !== seq[j]) {
+                    // Node needs to be moved or inserted
+                    if (anchor) {
+                        parent.insertBefore(node, anchor);
+                    }
+                    else {
+                        // Insert at end
+                        let nextSibling = anchor.nextSibling;
+                        let temp = nextSibling;
+                        while (temp && newElements.includes(temp)) {
+                            temp = temp.nextSibling;
+                        }
+                        parent.insertBefore(node, temp);
+                    }
+                }
+                else {
+                    j--;
+                }
+                anchor = node;
+            }
+        }
+        else {
+            // No moves needed, just insert new nodes
+            let currentNode = anchor.nextSibling;
+            for (let i = 0; i < newLength; i++) {
+                const node = newElements[i];
+                if (currentNode !== node) {
+                    parent.insertBefore(node, currentNode);
+                }
+                else {
+                    currentNode = currentNode.nextSibling;
+                }
             }
-            parent.insertBefore(node, temp);
-          }
-        } else {
-          j--;
-        }
-        anchor2 = node;
-      }
-    } else {
-      let currentNode = anchor.nextSibling;
-      for (let i = 0; i < newLength; i++) {
-        const node = newElements[i];
-        if (currentNode !== node) {
-          parent.insertBefore(node, currentNode);
-        } else {
-          currentNode = currentNode.nextSibling;
-        }
-      }
-    }
-    nodeMap.clear();
-    for (let i = 0; i < newLength; i++) {
-      const itemKey = currentKey(newList[i], i, newList);
-      nodeMap.set(itemKey, newElements[i]);
-    }
-    anchor.__kt_for_list__ = newElements;
+        }
+        // Update maps
+        nodeMap.clear();
+        for (let i = 0; i < newLength; i++) {
+            const itemKey = currentKey(newList[i], i, newList);
+            nodeMap.set(itemKey, newElements[i]);
+        }
+        anchor.__kt_for_list__ = newElements;
+        return anchor;
+    };
+    const { key: currentKey = (item) => item, map: currentMap } = props;
+    const listRef = toReactive(props.list, redraw);
+    const anchor = document.createComment('kt-for');
+    // Map to track rendered nodes by key
+    const nodeMap = new Map();
+    // Render initial list
+    const elements = [];
+    for (let index = 0; index < listRef.value.length; index++) {
+        const item = listRef.value[index];
+        const itemKey = currentKey(item, index, listRef.value);
+        const node = currentMap(item, index, listRef.value);
+        nodeMap.set(itemKey, node);
+        elements.push(node);
+    }
+    anchor.__kt_for_list__ = elements;
+    $initRef(props, anchor);
     return anchor;
-  };
-  const { key: currentKey = (item) => item, map: currentMap } = props;
-  const listRef = toReactive(props.list, redraw);
-  const anchor = document.createComment("kt-for");
-  const nodeMap = /* @__PURE__ */ new Map();
-  const elements = [];
-  for (let index = 0; index < listRef.value.length; index++) {
-    const item = listRef.value[index];
-    const itemKey = currentKey(item, index, listRef.value);
-    const node = currentMap(item, index, listRef.value);
-    nodeMap.set(itemKey, node);
-    elements.push(node);
-  }
-  anchor.__kt_for_list__ = elements;
-  $initRef(props, anchor);
-  return anchor;
 }
+// Longest Increasing Subsequence algorithm (optimized for diff)
 function getSequence(arr) {
-  const p = arr.slice();
-  const result = [0];
-  let i, j, u, v, c;
-  const len = arr.length;
-  for (i = 0; i < len; i++) {
-    const arrI = arr[i];
-    if (arrI === -1) continue;
-    j = result[result.length - 1];
-    if (arr[j] < arrI) {
-      p[i] = j;
-      result.push(i);
-      continue;
-    }
-    u = 0;
-    v = result.length - 1;
-    while (u < v) {
-      c = (u + v) / 2 | 0;
-      if (arr[result[c]] < arrI) {
-        u = c + 1;
-      } else {
-        v = c;
-      }
-    }
-    if (arrI < arr[result[u]]) {
-      if (u > 0) {
-        p[i] = result[u - 1];
-      }
-      result[u] = i;
-    }
-  }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
+    const p = arr.slice();
+    const result = [0];
+    let i, j, u, v, c;
+    const len = arr.length;
+    for (i = 0; i < len; i++) {
+        const arrI = arr[i];
+        if (arrI === -1)
+            continue;
+        j = result[result.length - 1];
+        if (arr[j] < arrI) {
+            p[i] = j;
+            result.push(i);
+            continue;
+        }
+        u = 0;
+        v = result.length - 1;
+        while (u < v) {
+            c = ((u + v) / 2) | 0;
+            if (arr[result[c]] < arrI) {
+                u = c + 1;
+            }
+            else {
+                v = c;
+            }
+        }
+        if (arrI < arr[result[u]]) {
+            if (u > 0) {
+                p[i] = result[u - 1];
+            }
+            result[u] = i;
+        }
+    }
+    u = result.length;
+    v = result[u - 1];
+    while (u-- > 0) {
+        result[u] = v;
+        v = p[v];
+    }
+    return result;
 }
 
-export { $initRef, KTAsync, KTComputed, KTFor, KTReactiveType, computed, effect, isKT, toReactive };
+export { $initRef, $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTRef, computed, h as createElement, createRedrawable, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
+//# sourceMappingURL=index.mjs.map