Skip to content

Commit 5f61b08

Browse files
Rich-HarrisRich-Harris
committed
simplify
1 parent 6e1a331 commit 5f61b08

File tree

2 files changed

+69
-70
lines changed

2 files changed

+69
-70
lines changed

‎packages/svelte/src/internal/client/dom/blocks/html.js‎

Lines changed: 52 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @import { Effect, TemplateNode } from '#client' */
22
import { FILENAME, HYDRATION_ERROR } from '../../../../constants.js';
3-
import { branch, destroy_effect, template_effect } from '../../reactivity/effects.js';
3+
import { remove_effect_dom, template_effect } from '../../reactivity/effects.js';
44
import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
55
import { create_fragment_from_html } from '../reconciler.js';
66
import { assign_nodes } from '../template.js';
@@ -9,6 +9,7 @@ import { hash, sanitize_location } from '../../../../utils.js';
99
import { DEV } from 'esm-env';
1010
import { dev_current_component_function } from '../../context.js';
1111
import { get_first_child, get_next_sibling } from '../operations.js';
12+
import { active_effect } from '../../runtime.js';
1213

1314
/**
1415
* @param {Element} element
@@ -44,77 +45,71 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
4445

4546
var value = '';
4647

47-
/** @type {Effect | undefined} */
48-
var effect;
49-
5048
template_effect(() => {
49+
var effect = /** @type {Effect} */ (active_effect);
50+
5151
if (value === (value = get_value() ?? '')) {
5252
if (hydrating) hydrate_next();
5353
return;
5454
}
5555

56-
if (effect !== undefined) {
57-
destroy_effect(effect);
58-
effect = undefined;
56+
if (effect.nodes_start !== null) {
57+
remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
58+
effect.nodes_start = effect.nodes_end = null;
5959
}
6060

6161
if (value === '') return;
6262

63-
effect = branch(() => {
64-
if (hydrating) {
65-
// We're deliberately not trying to repair mismatches between server and client,
66-
// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
67-
var hash = /** @type {Comment} */ (hydrate_node).data;
68-
var next = hydrate_next();
69-
var last = next;
70-
71-
while (
72-
next !== null &&
73-
(next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')
74-
) {
75-
last = next;
76-
next = /** @type {TemplateNode} */ (get_next_sibling(next));
77-
}
78-
79-
if (next === null) {
80-
w.hydration_mismatch();
81-
throw HYDRATION_ERROR;
82-
}
83-
84-
if (DEV && !skip_warning) {
85-
check_hash(/** @type {Element} */ (next.parentNode), hash, value);
86-
}
87-
88-
assign_nodes(hydrate_node, last);
89-
anchor = set_hydrate_node(next);
90-
return;
91-
}
63+
if (hydrating) {
64+
// We're deliberately not trying to repair mismatches between server and client,
65+
// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
66+
var hash = /** @type {Comment} */ (hydrate_node).data;
67+
var next = hydrate_next();
68+
var last = next;
9269

93-
var html = value + '';
94-
if (svg) html = `<svg>${html}</svg>`;
95-
else if (mathml) html = `<math>${html}</math>`;
70+
while (next !== null && (next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')) {
71+
last = next;
72+
next = /** @type {TemplateNode} */ (get_next_sibling(next));
73+
}
9674

97-
// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
98-
// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
99-
/** @type {DocumentFragment | Element} */
100-
var node = create_fragment_from_html(html);
75+
if (next === null) {
76+
w.hydration_mismatch();
77+
throw HYDRATION_ERROR;
78+
}
10179

102-
if (svg || mathml) {
103-
node = /** @type {Element} */ (get_first_child(node));
80+
if (DEV && !skip_warning) {
81+
check_hash(/** @type {Element} */ (next.parentNode), hash, value);
10482
}
10583

106-
assign_nodes(
107-
/** @type {TemplateNode} */ (get_first_child(node)),
108-
/** @type {TemplateNode} */ (node.lastChild)
109-
);
110-
111-
if (svg || mathml) {
112-
while (get_first_child(node)) {
113-
anchor.before(/** @type {Node} */ (get_first_child(node)));
114-
}
115-
} else {
116-
anchor.before(node);
84+
assign_nodes(hydrate_node, last);
85+
anchor = set_hydrate_node(next);
86+
return;
87+
}
88+
89+
var html = value + '';
90+
if (svg) html = `<svg>${html}</svg>`;
91+
else if (mathml) html = `<math>${html}</math>`;
92+
93+
// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
94+
// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
95+
/** @type {DocumentFragment | Element} */
96+
var node = create_fragment_from_html(html);
97+
98+
if (svg || mathml) {
99+
node = /** @type {Element} */ (get_first_child(node));
100+
}
101+
102+
assign_nodes(
103+
/** @type {TemplateNode} */ (get_first_child(node)),
104+
/** @type {TemplateNode} */ (node.lastChild)
105+
);
106+
107+
if (svg || mathml) {
108+
while (get_first_child(node)) {
109+
anchor.before(/** @type {Node} */ (get_first_child(node)));
117110
}
118-
});
111+
} else {
112+
anchor.before(node);
113+
}
119114
});
120115
}

‎packages/svelte/src/internal/client/reactivity/effects.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ function create_template_effect(fn, deriveds) {
388388
});
389389
}
390390

391-
block(effect, TEMPLATE_EFFECT);
391+
create_effect(RENDER_EFFECT | TEMPLATE_EFFECT, effect, true);
392392
}
393393

394394
/**
@@ -467,18 +467,7 @@ export function destroy_effect(effect, remove_dom = true) {
467467
var removed = false;
468468

469469
if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
470-
/** @type {TemplateNode | null} */
471-
var node = effect.nodes_start;
472-
var end = effect.nodes_end;
473-
474-
while (node !== null) {
475-
/** @type {TemplateNode | null} */
476-
var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
477-
478-
node.remove();
479-
node = next;
480-
}
481-
470+
remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
482471
removed = true;
483472
}
484473

@@ -520,6 +509,21 @@ export function destroy_effect(effect, remove_dom = true) {
520509
null;
521510
}
522511

512+
/**
513+
*
514+
* @param {TemplateNode | null} node
515+
* @param {TemplateNode} end
516+
*/
517+
export function remove_effect_dom(node, end) {
518+
while (node !== null) {
519+
/** @type {TemplateNode | null} */
520+
var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
521+
522+
node.remove();
523+
node = next;
524+
}
525+
}
526+
523527
/**
524528
* Detach an effect from the effect tree, freeing up memory and
525529
* reducing the amount of work that happens on subsequent traversals

0 commit comments

Comments
 (0)