react-dev-utils - npm Package Compare versions

Comparing version 1.0.0-alpha.134d2297 to 1.0.0-alpha.c82c4f05

ansiHTML.js

@@ -18,3 +18,3 @@ /**
 // var base02 = 'c8c8fa'; // Selection Background
-var base03 = '969896'; // Comments, Invisibles, Line Highlighting
+var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting
 // var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
@@ -24,9 +24,9 @@ var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
 // var base07 = 'ffffff'; // Light Background (Not often used)
-var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
 // var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
 // var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
-var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted
-var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes
+var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted
+var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes
 // var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
-var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
 // var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
@@ -33,0 +33,0 @@

eslintFormatter.js

@@ -15,2 +15,4 @@ 'use strict';
   let output = '\n';
+  let hasErrors = false;
+  let reportContainsErrorRuleIDs = false;
 
@@ -23,3 +25,2 @@ results.forEach(result => {
 
-    let hasErrors = false;
     messages = messages.map(message => {
@@ -30,2 +31,5 @@ let messageType;
         hasErrors = true;
+        if (message.ruleId) {
+          reportContainsErrorRuleIDs = true;
+        }
       } else {
@@ -51,5 +55,5 @@ messageType = 'warn';
 
-    // add color to messageTypes
+    // add color to rule keywords
     messages.forEach(m => {
-      m[3] = m[2] === 'error' ? chalk.red(m[3]) : chalk.yellow(m[3]);
+      m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]);
       m.splice(2, 1);
@@ -68,2 +72,15 @@ });
 
+  if (reportContainsErrorRuleIDs) {
+    // Unlike with warnings, we have to do it here.
+    // We have similar code in react-scripts for warnings,
+    // but warnings can appear in multiple files so we only
+    // print it once at the end. For errors, however, we print
+    // it here because we always show at most one error, and
+    // we can only be sure it's an ESLint error before exiting
+    // this function.
+    output += 'Search for the ' +
+      chalk.underline(chalk.red('rule keywords')) +
+      ' to learn more about each error.';
+  }
+
   return output;
@@ -70,0 +87,0 @@ }

formatWebpackMessages.js

@@ -68,3 +68,4 @@ /**
         .replace('Cannot resolve module ', '')
-        .replace('Error: ', ''),
+        .replace('Error: ', '')
+        .replace('[CaseSensitivePathsPlugin] ', ''),
     ];
@@ -71,0 +72,0 @@ }

package.json

 {
   "name": "react-dev-utils",
-  "version": "1.0.0-alpha.134d2297",
+  "version": "1.0.0-alpha.c82c4f05",
   "description": "Webpack utilities used by Create React App",
@@ -24,5 +24,7 @@ "repository": "facebookincubator/create-react-app",
     "launchEditor.js",
+    "ModuleScopePlugin.js",
     "openBrowser.js",
     "openChrome.applescript",
     "prepareProxy.js",
+    "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
@@ -29,0 +31,0 @@ "webpackHotDevClient.js"

README.md

@@ -37,3 +37,3 @@ # react-dev-utils
     // ...
-    publicPath: publicUrl + '/' 
+    publicPath: publicUrl + '/'
   },
@@ -60,2 +60,26 @@ // ...
 
+
+#### `new ModuleScopePlugin(appSrc: string)`
+
+This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it.
+
+```js
+var path = require('path');
+var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+
+module.exports = {
+  // ...
+  resolve: {
+    // ...
+    plugins: [
+      new ModuleScopePlugin(paths.appSrc),
+      // ...
+    ],
+    // ...
+  },
+  // ...
+}
+```
+
 #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
@@ -117,3 +141,3 @@
 
-This is our custom ESLint formatter that integrates well with Create React App console output.  
+This is our custom ESLint formatter that integrates well with Create React App console output.<br>
 You can use the default one instead if you prefer so.
@@ -234,2 +258,15 @@
 
+#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`
+
+Prints hosting instructions after the project is built.
+
+Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
+
+```js
+const appPackage = require(paths.appPackageJson);
+const publicUrl = paths.publicUrl;
+const publicPath = config.output.publicPath;
+printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
+```
+
 #### `webpackHotDevClient.js`
@@ -236,0 +273,0 @@

webpackHotDevClient.js

@@ -29,4 +29,2 @@ /**
 
-var red = '#E36049';
-
 function createOverlayIframe(onIframeLoad) {
@@ -50,24 +48,49 @@ var iframe = document.createElement('iframe');
 function addOverlayDivTo(iframe) {
+  // TODO: unify these styles with react-error-overlay
+  iframe.contentDocument.body.style.margin = 0;
+  iframe.contentDocument.body.style.maxWidth = '100vw';
+
+  var outerDiv = iframe.contentDocument.createElement('div');
+  outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
+  outerDiv.style.width = '100%';
+  outerDiv.style.height = '100%';
+  outerDiv.style.boxSizing = 'border-box';
+  outerDiv.style.textAlign = 'center';
+  outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
+
   var div = iframe.contentDocument.createElement('div');
-  div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
-  div.style.position = 'fixed';
+  div.style.position = 'relative';
+  div.style.display = 'inline-flex';
+  div.style.flexDirection = 'column';
+  div.style.height = '100%';
+  div.style.width = '1024px';
+  div.style.maxWidth = '100%';
+  div.style.overflowX = 'hidden';
+  div.style.overflowY = 'auto';
+  div.style.padding = '0.5rem';
   div.style.boxSizing = 'border-box';
-  div.style.left = 0;
-  div.style.top = 0;
-  div.style.right = 0;
-  div.style.bottom = 0;
-  div.style.width = '100vw';
-  div.style.height = '100vh';
-  div.style.backgroundColor = '#fafafa';
-  div.style.color = '#333';
-  div.style.fontFamily = 'Menlo, Consolas, monospace';
-  div.style.fontSize = 'large';
-  div.style.padding = '2rem';
-  div.style.lineHeight = '1.2';
+  div.style.textAlign = 'start';
+  div.style.fontFamily = 'Consolas, Menlo, monospace';
+  div.style.fontSize = '11px';
   div.style.whiteSpace = 'pre-wrap';
-  div.style.overflow = 'auto';
-  iframe.contentDocument.body.appendChild(div);
+  div.style.wordBreak = 'break-word';
+  div.style.lineHeight = '1.5';
+  div.style.color = 'rgb(41, 50, 56)';
+
+  outerDiv.appendChild(div);
+  iframe.contentDocument.body.appendChild(outerDiv);
   return div;
 }
 
+function overlayHeaderStyle() {
+  return 'font-size: 2em;' +
+    'font-family: sans-serif;' +
+    'color: rgb(206, 17, 38);' +
+    'white-space: pre-wrap;' +
+    'margin: 0.75rem 2rem 0px 0px;' +
+    'flex: 0 0 auto;' +
+    'max-height: 35%;' +
+    'overflow: auto;';
+}
+
 var overlayIframe = null;
@@ -108,7 +131,17 @@ var overlayDiv = null;
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
-    // Make it look similar to our terminal.
-    overlayDiv.innerHTML = '<span style="color: ' +
-      red +
-      '">Failed to compile.</span><br><br>' +
-      ansiHTML(entities.encode(message));
+    // TODO: unify this with our runtime overlay
+    overlayDiv.innerHTML = '<div style="' +
+      overlayHeaderStyle() +
+      '">Failed to compile</div><br><br>' +
+      '<pre style="' +
+      'display: block; padding: 0.5em; margin-top: 0.5em; ' +
+      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
+      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
+      '<code style="font-family: Consolas, Menlo, monospace;">' +
+      ansiHTML(entities.encode(message)) +
+      '</code></pre>' +
+      '<div style="' +
+      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
+      'flex: 0 0 auto">' +
+      'This error occurred during the build time and cannot be dismissed.</div>';
   });
@@ -115,0 +148,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

64507

increased by17.19%

Number of package files

18

increased by12.5%

Lines of code

1514

increased by17%

Number of lines in readme file

289

increased by14.68%

No dependency changes