Fiber

.babelrc

@@ -1,3 +1,7 @@
 {
-	"presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": [
+    "transform-flow-strip-types",
+    "transform-object-rest-spread"
+  ]
 }

examples/animation.jsx

@@ -1,43 +1,7 @@
-import React, {Component} from 'react';
+import React} from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
-
-class AnimatedBox extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      position: 0,
-      toRight: true
-    };
-
-    setInterval(() => {
-      const {position, toRight} = this.state,
-            newDirection = (position === (toRight ? 90 : 0)) ?
-              !toRight :
-              toRight,
-            newPosition = newDirection ? position + 1 : position - 1;
-
-
-      this.setState({
-        position: newPosition,
-        toRight: newDirection
-      });
-    }, 30);
-  }
-  render() {
-    const position = `${this.state.position}%`;
-
-    return (
-      <box top="center"
-           left={position}
-           width="10%"
-           height="20%"
-           border={{type: 'line'}}
-           style={{bg: 'cyan', border: {fg: 'blue'}}} />
-    );
-  }
-}
+import AnimatedBox from './components/AnimatedBox';
+import {render} from '../src';
 
 const screen = blessed.screen({
   autoPadding: true,
@@ -49,4 +13,4 @@ screen.key(['escape', 'q', 'C-c'], function(ch, key) {
   return process.exit(0);
 });
 
-render(<AnimatedBox />, screen);
+render(<AnimatedBox />, screen, (inst) => console.log('Rendered AnimatedBox!'));

examples/components/AnimatedBox.jsx

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+
+class AnimatedBox extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      position: props.initialPosition || 0,
+      toRight: true
+    };
+
+    setInterval(() => {
+      const {position, toRight} = this.state,
+            newDirection = (position === (toRight ? 90 : 0)) ?
+              !toRight :
+              toRight,
+            newPosition = newDirection ? position + 1 : position - 1;
+
+
+      this.setState({
+        position: newPosition,
+        toRight: newDirection
+      });
+    }, props.time || 33.333333);
+  }
+  render() {
+    const position = `${this.state.position}%`;
+
+    return (
+      <box top="center"
+           left={position}
+           width={this.props.width || "10%"}
+           height={this.props.height || "20%"}
+           border={{type: 'line'}}
+           style={{bg: 'cyan', border: {fg: 'blue'}}} />
+    );
+  }
+}
+
+module.exports = AnimatedBox;
+

