react-error-overlay - npm Package Compare versions

Comparing version 1.0.0-alpha.e280254d to 1.0.0

lib/components/additional.js

 import { applyStyles } from '../utils/dom/css';
-import { groupStyle, groupElemLeft, groupElemRight } from '../styles';
+import { additionalChildStyle, groupStyle, groupElemLeft, groupElemRight } from '../styles';
 import { consumeEvent } from '../utils/dom/consumeEvent';
@@ -11,12 +11,12 @@ import { enableTabClick } from '../utils/dom/enableTabClick';
 
-  var text = ' ';
   if (totalErrors <= 1) {
-    additionalReference.appendChild(document.createTextNode(text));
     return;
   }
-  text = 'Errors ' + currentError + ' of ' + totalErrors;
-  var span = document.createElement('span');
-  span.appendChild(document.createTextNode(text));
+
+  var div = document.createElement('div');
+  applyStyles(div, additionalChildStyle);
+
   var group = document.createElement('span');
   applyStyles(group, groupStyle);
+
   var left = document.createElement('button');
@@ -30,2 +30,3 @@ applyStyles(left, groupElemLeft);
   enableTabClick(left);
+
   var right = document.createElement('button');
@@ -39,8 +40,13 @@ applyStyles(right, groupElemRight);
   enableTabClick(right);
+
   group.appendChild(left);
   group.appendChild(right);
-  span.appendChild(group);
-  additionalReference.appendChild(span);
+  div.appendChild(group);
+
+  var text = currentError + ' of ' + totalErrors + ' errors on the page';
+  div.appendChild(document.createTextNode(text));
+
+  additionalReference.appendChild(div);
 }
 
 export { updateAdditional };

lib/components/close.js

 import { applyStyles } from '../utils/dom/css';
 import { hintsStyle, hintStyle, closeButtonStyle } from '../styles';
 
-function createHint(document, hint) {
+function createHint(document, hint, title) {
   var span = document.createElement('span');
   span.appendChild(document.createTextNode(hint));
+  span.setAttribute('title', title);
   applyStyles(span, hintStyle);
@@ -15,3 +16,3 @@ return span;
 
-  var close = createHint(document, '×');
+  var close = createHint(document, '×', 'Click or press Escape to dismiss.');
   close.addEventListener('click', function () {
@@ -18,0 +19,0 @@ return callback();

lib/components/code.js

@@ -5,3 +5,3 @@
 import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
-import { preStyle, codeStyle, primaryErrorStyle, secondaryErrorStyle } from '../styles';
+import { codeStyle, primaryErrorStyle, primaryPreStyle, secondaryErrorStyle, secondaryPreStyle } from '../styles';
 
@@ -70,3 +70,3 @@ import generateAnsiHtml from 'react-dev-utils/ansiHTML';
   var pre = document.createElement('pre');
-  applyStyles(pre, preStyle);
+  applyStyles(pre, main ? primaryPreStyle : secondaryPreStyle);
   pre.appendChild(code);
@@ -73,0 +73,0 @@

lib/components/footer.js

@@ -7,3 +7,3 @@ import { applyStyles } from '../utils/dom/css';
   applyStyles(div, footerStyle);
-  div.appendChild(document.createTextNode('This screen is visible only in development. It will not appear when the app crashes in production.'));
+  div.appendChild(document.createTextNode('This screen is visible only in development. It will not appear if the app crashes in production.'));
   div.appendChild(document.createElement('br'));
@@ -10,0 +10,0 @@ div.appendChild(document.createTextNode('Open your browser’s developer console to further inspect this error.'));

lib/components/frame.js

@@ -6,3 +6,3 @@ import { enableTabClick } from '../utils/dom/enableTabClick';
 import { applyStyles } from '../utils/dom/css';
-import { omittedFramesStyle, functionNameStyle, depStyle, linkStyle, anchorStyle, hiddenStyle } from '../styles';
+import { omittedFramesExpandedStyle, omittedFramesCollapsedStyle, functionNameStyle, depStyle, linkStyle, anchorStyle, hiddenStyle } from '../styles';
 
@@ -28,8 +28,10 @@ function getGroupToggle(document, omitsCount, omitBundle) {
       text1.textContent = text1.textContent.replace(/expanded/, 'collapsed');
+      applyStyles(omittedFrames, omittedFramesCollapsedStyle);
     } else {
       text1.textContent = text1.textContent.replace(/▶/, '▲');
       text1.textContent = text1.textContent.replace(/collapsed/, 'expanded');
+      applyStyles(omittedFrames, omittedFramesExpandedStyle);
     }
   });
-  applyStyles(omittedFrames, omittedFramesStyle);
+  applyStyles(omittedFrames, omittedFramesCollapsedStyle);
   return omittedFrames;
@@ -55,3 +57,3 @@ }
   });
