createComponent() — astro Function Reference

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

Function typescript CoreAstro CoreMiddleware

Entity Profile

CoreAstro→ CoreMiddleware→ createComponent() — astro Function Reference

Dependency Diagram

graph TD
  5d351a3a_e7f1_9641_3013_0ca73a2e58d3["createComponent()"]
  52a45147_83e6_043c_25ea_3c8f58cef854["client.svelte.ts"]
  5d351a3a_e7f1_9641_3013_0ca73a2e58d3 -->|defined in| 52a45147_83e6_043c_25ea_3c8f58cef854
  style 5d351a3a_e7f1_9641_3013_0ca73a2e58d3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/svelte/src/client.svelte.ts lines 59–85

function createComponent(
	Component: any,
	target: HTMLElement,
	props: Record<string, any>,
	shouldHydrate: boolean,
) {
	let propsState = $state(props);
	const bootstrap = shouldHydrate ? hydrate : mount;
	if (!shouldHydrate) {
		target.innerHTML = '';
	}
	const component = bootstrap(Component, { target, props: propsState });
	return {
		setProps(newProps: Record<string, any>) {
			Object.assign(propsState, newProps);
			// Remove props in `propsState` but not in `newProps`
			for (const key in propsState) {
				if (!(key in newProps)) {
					delete propsState[key];
				}
			}
		},
		destroy() {
			unmount(component);
		},
	};
}