ripple 0.3.22 → 0.3.24

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # ripple
 
+## 0.3.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.24
+
+## 0.3.23
+
+### Patch Changes
+
+- Updated dependencies
+  [[`73ceaac`](https://github.com/Ripple-TS/ripple/commit/73ceaacd029fb634a62252abdda59ab5f2bec15d)]:
+  - @tsrx/ripple@0.0.6
+  - ripple@0.3.23
+
 ## 0.3.22
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/ripple": "0.0.5"
+    "@tsrx/ripple": "0.0.6"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -84,9 +84,9 @@
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
-    "@tsrx/core": "0.0.4"
+    "@tsrx/core": "0.0.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.22"
+    "ripple": "0.3.24"
   }
 }

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

@@ -195,7 +195,7 @@ describe('basic client > errors', () => {
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx', { mode: 'client' });
-		}).toThrow('`await` is not allowed inside client components');
+		}).toThrow(/`await` is not allowed inside components\./);
 	});
 
 	it('should throw error for while loop inside a component', () => {

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -688,6 +688,26 @@ export component App() {
 		expect(result).toContain('_$_.normalize_children(');
 	});
 
+	it(
+		'parses a JS statement inside an element with no trailing whitespace before the closing tag',
+		() => {
+			const source = `component TodoList({ items }: { items: { text: string }[] }) {
+  <ul>var a = "123"</ul>
+}`;
+			const ast = parse(source);
+			const comp = ast.body[0] as unknown as AST.Component;
+			const ul = comp.body.find((n) => n.type === 'Element') as AST.Element;
+			expect(ul.id.name).toBe('ul');
+			expect(ul.children).toHaveLength(1);
+			const decl = ul.children[0] as unknown as AST.VariableDeclaration;
+			expect(decl.type).toBe('VariableDeclaration');
+			expect(decl.kind).toBe('var');
+			expect((decl.declarations[0].id as AST.Identifier).name).toBe('a');
+			expect((decl.declarations[0].init as AST.Literal).value).toBe('123');
+			expect(ul.closingElement?.name?.name).toBe('ul');
+		},
+	);
+
 	it('uses spread_props for spreads that may contain children', () => {
 		const source = `
 component Card(props) {

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

@@ -87,6 +87,7 @@ var root_82 = _$_.template(`<div class="wrapper"><h1>Title</h1><template id="dat
 var root_83 = _$_.template(`<div class="layout"><template id="page-data"></template><main><!></main></div>`, 0);
 var root_85 = _$_.template(`<div class="doc-content"><!></div>`, 0);
 var root_84 = _$_.template(`<!>`, 1, 1);
+var root_86 = _$_.template(`<section class="readable-section"><p>Ergonomics</p><h2>Sibling traversal pattern</h2><p>Before first block</p><p>Before second block</p><pre class="code-block"><code><!></code></pre><p>Between one and two</p><pre class="code-block"><code><!></code></pre><p>Between two and three</p><pre class="code-block"><code><!></code></pre></section>`, 0);
 
 import { track } from 'ripple';
 
@@ -1908,4 +1909,73 @@ export function NestedTemplateInLayout(__anchor, _, __block) {
 	_$_.pop_component();
 }
 
+export function HtmlCodeBlocksWithSiblingChain(__anchor, _, __block) {
+	_$_.push_component();
+
+	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
+	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
+	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
+	var section_3 = root_86();
+
+	{
+		var p_5 = _$_.child(section_3);
+		var h2_3 = _$_.sibling(p_5);
+		var p_4 = _$_.sibling(h2_3);
+		var p_3 = _$_.sibling(p_4);
+		var pre_1 = _$_.sibling(p_3);
+
+		{
+			var code_1 = _$_.child(pre_1);
+
+			{
+				var node_80 = _$_.child(code_1);
+
+				_$_.pop(code_1);
+			}
+		}
+
+		_$_.pop(pre_1);
+
+		var p_6 = _$_.sibling(pre_1);
+		var pre_2 = _$_.sibling(p_6);
+
+		{
+			var code_2 = _$_.child(pre_2);
+
+			{
+				var node_81 = _$_.child(code_2);
+
+				_$_.pop(code_2);
+			}
+		}
+
+		_$_.pop(pre_2);
+
+		var p_7 = _$_.sibling(pre_2);
+		var pre_3 = _$_.sibling(p_7);
+
+		{
+			var code_3 = _$_.child(pre_3);
+
+			{
+				var node_82 = _$_.child(code_3);
+
+				_$_.pop(code_3);
+			}
+		}
+	}
+
+	_$_.render(
+		(__prev) => {
+			_$_.html(node_80, () => html1);
+			_$_.html(node_81, () => html2);
+			_$_.html(node_82, () => html3);
+		},
+		{}
+	);
+
+	_$_.append(__anchor, section_3);
+	_$_.pop_component();
+}
+
 _$_.delegate(['click']);

package/tests/hydration/compiled/client/if-children.js

@@ -370,6 +370,8 @@ export function DomChildrenThenStaticSiblings(__anchor, _, __block) {
 				_$_.pop(li_1);
 			}
 		}
+
+		_$_.pop(ul_1);
 	}
 
 	_$_.pop(div_17);
@@ -387,6 +389,22 @@ export function StaticListThenStaticSiblings(__anchor, _, __block) {
 
 	var div_18 = root_19();
 
+	{
+		var ul_2 = _$_.child(div_18);
+
+		{
+			var li_2 = _$_.child(ul_2);
+
+			_$_.pop(li_2);
+
+			var li_3 = _$_.sibling(li_2);
+
+			_$_.pop(li_3);
+		}
+
+		_$_.pop(ul_2);
+	}
+
 	_$_.append(__anchor, div_18);
 	_$_.pop_component();
 }

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

@@ -2309,5 +2309,134 @@ export function NestedTemplateInLayout() {
 		}
 	});
 
