svelte Architecture Docs
Home / Class/ Renderer Class — svelte Architecture

Renderer Class — svelte Architecture

Architecture documentation for the Renderer class in renderer.js from the svelte codebase.

Class javascript ServerRuntime

Entity Profile

Dependency Diagram

graph TD
  ce85d155_9f13_f67c_9824_407161a6c2c7["Renderer"]
  25166256_49ce_81f2_0877_fdbc689bed91["renderer.js"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|defined in| 25166256_49ce_81f2_0877_fdbc689bed91
  9f6e4df7_38f2_ea2b_3e19_a22b6ae505a8["constructor()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 9f6e4df7_38f2_ea2b_3e19_a22b6ae505a8
  040542fe_bbb9_45cf_f9c5_44e9f53ccbd4["head()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 040542fe_bbb9_45cf_f9c5_44e9f53ccbd4
  c8327fc4_5901_5ec6_79a7_354dcf79dcf3["async_block()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| c8327fc4_5901_5ec6_79a7_354dcf79dcf3
  36d65af2_2c05_9004_f272_3dc9a0dd6a97["async()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 36d65af2_2c05_9004_f272_3dc9a0dd6a97
  d7a0f423_f1a7_8db9_80a9_89a423021e62["run()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| d7a0f423_f1a7_8db9_80a9_89a423021e62
  824e25e7_5ea3_99e4_a036_0d6dd6b6a59a["child_block()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 824e25e7_5ea3_99e4_a036_0d6dd6b6a59a
  c5be8ca5_baec_c99c_4e0b_ffd4fd83f2a8["child()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| c5be8ca5_baec_c99c_4e0b_ffd4fd83f2a8
  37596f8a_06e9_abf9_49d1_df75cd4a3a2d["component()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 37596f8a_06e9_abf9_49d1_df75cd4a3a2d
  58754f2d_0937_0d60_6522_7f5ccf389d8f["select()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 58754f2d_0937_0d60_6522_7f5ccf389d8f
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d["option()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 1a677ead_a9d4_0a77_cc80_ba51cda0e64d
  ba594e9e_df42_b3bb_2cd9_f91387ffad49["title()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| ba594e9e_df42_b3bb_2cd9_f91387ffad49
  6f1eae94_35bd_e5bc_d962_31f3ce608951["push()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 6f1eae94_35bd_e5bc_d962_31f3ce608951
  4edb8ea2_640a_d62b_0b77_657776a00de7["on_destroy()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7 -->|method| 4edb8ea2_640a_d62b_0b77_657776a00de7

Relationship Graph

Source Code

packages/svelte/src/internal/server/renderer.js lines 32–721

export class Renderer {
	/**
	 * The contents of the renderer.
	 * @type {RendererItem[]}
	 */
	#out = [];

	/**
	 * Any `onDestroy` callbacks registered during execution of this renderer.
	 * @type {(() => void)[] | undefined}
	 */
	#on_destroy = undefined;

	/**
	 * Whether this renderer is a component body.
	 * @type {boolean}
	 */
	#is_component_body = false;

	/**
	 * The type of string content that this renderer is accumulating.
	 * @type {RendererType}
	 */
	type;

	/** @type {Renderer | undefined} */
	#parent;

	/**
	 * Asynchronous work associated with this renderer
	 * @type {Promise<void> | undefined}
	 */
	promise = undefined;

	/**
	 * State which is associated with the content tree as a whole.
	 * It will be re-exposed, uncopied, on all children.
	 * @type {SSRState}
	 * @readonly
	 */
	global;

	/**
	 * State that is local to the branch it is declared in.
	 * It will be shallow-copied to all children.
	 *
	 * @type {{ select_value: string | undefined }}
	 */
	local;

	/**
	 * @param {SSRState} global
	 * @param {Renderer | undefined} [parent]
	 */
	constructor(global, parent) {
		this.#parent = parent;

		this.global = global;
		this.local = parent ? { ...parent.local } : { select_value: undefined };
		this.type = parent ? parent.type : 'body';
	}

	/**
	 * @param {(renderer: Renderer) => void} fn
	 */
	head(fn) {
		const head = new Renderer(this.global, this);
		head.type = 'head';

		this.#out.push(head);
		head.child(fn);
	}

	/**
	 * @param {Array<Promise<void>>} blockers
	 * @param {(renderer: Renderer) => void} fn
	 */
	async_block(blockers, fn) {
		this.#out.push(BLOCK_OPEN);
		this.async(blockers, fn);
		this.#out.push(BLOCK_CLOSE);

Domain

Defined In

Source

Frequently Asked Questions

What is the Renderer class?
Renderer is a class in the svelte codebase, defined in packages/svelte/src/internal/server/renderer.js.
Where is Renderer defined?
Renderer is defined in packages/svelte/src/internal/server/renderer.js at line 32.

Analyze Your Own Codebase

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

Try Supermodel Free