Bug: Fix issues with react-hot-loader (#50)

There are a couple of things going on with #48 -- - We have all this weird `_REACT_HOT_LOADER__` in our `umd` and `lib` builds. I'm guessing that _shouldn't_ be there as we only would want that in `demo` land. - We get some infinite recursion error with `Uncaught RangeError: Maximum call stack size exceeded at Stage.__setDimensions__REACT_HOT_LOADER__` in the actual demo as reported in #48 This looks like an upstream issue with arrow member functions in gaearon/react-hot-loader#698 This PR fixes this and does a little bit of infrastructure housecleaning. - Fixes #48 - Updates the webpack configs to be a little more modern. - Lints root JS files in the repository. - Only babel builds `react-hot-loader` in the _demo_ and not for our produced `lib` or `umd` files. - Converts all arrow member functions to real member functions to get around the hot loading issues. - _Note_: I didn't change the arrow member functions in the `*.example` files. - Harmonizes `umd` and `build` tasks in `package.json:scripts` to be symmetrical. - Updates `react-hot-loader` dep and drops `node@4` in Travis due to engines restriction on new RHL.
FormidableLabs · Nov 30, 2017 · 50bc485 · 50bc485
1 parent f1e176f
commit 50bc485
Show file tree

Hide file tree

Showing 20 changed files with 7,129 additions and 266 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,11 @@
 {
-  "presets": ["es2015", "react", "stage-0"],
-  "plugins": ["transform-flow-strip-types", "transform-decorators-legacy", "react-hot-loader/babel"]
+  "presets": [
+    "es2015",
+    "react",
+    "stage-0"
+  ],
+  "plugins": [
+    "transform-flow-strip-types",
+    "transform-decorators-legacy"
+  ]
 }
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,6 @@
 language: node_js
 
 node_js:
-  - "4"
   - "6"
   - "8"
 
@@ -10,6 +9,6 @@ branches:
     - master
 
 script:
-  - npm run lint
   - npm run build
   - npm run umd
+  - npm run lint
diff --git a/README.md b/README.md
@@ -112,17 +112,17 @@ class ChildComponent extends React.Component {
     loop: PropTypes.object,
   };
 
-  update = () => {
-    // tick logic
-  };
-
   componentDidMount() {
     this.context.loop.subscribe(this.update);
   }
 
   componentWillUnmount() {
     this.context.loop.unsubscribe(this.update);
   }
+
+  update() {
+    // tick logic
+  };
 }
 
 ```

diff --git a/demo/game/character.js b/demo/game/character.js
@@ -18,32 +18,103 @@ export default class Character extends Component {
     scale: PropTypes.number,
   };
 
-  handlePlayStateChanged = state => {
+  constructor(props) {
+    super(props);
+
+    this.loopID = null;
+    this.isJumping = false;
+    this.isPunching = false;
+    this.isLeaving = false;
+    this.lastX = 0;
+
+    this.state = {
+      characterState: 2,
+      loop: false,
+      spritePlaying: true,
+    };
+
+    this.handlePlayStateChanged = this.handlePlayStateChanged.bind(this);
+    this.jump = this.jump.bind(this);
+    this.punch = this.punch.bind(this);
+    this.getDoorIndex = this.getDoorIndex.bind(this);
+    this.enterBuilding = this.enterBuilding.bind(this);
+    this.checkKeys = this.checkKeys.bind(this);
+    this.update = this.update.bind(this);
+  }
+
+  componentDidMount() {
+    this.jumpNoise = new AudioPlayer('/assets/jump.wav');
+    Matter.Events.on(this.context.engine, 'afterUpdate', this.update);
+  }
+
+  componentWillUnmount() {
+    Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
+  }
+
+  getWrapperStyles() {
+    const { characterPosition, stageX } = this.props.store;
+    const { scale } = this.context;
+    const { x, y } = characterPosition;
+    const targetX = x + stageX;
+
+    return {
+      position: 'absolute',
+      transform: `translate(${targetX * scale}px, ${y * scale}px)`,
+      transformOrigin: 'left top',
+    };
+  }
+
+  render() {
+    const x = this.props.store.characterPosition.x;
+
+    return (
+      <div style={this.getWrapperStyles()}>
+        <Body
+          args={[x, 384, 64, 64]}
+          inertia={Infinity}
+          ref={b => {
+            this.body = b;
+          }}
+        >
+          <Sprite
+            repeat={this.state.repeat}
+            onPlayStateChanged={this.handlePlayStateChanged}
+            src="assets/character-sprite.png"
+            scale={this.context.scale * 2}
+            state={this.state.characterState}
+            steps={[9, 9, 0, 4, 5]}
+          />
+        </Body>
+      </div>
+    );
+  }
+
+  handlePlayStateChanged(state) {
     this.setState({
       spritePlaying: state ? true : false,
     });
   };
 
-  move = (body, x) => {
+  move(body, x) {
     Matter.Body.setVelocity(body, { x, y: 0 });
   };
 
-  jump = body => {
+  jump(body) {
     this.jumpNoise.play();
     this.isJumping = true;
     Matter.Body.applyForce(body, { x: 0, y: 0 }, { x: 0, y: -0.15 });
     Matter.Body.set(body, 'friction', 0.0001);
   };
 
-  punch = () => {
+  punch() {
     this.isPunching = true;
     this.setState({
       characterState: 4,
       repeat: false,
     });
   };
 
-  getDoorIndex = body => {
+  getDoorIndex(body) {
     let doorIndex = null;
 
     const doorPositions = [...Array(6).keys()].map(a => {
@@ -59,7 +130,7 @@ export default class Character extends Component {
     return doorIndex;
   };
 
-  enterBuilding = body => {
+  enterBuilding(body) {
     const doorIndex = this.getDoorIndex(body);
 
     if (doorIndex !== null) {
@@ -71,7 +142,7 @@ export default class Character extends Component {
     }
   };
 
-  checkKeys = (shouldMoveStageLeft, shouldMoveStageRight) => {
+  checkKeys(shouldMoveStageLeft, shouldMoveStageRight) {
     const { keys, store } = this.props;
     const { body } = this.body;
 
@@ -111,7 +182,7 @@ export default class Character extends Component {
     });
   };
 
-  update = () => {
+  update() {
     const { store } = this.props;
     const { body } = this.body;
 
@@ -147,67 +218,4 @@ export default class Character extends Component {
 
     this.lastX = body.position.x;
   };
-
-  constructor(props) {
-    super(props);
-
-    this.loopID = null;
-    this.isJumping = false;
-    this.isPunching = false;
-    this.isLeaving = false;
-    this.lastX = 0;
-
-    this.state = {
-      characterState: 2,
-      loop: false,
-      spritePlaying: true,
-    };
-  }
-
-  componentDidMount() {
-    this.jumpNoise = new AudioPlayer('/assets/jump.wav');
-    Matter.Events.on(this.context.engine, 'afterUpdate', this.update);
-  }
-
-  componentWillUnmount() {
-    Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
-  }
-
-  getWrapperStyles() {
-    const { characterPosition, stageX } = this.props.store;
-    const { scale } = this.context;
-    const { x, y } = characterPosition;
-    const targetX = x + stageX;
-
-    return {
-      position: 'absolute',
-      transform: `translate(${targetX * scale}px, ${y * scale}px)`,
-      transformOrigin: 'left top',
-    };
-  }
-
-  render() {
-    const x = this.props.store.characterPosition.x;
-
-    return (
-      <div style={this.getWrapperStyles()}>
-        <Body
-          args={[x, 384, 64, 64]}
-          inertia={Infinity}
-          ref={b => {
-            this.body = b;
-          }}
-        >
-          <Sprite
-            repeat={this.state.repeat}
-            onPlayStateChanged={this.handlePlayStateChanged}
-            src="assets/character-sprite.png"
-            scale={this.context.scale * 2}
-            state={this.state.characterState}
-            steps={[9, 9, 0, 4, 5]}
-          />
-        </Body>
-      </div>
-    );
-  }
 }
diff --git a/demo/game/index.js b/demo/game/index.js
@@ -15,44 +15,6 @@ export default class Game extends Component {
     onLeave: PropTypes.func,
   };
 
-  physicsInit = engine => {
-    const ground = Matter.Bodies.rectangle(512 * 3, 448, 1024 * 3, 64, {
-      isStatic: true,
-    });
-
-    const leftWall = Matter.Bodies.rectangle(-64, 288, 64, 576, {
-      isStatic: true,
-    });
-
-    const rightWall = Matter.Bodies.rectangle(3008, 288, 64, 576, {
-      isStatic: true,
-    });
-
-    Matter.World.addBody(engine.world, ground);
-    Matter.World.addBody(engine.world, leftWall);
-    Matter.World.addBody(engine.world, rightWall);
-  };
-
-  handleEnterBuilding = index => {
-    this.setState({
-      fade: true,
-    });
-    setTimeout(() => {
-      this.props.onLeave(index);
-    }, 500);
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      fade: true,
-    };
-    this.keyListener = new KeyListener();
-    window.AudioContext = window.AudioContext || window.webkitAudioContext;
-    window.context = window.context || new AudioContext();
-  }
-
   componentDidMount() {
     this.player = new AudioPlayer('/assets/music.wav', () => {
       this.stopMusic = this.player.play({
@@ -97,4 +59,44 @@ export default class Game extends Component {
       </Loop>
     );
   }
+
+  physicsInit(engine) {
+    const ground = Matter.Bodies.rectangle(512 * 3, 448, 1024 * 3, 64, {
+      isStatic: true,
+    });
+
+    const leftWall = Matter.Bodies.rectangle(-64, 288, 64, 576, {
+      isStatic: true,
+    });
+
+    const rightWall = Matter.Bodies.rectangle(3008, 288, 64, 576, {
+      isStatic: true,
+    });
+
+    Matter.World.addBody(engine.world, ground);
+    Matter.World.addBody(engine.world, leftWall);
+    Matter.World.addBody(engine.world, rightWall);
+  };
+
+  handleEnterBuilding(index) {
+    this.setState({
+      fade: true,
+    });
+    setTimeout(() => {
+      this.props.onLeave(index);
+    }, 500);
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fade: true,
+    };
+    this.keyListener = new KeyListener();
+    window.AudioContext = window.AudioContext || window.webkitAudioContext;
+    window.context = window.context || new AudioContext();
+
+    this.handleEnterBuilding = this.handleEnterBuilding.bind(this);
+  }
 }
diff --git a/demo/intro.js b/demo/intro.js
@@ -7,23 +7,15 @@ export default class Intro extends Component {
     onStart: PropTypes.func,
   };
 
-  startUpdate = () => {
-    this.animationFrame = requestAnimationFrame(this.startUpdate);
-  };
-
-  handleKeyPress = e => {
-    if (e.keyCode === 13) {
-      this.startNoise.play();
-      this.props.onStart();
-    }
-  };
-
   constructor(props) {
     super(props);
 
     this.state = {
       blink: false,
     };
+
+    this.startUpdate = this.startUpdate.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
   }
 
   componentDidMount() {
@@ -56,4 +48,15 @@ export default class Intro extends Component {
       </div>
     );
   }
+
+  startUpdate() {
+    this.animationFrame = requestAnimationFrame(this.startUpdate);
+  }
+
+  handleKeyPress(e) {
+    if (e.keyCode === 13) {
+      this.startNoise.play();
+      this.props.onStart();
+    }
+  }
 }