Skip to content

Commit c683484

Browse files
Rich-HarrisRich-Harris
authored
chore: tidy up some hydration code (#10944)
* tidy up * tidy up
1 parent f8fcbf0 commit c683484

File tree

6 files changed

+37
-56
lines changed

6 files changed

+37
-56
lines changed

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

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ export function set_current_each_item(item) {
4343
* @param {number} flags
4444
* @param {() => V[]} get_collection
4545
* @param {null | ((item: V) => string)} get_key
46-
* @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
47-
* @param {null | ((anchor: Node | null) => void)} fallback_fn
46+
* @param {(anchor: Node, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
47+
* @param {null | ((anchor: Node) => void)} fallback_fn
4848
* @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn
4949
* @returns {void}
5050
*/
@@ -126,7 +126,7 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
126126
}
127127

128128
child_anchor = hydrate_anchor(child_anchor);
129-
b_items[i] = create_item(array[i], keys?.[i], i, render_fn, flags);
129+
b_items[i] = create_item(child_anchor, array[i], keys?.[i], i, render_fn, flags);
130130
child_anchor = /** @type {Comment} */ (child_anchor.nextSibling);
131131
}
132132

@@ -153,7 +153,7 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
153153
resume_effect(fallback);
154154
} else {
155155
fallback = render_effect(() => {
156-
var dom = fallback_fn(hydrating ? null : anchor);
156+
var dom = fallback_fn(anchor);
157157

158158
return () => {
159159
if (dom !== undefined) {
@@ -193,8 +193,8 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
193193
* @param {number} flags
194194
* @param {() => V[]} get_collection
195195
* @param {null | ((item: V) => string)} get_key
196-
* @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
197-
* @param {null | ((anchor: Node | null) => void)} [fallback_fn]
196+
* @param {(anchor: Node, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
197+
* @param {null | ((anchor: Node) => void)} [fallback_fn]
198198
* @returns {void}
199199
*/
200200
export function each_keyed(anchor, flags, get_collection, get_key, render_fn, fallback_fn = null) {
@@ -206,8 +206,8 @@ export function each_keyed(anchor, flags, get_collection, get_key, render_fn, fa
206206
* @param {Element | Comment} anchor
207207
* @param {number} flags
208208
* @param {() => V[]} get_collection
209-
* @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
210-
* @param {null | ((anchor: Node | null) => void)} [fallback_fn]
209+
* @param {(anchor: Node, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
210+
* @param {null | ((anchor: Node) => void)} [fallback_fn]
211211
* @returns {void}
212212
*/
213213
export function each_indexed(anchor, flags, get_collection, render_fn, fallback_fn = null) {
@@ -219,7 +219,7 @@ export function each_indexed(anchor, flags, get_collection, render_fn, fallback_
219219
* @param {Array<V>} array
220220
* @param {import('#client').EachState} state
221221
* @param {Element | Comment | Text} anchor
222-
* @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
222+
* @param {(anchor: Node, item: V, index: number | import('#client').Source<number>) => void} render_fn
223223
* @param {number} flags
224224
* @returns {void}
225225
*/
@@ -249,9 +249,8 @@ function reconcile_indexed_array(array, state, anchor, render_fn, flags) {
249249
// add items
250250
for (; i < b; i += 1) {
251251
value = array[i];
252-
item = create_item(value, null, i, render_fn, flags);
252+
item = create_item(anchor, value, null, i, render_fn, flags);
253253
b_items[i] = item;
254-
insert_item(item, anchor);
255254
}
256255

257256
state.items = b_items;
@@ -276,7 +275,7 @@ function reconcile_indexed_array(array, state, anchor, render_fn, flags) {
276275
* @param {Array<V>} array
277276
* @param {import('#client').EachState} state
278277
* @param {Element | Comment | Text} anchor
279-
* @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
278+
* @param {(anchor: Node, item: V, index: number | import('#client').Source<number>) => void} render_fn
280279
* @param {number} flags
281280
* @param {any[]} keys
282281
* @returns {void}
@@ -327,9 +326,8 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
327326
if (start === a) {
328327
// add only
329328
while (start < b) {
330-
item = create_item(array[start], keys[start], start, render_fn, flags);
329+
item = create_item(anchor, array[start], keys[start], start, render_fn, flags);
331330
b_items[start++] = item;
332-
insert_item(item, anchor);
333331
}
334332
} else if (start === b) {
335333
// remove only
@@ -398,20 +396,21 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
398396
// working from the back, insert new or moved items
399397
while (b-- > start) {
400398
index = sources[b - start];
401-
var insert = index === NEW_ITEM;
399+
var should_insert = index === NEW_ITEM;
402400

403-
if (insert) {
404-
item = create_item(array[b], keys[b], b, render_fn, flags);
401+
if (should_insert) {
402+
if (last_item !== undefined) anchor = get_first_child(last_item);
403+
item = create_item(anchor, array[b], keys[b], b, render_fn, flags);
405404
} else {
406405
item = b_items[b];
407406
if (should_update) {
408407
update_item(item, array[b], b, flags);
409408
}
410-
}
411409

412-
if (insert || (moved && index !== LIS_ITEM)) {
413-
last_sibling = last_item === undefined ? anchor : get_first_child(last_item);
414-
anchor = insert_item(item, last_sibling);
410+
if (moved && index !== LIS_ITEM) {
411+
if (last_item !== undefined) anchor = get_first_child(last_item);
412+
insert(/** @type {import('#client').Dom} */ (item.e.dom), anchor);
413+
}
415414
}
416415

417416
last_item = b_items[b] = item;
@@ -510,16 +509,6 @@ function mark_lis(a) {
510509
}
511510
}
512511

513-
/**
514-
* @param {import('#client').EachItem} item
515-
* @param {Text | Element | Comment} anchor
516-
* @returns {Text | Element | Comment}
517-
*/
518-
function insert_item(item, anchor) {
519-
var current = /** @type {import('#client').Dom} */ (item.e.dom);
520-
return insert(current, anchor);
521-
}
522-
523512
/**
524513
* @param {import('#client').EachItem} item
525514
* @returns {Text | Element | Comment}
@@ -555,14 +544,15 @@ function update_item(item, value, index, type) {
555544

556545
/**
557546
* @template V
547+
* @param {Node} anchor
558548
* @param {V} value
559549
* @param {unknown} key
560550
* @param {number} index
561-
* @param {(anchor: null, item: V, index: number | import('#client').Value<number>) => void} render_fn
551+
* @param {(anchor: Node, item: V, index: number | import('#client').Value<number>) => void} render_fn
562552
* @param {number} flags
563553
* @returns {import('#client').EachItem}
564554
*/
565-
function create_item(value, key, index, render_fn, flags) {
555+
function create_item(anchor, value, key, index, render_fn, flags) {
566556
var each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0;
567557

568558
/** @type {import('#client').EachItem} */
@@ -589,7 +579,7 @@ function create_item(value, key, index, render_fn, flags) {
589579
current_each_item = item;
590580

591581
item.e = render_effect(() => {
592-
var dom = render_fn(null, item.v, item.i);
582+
var dom = render_fn(anchor, item.v, item.i);
593583

594584
return () => {
595585
if (dom !== undefined) {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { render_effect } from '../../reactivity/effects.js';
44
import { remove } from '../reconciler.js';
55

66
/**
7-
* @param {(anchor: Node | null) => import('#client').Dom | void} render_fn
7+
* @param {(anchor: Node) => import('#client').Dom | void} render_fn
88
* @returns {void}
99
*/
1010
export function head(render_fn) {
@@ -36,7 +36,7 @@ export function head(render_fn) {
3636
head_effect.dom = dom = null;
3737
}
3838

39-
dom = render_fn(hydrating ? null : anchor) ?? null;
39+
dom = render_fn(anchor) ?? null;
4040
});
4141

4242
head_effect.ondestroy = () => {
@@ -46,7 +46,7 @@ export function head(render_fn) {
4646
};
4747
} finally {
4848
if (was_hydrating) {
49-
set_hydrate_nodes(previous_hydrate_nodes);
49+
set_hydrate_nodes(/** @type {import('#client').TemplateNode[]} */ (previous_hydrate_nodes));
5050
}
5151
}
5252
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,9 @@ export function set_hydrating(value) {
1717
*/
1818
export let hydrate_nodes = /** @type {any} */ (null);
1919

20-
/**
21-
* @param {null | import('#client').TemplateNode[]} nodes
22-
* @returns {void}
23-
*/
20+
/** @param {import('#client').TemplateNode[]} nodes */
2421
export function set_hydrate_nodes(nodes) {
25-
hydrate_nodes = /** @type {import('#client').TemplateNode[]} */ (nodes);
22+
hydrate_nodes = nodes;
2623
}
2724

2825
/**

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export function create_fragment_with_script_from_html(html) {
3030
/**
3131
* @param {import('#client').Dom} current
3232
* @param {Text | Element | Comment} sibling
33-
* @returns {Text | Element | Comment}
3433
*/
3534
export function insert(current, sibling) {
3635
if (!current) return sibling;
@@ -39,12 +38,9 @@ export function insert(current, sibling) {
3938
for (var i = 0; i < current.length; i++) {
4039
sibling.before(/** @type {Node} */ (current[i]));
4140
}
42-
43-
return current[0];
41+
} else {
42+
sibling.before(/** @type {Node} */ (current));
4443
}
45-
46-
sibling.before(/** @type {Node} */ (current));
47-
return /** @type {Text | Element | Comment} */ (current);
4844
}
4945

5046
/**

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export function comment() {
145145
* and insert the elements into the dom (in client mode).
146146
* @param {import('#client').Dom} dom
147147
* @param {boolean} is_fragment
148-
* @param {null | Text | Comment | Element} anchor
148+
* @param {Text | Comment | Element} anchor
149149
* @returns {import('#client').Dom}
150150
*/
151151
function close_template(dom, is_fragment, anchor) {
@@ -158,10 +158,8 @@ function close_template(dom, is_fragment, anchor) {
158158
current = /** @type {import('#client').Dom} */ ([.../** @type {Node} */ (dom).childNodes]);
159159
}
160160

161-
if (anchor !== null) {
162-
// TODO as with `open_template — why is this sometimes null and sometimes not?
163-
insert(current, anchor);
164-
}
161+
// TODO ideally we'd do `anchor.before(dom)`, but that fails because `dom` can be an array of nodes in the SVG case
162+
insert(current, anchor);
165163
}
166164

167165
/** @type {import('#client').Effect} */ (current_effect).dom = current;
@@ -170,15 +168,15 @@ function close_template(dom, is_fragment, anchor) {
170168
}
171169

172170
/**
173-
* @param {null | Text | Comment | Element} anchor
171+
* @param {Text | Comment | Element} anchor
174172
* @param {Element | Text} dom
175173
*/
176174
export function close(anchor, dom) {
177175
return close_template(dom, false, anchor);
178176
}
179177

180178
/**
181-
* @param {null | Text | Comment | Element} anchor
179+
* @param {Text | Comment | Element} anchor
182180
* @param {Element | Text} dom
183181
*/
184182
export function close_frag(anchor, dom) {

‎packages/svelte/src/internal/client/render.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export function hydrate(component, options) {
184184
* @param {import('../../main/public.js').ComponentType<import('../../main/public.js').SvelteComponent<Props, Events>>} Component
185185
* @param {{
186186
* target: Document | Element | ShadowRoot;
187-
* anchor: null | Node;
187+
* anchor: Node;
188188
* props?: Props;
189189
* events?: { [Property in keyof Events]: (e: Events[Property]) => any };
190190
* context?: Map<any, any>;

0 commit comments

Comments
 (0)