examples/dashboard.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
+import {render} from '../src';
 
 /**
  * Stylesheet

examples/demo.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import blessed from 'blessed';
-import {render} from '../src/render.js';
+import {render} from '../src';
 
 class App extends Component {
   render() {

examples/form.jsx

@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+import AnimatedBox from './components/AnimatedBox';
+
+class Form extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+    };
+
+    this.submit = data => this.setState(state => ({name: data}));
+    this.cancel = _ => console.log('Form canceled');
+  }
+  render() {
+    return (
+      <form
+        keys
+        vi
+        onSubmit={this.submit}
+        onReset={this.cancel}
+        left="5%"
+        top="5%"
+        width="90%"
+        height="90%"
+        border={{type: 'line'}}
+        style={{bg: 'cyan', border: {fg: 'blue'}}}
+      >
+        <box width={6} height={3}>Name: </box>
+        <textbox
+          onSubmit={this.submit}
+          left={6}
+          height={3}
+          keys
+          mouse
+          inputOnFocus
+        />
+        <box top={3} height={3}>
+          {`Result: ${this.state.name}`}
+        </box>
+        <AnimatedBox />
+      </form>
+    );
+  }
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  // smartCSR: true,
+  title: 'react-blessed form example'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Form />, screen, (inst) => console.log('Rendered Form!'));
+
+

examples/progressbar.jsx

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+
+class ProgressBox extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      position: 0,
+      toRight: true
+    };
+
+    setInterval(() => {
+      const {position, toRight} = this.state,
+            newDirection = (position === (toRight ? 90 : 0)) ?
+              !toRight :
+              toRight,
+            newPosition = newDirection ? position + 1 : position - 1;
+
+
+      this.setState({
+        position: newPosition,
+        toRight: newDirection
+      });
+    }, 30);
+  }
+  render() {
+    const position = `${this.state.position}%`;
+
+    return (
+      <box
+        top="center"
+        left="0"
+        width="10%"
+        height="20%"
+        border={{type: 'line'}}
+        style={{bg: 'cyan', border: {fg: 'blue'}}}
+      >
+        <progressbar
+          orientation="horizontal"
+          filled={this.state.position}
+          top="80%"
+          left="center"
+          height="15%"
+          width="100%"
+          label="progress"
+          border={{type: 'line'}}
+          style={{border: {fg: 'red'}, bar: {bg: 'red'}}}
+        />
+      </box>
+    );
+  }
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed box animation'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<ProgressBox />, screen, (inst) => console.log('Rendered ProgressBox!'));
+

examples/remove.jsx

@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import blessed from 'blessed';
+import {render} from '../src';
+
+class RemovesChild extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {renderChild: true};
+
+    setInterval(() => {
+      this.setState(state => ({renderChild: !state.renderChild}));
+    }, props.freq || 500);
+  }
+  render() {
+    const {renderChild} = this.state;
+
+    return (
+      <box
+        top="center"
+        left="10%"
+        top="10%"
+        width="80%"
+        height="80%"
+        border={{type: 'line'}}
+        style={{bg: 'cyan', border: {fg: 'blue'}}}
+      >
+        {renderChild && (
+          <box
+            top="center"
+            left="0"
+            width="10%"
+            height="20%"
+            border={{type: 'line'}}
+            style={{bg: 'cyan', border: {fg: 'blue'}}}>
+            I will be removed
+          </box>
+        )}
+      </box>
+    );
+  }
+}
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed box animation'
+});
+
+screen.key(['escape', 'q', 'C-c'], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<RemovesChild />, screen, (inst) => console.log('Rendered RemovesChild!'));
+

package.json

@@ -29,17 +29,22 @@
   },
   "homepage": "https://github.com/yomguithereal/react-blessed#readme",
   "devDependencies": {
-    "babel-cli": "^6.6.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.6.0",
+    "babel-cli": "^6.20.0",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "babel-register": "^6.22.0",
     "blessed": "^0.1.81",
     "mocha": "^2.4.5",
-    "react": "^0.14.7"
+    "react": "16.0.0-alpha.3",
+    "react-dom": "^16.0.0-alpha.3"
   },
   "dependencies": {
     "invariant": "^2.2.0",
-    "lodash": "^3.x.x"
+    "lodash": "^3.x.x",
+    "react-devtools": "^2.0.12",
+    "ws": "^1.1.0"
   }
 }

run.js

@@ -0,0 +1,24 @@
+
+require('babel-register')({});
+const argv = process.argv.slice(2);
+const example = argv[0];
+const examples = [
+  'animation',
+  'dashboard',
+  'demo',
+  'form',
+  'progressbar',
+  'remove',
+];
+
+if (examples.indexOf(example) === -1) {
+  console.warn(
+    'Invalid example "%s" provided. Must be one of:\n  * ',
+    example,
+    examples.join('  * ')
+  );
+  process.exit(1);
+}
+
+require('./examples/' + example);
+

src/fiber/devtools.js

@@ -0,0 +1,22 @@
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+
+const defineProperty = Object.defineProperty;
+defineProperty(global, 'WebSocket', {
+  value: require('ws')
+});
+defineProperty(global, 'window', {
+  value: global
+});
+
+const {connectToDevTools} = require('react-devtools-core');
+
+connectToDevTools({
+  isAppActive() {
+    // Don't steal the DevTools from currently active app.
+    return true;
+  },
+  host: 'localhost',
+  // default port? port: ,
+  resolveRNStyle: null, // TODO maybe: require('flattenStyle')
+});
+