[xde] Build XDE with Webpack (#17)

* [xde] Build XDE with Webpack Build XDE with Webpack. Benefits: - Adds HMR capabilities - Tree shaking with web pack 2 - Potential other optimizations in the future that I haven't thought of yet. Key points: - Keeps node_modules in `app` unbundled -- at the moment, there's no benefit in bundling them. - Uses source maps to keep debug-ability (for some reason source-map support was turned off in Chrome Developer Tools in Electron for me...make sure to turn it on) - You can run with hot module reloading turned off or on -- run `npm run start[-local | -staging]-hot` to use it, omit the `-hot` to not. - Modified npm scripts so that you don't have to run any watcher script separately. Just run the correct `npm run start-blahblahblha` command and go. - No need to `yarn` in both directories -- `yarn` in `dev/xde` will use a postinstall script to `yarn` in the `dev/xde/app` directory and also rebuild any node_modules using electron rebuild. - When bundling with Webpack, don't transpile commonJS modules -- Webpack understands these and uses them to do tree shaking. - Temporarily, we need to use the `es2015` preset with babel when using HMR -- there is a bug: gaearon/react-hot-loader#391 cc @jesseruder @ide * [xde] Install React Developer Tools * [xde] Update yarn.lock. * [XDE] Fix native dependency installation, update Electron * [xde] Rebuild when app starts, not on install * [xde] Fix dirname issue in renderer * [xde] Clean up gulp + webpack config * Fix yarn * [xde] Fixup babel/HMR config * re yarn * s/index/renderer * separate entry point for HMR
expo · Nov 15, 2016 · ac3bb8a · ac3bb8a
1 parent e29e097
commit ac3bb8a
Show file tree

Hide file tree

Showing 14 changed files with 2,769 additions and 640 deletions.
diff --git a/dev/xde/.babelrc b/dev/xde/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015-node6/object-rest", "es2017", "react"],
+  "presets": ["es2015-node6/object-rest", "es2017", "stage-1", "react"],
   "plugins": [
     "transform-class-properties",
     "transform-decorators-legacy",

diff --git a/dev/xde/README.md b/dev/xde/README.md
@@ -78,8 +78,7 @@ nvm use v6
 ```
 
 - Install `gulp-cli`: `npm i -g gulp-cli`.
-- Go into the `xde/` directory where you cloned the Git repo and run `npm install`.
-- Go into the `xde/app` directory and run `npm install`.
+- Go into the `xde/` directory where you cloned the Git repo and run `yarn` or `npm install`.
 - Once that completes, run `npm start` from `xde/` to start the GUI.
 - If you get a watchman error, you may need to increase your "max_queued_events" limit. On linux you can find this at /proc/sys/fs/inotify/max_queued_events.
-- If you get `ENOENT: no such file or directory, open '.../node_modules/electron-prebuilt/path.txt'`, run `cd node_modules/electron-prebuilt && node install.js` from `xde/`. See the issue here: https://github.com/electron-userland/electron-prebuilt/issues/76.
+- If you get `ENOENT: no such file or directory, open '.../node_modules/electron/path.txt'`, run `cd node_modules/electron && node install.js` from `xde/`. See the issue here: https://github.com/electron-userland/electron-prebuilt/issues/76.
diff --git a/dev/xde/app/web/index.html b/dev/xde/app/web/index.html
@@ -58,20 +58,16 @@
         document.getElementById('app-loading').addEventListener('click', () => {
           remote.getCurrentWindow().openDevTools();
         }, false);
-
-        const React = require('react');
-        const ReactDOM = require('react-dom');
-        const App = require('../build/ui/App');
-        let rootElement = React.createElement(App, {
-          segment: analytics,
-        });
-        let rootNode = document.getElementById('app');
-        ReactDOM.render(rootElement, rootNode);
-
-        window.addEventListener('beforeunload', () => {
-          ReactDOM.unmountComponentAtNode(rootNode);
-        });
       })();
     </script>
+    <script>
+      {
+        window.HMR = process.env.HOT ? true : false;
+        const script = document.createElement('script');
+        const port = process.env.DEVSERVER_PORT || 8282;
+        script.src = (process.env.HOT) ? `http://localhost:${port}/renderer.js` : '../build/renderer.js';
+        document.write(script.outerHTML);
+      }
+    </script>
   </body>
 </html>
diff --git a/dev/xde/app/yarn.lock b/dev/xde/app/yarn.lock
@@ -147,8 +147,8 @@ [email protected]:
   resolved ast-types-0.8.12.tgz#a0d90e4351bb887716c83fd637ebf818af4adfcc
 
 [email protected]:
-  version "0.9.1"
-  resolved ast-types-0.9.1.tgz#d317131f2fbed23547672ffea747bc9b6546360f
+  version "0.9.2"
+  resolved ast-types-0.9.2.tgz#2cc19979d15c655108bf565323b8e7ee38751f6b
 
 async@^0.9.0:
   version "0.9.2"
@@ -168,7 +168,7 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79
 
-autobind-decorator@^1.3.4:
+autobind-decorator:
   version "1.3.4"
   resolved autobind-decorator-1.3.4.tgz#b67560e6bbbb68a35c049c82d6351ea0e82d820d
 
@@ -291,10 +291,10 @@ buffers@~0.1.1:
   resolved buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb
 
 bunyan@^1.8.1:
-  version "1.8.4"
-  resolved bunyan-1.8.4.tgz#98013acc812ebc3806364049edf6c9129d8b8d73
+  version "1.8.5"
+  resolved bunyan-1.8.5.tgz#0d619e83005fb89070f5f47982fc1bf00600878a
   optionalDependencies:
-    dtrace-provider "~0.7"
+    dtrace-provider "~0.8"
     moment "^2.10.6"
     mv "~2"
     safe-json-stringify "~1"
@@ -474,7 +474,13 @@ data-uri-to-buffer@0:
   version "0.0.4"
   resolved data-uri-to-buffer-0.0.4.tgz#46e13ab9da8e309745c8d01ce547213ebdb2fe3f
 
-debug@*, debug@^2.2.0, debug@~2.2.0, debug@2:
+debug@*, debug@^2.2.0, debug@2:
+  version "2.3.2"
+  resolved debug-2.3.2.tgz#94cb466ef7d6d2c7e5245cdd6e4104f2d0d70d30
+  dependencies:
+    ms "0.7.2"
+
+debug@~2.2.0:
   version "2.2.0"
   resolved debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da
   dependencies:
@@ -572,12 +578,12 @@ defs@~1.1.0:
     yargs "~3.27.0"
 
 degenerator@~1.0.0:
-  version "1.0.3"
-  resolved degenerator-1.0.3.tgz#deb4075472611a172fc15e4f90defab5f9ec7eff
+  version "1.0.4"
+  resolved degenerator-1.0.4.tgz#fcf490a37ece266464d9cc431ab98c5819ced095
   dependencies:
     ast-types "0.x.x"
     escodegen "1.x.x"
-    esprima "2.x.x"
+    esprima "3.x.x"
 
 delay-async@^1.0.0:
   version "1.0.0"
@@ -629,9 +635,9 @@ download@^5.0.2:
     mkdirp "^0.5.1"
     pify "^2.3.0"
 
-dtrace-provider@~0.7:
-  version "0.7.1"
-  resolved dtrace-provider-0.7.1.tgz#c06b308f2f10d5d5838aec9c571e5d588dc71d04
+dtrace-provider@~0.8:
+  version "0.8.0"
+  resolved dtrace-provider-0.8.0.tgz#fa95fbf67ed3ae3e97364f9664af7302e5ff5625
   dependencies:
     nan "^2.3.3"
 
@@ -694,10 +700,14 @@ esprima-fb@~15001.1001.0-dev-harmony-fb:
   version "15001.1001.0-dev-harmony-fb"
   resolved esprima-fb-15001.1001.0-dev-harmony-fb.tgz#43beb57ec26e8cf237d3dd8b33e42533577f2659
 
-esprima@^2.7.1, [email protected]:
+esprima@^2.7.1:
   version "2.7.3"
   resolved esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581
 
+[email protected]:
+  version "3.1.1"
+  resolved esprima-3.1.1.tgz#02dbcc5ac3ece81070377f99158ec742ab5dda06
+
 estraverse@^1.9.1:
   version "1.9.3"
   resolved estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44
@@ -762,11 +772,10 @@ fast-levenshtein@~2.0.4:
   resolved fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2
 
 fbjs@^0.8.4:
-  version "0.8.5"
-  resolved fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008
+  version "0.8.6"
+  resolved fbjs-0.8.6.tgz#7eb67d6986b2d5007a9b6e92e0e7cb6f75cad290
   dependencies:
     core-js "^1.0.0"
-    immutable "^3.7.6"
     isomorphic-fetch "^2.1.1"
     loose-envify "^1.0.0"
     object-assign "^4.1.0"
@@ -975,8 +984,8 @@ glob@^7.0.3, glob@^7.0.5:
     path-is-absolute "^1.0.0"
 
 got@^6.3.0:
-  version "6.6.1"
-  resolved got-6.6.1.tgz#542d7a0e34676060e561b1b90d103876eefabed2
+  version "6.6.3"
+  resolved got-6.6.3.tgz#ff72c56d7f040eb8918ffb80fb62bcaf489d4eec
   dependencies:
     create-error-class "^3.0.0"
     duplexer3 "^0.1.4"
@@ -1088,10 +1097,6 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4
 
-immutable@^3.7.6:
-  version "3.8.1"
-  resolved immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9
@@ -1314,8 +1319,8 @@ lock@^0.1.2:
   resolved lock-0.1.3.tgz#f66c1caa0c41956e1426608039ed59b71bdf1854
 
 lodash@^4.14.0, lodash@^4.14.1, lodash@^4.16.2, lodash@^4.6.1:
-  version "4.16.6"
-  resolved lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777
+  version "4.17.0"
+  resolved lodash-4.17.0.tgz#93f4466e5ab73e5a1f1216c34eea11535f0a8df5
 
 lodash@~2.4.1:
   version "2.4.2"
@@ -1401,8 +1406,8 @@ mkpath@^0.1.0:
   resolved mkpath-0.1.0.tgz#7554a6f8d871834cc97b5462b122c4c124d6de91
 
 moment@^2.10.6, [email protected]:
-  version "2.15.2"
-  resolved moment-2.15.2.tgz#1bfdedf6a6e345f322fe956d5df5bd08a8ce84dc
+  version "2.16.0"
+  resolved moment-2.16.0.tgz#f38f2c97c9889b0ee18fc6cc392e1e443ad2da8e
 
 mout@^0.11.0:
   version "0.11.1"
@@ -1412,6 +1417,10 @@ [email protected]:
   version "0.7.1"
   resolved ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098
 
+[email protected]:
+  version "0.7.2"
+  resolved ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765
+
 mv@~2:
   version "2.1.1"
   resolved mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2
@@ -1436,9 +1445,9 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35
 
-"ngrok@git+https://github.com/exponentjs/ngrok.git#v1.3.0":
+"ngrok@git+https://github.com/exponentjs/ngrok#v1.3.0":
   version "2.2.1"
-  resolved "git+https://github.com/exponentjs/ngrok.git#ef4cba8f387fd26b39a2c3259d9d85091c52c73b"
+  resolved "git+https://github.com/exponentjs/ngrok#ef4cba8f387fd26b39a2c3259d9d85091c52c73b"
   dependencies:
     async "^0.9.0"
     decompress-zip "^0.3.0"
@@ -1743,8 +1752,8 @@ readable-stream@^1.1.8, [email protected]:
     string_decoder "~0.10.x"
 
 readable-stream@^2.0.0, readable-stream@2:
-  version "2.1.5"
-  resolved readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0
+  version "2.2.2"
+  resolved readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e
   dependencies:
     buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
@@ -1831,8 +1840,8 @@ repeat-string@^1.5.2:
   resolved repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637
 
 request@^2.55.0, request@^2.74.0:
-  version "2.78.0"
-  resolved request-2.78.0.tgz#e1c8dec346e1c81923b24acdb337f11decabe9cc
+  version "2.76.0"
+  resolved request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
@@ -2007,8 +2016,8 @@ stable@~0.1.3:
   resolved stable-0.1.5.tgz#08232f60c732e9890784b5bed0734f8b32a887b9
 
 "statuses@>= 1.3.0 < 2", statuses@~1.3.0:
-  version "1.3.0"
-  resolved statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a
+  version "1.3.1"
+  resolved statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e
 
 [email protected]:
   version "0.1.0"
@@ -2146,8 +2155,8 @@ timed-out@^3.0.0:
   resolved timed-out-3.0.0.tgz#ff88de96030ce960eabd42487db61d3add229273
 
 tlds@^1.57.0:
-  version "1.169.0"
-  resolved tlds-1.169.0.tgz#53d5884b33fd59ecb920b1bc63a486dae828abeb
+  version "1.174.0"
+  resolved tlds-1.174.0.tgz#8703e75dc154963ca6e8a4338c411c284aa0e7a0
 
 [email protected]:
   version "2.0.2"
@@ -2213,8 +2222,8 @@ type-is@~1.6.13:
     mime-types "~2.1.11"
 
 ua-parser-js@^0.7.9:
-  version "0.7.10"
-  resolved ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f
+  version "0.7.12"
+  resolved ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb
 
 uc.micro@^1.0.1:
   version "1.0.3"
@@ -2271,12 +2280,12 @@ [email protected]:
     extsprintf "1.0.2"
 
 whatwg-fetch@>=0.10.0:
-  version "1.0.0"
-  resolved whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e
+  version "2.0.0"
+  resolved whatwg-fetch-2.0.0.tgz#cde428ac2b1dab717c96bc6785feb557619b249e
 
 which@^1.2.9:
-  version "1.2.11"
-  resolved which-1.2.11.tgz#c8b2eeea6b8c1659fa7c1dd4fdaabe9533dc5e8b
+  version "1.2.12"
+  resolved which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192
   dependencies:
     isexe "^1.1.1"
 
@@ -2296,9 +2305,9 @@ wrappy@1:
   version "1.0.2"
   resolved wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f
 
-xdl@0.23.1:
-  version "0.23.1"
-  resolved xdl-0.23.1.tgz#c2c7e3f6ea31d65515c754ffbfe6110c2be969d3
+xdl@0.24.0:
+  version "0.24.0"
+  resolved xdl-0.24.0.tgz#cd44fc47d62dd9eec8ecb4782d8b66c0ca886336
   dependencies:
     "@ccheever/crayon" "^5.0.0"
     "@exponent/json-file" "^5.2.0"

diff --git a/dev/xde/gulp/build-tasks.js b/dev/xde/gulp/build-tasks.js
@@ -1,17 +1,14 @@
 import 'instapromise';
 
-import electronPrebuilt from 'electron-prebuilt';
+import electron from 'electron';
 import {
   installNodeHeaders,
   rebuildNativeModules,
   shouldRebuildNativeModules,
 } from 'electron-rebuild';
 import fs from 'fs';
 import gulp from 'gulp';
-import babel from 'gulp-babel';
-import changed from 'gulp-changed';
 import rename from 'gulp-rename';
-import sourcemaps from 'gulp-sourcemaps';
 import logger from 'gulplog';
 import path from 'path';
 import rimraf from 'rimraf';
@@ -27,44 +24,32 @@ const paths = {
 };
 
 let tasks = {
-  async buildNativeModules() {
-    let shouldRebuild = await shouldRebuildNativeModules(electronPrebuilt);
-    if (!shouldRebuild) {
-      return;
-    }
-
-    let versionResult = await spawnAsync(electronPrebuilt, ['--version']);
-    let electronVersion = /v(\d+\.\d+\.\d+)/.exec(versionResult.stdout)[1];
-
-    // When Node and Electron share the same ABI version again (discussion here:
-    // https://github.com/electron/electron/issues/5851) we can remove this
-    // check and rely solely on shouldRebuildNativeModules again
-    let hasHeaders = await hasNodeHeadersAsync(electronVersion);
-    if (hasHeaders) {
-      return;
-    }
+  buildNativeModules(force = false) {
+    return async function() {
+      let shouldRebuild = await shouldRebuildNativeModules(electron);
+      if (!shouldRebuild && !force) {
+        return;
+      }
 
-    logger.info(`Rebuilding native Node modules for Electron ${electronVersion}...`);
-    await installNodeHeaders(electronVersion);
-    await rebuildNativeModules(electronVersion, paths.nodeModules);
-  },
+      let versionResult = await spawnAsync(electron, ['--version']);
+      let electronVersion = /v(\d+\.\d+\.\d+)/.exec(versionResult.stdout)[1];
 
-  babel() {
-    return gulp.src(paths.source.js)
-      .pipe(changed(paths.build))
-      .pipe(sourcemaps.init())
-      .pipe(babel())
-      .pipe(sourcemaps.write('__sourcemaps__'))
-      .pipe(gulp.dest(paths.build));
-  },
+      // When Node and Electron share the same ABI version again (discussion here:
+      // https://github.com/electron/electron/issues/5851) we can remove this
+      // check and rely solely on shouldRebuildNativeModules again
+      let hasHeaders = await hasNodeHeadersAsync(electronVersion);
+      if (hasHeaders && !force) {
+        return;
+      }
 
-  watchBabel(done) {
-    gulp.watch(paths.source.js, tasks.babel);
-    done();
+      logger.info(`Rebuilding native Node modules for Electron ${electronVersion}...`);
+      await installNodeHeaders(electronVersion);
+      await rebuildNativeModules(electronVersion, paths.nodeModules);
+    };
   },
 
   icon() {
-    let contentsPath = path.dirname(path.dirname(electronPrebuilt));
+    let contentsPath = path.dirname(path.dirname(electron));
     let resourcesPath = path.join(contentsPath, 'Resources');
     return gulp.src(paths.macIcon)
       .pipe(rename('electron.icns'))