+44

benchmark/index.html

··· 727 727 }, 728 728 }, 729 729 { 730 730 + name: "Large List - Partial Reorder", 731 731 + description: "Reordering some items in a list of 100 items while keeping many in place", 732 732 + setup: () => { 733 733 + const from = document.createElement("ul") 734 734 + for (let i = 1; i <= 100; i++) { 735 735 + const li = document.createElement("li") 736 736 + li.id = `item-${i}` 737 737 + li.textContent = `Item ${i}` 738 738 + from.appendChild(li) 739 739 + } 740 740 + const to = document.createElement("ul") 741 741 + // Partial reorder: move every 5th item to a different position 742 742 + // [1,2,3,4,5,6,7,8,9,10,...] → [5,1,2,3,4,10,6,7,8,9,15,11,12,13,14,20,...] 743 743 + // This keeps most items in order (good for LIS) while shuffling some 744 744 + const items = [] 745 745 + for (let i = 1; i <= 100; i++) { 746 746 + items.push(i) 747 747 + } 748 748 + const reordered = [] 749 749 + for (let i = 0; i < items.length; i += 5) { 750 750 + if (i + 4 < items.length) { 751 751 + // Move 5th item to front of group 752 752 + reordered.push(items[i + 4]) 753 753 + reordered.push(items[i]) 754 754 + reordered.push(items[i + 1]) 755 755 + reordered.push(items[i + 2]) 756 756 + reordered.push(items[i + 3]) 757 757 + } else { 758 758 + // Handle remaining items 759 759 + for (let j = i; j < items.length; j++) { 760 760 + reordered.push(items[j]) 761 761 + } 762 762 + } 763 763 + } 764 764 + for (const num of reordered) { 765 765 + const li = document.createElement("li") 766 766 + li.id = `item-${num}` 767 767 + li.textContent = `Item ${num}` 768 768 + to.appendChild(li) 769 769 + } 770 770 + return { from, to } 771 771 + }, 772 772 + }, 773 773 + { 730 774 name: "Deep Nesting", 731 775 description: "Morphing deeply nested structures", 732 776 setup: () => {

+84 -2

src/morphlex.ts

··· 108 108 this.options = options 109 109 } 110 110 111 111 + // Find longest increasing subsequence to minimize moves during reordering 112 112 + // Returns the indices in the sequence that form the LIS 113 113 + private longestIncreasingSubsequence(sequence: Array<number>): Array<number> { 114 114 + const n = sequence.length 115 115 + if (n === 0) return [] 116 116 + 117 117 + // smallestEnding[i] = smallest ending value of any increasing subsequence of length i+1 118 118 + const smallestEnding: Array<number> = [] 119 119 + // indices[i] = index in sequence where smallestEnding[i] occurs 120 120 + const indices: Array<number> = [] 121 121 + // prev[i] = previous index in the LIS ending at sequence[i] 122 122 + const prev: Array<number> = Array.from({ length: n }, () => -1) 123 123 + 124 124 + // Build the LIS by processing each value 125 125 + for (let i = 0; i < n; i++) { 126 126 + const val = sequence[i]! 127 127 + if (val === -1) continue // Skip new nodes (not in original sequence) 128 128 + 129 129 + // Binary search: find where this value fits in smallestEnding 130 130 + let left = 0 131 131 + let right = smallestEnding.length 132 132 + 133 133 + while (left < right) { 134 134 + const mid = Math.floor((left + right) / 2) 135 135 + if (smallestEnding[mid]! < val) left = mid + 1 136 136 + else right = mid 137 137 + } 138 138 + 139 139 + // Link this element to the previous one in the subsequence 140 140 + if (left > 0) prev[i] = indices[left - 1]! 141 141 + 142 142 + // Either extend the sequence or update an existing position 143 143 + if (left === smallestEnding.length) { 144 144 + // Extend: this value is larger than all previous endings 145 145 + smallestEnding.push(val) 146 146 + indices.push(i) 147 147 + } else { 148 148 + // Update: found a better (smaller) ending for this length 149 149 + smallestEnding[left] = val 150 150 + indices[left] = i 151 151 + } 152 152 + } 153 153 + 154 154 + // Reconstruct the actual indices that form the LIS 155 155 + const result: Array<number> = [] 156 156 + if (indices.length === 0) return result 157 157 + 158 158 + // Walk backwards through prev links to build the LIS 159 159 + let curr: number | undefined = indices[indices.length - 1] 160 160 + while (curr !== undefined && curr !== -1) { 161 161 + result.unshift(curr) 162 162 + curr = prev[curr] 163 163 + } 164 164 + 165 165 + return result 166 166 + } 167 167 + 111 168 morph(from: ChildNode, to: ChildNode | NodeListOf<ChildNode>): void { 112 169 if (isParentNode(from)) { 113 170 this.mapIdSets(from) ··· 286 343 const candidateNodes: Set<ChildNode> = new Set() 287 344 const candidateElements: Set<Element> = new Set() 288 345 289 289 - const matches: Array<ChildNode | null> = new Array(toChildNodes.length).fill(null) 346 346 + const matches: Array<ChildNode | null> = Array.from({ length: toChildNodes.length }, () => null) 290 347 291 348 for (const candidate of fromChildNodes) { 292 349 if (isElement(candidate)) candidateElements.add(candidate) ··· 428 485 } 429 486 } 430 487 488 488 + // Build sequence of current indices for LIS calculation 489 489 + const fromIndex = new Map<ChildNode, number>() 490 490 + Array.from(fromChildNodes).forEach((node, i) => fromIndex.set(node, i)) 491 491 + 492 492 + const sequence: Array<number> = [] 493 493 + for (let i = 0; i < matches.length; i++) { 494 494 + const match = matches[i] 495 495 + if (match && fromIndex.has(match)) { 496 496 + sequence.push(fromIndex.get(match)!) 497 497 + } else { 498 498 + sequence.push(-1) // New node, not in sequence 499 499 + } 500 500 + } 501 501 + 502 502 + // Find LIS - these nodes don't need to move 503 503 + const lisIndices = this.longestIncreasingSubsequence(sequence) 504 504 + const shouldNotMove = new Set<number>() 505 505 + for (const idx of lisIndices) { 506 506 + shouldNotMove.add(sequence[idx]!) 507 507 + } 508 508 + 431 509 // Process nodes in forward order to maintain proper positioning 432 510 let insertionPoint: ChildNode | null = parent.firstChild 433 511 for (let i = 0; i < toChildNodes.length; i++) { 434 512 const node = toChildNodes[i]! 435 513 const match = matches[i] 436 514 if (match) { 437 437 - moveBefore(parent, match, insertionPoint) 515 515 + const matchIndex = fromIndex.get(match)! 516 516 + // Only move if not in LIS 517 517 + if (!shouldNotMove.has(matchIndex)) { 518 518 + moveBefore(parent, match, insertionPoint) 519 519 + } 438 520 this.morphOneToOne(match, node) 439 521 insertionPoint = match.nextSibling 440 522 // Skip over any nodes that will be removed to avoid unnecessary moves

+51

test-mutations.html

··· 1 1 + <!DOCTYPE html> 2 2 + <html> 3 3 + <body> 4 4 + <div id="test"></div> 5 5 + <script type="module"> 6 6 + import { morph } from './dist/morphlex.min.js'; 7 7 + 8 8 + const observer = new MutationObserver((mutations) => { 9 9 + console.log(`Total mutations: ${mutations.length}`); 10 10 + mutations.forEach((m, i) => { 11 11 + console.log(`Mutation ${i}: type=${m.type}, added=${m.addedNodes.length}, removed=${m.removedNodes.length}`); 12 12 + }); 13 13 + }); 14 14 + 15 15 + const from = document.createElement('ul'); 16 16 + for (let i = 1; i <= 5; i++) { 17 17 + const li = document.createElement('li'); 18 18 + li.textContent = `Item ${i}`; 19 19 + from.appendChild(li); 20 20 + } 21 21 + 22 22 + const to = document.createElement('ul'); 23 23 + for (let i = 5; i >= 1; i--) { 24 24 + const li = document.createElement('li'); 25 25 + li.textContent = `Item ${i}`; 26 26 + to.appendChild(li); 27 27 + } 28 28 + 29 29 + document.getElementById('test').appendChild(from); 30 30 + 31 31 + observer.observe(from, { 32 32 + childList: true, 33 33 + attributes: true, 34 34 + characterData: true, 35 35 + subtree: true 36 36 + }); 37 37 + 38 38 + console.log('Before morph:'); 39 39 + console.log(Array.from(from.children).map(li => li.textContent)); 40 40 + 41 41 + morph(from, to); 42 42 + 43 43 + console.log('After morph:'); 44 44 + console.log(Array.from(from.children).map(li => li.textContent)); 45 45 + 46 46 + setTimeout(() => { 47 47 + observer.disconnect(); 48 48 + }, 100); 49 49 + </script> 50 50 + </body> 51 51 + </html>

+257

test/optimal-reordering.browser.test.ts

··· 1 1 + import { describe, test, expect } from "vitest" 2 2 + import { morph } from "../src/morphlex" 3 3 + 4 4 + describe("Optimal Reordering", () => { 5 5 + test("should minimize moves when reordering - simple rotation", async () => { 6 6 + const from = document.createElement("ul") 7 7 + for (let i = 1; i <= 5; i++) { 8 8 + const li = document.createElement("li") 9 9 + li.id = `item-${i}` 10 10 + li.textContent = `Item ${i}` 11 11 + from.appendChild(li) 12 12 + } 13 13 + 14 14 + const to = document.createElement("ul") 15 15 + // Rotate: move last to first [1,2,3,4,5] → [5,1,2,3,4] 16 16 + for (const id of [5, 1, 2, 3, 4]) { 17 17 + const li = document.createElement("li") 18 18 + li.id = `item-${id}` 19 19 + li.textContent = `Item ${id}` 20 20 + to.appendChild(li) 21 21 + } 22 22 + 23 23 + document.body.appendChild(from) 24 24 + 25 25 + const mutations: MutationRecord[] = [] 26 26 + const observer = new MutationObserver((records) => { 27 27 + mutations.push(...records) 28 28 + }) 29 29 + 30 30 + observer.observe(from, { 31 31 + childList: true, 32 32 + subtree: true, 33 33 + }) 34 34 + 35 35 + morph(from, to) 36 36 + 37 37 + await new Promise((resolve) => setTimeout(resolve, 0)) 38 38 + 39 39 + observer.disconnect() 40 40 + document.body.removeChild(from) 41 41 + 42 42 + // With LIS optimization: 43 43 + // Sequence: [4, 0, 1, 2, 3] (current indices in desired order) 44 44 + // LIS: [0, 1, 2, 3] (items 1,2,3,4 stay in order) 45 45 + // Only item 5 needs to move! 46 46 + // Expected: 2 mutations (1 remove + 1 add for moving item 5) 47 47 + 48 48 + const childListMutations = mutations.filter((m) => m.type === "childList") 49 49 + console.log(`\nRotation test: ${childListMutations.length} childList mutations`) 50 50 + 51 51 + // Currently fails with 2 moves (4 mutations) 52 52 + // Should pass with 1 move (2 mutations) after LIS optimization 53 53 + expect(childListMutations.length).toBe(2) 54 54 + }) 55 55 + 56 56 + test("should minimize moves when reordering - partial reorder", async () => { 57 57 + const from = document.createElement("ul") 58 58 + for (let i = 1; i <= 10; i++) { 59 59 + const li = document.createElement("li") 60 60 + li.id = `item-${i}` 61 61 + li.textContent = `Item ${i}` 62 62 + from.appendChild(li) 63 63 + } 64 64 + 65 65 + const to = document.createElement("ul") 66 66 + // [1,2,3,4,5,6,7,8,9,10] → [3,1,5,7,2,8,4,9,6,10] 67 67 + // Items in LIS: 3,5,7,8,9,10 (6 items stay) 68 68 + // Items to move: 1,2,4,6 (4 items) 69 69 + for (const id of [3, 1, 5, 7, 2, 8, 4, 9, 6, 10]) { 70 70 + const li = document.createElement("li") 71 71 + li.id = `item-${id}` 72 72 + li.textContent = `Item ${id}` 73 73 + to.appendChild(li) 74 74 + } 75 75 + 76 76 + document.body.appendChild(from) 77 77 + 78 78 + const mutations: MutationRecord[] = [] 79 79 + const observer = new MutationObserver((records) => { 80 80 + mutations.push(...records) 81 81 + }) 82 82 + 83 83 + observer.observe(from, { 84 84 + childList: true, 85 85 + subtree: true, 86 86 + }) 87 87 + 88 88 + morph(from, to) 89 89 + 90 90 + await new Promise((resolve) => setTimeout(resolve, 0)) 91 91 + 92 92 + observer.disconnect() 93 93 + document.body.removeChild(from) 94 94 + 95 95 + // Sequence: [2, 0, 4, 6, 1, 7, 3, 8, 5, 9] 96 96 + // LIS: [2, 4, 6, 7, 8, 9] length 6 (items 3,5,7,8,9,10) 97 97 + // Move: 10 - 6 = 4 items 98 98 + // Expected: 8 mutations (4 moves × 2) 99 99 + 100 100 + const childListMutations = mutations.filter((m) => m.type === "childList") 101 101 + console.log(`\nPartial reorder test: ${childListMutations.length} childList mutations`) 102 102 + 103 103 + expect(childListMutations.length).toBeLessThanOrEqual(8) 104 104 + }) 105 105 + 106 106 + test("should minimize moves when reordering - complete reversal", async () => { 107 107 + const from = document.createElement("ul") 108 108 + for (let i = 1; i <= 6; i++) { 109 109 + const li = document.createElement("li") 110 110 + li.id = `item-${i}` 111 111 + li.textContent = `Item ${i}` 112 112 + from.appendChild(li) 113 113 + } 114 114 + 115 115 + const to = document.createElement("ul") 116 116 + // Complete reversal [1,2,3,4,5,6] → [6,5,4,3,2,1] 117 117 + for (let i = 6; i >= 1; i--) { 118 118 + const li = document.createElement("li") 119 119 + li.id = `item-${i}` 120 120 + li.textContent = `Item ${i}` 121 121 + to.appendChild(li) 122 122 + } 123 123 + 124 124 + document.body.appendChild(from) 125 125 + 126 126 + const mutations: MutationRecord[] = [] 127 127 + const observer = new MutationObserver((records) => { 128 128 + mutations.push(...records) 129 129 + }) 130 130 + 131 131 + observer.observe(from, { 132 132 + childList: true, 133 133 + subtree: true, 134 134 + }) 135 135 + 136 136 + morph(from, to) 137 137 + 138 138 + await new Promise((resolve) => setTimeout(resolve, 0)) 139 139 + 140 140 + observer.disconnect() 141 141 + document.body.removeChild(from) 142 142 + 143 143 + // Sequence: [5, 4, 3, 2, 1, 0] (completely decreasing) 144 144 + // LIS: any single element, length 1 145 145 + // Move: 6 - 1 = 5 items 146 146 + // Expected: 10 mutations (5 moves × 2) 147 147 + 148 148 + const childListMutations = mutations.filter((m) => m.type === "childList") 149 149 + console.log(`\nReversal test: ${childListMutations.length} childList mutations`) 150 150 + 151 151 + // This is actually optimal for a reversal - can't do better than moving 5 items 152 152 + expect(childListMutations.length).toBeLessThanOrEqual(10) 153 153 + }) 154 154 + 155 155 + test("should minimize moves when reordering - already optimal", async () => { 156 156 + const from = document.createElement("ul") 157 157 + for (let i = 1; i <= 5; i++) { 158 158 + const li = document.createElement("li") 159 159 + li.id = `item-${i}` 160 160 + li.textContent = `Item ${i}` 161 161 + from.appendChild(li) 162 162 + } 163 163 + 164 164 + const to = document.createElement("ul") 165 165 + // [1,2,3,4,5] → [1,2,4,5,3] 166 166 + // Move only item 3 to the end 167 167 + for (const id of [1, 2, 4, 5, 3]) { 168 168 + const li = document.createElement("li") 169 169 + li.id = `item-${id}` 170 170 + li.textContent = `Item ${id}` 171 171 + to.appendChild(li) 172 172 + } 173 173 + 174 174 + document.body.appendChild(from) 175 175 + 176 176 + const mutations: MutationRecord[] = [] 177 177 + const observer = new MutationObserver((records) => { 178 178 + mutations.push(...records) 179 179 + }) 180 180 + 181 181 + observer.observe(from, { 182 182 + childList: true, 183 183 + subtree: true, 184 184 + }) 185 185 + 186 186 + morph(from, to) 187 187 + 188 188 + await new Promise((resolve) => setTimeout(resolve, 0)) 189 189 + 190 190 + observer.disconnect() 191 191 + document.body.removeChild(from) 192 192 + 193 193 + // Sequence: [0, 1, 3, 4, 2] 194 194 + // LIS: [0, 1, 3, 4] length 4 (items 1,2,4,5) 195 195 + // Move: only item 3 196 196 + // Expected: 2 mutations (1 move × 2) 197 197 + 198 198 + const childListMutations = mutations.filter((m) => m.type === "childList") 199 199 + console.log(`\nAlready optimal test: ${childListMutations.length} childList mutations`) 200 200 + 201 201 + expect(childListMutations.length).toBe(2) 202 202 + }) 203 203 + 204 204 + test("should minimize moves with mixed operations", async () => { 205 205 + const from = document.createElement("ul") 206 206 + for (let i = 1; i <= 8; i++) { 207 207 + const li = document.createElement("li") 208 208 + li.id = `item-${i}` 209 209 + li.textContent = `Item ${i}` 210 210 + from.appendChild(li) 211 211 + } 212 212 + 213 213 + const to = document.createElement("ul") 214 214 + // Remove 2 and 6, add 9 and 10, reorder rest 215 215 + // [1,2,3,4,5,6,7,8] → [4,1,9,5,7,3,10,8] 216 216 + for (const id of [4, 1, 9, 5, 7, 3, 10, 8]) { 217 217 + const li = document.createElement("li") 218 218 + li.id = `item-${id}` 219 219 + li.textContent = `Item ${id}` 220 220 + to.appendChild(li) 221 221 + } 222 222 + 223 223 + document.body.appendChild(from) 224 224 + 225 225 + const mutations: MutationRecord[] = [] 226 226 + const observer = new MutationObserver((records) => { 227 227 + mutations.push(...records) 228 228 + }) 229 229 + 230 230 + observer.observe(from, { 231 231 + childList: true, 232 232 + subtree: true, 233 233 + }) 234 234 + 235 235 + morph(from, to) 236 236 + 237 237 + await new Promise((resolve) => setTimeout(resolve, 0)) 238 238 + 239 239 + observer.disconnect() 240 240 + document.body.removeChild(from) 241 241 + 242 242 + // Matched items: [4,1,5,7,3,8] at indices [3,0,4,6,2,7] 243 243 + // Sequence: [3, 0, 4, 6, 2, 7] 244 244 + // LIS: [3, 4, 6, 7] length 4 (items 4,5,7,8) 245 245 + // Move: 6 - 4 = 2 items (1 and 3) 246 246 + // Plus: 2 removals (2,6) and 2 additions (9,10) 247 247 + // Expected: ~8 mutations (2 moves + 2 removes + 2 adds = 6 ops × variable mutations) 248 248 + 249 249 + const childListMutations = mutations.filter((m) => m.type === "childList") 250 250 + console.log(`\nMixed operations test: ${childListMutations.length} childList mutations`) 251 251 + 252 252 + // Just verify it completes correctly 253 253 + expect(from.children.length).toBe(8) 254 254 + expect(from.children[0]?.id).toBe("item-4") 255 255 + expect(from.children[7]?.id).toBe("item-8") 256 256 + }) 257 257 + })