Precise DOM morphing
morphing typescript dom

Improved naming

+28 -28
+28 -28
src/morphlex.ts
··· 478 478 } 479 479 480 480 // Match elements by isEqualNode 481 - for (const i of unmatchedElements) { 482 - const element = toChildNodes[i] as Element 481 + for (const unmatchedIndex of unmatchedElements) { 482 + const element = toChildNodes[unmatchedIndex] as Element 483 483 484 484 for (const candidateIndex of candidateElements) { 485 485 const candidate = fromChildNodes[candidateIndex]! 486 486 if (candidate.isEqualNode(element)) { 487 - matches[i] = candidate 487 + matches[unmatchedIndex] = candidate 488 488 candidateElements.delete(candidateIndex) 489 - unmatchedElements.delete(i) 489 + unmatchedElements.delete(unmatchedIndex) 490 490 break 491 491 } 492 492 } 493 493 } 494 494 495 495 // Match by exact id 496 - for (const i of unmatchedElements) { 497 - const element = toChildNodes[i] as Element 496 + for (const unmatchedIndex of unmatchedElements) { 497 + const element = toChildNodes[unmatchedIndex] as Element 498 498 499 499 const id = element.id 500 500 if (id === "") continue ··· 502 502 for (const candidateIndex of candidateElements) { 503 503 const candidate = fromChildNodes[candidateIndex] as Element 504 504 if (element.localName === candidate.localName && id === candidate.id) { 505 - matches[i] = candidate 505 + matches[unmatchedIndex] = candidate 506 506 candidateElements.delete(candidateIndex) 507 - unmatchedElements.delete(i) 507 + unmatchedElements.delete(unmatchedIndex) 508 508 break 509 509 } 510 510 } 511 511 } 512 512 513 513 // Match by idSet 514 - for (const i of unmatchedElements) { 515 - const element = toChildNodes[i] as Element 514 + for (const unmatchedIndex of unmatchedElements) { 515 + const element = toChildNodes[unmatchedIndex] as Element 516 516 517 517 const idSet = this.#idMap.get(element) 518 518 if (!idSet) continue ··· 523 523 if (candidateIdSet) { 524 524 for (const id of idSet) { 525 525 if (candidateIdSet.has(id)) { 526 - matches[i] = candidate 526 + matches[unmatchedIndex] = candidate 527 527 candidateElements.delete(candidateIndex) 528 - unmatchedElements.delete(i) 528 + unmatchedElements.delete(unmatchedIndex) 529 529 break candidateLoop 530 530 } 531 531 } ··· 534 534 } 535 535 536 536 // Match by heuristics 537 - for (const i of unmatchedElements) { 538 - const element = toChildNodes[i] as Element 537 + for (const unmatchedIndex of unmatchedElements) { 538 + const element = toChildNodes[unmatchedIndex] as Element 539 539 540 540 const name = element.getAttribute("name") 541 541 const href = element.getAttribute("href") ··· 549 549 (href && href === candidate.getAttribute("href")) || 550 550 (src && src === candidate.getAttribute("src"))) 551 551 ) { 552 - matches[i] = candidate 552 + matches[unmatchedIndex] = candidate 553 553 candidateElements.delete(candidateIndex) 554 - unmatchedElements.delete(i) 554 + unmatchedElements.delete(unmatchedIndex) 555 555 break 556 556 } 557 557 } 558 558 } 559 559 560 560 // Match by tagName 561 - for (const i of unmatchedElements) { 562 - const element = toChildNodes[i] as Element 561 + for (const unmatchedIndex of unmatchedElements) { 562 + const element = toChildNodes[unmatchedIndex] as Element 563 563 564 564 const localName = element.localName 565 565 ··· 570 570 // Treat inputs with different type as though they are different tags. 571 571 continue 572 572 } 573 - matches[i] = candidate 573 + matches[unmatchedIndex] = candidate 574 574 candidateElements.delete(candidateIndex) 575 - unmatchedElements.delete(i) 575 + unmatchedElements.delete(unmatchedIndex) 576 576 break 577 577 } 578 578 } 579 579 } 580 580 581 581 // Match nodes by isEqualNode (skip whitespace-only text nodes) 582 - for (const i of unmatchedNodes) { 583 - const node = toChildNodes[i]! 582 + for (const unmatchedIndex of unmatchedNodes) { 583 + const node = toChildNodes[unmatchedIndex]! 584 584 if (isWhitespace(node)) continue 585 585 586 586 for (const candidateIndex of candidateNodes) { 587 587 const candidate = fromChildNodes[candidateIndex]! 588 588 if (candidate.isEqualNode(node)) { 589 - matches[i] = candidate 589 + matches[unmatchedIndex] = candidate 590 590 candidateNodes.delete(candidateIndex) 591 - unmatchedNodes.delete(i) 591 + unmatchedNodes.delete(unmatchedIndex) 592 592 break 593 593 } 594 594 } 595 595 } 596 596 597 597 // Match by nodeType (skip whitespace-only text nodes) 598 - for (const i of unmatchedNodes) { 599 - const node = toChildNodes[i]! 598 + for (const unmatchedIndex of unmatchedNodes) { 599 + const node = toChildNodes[unmatchedIndex]! 600 600 if (isWhitespace(node)) continue 601 601 602 602 const nodeType = node.nodeType ··· 604 604 for (const candidateIndex of candidateNodes) { 605 605 const candidate = fromChildNodes[candidateIndex]! 606 606 if (nodeType === candidate.nodeType) { 607 - matches[i] = candidate 607 + matches[unmatchedIndex] = candidate 608 608 candidateNodes.delete(candidateIndex) 609 - unmatchedNodes.delete(i) 609 + unmatchedNodes.delete(unmatchedIndex) 610 610 break 611 611 } 612 612 }