render() — astro Function Reference

Architecture documentation for the render() function in runtime.ts from the astro codebase.

Function typescript ContentCollections DataLoaders calls 1 called by 2

Entity Profile

ContentCollections→ DataLoaders→ render() — astro Function Reference

Dependency Diagram

graph TD
  cff854b7_cf64_aa23_950e_b772af18e460["render()"]
  73d13646_8e80_972f_3adc_f28448b64e4d["runtime.ts"]
  cff854b7_cf64_aa23_950e_b772af18e460 -->|defined in| 73d13646_8e80_972f_3adc_f28448b64e4d
  502cda50_ba7d_1037_6310_4ddccd2d2939["createGetEntry()"]
  502cda50_ba7d_1037_6310_4ddccd2d2939 -->|calls| cff854b7_cf64_aa23_950e_b772af18e460
  e4e078f6_edaa_075a_12cc_026f71d3745c["renderEntry()"]
  e4e078f6_edaa_075a_12cc_026f71d3745c -->|calls| cff854b7_cf64_aa23_950e_b772af18e460
  ca5e4b84_fb0f_6f0e_9ebf_491449865144["isPropagatedAssetsModule()"]
  cff854b7_cf64_aa23_950e_b772af18e460 -->|calls| ca5e4b84_fb0f_6f0e_9ebf_491449865144
  style cff854b7_cf64_aa23_950e_b772af18e460 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/content/runtime.ts lines 565–657

async function render({
	collection,
	id,
	renderEntryImport,
}: {
	collection: string;
	id: string;
	renderEntryImport?: LazyImport;
}): Promise<RenderResult> {
	const UnexpectedRenderError = new AstroError({
		...AstroErrorData.UnknownContentCollectionError,
		message: `Unexpected error while rendering ${String(collection)} → ${String(id)}.`,
	});

	if (typeof renderEntryImport !== 'function') throw UnexpectedRenderError;

	const baseMod = await renderEntryImport();
	if (baseMod == null || typeof baseMod !== 'object') throw UnexpectedRenderError;
	const { default: defaultMod } = baseMod;

	if (isPropagatedAssetsModule(defaultMod)) {
		const { collectedStyles, collectedLinks, collectedScripts, getMod } = defaultMod;
		if (typeof getMod !== 'function') throw UnexpectedRenderError;
		const propagationMod = await getMod();
		if (propagationMod == null || typeof propagationMod !== 'object') throw UnexpectedRenderError;

		const Content = createComponent({
			factory(result, baseProps, slots) {
				let styles = '',
					links = '',
					scripts = '';
				if (Array.isArray(collectedStyles)) {
					styles = collectedStyles
						.map((style: any) => {
							return renderUniqueStylesheet(result, {
								type: 'inline',
								content: style,
							});
						})
						.join('');
				}
				if (Array.isArray(collectedLinks)) {
					links = collectedLinks
						.map((link: any) => {
							return renderUniqueStylesheet(result, {
								type: 'external',
								src: isRemotePath(link) ? link : prependForwardSlash(link),
							});
						})
						.join('');
				}
				if (Array.isArray(collectedScripts)) {
					scripts = collectedScripts.map((script: any) => renderScriptElement(script)).join('');
				}

				let props = baseProps;
				// Auto-apply MDX components export
				if (id.endsWith('mdx')) {
					props = {
						components: propagationMod.components ?? {},
						...baseProps,
					};
				}

				return createHeadAndContent(
					unescapeHTML(styles + links + scripts) as any,
					renderTemplate`${renderComponent(
						result,
						'Content',
						propagationMod.Content,
						props,
						slots,
					)}`,
				);
			},
			propagation: 'self',
		});

		return {
			Content,
			headings: propagationMod.getHeadings?.() ?? [],