transformSlots() — astro Function Reference

Architecture documentation for the transformSlots() function in index.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 2 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ transformSlots() — astro Function Reference

Dependency Diagram

graph TD
  80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99["transformSlots()"]
  c98dc478_4d28_8749_a81d_0a986fd20476["index.ts"]
  80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99 -->|defined in| c98dc478_4d28_8749_a81d_0a986fd20476
  d280536a_8bca_f19e_ba08_4f989734bd0a["createVNode()"]
  d280536a_8bca_f19e_ba08_4f989734bd0a -->|calls| 80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99
  87b9e203_f7e5_3b5d_d59c_dfcf7e0d8c37["isVNode()"]
  80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99 -->|calls| 87b9e203_f7e5_3b5d_d59c_dfcf7e0d8c37
  0a6aef21_6b46_01e4_1351_bf76a880eb35["toSlotName()"]
  80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99 -->|calls| 0a6aef21_6b46_01e4_1351_bf76a880eb35
  style 80cb73a4_c5ac_f7a2_4d4a_683bd5b44c99 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/jsx-runtime/index.ts lines 19–51

export function transformSlots(vnode: AstroVNode) {
	if (typeof vnode.type === 'string') return vnode;
	// Handle single child with slot attribute
	const slots: Record<string, any> = {};
	if (isVNode(vnode.props.children)) {
		const child = vnode.props.children;
		if (!isVNode(child)) return;
		if (!('slot' in child.props)) return;
		const name = toSlotName(child.props.slot);
		slots[name] = [child];
		slots[name]['$$slot'] = true;
		delete child.props.slot;
		delete vnode.props.children;
	} else if (Array.isArray(vnode.props.children)) {
		// Handle many children with slot attributes
		vnode.props.children = vnode.props.children
			.map((child) => {
				if (!isVNode(child)) return child;
				if (!('slot' in child.props)) return child;
				const name = toSlotName(child.props.slot);
				if (Array.isArray(slots[name])) {
					slots[name].push(child);
				} else {
					slots[name] = [child];
					slots[name]['$$slot'] = true;
				}
				delete child.props.slot;
				return Empty;
			})
			.filter((v) => v !== Empty);
	}
	Object.assign(vnode.props, slots);
}