@ripple-ts/compat-react 0.2.167 → 0.2.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/compat-react",
-  "version": "0.2.167",
+  "version": "0.2.169",
   "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.167"
+    "ripple": "0.2.169"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",

package/src/index.js

@@ -5,6 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import {
 	useSyncExternalStore,
 	useLayoutEffect,
+	useEffect,
 	useRef,
 	useState,
 	Component,
@@ -24,6 +25,8 @@ import {
 	suspend,
 	TRY_BLOCK,
 	destroy_block,
+	root,
+	init_operations,
 } from 'ripple/internal/client';
 import { Context } from 'ripple';
 
@@ -202,7 +205,7 @@ export function Ripple({ component, props }) {
 	}
 	const portals = portals_ref.current;
 
-	useLayoutEffect(() => {
+	useEffect(() => {
 		const span = /** @type {HTMLSpanElement | null} */ (ref.current);
 		if (span === null) {
 			return;
@@ -210,6 +213,12 @@ export function Ripple({ component, props }) {
 		const frag = document.createDocumentFragment();
 		const anchor = document.createTextNode('');
 		const block = get_block_from_dom(span);
+
+		if (block === null) {
+			throw new Error(
+				'Ripple component must be rendered inside a Ripple root. If you are using Ripple inside a React app, ensure your React root contains <RippleRoot>.',
+			);
+		}
 		const tracked_props = (tracked_props_ref.current = tracked(props || {}, block));
 		const proxied_props = proxy_props(() => get_tracked(tracked_props));
 		frag.append(anchor);
@@ -230,7 +239,7 @@ export function Ripple({ component, props }) {
 		};
 	}, [component]);
 
-	useLayoutEffect(() => {
+	useEffect(() => {
 		set(/** @type {any} */ (tracked_props_ref.current), props || {});
 	}, [props]);
 
@@ -241,3 +250,23 @@ export function Ripple({ component, props }) {
 		],
 	});
 }
+
+/**
+ * @param {{ children: React.ReactNode }} props
+ */
+export function RippleRoot({ children }) {
+	const ref = useRef(null);
+
+	useLayoutEffect(() => {
+		const target_element = /** @type {HTMLSpanElement | null} */ (ref.current);
+		if (target_element === null) {
+			return;
+		}
+		init_operations();
+		const e = root(() => {});
+		// @ts-ignore
+		target_element.__ripple_block = e;
+	}, []);
+
+	return jsx('span', { ref, style: { display: 'contents' }, children });
+}

package/tests/index.test.ripple

@@ -1,363 +1,421 @@
 import { track, flushSync } from 'ripple';
 import { act, createContext, useContext } from 'react';
 import { Ripple } from '@ripple-ts/compat-react';
+import { createRoot } from 'react-dom/client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RippleRoot } from '@ripple-ts/compat-react';
 
 describe('compat-react', () => {
-	it('should render basic React JSX inside tsx:react tags', async () => {
-		component App() {
-			<div>
-				<h1>{'Hello from Ripple'}</h1>
-				<tsx:react>
-					<div className="react-content">Hello from React</div>
-				</tsx:react>
-			</div>
-		}
+	describe('tsx:react integration', () => {
+		it('should render basic React JSX inside tsx:react tags', async () => {
+			component App() {
+				<div>
+					<h1>{'Hello from Ripple'}</h1>
+					<tsx:react>
+						<div className="react-content">Hello from React</div>
+					</tsx:react>
+				</div>
+			}
+
+			await act(async () => {
+				render(App);
+			});
 
-		await act(async () => {
-			render(App);
+			const rippleHeading = container.querySelector('h1');
+			const reactDiv = container.querySelector('.react-content');
+			expect(rippleHeading).toBeTruthy();
+			expect(rippleHeading.textContent).toBe('Hello from Ripple');
+			expect(reactDiv).toBeTruthy();
+			expect(reactDiv.textContent).toBe('Hello from React');
 		});
 
-		const rippleHeading = container.querySelector('h1');
-		const reactDiv = container.querySelector('.react-content');
-		expect(rippleHeading).toBeTruthy();
-		expect(rippleHeading.textContent).toBe('Hello from Ripple');
-		expect(reactDiv).toBeTruthy();
-		expect(reactDiv.textContent).toBe('Hello from React');
-	});
+		it('should render React fragments inside tsx:react tags', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<>
+							<span className="first">First</span>
+							<span className="second">Second</span>
+						</>
+					</tsx:react>
+				</div>
+			}
 
-	it('should render React fragments inside tsx:react tags', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<>
-						<span className="first">First</span>
-						<span className="second">Second</span>
-					</>
-				</tsx:react>
-			</div>
-		}
+			await act(async () => {
+				render(App);
+			});
 
-		await act(async () => {
-			render(App);
+			const first = container.querySelector('.first');
+			const second = container.querySelector('.second');
+			expect(first).toBeTruthy();
+			expect(first.textContent).toBe('First');
+			expect(second).toBeTruthy();
+			expect(second.textContent).toBe('Second');
 		});
 
-		const first = container.querySelector('.first');
-		const second = container.querySelector('.second');
-		expect(first).toBeTruthy();
-		expect(first.textContent).toBe('First');
-		expect(second).toBeTruthy();
-		expect(second.textContent).toBe('Second');
-	});
-
-	it('should render nested React components', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<div className="wrapper">
-						<div className="inner">
-							<span className="content">Nested content</span>
+		it('should render nested React components', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<div className="wrapper">
+							<div className="inner">
+								<span className="content">Nested content</span>
+							</div>
 						</div>
-					</div>
-				</tsx:react>
-			</div>
-		}
+					</tsx:react>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
+			await act(async () => {
+				render(App);
+			});
+
+			const wrapper = container.querySelector('.wrapper');
+			const inner = container.querySelector('.inner');
+			const content = container.querySelector('.content');
+			expect(wrapper).toBeTruthy();
+			expect(inner).toBeTruthy();
+			expect(content).toBeTruthy();
+			expect(content.textContent).toBe('Nested content');
 		});
 
-		const wrapper = container.querySelector('.wrapper');
-		const inner = container.querySelector('.inner');
-		const content = container.querySelector('.content');
-		expect(wrapper).toBeTruthy();
-		expect(inner).toBeTruthy();
-		expect(content).toBeTruthy();
-		expect(content.textContent).toBe('Nested content');
-	});
-
-	it('should mix Ripple and React content', async () => {
-		component App() {
-			<div class="container">
-				<div class="ripple">{'This is Ripple'}</div>
-				<tsx:react>
-					<div className="react">This is React</div>
-				</tsx:react>
-				<div class="ripple-2">{'Back to Ripple'}</div>
-			</div>
-		}
+		it('should mix Ripple and React content', async () => {
+			component App() {
+				<div class="container">
+					<div class="ripple">{'This is Ripple'}</div>
+					<tsx:react>
+						<div className="react">This is React</div>
+					</tsx:react>
+					<div class="ripple-2">{'Back to Ripple'}</div>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
+			await act(async () => {
+				render(App);
+			});
+
+			const rippleDiv = container.querySelector('.ripple');
+			const reactDiv = container.querySelector('.react');
+			const rippleDiv2 = container.querySelector('.ripple-2');
+			expect(rippleDiv).toBeTruthy();
+			expect(rippleDiv.textContent).toBe('This is Ripple');
+			expect(reactDiv).toBeTruthy();
+			expect(reactDiv.textContent).toBe('This is React');
+			expect(rippleDiv2).toBeTruthy();
+			expect(rippleDiv2.textContent).toBe('Back to Ripple');
 		});
 
-		const rippleDiv = container.querySelector('.ripple');
-		const reactDiv = container.querySelector('.react');
-		const rippleDiv2 = container.querySelector('.ripple-2');
-		expect(rippleDiv).toBeTruthy();
-		expect(rippleDiv.textContent).toBe('This is Ripple');
-		expect(reactDiv).toBeTruthy();
-		expect(reactDiv.textContent).toBe('This is React');
-		expect(rippleDiv2).toBeTruthy();
-		expect(rippleDiv2.textContent).toBe('Back to Ripple');
-	});
-
-	it('should handle multiple tsx:react blocks', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<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>
-				</tsx:react>
-			</div>
-		}
+		it('should handle multiple tsx:react blocks', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<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>
+					</tsx:react>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
+			await act(async () => {
+				render(App);
+			});
+
+			const react1 = container.querySelector('.react-1');
+			const middle = container.querySelector('.ripple-middle');
+			const react2 = container.querySelector('.react-2');
+			expect(react1).toBeTruthy();
+			expect(react1.textContent).toBe('React Block 1');
+			expect(middle).toBeTruthy();
+			expect(middle.textContent).toBe('Ripple in between');
+			expect(react2).toBeTruthy();
+			expect(react2.textContent).toBe('React Block 2');
 		});
 
-		const react1 = container.querySelector('.react-1');
-		const middle = container.querySelector('.ripple-middle');
-		const react2 = container.querySelector('.react-2');
-		expect(react1).toBeTruthy();
-		expect(react1.textContent).toBe('React Block 1');
-		expect(middle).toBeTruthy();
-		expect(middle.textContent).toBe('Ripple in between');
-		expect(react2).toBeTruthy();
-		expect(react2.textContent).toBe('React Block 2');
-	});
+		it('should handle React components with attributes', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<div className="react" id="test-id">
+							<span>Content</span>
+						</div>
+					</tsx:react>
+				</div>
+			}
 
-	it('should handle React components with attributes', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<div className="react" id="test-id">
-						<span>Content</span>
-					</div>
-				</tsx:react>
-			</div>
-		}
+			await act(async () => {
+				render(App);
+			});
 
-		await act(async () => {
-			render(App);
+			const reactDiv = container.querySelector('.react');
+			expect(reactDiv).toBeTruthy();
+			expect(reactDiv.id).toBe('test-id');
+			expect(reactDiv.querySelector('span').textContent).toBe('Content');
 		});
 
-		const reactDiv = container.querySelector('.react');
-		expect(reactDiv).toBeTruthy();
-		expect(reactDiv.id).toBe('test-id');
-		expect(reactDiv.querySelector('span').textContent).toBe('Content');
-	});
-
-	it('should handle nested fragments', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<>
-						<div className="outer">Outer</div>
+		it('should handle nested fragments', async () => {
+			component App() {
+				<div>
+					<tsx:react>
 						<>
-							<div className="inner">Inner</div>
+							<div className="outer">Outer</div>
+							<>
+								<div className="inner">Inner</div>
+							</>
 						</>
-					</>
-				</tsx:react>
-			</div>
-		}
+					</tsx:react>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
-		});
+			await act(async () => {
+				render(App);
+			});
 
-		const outer = container.querySelector('.outer');
-		const inner = container.querySelector('.inner');
-		expect(outer).toBeTruthy();
-		expect(outer.textContent).toBe('Outer');
-		expect(inner).toBeTruthy();
-		expect(inner.textContent).toBe('Inner');
-	});
+			const outer = container.querySelector('.outer');
+			const inner = container.querySelector('.inner');
+			expect(outer).toBeTruthy();
+			expect(outer.textContent).toBe('Outer');
+			expect(inner).toBeTruthy();
+			expect(inner.textContent).toBe('Inner');
+		});
 
