svelte Architecture Docs
Home / Class/ Boundary Class — svelte Architecture

Boundary Class — svelte Architecture

Architecture documentation for the Boundary class in boundary.js from the svelte codebase.

Class javascript ClientRuntime

Entity Profile

Dependency Diagram

graph TD
  928abd29_a193_3303_bc6d_b7d6ce0b17ec["Boundary"]
  6d3d606a_fb7a_54af_1ece_f1eb12f174d1["boundary.js"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|defined in| 6d3d606a_fb7a_54af_1ece_f1eb12f174d1
  e4353d76_4179_4130_6f86_2b16446a2767["constructor()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| e4353d76_4179_4130_6f86_2b16446a2767
  faf0e92f_7626_2d66_f7f8_05458f022351["branch()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| faf0e92f_7626_2d66_f7f8_05458f022351
  1faf4fc8_402e_578f_4e4f_7e097c01b149["pending()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 1faf4fc8_402e_578f_4e4f_7e097c01b149
  3ad34920_b768_1ad9_167f_f0326f25878c["anchor()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 3ad34920_b768_1ad9_167f_f0326f25878c
  0236aae6_dc9d_5d2d_7cf3_97ace8d7d068["defer_effect()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 0236aae6_dc9d_5d2d_7cf3_97ace8d7d068
  2ba0836c_3ec9_0e68_f2ba_cf1bb3adc645["is_rendered()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 2ba0836c_3ec9_0e68_f2ba_cf1bb3adc645
  eda2a5e7_3416_168e_40ff_8ceab3099f6c["has_pending_snippet()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| eda2a5e7_3416_168e_40ff_8ceab3099f6c
  db550759_ee3b_160c_8afa_d1aa9fae478c["fn()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| db550759_ee3b_160c_8afa_d1aa9fae478c
  a50e548b_3d25_da25_5809_14d318b33cb2["d()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| a50e548b_3d25_da25_5809_14d318b33cb2
  95fd9978_b635_37dc_dfee_13c687d48cd6["update_pending_count()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 95fd9978_b635_37dc_dfee_13c687d48cd6
  ecf3ff80_c7be_01cc_bbc7_3315415e7fe1["get_effect_pending()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| ecf3ff80_c7be_01cc_bbc7_3315415e7fe1
  4eea2345_5d26_6ea8_43e3_80ca7101b747["error()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec -->|method| 4eea2345_5d26_6ea8_43e3_80ca7101b747

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/boundary.js lines 68–485

export class Boundary {
	/** @type {Boundary | null} */
	parent;

	is_pending = false;

	/** @type {TemplateNode} */
	#anchor;

	/** @type {TemplateNode | null} */
	#hydrate_open = hydrating ? hydrate_node : null;

	/** @type {BoundaryProps} */
	#props;

	/** @type {((anchor: Node) => void)} */
	#children;

	/** @type {Effect} */
	#effect;

	/** @type {Effect | null} */
	#main_effect = null;

	/** @type {Effect | null} */
	#pending_effect = null;

	/** @type {Effect | null} */
	#failed_effect = null;

	/** @type {DocumentFragment | null} */
	#offscreen_fragment = null;

	/** @type {TemplateNode | null} */
	#pending_anchor = null;

	#local_pending_count = 0;
	#pending_count = 0;
	#pending_count_update_queued = false;

	#is_creating_fallback = false;

	/** @type {Set<Effect>} */
	#dirty_effects = new Set();

	/** @type {Set<Effect>} */
	#maybe_dirty_effects = new Set();

	/**
	 * A source containing the number of pending async deriveds/expressions.
	 * Only created if `$effect.pending()` is used inside the boundary,
	 * otherwise updating the source results in needless `Batch.ensure()`
	 * calls followed by no-op flushes
	 * @type {Source<number> | null}
	 */
	#effect_pending = null;

	#effect_pending_subscriber = createSubscriber(() => {
		this.#effect_pending = source(this.#local_pending_count);

		if (DEV) {
			tag(this.#effect_pending, '$effect.pending()');
		}

		return () => {
			this.#effect_pending = null;
		};
	});

	/**
	 * @param {TemplateNode} node
	 * @param {BoundaryProps} props
	 * @param {((anchor: Node) => void)} children
	 */
	constructor(node, props, children) {
		this.#anchor = node;
		this.#props = props;
		this.#children = children;

		this.parent = /** @type {Effect} */ (active_effect).b;

Domain

Defined In

Source

Frequently Asked Questions

What is the Boundary class?
Boundary is a class in the svelte codebase, defined in packages/svelte/src/internal/client/dom/blocks/boundary.js.
Where is Boundary defined?
Boundary is defined in packages/svelte/src/internal/client/dom/blocks/boundary.js at line 68.

Analyze Your Own Codebase

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

Try Supermodel Free