import { track } from 'ripple';

// Components for testing HMR re-render after hydration.
// The key scenario: a layout wrapper whose root element contains children
// that use if/for blocks. After hydration, hydrate_node can be left pointing
// deep inside the layout's root element (from nested block processing), which
// previously caused branch.s.end to be set incorrectly and target to be null.

// A layout component similar to docs-layout: a root div wrapping child components
// where the children contain conditional content (if blocks)
export component Layout({ children }: { children: any }) {
	<div class="layout">
		<nav class="nav">{'Navigation'}</nav>
		<main class="main">{children}</main>
	</div>
}

// A child component with an if block (the key source of deep hydrate_node)
export component Content() {
	let &[visible] = track(true);

	<div class="content">
		if (visible) {
			<p class="text">{'Hello world'}</p>
		}
	</div>
}

// The top-level component combining Layout + Content (mimics docs layout + page)
export component LayoutWithContent() {
	<Layout>
		<Content />
	</Layout>
}