From 85b4fc10f3f8a01e06f289c41e7d4231aa45ecda Mon Sep 17 00:00:00 2001 From: Gerald Nash Date: Mon, 19 Dec 2016 10:07:48 -0500 Subject: [PATCH 01/18] Fix undefined props in README examples (#23) --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 797616c..8a71a3b 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ class Application extends React.Component { } var PORT = '/dev/tty.usbmodem1411'; -ReactHardware.render(, PORT); +ReactHardware.render(, PORT); ``` While this is unquestionably more code than it’s Johnny-Five or Sketch @@ -77,6 +77,9 @@ class FlashingLed extends React.Component { value: 0, _timer: null, }; + this.defaultProps = { + interval: 1000, + }; } componentDidMount() { From 01dd542ad766fa6371b15ab7eb76fac2ead20acb Mon Sep 17 00:00:00 2001 From: Dustan Kasten Date: Wed, 11 Jan 2017 10:36:06 -0500 Subject: [PATCH 02/18] update examples to be more idiomatic. (thanks @emirotin) (#27) --- README.md | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 8a71a3b..f09feee 100644 --- a/README.md +++ b/README.md @@ -33,18 +33,21 @@ const LOW = 0; class Application extends React.Component { constructor(props) { super(props); - this.state = { - value: 0, - _timer: null, - }; + this.state = {value: 0}; + this._timer = null; } componentDidMount() { - this.state._timer = setInterval(_ => ( - this.setState({value: this.state.value === HIGH ? LOW : HIGH}) + this._timer = setInterval(_ => ( + this.setState(prevState => ({value: prevState.value === HIGH ? LOW : HIGH})) ), this.props.interval); } + componentDidUnmount() { + clearInterval(this._timer); + this._timer = null; + } + render() { return ( @@ -63,7 +66,7 @@ we introduced the concept of a flashing LED, hard-coded naively into the global state. Let’s now extract the idea of a flashing LED into something we can share with our team or even on npm. -``` javascript +``` jsx import React from 'react'; import ReactHardware, {Board, Led} from 'react-hardware'; @@ -73,21 +76,24 @@ const LOW = 0; class FlashingLed extends React.Component { constructor(props) { super(props); - this.state = { - value: 0, - _timer: null, - }; + this.state = {value: 0}; + this._timer = null; this.defaultProps = { interval: 1000, }; } componentDidMount() { - this.state._timer = setInterval(_ => ( - this.setState({value: this.state.value === HIGH ? LOW : HIGH}) + this._timer = setInterval(_ => ( + this.setState(prevState => ({value: prevState.value === HIGH ? LOW : HIGH})) ), this.props.interval); } + componentWillUnmount() { + clearInterval(this._timer); + this._timer = null; + } + render() { return ( From a6afb75fa2fa0642f6cfa815d188138f941a8447 Mon Sep 17 00:00:00 2001 From: Dustan Kasten Date: Fri, 17 Feb 2017 10:10:33 -0500 Subject: [PATCH 03/18] Fiber (#22) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Reorg files: create stack and firmata dirs * Initial commit of the ReactHardwareFiber impl * Test file to follow renderer path * Firmata typedef * It’s alive! * Composite components work like a champ. setState updates the board. This means your favorite blinking LEDs are back in action! :boom: Also reorganized the files a bit to put the fiber stuff in ./src/fiber * gitignore some things * mv types flow-typed * Update children. Bridge to HardwareManager.g Examples known to now work: * basic (Flashing LED) * pulse (pulsing LED) * button (led's changing state based on button press) * mv old unit tests * travis flow@0.36 * patch support for backwards compatibility * Flow! * Start cleaning up examples * support johnny-five as a render target * useAsyncScheduling (thanks @acdlite * add filler `getRootHostContext` for latest nightly * flow-bin * Basic update to 16 alpha.2 * devtools! * Update Devtools demo --- .babelrc | 3 +- .flowconfig | 6 +- .gitignore | 2 + .travis.yml | 2 +- examples/basic/index.js | 2 +- examples/button/index.js | 14 +- examples/change-child/index.js | 5 +- examples/devtools/index.js | 48 ++-- examples/johnny-five/index.js | 41 ++++ examples/johnny-five/package.json | 5 + examples/port.js | 11 +- examples/potentiometer/index.js | 4 +- examples/pulse/index.js | 2 +- examples/reader/index.js | 2 +- examples/switch/index.js | 2 +- examples/webspeech/index.js | 2 +- examples/webspeech/script.js | 2 +- examples/webspeech/server.js | 2 +- {types => flow-typed}/fbjs.js | 0 flow-typed/firmata.js | 205 +++++++++++++++++ flow-typed/jsx-intrinsics.js | 22 ++ flow-typed/react.js | 8 + package.json | 27 ++- src/ReactHardwareFeatureFlags.js | 8 + src/ReactHardwareFiber.js | 17 ++ src/ReactHardwareStack.js | 21 ++ src/devtools/setupDevtoolsFiber.js | 22 ++ src/fiber/ReactHardwareFiber.js | 212 ++++++++++++++++++ src/fiber/ReactHardwareFiberComponent.js | 119 ++++++++++ src/firmata/HardwareInstanceManager.js | 100 +++++++++ src/{ => firmata}/HardwareManager.js | 118 ++++++++-- src/{ => firmata}/HardwarePinTranslations.js | 2 +- .../__tests__/HardwareManager-test.js | 0 src/index.js | 22 +- src/{ => stack}/ReactHardwareComponent.js | 4 +- .../ReactHardwareDefaultInjection.js | 2 +- .../ReactHardwareEmptyComponent.js | 0 src/{ => stack}/ReactHardwareMount.js | 2 +- .../ReactHardwareReconcileTransaction.js | 0 .../__tests__/ReactHardwareComponent-test.js | 0 .../__tests__/ReactHardwareMount-test.js | 0 src/{ => stack}/__tests__/index-test.js | 0 .../createReactHardwareComponentClass.js | 0 src/types.js | 1 - test.js | 47 ++++ types/firmata.js | 6 - 46 files changed, 1014 insertions(+), 106 deletions(-) create mode 100644 examples/johnny-five/index.js create mode 100644 examples/johnny-five/package.json rename {types => flow-typed}/fbjs.js (100%) create mode 100644 flow-typed/firmata.js create mode 100644 flow-typed/jsx-intrinsics.js create mode 100644 flow-typed/react.js create mode 100644 src/ReactHardwareFeatureFlags.js create mode 100644 src/ReactHardwareFiber.js create mode 100644 src/ReactHardwareStack.js create mode 100644 src/devtools/setupDevtoolsFiber.js create mode 100644 src/fiber/ReactHardwareFiber.js create mode 100644 src/fiber/ReactHardwareFiberComponent.js create mode 100644 src/firmata/HardwareInstanceManager.js rename src/{ => firmata}/HardwareManager.js (59%) rename src/{ => firmata}/HardwarePinTranslations.js (84%) rename src/{ => firmata}/__tests__/HardwareManager-test.js (100%) rename src/{ => stack}/ReactHardwareComponent.js (97%) rename src/{ => stack}/ReactHardwareDefaultInjection.js (96%) rename src/{ => stack}/ReactHardwareEmptyComponent.js (100%) rename src/{ => stack}/ReactHardwareMount.js (99%) rename src/{ => stack}/ReactHardwareReconcileTransaction.js (100%) rename src/{ => stack}/__tests__/ReactHardwareComponent-test.js (100%) rename src/{ => stack}/__tests__/ReactHardwareMount-test.js (100%) rename src/{ => stack}/__tests__/index-test.js (100%) rename src/{ => stack}/createReactHardwareComponentClass.js (100%) create mode 100644 test.js delete mode 100644 types/firmata.js diff --git a/.babelrc b/.babelrc index 2d8deea..7c7dfc6 100644 --- a/.babelrc +++ b/.babelrc @@ -9,7 +9,8 @@ "env": { "test": { "plugins": [ - "./scripts/babel/test-deps" + "./scripts/babel/test-deps", + "transform-react-jsx-source" ] } } diff --git a/.flowconfig b/.flowconfig index c8f5f45..71b41a5 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,4 +1,8 @@ [ignore] +# stop checking the stack reconciler in the new world :D +.*/src/index.js +.*/src/stack + # Ignore react and fbjs where there are overlaps, but don't ignore # anything that react-native relies on .*/node_modules/fbjs.* @@ -25,8 +29,6 @@ [include] [libs] -types/fbjs.js -types/firmata.js [options] suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\) diff --git a/.gitignore b/.gitignore index 7d33764..f389c79 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ node_modules .DS_Store *.log +.buckd +lib diff --git a/.travis.yml b/.travis.yml index e2e7a3f..9c1cce7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -17,7 +17,7 @@ before_install: echo "Only docs were updated, stopping build process." exit 0 else - npm install flow-bin@0.22 + npm install flow-bin@0.36 fi script: - | diff --git a/examples/basic/index.js b/examples/basic/index.js index d0c802c..c9dd2f3 100644 --- a/examples/basic/index.js +++ b/examples/basic/index.js @@ -25,7 +25,7 @@ class FlashingLed extends Component { render() { return ( diff --git a/examples/button/index.js b/examples/button/index.js index 4dffde8..86a14cc 100644 --- a/examples/button/index.js +++ b/examples/button/index.js @@ -6,6 +6,11 @@ * and is as low level as you can get. * * Provided composite components like