@ktjs/core 0.26.9 → 0.27.2

package/dist/index.d.ts

@@ -117,6 +117,9 @@ declare const surfaceRef: <T extends Object>(obj: T) => KTSurfaceRef<T>;
  * Assert k-model to be a ref object
  */
 declare const $modelOrRef: <T = any>(props: any, defaultValue?: T) => KTRef<T>;
+declare const $setRef: (props: {
+    ref?: KTRef<any>;
+}, node: Node) => void;
 
 type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag
   ? SVGElementTagNameMap[T]
@@ -240,7 +243,7 @@ type KTComponent = (
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.26.9 (Last Update: 2026.02.06 16:29:24.402)
+ * @version 0.27.2 (Last Update: 2026.02.10 07:27:25.966)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -257,11 +260,11 @@ type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promi
 declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
 /**
  * Fragment support - returns an array of children
- * Note: kt.js doesn't have a real Fragment concept,
+ * Enhanced Fragment component that manages arrays of elements
  */
-declare function Fragment(_props: {
+declare function Fragment(props: {
     children?: KTRawContent;
-}): HTMLElement;
+}): JSX.Element;
 /**
  * JSX Development runtime - same as jsx but with additional dev checks
  */
@@ -1388,12 +1391,10 @@ declare function KTAsync<T extends KTComponent>(props: {
     children?: KTRawContent;
 } & ExtractComponentProps<T>): JSX.Element;
 
-type KTForElement = JSX.Element & {
-    redraw: (newProps?: KTAttribute) => void;
-};
+type KTForElement = JSX.Element;
 interface KTForProps<T> {
     ref?: KTRef<KTForElement>;
-    list: T[];
+    list: T[] | KTReactive<T[]>;
     key?: (item: T, index: number, array: T[]) => any;
     map: (item: T, index: number, array: T[]) => HTMLElement;
 }
@@ -1403,5 +1404,5 @@ interface KTForProps<T> {
  */
 declare function KTFor<T>(props: KTForProps<T>): KTForElement;
 
-export { $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTReactiveType, KTRef, computed, h as createElement, createRedrawable, deref, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
+export { $modelOrRef, $setRef, Fragment, KTAsync, KTComputed, KTFor, KTReactiveType, KTRef, computed, h as createElement, createRedrawable, deref, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
 export type { EventHandler, KTAttribute, KTForElement, KTForProps, KTPrefixedEventAttribute, KTRawAttr, KTRawContent, KTRawContents, KTReactify, KTReactifyObject, KTReactifyProps, KTReactive, KTSurfaceRef, ReactiveChangeHandler };

package/dist/index.iife.js

@@ -1,6 +1,42 @@
 var __ktjs_core__ = (function (exports) {
     'use strict';
 
+    // Cached native methods for performance optimization
+    const $isArray = Array.isArray;
+    const $is = Object.is;
+    const $entries = Object.entries;
+    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)}`;
+        };
+    }
+
+    // String manipulation utilities
+    /**
+     * Default empty function
+     */
+    const $emptyFn = (() => true);
+    const $emptyArray = [];
+    /**
+     * 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);
+        }
+    };
+
+    const $emptyChildrenRef = { value: $emptyArray };
+    // each instance shares the same empty array, but it will be replaced when used
+    Comment.prototype.kisFragmentAnchor = false;
+    Comment.prototype.kFragmentList = $emptyArray;
+    Comment.prototype.kredraw = $emptyFn;
+    Comment.prototype.kchildrenRef = $emptyChildrenRef;
+
     // Shared constants
     // Empty for now - can be extended with framework-wide constants
     /**
@@ -12,13 +48,6 @@ var __ktjs_core__ = (function (exports) {
      */
     const MATHML_ATTR_FLAG = '__kt_mathml__';
 
-    // Cached native methods for performance optimization
-    const $isArray = Array.isArray;
-    const $is = Object.is;
-    const $entries = Object.entries;
-    const $random = Math.random;
-    const $isThenable = (o) => typeof o?.then === 'function';
-
     // DOM manipulation utilities
     // # dom natives
     const $isNode = (x) => x?.nodeType > 0;
@@ -72,26 +101,14 @@ var __ktjs_core__ = (function (exports) {
     /**
      * Used for `k-model`
      */
-    const applyModel = (element, valueRef, propName, eventName) => {
+    const $applyModel = (element, valueRef, propName, eventName) => {
         element[propName] = valueRef.value; // initialize
         valueRef.addOnChange((newValue) => (element[propName] = newValue));
         element.addEventListener(eventName, () => (valueRef.value = element[propName]));
     };
 
-    // String manipulation utilities
-    /**
-     * Default empty function
-     */
-    const $emptyFn = (() => true);
-
-    if (typeof Symbol === 'undefined') {
-        window.Symbol = function Symbol(description) {
-            return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
-        };
-    }
-
-    // Shared utilities and cached native methods for kt.js framework
-    Object.defineProperty(window, '__ktjs__', { value: '0.23.3' });
+    // incase that symbol is not supported
+    Object.defineProperty(window, '__ktjs__', { value: '0.23.10' });
 
     const isKT = (obj) => obj?.isKT;
     const isRef = (obj) => obj?.ktType === 1 /* KTReactiveType.REF */;
@@ -247,6 +264,7 @@ var __ktjs_core__ = (function (exports) {
         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);
@@ -405,13 +423,26 @@ var __ktjs_core__ = (function (exports) {
         // & props is an object. Won't use it in any other place
         if ('k-model' in props) {
             const kmodel = props['k-model'];
-            if (!kmodel?.isKT) {
+            if (isRef(kmodel)) {
+                return kmodel;
+            }
+            else {
                 throw new Error(`[kt.js error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
             }
-            return kmodel;
         }
         return ref(defaultValue);
     };
+    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');
+            }
+        }
+    };
 
     class KTComputed {
         /**
@@ -564,17 +595,17 @@ var __ktjs_core__ = (function (exports) {
         }
         if (element instanceof HTMLInputElement) {
             if (element.type === 'radio' || element.type === 'checkbox') {
-                applyModel(element, valueRef, 'checked', 'change');
+                $applyModel(element, valueRef, 'checked', 'change');
             }
             else {
-                applyModel(element, valueRef, 'value', 'input');
+                $applyModel(element, valueRef, 'value', 'input');
             }
         }
         else if (element instanceof HTMLSelectElement) {
-            applyModel(element, valueRef, 'value', 'change');
+            $applyModel(element, valueRef, 'value', 'change');
         }
         else if (element instanceof HTMLTextAreaElement) {
-            applyModel(element, valueRef, 'value', 'input');
+            $applyModel(element, valueRef, 'value', 'input');
         }
         else {
             console.warn('[kt.js warn]','not supported element for k-model:');
@@ -595,7 +626,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.26.9 (Last Update: 2026.02.06 16:29:24.402)
+     * @version 0.27.2 (Last Update: 2026.02.10 07:27:25.966)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -630,7 +661,110 @@ var __ktjs_core__ = (function (exports) {
         return element;
     };
 
-    const dummyRef = { value: null };
+    const kredraw = function () {
+        const newElements = this.kchildrenRef.value;
+        const parent = this.parentNode;
+        if (!parent) {
+            // If anchor is not in DOM, only update internal state
+            this.kFragmentList.length = 0;
+            for (let i = 0; i < newElements.length; i++) {
+                this.kFragmentList.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 < this.kFragmentList.length; i++) {
+            this.kFragmentList[i].remove();
+        }
+        // 2. Insert all new elements
+        const fragment = document.createDocumentFragment();
+        this.kFragmentList.length = 0;
+        for (let i = 0; i < newElements.length; i++) {
+            const element = newElements[i];
+            this.kFragmentList.push(element);
+            fragment.appendChild(element);
+        }
+        // Insert after anchor
+        parent.insertBefore(fragment, this.nextSibling);
+    };
+    /**
+     * 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 childrenRef = toReactive(props.children, () => anchor.kredraw());
+        const anchor = document.createComment('kt-fragment');
+        anchor.kredraw = kredraw;
+        anchor.kchildrenRef = childrenRef;
+        anchor.kFragmentList = [];
+        anchor.kisFragmentAnchor = true;
+        // Observe DOM insertion
+        const observer = new MutationObserver(() => {
+            if (anchor.isConnected) {
+                anchor.kredraw();
+                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);
@@ -648,7 +782,6 @@ var __ktjs_core__ = (function (exports) {
         if (isComputed(props.ref)) {
             throw new Error('[kt.js error] Cannot assign a computed value to an element.');
         }
-        const maybeDummyRef = isRef(props.ref) ? props.ref : dummyRef;
         let el;
         if ('k-if' in props) {
             const kif = props['k-if'];
@@ -660,49 +793,31 @@ var __ktjs_core__ = (function (exports) {
                         return;
                     }
                     const oldEl = el;
-                    el = newValue ? create(tag, props) : placeholder();
+                    $setRef(props, (el = newValue ? create(tag, props) : placeholder()));
                     $replaceNode(oldEl, el);
-                    maybeDummyRef.value = el;
                 });
                 condition = kif.value;
             }
             if (!condition) {
                 // & make comment placeholder in case that ref might be redrawn later
-                el = placeholder();
-                maybeDummyRef.value = el;
+                $setRef(props, (el = placeholder()));
                 return el;
             }
         }
-        el = create(tag, props);
-        maybeDummyRef.value = el;
+        $setRef(props, (el = create(tag, props)));
         return el;
     }
     /**
      * Fragment support - returns an array of children
-     * Note: kt.js doesn't have a real Fragment concept,
+     * Enhanced Fragment component that manages arrays of elements
      */
-    function Fragment(_props) {
-        throw new Error("[kt.js error] doesn't have a Fragment concept");
-        // const { children } = props ?? {};
-        // if (!children) {
-        //   return ;
-        // }
-        // // 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 (typeof child === 'string') {
-        //       wrapper.appendChild(document.createTextNode(child));
-        //     } else if (child instanceof HTMLElement) {
-        //       wrapper.appendChild(child);
-        //     }
-        // });
-        // return wrapper;
+    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
@@ -759,45 +874,17 @@ var __ktjs_core__ = (function (exports) {
      * Returns a Comment anchor node with rendered elements in __kt_for_list__
      */
     function KTFor(props) {
-        const { list, map } = props;
-        const key = props.key ?? ((item) => item);
-        // Create anchor comment node
-        const anchor = document.createComment('kt-for');
-        // Store current state
-        let currentList = list;
-        let currentKey = key;
-        let currentMap = map;
-        // Map to track rendered nodes by key
-        const nodeMap = new Map();
-        // Render initial list
-        const elements = [];
-        for (let index = 0; index < currentList.length; index++) {
-            const item = currentList[index];
-            const itemKey = currentKey(item, index, currentList);
-            const node = currentMap(item, index, currentList);
-            nodeMap.set(itemKey, node);
-            elements.push(node);
-        }
-        // Attach elements array to anchor
-        anchor.__kt_for_list__ = elements;
-        // Redraw function for updates
-        anchor.redraw = (newProps) => {
-            const newList = (newProps?.list ?? currentList);
-            const newKey = (newProps?.key ?? currentKey);
-            const newMap = (newProps?.map ?? currentMap);
-            // Update stored values
-            currentList = newList;
-            currentKey = newKey;
-            currentMap = newMap;
+        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 < currentList.length; index++) {
-                    const item = currentList[index];
-                    const itemKey = currentKey(item, index, currentList);
-                    const node = currentMap(item, index, currentList);
+                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);
                 }
@@ -819,8 +906,8 @@ var __ktjs_core__ = (function (exports) {
                 const fragment = document.createDocumentFragment();
                 for (let i = 0; i < newLength; i++) {
                     const item = newList[i];
-                    const itemKey = newKey(item, i, newList);
-                    const node = newMap(item, i, newList);
+                    const itemKey = currentKey(item, i, newList);
+                    const node = currentMap(item, i, newList);
                     nodeMap.set(itemKey, node);
                     newElements.push(node);
                     fragment.appendChild(node);
@@ -836,7 +923,7 @@ var __ktjs_core__ = (function (exports) {
             let moved = false;
             for (let i = 0; i < newLength; i++) {
                 const item = newList[i];
-                const itemKey = newKey(item, i, newList);
+                const itemKey = currentKey(item, i, newList);
                 newKeyToNewIndex.set(itemKey, i);
                 if (nodeMap.has(itemKey)) {
                     // Reuse existing node
@@ -852,7 +939,7 @@ var __ktjs_core__ = (function (exports) {
                 }
                 else {
                     // Create new node
-                    newElements[i] = newMap(item, i, newList);
+                    newElements[i] = currentMap(item, i, newList);
                 }
             }
             // Remove nodes not in new list
@@ -868,7 +955,7 @@ var __ktjs_core__ = (function (exports) {
             // Update DOM with minimal operations
             if (moved) {
                 // Use longest increasing subsequence to minimize moves
-                const seq = getSequence(newElements.map((el, i) => (nodeMap.has(newKey(newList[i], i, newList)) ? i : -1)));
+                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
@@ -911,16 +998,28 @@ var __ktjs_core__ = (function (exports) {
             // Update maps
             nodeMap.clear();
             for (let i = 0; i < newLength; i++) {
-                const itemKey = newKey(newList[i], i, newList);
+                const itemKey = currentKey(newList[i], i, newList);
                 nodeMap.set(itemKey, newElements[i]);
             }
             anchor.__kt_for_list__ = newElements;
             return anchor;
         };
-        // Set ref if provided
-        if (isRef(props.ref)) {
-            props.ref.value = 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;
+        $setRef(props, anchor);
         return anchor;
     }
     // Longest Increasing Subsequence algorithm (optimized for diff)
@@ -967,6 +1066,7 @@ var __ktjs_core__ = (function (exports) {
     }
 
     exports.$modelOrRef = $modelOrRef;
+    exports.$setRef = $setRef;
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.KTComputed = KTComputed;