next
Version:
The React Framework
92 lines (90 loc) • 8.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
RuntimeError: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RuntimeError: function() {
return RuntimeError;
},
styles: function() {
return styles;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CodeFrame = require("../../components/CodeFrame");
const _nooptemplate = require("../../helpers/noop-template");
const _CallStackFrame = require("./CallStackFrame");
function _templateObject() {
const data = _tagged_template_literal_loose._([
"\n [data-nextjs-call-stack-frame]:not(:last-child),\n [data-nextjs-component-stack-frame]:not(:last-child) {\n margin-bottom: var(--size-gap-double);\n }\n\n [data-expand-ignore-button]:focus:not(:focus-visible),\n [data-expand-ignore-button] {\n background: none;\n border: none;\n color: var(--color-font);\n cursor: pointer;\n font-size: var(--size-font);\n margin: var(--size-gap) 0;\n padding: 0;\n text-decoration: underline;\n outline: none;\n }\n\n [data-nextjs-data-runtime-error-copy-button],\n [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n position: relative;\n margin-left: var(--size-gap);\n padding: 0;\n border: none;\n background: none;\n outline: none;\n }\n [data-nextjs-data-runtime-error-copy-button] > svg {\n vertical-align: middle;\n }\n .nextjs-data-runtime-error-copy-button {\n color: inherit;\n }\n .nextjs-data-runtime-error-copy-button--initial:hover {\n cursor: pointer;\n }\n .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n opacity: 0.3;\n cursor: not-allowed;\n }\n .nextjs-data-runtime-error-copy-button--error,\n .nextjs-data-runtime-error-copy-button--error:hover {\n color: var(--color-ansi-red);\n }\n .nextjs-data-runtime-error-copy-button--success {\n color: var(--color-ansi-green);\n }\n\n [data-nextjs-call-stack-frame] > h3,\n [data-nextjs-component-stack-frame] > h3 {\n margin-top: 0;\n margin-bottom: 0;\n font-family: var(--font-stack-monospace);\n font-size: var(--size-font);\n }\n [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n color: #666;\n display: inline-block;\n }\n [data-nextjs-call-stack-frame] > div,\n [data-nextjs-component-stack-frame] > div {\n display: flex;\n align-items: center;\n padding-left: calc(var(--size-gap) + var(--size-gap-half));\n font-size: var(--size-font-small);\n color: #999;\n }\n [data-nextjs-call-stack-frame] > div > svg,\n [data-nextjs-component-stack-frame] > [role='link'] > svg {\n width: auto;\n height: var(--size-font-small);\n margin-left: var(--size-gap);\n flex-shrink: 0;\n display: none;\n }\n\n [data-nextjs-call-stack-frame] > div[data-has-source],\n [data-nextjs-component-stack-frame] > [role='link'] {\n cursor: pointer;\n }\n [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n [data-nextjs-component-stack-frame] > [role='link']:hover {\n text-decoration: underline dotted;\n }\n [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n [data-nextjs-component-stack-frame] > [role='link'] > svg {\n display: unset;\n }\n\n [data-nextjs-call-stack-framework-icon] {\n margin-right: var(--size-gap);\n }\n [data-nextjs-call-stack-framework-icon='next'] > mask {\n mask-type: alpha;\n }\n [data-nextjs-call-stack-framework-icon='react'] {\n color: rgb(20, 158, 202);\n }\n [data-nextjs-collapsed-call-stack-details][open]\n [data-nextjs-call-stack-chevron-icon] {\n transform: rotate(90deg);\n }\n [data-nextjs-collapsed-call-stack-details] summary {\n display: flex;\n align-items: center;\n margin-bottom: var(--size-gap);\n list-style: none;\n }\n [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n display: none;\n }\n\n [data-nextjs-collapsed-call-stack-details] h3 {\n color: #666;\n }\n [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n margin-bottom: var(--size-gap-double);\n }\n\n [data-nextjs-container-errors-pseudo-html] {\n position: relative;\n }\n [data-nextjs-container-errors-pseudo-html-collapse] {\n position: absolute;\n left: 10px;\n top: 10px;\n color: inherit;\n background: none;\n border: none;\n padding: 0;\n }\n [data-nextjs-container-errors-pseudo-html--diff='add'] {\n color: var(--color-ansi-green);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n color: var(--color-ansi-red);\n }\n [data-nextjs-container-errors-pseudo-html--tag-error] {\n color: var(--color-ansi-red);\n font-weight: bold;\n }\n /* hide but text are still accessible in DOM */\n [data-nextjs-container-errors-pseudo-html--hint] {\n display: inline-block;\n font-size: 0;\n }\n [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n color: var(--color-accents-1);\n }\n"
]);
_templateObject = function() {
return data;
};
return data;
}
function RuntimeError(param) {
let { error } = param;
const [isIgnoredExpanded, setIsIgnoredExpanded] = _react.useState(false);
const { firstFrame, allLeadingFrames, trailingCallStackFrames, displayedFramesCount } = _react.useMemo(()=>{
const filteredFrames = error.frames.filter((frame)=>isIgnoredExpanded ? true : !frame.ignored);
const firstFirstPartyFrameIndex = filteredFrames.findIndex((entry)=>!entry.ignored && Boolean(entry.originalCodeFrame) && Boolean(entry.originalStackFrame));
var _filteredFrames_firstFirstPartyFrameIndex;
return {
displayedFramesCount: filteredFrames.length,
firstFrame: (_filteredFrames_firstFirstPartyFrameIndex = filteredFrames[firstFirstPartyFrameIndex]) != null ? _filteredFrames_firstFirstPartyFrameIndex : null,
allLeadingFrames: firstFirstPartyFrameIndex < 0 ? [] : filteredFrames.slice(0, firstFirstPartyFrameIndex),
trailingCallStackFrames: filteredFrames.slice(firstFirstPartyFrameIndex + 1)
};
}, [
error.frames,
isIgnoredExpanded
]);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
children: [
firstFrame ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
children: "Source"
}),
allLeadingFrames.map((frame, frameIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CallStackFrame.CallStackFrame, {
frame: frame
}, "call-stack-leading-" + frameIndex)),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_CodeFrame.CodeFrame, {
stackFrame: firstFrame.originalStackFrame,
codeFrame: firstFrame.originalCodeFrame
})
]
}) : undefined,
trailingCallStackFrames.map((frame, frameIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CallStackFrame.CallStackFrame, {
frame: frame
}, "call-stack-leading-" + frameIndex)),
// if the default displayed ignored frames count is equal equal to the total frames count, hide the button
displayedFramesCount === error.frames.length && !isIgnoredExpanded ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
"data-expand-ignore-button": isIgnoredExpanded,
onClick: ()=>setIsIgnoredExpanded(!isIgnoredExpanded),
children: "" + (isIgnoredExpanded ? 'Hide' : 'Show') + " ignored frames"
})
]
});
}
const styles = (0, _nooptemplate.noop)(_templateObject());
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=index.js.map