Skip to content

Commit 70b47de

Browse files
Rich-HarrisRich-Harris
authored
chore: follow-up to #11197 (#11213)
* simplify * make each item first nodes explicit * remove a couple of var declarations
1 parent 4b59ef3 commit 70b47de

File tree

5 files changed

+42
-61
lines changed

5 files changed

+42
-61
lines changed

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
import { source, mutable_source, set } from '../../reactivity/sources.js';
2626
import { is_array, is_frozen } from '../../utils.js';
2727
import { INERT, STATE_SYMBOL } from '../../constants.js';
28+
import { push_template_node } from '../template.js';
2829

2930
/**
3031
* The row of a keyed each block that is currently updating. We track this
@@ -168,10 +169,11 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback
168169
break;
169170
}
170171

172+
var child_open = /** @type {Comment} */ (child_anchor);
171173
child_anchor = hydrate_anchor(child_anchor);
172174
var value = array[i];
173175
var key = get_key(value, i);
174-
item = create_item(child_anchor, prev, null, value, key, i, render_fn, flags);
176+
item = create_item(child_open, child_anchor, prev, null, value, key, i, render_fn, flags);
175177
state.items.set(key, item);
176178
child_anchor = /** @type {Comment} */ (child_anchor.nextSibling);
177179

@@ -278,8 +280,14 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
278280
item = items.get(key);
279281

280282
if (item === undefined) {
283+
var child_open = /** @type {Text} */ (push_template_node(empty()));
284+
var child_anchor = current ? current.o : anchor;
285+
286+
child_anchor.before(child_open);
287+
281288
prev = create_item(
282-
current ? get_first_child(current) : anchor,
289+
child_open,
290+
child_anchor,
283291
prev,
284292
prev.next,
285293
value,
@@ -312,7 +320,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
312320
if (matched.length < stashed.length) {
313321
// more efficient to move later items to the front
314322
var start = stashed[0];
315-
var local_anchor = get_first_child(start);
323+
var local_anchor = start.o;
316324
var j;
317325

318326
prev = start.prev;
@@ -341,7 +349,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
341349
} else {
342350
// more efficient to move earlier items to the back
343351
seen.delete(item);
344-
move(item, current ? get_first_child(current) : anchor);
352+
move(item, current ? current.o : anchor);
345353

346354
link(item.prev, item.next);
347355
link(item, prev.next);
@@ -402,20 +410,6 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
402410
}
403411
}
404412

405-
/**
406-
* @param {import('#client').EachItem} item
407-
* @returns {Text | Element | Comment}
408-
*/
409-
function get_first_child(item) {
410-
var current = item.e.dom;
411-
412-
if (is_array(current)) {
413-
return /** @type {Text | Element | Comment} */ (current[0]);
414-
}
415-
416-
return /** @type {Text | Element | Comment} */ (current);
417-
}
418-
419413
/**
420414
* @param {import('#client').EachItem} item
421415
* @param {any} value
@@ -437,6 +431,7 @@ function update_item(item, value, index, type) {
437431

438432
/**
439433
* @template V
434+
* @param {Comment | Text} open
440435
* @param {Node} anchor
441436
* @param {import('#client').EachItem | import('#client').EachState} prev
442437
* @param {import('#client').EachItem | null} next
@@ -447,7 +442,7 @@ function update_item(item, value, index, type) {
447442
* @param {number} flags
448443
* @returns {import('#client').EachItem}
449444
*/
450-
function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
445+
function create_item(open, anchor, prev, next, value, key, index, render_fn, flags) {
451446
var previous_each_item = current_each_item;
452447

453448
try {
@@ -465,6 +460,7 @@ function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
465460
a: null,
466461
// @ts-expect-error
467462
e: null,
463+
o: open,
468464
prev,
469465
next
470466
};
@@ -486,6 +482,8 @@ function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
486482
* @param {Text | Element | Comment} anchor
487483
*/
488484
function move(item, anchor) {
485+
anchor.before(item.o);
486+
489487
var dom = item.e.dom;
490488

491489
if (dom !== null) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function html_to_dom(target, effect, value, svg) {
7979
var child = /** @type {Text | Element | Comment} */ (node.firstChild);
8080
target.before(child);
8181
if (effect !== null) {
82-
push_template_node(effect, child);
82+
push_template_node(child, effect);
8383
}
8484
return child;
8585
}
@@ -95,7 +95,7 @@ function html_to_dom(target, effect, value, svg) {
9595
}
9696

9797
if (effect !== null) {
98-
push_template_node(effect, nodes);
98+
push_template_node(nodes, effect);
9999
}
100100

101101
return nodes;

‎packages/svelte/src/internal/client/dom/blocks/svelte-element.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export function element(anchor, get_tag, is_svg, render_fn) {
133133
swap_block_dom(parent_effect, prev_element, element);
134134
prev_element.remove();
135135
} else if (!hydrating) {
136-
push_template_node(parent_effect, element);
136+
push_template_node(element, parent_effect);
137137
}
138138
});
139139
}

