@ripple-ts/compat-react 0.2.179 → 0.2.180

package/package.json

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

package/src/index.js

@@ -10,6 +10,7 @@ import {
 	useState,
 	Component,
 	Suspense,
+	use,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -197,6 +198,7 @@ function get_block_from_dom(node) {
 export function Ripple({ component, props }) {
 	const ref = useRef(null);
 	const tracked_props_ref = useRef(/** @type {any} */ (null));
+	const suspense_ref = useRef(/** @type {any} */ (null));
 	const portals_ref = /** @type {React.MutableRefObject<Map<any, any> | null>} */ (useRef(null));
 	const [, update] = useState(0);
 
@@ -205,6 +207,10 @@ export function Ripple({ component, props }) {
 	}
 	const portals = portals_ref.current;
 
+	if (suspense_ref.current !== null) {
+		use(suspense_ref.current);
+	}
+
 	useEffect(() => {
 		const span = /** @type {HTMLSpanElement | null} */ (ref.current);
 		if (span === null) {
@@ -226,9 +232,32 @@ export function Ripple({ component, props }) {
 		/** @type {any} */
 		const b = with_block(block, () => {
 			PortalContext.set({ portals, update });
-			return branch(() => {
-				component(anchor, proxied_props);
-			});
+			const state = {
+				a() {
+					/** @type {((value?: unknown) => void) | undefined} */
+					let resolve;
+					const promise = new Promise((_resolve) => {
+						resolve = _resolve;
+					});
+
+					suspense_ref.current = promise;
+					update((x) => x + 1);
+
+					return () => {
+						resolve?.();
+						suspense_ref.current = null;
+					};
+				},
+				c: null,
+			};
+
+			return branch(
+				() => {
+					component(anchor, proxied_props);
+				},
+				TRY_BLOCK,
+				state,
+			);
 		});
 
 		span.append(frag);