react-pixi-fiber 1.0.0-beta.7 → 1.0.0

package/CHANGELOG.md

@@ -9,18 +9,25 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 
 
-## [1.0.0-beta.7] - 2020-12-12
+## [1.0.0-beta.16] - 2022-01-08
 
 ### Added
 - Added ReactDOM-like prop validation in development ([#47])
 - Add ES format output
+- Added missing `prop-types` dependency ([#221])
 
 ### Changed
 - Updated build dependencies
 - Updated dev dependencies
+- Changed `Stage` class and function component types to be the same ([#225])
+- Changed Stage to delay destroying PIXI.Application when unmounting
+- Changed usePixiApp to throw an error when used outside of <Stage /> ([#227])
 
 ### Fixed
 - Fixed type of `oldProps` sent to `customApplyProps` of `CustomPIXIComponent`
+- Fixed hook-based `Stage` to render and rerender synchronously ([#204])
+- Fixed type compatibility with PixiJS v6.0.0 ([#210])
+- Fixed breaking change when undefined values were assigned to props with previously defined values
 
 ### Removed
 - Removed `performance-now` dependency
@@ -399,8 +406,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added `<TilingSprite />` component
 
 
-[Unreleased]: https://github.com/michalochman/react-pixi-fiber/compare/v1.0.0-beta.7...HEAD
-[1.0.0-beta.7]: https://github.com/michalochman/react-pixi-fiber/compare/v0.14.2...v1.0.0-beta.7
+[Unreleased]: https://github.com/michalochman/react-pixi-fiber/compare/v1.0.0-beta.16...HEAD
+[1.0.0-beta.16]: https://github.com/michalochman/react-pixi-fiber/compare/v0.14.3...v1.0.0-beta.16
 [0.14.2]: https://github.com/michalochman/react-pixi-fiber/compare/v0.14.1...v0.14.2
 [0.14.1]: https://github.com/michalochman/react-pixi-fiber/compare/v0.14.0...v0.14.1
 [0.14.0]: https://github.com/michalochman/react-pixi-fiber/compare/v0.13.2...v0.14.0
@@ -447,6 +454,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 [0.2.0]: https://github.com/michalochman/react-pixi-fiber/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/michalochman/react-pixi-fiber/compare/v0.1.0...v0.1.1
 
+[#227]: https://github.com/michalochman/react-pixi-fiber/issues/227
+[#225]: https://github.com/michalochman/react-pixi-fiber/issues/225
+[#221]: https://github.com/michalochman/react-pixi-fiber/issues/221
+[#210]: https://github.com/michalochman/react-pixi-fiber/issues/210
+[#204]: https://github.com/michalochman/react-pixi-fiber/issues/204
 [#196]: https://github.com/michalochman/react-pixi-fiber/issues/196
 [#185]: https://github.com/michalochman/react-pixi-fiber/issues/185
 [#182]: https://github.com/michalochman/react-pixi-fiber/pull/182

package/README.md

@@ -1,20 +1,60 @@
-# ReactPixiFiber – React Fiber renderer for PixiJS 
-[![npm](https://img.shields.io/npm/v/react-pixi-fiber.svg)](https://npmjs.com/package/react-pixi-fiber)
-[![License](https://img.shields.io/github/license/michalochman/react-pixi-fiber.svg)](https://github.com/michalochman/react-pixi-fiber/blob/master/LICENSE)
-[![CircleCI](https://img.shields.io/circleci/project/github/michalochman/react-pixi-fiber/master.svg)](https://circleci.com/gh/michalochman/react-pixi-fiber/tree/master)
-[![codecov](https://img.shields.io/codecov/c/github/michalochman/react-pixi-fiber/master.svg)](https://codecov.io/gh/michalochman/react-pixi-fiber/branch/master)
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![gitter](https://img.shields.io/gitter/room/react-pixi-fiber/Lobby.svg)](https://gitter.im/react-pixi-fiber/Lobby)
-
-ReactPixiFiber is a JavaScript library for writing PixiJS applications using React declarative style in React 16 and React 17.
-
-For React <16.0.0 see [`react-pixi`].
+<div align="center">
+  <img alt="ReactPixiFiber" src="./react-pixi.svg" width="500" />
+</div>
+
+<div align="center">
+  <h1>ReactPixiFiber – React Fiber renderer for PixiJS</h1>
+
+  <p>
+    ReactPixiFiber is a JavaScript library for writing <a href="https://pixijs.com/">PixiJS</a> applications using <a href="https://reactjs.org/">React</a> declarative style in React 16 and above.
+    <br />
+    For React <16.0.0 see <a href="https://github.com/Izzimach/react-pixi">react-pixi</a>.
+  </p>
+
+  <a href="https://npmjs.com/package/react-pixi-fiber">
+    <img alt="npm" src="https://img.shields.io/npm/v/react-pixi-fiber.svg" />
+  </a>
+  <a href="https://github.com/michalochman/react-pixi-fiber/blob/master/LICENSE">
+    <img alt="License" src="https://img.shields.io/github/license/michalochman/react-pixi-fiber.svg" />
+  </a>
+  <a href="https://circleci.com/gh/michalochman/react-pixi-fiber/tree/master">
+    <img alt="CircleCI" src="https://img.shields.io/circleci/project/github/michalochman/react-pixi-fiber/master.svg" />
+  </a>
+  <a href="https://codecov.io/gh/michalochman/react-pixi-fiber/branch/master">
+    <img alt="codecov" src="https://img.shields.io/codecov/c/github/michalochman/react-pixi-fiber/master.svg" />
+  </a>
+  <a href="
+  [![styled with prettier]()](">
+    <img alt="styled with prettier" src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" />
+  </a>
+  <a href="https://gitter.im/react-pixi-fiber/Lobby">
+    <img alt="gitter" src="https://img.shields.io/gitter/room/react-pixi-fiber/Lobby.svg" />
+  </a>
+</div>
 
 ## Demo
 
 See [Rotating Bunny](https://codesandbox.io/s/q7oj1p0jo6) demo.
 
 
+## 🚀 Migrating from version `0.x.y`? 🚀
+
+Read [migration guide](#migrating-from-react-pixi-fiber0xy-before-version-100). 
+
+## Installing
+
+The current version assumes [React] >16.0.0 and [PixiJS] >4.4.0
+
+    yarn add react-pixi-fiber prop-types pixi.js
+
+or
+
+    npm install react-pixi-fiber prop-types pixi.js --save
+
+Refer to next sections to see usage examples.
+
+This package works flawlessly with [Create React App](https://github.com/facebookincubator/create-react-app) – see examples below, they already use it.
+
 ## Usage
 
 ### With ReactDOM
@@ -73,20 +113,173 @@ This example will render [`PIXI.Text`] object into a [Root Container] of PIXI Ap
 4. Wait few seconds and browse examples that will open in new browser window.
 
 
-## Installing
+## Migrating from `react-pixi-fiber@0.x.y` (before version `1.0.0`)
 
-The current version assumes [React] >16.0.0 and [PixiJS] >4.4.0
+<details>
+  <summary>
+    <strong>Changed built-in <code>Stage</code> and the one returned by <code>createStageClass()</code> to have the same API</strong>
+  </summary>
 
-    yarn add react-pixi-fiber
+It is now possible to get `ref` to built-in `Stage`.
 
-or
+Unless you are using class-based `Stage` component explicitly in your application, for example you are extending it, you should prefer to use built-in `Stage` instead of creating it with `createStageClass()`.
+
+Data available on the `Stage` "instance":
+* `_app` - PIXI.Application instance
+* `_canvas` - HTMLCanvasElement instance
+* `props` - props passed to Stage component
+
+For example:
+```js
+import * as React from "react";
+import { Stage, Text } from "react-pixi-fiber";
+
+const width = 600;
+const height = 400;
+const options = {
+  backgroundColor: 0x56789a,
+  width: width,
+  height: height
+};
+const style = {
+  width: width,
+  height: height
+};
+
+function App() {
+  const stageRef = React.useRef()
+  React.useEffect(() => {
+    // Access PIXI.Application instance
+    console.log(stageRef.current?._app.current)
+    // Access HTMLCanvasElement instance
+    console.log(stageRef.current?._canvas.current)
+    // Access props passed to Stage component
+    console.log(stageRef.current?.props)
+  }, [])
+
+  return (
+    <Stage options={options} style={style} ref={stageRef}>
+      <Text x={100} y={100} text="Hello world!" />
+    </Stage>
+  );
+}
+```
+</details>
+
+<details>
+  <summary>
+    <strong>Changed <code>PIXI.Application</code> exposed by <code>Stage</code> to be React <code>ref</code></strong>
+  </summary>
+
+This is only relevant if you were using `createStageClass()` to create `Stage` component, as it was impossible to get `ref` when using built-in `Stage` as if was a function component, which triggered `Warning: Function components cannot be given refs` error.
+
+For example:
+```diff
+import * as React from "react";
+import { createStageClass, Text } from "react-pixi-fiber";
+
+const Stage = createStageClass()
+
+const width = 600;
+const height = 400;
+const options = {
+  backgroundColor: 0x56789a,
+  width: width,
+  height: height
+};
+const style = {
+  width: width,
+  height: height
+};
+
+function App() {
+  const stageRef = React.useRef()
+  React.useEffect(() => {
+-    console.log(stageRef.current?._app.renderer)
++    console.log(stageRef.current?._app.current.renderer)
+  }, [])
 
-    npm install react-pixi-fiber --save
+  return (
+    <Stage options={options} style={style} ref={stageRef}>
+      <Text x={100} y={100} text="Hello world!" />
+    </Stage>
+  );
+}
+```
+</details>
 
-This package works flawlessly with [Create React App](https://github.com/facebookincubator/create-react-app) – see examples above, they already use it.
+<details>
+  <summary>
+    <strong>Changed <code>oldProps</code> in <code>customApplyProps</code> to not be initialised when the component is first rendered</strong>
+  </summary>
 
+Make sure to check if `oldProps` is initialised before trying to read properties from it.
+
+For example:
+```diff
+import { Container, CustomPIXIComponent } from "react-pixi-fiber"
+
+const TYPE = "CustomContainer"
+const behavior = {
+  customApplyProps: function (instance, oldProps, newProps) {
+-    const { customProp: oldCustomProp, ...otherOldProps } = oldProps
++    const { customProp: oldCustomProp, ...otherOldProps } = oldProps ?? {}
+    const { customProp, ...otherNewProps } = newProps
+    if (customProp !== oldCustomProp) {
+      // Do something when customProp value have changed
+    }
+    this.applyDisplayObjectProps(otherOldProps, otherNewProps)
+  },
+  customDisplayObject: function ({ customProp, ...props }) {
+    const container = new PIXI.Container(props)
+    if (customProp === "foo") {
+      // Do something when customProp is equal to "foo"
+    }
+    return container
+  },
+}
+
+export default CustomPIXIComponent(behavior, TYPE)
+```
+</details>
+
+<details>
+  <summary>
+    <strong>Changed <code>applyProps</code> to <code>applyDisplayObjectProps</code></strong>
+  </summary>
+
+
+`react-pixi-fiber` now needs to know the type of component (e.g. `"Sprite"`) to properly apply the props.
+
+For example:
+```diff
+-import { applyProps } from "react-pixi-fiber"
++import { applyDisplayObjectProps } from "react-pixi-fiber"
+
+function ApplyAnimatedValues(instance, props) {
+  if (instance instanceof PIXI.DisplayObject) {
+-    applyProps(instance, {}, props)
++    // Component has custom way of applying props - use that
++    if (typeof instance._customApplyProps === "function") {
++      instance._customApplyProps(instance, {}, props)
++    }
++    // Component doesn't have custom way of applying props - use default way
++    else {
++      const type = instance.constructor.name
++      applyDisplayObjectProps(type, instance, {}, props)
+    }
+  } else {
+    return false
+  }
+}
+```
+
+Refer to the implementation, when in doubt:
+* old `applyProps` -> https://github.com/michalochman/react-pixi-fiber/blob/64e8e9f991f51b407f3af108da732e186429454a/src/ReactPixiFiber.js#L43
+* new `applyDisplayObjectProps` -> https://github.com/michalochman/react-pixi-fiber/blob/3a9b71b8d18180117bf70459dd6b4419c5ef1c21/src/ReactPixiFiberComponent.js#L161
+</details>
 
-## Migrating from [`react-pixi`]
+## Migrating from `react-pixi`
 
 It is possible to use React Pixi Fiber as a drop-in replacement for `react-pixi`. 
 
@@ -496,7 +689,7 @@ Yes! Awesome!
 
 ### What version of PixiJS I can use?
 
-Both PixiJS v4 and v5 are supported.
+PixiJS v4, v5 and v6 are supported.
 
 ### Can I use already existing [`PIXI.Application`]?
 

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

@@ -7,21 +7,40 @@ var ReactPixiFiber = require('react-pixi-fiber');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var ReactPixiFiber__namespace = /*#__PURE__*/_interopNamespace(ReactPixiFiber);
 
 // Note: ReactPIXI.factories is not supported
 
-var CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;
-var render = ReactDOM__default['default'].render;
-var unmountComponentAtNode = ReactDOM__default['default'].unmountComponentAtNode;
-var BitmapText = ReactPixiFiber.BitmapText;
-var DisplayObjectContainer = ReactPixiFiber.Container;
-var Graphics = ReactPixiFiber.Graphics;
-var ParticleContainer = ReactPixiFiber.ParticleContainer;
-var Sprite = ReactPixiFiber.Sprite;
-var Stage = ReactPixiFiber.Stage;
-var Text = ReactPixiFiber.Text;
-var TilingSprite = ReactPixiFiber.TilingSprite;
+var CustomPIXIComponent = ReactPixiFiber__namespace.CustomPIXIComponent;
+var render = ReactDOM__default["default"].render;
+var unmountComponentAtNode = ReactDOM__default["default"].unmountComponentAtNode;
+var BitmapText = ReactPixiFiber__namespace.BitmapText;
+var DisplayObjectContainer = ReactPixiFiber__namespace.Container;
+var Graphics = ReactPixiFiber__namespace.Graphics;
+var ParticleContainer = ReactPixiFiber__namespace.ParticleContainer;
+var Sprite = ReactPixiFiber__namespace.Sprite;
+var Stage = ReactPixiFiber__namespace.Stage;
+var Text = ReactPixiFiber__namespace.Text;
+var TilingSprite = ReactPixiFiber__namespace.TilingSprite;
 var ReactPIXI = {
   // Render methods
   CustomPIXIComponent: CustomPIXIComponent,
@@ -47,6 +66,6 @@ exports.Sprite = Sprite;
 exports.Stage = Stage;
 exports.Text = Text;
 exports.TilingSprite = TilingSprite;
-exports.default = ReactPIXI;
+exports["default"] = ReactPIXI;
 exports.render = render;
 exports.unmountComponentAtNode = unmountComponentAtNode;

package/cjs/react-pixi-alias.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-dom"),t=require("react-pixi-fiber");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e),n=t.CustomPIXIComponent,i=o.default.render,p=o.default.unmountComponentAtNode,a=t.BitmapText,s=t.Container,u=t.Graphics,x=t.ParticleContainer,m=t.Sprite,l=t.Stage,C=t.Text,c=t.TilingSprite,d={CustomPIXIComponent:n,render:i,unmountComponentAtNode:p,BitmapText:a,DisplayObjectContainer:s,Graphics:u,ParticleContainer:x,Sprite:m,Stage:l,Text:C,TilingSprite:c};exports.BitmapText=a,exports.CustomPIXIComponent=n,exports.DisplayObjectContainer=s,exports.Graphics=u,exports.ParticleContainer=x,exports.Sprite=m,exports.Stage=l,exports.Text=C,exports.TilingSprite=c,exports.default=d,exports.render=i,exports.unmountComponentAtNode=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-dom"),t=require("react-pixi-fiber");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=r(e),i=n(t),p=i.CustomPIXIComponent,a=o.default.render,u=o.default.unmountComponentAtNode,s=i.BitmapText,c=i.Container,l=i.Graphics,x=i.ParticleContainer,f=i.Sprite,d=i.Stage,m=i.Text,C=i.TilingSprite,b={CustomPIXIComponent:p,render:a,unmountComponentAtNode:u,BitmapText:s,DisplayObjectContainer:c,Graphics:l,ParticleContainer:x,Sprite:f,Stage:d,Text:m,TilingSprite:C};exports.BitmapText=s,exports.CustomPIXIComponent=p,exports.DisplayObjectContainer=c,exports.Graphics=l,exports.ParticleContainer=x,exports.Sprite=f,exports.Stage=d,exports.Text=m,exports.TilingSprite=C,exports.default=b,exports.render=a,exports.unmountComponentAtNode=u;
 //# sourceMappingURL=react-pixi-alias.production.min.js.map

package/cjs/react-pixi-alias.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-pixi-alias.production.min.js","sources":["../src/react-pixi-alias/index.js"],"sourcesContent":["import ReactDOM from \"react-dom\";\nimport * as ReactPixiFiber from \"react-pixi-fiber\";\n\n// react-pixi like API\n// Note: ReactPIXI.factories is not supported\n\nexport const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;\nexport const render = ReactDOM.render;\nexport const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;\nexport const BitmapText = ReactPixiFiber.BitmapText;\nexport const DisplayObjectContainer = ReactPixiFiber.Container;\nexport const Graphics = ReactPixiFiber.Graphics;\nexport const ParticleContainer = ReactPixiFiber.ParticleContainer;\nexport const Sprite = ReactPixiFiber.Sprite;\nexport const Stage = ReactPixiFiber.Stage;\nexport const Text = ReactPixiFiber.Text;\nexport const TilingSprite = ReactPixiFiber.TilingSprite;\n\nconst ReactPIXI = {\n  // Render methods\n  CustomPIXIComponent,\n  render,\n  unmountComponentAtNode,\n  // Components\n  BitmapText,\n  DisplayObjectContainer,\n  Graphics,\n  ParticleContainer,\n  Sprite,\n  Stage,\n  Text,\n  TilingSprite,\n};\n\nexport default ReactPIXI;\n"],"names":["CustomPIXIComponent","ReactPixiFiber","render","ReactDOM","unmountComponentAtNode","BitmapText","DisplayObjectContainer","Graphics","ParticleContainer","Sprite","Stage","Text","TilingSprite","ReactPIXI"],"mappings":"gNAMaA,EAAsBC,sBACtBC,EAASC,UAASD,OAClBE,EAAyBD,UAASC,uBAClCC,EAAaJ,aACbK,EAAyBL,YACzBM,EAAWN,WACXO,EAAoBP,oBACpBQ,EAASR,SACTS,EAAQT,QACRU,EAAOV,OACPW,EAAeX,eAEtBY,EAAY,CAEhBb,oBAAAA,EACAE,OAAAA,EACAE,uBAAAA,EAEAC,WAAAA,EACAC,uBAAAA,EACAC,SAAAA,EACAC,kBAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,aAAAA"}
+{"version":3,"file":"react-pixi-alias.production.min.js","sources":["../src/react-pixi-alias/index.js"],"sourcesContent":["import ReactDOM from \"react-dom\";\nimport * as ReactPixiFiber from \"react-pixi-fiber\";\n\n// react-pixi like API\n// Note: ReactPIXI.factories is not supported\n\nexport const CustomPIXIComponent = ReactPixiFiber.CustomPIXIComponent;\nexport const render = ReactDOM.render;\nexport const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;\nexport const BitmapText = ReactPixiFiber.BitmapText;\nexport const DisplayObjectContainer = ReactPixiFiber.Container;\nexport const Graphics = ReactPixiFiber.Graphics;\nexport const ParticleContainer = ReactPixiFiber.ParticleContainer;\nexport const Sprite = ReactPixiFiber.Sprite;\nexport const Stage = ReactPixiFiber.Stage;\nexport const Text = ReactPixiFiber.Text;\nexport const TilingSprite = ReactPixiFiber.TilingSprite;\n\nconst ReactPIXI = {\n  // Render methods\n  CustomPIXIComponent,\n  render,\n  unmountComponentAtNode,\n  // Components\n  BitmapText,\n  DisplayObjectContainer,\n  Graphics,\n  ParticleContainer,\n  Sprite,\n  Stage,\n  Text,\n  TilingSprite,\n};\n\nexport default ReactPIXI;\n"],"names":["CustomPIXIComponent","ReactPixiFiber","render","ReactDOM","unmountComponentAtNode","BitmapText","DisplayObjectContainer","Container","Graphics","ParticleContainer","Sprite","Stage","Text","TilingSprite","ReactPIXI"],"mappings":"sfAMaA,EAAsBC,EAAeD,oBACrCE,EAASC,EAAQ,QAACD,OAClBE,EAAyBD,EAAQ,QAACC,uBAClCC,EAAaJ,EAAeI,WAC5BC,EAAyBL,EAAeM,UACxCC,EAAWP,EAAeO,SAC1BC,EAAoBR,EAAeQ,kBACnCC,EAAST,EAAeS,OACxBC,EAAQV,EAAeU,MACvBC,EAAOX,EAAeW,KACtBC,EAAeZ,EAAeY,aAErCC,EAAY,CAEhBd,oBAAAA,EACAE,OAAAA,EACAE,uBAAAA,EAEAC,WAAAA,EACAC,uBAAAA,EACAE,SAAAA,EACAC,kBAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,aAAAA"}