3.4.0 Add Dev Utils and Error Overlay for compares

Author: devloco

packages/create-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-app",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "keywords": [
     "react"
   ],

packages/create-react-app/yarn.lock.cached

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var chalk = require('chalk');
+var filesize = require('filesize');
+var recursive = require('recursive-readdir');
+var stripAnsi = require('strip-ansi');
+var gzipSize = require('gzip-size').sync;
+
+function canReadAsset(asset) {
+  return (
+    /\.(js|css)$/.test(asset) &&
+    !/service-worker\.js/.test(asset) &&
+    !/precache-manifest\.[0-9a-f]+\.js/.test(asset)
+  );
+}
+
+// Prints a detailed summary of build files.
+function printFileSizesAfterBuild(
+  webpackStats,
+  previousSizeMap,
+  buildFolder,
+  maxBundleGzipSize,
+  maxChunkGzipSize
+) {
+  var root = previousSizeMap.root;
+  var sizes = previousSizeMap.sizes;
+  var assets = (webpackStats.stats || [webpackStats])
+    .map(stats =>
+      stats
+        .toJson({ all: false, assets: true })
+        .assets.filter(asset => canReadAsset(asset.name))
+        .map(asset => {
+          var fileContents = fs.readFileSync(path.join(root, asset.name));
+          var size = gzipSize(fileContents);
+          var previousSize = sizes[removeFileNameHash(root, asset.name)];
+          var difference = getDifferenceLabel(size, previousSize);
+          return {
+            folder: path.join(
+              path.basename(buildFolder),
+              path.dirname(asset.name)
+            ),
+            name: path.basename(asset.name),
+            size: size,
+            sizeLabel:
+              filesize(size) + (difference ? ' (' + difference + ')' : ''),
+          };
+        })
+    )
+    .reduce((single, all) => all.concat(single), []);
+  assets.sort((a, b) => b.size - a.size);
+  var longestSizeLabelLength = Math.max.apply(
+    null,
+    assets.map(a => stripAnsi(a.sizeLabel).length)
+  );
+  var suggestBundleSplitting = false;
+  assets.forEach(asset => {
+    var sizeLabel = asset.sizeLabel;
+    var sizeLength = stripAnsi(sizeLabel).length;
+    if (sizeLength < longestSizeLabelLength) {
+      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
+      sizeLabel += rightPadding;
+    }
+    var isMainBundle = asset.name.indexOf('main.') === 0;
+    var maxRecommendedSize = isMainBundle
+      ? maxBundleGzipSize
+      : maxChunkGzipSize;
+    var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize;
+    if (isLarge && path.extname(asset.name) === '.js') {
+      suggestBundleSplitting = true;
+    }
+    console.log(
+      '  ' +
+        (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) +
+        '  ' +
+        chalk.dim(asset.folder + path.sep) +
+        chalk.cyan(asset.name)
+    );
+  });
+  if (suggestBundleSplitting) {
+    console.log();
+    console.log(
+      chalk.yellow('The bundle size is significantly larger than recommended.')
+    );
+    console.log(
+      chalk.yellow(
+        'Consider reducing it with code splitting: https://goo.gl/9VhYWB'
+      )
+    );
+    console.log(
+      chalk.yellow(
+        'You can also analyze the project dependencies: https://goo.gl/LeUzfb'
+      )
+    );
+  }
+}
+
+function removeFileNameHash(buildFolder, fileName) {
+  return fileName
+    .replace(buildFolder, '')
+    .replace(/\\/g, '/')
+    .replace(
+      /\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/,
+      (match, p1, p2, p3, p4) => p1 + p4
+    );
+}
+
+// Input: 1024, 2048
+// Output: "(+1 KB)"
+function getDifferenceLabel(currentSize, previousSize) {
+  var FIFTY_KILOBYTES = 1024 * 50;
+  var difference = currentSize - previousSize;
+  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
+  if (difference >= FIFTY_KILOBYTES) {
+    return chalk.red('+' + fileSize);
+  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
+    return chalk.yellow('+' + fileSize);
+  } else if (difference < 0) {
+    return chalk.green(fileSize);
+  } else {
+    return '';
+  }
+}
+
+function measureFileSizesBeforeBuild(buildFolder) {
+  return new Promise(resolve => {
+    recursive(buildFolder, (err, fileNames) => {
+      var sizes;
+      if (!err && fileNames) {
+        sizes = fileNames.filter(canReadAsset).reduce((memo, fileName) => {
+          var contents = fs.readFileSync(fileName);
+          var key = removeFileNameHash(buildFolder, fileName);
+          memo[key] = gzipSize(contents);
+          return memo;
+        }, {});
+      }
+      resolve({
+        root: buildFolder,
+        sizes: sizes || {},
+      });
+    });
+  });
+}
+
+module.exports = {
+  measureFileSizesBeforeBuild: measureFileSizesBeforeBuild,
+  printFileSizesAfterBuild: printFileSizesAfterBuild,
+};

