renderJSXVNode() — astro Function Reference

Architecture documentation for the renderJSXVNode() function in jsx.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 2 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ renderJSXVNode() — astro Function Reference

Dependency Diagram

graph TD
  a27b3bdd_5259_4e6f_425c_e15df53ed960["renderJSXVNode()"]
  f6e39b43_58a2_4ca6_30bf_a01e3e031e49["jsx.ts"]
  a27b3bdd_5259_4e6f_425c_e15df53ed960 -->|defined in| f6e39b43_58a2_4ca6_30bf_a01e3e031e49
  f8b74354_3072_bf56_a8c7_17096550d5c3["renderJSX()"]
  f8b74354_3072_bf56_a8c7_17096550d5c3 -->|calls| a27b3bdd_5259_4e6f_425c_e15df53ed960
  f8b74354_3072_bf56_a8c7_17096550d5c3["renderJSX()"]
  a27b3bdd_5259_4e6f_425c_e15df53ed960 -->|calls| f8b74354_3072_bf56_a8c7_17096550d5c3
  f285e264_99e9_5260_2d17_5969017d03f8["renderElement()"]
  a27b3bdd_5259_4e6f_425c_e15df53ed960 -->|calls| f285e264_99e9_5260_2d17_5969017d03f8
  style a27b3bdd_5259_4e6f_425c_e15df53ed960 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/jsx.ts lines 63–181

async function renderJSXVNode(result: SSRResult, vnode: AstroVNode): Promise<any> {
	if (isVNode(vnode)) {
		// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
		switch (true) {
			case !vnode.type: {
				throw new Error(`Unable to render ${result.pathname} because it contains an undefined Component!
Did you forget to import the component or is it possible there is a typo?`);
			}
			case (vnode.type as any) === Symbol.for('astro:fragment'):
				return renderJSX(result, vnode.props.children);
			case isAstroComponentFactory(vnode.type): {
				let props: Record<string, any> = {};
				let slots: Record<string, any> = {};
				for (const [key, value] of Object.entries(vnode.props ?? {})) {
					if (key === 'children' || (value && typeof value === 'object' && value['$$slot'])) {
						slots[key === 'children' ? 'default' : key] = () => renderJSX(result, value);
					} else {
						props[key] = value;
					}
				}
				// We don't use renderToString because it doesn't contain the server island script handling
				const str = await renderComponentToString(
					result,
					vnode.type.name,
					vnode.type,
					props,
					slots,
				);
				const html = markHTMLString(str);
				return html;
			}
			case !vnode.type && (vnode.type as any) !== 0:
				return '';
			case typeof vnode.type === 'string' && vnode.type !== ClientOnlyPlaceholder:
				return markHTMLString(await renderElement(result, vnode.type as string, vnode.props ?? {}));
		}

		if (vnode.type) {
			if (typeof vnode.type === 'function' && vnode.props['server:root']) {
				const output = await vnode.type(vnode.props ?? {});
				return await renderJSX(result, output);
			}
			if (typeof vnode.type === 'function') {
				if (vnode.props[hasTriedRenderComponentSymbol]) {
					// omitting compiler-internals from user components
					delete vnode.props[hasTriedRenderComponentSymbol];
					const output = await vnode.type(vnode.props ?? {});
					if (output?.[AstroJSX] || !output) {
						return await renderJSXVNode(result, output);
					} else {
						return;
					}
				} else {
					vnode.props[hasTriedRenderComponentSymbol] = true;
				}
			}

			const { children = null, ...props } = vnode.props ?? {};
			const _slots: Record<string, any> = {
				default: [],
			};
			function extractSlots(child: any): any {
				if (Array.isArray(child)) {
					return child.map((c) => extractSlots(c));
				}
				if (!isVNode(child)) {
					_slots.default.push(child);
					return;
				}
				if ('slot' in child.props) {
					_slots[child.props.slot] = [...(_slots[child.props.slot] ?? []), child];
					delete child.props.slot;
					return;
				}
				_slots.default.push(child);
			}
			extractSlots(children);
			for (const [key, value] of Object.entries(props)) {
				if (value?.['$$slot']) {
					_slots[key] = value;
					delete props[key];