-	it('should handle complex nested structures', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<div className="list">
-						<ul>
-							<li>Item 1</li>
-							<li>Item 2</li>
-							<li>Item 3</li>
-						</ul>
-					</div>
-				</tsx:react>
-			</div>
-		}
+		it('should handle complex nested structures', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<div className="list">
+							<ul>
+								<li>Item 1</li>
+								<li>Item 2</li>
+								<li>Item 3</li>
+							</ul>
+						</div>
+					</tsx:react>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
+			await act(async () => {
+				render(App);
+			});
+
+			const list = container.querySelector('.list');
+			const items = container.querySelectorAll('li');
+			expect(list).toBeTruthy();
+			expect(items.length).toBe(3);
+			expect(items[0].textContent).toBe('Item 1');
+			expect(items[1].textContent).toBe('Item 2');
+			expect(items[2].textContent).toBe('Item 3');
 		});
 
-		const list = container.querySelector('.list');
-		const items = container.querySelectorAll('li');
-		expect(list).toBeTruthy();
-		expect(items.length).toBe(3);
-		expect(items[0].textContent).toBe('Item 1');
-		expect(items[1].textContent).toBe('Item 2');
-		expect(items[2].textContent).toBe('Item 3');
-	});
+		it('should handle empty fragments', async () => {
+			component App() {
+				<div>
+					<tsx:react>
+						<></>
+					</tsx:react>
+					<div class="after">{'After empty fragment'}</div>
+				</div>
+			}
 
-	it('should handle empty fragments', async () => {
-		component App() {
-			<div>
-				<tsx:react>
-					<></>
-				</tsx:react>
-				<div class="after">{'After empty fragment'}</div>
-			</div>
-		}
+			await act(async () => {
+				render(App);
+			});
 
-		await act(async () => {
-			render(App);
+			const after = container.querySelector('.after');
+			expect(after).toBeTruthy();
+			expect(after.textContent).toBe('After empty fragment');
 		});
 
-		const after = container.querySelector('.after');
-		expect(after).toBeTruthy();
-		expect(after.textContent).toBe('After empty fragment');
-	});
+		it('should work with Ripple reactivity', async () => {
+			component App() {
+				let count = track(0);
+				<div>
+					<div class="ripple-count">{@count}</div>
+					<button onClick={() => @count++}>{'Increment'}</button>
+					<tsx:react>
+						<div className="react-message">
+							{'React content is static'}
+						</div>
+					</tsx:react>
+				</div>
+			}
 
-	it('should work with Ripple reactivity', async () => {
-		component App() {
-			let count = track(0);
-			<div>
-				<div class="ripple-count">{@count}</div>
-				<button onClick={() => @count++}>{'Increment'}</button>
-				<tsx:react>
-					<div className="react-message">
-						{'React content is static'}
-					</div>
-				</tsx:react>
-			</div>
-		}
+			await act(async () => {
+				render(App);
+			});
+
+			const rippleCount = container.querySelector('.ripple-count');
+			const button = container.querySelector('button');
+			const reactMessage = container.querySelector('.react-message');
+			expect(rippleCount.textContent).toBe('0');
+			expect(reactMessage.textContent).toBe('React content is static');
+			button.click();
+			flushSync();
+			expect(rippleCount.textContent).toBe('1');
+			expect(reactMessage.textContent).toBe('React content is static');
+			button.click();
+			flushSync();
+			expect(rippleCount.textContent).toBe('2');
+		});
+
+		it('should handle a call expression at the top-level of a tsx:react block', async () => {
+			function renderReactText() {
+				return 'This is rendered from a React component!';
+			}
 
-		await act(async () => {
-			render(App);
+			component App() {
+				<div>
+					<tsx:react>
+						{renderReactText()}
+					</tsx:react>
+				</div>
+			}
+
+			await act(async () => {
+				render(App);
+			});
+
+			const reactContent = container.querySelector('div > div');
+			expect(reactContent).toBeTruthy();
+			expect(reactContent.textContent).toBe('This is rendered from a React component!');
 		});
 
-		const rippleCount = container.querySelector('.ripple-count');
-		const button = container.querySelector('button');
-		const reactMessage = container.querySelector('.react-message');
-		expect(rippleCount.textContent).toBe('0');
-		expect(reactMessage.textContent).toBe('React content is static');
-		button.click();
-		flushSync();
-		expect(rippleCount.textContent).toBe('1');
-		expect(reactMessage.textContent).toBe('React content is static');
-		button.click();
-		flushSync();
-		expect(rippleCount.textContent).toBe('2');
-	});
+		it('should handle a React context propagation', async () => {
+			const SomeContext = createContext('Default Value');
 
-	it('should handle a call expression at the top-level of a tsx:react block', async () => {
-		function renderReactText() {
-			return 'This is rendered from a React component!';
-		}
+			function ReactChild() {
+				return useContext(SomeContext);
+			}
 
-		component App() {
-			<div>
-				<tsx:react>
-					{renderReactText()}
-				</tsx:react>
-			</div>
-		}
+			component App() {
+				<div>
+					<tsx:react>
+						<SomeContext.Provider value="Provided Value">
+							<ReactChild />
+						</SomeContext.Provider>
+					</tsx:react>
+				</div>
+			}
 
-		await act(async () => {
-			render(App);
+			await act(async () => {
+				render(App);
+			});
+
+			const reactContent = container.querySelector('div > div');
+			expect(reactContent).toBeTruthy();
+			expect(reactContent.textContent).toBe('Provided Value');
 		});
 
-		const reactContent = container.querySelector('div > div');
-		expect(reactContent).toBeTruthy();
-		expect(reactContent.textContent).toBe('This is rendered from a React component!');
-	});
+		it('should handle a React errors', async () => {
+			function ReactChild() {
+				throw new Error('Test Error');
+			}
 
-	it('should handle a React context propagation', async () => {
-		const SomeContext = createContext('Default Value');
+			component App() {
+				try {
+					<div>
+						<tsx:react>
+							<ReactChild />
+						</tsx:react>
+					</div>
+				} catch (e) {
+					<div class="error">{'ReactChiild had an error'}</div>
+				}
+			}
 
-		function ReactChild() {
-			return useContext(SomeContext);
-		}
+			await act(async () => {
+				render(App);
+			});
+
+			const reactContent = container.querySelector('div > div');
+			expect(reactContent).toBeTruthy();
+			expect(reactContent.textContent).toBe('ReactChiild had an error');
+		});
 
-		component App() {
-			<div>
+		it('should handle a React errors #2', async () => {
+			function ReactChild() {
+				throw new Error('Test Error');
+			}
+
+			component RippleChild() {
 				<tsx:react>
-					<SomeContext.Provider value="Provided Value">
-						<ReactChild />
-					</SomeContext.Provider>
+					<ReactChild />
 				</tsx:react>
-			</div>
-		}
+			}
 
-		await act(async () => {
-			render(App);
-		});
+			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('Provided Value');
+			const reactContent = container.querySelector('div > div');
+			expect(reactContent).toBeTruthy();
+			expect(reactContent.textContent).toBe('ReactChiild had an error');
+		});
 	});
 
-	it('should handle a React errors', async () => {
-		function ReactChild() {
-			throw new Error('Test Error');
-		}
+	describe('Ripple in React app', () => {
+		let container: null | Node;
 
-		component App() {
-			try {
-				<div>
-					<tsx:react>
-						<ReactChild />
-					</tsx:react>
-				</div>
-			} catch (e) {
-				<div class="error">{'ReactChiild had an error'}</div>
-			}
-		}
+		beforeEach(() => {
+			container = document.createElement('div');
+			document.body.appendChild(container);
+		});
 
-		await act(async () => {
-			render(App);
+		afterEach(() => {
+			document.body.removeChild(container!);
+			container = null;
 		});
 
-		const reactContent = container.querySelector('div > div');
-		expect(reactContent).toBeTruthy();
-		expect(reactContent.textContent).toBe('ReactChiild had an error');
-	});
+		it('should render a basic React app', async () => {
+			function App() {
+				return jsx('div', { children: 'Hello from React App with RippleRoot' });
+			}
 
-	it('should handle a React errors #2', async () => {
-		function ReactChild() {
-			throw new Error('Test Error');
-		}
+			const root = createRoot(container!);
 
-		component RippleChild() {
-			<tsx:react>
-				<ReactChild />
-			</tsx:react>
-		}
+			await act(async () => {
+				root.render(jsx(RippleRoot, { children: jsx(App, {}) }));
+			});
 
-		component App() {
-			try {
-				<div>
-					<tsx:react>
-						<Ripple component={RippleChild} />
-					</tsx:react>
-				</div>
-			} catch (e) {
-				<div class="error">{'ReactChiild had an error'}</div>
+			expect(container!.textContent).toBe('Hello from React App with RippleRoot');
+		});
+
+		it('should render a basic React app with RippleRoot', async () => {
+			component RippleComponent() {
+				<div>{'Hello from Ripple Component'}</div>
 			}
-		}
 
-		await act(async () => {
-			render(App);
-		});
+			function App() {
+				return jsxs('div', {
+					children: [
+						'Hello from React App with RippleRoot\n',
+						jsx(Ripple, { component: RippleComponent }),
+					],
+				});
+			}
+
+			const root = createRoot(container!);
 
-		const reactContent = container.querySelector('div > div');
-		expect(reactContent).toBeTruthy();
-		expect(reactContent.textContent).toBe('ReactChiild had an error');
+			await act(async () => {
+				root.render(jsx(RippleRoot, { children: jsx(App, {}) }));
+			});
+
+			expect(container!.textContent).toBe(
+				'Hello from React App with RippleRoot\nHello from Ripple Component',
+			);
+		});
 	});
 });

package/types/index.d.ts

@@ -12,3 +12,5 @@ export declare function createReactCompat(): {
 };
 
 export declare function Ripple<P>(component: Component<P>, props?: P): React.JSX.Element;
+
+export declare function RippleRoot(props: { children: React.ReactNode }): React.JSX.Element;