react-dev-utils - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0-alpha.f55d2212

clearConsole.js

@@ -13,5 +13,7 @@ /**
 function clearConsole() {
-  process.stdout.write(process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H');
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'
+  );
 }
 
 module.exports = clearConsole;

FileSizeReporter.js

@@ -36,3 +36,3 @@ /**
         size: size,
-        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
+        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''),
       };
@@ -92,8 +92,11 @@ });
           .filter(fileName => /\.(js|css)$/.test(fileName))
-          .reduce((memo, fileName) => {
-            var contents = fs.readFileSync(fileName);
-            var key = removeFileNameHash(buildFolder, fileName);
-            memo[key] = gzipSize(contents);
-            return memo;
-          }, {});
+          .reduce(
+            (memo, fileName) => {
+              var contents = fs.readFileSync(fileName);
+              var key = removeFileNameHash(buildFolder, fileName);
+              memo[key] = gzipSize(contents);
+              return memo;
+            },
+            {}
+          );
       }
@@ -100,0 +103,0 @@ resolve({

formatWebpackMessages.js

@@ -49,14 +49,11 @@ /**
       // Clean up message because "Module not found: " is descriptive enough.
-      lines[1].replace(
-        'Cannot resolve \'file\' or \'directory\' ', ''
-      ).replace(
-        'Cannot resolve module ', ''
-      ).replace(
-        'Error: ', ''
-      ),
+      lines[1]
+        .replace("Cannot resolve 'file' or 'directory' ", '')
+        .replace('Cannot resolve module ', '')
+        .replace('Error: ', ''),
       // Skip all irrelevant lines.
       // (For some reason they only appear on the client in browser.)
       '',
-      lines[lines.length - 1] // error location is the last line
-    ]
+      lines[lines.length - 1], // error location is the last line
+    ];
   }
@@ -112,3 +109,4 @@
   message = message.replace(
-    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm, ''
+    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm,
+    ''
   ); // at ... ...:x:y
@@ -121,10 +119,10 @@
   var formattedErrors = json.errors.map(function(message) {
-    return 'Error in ' + formatMessage(message)
+    return 'Error in ' + formatMessage(message);
   });
   var formattedWarnings = json.warnings.map(function(message) {
-    return 'Warning in ' + formatMessage(message)
+    return 'Warning in ' + formatMessage(message);
   });
   var result = {
     errors: formattedErrors,
-    warnings: formattedWarnings
+    warnings: formattedWarnings,
   };
@@ -131,0 +129,0 @@ if (result.errors.some(isLikelyASyntaxError)) {

getProcessForPort.js

@@ -21,4 +21,4 @@ /**
     'pipe', // stdout (default)
-    'ignore' //stderr
-  ]
+    'ignore', //stderr
+  ],
 };
@@ -31,3 +31,6 @@
 function getProcessIdOnPort(port) {
-  return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions).trim();
+  return execSync(
+    'lsof -i:' + port + ' -P -t -sTCP:LISTEN',
+    execOptions
+  ).trim();
 }
@@ -40,22 +43,26 @@
     return require(packagePath).name;
-  } catch(e) {
+  } catch (e) {
     return null;
   }
-
 }
 
 function getProcessCommand(processId, processDirectory) {
-  var command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions);
+  var command = execSync(
+    'ps -o command -p ' + processId + ' | sed -n 2p',
+    execOptions
+  );
 
   if (isProcessAReactApp(command)) {
     const packageName = getPackageNameInDirectory(processDirectory);
-    return (packageName) ? packageName + '\n' : command;
+    return packageName ? packageName + '\n' : command;
   } else {
     return command;
   }
-
 }
 
 function getDirectoryOfProcessById(processId) {
-  return execSync('lsof -p '+ processId + ' | awk \'$4=="cwd" {print $9}\'', execOptions).trim();
+  return execSync(
+    'lsof -p ' + processId + ' | awk \'$4=="cwd" {print $9}\'',
+    execOptions
+  ).trim();
 }
@@ -69,3 +76,3 @@
     return chalk.cyan(command) + chalk.blue('  in ') + chalk.cyan(directory);
-  } catch(e) {
+  } catch (e) {
     return null;
@@ -76,2 +83,1 @@ }
 module.exports = getProcessForPort;
-

InterpolateHtmlPlugin.js

@@ -28,3 +28,4 @@ /**
     compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-before-html-processing',
+      compilation.plugin(
+        'html-webpack-plugin-before-html-processing',
         (data, callback) => {
@@ -31,0 +32,0 @@ // Run HTML through a series of user-specified string replacements.

openBrowser.js

@@ -33,8 +33,4 @@ /**
   // existing tab when possible instead of creating a new one.
-  const shouldTryOpenChromeWithAppleScript = (
-    process.platform === 'darwin' && (
-      typeof browser !== 'string' ||
-      browser === OSX_CHROME
-    )
-  );
+  const shouldTryOpenChromeWithAppleScript = process.platform === 'darwin' &&
+    (typeof browser !== 'string' || browser === OSX_CHROME);
 
@@ -46,6 +42,6 @@ if (shouldTryOpenChromeWithAppleScript) {
       execSync('ps cax | grep "Google Chrome"');
-      execSync(
-        'osascript openChrome.applescript ' + url,
-        {cwd: __dirname, stdio: 'ignore'}
-      );
+      execSync('osascript openChrome.applescript ' + url, {
+        cwd: __dirname,
+        stdio: 'ignore',
+      });
       return true;
@@ -64,7 +60,7 @@ } catch (err) {
   }
-  
+
   // Fallback to opn
   // (It will always open new tab)
   try {
-    var options = {app: browser};
+    var options = { app: browser };
     opn(url, options).catch(() => {}); // Prevent `unhandledRejection` error.
@@ -71,0 +67,0 @@ return true;

package.json

 {
   "name": "react-dev-utils",
-  "version": "0.5.2",
+  "version": "0.6.0-alpha.f55d2212",
   "description": "Webpack utilities used by Create React App",
@@ -14,4 +14,6 @@ "repository": "facebookincubator/create-react-app",
   "files": [
+    "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
+    "crashOverlay.js",
     "FileSizeReporter.js",
@@ -28,3 +30,4 @@ "formatWebpackMessages.js",
   "dependencies": {
-    "ansi-html": "0.0.5",
+    "anser": "1.1.0",
+    "babel-code-frame": "6.20.0",
     "chalk": "1.1.3",
@@ -37,5 +40,6 @@ "escape-string-regexp": "1.0.5",
     "recursive-readdir": "2.1.1",
-    "sockjs-client": "1.0.1",
+    "sockjs-client": "1.1.2",
+    "stack-frame-resolver": "0.1.3",
     "strip-ansi": "3.0.1"
   }
 }

prompt.js

@@ -19,3 +19,5 @@ /**
   if (typeof isYesDefault !== 'boolean') {
-    throw new Error('Provide explicit boolean isYesDefault as second argument.');
+    throw new Error(
+      'Provide explicit boolean isYesDefault as second argument.'
+    );
   }
@@ -22,0 +24,0 @@ return new Promise(resolve => {

webpackHotDevClient.js

@@ -21,3 +21,2 @@ /**
 
-var ansiHTML = require('ansi-html');
 var SockJS = require('sockjs-client');
@@ -28,18 +27,6 @@ var stripAnsi = require('strip-ansi');
 var Entities = require('html-entities').AllHtmlEntities;
+var ansiHTML = require('./ansiHTML');
 var entities = new Entities();
 
-// Color scheme inspired by https://github.com/glenjamin/webpack-hot-middleware
-var colors = {
-  reset: ['transparent', 'transparent'],
-  black: '181818',
-  red: 'E36049',
-  green: 'B3CB74',
-  yellow: 'FFD080',
-  blue: '7CAFC2',
-  magenta: '7FACCA',
-  cyan: 'C3C2EF',
-  lightgrey: 'EBE7E3',
-  darkgrey: '6D7891'
-};
-ansiHTML.setColors(colors);
+var red = '#E36049';
 
@@ -64,3 +51,3 @@ function createOverlayIframe(onIframeLoad) {
 function addOverlayDivTo(iframe) {
-  var div =  iframe.contentDocument.createElement('div');
+  var div = iframe.contentDocument.createElement('div');
   div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
@@ -75,4 +62,4 @@ div.style.position = 'fixed';
   div.style.height = '100vh';
-  div.style.backgroundColor = 'black';
-  div.style.color = '#E8E8E8';
+  div.style.backgroundColor = '#fafafa';
+  div.style.color = '#333';
   div.style.fontFamily = 'Menlo, Consolas, monospace';
@@ -124,5 +111,4 @@ div.style.fontSize = 'large';
     // Make it look similar to our terminal.
-    overlayDiv.innerHTML =
-      '<span style="color: #' +
-      colors.red +
+    overlayDiv.innerHTML = '<span style="color: ' +
+      red +
       '">Failed to compile.</span><br><br>' +
@@ -133,3 +119,3 @@ ansiHTML(entities.encode(message));
 
-function destroyErrorOverlay() {  
+function destroyErrorOverlay() {
   if (!overlayDiv) {
@@ -148,9 +134,11 @@ // It is not there in the first place.
 // Connect to WebpackDevServer via a socket.
-var connection = new SockJS(url.format({
-  protocol: window.location.protocol,
-  hostname: window.location.hostname,
-  port: window.location.port,
-  // Hardcoded in WebpackDevServer
-  pathname: '/sockjs-node'
-}));
+var connection = new SockJS(
+  url.format({
+    protocol: window.location.protocol,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: '/sockjs-node',
+  })
+);
 
@@ -232,3 +220,3 @@ // Unlike WebpackDevServer client, we won't try to reconnect
     errors: errors,
-    warnings: []
+    warnings: [],
   });
@@ -258,19 +246,23 @@
   switch (message.type) {
-  case 'hash':
-    handleAvailableHash(message.data);
-    break;
-  case 'still-ok':
-  case 'ok':
-    handleSuccess();
-    break;
-  case 'warnings':
-    handleWarnings(message.data);
-    break;
-  case 'errors':
-    handleErrors(message.data);
-    break;
-  default:
+    case 'hash':
+      handleAvailableHash(message.data);
+      break;
+    case 'still-ok':
+    case 'ok':
+      handleSuccess();
+      break;
+    case 'content-changed':
+      // Triggered when a file from `contentBase` changed.
+      window.location.reload();
+      break;
+    case 'warnings':
+      handleWarnings(message.data);
+      break;
+    case 'errors':
+      handleErrors(message.data);
+      break;
+    default:
     // Do nothing.
   }
-}
+};
 
@@ -320,3 +312,3 @@ // Is there a newer version of this code available?
   // https://webpack.github.io/docs/hot-module-replacement.html#check
-  var result = module.hot.check(/* autoApply */true, handleApplyUpdates);
+  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);
 
