diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index eb2175a0d4..ac34f4c870 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -313,12 +313,16 @@ export function children(element: Element) { return Array.from(element.childNodes); } -function claim_node(nodes: ChildNodeArray, predicate: (node: ChildNodeEx) => node is R, processNode: (node: ChildNodeEx) => void, createNode: () => R, dontUpdateLastIndex: boolean = false) { - // Try to find nodes in an order such that we lengthen the longest increasing subsequence +function init_claim_info(nodes: ChildNodeArray) { if (nodes.claim_info === undefined) { nodes.claim_info = {last_index: 0, total_claimed: 0}; } +} +function claim_node(nodes: ChildNodeArray, predicate: (node: ChildNodeEx) => node is R, processNode: (node: ChildNodeEx) => void, createNode: () => R, dontUpdateLastIndex: boolean = false) { + // Try to find nodes in an order such that we lengthen the longest increasing subsequence + init_claim_info(nodes); + 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++) { @@ -415,10 +419,17 @@ export function claim_html_tag(nodes) { if (start_index === end_index) { return new HtmlTag(); } + + init_claim_info(nodes); const html_tag_nodes = nodes.splice(start_index, end_index + 1); detach(html_tag_nodes[0]); detach(html_tag_nodes[html_tag_nodes.length - 1]); - return new HtmlTag(html_tag_nodes.slice(1, html_tag_nodes.length - 1)); + const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1); + for (const n of claimed_nodes) { + n.claim_order = nodes.claim_info.total_claimed; + nodes.claim_info.total_claimed += 1; + } + return new HtmlTag(claimed_nodes); } export function set_data(text, data) { @@ -544,7 +555,7 @@ export function custom_event(type: string, detail?: T, bubbles: boolean = } export function query_selector_all(selector: string, parent: HTMLElement = document.body) { - return Array.from(parent.querySelectorAll(selector)); + return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray; } export class HtmlTag { diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html index 9016a44869..be7a01ba4f 100644 --- a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html +++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html @@ -1,4 +1,4 @@ +Some Title -Some Title diff --git a/test/js/samples/hydrated-void-element/expected.js b/test/js/samples/hydrated-void-element/expected.js index e53d16d925..d30bc46cb0 100644 --- a/test/js/samples/hydrated-void-element/expected.js +++ b/test/js/samples/hydrated-void-element/expected.js @@ -35,7 +35,7 @@ function create_fragment(ctx) { this.h(); }, h() { - if (img.src !== (img_src_value = "donuts.jpg")) attr(img, "src", img_src_value); + if (img.src !== new URL(img_src_value = "donuts.jpg", location).href) attr(img, "src", img_src_value); attr(img, "alt", "donuts"); }, m(target, anchor) { @@ -61,4 +61,4 @@ class Component extends SvelteComponent { } } -export default Component; \ No newline at end of file +export default Component; diff --git a/test/js/samples/src-attribute-check/expected.js b/test/js/samples/src-attribute-check/expected.js index 93638edfb4..8a8a2d6fca 100644 --- a/test/js/samples/src-attribute-check/expected.js +++ b/test/js/samples/src-attribute-check/expected.js @@ -35,9 +35,9 @@ function create_fragment(ctx) { }, h() { attr(img0, "alt", "potato"); - if (img0.src !== (img0_src_value = /*url*/ ctx[0])) attr(img0, "src", img0_src_value); + if (img0.src !== new URL(img0_src_value = /*url*/ ctx[0], location).href) attr(img0, "src", img0_src_value); attr(img1, "alt", "potato"); - if (img1.src !== (img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"))) attr(img1, "src", img1_src_value); + if (img1.src !== new URL(img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"), location).href) attr(img1, "src", img1_src_value); }, m(target, anchor) { insert(target, img0, anchor); @@ -45,11 +45,11 @@ function create_fragment(ctx) { insert(target, img1, anchor); }, p(ctx, [dirty]) { - if (dirty & /*url*/ 1 && img0.src !== (img0_src_value = /*url*/ ctx[0])) { + if (dirty & /*url*/ 1 && img0.src !== new URL(img0_src_value = /*url*/ ctx[0], location).href) { attr(img0, "src", img0_src_value); } - if (dirty & /*slug*/ 2 && img1.src !== (img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"))) { + if (dirty & /*slug*/ 2 && img1.src !== new URL(img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"), location).href) { attr(img1, "src", img1_src_value); } }, @@ -82,4 +82,4 @@ class Component extends SvelteComponent { } } -export default Component; \ No newline at end of file +export default Component;