svelte Architecture Docs
Home / File/ branches.js — svelte Source File

branches.js — svelte Source File

Architecture documentation for branches.js, a javascript file in the svelte codebase. 12 imports, 6 dependents.

File javascript ClientRuntime Hydration 12 imports 6 dependents 1 classes

Entity Profile

Dependency Diagram

graph LR
  ee9aaeee_d18b_8f23_1c50_ace68f975516["branches.js"]
  d8e42d9d_2e3c_635c_19d3_b946a4341c0f["batch.js"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> d8e42d9d_2e3c_635c_19d3_b946a4341c0f
  517c145b_769f_b163_6854_d8f2a4412e11["Batch"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 517c145b_769f_b163_6854_d8f2a4412e11
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  4ca1b5f2_087e_afec_72d9_534a30fbfe1f["branch"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 4ca1b5f2_087e_afec_72d9_534a30fbfe1f
  410f774f_2d1a_7114_fcba_b292ed7cae3a["destroy_effect"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 410f774f_2d1a_7114_fcba_b292ed7cae3a
  73cebc52_ca9e_1263_8a9a_afbc3e5f5b01["move_effect"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 73cebc52_ca9e_1263_8a9a_afbc3e5f5b01
  27507f0c_dcab_c3a5_2ce6_5e4b1ef9df3d["pause_effect"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 27507f0c_dcab_c3a5_2ce6_5e4b1ef9df3d
  9c654195_2948_bf49_8faa_cded59a1e3b9["resume_effect"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 9c654195_2948_bf49_8faa_cded59a1e3b9
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  9a9bbc27_46b6_021c_6d77_f736ed4b40f0["operations.js"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> 9a9bbc27_46b6_021c_6d77_f736ed4b40f0
  ec54e18a_a454_5d8c_9e00_7bc16e4f49c4["create_text"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> ec54e18a_a454_5d8c_9e00_7bc16e4f49c4
  c4c2548c_902e_185e_193f_a8d4a30d7f72["should_defer_append"]
  ee9aaeee_d18b_8f23_1c50_ace68f975516 --> c4c2548c_902e_185e_193f_a8d4a30d7f72
  277e61a1_318f_c1a6_cf40_f6e1a0f3aa2f["await.js"]
  277e61a1_318f_c1a6_cf40_f6e1a0f3aa2f --> ee9aaeee_d18b_8f23_1c50_ace68f975516
  35d60eb3_a123_b735_48e0_4fce90c205ae["if.js"]
  35d60eb3_a123_b735_48e0_4fce90c205ae --> ee9aaeee_d18b_8f23_1c50_ace68f975516
  style ee9aaeee_d18b_8f23_1c50_ace68f975516 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { Effect, TemplateNode } from '#client' */
import { Batch, current_batch } from '../../reactivity/batch.js';
import {
	branch,
	destroy_effect,
	move_effect,
	pause_effect,
	resume_effect
} from '../../reactivity/effects.js';
import { hydrate_node, hydrating } from '../hydration.js';
import { create_text, should_defer_append } from '../operations.js';

/**
 * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
 */

/**
 * @template Key
 */
export class BranchManager {
	/** @type {TemplateNode} */
	anchor;

	/** @type {Map<Batch, Key>} */
	#batches = new Map();

	/**
	 * Map of keys to effects that are currently rendered in the DOM.
	 * These effects are visible and actively part of the document tree.
	 * Example:
	 * ```
	 * {#if condition}
	 * 	foo
	 * {:else}
	 * 	bar
	 * {/if}
	 * ```
	 * Can result in the entries `true->Effect` and `false->Effect`
	 * @type {Map<Key, Effect>}
	 */
	#onscreen = new Map();

	/**
	 * Similar to #onscreen with respect to the keys, but contains branches that are not yet
	 * in the DOM, because their insertion is deferred.
	 * @type {Map<Key, Branch>}
	 */
	#offscreen = new Map();

	/**
	 * Keys of effects that are currently outroing
	 * @type {Set<Key>}
	 */
	#outroing = new Set();

	/**
	 * Whether to pause (i.e. outro) on change, or destroy immediately.
	 * This is necessary for `<svelte:element>`
	 */
	#transition = true;
// ... (168 more lines)

Domain

Subdomains

Classes

Dependencies

Imported By

Source

Frequently Asked Questions

What does branches.js do?
branches.js is a source file in the svelte codebase, written in javascript. It belongs to the ClientRuntime domain, Hydration subdomain.
What does branches.js depend on?
branches.js imports 12 module(s): Batch, batch.js, branch, create_text, destroy_effect, effects.js, hydration.js, move_effect, and 4 more.
What files import branches.js?
branches.js is imported by 6 file(s): await.js, if.js, key.js, snippet.js, svelte-component.js, svelte-element.js.
Where is branches.js in the architecture?
branches.js is located at packages/svelte/src/internal/client/dom/blocks/branches.js (domain: ClientRuntime, subdomain: Hydration, directory: packages/svelte/src/internal/client/dom/blocks).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free