@@ -323,0 +315,0 @@ // // Webpack 2 returns a Promise instead of invoking a callback

No alert changes

Improved metrics

Total package byte prevSize

65674

72.23%

Number of package files

15

15.38%

Lines of code

1697

119.25%

Worsened metrics

Dependency count

12

20%

Dependency changes

• + Added

  anser@1.1.0

• + Added

  babel-code-frame@6.20.0

• + Added

  stack-frame-resolver@0.1.3

• + Added

  anser@1.1.0
  (transitive)

• + Added

  babel-code-frame@6.20.0
  (transitive)

• + Added

  babel-runtime@6.20.0
  (transitive)

• + Added

  core-js@2.6.12
  (transitive)

• + Added

  error-stack-parser@2.0.0
  (transitive)

• + Added

  esutils@2.0.3
  (transitive)

• + Added

  faye-websocket@0.11.4
  (transitive)

• + Added

  js-tokens@2.0.0
  (transitive)

• + Added

  regenerator-runtime@0.10.5
  (transitive)

• + Added

  sockjs-client@1.1.2
  (transitive)

• + Added

  source-map@0.5.6
  (transitive)

• + Added

  stack-frame-resolver@0.1.3
  (transitive)

• + Added

  stackframe@1.3.4
  (transitive)

• - Removed

  ansi-html@0.0.5

• - Removed

  ansi-html@0.0.5
  (transitive)

• - Removed

  faye-websocket@0.7.3
  (transitive)

• - Removed

  sockjs-client@1.0.1
  (transitive)

• Updated

  sockjs-client@1.1.2