Merge pull request iamdustan#32 from iamdustan/react-reconciler

Upgrade the dependencies

Author: iamdustan

.babelrc

@@ -1,16 +1,20 @@
 {
   "presets": [
-    "react",
-    "es2015"
+    [
+      "@babel/preset-env", {
+        targets: {node: 'current'},
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow",
   ],
   "plugins": [
-    "transform-class-properties"
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "test": {
       "plugins": [
-        "./scripts/babel/test-deps",
-        "transform-react-jsx-source"
+        "./scripts/babel/test-deps"
       ]
     }
   }

.eslintrc.js

@@ -1,15 +1,6 @@
 module.exports = {
   parser: 'babel-eslint',
-  'extends': './node_modules/fbjs-scripts/eslint/.eslintrc.js',
-  plugins: [
-    'react',
-  ],
-  globals: {
-    ReactComponent: true,
-    React$Component: true,
-    ReactClass: true,
-    React$Element: true,
-  },
+  plugins: ['react'],
   rules: {
     'object-curly-spacing': [2, 'never'],
     'react/jsx-uses-react': 2,

.travis.yml

@@ -1,7 +1,7 @@
 ---
 language: node_js
 node_js:
-- 5
+- 8
 cache:
   directories:
   - node_modules
@@ -17,7 +17,7 @@ before_install:
       echo "Only docs were updated, stopping build process."
       exit 0
     else
-      npm install flow-bin@0.36
+      npm install flow-bin@0.94
     fi
 script:
 - |
@@ -28,7 +28,7 @@ script:
     elif [ "$TEST_TYPE" = test ]; then
       npm test
     else
-      ./scripts/test $TEST_TYPE
+      npm test -- $TEST_TYPE
     fi
 env:
   - CXX=g++-4.8 TEST_TYPE=test

examples/basic-hook/index.js

@@ -0,0 +1,40 @@
+/**
+ * Blinking LED.
+ * This example blinks the Arduino Uno built-in LED on pin 13 every 1 second.
+ */
+
+import * as React from 'react';
+import {getPort} from '../port';
+import ReactHardware from '../../src';
+
+// thanks Dan. https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+function useInterval(callback, delay) {
+  const savedCallback = React.useRef();
+
+  // Remember the latest callback.
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}
+
+const FlashingLedHook = () => {
+  const [value, setState] = React.useState(1);
+  useInterval(() => setState(value === 0 ? 1 : 0), 1000);
+
+  return <pin pin={13} value={value} mode={'OUTPUT'} />;
+};
+
+ReactHardware.render(<FlashingLedHook />, getPort(), inst => {
+  console.log('Rendered <%s />', 'FlashingLedHook');
+});

examples/basic/index.js

@@ -3,16 +3,12 @@
  * This example blinks the Arduino Uno built-in LED on pin 13 every 1 second.
  */
 
-import React, {Component} from 'react';
+import * as React from 'react';
 import {getPort} from '../port';
 import ReactHardware from '../../src';
 
-class FlashingLed extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {value: 1};
-  }
+class FlashingLed extends React.Component<{}, {value: number}> {
+  state = {value: 1};
 
   componentDidMount() {
     setInterval(() => {
@@ -23,20 +19,10 @@ class FlashingLed extends Component {
   }
 
   render() {
-    return (
-      <pin
-        pin={13}
-        value={this.state.value}
-        mode={'OUTPUT'}
-      />
-    );
+    return <pin pin={13} value={this.state.value} mode={'OUTPUT'} />;
   }
 }
 
-ReactHardware.render(
-  <FlashingLed />,
-  getPort(),
-  (inst) => {
-    console.log('Rendered <%s />', FlashingLed.name);
-  }
-);
+ReactHardware.render(<FlashingLed />, getPort(), inst => {
+  console.log('Rendered <%s />', FlashingLed.name);
+});

examples/button/index.js

@@ -18,29 +18,29 @@ import {getPort} from '../port';
 import ReactHardware from '../../src';
 
 type HardwareEvent = {
-  value: number;
-  type: string;
+  value: number,
+  type: string,
 };
 
 type P = {
-  pin: number;
-  onChange: ?(event:HardwareEvent) => any;
-  onDown: ?(event:HardwareEvent) => any;
-  onUp: ?(event:HardwareEvent) => any;
-}
+  pin: number,
+  onChange: ?(event: HardwareEvent) => any,
+  onDown: ?(event: HardwareEvent) => any,
+  onUp: ?(event: HardwareEvent) => any,
+};
 
 class Button extends Component {
   props: P;
   defaultProps: {};
-  onRead: (value:number) => any;
+  onRead: (value: number) => any;
 
-  constructor(props:P, context:{}) {
+  constructor(props: P, context: {}) {
     super(props, context);
 
     this.onRead = this.onRead.bind(this);
   }
 
-  onRead(value:number) {
+  onRead(value: number) {
     const {onDown, onUp, onChange} = this.props;
     if (value === 1 && typeof onDown === 'function') {
       onDown({value, type: 'down'});
@@ -54,13 +54,7 @@ class Button extends Component {
   }
 
   render() {
-    return (
-      <pin
-        pin={this.props.pin}
-        onRead={this.onRead}
-        mode={'INPUT'}
-      />
-    );
+    return <pin pin={this.props.pin} onRead={this.onRead} mode={'INPUT'} />;
   }
 }
 
@@ -71,7 +65,7 @@ class App extends Component {
     super();
 
     this.state = {on: false};
-    this.toggle = (event:HardwareEvent) => {
+    this.toggle = (event: HardwareEvent) => {
       this.setState({on: !this.state.on});
     };
   }
@@ -87,10 +81,6 @@ class App extends Component {
   }
 }
 
-ReactHardware.render(
-  <App />,
-  getPort(),
-  (inst) => {
-    console.log('Rendered <ButtonApplication />');
-  }
-);
+ReactHardware.render(<App />, getPort(), inst => {
+  console.log('Rendered <ButtonApplication />');
+});

examples/change-child/index.js

@@ -36,13 +36,7 @@ class PulsingLed extends Component {
   }
 
   render() {
-    return (
-      <pin
-        pin={this.props.pin}
-        value={this.state.value}
-        mode={'PWM'}
-      />
-    );
+    return <pin pin={this.props.pin} value={this.state.value} mode={'PWM'} />;
   }
 }
 
@@ -69,11 +63,7 @@ class FlashingLed extends Component {
 
   render() {
     return (
-      <pin
-        pin={this.props.pin}
-        value={this.state.value}
-        mode={'OUTPUT'}
-      />
+      <pin pin={this.props.pin} value={this.state.value} mode={'OUTPUT'} />
     );
   }
 }
@@ -87,7 +77,10 @@ class Application extends React.Component {
   }
 
   componentDidMount() {
-    this.interval = setInterval(_ => this.setState({swapped: !this.state.swapped}), 4000);
+    this.interval = setInterval(
+      _ => this.setState({swapped: !this.state.swapped}),
+      4000,
+    );
   }
   componentWillUnmount() {
     clearInterval(this.interval);
@@ -103,11 +96,6 @@ class Application extends React.Component {
   }
 }
 
-
-ReactHardware.render(
-  <Application />,
-  getPort(),
-  inst => {
-    console.log('Rendered  ChangingComponentApplication');
-  }
-);
+ReactHardware.render(<Application />, getPort(), inst => {
+  console.log('Rendered  ChangingComponentApplication');
+});

examples/devtools/index.js

@@ -40,11 +40,7 @@ class FlashingLed extends Component {
 
   render() {
     return (
-      <pin
-        pin={this.props.pin}
-        value={this.state.value}
-        mode={'OUTPUT'}
-      />
+      <pin pin={this.props.pin} value={this.state.value} mode={'OUTPUT'} />
     );
   }
 }
@@ -74,13 +70,7 @@ class PulsingLed extends Component {
   }
 
   render() {
-    return (
-      <pin
-        pin={this.props.pin}
-        value={this.state.value}
-        mode={'PWM'}
-      />
-    );
+    return <pin pin={this.props.pin} value={this.state.value} mode={'PWM'} />;
   }
 }
 
@@ -91,10 +81,6 @@ const Application = () => [
   <FlashingLed pin={12} delay={1000} />,
 ];
 
-ReactHardware.render(
-  <Application />,
-  getPort(),
-  (inst) => {
-    console.log('Rendered <%s />', 'Devtools demonstration');
-  }
-);
+ReactHardware.render(<Application />, getPort(), inst => {
+  console.log('Rendered <%s />', 'Devtools demonstration');
+});

examples/jeoparty/index.js

@@ -39,12 +39,7 @@ class JeopartyLed extends Component {
   }
 
   render() {
-    return (
-      <led
-        {...this.props}
-        {...this.state}
-      />
-    );
+    return <led {...this.props} {...this.state} />;
   }
 }
 
@@ -67,12 +62,12 @@ class Jeoparty extends Component {
 
   componentDidMount() {
     // on a socket connection
-    io.sockets.on('connection', (socket) => {
+    io.sockets.on('connection', socket => {
       // Player Button LEDs
       // strobe
       socket.on('led-strobe-1', () => this.setState({led1: 'strobe'}));
       socket.on('led-strobe-2', () => this.setState({led2: 'strobe'}));
-      socket.on('led-strobe-3',  () => this.setState({led3: 'strobe'}));
+      socket.on('led-strobe-3', () => this.setState({led3: 'strobe'}));
 
       // on
       socket.on('led-on-all', () => {
@@ -92,7 +87,6 @@ class Jeoparty extends Component {
       socket.on('led-off-2', () => this.setState({led2: 'off'}));
       socket.on('led-off-3', () => this.setState({led3: 'off'}));
 
-
       // All LED Strobe
       socket.on('led-strobe-all', () => {
         this.setState({led1: 'strobe'});
@@ -104,7 +98,6 @@ class Jeoparty extends Component {
         }, 140);
       });
 
-
       // LED off
       socket.on('led-stop', () => {
         this.setState({
@@ -131,10 +124,6 @@ class Jeoparty extends Component {
   }
 }
 
-ReactHardware.render(
-  <Jeoparty />,
-  getPort(),
-  (inst) => {
-    console.log('Rendered <Jeoparty />');
-  }
-);
+ReactHardware.render(<Jeoparty />, getPort(), inst => {
+  console.log('Rendered <Jeoparty />');
+});