chore: tidy up (#12336)

* chore: tidy up

* changeset

* reverse wrap_snippet argument order, for more compact output

* more tidy-up
pull/12339/head
Rich Harris 1 year ago committed by GitHub
parent daac5fca13
commit a59bc99782
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
fix: reverse parent/child order in invalid HTML warning

@ -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);

@ -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<V>)} get_input
* @param {null | ((anchor: Node) => void)} pending_fn
* @param {null | ((anchor: Node, value: import('#client').Source<V>) => void)} then_fn
* @param {null | ((anchor: Node, value: Source<V>) => 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<V>} */
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

@ -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();
});
}

@ -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) {

@ -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);
}
);
});
}

@ -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

@ -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;

@ -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();

@ -32,7 +32,7 @@ export default test({
if (variant === 'hydrate') {
assert.equal(
log[0],
'`<h1>` (Component.svelte:1:0) cannot contain `<p>` (main.svelte:5:0)\n\n' +
'`<p>` (main.svelte:5:0) cannot contain `<h1>` (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.'
);
}

Loading…
Cancel
Save