packages/react-dev-utils/FileSizeReporter.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = ForkTsCheckerWebpackPlugin;

packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+class InlineChunkHtmlPlugin {
+  constructor(htmlWebpackPlugin, tests) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+    this.tests = tests;
+  }
+
+  getInlinedTag(publicPath, assets, tag) {
+    if (tag.tagName !== 'script' || !(tag.attributes && tag.attributes.src)) {
+      return tag;
+    }
+    const scriptName = publicPath
+      ? tag.attributes.src.replace(publicPath, '')
+      : tag.attributes.src;
+    if (!this.tests.some(test => scriptName.match(test))) {
+      return tag;
+    }
+    const asset = assets[scriptName];
+    if (asset == null) {
+      return tag;
+    }
+    return { tagName: 'script', innerHTML: asset.source(), closeTag: true };
+  }
+
+  apply(compiler) {
+    let publicPath = compiler.options.output.publicPath || '';
+    if (publicPath && !publicPath.endsWith('/')) {
+      publicPath += '/';
+    }
+
+    compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
+      const tagFunction = tag =>
+        this.getInlinedTag(publicPath, compilation.assets, tag);
+
+      const hooks = this.htmlWebpackPlugin.getHooks(compilation);
+      hooks.alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {
+        assets.headTags = assets.headTags.map(tagFunction);
+        assets.bodyTags = assets.bodyTags.map(tagFunction);
+      });
+
+      // Still emit the runtime chunk for users who do not use our generated
+      // index.html file.
+      // hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
+      //   Object.keys(compilation.assets).forEach(assetName => {
+      //     if (this.tests.some(test => assetName.match(test))) {
+      //       delete compilation.assets[assetName];
+      //     }
+      //   });
+      // });
+    });
+  }
+}
+
+module.exports = InlineChunkHtmlPlugin;

packages/react-dev-utils/InlineChunkHtmlPlugin.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This Webpack plugin lets us interpolate custom variables into `index.html`.
+// Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })`
+// Then, you can use %MY_VARIABLE% in your `index.html`.
+
+// It works in tandem with HtmlWebpackPlugin.
+// Learn more about creating plugins like this:
+// https://github.com/ampedandwired/html-webpack-plugin#events
+
+'use strict';
+const escapeStringRegexp = require('escape-string-regexp');
+
+class InterpolateHtmlPlugin {
+  constructor(htmlWebpackPlugin, replacements) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+    this.replacements = replacements;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .afterTemplateExecution.tap('InterpolateHtmlPlugin', data => {
+          // Run HTML through a series of user-specified string replacements.
+          Object.keys(this.replacements).forEach(key => {
+            const value = this.replacements[key];
+            data.html = data.html.replace(
+              new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
+              value
+            );
+          });
+        });
+    });
+  }
+}
+
+module.exports = InterpolateHtmlPlugin;

packages/react-dev-utils/InterpolateHtmlPlugin.js

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.