‎packages/svelte/src/internal/client/dom/template.js‎

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,26 @@ import { effect } from '../reactivity/effects.js';
77
import { is_array } from '../utils.js';
88

99
/**
10-
* @param {import("#client").Effect} effect
1110
* @param {import("#client").TemplateNode | import("#client").TemplateNode[]} dom
11+
* @param {import("#client").Effect} effect
1212
*/
13-
export function push_template_node(effect, dom) {
13+
export function push_template_node(
14+
dom,
15+
effect = /** @type {import('#client').Effect} */ (current_effect)
16+
) {
1417
var current_dom = effect.dom;
1518
if (current_dom === null) {
1619
effect.dom = dom;
1720
} else {
1821
if (!is_array(current_dom)) {
1922
current_dom = effect.dom = [current_dom];
2023
}
21-
var anchor;
22-
// If we're working with an anchor, then remove it and put it at the end.
23-
if (current_dom[0].nodeType === 8) {
24-
anchor = current_dom.pop();
25-
}
24+
2625
if (is_array(dom)) {
2726
current_dom.push(...dom);
2827
} else {
2928
current_dom.push(dom);
3029
}
31-
if (anchor !== undefined) {
32-
current_dom.push(anchor);
33-
}
3430
}
3531
return dom;
3632
}
@@ -49,12 +45,8 @@ export function template(content, flags) {
4945
var node;
5046

5147
return () => {
52-
var effect = /** @type {import('#client').Effect} */ (current_effect);
5348
if (hydrating) {
54-
var hydration_content = push_template_node(
55-
effect,
56-
is_fragment ? hydrate_nodes : hydrate_nodes[0]
57-
);
49+
var hydration_content = push_template_node(is_fragment ? hydrate_nodes : hydrate_nodes[0]);
5850
return /** @type {Node} */ (hydration_content);
5951
}
6052

@@ -64,14 +56,11 @@ export function template(content, flags) {
6456
}
6557
var clone = use_import_node ? document.importNode(node, true) : clone_node(node, true);
6658

67-
if (is_fragment) {
68-
push_template_node(
69-
effect,
70-
/** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
71-
);
72-
} else {
73-
push_template_node(effect, /** @type {import('#client').TemplateNode} */ (clone));
74-
}
59+
push_template_node(
60+
is_fragment
61+
? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
62+
: /** @type {import('#client').TemplateNode} */ (clone)
63+
);
7564

7665
return clone;
7766
};
@@ -115,12 +104,8 @@ export function svg_template(content, flags) {
115104
var node;
116105

117106
return () => {
118-
var effect = /** @type {import('#client').Effect} */ (current_effect);
119107
if (hydrating) {
120-
var hydration_content = push_template_node(
121-
effect,
122-
is_fragment ? hydrate_nodes : hydrate_nodes[0]
123-
);
108+
var hydration_content = push_template_node(is_fragment ? hydrate_nodes : hydrate_nodes[0]);
124109
return /** @type {Node} */ (hydration_content);
125110
}
126111

@@ -139,14 +124,11 @@ export function svg_template(content, flags) {
139124

140125
var clone = clone_node(node, true);
141126

142-
if (is_fragment) {
143-
push_template_node(
144-
effect,
145-
/** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
146-
);
147-
} else {
148-
push_template_node(effect, /** @type {import('#client').TemplateNode} */ (clone));
149-
}
127+
push_template_node(
128+
is_fragment
129+
? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
130+
: /** @type {import('#client').TemplateNode} */ (clone)
131+
);
150132

151133
return clone;
152134
};
@@ -213,8 +195,7 @@ function run_scripts(node) {
213195
*/
214196
/*#__NO_SIDE_EFFECTS__*/
215197
export function text(anchor) {
216-
var effect = /** @type {import('#client').Effect} */ (current_effect);
217-
if (!hydrating) return push_template_node(effect, empty());
198+
if (!hydrating) return push_template_node(empty());
218199

219200
var node = hydrate_nodes[0];
220201

@@ -224,7 +205,7 @@ export function text(anchor) {
224205
anchor.before((node = empty()));
225206
}
226207

227-
return push_template_node(effect, node);
208+
return push_template_node(node);
228209
}
229210

230211
export const comment = template('<!>', TEMPLATE_FRAGMENT);

‎packages/svelte/src/internal/client/types.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export type EachItem = {
6767
i: number | Source<number>;
6868
/** key */
6969
k: unknown;
70+
/** anchor for items inserted before this */
71+
o: Comment | Text;
7072
prev: EachItem | EachState;
7173
next: EachItem | null;
7274
};

0 commit comments

Comments
 (0)