constructor() — svelte Function Reference

Architecture documentation for the constructor() function in boundary.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 4

Entity Profile

ClientRuntime→ Hydration→ constructor() — svelte Function Reference

Dependency Diagram

graph TD
  e4353d76_4179_4130_6f86_2b16446a2767["constructor()"]
  928abd29_a193_3303_bc6d_b7d6ce0b17ec["Boundary"]
  e4353d76_4179_4130_6f86_2b16446a2767 -->|defined in| 928abd29_a193_3303_bc6d_b7d6ce0b17ec
  4eea2345_5d26_6ea8_43e3_80ca7101b747["error()"]
  e4353d76_4179_4130_6f86_2b16446a2767 -->|calls| 4eea2345_5d26_6ea8_43e3_80ca7101b747
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block()"]
  e4353d76_4179_4130_6f86_2b16446a2767 -->|calls| 1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next()"]
  e4353d76_4179_4130_6f86_2b16446a2767 -->|calls| b31601aa_35ce_7827_5394_99fb97fa27d2
  faf0e92f_7626_2d66_f7f8_05458f022351["branch()"]
  e4353d76_4179_4130_6f86_2b16446a2767 -->|calls| faf0e92f_7626_2d66_f7f8_05458f022351
  style e4353d76_4179_4130_6f86_2b16446a2767 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/boundary.js lines 142–195

	constructor(node, props, children) {
		this.#anchor = node;
		this.#props = props;
		this.#children = children;

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

		this.is_pending = !!this.#props.pending;

		this.#effect = block(() => {
			/** @type {Effect} */ (active_effect).b = this;

			if (hydrating) {
				const comment = this.#hydrate_open;
				hydrate_next();

				const server_rendered_pending =
					/** @type {Comment} */ (comment).nodeType === COMMENT_NODE &&
					/** @type {Comment} */ (comment).data === HYDRATION_START_ELSE;

				if (server_rendered_pending) {
					this.#hydrate_pending_content();
				} else {
					this.#hydrate_resolved_content();

					if (this.#pending_count === 0) {
						this.is_pending = false;
					}
				}
			} else {
				var anchor = this.#get_anchor();

				try {
					this.#main_effect = branch(() => children(anchor));
				} catch (error) {
					this.error(error);
				}

				if (this.#pending_count > 0) {
					this.#show_pending_snippet();
				} else {
					this.is_pending = false;
				}
			}

			return () => {
				this.#pending_anchor?.remove();
			};
		}, flags);

		if (hydrating) {
			this.#anchor = hydrate_node;
		}
	}