Use React 18 renderer and fix empty cell bug

package.json

@@ -72,6 +72,7 @@
     "@jupyterlab/services": "^7.0.0",
     "@jupyterlab/ui-components": "^4.0.0",
     "@lumino/widgets": "^2.0.0",
+    "@react-hookz/web": "^24.0.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/H5WebInCell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import H5webApp from './H5webApp';
+import { useMeasure } from '@react-hookz/web';
+
+interface Props {
+  path: string;
+}
+
+function H5WebInCell(props: Props) {
+  const { path } = props;
+
+  // Wait for cell to have non-empty size so H5Web can render safely
+  const [rect, cellRef] = useMeasure<HTMLDivElement>();
+
+  return (
+    <div ref={cellRef} className="h5web-in-cell">
+      {rect && rect.width > 0 && <H5webApp filePath={path} />}
+    </div>
+  );
+}
+
+export default H5WebInCell;

src/H5webApp.tsx

@@ -1,28 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { App, getFeedbackMailto, H5GroveProvider } from '@h5web/app';
 import { ServerConnection } from '@jupyterlab/services';
 
 const FEEDBACK_EMAIL = '[email protected]';
 
-function TwoRenderApp() {
-  const [isFirstRender, setIsFirstRender] = useState(true);
-
-  useEffect(() => {
-    setIsFirstRender(false);
-  }, []);
-
-  if (isFirstRender) {
-    return null;
-  }
-
-  return (
-    <App
-      getFeedbackURL={(context) => getFeedbackMailto(context, FEEDBACK_EMAIL)}
-      disableDarkMode
-    />
-  );
-}
-
 function H5webApp(props: { filePath: string }) {
   const { filePath } = props;
   const { baseUrl, token } = ServerConnection.makeSettings();
@@ -42,7 +23,12 @@ function H5webApp(props: { filePath: string }) {
         filepath={filePath}
         axiosConfig={axiosConfig}
       >
-        <TwoRenderApp />
+        <App
+          getFeedbackURL={(context) =>
+            getFeedbackMailto(context, FEEDBACK_EMAIL)
+          }
+          disableDarkMode
+        />
       </H5GroveProvider>
     </div>
   );

src/mimeplugin.tsx

@@ -2,10 +2,10 @@ import type { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { Widget } from '@lumino/widgets';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import HDF5_FILE_TYPE from './fileType';
-import H5webApp from './H5webApp';
+import H5WebInCell from './H5WebInCell';
 
 class HDF5FilePathRenderer extends Widget implements IRenderMime.IRenderer {
   /* Renders HDF5 files from their path with H5web */
@@ -22,15 +22,8 @@ class HDF5FilePathRenderer extends Widget implements IRenderMime.IRenderer {
       throw new TypeError('Expected string');
     }
 
-    return new Promise<void>((resolve) => {
-      ReactDOM.render(
-        <div className="h5web-in-cell">
-          <H5webApp filePath={path} />
-        </div>,
-        this.node,
-        () => resolve()
-      );
-    });
+    createRoot(this.node).render(<H5WebInCell path={path} />);
+    return Promise.resolve();
   }
 }
 

yarn.lock

@@ -1329,7 +1329,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-hookz/web@npm:24.0.4":
+"@react-hookz/web@npm:24.0.4, @react-hookz/web@npm:^24.0.4":
   version: 24.0.4
   resolution: "@react-hookz/web@npm:24.0.4"
   dependencies:
@@ -5200,6 +5200,7 @@ __metadata:
     "@jupyterlab/services": ^7.0.0
     "@jupyterlab/ui-components": ^4.0.0
     "@lumino/widgets": ^2.0.0
+    "@react-hookz/web": ^24.0.4
     "@types/node": ^18.15.11
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0