createReactElementFromDOMElement() — astro Function Reference

Architecture documentation for the createReactElementFromDOMElement() function in client.ts from the astro codebase.

Function typescript CoreAstro RoutingSystem called by 1

Entity Profile

CoreAstro→ RoutingSystem→ createReactElementFromDOMElement() — astro Function Reference

Dependency Diagram

graph TD
  20b1d023_a619_047c_cb8f_f30ee5fdc8a9["createReactElementFromDOMElement()"]
  c5f3c713_1f42_3f72_0411_7043ce23ab8a["client.ts"]
  20b1d023_a619_047c_cb8f_f30ee5fdc8a9 -->|defined in| c5f3c713_1f42_3f72_0411_7043ce23ab8a
  545760f8_74b4_0081_09e0_80ba161e78d4["getChildren()"]
  545760f8_74b4_0081_09e0_80ba161e78d4 -->|calls| 20b1d023_a619_047c_cb8f_f30ee5fdc8a9
  style 20b1d023_a619_047c_cb8f_f30ee5fdc8a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/react/src/client.ts lines 13–38

function createReactElementFromDOMElement(element: any): any {
	let attrs: Record<string, string> = {};
	for (const attr of element.attributes) {
		attrs[attr.name] = attr.value;
	}
	// If the element has no children, we can create a simple React element
	if (element.firstChild === null) {
		return createElement(element.localName, attrs);
	}

	return createElement(
		element.localName,
		attrs,
		Array.from(element.childNodes)
			.map((c: any) => {
				if (c.nodeType === Node.TEXT_NODE) {
					return c.data;
				} else if (c.nodeType === Node.ELEMENT_NODE) {
					return createReactElementFromDOMElement(c);
				} else {
					return undefined;
				}
			})
			.filter((a) => !!a),
	);
}