react-dev-utils - npm Package Compare versions

Comparing version 1.0.0-alpha.58689133 to 1.0.0-alpha.0d0536f9

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.58689133",
+  "version": "1.0.0-alpha.0d0536f9",
   "description": "Webpack utilities used by Create React App",
@@ -24,9 +24,12 @@ "repository": "facebookincubator/create-react-app",
     "launchEditor.js",
+    "ModuleScopePlugin.js",
     "openBrowser.js",
     "openChrome.applescript",
-    "prepareProxy.js",
+    "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
+    "WebpackDevServerUtils.js",
     "webpackHotDevClient.js"
   ],
   "dependencies": {
+    "@timer/detect-port": "1.1.3",
     "address": "1.0.1",
@@ -41,2 +44,3 @@ "anser": "1.3.0",
     "html-entities": "1.2.1",
+    "inquirer": "3.0.6",
     "opn": "5.0.0",
@@ -43,0 +47,0 @@ "recursive-readdir": "2.2.1",

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,4 +258,35 @@
 
-#### `webpackHotDevClient.js`
+#### `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);
+```
+
+#### `WebpackDevServerUtils`
+
+##### `choosePort(host: string, defaultPort: number): Promise<number | null>`
+
+Returns a Promise resolving to either `defaultPort` or next available port if the user confirms it is okay to do. If the port is taken and the user has refused to use another port, or if the terminal is not interactive and can’t present user with the choice, resolves to `null`.
+
+##### `createCompiler(webpack: Function, config: Object, appName: string, urls: Object, useYarn: boolean): WebpackCompiler`
+
+Creates a Webpack compiler instance for WebpackDevServer with built-in helpful messages. Takes the `require('webpack')` entry point as the first argument. To provide the `urls` argument, use `prepareUrls()` described below.
+
+##### `prepareProxy(proxySetting: string): Object`
+
+Creates a WebpackDevServer `proxy` configuration object from the `proxy` setting in `package.json`.
+
+##### `prepareUrls(protocol: string, host: string, port: number): Object`
+
+Returns an object with local and remote URLs for the development server. Pass this object to `createCompiler()` described above.
+
+#### `webpackHotDevClient`
+
 This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.
@@ -238,0 +293,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 2rem 0.75rem 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>' +
+      '<pre style="' +
+      'display: block; padding: 0.5em; margin-top: 0; ' +
+      '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 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71717

increased by30.29%

Number of package files

18

increased by12.5%

Lines of code

1705

increased by31.76%

Number of lines in readme file

307

increased by21.83%

Worsened metrics

Dependency count

19

increased by11.76%

Dependency changes

• + Added@timer/detect-port@1.1.3

• + Addedinquirer@3.0.6

• + Added@timer/detect-port@1.1.3(transitive)

• + Addedansi-escapes@1.4.0(transitive)

• + Addedansi-regex@3.0.1(transitive)

• + Addedchardet@0.4.2(transitive)

• + Addedcli-cursor@2.1.0(transitive)

• + Addedcli-width@2.2.1(transitive)

• + Addedexternal-editor@2.2.0(transitive)

• + Addedfigures@2.0.0(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinquirer@3.0.6(transitive)

• + Addedis-fullwidth-code-point@2.0.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedmimic-fn@1.2.0(transitive)

• + Addedmute-stream@0.0.7(transitive)

• + Addedonetime@2.0.1(transitive)

• + Addedos-tmpdir@1.0.2(transitive)

• + Addedrestore-cursor@2.0.0(transitive)

• + Addedrun-async@2.4.1(transitive)

• + Addedrx@4.1.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsignal-exit@3.0.7(transitive)

• + Addedstring-width@2.1.1(transitive)

• + Addedstrip-ansi@4.0.0(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedtmp@0.0.33(transitive)