ripple 0.2.210 → 0.2.211

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ripple
 
+## 0.2.211
+
+### Patch Changes
+
+- [#694](https://github.com/Ripple-TS/ripple/pull/694)
+  [`fa285f4`](https://github.com/Ripple-TS/ripple/commit/fa285f441ab8d748c3dfea6adb463e3ca6d614b5)
+  Thanks [@trueadm](https://github.com/trueadm)! - Add a compiler validation error
+  for rendering `children` through text interpolation (for example `{children}` or
+  `{props.children}`) and direct users to render children as a component
+  (`<@children />`) instead.
+- Updated dependencies
+  [[`fa285f4`](https://github.com/Ripple-TS/ripple/commit/fa285f441ab8d748c3dfea6adb463e3ca6d614b5)]:
+  - ripple@0.2.211
+
 ## 0.2.210
 
 ### 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.210",
+  "version": "0.2.211",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -93,6 +93,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.210"
+    "ripple": "0.2.211"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -2496,7 +2496,15 @@ function RipplePlugin(config) {
 				}
 
 				if (this.value === '#server') {
-					return this.parseServerBlock();
+					// Peek ahead to see if this is a server block (#server { ... }) vs
+					// a server identifier expression (#server.fn(), #server.fn().then())
+					let peek_pos = this.end;
+					while (peek_pos < this.input.length && /\s/.test(this.input[peek_pos])) peek_pos++;
+					if (peek_pos < this.input.length && this.input.charCodeAt(peek_pos) === 123) {
+						// Next non-whitespace character is '{' — parse as server block
+						return this.parseServerBlock();
+					}
+					// Otherwise fall through to parse as expression statement (e.g., #server.fn().then(...))
 				}
 
 				if (this.value === 'component') {

package/src/compiler/types/index.d.ts

@@ -140,7 +140,6 @@ declare module 'estree' {
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
-		ParenthesizedExpression: ParenthesizedExpression;
 	}
 
 	// Missing estree type

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

@@ -190,7 +190,8 @@ export function append(anchor, dom, skip_advance) {
 		}
 
 		// During hydration, if anchor === dom, we're hydrating a child component
-		// where the "anchor" IS the content. Don't advance past it.
+		// where the "anchor" IS the content. Preserve the cursor on the
+		// template's hydrated end node so sibling traversal in the parent is correct.
 		if (anchor === dom) {
 			pop(dom);
 			return;

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

@@ -0,0 +1,139 @@
+import * as _$_ from 'ripple/internal/client';
+
+var root = _$_.template(`<div class="layout"><!></div>`, 0);
+var root_1 = _$_.template(`<div class="single">single</div>`, 0);
+var root_2 = _$_.template(`<h1>title</h1><p>description</p>`, 1);
+var root_3 = _$_.template(`<!>`, 1);
+var root_5 = _$_.template(`<!>`, 1);
+var root_4 = _$_.template(`<!>`, 1);
+var root_7 = _$_.template(`<!><div class="extra">extra</div>`, 1);
+var root_6 = _$_.template(`<!>`, 1);
+var root_9 = _$_.template(`<!>`, 1);
+var root_8 = _$_.template(`<!>`, 1);
+
+export function Layout(__anchor, __props, __block) {
+	_$_.push_component();
+
+	var div_1 = root();
+
+	{
+		var node = _$_.child(div_1);
+
+		_$_.composite(() => __props.children, node, {});
+		_$_.pop(div_1);
+	}
+
+	_$_.append(__anchor, div_1);
+	_$_.pop_component();
+}
+
+export function SingleChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_2 = root_1();
+
+	_$_.append(__anchor, div_2);
+	_$_.pop_component();
+}
+
+export function MultiRootChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment = root_2();
+
+	_$_.next();
+	_$_.append(__anchor, fragment, true);
+	_$_.pop_component();
+}
+
+export function EmptyLayout(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_1 = root_3();
+	var node_1 = _$_.first_child_frag(fragment_1);
+
+	Layout(node_1, {}, _$_.active_block);
+	_$_.append(__anchor, fragment_1);
+	_$_.pop_component();
+}
+
+export function LayoutWithSingleChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_2 = root_4();
+	var node_2 = _$_.first_child_frag(fragment_2);
+
+	Layout(
+		node_2,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_3 = root_5();
+				var node_3 = _$_.first_child_frag(fragment_3);
+
+				SingleChild(node_3, {}, _$_.active_block);
+				_$_.append(__anchor, fragment_3);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_2);
+	_$_.pop_component();
+}
+
+export function LayoutWithMultipleChildren(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_4 = root_6();
+	var node_4 = _$_.first_child_frag(fragment_4);
+
+	Layout(
+		node_4,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_5 = root_7();
+				var node_5 = _$_.first_child_frag(fragment_5);
+
+				SingleChild(node_5, {}, _$_.active_block);
+				_$_.append(__anchor, fragment_5);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_4);
+	_$_.pop_component();
+}
+
+export function LayoutWithMultiRootChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_6 = root_8();
+	var node_6 = _$_.first_child_frag(fragment_6);
+
+	Layout(
+		node_6,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_7 = root_9();
+				var node_7 = _$_.first_child_frag(fragment_7);
+
+				MultiRootChild(node_7, {}, _$_.active_block);
+				_$_.append(__anchor, fragment_7);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_6);
+	_$_.pop_component();
+}

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

@@ -0,0 +1,176 @@
+import * as _$_ from 'ripple/internal/server';
+
+export async function Layout(__output, { children }) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push(' class="layout"');
+		__output.push('>');
+
+		{
+			{
+				const comp = children;
+				const args = [__output, {}];
+
+				if (comp?.async) {
+					await comp(...args);
+				} else if (comp) {
+					comp(...args);
+				}
+			}
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+export function SingleChild(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="single"');
+	__output.push('>');
+
+	{
+		__output.push('single');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function MultiRootChild(__output) {
+	_$_.push_component();
+	__output.push('<h1');
+	__output.push('>');
+
+	{
+		__output.push('title');
+	}
+
+	__output.push('</h1>');
+	__output.push('<p');
+	__output.push('>');
+
+	{
+		__output.push('description');
+	}
+
+	__output.push('</p>');
+	_$_.pop_component();
+}
+
+export function EmptyLayout(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+		const args = [__output, {}];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}
+
+export function LayoutWithSingleChild(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = SingleChild;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}
+
+export function LayoutWithMultipleChildren(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = SingleChild;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					__output.push('<div');
+					__output.push(' class="extra"');
+					__output.push('>');
+
+					{
+						__output.push('extra');
+					}
+
+					__output.push('</div>');
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}
+
+export function LayoutWithMultiRootChild(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = MultiRootChild;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
+	_$_.pop_component();
+}

package/tests/hydration/components/composite.ripple

@@ -0,0 +1,37 @@
+export component Layout({ children }) {
+	<div class="layout">
+		<children />
+	</div>
+}
+
+export component SingleChild() {
+	<div class="single">{'single'}</div>
+}
+
+export component MultiRootChild() {
+	<h1>{'title'}</h1>
+	<p>{'description'}</p>
+}
+
+export component EmptyLayout() {
+	<Layout />
+}
+
+export component LayoutWithSingleChild() {
+	<Layout>
+		<SingleChild />
+	</Layout>
+}
+
+export component LayoutWithMultipleChildren() {
+	<Layout>
+		<SingleChild />
+		<div class="extra">{'extra'}</div>
+	</Layout>
+}
+
+export component LayoutWithMultiRootChild() {
+	<Layout>
+		<MultiRootChild />
+	</Layout>
+}

package/tests/hydration/composite.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/composite.js';
+import * as ClientComponents from './compiled/client/composite.js';
+
+describe('hydration > composite', () => {
+	it('hydrates a layout with no children', async () => {
+		await hydrateComponent(ServerComponents.EmptyLayout, ClientComponents.EmptyLayout);
+		expect(container.innerHTML).toBeHtml('<div class=\"layout\"></div>');
+	});
+
+	it('hydrates a layout with a single child component', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithSingleChild,
+			ClientComponents.LayoutWithSingleChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div></div>',
+		);
+	});
+
+	it('hydrates a layout with multiple children', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultipleChildren,
+			ClientComponents.LayoutWithMultipleChildren,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div><div class=\"extra\">extra</div></div>',
+		);
+	});
+
+	it('hydrates a layout with a child that has multiple roots', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultiRootChild,
+			ClientComponents.LayoutWithMultiRootChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><h1>title</h1><p>description</p></div>',
+		);
+	});
+});