jsx.ts — astro Source File

Source Code

import { AstroJSX, type AstroVNode, isVNode } from '../../jsx-runtime/index.js';
import type { SSRResult } from '../../types/public/internal.js';
import {
	escapeHTML,
	HTMLString,
	markHTMLString,
	spreadAttributes,
	voidElementNames,
} from './index.js';
import { isAstroComponentFactory } from './render/astro/factory.js';
import { renderComponentToString } from './render/component.js';
import type { RenderInstruction } from './render/instruction.js';
import { mergeSlotInstructions, SlotString } from './render/slot.js';

const ClientOnlyPlaceholder = 'astro-client-only';

// If the `vnode.type` is a function, we could render it as JSX or as framework components.
// Inside `renderJSXNode`, we first try to render as framework components, and if `renderJSXNode`
// is called again while rendering the component, it's likely that the `astro:jsx` is invoking
// `renderJSXNode` again (loop). In this case, we try to render as JSX instead.
//
// This Symbol is assigned to `vnode.props` to track if it had tried to render as framework components.
// It mutates `vnode.props` to be able to scope to the current render call.
const hasTriedRenderComponentSymbol = Symbol('hasTriedRenderComponent');

export async function renderJSX(result: SSRResult, vnode: any): Promise<any> {
	// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
	switch (true) {
		case vnode instanceof HTMLString:
			if (vnode.toString().trim() === '') {
				return '';
			}
			return vnode;
		case typeof vnode === 'string':
			return markHTMLString(escapeHTML(vnode));
		case typeof vnode === 'function':
			return vnode;
		case !vnode && vnode !== 0:
			return '';
		case Array.isArray(vnode): {
			const renderedItems = await Promise.all(vnode.map((v: any) => renderJSX(result, v)));
			// Collect instructions from SlotString items to preserve hydration scripts
			let instructions: RenderInstruction[] | null = null;
			let content = '';
			for (const item of renderedItems) {
				if (item instanceof SlotString) {
					content += item;
					instructions = mergeSlotInstructions(instructions, item);
				} else {
					content += item;
				}
			}
			if (instructions) {
				return markHTMLString(new SlotString(content, instructions));
			}
			return markHTMLString(content);
		}
	}

	return renderJSXVNode(result, vnode);
// ... (152 more lines)