client-v17.ts — astro Source File

Architecture documentation for client-v17.ts, a typescript file in the astro codebase. 3 imports, 0 dependents.

File typescript CoreAstro 3 imports

Entity Profile

CoreAstro→ client-v17.ts — astro Source File

Dependency Diagram

graph LR
  ecb985d7_1604_9d6e_70b6_95865bb9b5da["client-v17.ts"]
  5d6f4037_5bea_5d26_d23c_0c9bcb7db079["./static-html.js"]
  ecb985d7_1604_9d6e_70b6_95865bb9b5da --> 5d6f4037_5bea_5d26_d23c_0c9bcb7db079
  d9988dd0_c044_f9d2_85cd_a31a0a2bdf80["react"]
  ecb985d7_1604_9d6e_70b6_95865bb9b5da --> d9988dd0_c044_f9d2_85cd_a31a0a2bdf80
  199aee82_1d7c_c9e4_b390_1ce24eedb67e["react-dom"]
  ecb985d7_1604_9d6e_70b6_95865bb9b5da --> 199aee82_1d7c_c9e4_b390_1ce24eedb67e
  style ecb985d7_1604_9d6e_70b6_95865bb9b5da fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { createElement } from 'react';
import { hydrate, render, unmountComponentAtNode } from 'react-dom';
import StaticHtml from './static-html.js';

export default (element: HTMLElement) =>
	(
		Component: any,
		props: Record<string, any>,
		{ default: children, ...slotted }: Record<string, any>,
		{ client }: Record<string, string>,
	) => {
		for (const [key, value] of Object.entries(slotted)) {
			props[key] = createElement(StaticHtml, { value, name: key });
		}
		const componentEl = createElement(
			Component,
			props,
			children != null ? createElement(StaticHtml, { value: children }) : children,
		);

		const isHydrate = client !== 'only';
		const bootstrap = isHydrate ? hydrate : render;
		bootstrap(componentEl, element);
		element.addEventListener('astro:unmount', () => unmountComponentAtNode(element), {
			once: true,
		});
	};