New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-error-overlay
Advanced tools
react-error-overlay - npm Package Compare versions
Comparing version 1.0.0-alpha.134d2297 to 1.0.0-alpha.c82c4f05
@@ -11,12 +11,10 @@ import { applyStyles } from '../utils/dom/css'; | ||
| 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 group = document.createElement('span'); | ||
| applyStyles(group, groupStyle); | ||
| var left = document.createElement('button'); | ||
@@ -30,2 +28,3 @@ applyStyles(left, groupElemLeft); | ||
| enableTabClick(left); | ||
| var right = document.createElement('button'); | ||
@@ -39,5 +38,10 @@ applyStyles(right, groupElemRight); | ||
| enableTabClick(right); | ||
| group.appendChild(left); | ||
| group.appendChild(right); | ||
| span.appendChild(group); | ||
| var text = currentError + ' of ' + totalErrors + ' errors on the page'; | ||
| span.appendChild(document.createTextNode(text)); | ||
| additionalReference.appendChild(span); | ||
@@ -44,0 +48,0 @@ } |
| 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(); |
@@ -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.')); |
@@ -91,2 +91,3 @@ import { enableTabClick } from '../utils/dom/enableTabClick'; | ||
| var handler = onSourceClick; | ||
| enableTabClick(frameAnchor); | ||
| frameAnchor.style.cursor = 'pointer'; | ||
@@ -93,0 +94,0 @@ frameAnchor.addEventListener('click', function () { |
| import { applyStyles } from '../utils/dom/css'; | ||
| import { overlayStyle, headerStyle, additionalStyle } from '../styles'; | ||
| import { containerStyle, overlayStyle, headerStyle, additionalStyle } from '../styles'; | ||
| import { createClose } from './close'; | ||
@@ -17,15 +17,9 @@ 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 | ||
| var additional = document.createElement('div'); | ||
| applyStyles(additional, additionalStyle); | ||
| container.appendChild(additional); | ||
| updateAdditional(document, additional, currentError, totalErrors, switchCallback); | ||
| // Create header | ||
@@ -52,2 +46,8 @@ var header = document.createElement('div'); | ||
| // 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); | ||
| // Create trace | ||
@@ -54,0 +54,0 @@ container.appendChild(createFrames(document, frames, frameSettings, contextSize, name)); |
@@ -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); | ||
@@ -57,0 +59,0 @@ } |
| var black = '#293238', | ||
| darkGray = '#878e91', | ||
| lightGray = '#fafafa', | ||
| red = '#ce1126', | ||
| lightRed = '#fccfcf', | ||
| yellow = '#fbf5b4'; | ||
| yellow = '#fbf5b4', | ||
| 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 | ||
@@ -24,18 +19,30 @@ }; | ||
| 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': 'start', | ||
| '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 | ||
@@ -50,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', | ||
@@ -60,21 +68,22 @@ position: 'absolute', | ||
| var additionalStyle = { | ||
| 'margin-bottom': '1.5em', | ||
| 'margin-top': '-4em' | ||
| }; | ||
| var additionalStyle = {}; | ||
| 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', | ||
| margin: '0.75rem 2rem 0 0', // Prevent overlap with close button | ||
| flex: '0 0 auto', | ||
| 'max-height': '35%', | ||
| overflow: 'auto' | ||
| }; | ||
| var functionNameStyle = { | ||
| 'margin-top': '1em', | ||
| 'font-size': '1.2em' | ||
| 'margin-top': '1em' | ||
| }; | ||
| var linkStyle = { | ||
| 'font-size': '0.9em' | ||
| 'font-size': '0.9em', | ||
| 'margin-bottom': '0.9em' | ||
| }; | ||
@@ -88,8 +97,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 = {}; | ||
@@ -106,4 +116,2 @@ var primaryErrorStyle = { | ||
| color: black, | ||
| 'font-size': '0.9em', | ||
| margin: '1.5em 0', | ||
| cursor: 'pointer' | ||
@@ -115,7 +123,8 @@ }; | ||
| 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', | ||
| 'background-color': 'rgba(206, 17, 38, .05)' | ||
| }; | ||
@@ -138,3 +147,3 @@ | ||
| var groupStyle = { | ||
| 'margin-left': '1em' | ||
| 'margin-right': '1em' | ||
| }; | ||
@@ -161,10 +170,12 @@ | ||
| 'border-bottom-left-radius': '0px', | ||
| 'margin-left': '-1px' | ||
| 'margin-right': '-1px' | ||
| }); | ||
| 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, additionalStyle, headerStyle, functionNameStyle, linkStyle, anchorStyle, traceStyle, depStyle, primaryErrorStyle, secondaryErrorStyle, omittedFramesStyle, preStyle, toggleStyle, codeStyle, hiddenStyle, groupStyle, groupElemLeft, groupElemRight, footerStyle }; |
| { | ||
| "name": "react-error-overlay", | ||
| "version": "1.0.0-alpha.134d2297", | ||
| "version": "1.0.0-alpha.c82c4f05", | ||
| "description": "An overlay for displaying stack frames.", | ||
@@ -36,3 +36,3 @@ "main": "lib/index.js", | ||
| "babel-runtime": "6.23.0", | ||
| "react-dev-utils": "^1.0.0-alpha.134d2297", | ||
| "react-dev-utils": "^1.0.0-alpha.c82c4f05", | ||
| "settle-promise": "1.0.0" | ||
@@ -43,6 +43,6 @@ }, | ||
| "babel-eslint": "7.2.3", | ||
| "babel-preset-react-app": "^3.0.0-alpha.134d2297", | ||
| "babel-preset-react-app": "^3.0.0-alpha.c82c4f05", | ||
| "cross-env": "5.0.0", | ||
| "eslint": "3.19.0", | ||
| "eslint-config-react-app": "^1.0.0-alpha.134d2297", | ||
| "eslint-config-react-app": "^1.0.0-alpha.c82c4f05", | ||
| "eslint-plugin-flowtype": "2.33.0", | ||
@@ -49,0 +49,0 @@ "eslint-plugin-import": "2.2.0", |
Fixed alerts
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.72%
81739
- Number of package files
- increased by2.38%
43
- Lines of code
- increased by0.57%
1946
- Number of medium quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased byInfinity%
12