ripple 0.2.215 → 0.3.0

package/tests/hydration/components/hmr.ripple

@@ -0,0 +1,34 @@
+// 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 = #ripple.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>
+}

package/tests/hydration/components/html.ripple

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 export component StaticHtml() {
 	const html = '<p><strong>Bold</strong> text</p>';
 	<div>{html html}</div>
@@ -229,7 +227,7 @@ component NavItem({
 }
 
 component SidebarSection({ title, children }: { title: string; children: any }) {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 	<section class="sidebar-section">
 		<div class="section-header">
 			<h2>{title}</h2>

package/tests/hydration/components/if-children.ripple

@@ -1,9 +1,8 @@
 // Minimal repro for hydration issue with if block containing children
 // Based on SidebarGroup pattern from website-new
-import { track } from 'ripple';
 
 export component IfWithChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -28,7 +27,7 @@ export component TestIfWithChildren() {
 
 // Simpler variant - if block with static children
 export component IfWithStaticChildren() {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<div class="container">
 		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
@@ -43,7 +42,7 @@ export component IfWithStaticChildren() {
 
 // Variant with sibling elements before the if block (like SidebarGroup)
 export component IfWithSiblingsAndChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let expanded = #ripple.track(true);
 
 	<section class="group">
 		<div class="item" role="button" onClick={() => (@expanded = !@expanded)}>
@@ -74,7 +73,7 @@ export component TestIfWithSiblingsAndChildren() {
 // This tests that hydrate_node is properly restored after processing an element's children
 // before navigating to a dynamic sibling (if/for/switch)
 export component ElementWithChildrenThenIf() {
-	let show = track(true);
+	let show = #ripple.track(true);
 
 	<div class="wrapper">
 		<div class="nested-parent">
@@ -92,7 +91,7 @@ export component ElementWithChildrenThenIf() {
 
 // More complex: multiple levels of nesting before if sibling
 export component DeepNestingThenIf() {
-	let visible = track(true);
+	let visible = #ripple.track(true);
 
 	<section class="outer">
 		<article class="middle">
@@ -115,7 +114,7 @@ export component DeepNestingThenIf() {
 // followed by another sibling element. This requires pop() to restore hydrate_node
 // because we descend into the first element to get the button children.
 export component DomElementChildrenThenSibling() {
-	let activeTab = track('code');
+	let activeTab = #ripple.track('code');
 
 	<div class="tabs">
 		<div class="tab-list">
@@ -148,7 +147,7 @@ export component DomElementChildrenThenSibling() {
 // generate sibling() calls. This was causing incorrect pop() generation before next().
 // Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
 export component DomChildrenThenStaticSiblings() {
-	let count = track(0);
+	let count = #ripple.track(0);
 
 	<div class="container">
 		<ul class="list">

package/tests/hydration/components/if.ripple

@@ -1,5 +1,4 @@
 // If block components for hydration testing
-import { track } from 'ripple';
 
 export component IfTruthy() {
 	const show = true;
@@ -25,7 +24,7 @@ export component IfElse() {
 }
 
 export component ReactiveIf() {
-	let show = track(true);
+	let show = #ripple.track(true);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -40,7 +39,7 @@ export component ReactiveIf() {
 }
 
 export component ReactiveIfElse() {
-	let isOn = track(false);
+	let isOn = #ripple.track(false);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -57,8 +56,8 @@ export component ReactiveIfElse() {
 }
 
 export component NestedIf() {
-	let outer = track(true);
-	let inner = track(true);
+	let outer = #ripple.track(true);
+	let inner = #ripple.track(true);
 	<button
 		class="outer-toggle"
 		onClick={() => {
@@ -86,7 +85,7 @@ export component NestedIf() {
 }
 
 export component IfElseIfChain() {
-	let status = track<'loading' | 'success' | 'error'>('loading');
+	let status = #ripple.track<'loading' | 'success' | 'error'>('loading');
 	<div>
 		<button
 			class="success"

package/tests/hydration/components/mixed-control-flow.ripple

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 export component MixedControlFlowStatic() {
 	const rows = [
 		{ id: 1, kind: 'a', enabled: true },
@@ -31,9 +29,9 @@ export component MixedControlFlowStatic() {
 }
 
 export component MixedControlFlowReactive() {
-	let show = track(true);
-	let mode = track<'a' | 'b'>('a');
-	let items = track([
+	let show = #ripple.track(true);
+	let mode = #ripple.track<'a' | 'b'>('a');
+	let items = #ripple.track([
 		{ id: 1, label: 'One' },
 		{ id: 2, label: 'Two' },
 	]);
@@ -108,7 +106,7 @@ export component MixedControlFlowAsyncPending() {
 	}
 }
 
-component AsyncRow({ label }) {
+component AsyncRow({ label }: { label: string }) {
 	let value = await Promise.resolve(label);
 	<div class="resolved-row">{value}</div>
 }

package/tests/hydration/components/portal.ripple

@@ -13,7 +13,7 @@ export component SimplePortal() {
 
 // Portal with conditional rendering
 export component ConditionalPortal() {
-	let show = @true;
+	let show = #ripple.track(true);
 
 	<div class="container">
 		<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>

package/tests/hydration/components/reactivity.ripple

@@ -1,13 +1,12 @@
 // Reactive components for hydration testing
-import { track } from 'ripple';
 
 export component TrackedState() {
-	let count = track(0);
+	let count = #ripple.track(0);
 	<div class="count">{@count}</div>
 }
 
 export component CounterWithInitial(props: { initial: number }) {
-	let count = track(props.initial);
+	let count = #ripple.track(props.initial);
 	<div>
 		<span class="count">{@count}</span>
 	</div>
@@ -18,24 +17,24 @@ export component CounterWrapper() {
 }
 
 export component ComputedValues() {
-	let a = track(2);
-	let b = track(3);
+	let a = #ripple.track(2);
+	let b = #ripple.track(3);
 	const sum = () => @a + @b;
 	<div class="sum">{sum()}</div>
 }
 
 export component MultipleTracked() {
-	let x = track(10);
-	let y = track(20);
-	let z = track(30);
+	let x = #ripple.track(10);
+	let y = #ripple.track(20);
+	let z = #ripple.track(30);
 	<div class="x">{@x}</div>
 	<div class="y">{@y}</div>
 	<div class="z">{@z}</div>
 }
 
 export component DerivedState() {
-	let firstName = track('John');
-	let lastName = track('Doe');
+	let firstName = #ripple.track('John');
+	let lastName = #ripple.track('Doe');
 	const fullName = () => `${@firstName} ${@lastName}`;
 	<div class="name">{fullName()}</div>
 }

package/tests/hydration/components/return.ripple

@@ -1,5 +1,4 @@
 // Return statement components for hydration testing
-import { track } from 'ripple';
 
 // Basic return - skips content after direct return
 export component DirectReturn() {
@@ -265,7 +264,7 @@ export component ReturnWithElseBothReturn() {
 
 // Reactive return - starts true, can toggle to false
 export component ReactiveReturnTrueToFalse() {
-	let condition = track(true);
+	let condition = #ripple.track(true);
 
 	<button
 		class="toggle"
@@ -284,7 +283,7 @@ export component ReactiveReturnTrueToFalse() {
 
 // Reactive return - starts false, can toggle to true
 export component ReactiveReturnFalseToTrue() {
-	let condition = track(false);
+	let condition = #ripple.track(false);
 
 	<button
 		class="toggle"
@@ -304,7 +303,7 @@ export component ReactiveReturnFalseToTrue() {
 // Reactive nested return - only inner condition (b) is tracked
 export component ReactiveNestedReturn() {
 	let a = true;
-	let b = track(true);
+	let b = #ripple.track(true);
 
 	<button
 		class="toggle"
@@ -397,7 +396,7 @@ export component MultipleSiblingReturns() {
 
 // Reactive sibling returns - cycles first -> second -> fallback
 export component ReactiveSiblingReturns() {
-	let mode = track('first');
+	let mode = #ripple.track('first');
 
 	<button
 		class="toggle"
@@ -429,8 +428,8 @@ export component ReactiveSiblingReturns() {
 
 // Reactive nested returns with tracked outer and inner conditions
 export component ReactiveOuterInnerReturns() {
-	let a = track(true);
-	let b = track(true);
+	let a = #ripple.track(true);
+	let b = #ripple.track(true);
 
 	<button
 		class="toggle-a"
@@ -463,7 +462,7 @@ export component ReactiveOuterInnerReturns() {
 
 // Reactive else-if return chain that transitions between return and non-return states
 export component ReactiveElseIfReturns() {
-	let status = track(0);
+	let status = #ripple.track(0);
 
 	<button
 		class="toggle"
@@ -488,10 +487,10 @@ export component ReactiveElseIfReturns() {
 
 // Deeply nested independent return guards with multiple root-level siblings
 export component ReactiveDeepNestedIndependentReturns() {
-	let c1 = track(false);
-	let c2 = track(false);
-	let c3 = track(false);
-	let c4 = track(false);
+	let c1 = #ripple.track(false);
+	let c2 = #ripple.track(false);
+	let c3 = #ripple.track(false);
+	let c4 = #ripple.track(false);
 
 	<button
 		class="toggle-c1"

package/tests/hydration/components/switch.ripple

@@ -1,7 +1,5 @@
-import { track } from 'ripple';
-
 export component SwitchStatic() {
-	const status = 'success';
+	const status: string = 'success';
 	switch (status) {
 		case 'success':
 			<div class="status-success">{'Success'}</div>
@@ -15,7 +13,7 @@ export component SwitchStatic() {
 }
 
 export component SwitchReactive() {
-	let status = track<'a' | 'b' | 'c'>('a');
+	let status = #ripple.track<'a' | 'b' | 'c'>('a');
 	<button
 		class="toggle"
 		onClick={() => {
@@ -39,7 +37,7 @@ export component SwitchReactive() {
 }
 
 export component SwitchFallthrough() {
-	const val = 1;
+	const val: number = 1;
 	switch (val) {
 		case 1:
 		case 2:
@@ -51,7 +49,7 @@ export component SwitchFallthrough() {
 }
 
 export component SwitchNumericLevels() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="level-toggle"
 		onClick={() => {
@@ -76,7 +74,7 @@ export component SwitchNumericLevels() {
 }
 
 export component SwitchBlockScoped() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="block-toggle"
 		onClick={() => {
@@ -104,7 +102,7 @@ export component SwitchBlockScoped() {
 }
 
 export component SwitchNoBreak() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="nobreak-toggle"
 		onClick={() => {

package/tests/hydration/hmr.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
+import { hydrateComponent, container } from '../setup-hydration.js';
+import { hmr } from '../../src/runtime/internal/client/hmr.js';
+import { HMR } from '../../src/runtime/internal/client/constants.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/hmr.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/hmr.js';
+
+describe('hydration > HMR re-render', () => {
+	it('re-renders layout component correctly after hydration (no zoom/displacement)', async () => {
+		// Hydrate the layout+content component
+		await hydrateComponent(ServerComponents.LayoutWithContent, ClientComponents.LayoutWithContent);
+
+		// Verify initial state
+		expect(container.querySelector('.layout')).not.toBeNull();
+		expect(container.querySelector('.nav')?.textContent).toBe('Navigation');
+		expect(container.querySelector('.main')).not.toBeNull();
+		expect(container.querySelector('.content')).not.toBeNull();
+		expect(container.querySelector('.text')?.textContent).toBe('Hello world');
+
+		// Wrap the layout component with HMR (simulates what the compiler does in dev mode)
+		const layout_hmr = hmr(ClientComponents.Layout);
+
+		// Create an "updated" version of the component (simulates saving the file)
+		function UpdatedLayout(anchor, props, block) {
+			return ClientComponents.Layout(anchor, props, block);
+		}
+		const incoming = hmr(UpdatedLayout);
+
+		// Simulate calling wrapper() to establish the HMR instance
+		// (In practice the component is already mounted via hydrateComponent above,
+		// but we test the HMR update mechanism directly)
+		const update_fn = layout_hmr[HMR].update;
+
+		// The update should not throw
+		expect(() => {
+			update_fn(incoming);
+		}).not.toThrow();
+	});
+
+	it('layout component remains inside container after hydration', async () => {
+		await hydrateComponent(ServerComponents.LayoutWithContent, ClientComponents.LayoutWithContent);
+
+		// The layout div must be inside the container, not displaced
+		const layout = container.querySelector('.layout');
+		expect(layout).not.toBeNull();
+		expect(container.contains(layout)).toBe(true);
+
+		// The main content must be inside the layout
+		const main = layout?.querySelector('.main');
+		expect(main).not.toBeNull();
+
+		// The text content must be present and correct
+		expect(container.querySelector('.text')?.textContent).toBe('Hello world');
+	});
+
+	it('hydrates layout with nested if block without corrupting branch state', async () => {
+		await hydrateComponent(ServerComponents.LayoutWithContent, ClientComponents.LayoutWithContent);
+
+		// After hydration, the conditional content must still be visible
+		expect(container.querySelector('.text')).not.toBeNull();
+		expect(container.querySelector('.text')?.textContent).toBe('Hello world');
+
+		// All structural elements must be present in the correct hierarchy
+		const layout = container.querySelector('.layout');
+		expect(layout).not.toBeNull();
+		expect(layout?.querySelector('.nav')).not.toBeNull();
+		expect(layout?.querySelector('.main')).not.toBeNull();
+		expect(layout?.querySelector('.content')).not.toBeNull();
+	});
+});

package/tests/server/await.test.ripple

@@ -1,4 +1,4 @@
-import { track, set, get } from 'ripple';
+import { set, get } from 'ripple';
 
 describe('await in control flow', () => {
 	it('all tests are commented out for now as await in control flow is not yet supported', () => {
@@ -8,7 +8,7 @@ describe('await in control flow', () => {
 	// it('should handle await inside if statement', async () => {
 	// 	component App() {
 	// 		let condition = true;
-	// 		let data = track('loading');
+	// 		let data = #ripple.track('loading');
 
 	// 		if (condition) {
 	// 			await new Promise((resolve) => setTimeout(() => {

package/tests/server/basic.attributes.test.ripple

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 describe('basic server > attribute rendering', () => {
 	it('render static attributes', async () => {
 		component Basic() {
@@ -19,7 +17,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class attribute', async () => {
 		component Basic() {
-			let active = track(false);
+			let active = #ripple.track(false);
 
 			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
@@ -89,7 +87,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class object', async () => {
 		component Basic() {
-			let active = track(false);
+			let active = #ripple.track(false);
 
 			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
 
@@ -116,7 +114,7 @@ describe('basic server > attribute rendering', () => {
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
 			component Basic() {
-				let selected = track(1);
+				let selected = #ripple.track(1);
 
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
@@ -147,7 +145,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic id attribute', async () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
 		}
@@ -162,7 +160,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic style attribute', async () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
@@ -178,7 +176,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', async () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<div style={{ color: @color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
@@ -194,7 +192,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', async () => {
 		component Basic() {
-			let style = track({ color: 'red', fontWeight: 'bold' });
+			let style = #ripple.track({ color: 'red', fontWeight: 'bold' });
 
 			<div {@style}>{'Dynamic Style'}</div>
 		}
@@ -210,7 +208,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked object as style attribute', async () => {
 		component Basic() {
-			let style = #{ color: 'red', fontWeight: 'bold' };
+			let style = #ripple{ color: 'red', fontWeight: 'bold' };
 
 			<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
 		}
@@ -277,8 +275,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as false', async () => {
 		component Basic() {
-			let disabled = track(false);
-			let checked = track(false);
+			let disabled = #ripple.track(false);
+			let checked = #ripple.track(false);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -312,8 +310,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as true', async () => {
 		component Basic() {
-			let disabled = track(true);
-			let checked = track(true);
+			let disabled = #ripple.track(true);
+			let checked = #ripple.track(true);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -347,8 +345,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', async () => {
 		component Basic() {
-			let theme = track('light');
-			let size = track('medium');
+			let theme = #ripple.track('light');
+			let size = #ripple.track('medium');
 
 			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>
 				{'Multiple Dynamic Attributes'}
@@ -367,8 +365,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render conditional attributes', async () => {
 		component Basic() {
-			let showTitle = track(false);
-			let showAria = track(false);
+			let showTitle = #ripple.track(false);
+			let showAria = #ripple.track(false);
 
 			<div
 				title={@showTitle ? 'This is a title' : undefined}
@@ -389,7 +387,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		component Basic() {
-			let attrs = track<TestAttributes>(
+			let attrs = #ripple.track<TestAttributes>(
 				{
 					class: 'initial',
 					id: 'test-1',
@@ -411,12 +409,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
 		component Basic() {
-			let value = track('parent-class');
+			let value = #ripple.track('parent-class');
 
 			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = track('nested-class');
+				let nested = #ripple.track('nested-class');
 
 				<p class={@nested}>{'Colored nested value'}</p>
 			</div>

package/tests/server/basic.components.test.ripple

@@ -1,5 +1,10 @@
-import type { Tracked, PropsWithChildren, PropsWithExtras } from 'ripple';
-import { track } from 'ripple';
+import type {
+	Tracked,
+	PropsWithChildren,
+	PropsWithExtras,
+	Component,
+	PropsWithChildrenOptional,
+} from 'ripple';
 
 describe('basic server > components & composition', () => {
 	it('renders with component composition and children', async () => {
@@ -28,8 +33,9 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('does not render a falsy component call', async () => {
-		component Card(props: PropsWithChildren<{}>) {
+		component Card(props: PropsWithChildrenOptional<{ test: Component }>) {
 			<div class="card">
+				// @ts-expect-error - ripple automatically handles falsy children
 				<props.children />
 			</div>
 		}
@@ -100,7 +106,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = track(false);
+			let clicked = #ripple.track(false);
 
 			<Card
 				title="Test Card"
@@ -137,8 +143,8 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let message = track('Hello');
-			let number = track(1);
+			let message = #ripple.track('Hello');
+			let number = #ripple.track(1);
 
 			<ChildComponent text={message} count={number} />
 			<button
@@ -225,7 +231,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component App() {
-			let Content = track(() => Noop);
+			let Content = #ripple.track(() => Noop);
 			<@Content />
 		}