@ripple-ts/compat-react 0.2.164 → 0.2.165

package/package.json

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

package/src/index.js

@@ -2,7 +2,14 @@
 /** @import { ReactNode } from 'react' */
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useSyncExternalStore, useLayoutEffect, useRef, useState, Component } from 'react';
+import {
+	useSyncExternalStore,
+	useLayoutEffect,
+	useRef,
+	useState,
+	Component,
+	Suspense,
+} from 'react';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import {
@@ -14,6 +21,9 @@ import {
 	tracked,
 	get_tracked,
 	handle_error,
+	suspend,
+	TRY_BLOCK,
+	destroy_block,
 } from 'ripple/internal/client';
 import { Context } from 'ripple';
 
@@ -36,6 +46,22 @@ function map_portals(portals) {
 	});
 }
 
+/**
+ * @param {any} block
+ * @returns {boolean}
+ */
+function is_inside_try_pending(block) {
+	let current = block;
+
+	while (current) {
+		if (current.f & TRY_BLOCK && current.s.a !== null) {
+			return true;
+		}
+		current = current.p;
+	}
+	return false;
+}
+
 export function createReactCompat() {
 	const root_portals = new Map();
 	/** @type {{ portals: Map<any, any>, update: Function}} */
@@ -76,17 +102,30 @@ export function createReactCompat() {
 				};
 			}
 
+			const use_suspense = is_inside_try_pending(e);
+
 			function ReactCompat() {
 				return useSyncExternalStore(subscribe, () => react_node);
 			}
 
+			function SuspenseHandler() {
+				useLayoutEffect(() => {
+					return with_block(e, () => suspend());
+				}, []);
+
+				return null;
+			}
+
 			class ReactCompatBoundary extends Component {
 				state = { e: false };
 
-				static getDerivedStateFromError(error) {
+				static getDerivedStateFromError() {
 					return { e: true };
 				}
 
+				/**
+				 * @param {unknown} error
+				 */
 				componentDidCatch(error) {
 					handle_error(error, e);
 				}
@@ -95,6 +134,12 @@ export function createReactCompat() {
 					if (this.state?.e) {
 						return null;
 					}
+					if (use_suspense) {
+						return jsx(Suspense, {
+							fallback: jsx(SuspenseHandler, {}),
+							children: jsx(ReactCompat, {}),
+						});
+					}
 					return jsx(ReactCompat, {});
 				}
 			}
@@ -169,6 +214,7 @@ export function Ripple({ component, props }) {
 		const proxied_props = proxy_props(() => get_tracked(tracked_props));
 		frag.append(anchor);
 
+		/** @type {any} */
 		const b = with_block(block, () => {
 			PortalContext.set({ portals, update });
 			return branch(() => {
@@ -180,6 +226,7 @@ export function Ripple({ component, props }) {
 
 		return () => {
 			anchor.remove();
+			destroy_block(b);
 		};
 	}, [component]);