add ResizeObserver support for canvas element

package.json

@@ -71,7 +71,7 @@
     "ts-node": "^9.1.1",
     "tsc-watch": "^4.2.9",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "4.1.2"
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
     "@babylonjs/core": "4.x||>5.0.0-alpha",

src/Engine.tsx

@@ -31,6 +31,7 @@ export type EngineProps = {
    */
   canvasId?: string,
   debug?: boolean,
+  observeCanvasResize?: boolean
   // onCreated?: (engine: Engine) => void
 } // TODO: put this in the next major version and remove canvasStyle and canvasId props (breaking changes). & React.CanvasHTMLAttributes<HTMLCanvasElement>
 
@@ -42,6 +43,7 @@ class ReactBabylonjsEngine extends React.Component<EngineProps, EngineState> {
 
   private engine: Nullable<Engine> = null;
   private canvas: Nullable<HTMLCanvasElement | WebGLRenderingContext> = null;
+  private resizeObserver: Nullable<ResizeObserver> = null;
 
   public onBeforeRenderLoopObservable: Observable<Engine> = new Observable<Engine>();
   public onEndRenderLoopObservable: Observable<Engine> = new Observable<Engine>();
@@ -80,35 +82,47 @@ class ReactBabylonjsEngine extends React.Component<EngineProps, EngineState> {
 
     window.addEventListener('resize', this.onResizeWindow)
 
-    this.setState({canRender: true});
+    this.setState({ canRender: true });
   }
 
-  onCanvasRef = (c : HTMLCanvasElement) => {
+  onCanvasRef(c: HTMLCanvasElement) {
     // We are not using the react.createPortal(...), as it adds a ReactDOM dependency, but also
     // it was not flowing the context through to HOCs properly.
     if (this.props.portalCanvas) {
-      this.canvas = document.getElementById('portal-canvas') as  HTMLCanvasElement
+      this.canvas = document.getElementById('portal-canvas') as HTMLCanvasElement
       console.error('set canvas', this.canvas);
     } else {
       if (c) { // null when called from unmountComponent()
         // c.addEventListener('mouseover', this.focus)
         // c.addEventListener('mouseout', this.blur)
         this.canvas = c
+        if (this.props.observeCanvasResize !== false && window?.ResizeObserver) {
+          this.resizeObserver = new ResizeObserver(() => {
+            this.engine!.resize();
+
+          });
+          this.resizeObserver.observe(c);
+        }
       }
     }
     // console.error('onCanvas:', c); // trying to diagnose why HMR keep rebuilding entire Scene!  Look at ProxyComponent v4.
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.removeEventListener('resize', this.onResizeWindow);
 
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
     if (this.engine !== null) {
       this.engine!.dispose();
       this.engine = null;
     }
   }
 
-  render () {
+  render() {
     if (this.state.canRender === false && (this.props.noSSR !== undefined && this.props.noSSR !== false)) {
       if (typeof this.props.noSSR === 'boolean') {
         return null;
@@ -138,11 +152,11 @@ class ReactBabylonjsEngine extends React.Component<EngineProps, EngineState> {
     }
 
     // TODO: this.props.portalCanvas does not need to render a canvas.
-    return <EngineCanvasContext.Provider value={{ engine: this.engine, canvas: this.canvas}}>
+    return <EngineCanvasContext.Provider value={{ engine: this.engine, canvas: this.canvas }}>
       <canvas {...opts} ref={this.onCanvasRef}>
-      {this.engine !== null &&
-        this.props.children
-      }
+        {this.engine !== null &&
+          this.props.children
+        }
       </canvas>
     </EngineCanvasContext.Provider>
   }

src/hooks/loaders/useAssetManager.tsx

@@ -222,7 +222,7 @@ const useAssetManagerWithCache = (): (tasks: Task[], options?: AssetManagerOptio
         try {
           result = await taskPromise;
         } catch (e) {
-          error = e;
+          error = e as Error;
         } finally {
           suspender = null;
         }