From a59bc99782dc86d8f6eacfb7e6dbd573291f712e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 7 Jul 2024 19:35:29 -0700 Subject: [PATCH] chore: tidy up (#12336) * chore: tidy up * changeset * reverse wrap_snippet argument order, for more compact output * more tidy-up --- .changeset/eleven-cows-judge.md | 5 +++ .../3-transform/client/visitors/template.js | 4 +-- .../src/internal/client/dom/blocks/await.js | 11 ++++--- .../internal/client/dom/blocks/css-props.js | 32 ++++++++----------- .../src/internal/client/dom/blocks/html.js | 7 ++-- .../src/internal/client/dom/blocks/snippet.js | 29 ++++++++--------- .../client/dom/blocks/svelte-element.js | 6 ---- packages/svelte/src/internal/server/dev.js | 2 +- .../_config.js | 1 - .../samples/invalid-html-ssr/_config.js | 2 +- 10 files changed, 47 insertions(+), 52 deletions(-) create mode 100644 .changeset/eleven-cows-judge.md diff --git a/.changeset/eleven-cows-judge.md b/.changeset/eleven-cows-judge.md new file mode 100644 index 0000000000..16efbf8678 --- /dev/null +++ b/.changeset/eleven-cows-judge.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: reverse parent/child order in invalid HTML warning 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 eb342613e4..594295c467 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 @@ -883,7 +883,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont b.init( 'children', context.state.options.dev - ? b.call('$.wrap_snippet', slot_fn, b.id(context.state.analysis.name)) + ? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn) : slot_fn ) ); @@ -2752,7 +2752,7 @@ export const template_visitors = { let snippet = b.arrow(args, body); if (context.state.options.dev) { - snippet = b.call('$.wrap_snippet', snippet, b.id(context.state.analysis.name)); + snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet); } const declaration = b.const(node.expression, snippet); diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js index 4c57f9b564..22cf238285 100644 --- a/packages/svelte/src/internal/client/dom/blocks/await.js +++ b/packages/svelte/src/internal/client/dom/blocks/await.js @@ -1,3 +1,4 @@ +/** @import { Effect, Source, TemplateNode } from '#client' */ import { is_promise, noop } from '../../../shared/utils.js'; import { current_component_context, @@ -20,10 +21,10 @@ const CATCH = 2; /** * @template V - * @param {Comment} anchor + * @param {TemplateNode} anchor * @param {(() => Promise)} get_input * @param {null | ((anchor: Node) => void)} pending_fn - * @param {null | ((anchor: Node, value: import('#client').Source) => void)} then_fn + * @param {null | ((anchor: Node, value: Source) => void)} then_fn * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn * @returns {void} */ @@ -37,13 +38,13 @@ export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) { /** @type {V | Promise} */ var input; - /** @type {import('#client').Effect | null} */ + /** @type {Effect | null} */ var pending_effect; - /** @type {import('#client').Effect | null} */ + /** @type {Effect | null} */ var then_effect; - /** @type {import('#client').Effect | null} */ + /** @type {Effect | null} */ var catch_effect; var input_source = runes diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js index b2534a4652..8cae0c6526 100644 --- a/packages/svelte/src/internal/client/dom/blocks/css-props.js +++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js @@ -1,5 +1,6 @@ +/** @import { TemplateNode } from '#client' */ import { hydrating, set_hydrate_nodes } from '../hydration.js'; -import { render_effect } from '../../reactivity/effects.js'; +import { render_effect, teardown } from '../../reactivity/effects.js'; /** * @param {HTMLDivElement | SVGGElement} element @@ -8,29 +9,24 @@ import { render_effect } from '../../reactivity/effects.js'; */ export function css_props(element, get_styles) { if (hydrating) { - set_hydrate_nodes( - /** @type {import('#client').TemplateNode[]} */ ([...element.childNodes]).slice(0, -1) - ); + set_hydrate_nodes(/** @type {TemplateNode[]} */ ([...element.childNodes]).slice(0, -1)); } render_effect(() => { - render_effect(() => { - var styles = get_styles(); + var styles = get_styles(); - for (var key in styles) { - var value = styles[key]; + for (var key in styles) { + var value = styles[key]; - if (value) { - element.style.setProperty(key, value); - } else { - element.style.removeProperty(key); - } + if (value) { + element.style.setProperty(key, value); + } else { + element.style.removeProperty(key); } - }); + } + }); - return () => { - // TODO use `teardown` instead of creating a nested effect, post-https://github.com/sveltejs/svelte/pull/11936 - element.remove(); - }; + teardown(() => { + element.remove(); }); } diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js index 55ead2600a..220e447948 100644 --- a/packages/svelte/src/internal/client/dom/blocks/html.js +++ b/packages/svelte/src/internal/client/dom/blocks/html.js @@ -1,3 +1,4 @@ +/** @import { Effect, TemplateNode } from '#client' */ import { block, branch, destroy_effect } from '../../reactivity/effects.js'; import { get_start, hydrate_nodes, hydrating } from '../hydration.js'; import { create_fragment_from_html } from '../reconciler.js'; @@ -13,7 +14,7 @@ import { assign_nodes } from '../template.js'; export function html(anchor, get_value, svg, mathml) { var value = ''; - /** @type {import('#client').Effect | null} */ + /** @type {Effect | null} */ var effect; block(() => { @@ -46,8 +47,8 @@ export function html(anchor, get_value, svg, mathml) { } assign_nodes( - /** @type {import('#client').TemplateNode} */ (node.firstChild), - /** @type {import('#client').TemplateNode} */ (node.lastChild) + /** @type {TemplateNode} */ (node.firstChild), + /** @type {TemplateNode} */ (node.lastChild) ); if (svg || mathml) { diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js index 5bdc4e6a6d..b962b7b84c 100644 --- a/packages/svelte/src/internal/client/dom/blocks/snippet.js +++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js @@ -1,3 +1,4 @@ +/** @import { Effect, TemplateNode } from '#client' */ import { add_snippet_symbol } from '../../../shared/validate.js'; import { EFFECT_TRANSPARENT } from '../../constants.js'; import { branch, block, destroy_effect } from '../../reactivity/effects.js'; @@ -7,8 +8,8 @@ import { } from '../../runtime.js'; /** - * @template {(node: import('#client').TemplateNode, ...args: any[]) => import('#client').Dom} SnippetFn - * @param {import('#client').TemplateNode} anchor + * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn + * @param {TemplateNode} anchor * @param {() => SnippetFn | null | undefined} get_snippet * @param {(() => any)[]} args * @returns {void} @@ -17,7 +18,7 @@ export function snippet(anchor, get_snippet, ...args) { /** @type {SnippetFn | null | undefined} */ var snippet; - /** @type {import('#client').Effect | null} */ + /** @type {Effect | null} */ var snippet_effect; block(() => { @@ -37,20 +38,18 @@ export function snippet(anchor, get_snippet, ...args) { /** * In development, wrap the snippet function so that it passes validation, and so that the * correct component context is set for ownership checks - * @param {(node: import('#client').TemplateNode, ...args: any[]) => import('#client').Dom} fn * @param {any} component + * @param {(node: TemplateNode, ...args: any[]) => void} fn */ -export function wrap_snippet(fn, component) { - return add_snippet_symbol( - (/** @type {import('#client').TemplateNode} */ node, /** @type {any[]} */ ...args) => { - var previous_component_function = dev_current_component_function; - set_dev_current_component_function(component); +export function wrap_snippet(component, fn) { + return add_snippet_symbol((/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => { + var previous_component_function = dev_current_component_function; + set_dev_current_component_function(component); - try { - return fn(node, ...args); - } finally { - set_dev_current_component_function(previous_component_function); - } + try { + return fn(node, ...args); + } finally { + set_dev_current_component_function(previous_component_function); } - ); + }); } diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index ba9e1e7f0f..b216ea506c 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -69,7 +69,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio pause_effect(effect, () => { effect = null; current_tag = null; - element?.remove(); }); } else if (next_tag === current_tag) { // same tag as is currently rendered — abort outro @@ -83,7 +82,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio if (next_tag && next_tag !== current_tag) { effect = branch(() => { - const prev_element = element; element = hydrating ? /** @type {Element} */ (element) : ns @@ -103,10 +101,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio }; } - if (prev_element && !hydrating) { - prev_element.remove(); - } - if (render_fn) { // If hydrating, use the existing ssr comment as the anchor so that the // inner open and close methods can pick up the existing nodes correctly diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js index 601668e0ad..870f9aa9d0 100644 --- a/packages/svelte/src/internal/server/dev.js +++ b/packages/svelte/src/internal/server/dev.js @@ -38,7 +38,7 @@ function stringify(element) { */ function print_error(payload, parent, child) { var message = - `${stringify(child)} cannot contain ${stringify(parent)}\n\n` + + `${stringify(parent)} cannot contain ${stringify(child)}\n\n` + 'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'; if ((seen ??= new Set()).has(message)) return; diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js index b71b056434..06e71cae27 100644 --- a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js @@ -15,7 +15,6 @@ export default test({ assert.equal(window.getComputedStyle(p2).color, 'red'); const btn = target.querySelector('button'); - console.log(btn); btn?.click(); flushSync(); diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js index 26d6b495e7..bc32b669cd 100644 --- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js @@ -32,7 +32,7 @@ export default test({ if (variant === 'hydrate') { assert.equal( log[0], - '`

` (Component.svelte:1:0) cannot contain `

` (main.svelte:5:0)\n\n' + + '`

` (main.svelte:5:0) cannot contain `

` (Component.svelte:1:0)\n\n' + 'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.' ); }