Home / Function/ render() — svelte Function Reference

render() — svelte Function Reference

Architecture documentation for the render() function in renderer.js from the svelte codebase.

Entity Profile

Dependency Diagram

graph TD
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274["render()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7["Renderer"]
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 -->|defined in| ce85d155_9f13_f67c_9824_407161a6c2c7
  91da79a6_48be_3e67_5beb_aa47cf753c81["render()"]
  91da79a6_48be_3e67_5beb_aa47cf753c81 -->|calls| ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274
  37596f8a_06e9_abf9_49d1_df75cd4a3a2d["component()"]
  37596f8a_06e9_abf9_49d1_df75cd4a3a2d -->|calls| ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274
  91da79a6_48be_3e67_5beb_aa47cf753c81["render()"]
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 -->|calls| 91da79a6_48be_3e67_5beb_aa47cf753c81
  eda2c9d4_ed45_87f9_a50b_04caf82c0540["init_render_context()"]
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 -->|calls| eda2c9d4_ed45_87f9_a50b_04caf82c0540
  eb2eff5c_d275_f195_beec_ce46ba591862["with_render_context()"]
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 -->|calls| eb2eff5c_d275_f195_beec_ce46ba591862
  3ac11615_66ca_aa9d_0f54_870b340007d5["html_deprecated()"]
  ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 -->|calls| 3ac11615_66ca_aa9d_0f54_870b340007d5
  style ec1e5dc3_f338_7d6e_42e9_7a43e9c5c274 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/server/renderer.js lines 400–468

	static render(component, options = {}) {
		/** @type {AccumulatedContent | undefined} */
		let sync;
		/** @type {Promise<AccumulatedContent & { hashes: { script: Sha256Source[] } }> | undefined} */
		let async;

		const result = /** @type {RenderOutput} */ ({});
		// making these properties non-enumerable so that console.logging
		// doesn't trigger a sync render
		Object.defineProperties(result, {
			html: {
				get: () => {
					return (sync ??= Renderer.#render(component, options)).body;
				}
			},
			head: {
				get: () => {
					return (sync ??= Renderer.#render(component, options)).head;
				}
			},
			body: {
				get: () => {
					return (sync ??= Renderer.#render(component, options)).body;
				}
			},
			hashes: {
				value: {
					script: ''
				}
			},
			then: {
				value:
					/**
					 * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
					 *
					 * @template TResult1
					 * @template [TResult2=never]
					 * @param { (value: SyncRenderOutput) => TResult1 } onfulfilled
					 * @param { (reason: unknown) => TResult2 } onrejected
					 */
					(onfulfilled, onrejected) => {
						if (!async_mode_flag) {
							const result = (sync ??= Renderer.#render(component, options));
							const user_result = onfulfilled({
								head: result.head,
								body: result.body,
								html: result.body,
								hashes: { script: [] }
							});
							return Promise.resolve(user_result);
						}
						async ??= init_render_context().then(() =>
							with_render_context(() => Renderer.#render_async(component, options))
						);
						return async.then((result) => {
							Object.defineProperty(result, 'html', {
								// eslint-disable-next-line getter-return
								get: () => {
									e.html_deprecated();
								}
							});
							return onfulfilled(/** @type {SyncRenderOutput} */ (result));
						}, onrejected);
					}
			}
		});

		return result;
	}

Domain

Subdomains

Frequently Asked Questions

What does render() do?
render() is a function in the svelte codebase, defined in packages/svelte/src/internal/server/renderer.js.
Where is render() defined?
render() is defined in packages/svelte/src/internal/server/renderer.js at line 400.
What does render() call?
render() calls 4 function(s): html_deprecated, init_render_context, render, with_render_context.
What calls render()?
render() is called by 2 function(s): component, render.

Analyze Your Own Codebase

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

Try Supermodel Free