+	_$_.pop_component();
+}
+
+export function HtmlCodeBlocksWithSiblingChain() {
+	_$_.push_component();
+
+	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
+	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
+	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
+
+	_$_.regular_block(() => {
+		_$_.output_push('<section');
+		_$_.output_push(' class="readable-section"');
+		_$_.output_push('>');
+
+		{
+			_$_.output_push('<p');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Ergonomics');
+			}
+
+			_$_.output_push('</p>');
+			_$_.output_push('<h2');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Sibling traversal pattern');
+			}
+
+			_$_.output_push('</h2>');
+			_$_.output_push('<p');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Before first block');
+			}
+
+			_$_.output_push('</p>');
+			_$_.output_push('<p');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Before second block');
+			}
+
+			_$_.output_push('</p>');
+			_$_.output_push('<pre');
+			_$_.output_push(' class="code-block"');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('<code');
+				_$_.output_push('>');
+
+				{
+					const html_value_27 = String(html1 ?? '');
+
+					_$_.output_push('<!--' + _$_.hash(html_value_27) + '-->');
+					_$_.output_push(html_value_27);
+					_$_.output_push('<!---->');
+				}
+
+				_$_.output_push('</code>');
+			}
+
+			_$_.output_push('</pre>');
+			_$_.output_push('<p');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Between one and two');
+			}
+
+			_$_.output_push('</p>');
+			_$_.output_push('<pre');
+			_$_.output_push(' class="code-block"');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('<code');
+				_$_.output_push('>');
+
+				{
+					const html_value_28 = String(html2 ?? '');
+
+					_$_.output_push('<!--' + _$_.hash(html_value_28) + '-->');
+					_$_.output_push(html_value_28);
+					_$_.output_push('<!---->');
+				}
+
+				_$_.output_push('</code>');
+			}
+
+			_$_.output_push('</pre>');
+			_$_.output_push('<p');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('Between two and three');
+			}
+
+			_$_.output_push('</p>');
+			_$_.output_push('<pre');
+			_$_.output_push(' class="code-block"');
+			_$_.output_push('>');
+
+			{
+				_$_.output_push('<code');
+				_$_.output_push('>');
+
+				{
+					const html_value_29 = String(html3 ?? '');
+
+					_$_.output_push('<!--' + _$_.hash(html_value_29) + '-->');
+					_$_.output_push(html_value_29);
+					_$_.output_push('<!---->');
+				}
+
+				_$_.output_push('</code>');
+			}
+
+			_$_.output_push('</pre>');
+		}
+
+		_$_.output_push('</section>');
+	});
+
 	_$_.pop_component();
 }

package/tests/hydration/components/html.tsrx

@@ -532,3 +532,27 @@ export component NestedTemplateInLayout() {
 		<div class="doc-content">{html doc.html}</div>
 	</LayoutWithTemplate>
 }
+
+export component HtmlCodeBlocksWithSiblingChain() {
+	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
+	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
+	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
+
+	<section class="readable-section">
+		<p>{'Ergonomics'}</p>
+		<h2>{'Sibling traversal pattern'}</h2>
+		<p>{'Before first block'}</p>
+		<p>{'Before second block'}</p>
+		<pre class="code-block">
+			<code>{html html1}</code>
+		</pre>
+		<p>{'Between one and two'}</p>
+		<pre class="code-block">
+			<code>{html html2}</code>
+		</pre>
+		<p>{'Between two and three'}</p>
+		<pre class="code-block">
+			<code>{html html3}</code>
+		</pre>
+	</section>
+}

package/tests/hydration/html.test.js

@@ -194,6 +194,21 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('Footer');
 	});
 
+	it('hydrates html code blocks followed by static and dynamic sibling chains', async () => {
+		await hydrateComponent(
+			ServerComponents.HtmlCodeBlocksWithSiblingChain,
+			ClientComponents.HtmlCodeBlocksWithSiblingChain,
+		);
+		const html = container.innerHTML;
+		expect(html).toContain('Sibling traversal pattern');
+		expect(html).toContain('Between one and two');
+		expect(html).toContain('Between two and three');
+		expect(html).toContain('const');
+		expect(html).toContain('a');
+		expect(html).toContain('b');
+		expect(html).toContain('c');
+	});
+
 	it('hydrates full DocsLayout with data mismatch (StylingPage exact reproduction)', async () => {
 		await hydrateComponent(
 			ServerComponents.DocsLayoutWithData,