chore: code-golf a bit (#10893)

pull/10894/head
Rich Harris 1 year ago committed by GitHub
parent dfd1819559
commit 1fc5f8b9c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -109,7 +109,7 @@ const bundle = await bundle_code(
).js.code ).js.code
); );
if (!bundle.includes('current_hydration_fragment')) { if (!bundle.includes('hydrate_nodes')) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(`✅ Hydration code treeshakeable`); console.error(`✅ Hydration code treeshakeable`);
} else { } else {

@ -15,27 +15,26 @@ export function css_props(anchor, is_html, props, component) {
hydrate_block_anchor(anchor); hydrate_block_anchor(anchor);
/** @type {HTMLElement | SVGElement} */ /** @type {HTMLElement | SVGElement} */
let tag; let element;
/** @type {Text | Comment} */ /** @type {Text | Comment} */
let component_anchor; let component_anchor;
if (hydrating) { if (hydrating) {
// Hydration: css props element is surrounded by a ssr comment ... // Hydration: css props element is surrounded by a ssr comment ...
tag = /** @type {HTMLElement | SVGElement} */ (hydrate_nodes[0]); element = /** @type {HTMLElement | SVGElement} */ (hydrate_nodes[0]);
// ... and the child(ren) of the css props element is also surround by a ssr comment // ... and the child(ren) of the css props element is also surround by a ssr comment
component_anchor = /** @type {Comment} */ (tag.firstChild); component_anchor = /** @type {Comment} */ (element.firstChild);
} else { } else {
if (is_html) { if (is_html) {
tag = document.createElement('div'); element = document.createElement('div');
tag.style.display = 'contents'; element.style.display = 'contents';
} else { } else {
tag = document.createElementNS(namespace_svg, 'g'); element = document.createElementNS(namespace_svg, 'g');
} }
anchor.before(tag); anchor.before(element);
component_anchor = empty(); component_anchor = element.appendChild(empty());
tag.appendChild(component_anchor);
} }
component(component_anchor); component(component_anchor);
@ -48,18 +47,18 @@ export function css_props(anchor, is_html, props, component) {
for (const key in current_props) { for (const key in current_props) {
if (!(key in next_props)) { if (!(key in next_props)) {
tag.style.removeProperty(key); element.style.removeProperty(key);
} }
} }
for (const key in next_props) { for (const key in next_props) {
tag.style.setProperty(key, next_props[key]); element.style.setProperty(key, next_props[key]);
} }
current_props = next_props; current_props = next_props;
}); });
effect.ondestroy = () => { effect.ondestroy = () => {
remove(tag); remove(element);
}; };
} }

@ -18,6 +18,8 @@ export function head(render_fn) {
update_hydrate_nodes(document.head.firstChild); update_hydrate_nodes(document.head.firstChild);
} }
var anchor = document.head.appendChild(empty());
try { try {
/** @type {import('#client').Dom | null} */ /** @type {import('#client').Dom | null} */
var dom = null; var dom = null;
@ -28,13 +30,7 @@ export function head(render_fn) {
head_effect.dom = dom = null; head_effect.dom = dom = null;
} }
let anchor = null; dom = render_fn(hydrating ? null : anchor) ?? null;
if (!hydrating) {
anchor = empty();
document.head.appendChild(anchor);
}
dom = render_fn(anchor) ?? null;
}); });
head_effect.ondestroy = () => { head_effect.ondestroy = () => {

@ -114,8 +114,7 @@ export function createRoot() {
* @returns {Exports} * @returns {Exports}
*/ */
export function mount(component, options) { export function mount(component, options) {
const anchor = empty(); const anchor = options.target.appendChild(empty());
options.target.appendChild(anchor);
// Don't flush previous effects to ensure order of outer effects stays consistent // Don't flush previous effects to ensure order of outer effects stays consistent
return flush_sync(() => _mount(component, { ...options, anchor }), false); return flush_sync(() => _mount(component, { ...options, anchor }), false);
} }
@ -148,28 +147,21 @@ export function hydrate(component, options) {
const nodes = update_hydrate_nodes(first_child, true); const nodes = update_hydrate_nodes(first_child, true);
set_hydrating(true); set_hydrating(true);
/** @type {null | Text} */ let hydrated = false;
let anchor = null;
if (nodes === null) {
anchor = empty();
container.appendChild(anchor);
}
let finished_hydrating = false;
try { try {
// Don't flush previous effects to ensure order of outer effects stays consistent // Don't flush previous effects to ensure order of outer effects stays consistent
return flush_sync(() => { return flush_sync(() => {
const anchor = nodes === null ? container.appendChild(empty()) : null;
const instance = _mount(component, { ...options, anchor }); const instance = _mount(component, { ...options, anchor });
// flush_sync will run this callback and then synchronously run any pending effects, // flush_sync will run this callback and then synchronously run any pending effects,
// which don't belong to the hydration phase anymore - therefore reset it here // which don't belong to the hydration phase anymore - therefore reset it here
set_hydrating(false); set_hydrating(false);
finished_hydrating = true; hydrated = true;
return instance; return instance;
}, false); }, false);
} catch (error) { } catch (error) {
if (!finished_hydrating && options.recover !== false && nodes !== null) { if (!hydrated && options.recover !== false && nodes !== null) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error( console.error(
'ERR_SVELTE_HYDRATION_MISMATCH' + 'ERR_SVELTE_HYDRATION_MISMATCH' +

Loading…
Cancel
Save