AsyncComponent() — astro Function Reference

Architecture documentation for the AsyncComponent() function in async-components.jsx from the astro codebase.

Function javascript IntegrationAdapters ReactIntegration calls 1

Entity Profile

IntegrationAdapters→ ReactIntegration→ AsyncComponent() — astro Function Reference

Dependency Diagram

graph TD
  17272460_9653_d767_82e0_eb8d062bcad0["AsyncComponent()"]
  f055b9af_141a_1d5d_191b_9a6d24e5ebf0["async-components.jsx"]
  17272460_9653_d767_82e0_eb8d062bcad0 -->|defined in| f055b9af_141a_1d5d_191b_9a6d24e5ebf0
  4a8ac17b_e994_ee09_bcb2_2cddcf98d0cd["sleep()"]
  17272460_9653_d767_82e0_eb8d062bcad0 -->|calls| 4a8ac17b_e994_ee09_bcb2_2cddcf98d0cd
  style 17272460_9653_d767_82e0_eb8d062bcad0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/test/fixtures/solid-component/src/components/async-components.jsx lines 9–41

export function AsyncComponent(props) {
	const id = createUniqueId();

	const [data] = createResource(async () => {
		// console.log("Start rendering async component " + props.title);
		await sleep(props.delay ?? SLEEP_MS);
		// console.log("Finish rendering async component " + props.title);
		return 'Async result for component id=' + id;
	});

	const [show, setShow] = createSignal(false);

	return (
		<div data-name="AsyncComponent" style={{ border: 'black solid 1px', padding: '4px' }}>
			{'title=' + (props.title ?? '(none)') + ' '}
			{'id=' + id + ' '}
			<span>{data()}</span>{' '}
			<button
				type="button"
				disabled={show()}
				onClick={() => {
					setShow(true);
				}}
			>
				Show children
			</button>
			{/* NOTE: The props.children are intentionally hidden by default 
		      to simulate a situation where hydration script might not 
					be injected in the right spot. */}
			<Show when={show()}>{props.children ?? 'Empty'}</Show>
		</div>
	);
}