@ktjs/core 0.26.8 → 0.27.1

package/dist/index.legacy.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' });
 
     var isKT = function (obj) { return obj === null || obj === void 0 ? void 0 : obj.isKT; };
     var isRef = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.ktType) === 1 /* KTReactiveType.REF */; };
@@ -252,6 +269,7 @@ var __ktjs_core__ = (function (exports) {
         else {
             $append.call(element, c);
             // Handle KTFor anchor
+            // todo Maybe not needed anymore
             var list = c.__kt_for_list__;
             if ($isArray(list)) {
                 apd(element, list);
@@ -410,13 +428,26 @@ var __ktjs_core__ = (function (exports) {
         // & props is an object. Won't use it in any other place
         if ('k-model' in props) {
             var kmodel = props['k-model'];
-            if (!(kmodel === null || kmodel === void 0 ? void 0 : 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);
     };
+    var $setRef = function (props, node) {
+        if ('ref' in props) {
+            var r = props.ref;
+            if (isRef(r)) {
+                r.value = node;
+            }
+            else {
+                throw new Error('[kt.js error] Fragment: ref must be a KTRef');
+            }
+        }
+    };
 
     var KTComputed = /** @class */ (function () {
         function KTComputed(_calculator, reactives) {
@@ -567,17 +598,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:');
@@ -598,7 +629,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.26.8 (Last Update: 2026.02.06 16:26:16.214)
+     * @version 0.27.1 (Last Update: 2026.02.10 01:30:30.991)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -633,7 +664,110 @@ var __ktjs_core__ = (function (exports) {
         return element;
     };
 
-    var dummyRef = { value: null };
+    var kredraw = function () {
+        var newElements = this.kchildrenRef.value;
+        var parent = this.parentNode;
+        if (!parent) {
+            // If anchor is not in DOM, only update internal state
+            this.kFragmentList.length = 0;
+            for (var 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 (var i = 0; i < this.kFragmentList.length; i++) {
+            this.kFragmentList[i].remove();
+        }
+        // 2. Insert all new elements
+        var fragment = document.createDocumentFragment();
+        this.kFragmentList.length = 0;
+        for (var i = 0; i < newElements.length; i++) {
+            var 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
+        props.key;
+        var childrenRef = toReactive(props.children, function () { return anchor.kredraw(); });
+        var anchor = document.createComment('kt-fragment');
+        anchor.kredraw = kredraw;
+        anchor.kchildrenRef = childrenRef;
+        anchor.kFragmentList = [];
+        anchor.kisFragmentAnchor = true;
+        // Observe DOM insertion
+        var observer = new MutationObserver(function () {
+            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) {
+        var elements = [];
+        var processChild = function (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
+                var 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;
+    }
+
     var create = function (tag, props) {
         if (typeof tag === 'function') {
             return tag(props);
@@ -651,7 +785,6 @@ var __ktjs_core__ = (function (exports) {
         if (isComputed(props.ref)) {
             throw new Error('[kt.js error] Cannot assign a computed value to an element.');
         }
-        var maybeDummyRef = isRef(props.ref) ? props.ref : dummyRef;
         var el;
         if ('k-if' in props) {
             var kif = props['k-if'];
@@ -663,49 +796,31 @@ var __ktjs_core__ = (function (exports) {
                         return;
                     }
                     var 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) {
+        var children = (props !== null && props !== void 0 ? props : {}).children;
+        if (!children) {
+            return document.createComment('kt-fragment-empty');
+        }
+        var elements = convertChildrenToElements(children);
+        return Fragment$1({ children: elements });
     }
     /**
      * JSX Development runtime - same as jsx but with additional dev checks
@@ -767,47 +882,17 @@ var __ktjs_core__ = (function (exports) {
      * Returns a Comment anchor node with rendered elements in __kt_for_list__
      */
     function KTFor(props) {
-        var _a;
-        var list = props.list, map = props.map;
-        var key = (_a = props.key) !== null && _a !== void 0 ? _a : (function (item) { return item; });
-        // Create anchor comment node
-        var anchor = document.createComment('kt-for');
-        // Store current state
-        var currentList = list;
-        var currentKey = key;
-        var currentMap = map;
-        // Map to track rendered nodes by key
-        var nodeMap = new Map();
-        // Render initial list
-        var elements = [];
-        for (var index = 0; index < currentList.length; index++) {
-            var item = currentList[index];
-            var itemKey = currentKey(item, index, currentList);
-            var 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 = function (newProps) {
-            var _a, _b, _c;
-            var newList = ((_a = newProps === null || newProps === void 0 ? void 0 : newProps.list) !== null && _a !== void 0 ? _a : currentList);
-            var newKey = ((_b = newProps === null || newProps === void 0 ? void 0 : newProps.key) !== null && _b !== void 0 ? _b : currentKey);
-            var newMap = ((_c = newProps === null || newProps === void 0 ? void 0 : newProps.map) !== null && _c !== void 0 ? _c : currentMap);
-            // Update stored values
-            currentList = newList;
-            currentKey = newKey;
-            currentMap = newMap;
+        var redraw = function () {
+            var newList = listRef.value;
             var parent = anchor.parentNode;
             if (!parent) {
                 // If not in DOM yet, just rebuild the list
                 var newElements_1 = [];
                 nodeMap.clear();
-                for (var index = 0; index < currentList.length; index++) {
-                    var item = currentList[index];
-                    var itemKey = currentKey(item, index, currentList);
-                    var node = currentMap(item, index, currentList);
+                for (var index = 0; index < newList.length; index++) {
+                    var item = newList[index];
+                    var itemKey = currentKey(item, index, newList);
+                    var node = currentMap(item, index, newList);
                     nodeMap.set(itemKey, node);
                     newElements_1.push(node);
                 }
@@ -829,8 +914,8 @@ var __ktjs_core__ = (function (exports) {
                 var fragment = document.createDocumentFragment();
                 for (var i = 0; i < newLength; i++) {
                     var item = newList[i];
-                    var itemKey = newKey(item, i, newList);
-                    var node = newMap(item, i, newList);
+                    var itemKey = currentKey(item, i, newList);
+                    var node = currentMap(item, i, newList);
                     nodeMap.set(itemKey, node);
                     newElements_2.push(node);
                     fragment.appendChild(node);
@@ -846,7 +931,7 @@ var __ktjs_core__ = (function (exports) {
             var moved = false;
             for (var i = 0; i < newLength; i++) {
                 var item = newList[i];
-                var itemKey = newKey(item, i, newList);
+                var itemKey = currentKey(item, i, newList);
                 newKeyToNewIndex.set(itemKey, i);
                 if (nodeMap.has(itemKey)) {
                     // Reuse existing node
@@ -862,7 +947,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
@@ -878,7 +963,7 @@ var __ktjs_core__ = (function (exports) {
             // Update DOM with minimal operations
             if (moved) {
                 // Use longest increasing subsequence to minimize moves
-                var seq = getSequence(newElements.map(function (el, i) { return (nodeMap.has(newKey(newList[i], i, newList)) ? i : -1); }));
+                var seq = getSequence(newElements.map(function (el, i) { return (nodeMap.has(currentKey(newList[i], i, newList)) ? i : -1); }));
                 var j = seq.length - 1;
                 var anchor_1 = null;
                 // Traverse from end to start for stable insertions
@@ -921,16 +1006,28 @@ var __ktjs_core__ = (function (exports) {
             // Update maps
             nodeMap.clear();
             for (var i = 0; i < newLength; i++) {
-                var itemKey = newKey(newList[i], i, newList);
+                var 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;
+        var _a = props.key, currentKey = _a === void 0 ? function (item) { return item; } : _a, currentMap = props.map;
+        var listRef = toReactive(props.list, redraw);
+        var anchor = document.createComment('kt-for');
+        // Map to track rendered nodes by key
+        var nodeMap = new Map();
+        // Render initial list
+        var elements = [];
+        for (var index = 0; index < listRef.value.length; index++) {
+            var item = listRef.value[index];
+            var itemKey = currentKey(item, index, listRef.value);
+            var 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)
@@ -977,6 +1074,7 @@ var __ktjs_core__ = (function (exports) {
     }
 
     exports.$modelOrRef = $modelOrRef;
+    exports.$setRef = $setRef;
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.KTComputed = KTComputed;