From 201a71d8b7fc89469ed5426ae84479a9f0397ad2 Mon Sep 17 00:00:00 2001 From: "Daybrush (Younkue Choi)" Date: Thu, 8 Jul 2021 21:39:53 +0900 Subject: [PATCH 1/6] fix insert function (#6445) --- src/runtime/internal/dom.ts | 50 +++++++++---------- .../each-block-keyed-changed/_config.js | 13 +++++ .../each-block-keyed-changed/main.svelte | 8 +++ 3 files changed, 46 insertions(+), 25 deletions(-) create mode 100644 test/runtime/samples/each-block-keyed-changed/_config.js create mode 100644 test/runtime/samples/each-block-keyed-changed/main.svelte diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 93100e625b..a055bee446 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -34,54 +34,54 @@ function upper_bound(low: number, high: number, key: (index: number) => number, function init_hydrate(target: NodeEx) { if (target.hydrate_init) return; target.hydrate_init = true; - + type NodeEx2 = NodeEx & {claim_order: number}; - + // We know that all children have claim_order values since the unclaimed have been detached const children = target.childNodes as NodeListOf; - - /* + + /* * Reorder claimed children optimally. * We can reorder claimed children optimally by finding the longest subsequence of * nodes that are already claimed in order and only moving the rest. The longest * subsequence subsequence of nodes that are claimed in order can be found by * computing the longest increasing subsequence of .claim_order values. - * + * * This algorithm is optimal in generating the least amount of reorder operations * possible. - * + * * Proof: * We know that, given a set of reordering operations, the nodes that do not move * always form an increasing subsequence, since they do not move among each other * meaning that they must be already ordered among each other. Thus, the maximal * set of nodes that do not move form a longest increasing subsequence. */ - + // Compute longest increasing subsequence // m: subsequence length j => index k of smallest value that ends an increasing subsequence of length j const m = new Int32Array(children.length + 1); // Predecessor indices + 1 const p = new Int32Array(children.length); - + m[0] = -1; let longest = 0; for (let i = 0; i < children.length; i++) { const current = children[i].claim_order; // Find the largest subsequence length such that it ends in a value less than our current value - + // upper_bound returns first greater value, so we subtract one const seqLen = upper_bound(1, longest + 1, idx => children[m[idx]].claim_order, current) - 1; - + p[i] = m[seqLen] + 1; - + const newLen = seqLen + 1; - + // We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence. m[newLen] = i; - + longest = Math.max(newLen, longest); } - + // The longest increasing subsequence of nodes (initially reversed) const lis: NodeEx2[] = []; // The rest of the nodes, nodes that will be moved @@ -98,10 +98,10 @@ function init_hydrate(target: NodeEx) { toMove.push(children[last]); } lis.reverse(); - + // We sort the nodes being moved to guarantee that their insertion order matches the claim order toMove.sort((a, b) => a.claim_order - b.claim_order); - + // Finally, we move the nodes for (let i = 0, j = 0; i < toMove.length; i++) { while (j < lis.length && toMove[i].claim_order >= lis[j].claim_order) { @@ -115,7 +115,7 @@ function init_hydrate(target: NodeEx) { export function append(target: NodeEx, node: NodeEx) { if (is_hydrating) { init_hydrate(target); - + if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentElement !== target))) { target.actual_end_child = target.firstChild; } @@ -132,7 +132,7 @@ export function append(target: NodeEx, node: NodeEx) { export function insert(target: NodeEx, node: NodeEx, anchor?: NodeEx) { if (is_hydrating && !anchor) { append(target, node); - } else if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) { + } else if (node.parentNode !== target || node.nextSibling != anchor) { target.insertBefore(node, anchor || null); } } @@ -309,12 +309,12 @@ function claim_node(nodes: ChildNodeArray, predicate: (no if (nodes.claim_info === undefined) { nodes.claim_info = {last_index: 0, total_claimed: 0}; } - + const resultNode = (() => { // We first try to find an element after the previous one for (let i = nodes.claim_info.last_index; i < nodes.length; i++) { const node = nodes[i]; - + if (predicate(node)) { processNode(node); @@ -325,13 +325,13 @@ function claim_node(nodes: ChildNodeArray, predicate: (no return node; } } - - + + // Otherwise, we try to find one before // We iterate in reverse so that we don't go too far back for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) { const node = nodes[i]; - + if (predicate(node)) { processNode(node); @@ -345,11 +345,11 @@ function claim_node(nodes: ChildNodeArray, predicate: (no return node; } } - + // If we can't find any matching node, we create a new one return createNode(); })(); - + resultNode.claim_order = nodes.claim_info.total_claimed; nodes.claim_info.total_claimed += 1; return resultNode; diff --git a/test/runtime/samples/each-block-keyed-changed/_config.js b/test/runtime/samples/each-block-keyed-changed/_config.js new file mode 100644 index 0000000000..afb3593b94 --- /dev/null +++ b/test/runtime/samples/each-block-keyed-changed/_config.js @@ -0,0 +1,13 @@ +export default { + props: { + titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }] + }, + + html: '

a

b

c

', + + test({ assert, component, target }) { + component.titles = [{ name: 'b' }, { name: 'c' }, { name: 'a' }]; + + assert.htmlEqual(target.innerHTML, '

b

c

a

'); + } +}; diff --git a/test/runtime/samples/each-block-keyed-changed/main.svelte b/test/runtime/samples/each-block-keyed-changed/main.svelte new file mode 100644 index 0000000000..1e1ef513a7 --- /dev/null +++ b/test/runtime/samples/each-block-keyed-changed/main.svelte @@ -0,0 +1,8 @@ + +
+ {#each titles as title (title.name)} +

{title.name}

+ {/each} +
From 384513e3b14ce475863f094f81370e25a4dada99 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 8 Jul 2021 05:44:51 -0700 Subject: [PATCH 2/6] Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dbb9a15fe3..921573c319 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Add `varsReport` compiler option ([#6192](https://github.com/sveltejs/svelte/pull/6192)) * Throw compiler error when passing empty directive names ([#6299](https://github.com/sveltejs/svelte/issues/6299)) * Update `periscopic` to allow for export of anonymous function or class ([#3275](https://github.com/sveltejs/svelte/issues/3275)) +* Fix insert function ([#6445](https://github.com/sveltejs/svelte/pull/6445)) * Fix `preserveComments` in SSR mode ([#4730](https://github.com/sveltejs/svelte/issues/4730)) * Fix compiler error when using `:where()` inside `:global()` ([#6434](https://github.com/sveltejs/svelte/issues/6434)) * Fix erroneous `unknown prop` warning when using slot on a component ([#6065](https://github.com/sveltejs/svelte/pull/6065)) @@ -19,7 +20,7 @@ * Speed up hydration by reducing amount of element reorderings ([#4308](https://github.com/sveltejs/svelte/issues/4308)) * Fix escaping attribute values when using a spread in SSR ([#5756](https://github.com/sveltejs/svelte/issues/5756)) -* Throw compiler error when `:global()` contains multiple selectors ([#5907](https://github.com/sveltejs/svelte/issues/5907)) +* Throw compiler error when `:global()` contains multiple selectors ([#5907](https://github.com#6445/shttps://github.com/sveltejs/svelte/pull/6445veltejs/svelte/issues/5907)) * Give explicit error rather than crashing when an attribute shorthand `{}` is empty ([#6086](https://github.com/sveltejs/svelte/issues/6086)) * Make `