feat: basic devtools integration

package.json

@@ -35,7 +35,9 @@
     "eslint-plugin-react": "^7.5.1",
     "gui": "^0.5.0",
     "jest": "^22.0.3",
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "react-devtools-core": "^3.2.3",
+    "ws": "^5.2.0"
   },
   "license": "MIT",
   "babel": {

src/devtools.js

@@ -0,0 +1,22 @@
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+// src https://github.com/iamdustan/react-hardware/blob/master/src/devtools/setupDevtoolsFiber.js
+
+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')
+})

src/index.js

@@ -1,6 +1,10 @@
 // TODO: have to force "production" env or the react-reconciler will
 // swallow errors in non-browser environments
 
+if (process.env.NODE_ENV !== 'production') {
+  require('./devtools.js')
+}
+
 const { render } = require('./renderer')
 
 module.exports = {

src/renderer.js

@@ -181,6 +181,13 @@ function render(element, guiContainer, callback) {
     root = guiContainer._reactRootContainer = newRoot
   }
 
+  YueRenderer.injectIntoDevTools({
+    bundleType: 1, // 0 for PROD, 1 for DEV
+    version: require('../package.json').version, // version for your renderer
+    rendererPackageName: 'react-yue', // package name
+    findHostInstanceByFiber: YueRenderer.findHostInstance, // host instance (root)
+  })
+
   return YueRenderer.updateContainer(element, root, null, callback)
 }