Merge pull request #47 from michalochman/feature/dev-prop-validation

Add ReactDOM-like prop validation in development

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+### Added
+- Added ReactDOM-like prop validation in development ([#47])
+
+
 ## [0.12.1] - 2019-12-26
 
 ### Fixed
@@ -25,17 +29,23 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [0.11.1] - 2019-10-25
 
+### Fixed
 - Fixed usage of Point copy/copyFrom in PixiJS v5 ([#149])
 
 
 ## [0.11.0] - 2019-10-22
 
-- Expose `createStageClass` from `Stage` ([#147])
+### Changed
+- Exposed `createStageClass` from `Stage` ([#147])
 - Changed dev tools version reported to be `React` version instead of `ReactPixiFiber` version ([#148])
 
 
 ## [0.10.0] - 2019-10-18
 
+### Added
+- Added `usePixiAppCreator`, `usePixiApp` and `usePixiTicker` hooks ([#127])
+
+### Changed
 - Improved hooks support ([#127])
 
 

README.md

@@ -166,8 +166,7 @@ Renders [`PIXI.extras.BitmapText`].
 
 [Similarly](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html) to ReactDOM in React 16, 
 ReactPixiFiber is not ignoring unknown [`PIXI.DisplayObject`] members – they are all passed through. You can read 
-more about [Unknown Prop Warning](https://reactjs.org/warnings/unknown-prop.html)  in ReactDOM, however 
-ReactPixiFiber will not warn you about unknown members. 
+more about [Unknown Prop Warning](https://reactjs.org/warnings/unknown-prop.html) in ReactDOM.
 
 #### Setting values for Point and ObservablePoint types
 

config/jest.dev.json

@@ -0,0 +1,20 @@
+{
+  "coverageDirectory": "coverage/dev",
+  "coverageReporters": ["json", "lcov", "text-summary"],
+  "collectCoverageFrom": ["src/**/*.js"],
+  "globals": {
+    "__DEV__": true
+  },
+  "moduleNameMapper": {
+    "pixi.js$": "pixi.js-legacy"
+  },
+  "rootDir": "..",
+  "setupFiles": [
+    "./config/jest/setupGlobals.js",
+    "./config/jest/setupPixi.js"
+  ],
+  "testEnvironment": "jest-environment-jsdom-with-canvas",
+  "transform": {
+    "^.+\\.js$": "babel-jest"
+  }
+}

config/jest.prod.json

@@ -0,0 +1,20 @@
+{
+  "coverageDirectory": "coverage/prod",
+  "coverageReporters": ["json", "lcov", "text-summary"],
+  "collectCoverageFrom": ["src/**/*.js"],
+  "globals": {
+    "__DEV__": false
+  },
+  "moduleNameMapper": {
+    "pixi.js$": "pixi.js-legacy"
+  },
+  "rootDir": "..",
+  "setupFiles": [
+    "./config/jest/setupGlobals.js",
+    "./config/jest/setupPixi.js"
+  ],
+  "testEnvironment": "jest-environment-jsdom-with-canvas",
+  "transform": {
+    "^.+\\.js$": "babel-jest"
+  }
+}

examples/src/AnimatedExample/animatedPixiTarget.js

@@ -1,10 +1,17 @@
-import { Sprite, applyProps } from "react-pixi-fiber";
+import { Sprite, applyDisplayObjectProps } from "react-pixi-fiber";
 import * as Animated from "animated";
 import * as PIXI from "pixi.js";
 
 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);
+    } else {
+      // TODO check if this is safe
+      const type = instance.constructor.name;
+      applyDisplayObjectProps(type, instance, {}, props);
+    }
   } else {
     return false;
   }

examples/src/AnimatedExample/index.js

@@ -6,6 +6,8 @@ import Bunny from "../Bunny";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 const centerAnchor = new PIXI.Point(0.5, 0.5);
@@ -25,7 +27,7 @@ class BunnyExample extends Component {
 
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS}>
+      <Stage options={OPTIONS}>
         <Bunny
           anchor={centerAnchor}
           as={Animated.Sprite}

examples/src/App/App.js

@@ -4,7 +4,7 @@ import { Route, Switch } from "react-router-dom";
 import "./App.css";
 import ExampleList from "../ExampleList";
 import AnimatedExample from "../AnimatedExample";
-import ApplicationOptionsExample from "../ApplicationOptionsExample";
+import BatchedUpdatesExample from "../BatchedUpdatesExample";
 import BunnyExample from "../BunnyExample";
 import BunnymarkExample from "../BunnymarkExample";
 import CanvasPropsExample from "../CanvasPropsExample";
@@ -15,7 +15,7 @@ import CustomPIXIComponentExample from "../CustomPIXIComponentExample";
 import HooksExample from "../HooksExample";
 import LayersExample from "../LayersExample";
 import PointsExample from "../PointsExample/PointsExample";
-import BatchedUpdatesExample from "../BatchedUpdatesExample";
+import SmokeTest from "../SmokeTest";
 import Stats from "../Stats";
 
 const examples = [
@@ -24,11 +24,6 @@ const examples = [
     slug: "animated",
     component: AnimatedExample,
   },
-  {
-    name: "Application Options",
-    slug: "applicationoptions",
-    component: ApplicationOptionsExample,
-  },
   {
     name: "Bunny",
     slug: "bunny",
@@ -83,7 +78,12 @@ const examples = [
     name: "unstable_batchedUpdates",
     slug: "unstable_batchedUpdates",
     component: BatchedUpdatesExample,
-  }
+  },
+  {
+    name: "Smoke Test",
+    slug: "smoketest",
+    component: SmokeTest,
+  },
 ];
 
 class App extends Component {

examples/src/BatchedUpdatesExample/index.js

@@ -5,6 +5,8 @@ import * as PIXI from "pixi.js";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 const asyncFunc = cb => {
   setTimeout(cb, 100);
@@ -20,7 +22,7 @@ class Canvas extends Component {
   };
 
   render() {
-    return <canvas ref={this.mountStage} width="600" height="800" />;
+    return <canvas ref={this.mountStage} />;
   }
 }
 

examples/src/Bunny/index.js

@@ -15,10 +15,9 @@ const textures = [
   new PIXI.Texture(bunnyTextures.baseTexture, new PIXI.Rectangle(2, 2, 26, 37)),
 ];
 
-function Bunny(props) {
-  const texture = textures[props.texture];
-  const Component = props.as;
-  return <Component anchor={centerAnchor} {...props} texture={texture} />;
+function Bunny({ as: Component, ...passedProps }) {
+  const texture = textures[passedProps.texture];
+  return <Component anchor={centerAnchor} {...passedProps} texture={texture} />;
 }
 Bunny.propTypes = {
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

examples/src/BunnyExample/index.js

@@ -1,16 +1,18 @@
 import React, { Component } from "react";
 import { Container, Stage } from "react-pixi-fiber";
-import RotatingBunny from "./RotatingBunny";
+import RotatingBunny from "../RotatingBunny";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 class BunnyExample extends Component {
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS}>
-        <Container ref={c => (window.example = c)}>
+      <Stage options={OPTIONS}>
+        <Container>
           <RotatingBunny x={400} y={300} texture={0} name="regular" step={0.1} />
           <RotatingBunny x={200} y={200} texture={1} name="cool" step={0.2} />
           <RotatingBunny x={200} y={400} texture={2} name="sport" step={-0.25} />

examples/src/BunnymarkExample/index.js

@@ -4,12 +4,14 @@ import Bunnymark from "./Bunnymark";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 class BunnymarkExample extends Component {
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS}>
+      <Stage options={OPTIONS}>
         <Bunnymark />
       </Stage>
     );

examples/src/CanvasPropsExample/index.js

@@ -4,12 +4,14 @@ import Bunny from "../Bunny";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 class CanvasPropsExample extends Component {
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS} className="bordered" style={{ transform: "scale(0.5)" }}>
+      <Stage options={OPTIONS} className="bordered" style={{ transform: "scale(0.5)" }}>
         <Bunny x={400} y={300} />
       </Stage>
     );

examples/src/ClickExample/index.js

@@ -8,6 +8,8 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 // http://pixijs.io/examples/#/basics/click.js
@@ -22,7 +24,7 @@ class ClickExample extends Component {
 
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS}>
+      <Stage options={OPTIONS}>
         <Bunny
           // Shows hand cursor
           buttonMode

examples/src/CustomApplicationExample/index.js

@@ -1,21 +1,36 @@
 import React, { Component } from "react";
 import { Stage } from "react-pixi-fiber";
-import Bunny from "./../Bunny";
+import RotatingBunny from "../RotatingBunny";
 import * as PIXI from "pixi.js";
 
-const app = new PIXI.Application({
-  backgroundColor: 0xbb9910,
-  height: 600,
-  view: document.querySelector("#id_preexisting_canvas"),
-  width: 800,
-});
-
 class CustomApplicationExample extends Component {
+  componentDidMount() {
+    const canvas = document.createElement("canvas");
+    this.div.appendChild(canvas);
+
+    this.app = new PIXI.Application({
+      backgroundColor: 0xbb9910,
+      height: 600,
+      view: canvas,
+      width: 800,
+    });
+
+    this.forceUpdate();
+  }
+
+  componentWillUnmount() {
+    this.app.destroy(true, true);
+  }
+
   render() {
     return (
-      <Stage app={app}>
-        <Bunny x={400} y={300} />
-      </Stage>
+      <div ref={div => (this.div = div)}>
+        {this.app && (
+          <Stage app={this.app}>
+            <RotatingBunny x={400} y={300} scale={4} />
+          </Stage>
+        )}
+      </div>
     );
   }
 }

examples/src/CustomBunnymarkExample/Particle.js

@@ -5,7 +5,7 @@ const PARTICLE = "Particle";
 export const behavior = {
   customDisplayObject: props => new PIXI.Sprite(props.texture),
   customApplyProps: function(instance, oldProps, newProps) {
-    if (Object.keys(oldProps).length !== 0) {
+    if (typeof oldProps !== "undefined" && Object.keys(oldProps).length === 0) {
       return;
     }
 

examples/src/CustomBunnymarkExample/index.js

@@ -4,12 +4,14 @@ import CustomBunnymark from "./CustomBunnymark";
 
 const OPTIONS = {
   backgroundColor: 0x1099bb,
+  height: 600,
+  width: 800,
 };
 
 class CustomBunnymarkExample extends Component {
   render() {
     return (
-      <Stage width={800} height={600} options={OPTIONS}>
+      <Stage options={OPTIONS}>
         <CustomBunnymark />
       </Stage>
     );

examples/src/CustomPIXIComponentExample/Circle.js

@@ -6,7 +6,7 @@ export const behavior = {
   customDisplayObject: props => new PIXI.Graphics(),
   customApplyProps: function(instance, oldProps, newProps) {
     const { fill, x, y, radius, ...newPropsRest } = newProps;
-    const { fill: oldFill, radius: oldRadius, ...oldPropsRest } = oldProps;
+    const { fill: oldFill, radius: oldRadius, ...oldPropsRest } = oldProps || {};
     if (typeof oldProps !== "undefined") {
       instance.clear();
     }

examples/src/CustomPIXIComponentExample/Rect.js

@@ -6,7 +6,7 @@ export const behavior = {
   customDisplayObject: props => new PIXI.Graphics(),
   customApplyProps: function(instance, oldProps, newProps) {
     const { fill, x, y, width, height, ...newPropsRest } = newProps;
-    const { fill: oldFill, x: oldX, y: oldY, width: oldWidth, height: oldHeight, ...oldPropsRest } = oldProps;
+    const { fill: oldFill, x: oldX, y: oldY, width: oldWidth, height: oldHeight, ...oldPropsRest } = oldProps || {};
     if (typeof oldProps !== "undefined") {
       instance.clear();
     }