From 19a35c62e1111a8c860dfd752d968cd00b8a7915 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Sat, 17 Aug 2024 15:53:01 +0100 Subject: [PATCH] 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 19beb7754e82dd40052499d8c253e1fe2bb69cf8. * name better * oops * revert * revert * revert --------- Co-authored-by: Conduitry --- .changeset/eighty-bugs-fetch.md | 5 +++++ .../svelte/src/internal/client/dom/blocks/each.js | 10 +++++----- .../internal/client/dom/blocks/svelte-element.js | 4 ++-- .../svelte/src/internal/client/dom/template.js | 10 +++++++--- .../src/internal/client/reactivity/effects.js | 14 ++++++++------ .../src/internal/client/reactivity/types.d.ts | 8 ++------ packages/svelte/src/internal/client/render.js | 4 ++-- packages/svelte/src/internal/client/runtime.js | 2 +- 8 files changed, 32 insertions(+), 25 deletions(-) create mode 100644 .changeset/eighty-bugs-fetch.md diff --git a/.changeset/eighty-bugs-fetch.md b/.changeset/eighty-bugs-fetch.md new file mode 100644 index 0000000000..35bde6a377 --- /dev/null +++ b/.changeset/eighty-bugs-fetch.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: inline start and end node properties into effect diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 5788154db2..cdc5ef1799 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/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)); diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index 755e44c9ac..f8edafa087 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/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); }); diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index 42b13ac584..767bb5bdd0 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/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; } diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js index cd9a9f9171..e0d97beaf2 100644 --- a/packages/svelte/src/internal/client/reactivity/effects.js +++ b/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; } diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts index 1e347c011f..0e5437709a 100644 --- a/packages/svelte/src/internal/client/reactivity/types.d.ts +++ b/packages/svelte/src/internal/client/reactivity/types.d.ts @@ -34,11 +34,6 @@ export interface Derived extends Value, 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 */ diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 044c09e310..4afd10a7dc 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/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) { diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index 4e2a2ee031..b1a52b0878 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/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);