@ripple-ts/compat-react 0.2.166 → 0.2.167

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/compat-react",
-  "version": "0.2.166",
+  "version": "0.2.167",
   "description": "Ripple compatibility layer for React",
   "main": "src/index.js",
   "author": "Dominic Gannaway",
@@ -17,7 +17,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "ripple": "0.2.166"
+    "ripple": "0.2.167"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",

package/tests/index.test.ripple

@@ -1,5 +1,6 @@
 import { track, flushSync } from 'ripple';
-import { act } from 'react';
+import { act, createContext, useContext } from 'react';
+import { Ripple } from '@ripple-ts/compat-react';
 
 describe('compat-react', () => {
 	it('should render basic React JSX inside tsx:react tags', async () => {
@@ -7,9 +8,7 @@ describe('compat-react', () => {
 			<div>
 				<h1>{'Hello from Ripple'}</h1>
 				<tsx:react>
-					<div className="react-content">
-						{'Hello from React'}
-					</div>
+					<div className="react-content">Hello from React</div>
 				</tsx:react>
 			</div>
 		}
@@ -31,12 +30,8 @@ describe('compat-react', () => {
 			<div>
 				<tsx:react>
 					<>
-						<span className="first">
-							{'First'}
-						</span>
-						<span className="second">
-							{'Second'}
-						</span>
+						<span className="first">First</span>
+						<span className="second">Second</span>
 					</>
 				</tsx:react>
 			</div>
@@ -60,9 +55,7 @@ describe('compat-react', () => {
 				<tsx:react>
 					<div className="wrapper">
 						<div className="inner">
-							<span className="content">
-								{'Nested content'}
-							</span>
+							<span className="content">Nested content</span>
 						</div>
 					</div>
 				</tsx:react>
@@ -87,9 +80,7 @@ describe('compat-react', () => {
 			<div class="container">
 				<div class="ripple">{'This is Ripple'}</div>
 				<tsx:react>
-					<div className="react">
-						{'This is React'}
-					</div>
+					<div className="react">This is React</div>
 				</tsx:react>
 				<div class="ripple-2">{'Back to Ripple'}</div>
 			</div>
@@ -114,15 +105,11 @@ describe('compat-react', () => {
 		component App() {
 			<div>
 				<tsx:react>
-					<div className="react-1">
-						{'React Block 1'}
-					</div>
+					<div className="react-1">React Block 1</div>
 				</tsx:react>
 				<div class="ripple-middle">{'Ripple in between'}</div>
 				<tsx:react>
-					<div className="react-2">
-						{'React Block 2'}
-					</div>
+					<div className="react-2">React Block 2</div>
 				</tsx:react>
 			</div>
 		}
@@ -147,9 +134,7 @@ describe('compat-react', () => {
 			<div>
 				<tsx:react>
 					<div className="react" id="test-id">
-						<span>
-							{'Content'}
-						</span>
+						<span>Content</span>
 					</div>
 				</tsx:react>
 			</div>
@@ -170,13 +155,9 @@ describe('compat-react', () => {
 			<div>
 				<tsx:react>
 					<>
-						<div className="outer">
-							{'Outer'}
-						</div>
+						<div className="outer">Outer</div>
 						<>
-							<div className="inner">
-								{'Inner'}
-							</div>
+							<div className="inner">Inner</div>
 						</>
 					</>
 				</tsx:react>
@@ -201,15 +182,9 @@ describe('compat-react', () => {
 				<tsx:react>
 					<div className="list">
 						<ul>
-							<li>
-								{'Item 1'}
-							</li>
-							<li>
-								{'Item 2'}
-							</li>
-							<li>
-								{'Item 3'}
-							</li>
+							<li>Item 1</li>
+							<li>Item 2</li>
+							<li>Item 3</li>
 						</ul>
 					</div>
 				</tsx:react>
@@ -301,4 +276,88 @@ describe('compat-react', () => {
 		expect(reactContent).toBeTruthy();
 		expect(reactContent.textContent).toBe('This is rendered from a React component!');
 	});
+
+	it('should handle a React context propagation', async () => {
+		const SomeContext = createContext('Default Value');
+
+		function ReactChild() {
+			return useContext(SomeContext);
+		}
+
+		component App() {
+			<div>
+				<tsx:react>
+					<SomeContext.Provider value="Provided Value">
+						<ReactChild />
+					</SomeContext.Provider>
+				</tsx:react>
+			</div>
+		}
+
+		await act(async () => {
+			render(App);
+		});
+
+		const reactContent = container.querySelector('div > div');
+		expect(reactContent).toBeTruthy();
+		expect(reactContent.textContent).toBe('Provided Value');
+	});
+
+	it('should handle a React errors', async () => {
+		function ReactChild() {
+			throw new Error('Test Error');
+		}
+
+		component App() {
+			try {
+				<div>
+					<tsx:react>
+						<ReactChild />
+					</tsx:react>
+				</div>
+			} catch (e) {
+				<div class="error">{'ReactChiild had an error'}</div>
+			}
+		}
+
+		await act(async () => {
+			render(App);
+		});
+
+		const reactContent = container.querySelector('div > div');
+		expect(reactContent).toBeTruthy();
+		expect(reactContent.textContent).toBe('ReactChiild had an error');
+	});
+
+	it('should handle a React errors #2', async () => {
+		function ReactChild() {
+			throw new Error('Test Error');
+		}
+
+		component RippleChild() {
+			<tsx:react>
+				<ReactChild />
+			</tsx:react>
+		}
+
+		component App() {
+			try {
+				<div>
+					<tsx:react>
+						<Ripple component={RippleChild} />
+					</tsx:react>
+				</div>
+			} catch (e) {
+				<div class="error">{'ReactChiild had an error'}</div>
+			}
+		}
+
+		await act(async () => {
+			render(App);
+		});
+
+		const reactContent = container.querySelector('div > div');
+		expect(reactContent).toBeTruthy();
+		expect(reactContent.textContent).toBe('ReactChiild had an error');
+	});
 });

package/tests/setup.js

@@ -1,7 +1,14 @@
-import { beforeEach, afterEach } from 'vitest';
+import { beforeEach, afterEach, vi } from 'vitest';
 import { mount } from 'ripple';
 import { createReactCompat } from '../src/index.js';
 
+// Configure React testing environment for act() support
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// Suppress React error/warning logs during tests
+vi.spyOn(console, 'error').mockImplementation(() => {});
+vi.spyOn(console, 'warn').mockImplementation(() => {});
+
 /**
  * @param {() => void} component
  */