feat: add view mounted suspense hook

Add an example usage for how to use the useViewReadySuspense hook.

Author: floryst

src/core/View.tsx

@@ -24,6 +24,7 @@ export default forwardRef(function View(props: ViewProps, fwdRef) {
       multiViewRoot ? parentedViewRef.current : singleViewRef.current;
     return {
       isInMultiViewRoot: () => multiViewRoot,
+      isMounted: () => getView()?.isMounted() ?? false,
       getViewContainer: () => getView()?.getViewContainer() ?? null,
       getOpenGLRenderWindow: () => getView()?.getOpenGLRenderWindow() ?? null,
       getRenderWindow: () => getView()?.getRenderWindow() ?? null,

src/core/internal/ParentedView.tsx

@@ -27,6 +27,7 @@ import {
 } from '../modules/useInteractorStyle';
 import useViewEvents, { ViewEvents } from '../modules/useViewEvents';
 import Renderer from '../Renderer';
+import { viewMountedEvent } from './events';
 import { DefaultProps, ViewProps } from './view-shared';
 
 /**
@@ -172,9 +173,16 @@ const ParentedView = forwardRef(function ParentedView(
 
   // --- api --- //
 
+  let mounted = false;
+  useMount(() => {
+    mounted = true;
+    viewMountedEvent.trigger();
+  });
+
   const api = useMemo<IView>(
     () => ({
       isInMultiViewRoot: () => true,
+      isMounted: () => mounted,
       getViewContainer: () => containerRef.current,
       getOpenGLRenderWindow: () => openGLRenderWindowAPI,
       getRenderWindow: () => renderWindowAPI,
@@ -187,6 +195,7 @@ const ParentedView = forwardRef(function ParentedView(
         rendererRef.current?.resetCamera(boundsToUse),
     }),
     [
+      mounted,
       openGLRenderWindowAPI,
       renderWindowAPI,
       getInteractorStyle,

src/core/internal/SingleView.tsx

@@ -24,6 +24,7 @@ import useViewEvents, { ViewEvents } from '../modules/useViewEvents';
 import OpenGLRenderWindow from '../OpenGLRenderWindow';
 import Renderer from '../Renderer';
 import RenderWindow from '../RenderWindow';
+import { viewMountedEvent } from './events';
 import { DefaultProps, ViewProps } from './view-shared';
 
 /**
@@ -84,9 +85,16 @@ const SingleView = forwardRef(function SingleView(props: ViewProps, fwdRef) {
 
   // --- api --- //
 
+  let mounted = false;
+  useMount(() => {
+    mounted = true;
+    viewMountedEvent.trigger();
+  });
+
   const api = useMemo<IView>(
     () => ({
       isInMultiViewRoot: () => false,
+      isMounted: () => mounted,
       getViewContainer: () =>
         openGLRenderWindowRef.current?.getContainer() ?? null,
       getOpenGLRenderWindow: () => openGLRenderWindowRef.current,
@@ -99,7 +107,7 @@ const SingleView = forwardRef(function SingleView(props: ViewProps, fwdRef) {
       resetCamera: (boundsToUse?: Bounds) =>
         rendererRef.current?.resetCamera(boundsToUse),
     }),
-    [getInteractorStyle, setInteractorStyle]
+    [mounted, getInteractorStyle, setInteractorStyle]
   );
 
   useImperativeHandle(fwdRef, () => api);

src/core/internal/events.ts

@@ -0,0 +1,33 @@
+export type EventListener = (...args: any[]) => void;
+
+function createEvent() {
+  const callbacks: EventListener[] = [];
+
+  const off = (callback: EventListener) => {
+    const idx = callbacks.indexOf(callback);
+    if (idx === -1) return;
+    callbacks.splice(idx, 1);
+  };
+
+  const on = (callback: EventListener) => {
+    callbacks.push(callback);
+    return () => off(callback);
+  };
+
+  const once = (callback: EventListener) => {
+    const stop = on(() => {
+      stop();
+      callback();
+    });
+  };
+
+  const trigger = (...args: any[]) => {
+    callbacks.forEach((cb) => {
+      cb(...args);
+    });
+  };
+
+  return { off, on, once, trigger };
+}
+
+export const viewMountedEvent = createEvent();

src/suspense/index.ts

@@ -0,0 +1 @@
+export * from './useViewReadySuspense';

src/suspense/useViewReadySuspense.ts

@@ -0,0 +1,38 @@
+import { useContext, useRef } from 'react';
+import { Contexts } from '..';
+import { viewMountedEvent } from '../core/internal/events';
+import { makeDeferred } from '../utils/deferred';
+
+type Status = 'pending' | 'error' | 'success';
+
+/**
+ * A suspense-aware hook that waits for the containing View to be mounted before evaluating the getter.
+ * @param getter
+ * @returns
+ */
+export function useViewReadySuspense<T>(getter: () => T): T {
+  const view = useContext(Contexts.ViewContext);
+  if (!view) throw new Error('No view context');
+
+  let status = 'pending' as Status;
+  const deferred = useRef(makeDeferred<void>());
+
+  if (view.isMounted()) {
+    status = 'success';
+  } else {
+    viewMountedEvent.once(() => {
+      status = 'success';
+      deferred.current.resolve();
+    });
+  }
+
+  switch (status) {
+    case 'success':
+      return getter();
+    case 'pending':
+      throw deferred.current.promise;
+    case 'error':
+    default:
+      throw new Error('Unexpected unreachable code execution');
+  }
+}

src/types.ts

@@ -56,6 +56,7 @@ export interface IRenderer {
 
 export interface IView {
   isInMultiViewRoot(): boolean;
+  isMounted(): boolean;
   getViewContainer(): HTMLElement | null;
   getRenderer(): IRenderer | null;
   getRenderWindow(): IRenderWindow | null;

src/utils/deferred.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const empty = () => {};
+
+export function makeDeferred<T>() {
+  let resolve: (value: T) => void = empty;
+  let reject: (error: unknown) => void = empty;
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return { resolve, reject, promise };
+}

usage/src/App.jsx

@@ -45,6 +45,10 @@ const demos = new Map([
     lazy(() => import('./Tests/ChangeInteractorStyle')),
   ],
   ['MultiView', lazy(() => import('./MultiView'))],
+  [
+    'Suspense/GeometrySuspense',
+    lazy(() => import('./Suspense/GeometrySuspense')),
+  ],
 ]);
 
 function App() {

usage/src/Suspense/GeometrySuspense.jsx

@@ -0,0 +1,63 @@
+import { Suspense, useRef } from 'react';
+
+import {
+  Algorithm,
+  GeometryRepresentation,
+  useViewContext,
+  useViewReadySuspense,
+  View,
+} from 'react-vtk-js';
+
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+
+const styles = {
+  position: 'relative',
+  zIndex: 10,
+  textAlign: 'center',
+  color: 'white',
+};
+
+function Inner() {
+  const view = useViewContext();
+  const renderer = view.getRenderer();
+  return (
+    <div style={styles}>
+      Without Suspense: has renderer = {String(!!renderer)}
+    </div>
+  );
+}
+
+function InnerSuspense() {
+  const useRenderer = () => useViewContext().getRenderer();
+  const renderer = useViewReadySuspense(useRenderer);
+  return (
+    <div style={styles}>With Suspense: has renderer = {String(!!renderer)}</div>
+  );
+}
+
+// React complains about unique key prop but I don't see why
+function Example() {
+  const view = useRef();
+  const rep = useRef();
+
+  return (
+    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+      <View ref={view}>
+        <Inner />
+        <Suspense>
+          <InnerSuspense />
+        </Suspense>
+        <GeometryRepresentation ref={rep}>
+          <Algorithm
+            vtkClass={vtkConeSource}
+            state={{
+              height: 1,
+            }}
+          />
+        </GeometryRepresentation>
+      </View>
+    </div>
+  );
+}
+
+export default Example;