@ktjs/core 0.26.9 → 0.27.2

package/dist/index.mjs

@@ -1,3 +1,39 @@
+// 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
 /**
@@ -9,13 +45,6 @@ const SVG_ATTR_FLAG = '__kt_svg__';
  */
 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;
@@ -69,26 +98,14 @@ const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwn
 /**
  * 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 */;
@@ -244,6 +261,7 @@ function apdSingle(element, c) {
     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);
@@ -402,13 +420,26 @@ 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 (!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 {
     /**
@@ -561,17 +592,17 @@ function applyKModel(element, valueRef) {
     }
     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:');
@@ -592,7 +623,7 @@ let creator = htmlCreator;
  * ## 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!
@@ -627,7 +658,110 @@ const h = (tag, attr, content) => {
     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);
@@ -645,7 +779,6 @@ function jsx(tag, props) {
     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'];
@@ -657,49 +790,31 @@ function jsx(tag, props) {
                     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
@@ -756,45 +871,17 @@ function KTAsync(props) {
  * 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);
             }
@@ -816,8 +903,8 @@ function KTFor(props) {
             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);
@@ -833,7 +920,7 @@ function KTFor(props) {
         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
@@ -849,7 +936,7 @@ function KTFor(props) {
             }
             else {
                 // Create new node
-                newElements[i] = newMap(item, i, newList);
+                newElements[i] = currentMap(item, i, newList);
             }
         }
         // Remove nodes not in new list
@@ -865,7 +952,7 @@ function KTFor(props) {
         // 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
@@ -908,16 +995,28 @@ function KTFor(props) {
         // 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)
@@ -963,4 +1062,4 @@ function getSequence(arr) {
     return result;
 }
 
-export { $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, 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, KTRef, computed, h as createElement, createRedrawable, deref, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };

package/dist/jsx/index.d.ts

@@ -164,7 +164,7 @@ type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
  * ## 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!
@@ -181,11 +181,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
  */