Read stats.json from new build artifacts folder in dev (#12)

* Use "main" as default chunk name Webpack will output the chunk under the name "main", so it makes sense to use that as the default here. * Read stats.json from build artifacts dir in dev * Move statsPath logic into getStatsPath utility * Use lodash.include for asset parsing Since Array.prototype.includes isn't well supported in all versions of Node * Update test and test fixtures There's no longer a concept of a "default" bundle. Chunk selectors should be exhaustive * Use lodash.includes for JS asset parsing
electrode-io · Dec 9, 2016 · 3abb4be · 3abb4be
1 parent d38e643
commit 3abb4be
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/packages/electrode-react-webapp/lib/index.js b/packages/electrode-react-webapp/lib/index.js
@@ -31,20 +31,21 @@ function resolveChunkSelector(options) {
   }
 
   return () => ({
-    css: "",
-    js: ""
+    css: "main",
+    js: "main"
   });
 }
 
 /**
  * Load stats.json which is created during build.
+ * Attempt to load the stats.json file which contains a manifest of
  * The file contains bundle files which are to be loaded on the client side.
  *
- * @param {string} statsFilePath - path of stats.json
+ * @param {string} statsPath - path of stats.json
  * @returns {Promise.<Object>} an object containing an array of file names
  */
-function loadAssetsFromStats(statsFilePath) {
-  return Promise.resolve(Path.resolve(statsFilePath))
+function loadAssetsFromStats(statsPath) {
+  return Promise.resolve(Path.resolve(statsPath))
     .then(require)
     .then((stats) => {
       const assets = {};
@@ -64,7 +65,6 @@ function loadAssetsFromStats(statsFilePath) {
 
       assets.js = jsAssets;
       assets.css = cssAssets;
-
       return assets;
     })
     .catch(() => ({}));
@@ -94,6 +94,21 @@ function getCriticalCSS(path) {
   }
 }
 
+/**
+ * Resolves the path to the stats.json file containing our
+ * asset list. In dev the stats.json file is written to a
+ * build artifacts directory, while in produciton its contained
+ * within the dist/server folder
+ * @param  {string} statsFilePath      path to stats.json
+ * @param  {string} buildArtifactsPath path to stats.json in dev
+ * @return {string}                    current active path
+ */
+function getStatsPath(statsFilePath, buildArtifactsPath) {
+  return process.env.WEBPACK_DEV === "true"
+    ? Path.resolve(process.cwd(), buildArtifactsPath, "stats.json")
+    : statsFilePath;
+}
+
 function makeRouteHandler(options, userContent) {
   const WEBPACK_DEV = options.webpackDev;
   const RENDER_JS = options.renderJS;
@@ -120,11 +135,11 @@ function makeRouteHandler(options, userContent) {
       `${devBundleBase}bundle.dev.js`;
     const jsChunk = _.find(
       assets.js,
-      (asset) => asset.chunkNames[0] === (chunkNames.js || "bundle")
+      (asset) => _.includes(asset.chunkNames, chunkNames.js)
     );
     const cssChunk = _.find(
       assets.css,
-      (asset) => asset.chunkNames[0] === (chunkNames.css || "bundle")
+      (asset) => _.includes(asset.chunkNames, chunkNames.css)
     );
 
     const bundleCss = () => {
@@ -242,7 +257,8 @@ const registerRoutes = (server, options, next) => {
     paths: {},
     stats: "dist/server/stats.json",
     iconStats: "dist/server/iconstats.json",
-    criticalCSS: "dist/js/critical.css"
+    criticalCSS: "dist/js/critical.css",
+    buildArtifacts: ".build"
   };
 
   const resolveContent = (content) => {
@@ -257,8 +273,9 @@ const registerRoutes = (server, options, next) => {
   const pluginOptions = _.defaultsDeep({}, options, pluginOptionsDefaults);
   const chunkSelector = resolveChunkSelector(pluginOptions);
   const devBundleBase = `http://${pluginOptions.devServer.host}:${pluginOptions.devServer.port}/js/`;
+  const statsPath = getStatsPath(pluginOptions.stats, pluginOptions.buildArtifacts);
 
-  return Promise.try(() => loadAssetsFromStats(pluginOptions.stats))
+  return Promise.try(() => loadAssetsFromStats(statsPath))
     .then((assets) => {
       pluginOptions.__internals = {
         assets,

diff --git a/packages/electrode-react-webapp/test/data/chunk-selector.js b/packages/electrode-react-webapp/test/data/chunk-selector.js
@@ -9,8 +9,8 @@ const BAR_BUNDLE = {
   js: "bar"
 };
 const DEFAULT_BUNDLE = {
-  css: "",
-  js: ""
+  css: "home",
+  js: "home"
 };
 
 module.exports = (request) => {

diff --git a/packages/electrode-react-webapp/test/data/stats-test-multibundle.json b/packages/electrode-react-webapp/test/data/stats-test-multibundle.json
@@ -7,6 +7,10 @@
     "bar": [
       "bar.bundle.f07a873ce87fc904a6a5.js",
       "bar.style.f07a873ce87fc904a6a5.css"
+    ],
+    "home": [
+      "home.bundle.f07a873ce87fc904a6a5.js",
+      "home.style.f07a873ce87fc904a6a5.css"
     ]
   },
   "assets": [{
@@ -46,22 +50,22 @@
       "bar"
     ]
   }, {
-     "name": "style.f07a873ce87fc904a6a5.css",
+     "name": "home.style.f07a873ce87fc904a6a5.css",
       "size": 888,
       "chunks": [
         0
       ],
       "chunkNames": [
-        "bundle"
+        "home"
       ]
   }, {
-    "name": "bundle.f07a873ce87fc904a6a5.js",
+    "name": "home.bundle.f07a873ce87fc904a6a5.js",
     "size": 888,
     "chunks": [
       0
     ],
     "chunkNames": [
-      "bundle"
+      "home"
     ]
   }]
 }