asClassComponent() — svelte Function Reference

Architecture documentation for the asClassComponent() function in legacy-server.js from the svelte codebase.

Function javascript SharedInternal BitFlags calls 2

Entity Profile

SharedInternal→ BitFlags→ asClassComponent() — svelte Function Reference

Dependency Diagram

graph TD
  77ba3d36_8750_0e38_c5ae_8f0ae95c8ef1["asClassComponent()"]
  b5fce8f9_a98c_49f9_4b3b_91a4e206908c["legacy-server.js"]
  77ba3d36_8750_0e38_c5ae_8f0ae95c8ef1 -->|defined in| b5fce8f9_a98c_49f9_4b3b_91a4e206908c
  75ae9027_9abc_8e62_0404_f3531b219452["asClassComponent()"]
  77ba3d36_8750_0e38_c5ae_8f0ae95c8ef1 -->|calls| 75ae9027_9abc_8e62_0404_f3531b219452
  91da79a6_48be_3e67_5beb_aa47cf753c81["render()"]
  77ba3d36_8750_0e38_c5ae_8f0ae95c8ef1 -->|calls| 91da79a6_48be_3e67_5beb_aa47cf753c81
  style 77ba3d36_8750_0e38_c5ae_8f0ae95c8ef1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/legacy/legacy-server.js lines 26–85

export function asClassComponent(component) {
	const component_constructor = as_class_component(component);
	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; csp?: Csp }) => LegacyRenderResult & PromiseLike<LegacyRenderResult> } */
	const _render = (props, { context, csp } = {}) => {
		// @ts-expect-error the typings are off, but this will work if the component is compiled in SSR mode
		const result = render(component, { props, context, csp });

		const munged = Object.defineProperties(
			/** @type {LegacyRenderResult & PromiseLike<LegacyRenderResult>} */ ({}),
			{
				css: {
					value: { code: '', map: null }
				},
				head: {
					get: () => result.head
				},
				html: {
					get: () => result.body
				},
				then: {
					/**
					 * 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: LegacyRenderResult) => TResult1 } onfulfilled
					 * @param { (reason: unknown) => TResult2 } onrejected
					 */
					value: (onfulfilled, onrejected) => {
						if (!async_mode_flag) {
							const user_result = onfulfilled({
								css: munged.css,
								head: munged.head,
								html: munged.html
							});
							return Promise.resolve(user_result);
						}

						return result.then((result) => {
							return onfulfilled({
								css: munged.css,
								head: result.head,
								html: result.body,
								hashes: result.hashes
							});
						}, onrejected);
					}
				}
			}
		);

		return munged;
	};

	// @ts-expect-error this is present for SSR
	component_constructor.render = _render;

	// @ts-ignore
	return component_constructor;
}