rename child_frag to first_child

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1202,7 +1202,7 @@ function create_block(parent, name, nodes, context) {
 		} else {
 			/** @type {(is_text: boolean) => import('estree').Expression} */
 			const expression = (is_text) =>
-				is_text ? b.call('$.child_frag', id, b.true) : b.call('$.child_frag', id);
+				is_text ? b.call('$.first_child', id, b.true) : b.call('$.first_child', id);
 
 			process_children(trimmed, expression, false, { ...context, state });
 

packages/svelte/src/internal/client/dom/operations.js

@@ -134,18 +134,19 @@ export function child(node) {
 }
 
 /**
- * @template {Node | Node[]} N
- * @param {N} node
+ * @param {DocumentFragment | import('#client').TemplateNode[]} fragment
  * @param {boolean} is_text
  * @returns {Node | null}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function child_frag(node, is_text) {
+export function first_child(fragment, is_text) {
 	if (!hydrating) {
-		return first_child_get.call(/** @type {Node} */ (node));
+		// when not hydrating, `fragment` is a `DocumentFragment` (the result of calling `open_frag`)
+		return first_child_get.call(/** @type {DocumentFragment} */ (fragment));
 	}
 
-	const first_node = /** @type {import('#client').TemplateNode[]} */ (node)[0];
+	// when we _are_ hydrating, `fragment` is an array of nodes
+	const first_node = /** @type {import('#client').TemplateNode[]} */ (fragment)[0];
 
 	// if an {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one

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

@@ -87,6 +87,7 @@ export function svg_template_with_script(svg, return_fragment) {
  * @param {() => Node} [template_element_fn]
  * @returns {Element | DocumentFragment | Node[]}
  */
+/*#__NO_SIDE_EFFECTS__*/
 function open_template(is_fragment, use_clone_node, anchor, template_element_fn) {
 	if (hydrating) {
 		if (anchor !== null) {
@@ -105,11 +106,10 @@ function open_template(is_fragment, use_clone_node, anchor, template_element_fn)
  * @param {null | Text | Comment | Element} anchor
  * @param {() => Node} template_element_fn
  * @param {boolean} [use_clone_node]
- * @returns {Element | DocumentFragment | Node[]}
+ * @returns {Element}
  */
-/*#__NO_SIDE_EFFECTS__*/
 export function open(anchor, template_element_fn, use_clone_node = true) {
-	return open_template(false, use_clone_node, anchor, template_element_fn);
+	return /** @type {Element} */ (open_template(false, use_clone_node, anchor, template_element_fn));
 }
 
 /**
@@ -118,7 +118,6 @@ export function open(anchor, template_element_fn, use_clone_node = true) {
  * @param {boolean} [use_clone_node]
  * @returns {Element | DocumentFragment | Node[]}
  */
-/*#__NO_SIDE_EFFECTS__*/
 export function open_frag(anchor, template_element_fn, use_clone_node = true) {
 	return open_template(true, use_clone_node, anchor, template_element_fn);
 }

packages/svelte/src/internal/index.js

@@ -64,7 +64,7 @@ export { proxy, unstate } from './client/proxy.js';
 export { create_custom_element } from './client/dom/elements/custom-element.js';
 export {
 	child,
-	child_frag,
+	first_child,
 	sibling,
 	$window as window,
 	$document as document

packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js

@@ -9,9 +9,9 @@ export default function Bind_this($$anchor, $$props) {
 
 	/* Init */
 	var fragment = $.comment($$anchor);
-	var node = $.child_frag(fragment);
+	var node = $.first_child(fragment);
 
 	$.bind_this(Foo(node, {}), ($$value) => foo = $$value, () => foo);
 	$.close_frag($$anchor, fragment);
 	$.pop();
-}
+}

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -13,7 +13,7 @@ export default function Main($$anchor, $$props) {
 	let y = () => 'test';
 	/* Init */
 	var fragment = $.open_frag($$anchor, frag, false);
-	var div = $.child_frag(fragment);
+	var div = $.first_child(fragment);
 	var svg = $.sibling($.sibling(div, true));
 	var custom_element = $.sibling($.sibling(svg, true));
 	var div_1 = $.sibling($.sibling(custom_element, true));

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -9,7 +9,7 @@ export default function Each_string_template($$anchor, $$props) {
 
 	/* Init */
 	var fragment = $.comment($$anchor);
-	var node = $.child_frag(fragment);
+	var node = $.first_child(fragment);
 
 	$.each_indexed(
 		node,

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -15,7 +15,7 @@ export default function Function_prop_no_getter($$anchor, $$props) {
 	const plusOne = (num) => num + 1;
 	/* Init */
 	var fragment = $.comment($$anchor);
-	var node = $.child_frag(fragment);
+	var node = $.first_child(fragment);
 
 	Button(node, {
 		onmousedown: () => $.set(count, $.get(count) + 1),

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js

@@ -19,7 +19,7 @@ export default function State_proxy_literal($$anchor, $$props) {
 	let tpl = $.source(``);
 	/* Init */
 	var fragment = $.open_frag($$anchor, frag);
-	var input = $.child_frag(fragment);
+	var input = $.first_child(fragment);
 
 	$.remove_input_attr_defaults(input);
 

packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js

@@ -9,9 +9,9 @@ export default function Svelte_element($$anchor, $$props) {
 	let tag = $.prop($$props, "tag", 3, 'hr');
 	/* Init */
 	var fragment = $.comment($$anchor);
-	var node = $.child_frag(fragment);
+	var node = $.first_child(fragment);
 
 	$.element(node, tag, false);
 	$.close_frag($$anchor, fragment);
 	$.pop();
-}
+}