From a761d887f64cff5557a7d708abb146a719161a35 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 5 Jul 2024 14:55:42 -0400 Subject: [PATCH] hmm --- .../3-transform/client/visitors/template.js | 1 + .../3-transform/server/transform-server.js | 31 ++++++++++--------- .../src/compiler/phases/3-transform/utils.js | 3 +- .../src/internal/client/dom/blocks/each.js | 2 +- .../src/internal/client/dom/blocks/if.js | 2 +- .../src/internal/client/dom/blocks/snippet.js | 2 ++ .../src/internal/client/dom/hydration.js | 6 ++++ .../src/internal/client/dom/operations.js | 6 ++-- packages/svelte/src/internal/client/index.js | 2 +- 9 files changed, 32 insertions(+), 23 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 1f94dbd78d..51d37cc49c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1851,6 +1851,7 @@ export const template_visitors = { ); } else { context.state.init.push( + b.stmt(b.call('$.next')), b.stmt( (node.expression.type === 'CallExpression' ? b.call : b.maybe_call)( snippet_function, diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js index d34b25cba1..795ee4dca4 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js @@ -1187,9 +1187,9 @@ const template_visitors = { return /** @type {import('estree').Expression} */ (context.visit(arg)); }); - if (node.metadata.dynamic && !context.state.skip_hydration_boundaries) { - context.state.template.push(block_open); - } + // if (!context.state.skip_hydration_boundaries) { + context.state.template.push(b.literal('')); + // } context.state.template.push( b.stmt( @@ -1201,9 +1201,9 @@ const template_visitors = { ) ); - if (!context.state.skip_hydration_boundaries) { - context.state.template.push(block_close); - } + // if (!context.state.skip_hydration_boundaries) { + context.state.template.push(b.literal('')); + // } }, ClassDirective() { throw new Error('Node should have been handled elsewhere'); @@ -1368,11 +1368,12 @@ const template_visitors = { each.push(b.let(node.index, index)); } - each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN)))); + // TODO we shouldn't need these + each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal('')))); each.push(.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body); - each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE)))); + each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal('')))); const for_loop = b.for( b.let(index, b.literal(0)), @@ -1382,14 +1383,14 @@ const template_visitors = { ); if (node.fallback) { - const open = b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN))); + const open = b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(''))); const fallback = /** @type {import('estree').BlockStatement} */ ( context.visit(node.fallback) ); fallback.body.unshift( - b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE))) + b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(''))) ); state.template.push( @@ -1398,10 +1399,10 @@ const template_visitors = { b.block([open, for_loop]), fallback ), - block_close + b.literal('') ); } else { - state.template.push(block_open, for_loop, block_open); + state.template.push(b.literal(''), for_loop, b.literal('')); } }, IfBlock(node, context) { @@ -1416,14 +1417,14 @@ const template_visitors = { : b.block([]); consequent.body.unshift( - b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN))) + b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(''))) ); alternate.body.unshift( - b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE))) + b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(''))) ); - context.state.template.push(b.if(test, consequent, alternate), block_close); + context.state.template.push(b.if(test, consequent, alternate), b.literal('')); }, AwaitBlock(node, context) { context.state.template.push( diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js index e1767620de..8df026d4ae 100644 --- a/packages/svelte/src/compiler/phases/3-transform/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/utils.js @@ -292,8 +292,7 @@ export function clean_nodes( const is_text = trimmed.length === 1 && first.type === 'Text'; - const is_anchored = - (is_dynamic_text || is_text) && (parent.type === 'Fragment' || parent.type === 'SnippetBlock'); + const is_anchored = (is_dynamic_text || is_text) && parent.type === 'Fragment'; return { hoisted, trimmed, is_standalone, is_anchored }; } diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index c1ae3c77d8..fc978bdf1c 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -182,7 +182,7 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback for (var i = 0; i < length; i++) { if ( child_anchor.nodeType !== 8 || - /** @type {Comment} */ (child_anchor).data !== HYDRATION_START + /** @type {Comment} */ (child_anchor).data !== '#each-item' ) { // If `nodes` is null, then that means that the server rendered fewer items than what // expected, so break out and continue appending non-hydrated items diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index 74c3ef2c52..88be3744d3 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -41,7 +41,7 @@ export function if_block( let mismatch = false; if (hydrating) { - const is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE; + const is_else = /** @type {Comment} */ (anchor).data === '#if!'; if (condition === is_else) { // Hydration mismatch: remove everything inside the anchor and start fresh. diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js index 6295c30ba5..46470fcff9 100644 --- a/packages/svelte/src/internal/client/dom/blocks/snippet.js +++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js @@ -15,6 +15,7 @@ import { hydrate_next, hydrate_node, hydrating } from '../hydration.js'; * @returns {void} */ export function snippet(anchor, get_snippet, ...args) { + // console.log('snippet start', { anchor }); if (hydrating) { hydrate_next(); } @@ -40,6 +41,7 @@ export function snippet(anchor, get_snippet, ...args) { if (hydrating) { anchor = hydrate_node; + // console.log('snippet end', { anchor }); } } diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js index 08666ab921..971750a0da 100644 --- a/packages/svelte/src/internal/client/dom/hydration.js +++ b/packages/svelte/src/internal/client/dom/hydration.js @@ -30,3 +30,9 @@ export function reset(node) { hydrate_node = node; } } + +export function next() { + if (hydrating) { + hydrate_next(); + } +} diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js index d4822d03bb..c9f15d081f 100644 --- a/packages/svelte/src/internal/client/dom/operations.js +++ b/packages/svelte/src/internal/client/dom/operations.js @@ -132,9 +132,9 @@ export function sibling(node, is_text = false) { var type = next_sibling.nodeType; - if (type === 8 && /** @type {Comment} */ (next_sibling).data === HYDRATION_ANCHOR) { - return sibling(next_sibling, is_text); - } + // if (type === 8 && /** @type {Comment} */ (next_sibling).data === HYDRATION_ANCHOR) { + // return sibling(next_sibling, is_text); + // } // if a sibling {expression} is empty during SSR, there might be no // text node to hydrate — we must therefore create one diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 4b983824ea..342708a067 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -62,7 +62,7 @@ export { bind_focused } from './dom/elements/bindings/universal.js'; export { bind_window_scroll, bind_window_size } from './dom/elements/bindings/window.js'; -export { reset } from './dom/hydration.js'; +export { next, reset } from './dom/hydration.js'; export { once, preventDefault,