diff --git a/packages/svelte/.gitignore b/packages/svelte/.gitignore index e4925570e5..8b3d7652a1 100644 --- a/packages/svelte/.gitignore +++ b/packages/svelte/.gitignore @@ -11,3 +11,5 @@ /motion.d.ts /store.d.ts /transition.d.ts + +/scripts/_bundle.js diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js index 21f33ab6f0..9ded247b2b 100644 --- a/packages/svelte/scripts/check-treeshakeability.js +++ b/packages/svelte/scripts/check-treeshakeability.js @@ -74,7 +74,7 @@ for (const key in pkg.exports) { } const client_main = path.resolve(pkg.exports['.'].browser); -const without_hydration = await bundle_code( +const bundle = await bundle_code( // Use all features which contain hydration code to ensure it's treeshakeable compile( ` @@ -109,15 +109,17 @@ const without_hydration = await bundle_code( ).js.code ); -if (!without_hydration.includes('current_hydration_fragment')) { +if (!bundle.includes('current_hydration_fragment')) { // eslint-disable-next-line no-console console.error(`✅ Hydration code treeshakeable`); } else { // eslint-disable-next-line no-console - console.error(without_hydration); + console.error(bundle); // eslint-disable-next-line no-console console.error(`❌ Hydration code not treeshakeable`); failed = true; + + fs.writeFileSync('scripts/_bundle.js', bundle); } // eslint-disable-next-line no-console diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index 8c35d98530..da1c04070e 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -41,9 +41,6 @@ export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn, hydrate_block_anchor(anchor_node); - /** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */ - let mismatch = false; - /** @type {null | import('#client').TemplateNode | Array} */ let consequent_dom = null; @@ -62,6 +59,9 @@ export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn, const if_effect = render_effect(() => { if (condition === (condition = !!condition_fn())) return; + /** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */ + let mismatch = false; + if (hydrating) { const comment_text = /** @type {Comment} */ (current_hydration_fragment?.[0])?.data; @@ -154,8 +154,6 @@ export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn, if_effect.f |= IS_ELSEIF; } - mismatch = false; // TODO not sure if we actually need this — belt and braces - if_effect.ondestroy = () => { // TODO make this unnecessary by linking the dom to the effect, // and removing automatically on teardown