react-pixi-fiber 2.0.0-rc.1 → 2.0.0-rc.3

package/cjs/react-pixi-fiber.development.js

@@ -23412,6 +23412,10 @@ function setValueForProperty(type, instance, propName, value, internalHandle) {
 }
 
 // Based on: https://github.com/facebook/react/blob/27535e7bfcb63e8a4d65f273311e380b4ca12eff/packages/react-dom/src/client/ReactDOMFiberComponent.js
+
+// PixiJS v4 keeps these classes under extras/mesh/particles, which v5+ does not export. Reading them from a
+// plain copy of the namespace stops bundlers from reporting them as missing ES module exports.
+var PIXI_V4 = Object.assign({}, PIXI__namespace);
 function createInstance(type, props, rootContainer, hostContext, internalHandle) {
   var instance;
   switch (type) {
@@ -23422,7 +23426,7 @@ function createInstance(type, props, rootContainer, hostContext, internalHandle)
         tint: props.tint
       };
       try {
-        instance = new PIXI__namespace.extras.BitmapText(props.text, style);
+        instance = new PIXI_V4.extras.BitmapText(props.text, style);
       } catch (e) {
         instance = new PIXI__namespace.BitmapText(props.text, style);
       }
@@ -23435,14 +23439,14 @@ function createInstance(type, props, rootContainer, hostContext, internalHandle)
       break;
     case TYPES.NINE_SLICE_PLANE:
       try {
-        instance = new PIXI__namespace.mesh.NineSlicePlane(props.texture, props.leftWidth, props.topHeight, props.rightWidth, props.bottomHeight);
+        instance = new PIXI_V4.mesh.NineSlicePlane(props.texture, props.leftWidth, props.topHeight, props.rightWidth, props.bottomHeight);
       } catch (e) {
         instance = new PIXI__namespace.NineSlicePlane(props.texture, props.leftWidth, props.topHeight, props.rightWidth, props.bottomHeight);
       }
       break;
     case TYPES.PARTICLE_CONTAINER:
       try {
-        instance = new PIXI__namespace.particles.ParticleContainer(props.maxSize, props.properties, props.batchSize, props.autoResize);
+        instance = new PIXI_V4.particles.ParticleContainer(props.maxSize, props.properties, props.batchSize, props.autoResize);
       } catch (e) {
         instance = new PIXI__namespace.ParticleContainer(props.maxSize, props.properties, props.batchSize, props.autoResize);
       }
@@ -23455,7 +23459,7 @@ function createInstance(type, props, rootContainer, hostContext, internalHandle)
       break;
     case TYPES.TILING_SPRITE:
       try {
-        instance = new PIXI__namespace.extras.TilingSprite(props.texture, props.width, props.height);
+        instance = new PIXI_V4.extras.TilingSprite(props.texture, props.width, props.height);
       } catch (e) {
         instance = new PIXI__namespace.TilingSprite(props.texture, props.width, props.height);
       }
@@ -24057,26 +24061,51 @@ function useStageRenderer(props, appRef, canvasRef) {
 
     // Cleanup current PIXI.Application when unmounting
     return function cleanup() {
-      cleanupStage(appRef.current, STAGE_OPTIONS_UNMOUNT);
+      // There is no PIXI.Application while waiting for a new canvas, see `useStageRerenderer`
+      if (appRef.current != null) {
+        cleanupStage(appRef.current, STAGE_OPTIONS_UNMOUNT);
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 }
+
+// Returns `key` for the rendered canvas. It changes every time PIXI.Application has to be recreated,
+// so the new PIXI.Application gets a fresh canvas and WebGL context. The old PIXI.Application is
+// destroyed later (see `cleanupStage`) and destroying a renderer unbinds the current program
+// (PixiJS v6) or loses the context (PixiJS v7) of its canvas, which would break the new
+// PIXI.Application if it was sharing that canvas.
 function useStageRerenderer(props, appRef, canvasRef) {
   var prevProps = usePreviousProps(props);
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    canvasKey = _useState2[0],
+    setCanvasKey = _useState2[1];
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useLayoutEffect(function () {
     // This is first render, no need to do anything
-    if (!appRef.current || prevProps === emptyObject$1) return;
-    var app = props.app;
+    if (prevProps === emptyObject$1) return;
+    var app = props.app,
+      options = props.options;
     if (app instanceof PIXI__namespace.Application) {
       // Update stage tree
       rerenderStage(appRef.current, prevProps, props);
       return;
     }
-    var options = props.options,
-      _props$options = props.options;
+    var view = canvasRef.current;
+
+    // Previous update destroyed PIXI.Application and rendered a new canvas, create PIXI.Application on it
+    if (appRef.current == null) {
+      appRef.current = createPixiApplication(_objectSpread2({
+        view: view
+      }, options));
+
+      // Set initial properties
+      renderStage(appRef.current, props);
+      return;
+    }
+    var _props$options = props.options;
       _props$options.height;
       _props$options.width;
       var otherOptions = _objectWithoutProperties(_props$options, _excluded$1);
@@ -24084,22 +24113,27 @@ function useStageRerenderer(props, appRef, canvasRef) {
       _prevProps$options.height;
       _prevProps$options.width;
       var prevOtherOptions = _objectWithoutProperties(_prevProps$options, _excluded2$1);
-    var view = canvasRef.current;
 
     // We need to create new PIXI.Application when options other than dimensions
     // are changed because some renderer settings are immutable.
     if (!shallowEqual$1(otherOptions, prevOtherOptions)) {
       // Destroy PIXI.Application
       cleanupStage(appRef.current, STAGE_OPTIONS_RECREATE);
+      if (options.view) {
+        // Canvas passed in options as `view` is not ours to replace, reuse it
+        appRef.current = createPixiApplication(_objectSpread2({
+          view: view
+        }, options));
 
-      // Create new PIXI.Application
-      // Canvas passed in options as `view` will be used if provided
-      appRef.current = createPixiApplication(_objectSpread2({
-        view: view
-      }, options));
-
-      // Set initial properties
-      renderStage(appRef.current, props);
+        // Set initial properties
+        renderStage(appRef.current, props);
+      } else {
+        // Render a new canvas, PIXI.Application is created on it in the next update
+        appRef.current = null;
+        setCanvasKey(function (canvasKey) {
+          return canvasKey + 1;
+        });
+      }
     } else {
       // Update stage tree
       rerenderStage(appRef.current, prevProps, props);
@@ -24107,6 +24141,7 @@ function useStageRerenderer(props, appRef, canvasRef) {
       resizeRenderer(appRef.current, prevProps, props);
     }
   });
+  return canvasKey;
 }
 function createStageFunction() {
   var Stage = /*#__PURE__*/React.forwardRef(function Stage(props, ref) {
@@ -24132,7 +24167,7 @@ function createStageFunction() {
     // - useStageRenderer:
     //   - is only called once
     //   - is responsible for creating first PIXI.Application and destroying it when Stage is finally unmounted
-    useStageRerenderer(props, appRef, canvasRef);
+    var canvasKey = useStageRerenderer(props, appRef, canvasRef);
     useStageRenderer(props, appRef, canvasRef);
 
     // Do not render anything if PIXI.Application was provided in props
@@ -24146,6 +24181,7 @@ function createStageFunction() {
     }
     var canvasProps = getCanvasProps(props);
     return /*#__PURE__*/React__default["default"].createElement("canvas", _extends({
+      key: canvasKey,
       ref: canvasRef
     }, canvasProps));
   });
@@ -24167,6 +24203,11 @@ function createStageClass() {
       _this._app = createRef();
       // Store canvas if it was rendered
       _this._canvas = createRef();
+      // Changes every time PIXI.Application has to be recreated, so it gets a fresh canvas.
+      // See `getPixiApplication`.
+      _this.state = {
+        canvasKey: 0
+      };
       return _this;
     }
     _inherits(Stage, _React$Component);
@@ -24185,6 +24226,9 @@ function createStageClass() {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
         var app = this.getPixiApplication(this.props, prevProps);
+
+        // Waiting for a new canvas to be rendered, PIXI.Application is created in the next update
+        if (app === null) return;
         this.renderStage(app, this.props);
         this.rerenderStage(app, this.props, prevProps);
 
@@ -24197,7 +24241,8 @@ function createStageClass() {
         var app = this.props.app;
 
         // Destroy PIXI.Application if it was not provided in props
-        if (!(app instanceof PIXI__namespace.Application)) {
+        // There is no PIXI.Application while waiting for a new canvas, see `getPixiApplication`
+        if (!(app instanceof PIXI__namespace.Application) && this._app.current != null) {
           cleanupStage(this._app.current, STAGE_OPTIONS_UNMOUNT);
         }
       }
@@ -24219,6 +24264,7 @@ function createStageClass() {
         }
         var canvasProps = getCanvasProps(this.props);
         return /*#__PURE__*/React__default["default"].createElement("canvas", _extends({
+          key: this.state.canvasKey,
           ref: this._canvas
         }, canvasProps));
       }
@@ -24235,7 +24281,7 @@ function createStageClass() {
         }
         var view = this._canvas.current;
 
-        // Render stage for the first time
+        // Render stage for the first time, or on a new canvas after PIXI.Application was destroyed
         if (this._app.current == null) {
           // Create new PIXI.Application
           // Canvas passed in options as `view` will be used if provided
@@ -24258,11 +24304,23 @@ function createStageClass() {
           // Destroy PIXI.Application
           cleanupStage(this._app.current, STAGE_OPTIONS_RECREATE);
 
-          // Create new PIXI.Application
-          // Canvas passed in options as `view` will be used if provided
-          return createPixiApplication(_objectSpread2({
-            view: view
-          }, options));
+          // Canvas passed in options as `view` is not ours to replace, reuse it
+          if (options.view) {
+            return createPixiApplication(_objectSpread2({
+              view: view
+            }, options));
+          }
+
+          // Destroying the old PIXI.Application later unbinds or loses the WebGL context of its canvas,
+          // so render a new canvas and create PIXI.Application on it in the next update
+          this._app.current = null;
+          this.setState(function (_ref) {
+            var canvasKey = _ref.canvasKey;
+            return {
+              canvasKey: canvasKey + 1
+            };
+          });
+          return null;
         }
 
         // Return already existing Application otherwise