ripple 0.3.51 → 0.3.53

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # ripple
 
+## 0.3.53
+
+### Patch Changes
+
+- Updated dependencies
+  [[`5a59d73`](https://github.com/Ripple-TS/ripple/commit/5a59d73daf60b2652c86ffad2a4eaf3d801e40d7),
+  [`4f360f0`](https://github.com/Ripple-TS/ripple/commit/4f360f008edf61492cf85afa646c797c80a73f22),
+  [`c042672`](https://github.com/Ripple-TS/ripple/commit/c04267255d35945753ca8090006622c96fa0a14f),
+  [`a9d640f`](https://github.com/Ripple-TS/ripple/commit/a9d640f0728996b3f21b452ffe6040e54d82609c),
+  [`5a59d73`](https://github.com/Ripple-TS/ripple/commit/5a59d73daf60b2652c86ffad2a4eaf3d801e40d7),
+  [`2ae792c`](https://github.com/Ripple-TS/ripple/commit/2ae792cdca7d466e552a330ea965cefec2b1f5a5),
+  [`96360f3`](https://github.com/Ripple-TS/ripple/commit/96360f36306180e67ce69e464dd545773e57e8b1)]:
+  - @tsrx/core@0.1.3
+  - @tsrx/ripple@0.1.3
+  - ripple@0.3.53
+
+## 0.3.52
+
+### Patch Changes
+
+- Updated dependencies
+  [[`2010290`](https://github.com/Ripple-TS/ripple/commit/20102904d68951b47dce3958f88ddd1fc150e7a1)]:
+  - @tsrx/core@0.1.2
+  - ripple@0.3.52
+  - @tsrx/ripple@0.1.2
+
 ## 0.3.51
 
 ### 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.51",
+  "version": "0.3.53",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,8 +76,8 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/core": "0.1.1",
-    "@tsrx/ripple": "0.1.1"
+    "@tsrx/core": "0.1.3",
+    "@tsrx/ripple": "0.1.3"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -87,6 +87,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.51"
+    "ripple": "0.3.53"
   }
 }

package/tests/client/try.test.tsrx

@@ -12,6 +12,40 @@ import {
 } from 'ripple';
 
 describe('try block with catch and pending', () => {
+	it('renders nothing for an empty pending fallback before resolving', async () => {
+		let resolve_value: (value: string) => void = () => {};
+		const promise = new Promise<string>((resolve) => {
+			resolve_value = resolve;
+		});
+
+		component App() {
+			<span class="before">{'before'}</span>
+			try {
+				let &[data] = trackAsync(() => promise);
+				<p class="resolved">{data}</p>
+			} pending {}
+			<span class="after">{'after'}</span>
+		}
+
+		render(App);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		expect(container.querySelector('.before')?.textContent).toBe('before');
+		expect(container.querySelector('.after')?.textContent).toBe('after');
+		expect(container.querySelector('.resolved')).toBeNull();
+		expect(container.innerHTML).not.toContain('loading');
+
+		resolve_value('resolved value');
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		expect(container.querySelector('.resolved')?.textContent).toBe('resolved value');
+		expect(container.querySelector('.before')?.textContent).toBe('before');
+		expect(container.querySelector('.after')?.textContent).toBe('after');
+	});
+
 	it('catch block works when a child throws synchronously', async () => {
 		component App() {
 			try {

package/tests/client/tsx.test.tsrx

@@ -317,8 +317,12 @@ describe('tsx expression', () => {
 			let &[index] = track(0);
 
 			const el = <tsx>
-				<div id={'item-' + index} class={'item pos-' + index} data-index={index} title={'Item ' +
-					index}>
+				<div
+					id={'item-' + index}
+					class={'item pos-' + index}
+					data-index={index}
+					title={'Item ' + index}
+				>
 					{'Item ' + index}
 				</div>
 			</tsx>;

package/tests/server/try.test.tsrx

@@ -1,6 +1,23 @@
 import { trackAsync } from 'ripple';
 
 describe('try block with catch and pending (server)', () => {
+	it('renders resolved content with an empty pending fallback', async () => {
+		component App() {
+			<span>{'before'}</span>
+			try {
+				let &[data] = trackAsync(() => Promise.resolve('resolved value'));
+				<p>{data}</p>
+			} pending {}
+			<span>{'after'}</span>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('before');
+		expect(body).toContain('resolved value');
+		expect(body).toContain('after');
+		expect(body).not.toContain('loading');
+	});
+
 	it('catch block works when component throws before await with pending block', async () => {
 		component ThrowingChild() {
 			throw new Error('sync error');