renderFrameworkComponent() — astro Function Reference

Architecture documentation for the renderFrameworkComponent() function in component.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 3 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ renderFrameworkComponent() — astro Function Reference

Dependency Diagram

graph TD
  d89f42fe_2e3e_d985_e361_b90a7e5694d4["renderFrameworkComponent()"]
  8fc97f1b_c914_c155_013d_cbd729fb6b4f["component.ts"]
  d89f42fe_2e3e_d985_e361_b90a7e5694d4 -->|defined in| 8fc97f1b_c914_c155_013d_cbd729fb6b4f
  94f21ea8_f0e7_2f4c_ee40_699f26c9ede0["renderComponent()"]
  94f21ea8_f0e7_2f4c_ee40_699f26c9ede0 -->|calls| d89f42fe_2e3e_d985_e361_b90a7e5694d4
  64aeb985_8afb_76f4_f354_2c178e4d2784["guessRenderers()"]
  d89f42fe_2e3e_d985_e361_b90a7e5694d4 -->|calls| 64aeb985_8afb_76f4_f354_2c178e4d2784
  6ea1c71a_443e_0e61_4bbb_058280eae6a2["sanitizeElementName()"]
  d89f42fe_2e3e_d985_e361_b90a7e5694d4 -->|calls| 6ea1c71a_443e_0e61_4bbb_058280eae6a2
  5e97c5b7_3db9_1a82_a0e7_6dd93cbbba75["removeStaticAstroSlot()"]
  d89f42fe_2e3e_d985_e361_b90a7e5694d4 -->|calls| 5e97c5b7_3db9_1a82_a0e7_6dd93cbbba75
  style d89f42fe_2e3e_d985_e361_b90a7e5694d4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/render/component.ts lines 74–399

async function renderFrameworkComponent(
	result: SSRResult,
	displayName: string,
	Component: unknown,
	_props: Record<string | number, any>,
	slots: any = {},
): Promise<RenderInstance> {
	if (!Component && 'client:only' in _props === false) {
		throw new Error(
			`Unable to render ${displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`,
		);
	}

	const { renderers, clientDirectives } = result;
	const metadata: AstroComponentMetadata = {
		astroStaticSlot: true,
		displayName,
	};

	const { hydration, isPage, props, propsWithoutTransitionAttributes } = extractDirectives(
		_props,
		clientDirectives,
	);
	let html = '';
	let attrs: Record<string, string> | undefined = undefined;

	if (hydration) {
		metadata.hydrate = hydration.directive as AstroComponentMetadata['hydrate'];
		metadata.hydrateArgs = hydration.value;
		metadata.componentExport = hydration.componentExport;
		metadata.componentUrl = hydration.componentUrl;
	}

	const probableRendererNames = guessRenderers(metadata.componentUrl);
	const validRenderers = renderers.filter((r) => r.name !== 'astro:jsx');
	const { children, slotInstructions } = await renderSlots(result, slots);

	// Call the renderers `check` hook to see if any claim this component.
	let renderer: SSRLoadedRenderer | undefined;
	if (metadata.hydrate !== 'only') {
		// If this component ran through `__astro_tag_component__`, we already know
		// which renderer to match to and can skip the usual `check` calls.
		// This will help us throw most relevant error message for modules with runtime errors
		let isTagged = false;
		try {
			isTagged = Component && (Component as any)[Renderer];
		} catch {
			// Accessing `Component[Renderer]` may throw if `Component` is a Proxy that doesn't
			// return the actual read-only value. In this case, ignore.
		}
		if (isTagged) {
			const rendererName = (Component as any)[Renderer];
			renderer = renderers.find(({ name }) => name === rendererName);
		}

		if (!renderer) {
			let error;
			for (const r of renderers) {
				try {
					if (await r.ssr.check.call({ result }, Component, props, children)) {
						renderer = r;
						break;
					}
				} catch (e) {
					error ??= e;
				}
			}

			// If no renderer is found and there is an error, throw that error because
			// it is likely a problem with the component code.
			if (!renderer && error) {
				throw error;
			}
		}

		if (!renderer && typeof HTMLElement === 'function' && componentIsHTMLElement(Component)) {
			const output = await renderHTMLElement(
				result,
				Component as typeof HTMLElement,
				_props,
				slots,