chore: inline start and end node properties into effect (#12878)

* chore: inline start and end node properties into effect

* Revert "chore: set `binding.kind` before analysis (#12843)"

This reverts commit 19beb77.

* name better

* oops

* revert

* revert

* revert

---------

Co-authored-by: Conduitry <[email protected]>

Author: trueadm

.changeset/eighty-bugs-fetch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: inline start and end node properties into effect

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

@@ -1,4 +1,4 @@
-/** @import { EachItem, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { EachItem, EachState, Effect, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -288,7 +288,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 		item = items.get(key);
 
 		if (item === undefined) {
-			var child_anchor = current ? /** @type {EffectNodes} */ (current.e.nodes).start : anchor;
+			var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
 
 			prev = create_item(
 				child_anchor,
@@ -513,10 +513,10 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, fl
  * @param {Text | Element | Comment} anchor
  */
 function move(item, next, anchor) {
-	var end = item.next ? /** @type {EffectNodes} */ (item.next.e.nodes).start : anchor;
+	var end = item.next ? /** @type {TemplateNode} */ (item.next.e.nodes_start) : anchor;
 
-	var dest = next ? /** @type {EffectNodes} */ (next.e.nodes).start : anchor;
-	var node = /** @type {EffectNodes} */ (item.e.nodes).start;
+	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
+	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
 
 	while (node !== end) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));

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

@@ -1,4 +1,4 @@
-/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
 import {
 	hydrate_next,
@@ -138,7 +138,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				}
 
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
-				/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = element;
+				/** @type {Effect} */ (current_effect).nodes_end = element;
 
 				anchor.before(element);
 			});

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

@@ -1,4 +1,4 @@
-/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
@@ -11,7 +11,11 @@ import { queue_micro_task } from './task.js';
  * @param {TemplateNode | null} end
  */
 export function assign_nodes(start, end) {
-	/** @type {Effect} */ (current_effect).nodes ??= { start, end };
+	var effect = /** @type {Effect} */ (current_effect);
+	if (effect.nodes_start === null) {
+		effect.nodes_start = start;
+		effect.nodes_end = end;
+	}
 }
 
 /**
@@ -255,7 +259,7 @@ export function comment() {
  */
 export function append(anchor, dom) {
 	if (hydrating) {
-		/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
+		/** @type {Effect} */ (current_effect).nodes_end = hydrate_node;
 		hydrate_next();
 		return;
 	}

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

@@ -95,7 +95,8 @@ function create_effect(type, fn, sync, push = true) {
 	var effect = {
 		ctx: current_component_context,
 		deps: null,
-		nodes: null,
+		nodes_start: null,
+		nodes_end: null,
 		f: type | DIRTY,
 		first: null,
 		fn,
@@ -135,7 +136,7 @@ function create_effect(type, fn, sync, push = true) {
 		sync &&
 		effect.deps === null &&
 		effect.first === null &&
-		effect.nodes === null &&
+		effect.nodes_start === null &&
 		effect.teardown === null;
 
 	if (!inert && !is_root && push) {
@@ -355,10 +356,10 @@ export function execute_effect_teardown(effect) {
 export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
-	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes !== null) {
+	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
 		/** @type {TemplateNode | null} */
-		var node = effect.nodes.start;
-		var end = effect.nodes.end;
+		var node = effect.nodes_start;
+		var end = effect.nodes_end;
 
 		while (node !== null) {
 			/** @type {TemplateNode | null} */
@@ -400,7 +401,8 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.deps =
 		effect.parent =
 		effect.fn =
-		effect.nodes =
+		effect.nodes_start =
+		effect.nodes_end =
 			null;
 }
 

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

@@ -34,11 +34,6 @@ export interface Derived<V = unknown> extends Value<V>, Reaction {
 	deriveds: null | Derived[];
 }
 
-export interface EffectNodes {
-	start: TemplateNode;
-	end: null | TemplateNode;
-}
-
 export interface Effect extends Reaction {
 	parent: Effect | null;
 	/**
@@ -47,7 +42,8 @@ export interface Effect extends Reaction {
 	 * block is reconciled. In the case of a single text/element node,
 	 * `start` and `end` will be the same.
 	 */
-	nodes: null | EffectNodes;
+	nodes_start: null | TemplateNode;
+	nodes_end: null | TemplateNode;
 	/** The associated component context */
 	ctx: null | ComponentContext;
 	/** The effect function */

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

@@ -1,4 +1,4 @@
-/** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { ComponentContext, Effect, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
 import {
@@ -246,7 +246,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 			should_intro = true;
 
 			if (hydrating) {
-				/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
+				/** @type {Effect} */ (current_effect).nodes_end = hydrate_node;
 			}
 
 			if (context) {

packages/svelte/src/internal/client/runtime.js

@@ -497,7 +497,7 @@ function flush_queued_effects(effects) {
 			// don't know if we need to keep them until they are executed. Doing the check
 			// here (rather than in `update_effect`) allows us to skip the work for
 			// immediate effects.
-			if (effect.deps === null && effect.first === null && effect.nodes === null) {
+			if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
 				if (effect.teardown === null) {
 					// remove this effect from the graph
 					unlink_effect(effect);