ripple 0.2.215 → 0.2.216

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # ripple
 
+## 0.2.216
+
+### Patch Changes
+
+- [#757](https://github.com/Ripple-TS/ripple/pull/757)
+  [`9fb507d`](https://github.com/Ripple-TS/ripple/commit/9fb507d76af6fd6a5c636af1976d1e03d3e869ac)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - fixes compiler error that was
+  generating async functions for call expressions inside if conditions when inside
+  async context
+
+- [#751](https://github.com/Ripple-TS/ripple/pull/751)
+  [`e1de4bb`](https://github.com/Ripple-TS/ripple/commit/e1de4bb9df75342a693cda24d0999a423db05ec4)
+  Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Fix
+  HMR "zoom" issue when a Ripple file is changed in the dev server.
+
+  When a layout component contained children with nested `if`/`for` blocks,
+  hydration would leave `hydrate_node` pointing deep inside the layout's root
+  element (e.g. a HYDRATION_END comment inside `<main>`). The `append()`
+  function's `parentNode === dom` check only handled direct children, so it missed
+  grandchild/deeper positions and incorrectly updated the branch block's `s.end`
+  to that deep internal node.
+
+  This caused two problems on HMR re-render:
+  1. `remove_block_dom(s.start, s.end)` removed wrong elements (the deep node was
+     treated as a sibling boundary, causing removal of unrelated content including
+     the root HYDRATION_END comment).
+  2. `target = hydrate_node` (set after the initial render) became `null` or
+     pointed outside the component's region, so new content was inserted at the
+     wrong DOM location — producing a layout that appeared "zoomed" because it
+     rendered outside its CSS container context.
+
+  The fix changes the `parentNode === dom` check to `dom.contains(hydrate_node)`,
+  consistent with the `anchor === dom` branch that already used `dom.contains()`.
+  This correctly resets `hydrate_node` to `dom`'s sibling level regardless of how
+  deeply nested it was inside `dom`.
+
+- [#764](https://github.com/Ripple-TS/ripple/pull/764)
+  [`95ea864`](https://github.com/Ripple-TS/ripple/commit/95ea8645b2cb27e2610a4ace4c8fb238c92d441a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fixes syntax color
+  highlighting for `pending`
+
+- Updated dependencies
+  [[`9fb507d`](https://github.com/Ripple-TS/ripple/commit/9fb507d76af6fd6a5c636af1976d1e03d3e869ac),
+  [`e1de4bb`](https://github.com/Ripple-TS/ripple/commit/e1de4bb9df75342a693cda24d0999a423db05ec4),
+  [`95ea864`](https://github.com/Ripple-TS/ripple/commit/95ea8645b2cb27e2610a4ace4c8fb238c92d441a)]:
+  - ripple@0.2.216
+
 ## 0.2.215
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.215",
+  "version": "0.2.216",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -96,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.215"
+    "ripple": "0.2.216"
   }
 }

package/src/compiler/phases/2-analyze/index.js

@@ -1031,6 +1031,30 @@ const visitors = {
 		context.next();
 	},
 
+	WhileStatement(node, context) {
+		if (is_inside_component(context)) {
+			error(
+				'While loops are not supported in components. Move the while loop into a function.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+
+		context.next();
+	},
+
+	DoWhileStatement(node, context) {
+		if (is_inside_component(context)) {
+			error(
+				'Do...while loops are not supported in components. Move the do...while loop into a function.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+
+		context.next();
+	},
+
 	JSXElement(node, context) {
 		const inside_tsx_compat = context.path.some((n) => n.type === 'TsxCompat');
 

package/src/compiler/phases/3-transform/client/index.js

@@ -2162,7 +2162,12 @@ const visitors = {
 					callback_body.push(b.stmt(b.call('_$_.set', b.id(info.name), b.false)));
 					callback_body.push(
 						b.if(
-							/** @type {AST.Expression} */ (context.visit(node.test)),
+							/** @type {AST.Expression} */ (
+								context.visit(node.test, {
+									...context.state,
+									metadata: { ...context.state.metadata, await: false },
+								})
+							),
 							b.stmt(b.call('_$_.set', b.id(info.name), b.true)),
 						),
 					);
@@ -2170,7 +2175,12 @@ const visitors = {
 					callback_body.push(b.stmt(b.assignment('=', b.id(info.name), b.false)));
 					callback_body.push(
 						b.if(
-							/** @type {AST.Expression} */ (context.visit(node.test)),
+							/** @type {AST.Expression} */ (
+								context.visit(node.test, {
+									...context.state,
+									metadata: { ...context.state.metadata, await: false },
+								})
+							),
 							b.stmt(b.assignment('=', b.id(info.name), b.true)),
 						),
 					);
@@ -2237,7 +2247,12 @@ const visitors = {
 
 		callback_body.push(
 			b.if(
-				/** @type {AST.Expression} */ (context.visit(node.test)),
+				/** @type {AST.Expression} */ (
+					context.visit(node.test, {
+						...context.state,
+						metadata: { ...context.state.metadata, await: false },
+					})
+				),
 				b.stmt(b.call(b.id('__render'), b.id(consequent_id))),
 				alternate_id
 					? b.stmt(

package/src/runtime/internal/client/template.js

@@ -165,7 +165,7 @@ export function append(anchor, dom, skip_advance) {
 		// But if the cursor is already at dom's sibling level (e.g. because
 		// nested control flow blocks advanced it past dom via sibling traversal),
 		// pop() would incorrectly reset backwards — so we skip it.
-		if (hydrate_node?.parentNode === dom) {
+		if (hydrate_node !== null && hydrate_node !== dom && dom.contains(hydrate_node)) {
 			pop(dom);
 		} else if (hydrate_node !== dom) {
 			// Cursor has advanced past dom via sibling traversal (due to nested

package/tests/client/basic/basic.errors.test.ripple

@@ -173,4 +173,70 @@ describe('basic client > errors', () => {
 			compile(code, 'test.ripple', { mode: 'client' });
 		}).toThrow('`await` is not allowed in client-side control-flow statements');
 	});
+
+	it('should throw error for while loop inside a component', () => {
+		const code = `
+			export default component App() {
+				let i = 0;
+				while (i < 10) {
+					i++;
+				}
+				<div>{i}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow('While loops are not supported in components.');
+	});
+
+	it('should throw error for do...while loop inside a component', () => {
+		const code = `
+			export default component App() {
+				let i = 0;
+				do {
+					i++;
+				} while (i < 10);
+				<div>{i}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow('Do...while loops are not supported in components.');
+	});
+
+	it('should not throw error for while loop inside a function within a component', () => {
+		const code = `
+			export default component App() {
+				const compute = () => {
+					let i = 0;
+					while (i < 10) {
+						i++;
+					}
+					return i;
+				};
+				<div>{compute()}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('should not throw error for do...while loop inside a function within a component', () => {
+		const code = `
+			export default component App() {
+				const compute = () => {
+					let i = 0;
+					do {
+						i++;
+					} while (i < 10);
+					return i;
+				};
+				<div>{compute()}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
 });

package/tests/client/try.test.ripple

@@ -141,4 +141,27 @@ describe('try block', () => {
 			expect(listItems.length).toBe(3);
 		},
 	);
+
+	it('if test condition does not become async within try/pending', async () => {
+		component App() {
+			try {
+				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
+
+				if (items.includes('not-in-list')) {
+					<p>{'not-in-list is in the list!'}</p>
+				} else {
+					<p>{'not-in-list is not in the list.'}</p>
+				}
+			} pending {
+				<p>{'loading...'}</p>
+			}
+		}
+
+		render(App);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		expect(container.innerHTML).toContain('not-in-list is not in the list.');
+	});
 });

package/tests/hydration/compiled/client/hmr.js

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/client';
+
+var root = _$_.template(`<div class="layout"><nav class="nav">Navigation</nav><main class="main"><!></main></div>`, 0);
+var root_2 = _$_.template(`<p class="text">Hello world</p>`, 0);
+var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
+var root_4 = _$_.template(`<!>`, 1, 1);
+var root_3 = _$_.template(`<!>`, 1, 1);
+
+import { track } from 'ripple';
+
+export function Layout(__anchor, __props, __block) {
+	_$_.push_component();
+
+	var div_1 = root();
+
+	{
+		var nav_1 = _$_.child(div_1);
+		var main_1 = _$_.sibling(nav_1);
+
+		{
+			var node = _$_.child(main_1);
+
+			_$_.composite(() => __props.children, node, {});
+			_$_.pop(main_1);
+		}
+	}
+
+	_$_.append(__anchor, div_1);
+	_$_.pop_component();
+}
+
+export function Content(__anchor, _, __block) {
+	_$_.push_component();
+
+	let visible = track(true, void 0, void 0, __block);
+	var div_2 = root_1();
+
+	{
+		var node_1 = _$_.child(div_2);
+
+		{
+			var consequent = (__anchor) => {
+				var p_1 = root_2();
+
+				_$_.append(__anchor, p_1);
+			};
+
+			_$_.if(node_1, (__render) => {
+				if (_$_.get(visible)) __render(consequent);
+			});
+		}
+
+		_$_.pop(div_2);
+	}
+
+	_$_.append(__anchor, div_2);
+	_$_.pop_component();
+}
+
+export function LayoutWithContent(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment = root_3();
+	var node_2 = _$_.first_child_frag(fragment);
+
+	Layout(
+		node_2,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_1 = root_4();
+				var node_3 = _$_.first_child_frag(fragment_1);
+
+				Content(node_3, {}, _$_.active_block);
+				_$_.append(__anchor, fragment_1);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment);
+	_$_.pop_component();
+}

package/tests/hydration/compiled/server/hmr.js

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+import { track } from 'ripple/server';
+
+export async function Layout(__output, { children }) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push(' class="layout"');
+		__output.push('>');
+
+		{
+			__output.push('<nav');
+			__output.push(' class="nav"');
+			__output.push('>');
+
+			{
+				__output.push('Navigation');
+			}
+
+			__output.push('</nav>');
+			__output.push('<main');
+			__output.push(' class="main"');
+			__output.push('>');
+
+			{
+				{
+					const comp = children;
+					const args = [__output, {}];
+
+					if (comp?.async) {
+						await comp(...args);
+					} else if (comp) {
+						comp(...args);
+					}
+				}
+			}
+
+			__output.push('</main>');
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+Layout.async = true;
+
+export function Content(__output) {
+	_$_.push_component();
+
+	let visible = track(true);
+
+	__output.push('<div');
+	__output.push(' class="content"');
+	__output.push('>');
+
+	{
+		__output.push('<!--[-->');
+
+		if (_$_.get(visible)) {
+			__output.push('<p');
+			__output.push(' class="text"');
+			__output.push('>');
+
+			{
+				__output.push('Hello world');
+			}
+
+			__output.push('</p>');
+		}
+
+		__output.push('<!--]-->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function LayoutWithContent(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = Content;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}

package/tests/hydration/components/hmr.ripple

@@ -0,0 +1,35 @@
+// 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.
+import { track } from 'ripple';
+
+// 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>
+}

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();
+	});
+});