@ktjs/core 0.17.0 → 0.17.2

package/dist/index.d.ts

@@ -171,7 +171,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -246,7 +246,6 @@ declare function KTAsync<T extends KTComponent>(props: {
 } & ExtractComponentProps<T>): KTHTMLElement;
 
 type KForElement = KTHTMLElement & {
-    __kt_for_list__: HTMLElement[];
     redraw: (newProps?: KTAttribute) => void;
 };
 interface KTForProps<T> {

package/dist/index.iife.js

@@ -211,7 +211,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+     * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -422,6 +422,7 @@ var __ktjs_core__ = (function (exports) {
             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);
@@ -432,46 +433,116 @@ var __ktjs_core__ = (function (exports) {
                 anchor.__kt_for_list__ = newElements;
                 return anchor;
             }
-            // Build new key map
-            const newNodeMap = new Map();
-            const newKeys = new Set();
-            const newElements = [];
-            for (let index = 0; index < newList.length; index++) {
-                const item = newList[index];
-                const itemKey = newKey(item, index, newList);
-                newKeys.add(itemKey);
-                // Reuse existing node if key exists
+            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 = newKey(item, i, newList);
+                    const node = newMap(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 = newKey(item, i, newList);
+                newKeyToNewIndex.set(itemKey, i);
                 if (nodeMap.has(itemKey)) {
-                    const existingNode = nodeMap.get(itemKey);
-                    newNodeMap.set(itemKey, existingNode);
-                    newElements.push(existingNode);
+                    // 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
-                    const node = newMap(item, index, newList);
-                    newNodeMap.set(itemKey, node);
-                    newElements.push(node);
+                    newElements[i] = newMap(item, i, newList);
                 }
             }
-            // Remove nodes that are no longer in the list
+            // Remove nodes not in new list
+            const toRemove = [];
             nodeMap.forEach((node, key) => {
-                if (!newKeys.has(key)) {
-                    node.remove();
+                if (!newKeyToNewIndex.has(key)) {
+                    toRemove.push(node);
                 }
             });
-            // Insert/reorder nodes in correct order
-            let referenceNode = anchor.nextSibling;
-            for (let index = 0; index < newElements.length; index++) {
-                const node = newElements[index];
-                // If node is not in correct position, insert it
-                if (referenceNode !== node) {
-                    parent.insertBefore(node, referenceNode);
+            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(newKey(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;
                 }
-                referenceNode = node.nextSibling;
             }
-            // Update node map and element list
+            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;
+                    }
+                }
+            }
+            // Update maps
             nodeMap.clear();
-            newNodeMap.forEach((node, key) => nodeMap.set(key, node));
+            for (let i = 0; i < newLength; i++) {
+                const itemKey = newKey(newList[i], i, newList);
+                nodeMap.set(itemKey, newElements[i]);
+            }
             anchor.__kt_for_list__ = newElements;
             return anchor;
         };
@@ -481,6 +552,48 @@ var __ktjs_core__ = (function (exports) {
         }
         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;
+    }
 
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;

package/dist/index.legacy.js

@@ -236,7 +236,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+     * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -490,6 +490,7 @@ var __ktjs_core__ = (function (exports) {
             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);
@@ -500,46 +501,116 @@ var __ktjs_core__ = (function (exports) {
                 anchor.__kt_for_list__ = newElements_1;
                 return anchor;
             }
-            // Build new key map
-            var newNodeMap = new Map();
-            var newKeys = new Set();
-            var newElements = [];
-            for (var index = 0; index < newList.length; index++) {
-                var item = newList[index];
-                var itemKey = newKey(item, index, newList);
-                newKeys.add(itemKey);
-                // Reuse existing node if key exists
+            var oldLength = anchor.__kt_for_list__.length;
+            var newLength = newList.length;
+            // Fast path: empty list
+            if (newLength === 0) {
+                nodeMap.forEach(function (node) { return node.remove(); });
+                nodeMap.clear();
+                anchor.__kt_for_list__ = [];
+                return anchor;
+            }
+            // Fast path: all new items
+            if (oldLength === 0) {
+                var newElements_2 = [];
+                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);
+                    nodeMap.set(itemKey, node);
+                    newElements_2.push(node);
+                    fragment.appendChild(node);
+                }
+                parent.insertBefore(fragment, anchor.nextSibling);
+                anchor.__kt_for_list__ = newElements_2;
+                return anchor;
+            }
+            // Build key index map and new elements array in one pass
+            var newKeyToNewIndex = new Map();
+            var newElements = new Array(newLength);
+            var maxNewIndexSoFar = 0;
+            var moved = false;
+            for (var i = 0; i < newLength; i++) {
+                var item = newList[i];
+                var itemKey = newKey(item, i, newList);
+                newKeyToNewIndex.set(itemKey, i);
                 if (nodeMap.has(itemKey)) {
-                    var existingNode = nodeMap.get(itemKey);
-                    newNodeMap.set(itemKey, existingNode);
-                    newElements.push(existingNode);
+                    // Reuse existing node
+                    var node = nodeMap.get(itemKey);
+                    newElements[i] = node;
+                    // Track if items moved
+                    if (i < maxNewIndexSoFar) {
+                        moved = true;
+                    }
+                    else {
+                        maxNewIndexSoFar = i;
+                    }
                 }
                 else {
                     // Create new node
-                    var node = newMap(item, index, newList);
-                    newNodeMap.set(itemKey, node);
-                    newElements.push(node);
+                    newElements[i] = newMap(item, i, newList);
                 }
             }
-            // Remove nodes that are no longer in the list
+            // Remove nodes not in new list
+            var toRemove = [];
             nodeMap.forEach(function (node, key) {
-                if (!newKeys.has(key)) {
-                    node.remove();
+                if (!newKeyToNewIndex.has(key)) {
+                    toRemove.push(node);
                 }
             });
-            // Insert/reorder nodes in correct order
-            var referenceNode = anchor.nextSibling;
-            for (var index = 0; index < newElements.length; index++) {
-                var node = newElements[index];
-                // If node is not in correct position, insert it
-                if (referenceNode !== node) {
-                    parent.insertBefore(node, referenceNode);
+            for (var i = 0; i < toRemove.length; i++) {
+                toRemove[i].remove();
+            }
+            // 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 j = seq.length - 1;
+                var anchor_1 = null;
+                // Traverse from end to start for stable insertions
+                for (var i = newLength - 1; i >= 0; i--) {
+                    var node = newElements[i];
+                    if (j < 0 || i !== seq[j]) {
+                        // Node needs to be moved or inserted
+                        if (anchor_1) {
+                            parent.insertBefore(node, anchor_1);
+                        }
+                        else {
+                            // Insert at end
+                            var nextSibling = anchor_1.nextSibling;
+                            var temp = nextSibling;
+                            while (temp && newElements.includes(temp)) {
+                                temp = temp.nextSibling;
+                            }
+                            parent.insertBefore(node, temp);
+                        }
+                    }
+                    else {
+                        j--;
+                    }
+                    anchor_1 = node;
                 }
-                referenceNode = node.nextSibling;
             }
-            // Update node map and element list
+            else {
+                // No moves needed, just insert new nodes
+                var currentNode = anchor.nextSibling;
+                for (var i = 0; i < newLength; i++) {
+                    var node = newElements[i];
+                    if (currentNode !== node) {
+                        parent.insertBefore(node, currentNode);
+                    }
+                    else {
+                        currentNode = currentNode.nextSibling;
+                    }
+                }
+            }
+            // Update maps
             nodeMap.clear();
-            newNodeMap.forEach(function (node, key) { return nodeMap.set(key, node); });
+            for (var i = 0; i < newLength; i++) {
+                var itemKey = newKey(newList[i], i, newList);
+                nodeMap.set(itemKey, newElements[i]);
+            }
             anchor.__kt_for_list__ = newElements;
             return anchor;
         };
@@ -549,6 +620,48 @@ var __ktjs_core__ = (function (exports) {
         }
         return anchor;
     }
+    // Longest Increasing Subsequence algorithm (optimized for diff)
+    function getSequence(arr) {
+        var p = arr.slice();
+        var result = [0];
+        var i, j, u, v, c;
+        var len = arr.length;
+        for (i = 0; i < len; i++) {
+            var 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;
+    }
 
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;

package/dist/index.mjs

@@ -208,7 +208,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -419,6 +419,7 @@ function KTFor(props) {
         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);
@@ -429,46 +430,116 @@ function KTFor(props) {
             anchor.__kt_for_list__ = newElements;
             return anchor;
         }
-        // Build new key map
-        const newNodeMap = new Map();
-        const newKeys = new Set();
-        const newElements = [];
-        for (let index = 0; index < newList.length; index++) {
-            const item = newList[index];
-            const itemKey = newKey(item, index, newList);
-            newKeys.add(itemKey);
-            // Reuse existing node if key exists
+        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 = newKey(item, i, newList);
+                const node = newMap(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 = newKey(item, i, newList);
+            newKeyToNewIndex.set(itemKey, i);
             if (nodeMap.has(itemKey)) {
-                const existingNode = nodeMap.get(itemKey);
-                newNodeMap.set(itemKey, existingNode);
-                newElements.push(existingNode);
+                // 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
-                const node = newMap(item, index, newList);
-                newNodeMap.set(itemKey, node);
-                newElements.push(node);
+                newElements[i] = newMap(item, i, newList);
             }
         }
-        // Remove nodes that are no longer in the list
+        // Remove nodes not in new list
+        const toRemove = [];
         nodeMap.forEach((node, key) => {
-            if (!newKeys.has(key)) {
-                node.remove();
+            if (!newKeyToNewIndex.has(key)) {
+                toRemove.push(node);
             }
         });
-        // Insert/reorder nodes in correct order
-        let referenceNode = anchor.nextSibling;
-        for (let index = 0; index < newElements.length; index++) {
-            const node = newElements[index];
-            // If node is not in correct position, insert it
-            if (referenceNode !== node) {
-                parent.insertBefore(node, referenceNode);
+        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(newKey(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;
             }
-            referenceNode = node.nextSibling;
         }
-        // Update node map and element list
+        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;
+                }
+            }
+        }
+        // Update maps
         nodeMap.clear();
-        newNodeMap.forEach((node, key) => nodeMap.set(key, node));
+        for (let i = 0; i < newLength; i++) {
+            const itemKey = newKey(newList[i], i, newList);
+            nodeMap.set(itemKey, newElements[i]);
+        }
         anchor.__kt_for_list__ = newElements;
         return anchor;
     };
@@ -478,5 +549,47 @@ function KTFor(props) {
     }
     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;
+}
 
 export { Fragment, KTAsync, KTFor, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.d.ts

@@ -157,7 +157,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -208,7 +208,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

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

@@ -151,7 +151,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -208,7 +208,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.0 (Last Update: 2026.01.28 15:11:59.247)
+ * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",