-  applyStyles(div, omittedFramesStyle);
+  applyStyles(div, omittedFramesExpandedStyle);
   div.style.display = 'none';
@@ -94,2 +96,3 @@
     var handler = onSourceClick;
+    enableTabClick(frameAnchor);
     frameAnchor.style.cursor = 'pointer';
@@ -207,2 +210,3 @@ frameAnchor.addEventListener('click', function () {
       onSourceClick = function onSourceClick() {
+        // Keep this in sync with react-error-overlay/middleware.js
         fetch('/__open-stack-frame-in-editor?fileName=' + window.encodeURIComponent(sourceFileName) + '&lineNumber=' + window.encodeURIComponent(sourceLineNumber || 1)).then(function () {}, function () {});
@@ -209,0 +213,0 @@ };

lib/components/overlay.js

 import { applyStyles } from '../utils/dom/css';
-import { overlayStyle, headerStyle, additionalStyle } from '../styles';
+import { containerStyle, overlayStyle, headerStyle } from '../styles';
 import { createClose } from './close';
@@ -17,14 +17,13 @@ import { createFrames } from './frames';
   applyStyles(overlay, overlayStyle);
-  overlay.appendChild(createClose(document, closeCallback));
 
   // Create container
   var container = document.createElement('div');
-  container.className = 'cra-container';
+  applyStyles(container, containerStyle);
   overlay.appendChild(container);
+  container.appendChild(createClose(document, closeCallback));
 
-  // Create additional
+  // Create "Errors X of Y" in case of multiple errors
   var additional = document.createElement('div');
-  applyStyles(additional, additionalStyle);
+  updateAdditional(document, additional, currentError, totalErrors, switchCallback);
   container.appendChild(additional);
-  updateAdditional(document, additional, currentError, totalErrors, switchCallback);
 
@@ -31,0 +30,0 @@ // Create header

lib/overlay.js

@@ -11,3 +11,3 @@ import { register as registerError, unregister as unregisterError } from './effects/unhandledError';
 import { iframeStyle } from './styles';
-import { injectCss, applyStyles } from './utils/dom/css';
+import { applyStyles } from './utils/dom/css';
 import { createOverlay } from './components/overlay';
@@ -22,4 +22,2 @@ import { updateAdditional } from './components/additional';
 
-var css = ['.cra-container {', '  padding-right: 15px;', '  padding-left: 15px;', '  margin-right: auto;', '  margin-left: auto;', '}', '', '@media (min-width: 768px) {', '  .cra-container {', '    width: calc(750px - 6em);', '  }', '}', '', '@media (min-width: 992px) {', '  .cra-container {', '    width: calc(970px - 6em);', '  }', '}', '', '@media (min-width: 1200px) {', '  .cra-container {', '    width: calc(1170px - 6em);', '  }', '}'].join('\n');
-
 function render(name, message, resolvedFrames) {
@@ -53,4 +51,8 @@ disposeCurrentView();
     }
-    injectCss(iframeReference.contentDocument, css);
     if (document.body != null) {
+      document.body.style.margin = '0';
+      // Keep popup within body boundaries for iOS Safari
+      // $FlowFixMe
+      document.body.style['max-width'] = '100vw';
+
       document.body.appendChild(overlay);
@@ -80,5 +82,9 @@ }
   var nextView = currReferenceIndex + offset;
-  if (nextView < 0 || nextView >= errorReferences.length) {
-    return;
+
+  if (nextView < 0) {
+    nextView = errorReferences.length - 1;
+  } else if (nextView >= errorReferences.length) {
+    nextView = 0;
   }
+
   renderErrorByIndex(nextView);
@@ -85,0 +91,0 @@ }

lib/styles.js

 var black = '#293238',
     darkGray = '#878e91',
-    lightGray = '#fafafa',
     red = '#ce1126',
+    redTransparent = 'rgba(206, 17, 38, 0.05)',
     lightRed = '#fccfcf',
-    yellow = '#fbf5b4';
+    yellow = '#fbf5b4',
+    yellowTransparent = 'rgba(251, 245, 180, 0.3)',
+    white = '#ffffff';
 
 var iframeStyle = {
-  'background-color': lightGray,
   position: 'fixed',
-  top: '1em',
-  left: '1em',
-  bottom: '1em',
-  right: '1em',
-  width: 'calc(100% - 2em)',
-  height: 'calc(100% - 2em)',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
   border: 'none',
-  'border-radius': '3px',
-  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
-  'z-index': 1337
-};
+  'z-index': 2147483647 - 1 };
 
 var overlayStyle = {
+  width: '100%',
+  height: '100%',
   'box-sizing': 'border-box',
-  padding: '4rem',
+  'text-align': 'center',
+  'background-color': white
+};
+
+var containerStyle = {
+  position: 'relative',
+  display: 'inline-flex',
+  'flex-direction': 'column',
+  height: '100%',
+  width: '1024px',
+  'max-width': '100%',
+  'overflow-x': 'hidden',
+  'overflow-y': 'auto',
+  padding: '0.5rem',
+  'box-sizing': 'border-box',
+  'text-align': 'left',
   'font-family': 'Consolas, Menlo, monospace',
-  color: black,
+  'font-size': '11px',
   'white-space': 'pre-wrap',
-  overflow: 'auto',
-  'overflow-x': 'hidden',
   'word-break': 'break-word',
-  'line-height': 1.5
+  'line-height': 1.5,
+  color: black
 };
 
 var hintsStyle = {
-  'font-size': '0.8em',
-  'margin-top': '-3em',
-  'margin-bottom': '3em',
-  'text-align': 'right',
   color: darkGray
@@ -49,5 +57,6 @@ };
 var closeButtonStyle = {
-  'font-size': '26px',
   color: black,
-  padding: '0.5em 1em',
+  'line-height': '1rem',
+  'font-size': '1.5rem',
+  padding: '1rem',
   cursor: 'pointer',
@@ -59,21 +68,24 @@ position: 'absolute',
 
-var additionalStyle = {
-  'margin-bottom': '1.5em',
-  'margin-top': '-4em'
+var additionalChildStyle = {
+  'margin-bottom': '0.5rem'
 };
 
 var headerStyle = {
-  'font-size': '1.7em',
-  'font-weight': 'bold',
+  'font-size': '2em',
+  'font-family': 'sans-serif',
   color: red,
-  'white-space': 'pre-wrap'
+  'white-space': 'pre-wrap',
+  // Top bottom margin spaces header
+  // Right margin revents overlap with close button
+  margin: '0 2rem 0.75rem 0',
+  flex: '0 0 auto',
+  'max-height': '50%',
+  overflow: 'auto'
 };
 
-var functionNameStyle = {
-  'margin-top': '1em',
-  'font-size': '1.2em'
-};
+var functionNameStyle = {};
 
 var linkStyle = {
-  'font-size': '0.9em'
+  'font-size': '0.9em',
+  'margin-bottom': '0.9em'
 };
@@ -87,8 +99,9 @@
 var traceStyle = {
-  'font-size': '1em'
+  'font-size': '1em',
+  flex: '0 1 auto',
+  'min-height': '0px',
+  overflow: 'auto'
 };
 
-var depStyle = {
-  'font-size': '1.2em'
-};
+var depStyle = {};
 
@@ -103,18 +116,29 @@ var primaryErrorStyle = {
 
-var omittedFramesStyle = {
+var omittedFramesCollapsedStyle = {
   color: black,
-  'font-size': '0.9em',
-  margin: '1.5em 0',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  'margin-bottom': '1.5em'
 };
 
-var preStyle = {
+var omittedFramesExpandedStyle = {
+  color: black,
+  cursor: 'pointer',
+  'margin-bottom': '0.6em'
+};
+
+var _preStyle = {
   display: 'block',
   padding: '0.5em',
-  'margin-top': '1.5em',
-  'margin-bottom': '0px',
+  'margin-top': '0.5em',
+  'margin-bottom': '0.5em',
   'overflow-x': 'auto',
-  'font-size': '1.1em',
-  'white-space': 'pre'
+  'white-space': 'pre-wrap',
+  'border-radius': '0.25rem'
 };
+var primaryPreStyle = Object.assign({}, _preStyle, {
+  'background-color': redTransparent
+});
+var secondaryPreStyle = Object.assign({}, _preStyle, {
+  'background-color': yellowTransparent
+});
 
@@ -136,11 +160,10 @@ var toggleStyle = {
 var groupStyle = {
-  'margin-left': '1em'
+  'margin-right': '1em'
 };
 
 var _groupElemStyle = {
-  'background-color': 'inherit',
-  'border-color': '#ddd',
-  'border-width': '1px',
+  'background-color': redTransparent,
+  color: red,
+  border: 'none',
   'border-radius': '4px',
-  'border-style': 'solid',
   padding: '3px 6px',
@@ -153,3 +176,3 @@ cursor: 'pointer'
   'border-bottom-right-radius': '0px',
-  'margin-right': '0px'
+  'margin-right': '1px'
 });
@@ -159,11 +182,12 @@
   'border-top-left-radius': '0px',
-  'border-bottom-left-radius': '0px',
-  'margin-left': '-1px'
+  'border-bottom-left-radius': '0px'
 });
 
 var footerStyle = {
-  'text-align': 'center',
-  color: darkGray
+  'font-family': 'sans-serif',
+  color: darkGray,
+  'margin-top': '0.5rem',
+  flex: '0 0 auto'
 };
 
-export { iframeStyle, overlayStyle, hintsStyle, hintStyle, closeButtonStyle, additionalStyle, headerStyle, functionNameStyle, linkStyle, anchorStyle, traceStyle, depStyle, primaryErrorStyle, secondaryErrorStyle, omittedFramesStyle, preStyle, toggleStyle, codeStyle, hiddenStyle, groupStyle, groupElemLeft, groupElemRight, footerStyle };
+export { containerStyle, iframeStyle, overlayStyle, hintsStyle, hintStyle, closeButtonStyle, additionalChildStyle, headerStyle, functionNameStyle, linkStyle, anchorStyle, traceStyle, depStyle, primaryErrorStyle, primaryPreStyle, secondaryErrorStyle, secondaryPreStyle, omittedFramesCollapsedStyle, omittedFramesExpandedStyle, toggleStyle, codeStyle, hiddenStyle, groupStyle, groupElemLeft, groupElemRight, footerStyle };

package.json

 {
   "name": "react-error-overlay",
-  "version": "1.0.0-alpha.e280254d",
+  "version": "1.0.0",
   "description": "An overlay for displaying stack frames.",
@@ -30,3 +30,4 @@ "main": "lib/index.js",
   "files": [
-    "lib/"
+    "lib/",
+    "middleware.js"
   ],
@@ -37,3 +38,3 @@ "dependencies": {
     "babel-runtime": "6.23.0",
-    "react-dev-utils": "^1.0.0-alpha.e280254d",
+    "react-dev-utils": "^1.0.0",
     "settle-promise": "1.0.0"
@@ -44,6 +45,6 @@ },
     "babel-eslint": "7.2.3",
-    "babel-preset-react-app": "^3.0.0-alpha.e280254d",
+    "babel-preset-react-app": "^3.0.0",
     "cross-env": "5.0.0",
     "eslint": "3.19.0",
-    "eslint-config-react-app": "^1.0.0-alpha.e280254d",
+    "eslint-config-react-app": "^1.0.0",
     "eslint-plugin-flowtype": "2.33.0",
@@ -50,0 +51,0 @@ "eslint-plugin-import": "2.2.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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83267

increased by1.93%

Number of package files

44

increased by2.33%

Lines of code

1984

increased by2.53%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updatedreact-dev-utils@^1.0.0