@ktjs/core 0.26.9 → 0.27.2

package/dist/jsx/index.mjs

@@ -1,3 +1,38 @@
+// Cached native methods for performance optimization
+const $isArray = Array.isArray;
+const $is = Object.is;
+const $random = Math.random;
+const $isThenable = (o) => typeof o?.then === 'function';
+
+if (typeof Symbol === 'undefined') {
+    window.Symbol = function Symbol(description) {
+        return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
+    };
+}
+
+// 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,12 +44,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 $random = Math.random;
-const $isThenable = (o) => typeof o?.then === 'function';
-
 // DOM manipulation utilities
 // # dom natives
 const $isNode = (x) => x?.nodeType > 0;
@@ -68,20 +97,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]));
 };
 
-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 */;
@@ -237,6 +260,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);
@@ -340,8 +364,31 @@ class KTRef {
  * @param value mostly an HTMLElement
  */
 function ref(value, onChange) {
-    return new KTRef(value, []);
+    return new KTRef(value, onChange ? [onChange] : []);
 }
+const $setRef = (props, node) => {
+    if ('ref' in props) {
+        const r = props.ref;
+        if (isRef(r)) {
+            r.value = node;
+        }
+        else {
+            throw new Error('[kt.js error] Fragment: ref must be a KTRef');
+        }
+    }
+};
+
+const toReactive = (value, onChange) => {
+    if (isKT(value)) {
+        if (onChange) {
+            value.addOnChange(onChange);
+        }
+        return value;
+    }
+    else {
+        return ref(value, onChange);
+    }
+};
 
 function applyKModel(element, valueRef) {
     if (!isKT(valueRef)) {
@@ -350,17 +397,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:');
@@ -381,7 +428,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!
@@ -416,7 +463,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);
@@ -434,7 +584,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'];
@@ -446,49 +595,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

package/dist/jsx/jsx-runtime.d.ts

@@ -134,7 +134,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!
@@ -151,11 +151,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
  */

package/dist/jsx/jsx-runtime.mjs

@@ -1,3 +1,38 @@
+// Cached native methods for performance optimization
+const $isArray = Array.isArray;
+const $is = Object.is;
+const $random = Math.random;
+const $isThenable = (o) => typeof o?.then === 'function';
+
+if (typeof Symbol === 'undefined') {
+    window.Symbol = function Symbol(description) {
+        return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
+    };
+}
+
+// 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,12 +44,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 $random = Math.random;
-const $isThenable = (o) => typeof o?.then === 'function';
-
 // DOM manipulation utilities
 // # dom natives
 const $isNode = (x) => x?.nodeType > 0;
@@ -68,20 +97,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]));
 };
 
-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 */;
@@ -237,6 +260,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);
@@ -340,8 +364,31 @@ class KTRef {
  * @param value mostly an HTMLElement
  */
 function ref(value, onChange) {
-    return new KTRef(value, []);
+    return new KTRef(value, onChange ? [onChange] : []);
 }
+const $setRef = (props, node) => {
+    if ('ref' in props) {
+        const r = props.ref;
+        if (isRef(r)) {
+            r.value = node;
+        }
+        else {
+            throw new Error('[kt.js error] Fragment: ref must be a KTRef');
+        }
+    }
+};
+
+const toReactive = (value, onChange) => {
+    if (isKT(value)) {
+        if (onChange) {
+            value.addOnChange(onChange);
+        }
+        return value;
+    }
+    else {
+        return ref(value, onChange);
+    }
+};
 
 function applyKModel(element, valueRef) {
     if (!isKT(valueRef)) {
@@ -350,17 +397,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:');
@@ -381,7 +428,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!
@@ -416,7 +463,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);
@@ -434,7 +584,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'];
@@ -446,49 +595,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.26.9",
+  "version": "0.27.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -44,7 +44,7 @@
     "directory": "packages/core"
   },
   "dependencies": {
-    "@ktjs/shared": "0.23.3"
+    "@ktjs/shared": "0.23.10"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",