@shuvi/error-overlay 1.0.0-rc.6

package/lib/middleware/stackFrameMiddleware.js

@@ -0,0 +1,103 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stackFrameMiddleware = void 0;
+const url_1 = __importDefault(require("url"));
+const constants_1 = require("@shuvi/shared/lib/constants");
+const getSourceById_1 = require("./helper/getSourceById");
+const getOriginalStackFrame_1 = require("./helper/getOriginalStackFrame");
+function stackFrameMiddleware(originalStackFrameEndpoint, bundler, resolveBuildFile, buildDefaultDir, buildServerDir) {
+    var _a, _b;
+    let clientStats = null;
+    let serverStats = null;
+    (_a = bundler
+        .getSubCompiler(constants_1.BUNDLER_TARGET_CLIENT)) === null || _a === void 0 ? void 0 : _a.hooks.done.tap('stackFrameMiddlewareForClient', (stats) => {
+        clientStats = stats;
+    });
+    (_b = bundler
+        .getSubCompiler(constants_1.BUNDLER_TARGET_SERVER)) === null || _b === void 0 ? void 0 : _b.hooks.done.tap('stackFrameMiddlewareForServer', (stats) => {
+        serverStats = stats;
+    });
+    const collectSourceMaps = (files, compiler, compilation, cache, buildDir) => __awaiter(this, void 0, void 0, function* () {
+        yield Promise.all(files.map((fileName) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const moduleId = fileName.replace(/^(webpack-internal:\/\/\/|file:\/\/)/, '');
+                const source = yield (0, getSourceById_1.getSourceById)(fileName.startsWith('file:'), moduleId, compiler, resolveBuildFile, buildDir, compilation);
+                cache.set(fileName, source);
+            }
+            catch (_c) {
+                cache.set(fileName, null);
+            }
+        })));
+    });
+    const getStackFrames = (frames, errorMessage, compilation, sourceMap, buildDir) => __awaiter(this, void 0, void 0, function* () {
+        return yield Promise.all(frames.map((frame) => __awaiter(this, void 0, void 0, function* () {
+            let result;
+            try {
+                result = yield (0, getOriginalStackFrame_1.getOriginalStackFrame)(frame, sourceMap, resolveBuildFile, buildDir, errorMessage, compilation);
+            }
+            catch (_d) {
+                result = {
+                    error: true,
+                    reason: 'No Content',
+                    external: false,
+                    expanded: false,
+                    sourceStackFrame: frame,
+                    originalStackFrame: null,
+                    originalCodeFrame: null
+                };
+            }
+            return result;
+        })));
+    });
+    return function (req, res, next) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!req.url.startsWith(originalStackFrameEndpoint)) {
+                return next();
+            }
+            const files = [];
+            const sourceMap = new Map();
+            const { query: queryFromUrl } = url_1.default.parse(req.url, true);
+            const query = queryFromUrl;
+            const frames = JSON.parse(query.frames);
+            const { isServer, errorMessage } = query;
+            const compiler = isServer === 'true'
+                ? bundler.getSubCompiler(constants_1.BUNDLER_TARGET_SERVER)
+                : bundler.getSubCompiler(constants_1.BUNDLER_TARGET_CLIENT);
+            const compilation = isServer === 'true' ? serverStats === null || serverStats === void 0 ? void 0 : serverStats.compilation : clientStats === null || clientStats === void 0 ? void 0 : clientStats.compilation;
+            const buildDir = isServer === 'true' ? buildServerDir : buildDefaultDir;
+            // handle duplicate files
+            frames.forEach((frame) => {
+                const { file } = frame;
+                if (file == null) {
+                    return;
+                }
+                if (files.indexOf(file) !== -1) {
+                    return;
+                }
+                files.push(file);
+            });
+            // collect the sourcemaps from the files
+            yield collectSourceMaps(files, compiler, compilation, sourceMap, buildDir);
+            // handle the source position
+            const originalStackFrames = yield getStackFrames(frames, errorMessage, compilation, sourceMap, buildDir);
+            sourceMap.clear();
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'application/json');
+            res.write(Buffer.from(JSON.stringify(originalStackFrames)));
+            res.end();
+        });
+    };
+}
+exports.stackFrameMiddleware = stackFrameMiddleware;

package/lib/view/ErrorOverlay.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorOverlay: () => JSX.Element;

package/lib/view/ErrorOverlay.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ErrorTypeHandler = __importStar(require("./errorTypeHandler"));
+const ShadowPortal_1 = require("./components/ShadowPortal");
+const BuildError_1 = require("./container/BuildError");
+const RuntimeError_1 = require("./container/RuntimeError");
+const constants_1 = require("../constants");
+const Base_1 = require("./styles/Base");
+const ComponentStyles_1 = require("./styles/ComponentStyles");
+const CssReset_1 = require("./styles/CssReset");
+function reducer(state, ev) {
+    switch (ev.type) {
+        case constants_1.TYPE_BUILD_OK: {
+            return Object.assign(Object.assign({}, state), { buildError: null });
+        }
+        case constants_1.TYPE_REFRESH: {
+            return Object.assign(Object.assign({}, state), { buildError: null, errors: [] });
+        }
+        case constants_1.TYPE_BUILD_ERROR: {
+            return Object.assign(Object.assign({}, state), { buildError: ev.message });
+        }
+        case constants_1.TYPE_UNHANDLED_ERROR:
+        case constants_1.TYPE_UNHANDLED_REJECTION: {
+            return Object.assign(Object.assign({}, state), { nextId: state.nextId + 1, errors: [
+                    ...state.errors.filter(err => {
+                        // Filter out duplicate errors
+                        return err.event.reason !== ev.reason;
+                    }),
+                    { id: state.nextId, event: ev }
+                ] });
+        }
+        default: {
+            return state;
+        }
+    }
+}
+const ErrorOverlay = function ErrorOverlay() {
+    const [state, dispatch] = React.useReducer(reducer, {
+        nextId: 1,
+        buildError: null,
+        errors: []
+    });
+    React.useEffect(() => {
+        ErrorTypeHandler.on(dispatch);
+        return function () {
+            ErrorTypeHandler.off(dispatch);
+        };
+    }, [dispatch]);
+    const hasBuildError = state.buildError != null;
+    const hasRuntimeErrors = Boolean(state.errors.length);
+    const isMounted = hasBuildError || hasRuntimeErrors;
+    return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: isMounted ? ((0, jsx_runtime_1.jsxs)(ShadowPortal_1.ShadowPortal, { children: [(0, jsx_runtime_1.jsx)(CssReset_1.CssReset, {}), (0, jsx_runtime_1.jsx)(Base_1.Base, {}), (0, jsx_runtime_1.jsx)(ComponentStyles_1.ComponentStyles, {}), hasBuildError ? ((0, jsx_runtime_1.jsx)(BuildError_1.BuildError, { error: state.buildError })) : hasRuntimeErrors ? ((0, jsx_runtime_1.jsx)(RuntimeError_1.RuntimeError, { errors: state.errors })) : undefined] })) : undefined }));
+};
+exports.ErrorOverlay = ErrorOverlay;

package/lib/view/components/Dialog/Dialog.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare type DialogProps = {
+    type: 'error' | 'warning';
+    'aria-labelledby': string;
+    'aria-describedby': string;
+    onClose?: (e: MouseEvent | TouchEvent) => void;
+    children: React.ReactNode;
+};
+declare const Dialog: React.FC<DialogProps>;
+export { Dialog };

package/lib/view/components/Dialog/Dialog.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const use_on_click_outside_1 = require("../../hooks/use-on-click-outside");
+const Dialog = function Dialog(_a) {
+    var { children, type, onClose } = _a, props = __rest(_a, ["children", "type", "onClose"]);
+    const [dialog, setDialog] = React.useState(null);
+    const onDialog = React.useCallback((node) => {
+        setDialog(node);
+    }, []);
+    (0, use_on_click_outside_1.useOnClickOutside)(dialog, onClose);
+    // Make HTMLElements with `role=link` accessible to be triggered by the
+    // keyboard, i.e. [Enter].
+    React.useEffect(() => {
+        if (dialog == null) {
+            return;
+        }
+        const root = dialog.getRootNode();
+        // Always true, but we do this for TypeScript:
+        if (!(root instanceof ShadowRoot)) {
+            return;
+        }
+        const shadowRoot = root;
+        function handler(e) {
+            const el = shadowRoot.activeElement;
+            if (e.key === 'Enter' &&
+                el instanceof HTMLElement &&
+                el.getAttribute('role') === 'link') {
+                e.preventDefault();
+                e.stopPropagation();
+                el.click();
+            }
+        }
+        shadowRoot.addEventListener('keydown', handler);
+        return () => shadowRoot.removeEventListener('keydown', handler);
+    }, [dialog]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: onDialog, "data-dialog": true, tabIndex: -1, role: "dialog", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-modal": "true" }, { children: [(0, jsx_runtime_1.jsx)("div", { "data-dialog-banner": true, className: `banner-${type}` }), children] })));
+};
+exports.Dialog = Dialog;

package/lib/view/components/Dialog/DialogBody.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type DialogBodyProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const DialogBody: React.FC<DialogBodyProps>;
+export { DialogBody };

package/lib/view/components/Dialog/DialogBody.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogBody = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogBody = function DialogBody({ children, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-dialog-body": true, className: className }, { children: children })));
+};
+exports.DialogBody = DialogBody;

package/lib/view/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type DialogContentProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const DialogContent: React.FC<DialogContentProps>;
+export { DialogContent };

package/lib/view/components/Dialog/DialogContent.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogContent = function DialogContent({ children, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-dialog-content": true, className: className }, { children: children })));
+};
+exports.DialogContent = DialogContent;

package/lib/view/components/Dialog/DialogHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type DialogHeaderProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const DialogHeader: React.FC<DialogHeaderProps>;
+export { DialogHeader };

package/lib/view/components/Dialog/DialogHeader.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogHeader = function DialogHeader({ children, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-dialog-header": true, className: className }, { children: children })));
+};
+exports.DialogHeader = DialogHeader;

package/lib/view/components/Dialog/index.d.ts

@@ -0,0 +1,5 @@
+export { Dialog } from './Dialog';
+export { DialogBody } from './DialogBody';
+export { DialogContent } from './DialogContent';
+export { DialogHeader } from './DialogHeader';
+export { styles } from './styles';

package/lib/view/components/Dialog/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = exports.DialogHeader = exports.DialogContent = exports.DialogBody = exports.Dialog = void 0;
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });
+var DialogBody_1 = require("./DialogBody");
+Object.defineProperty(exports, "DialogBody", { enumerable: true, get: function () { return DialogBody_1.DialogBody; } });
+var DialogContent_1 = require("./DialogContent");
+Object.defineProperty(exports, "DialogContent", { enumerable: true, get: function () { return DialogContent_1.DialogContent; } });
+var DialogHeader_1 = require("./DialogHeader");
+Object.defineProperty(exports, "DialogHeader", { enumerable: true, get: function () { return DialogHeader_1.DialogHeader; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "styles", { enumerable: true, get: function () { return styles_1.styles; } });

package/lib/view/components/Dialog/styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: string;
+export { styles };

package/lib/view/components/Dialog/styles.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const noop_template_1 = require("../../helpers/noop-template");
+const styles = (0, noop_template_1.noop) `
+  [data-dialog] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    outline: none;
+    background: white;
+    border-radius: var(--size-gap);
+    box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
+      rgba(0, 0, 0, 0.25);
+    max-height: calc(100% - 56px);
+    overflow-y: hidden;
+  }
+
+  @media (max-height: 812px) {
+    [data-dialog-overlay] {
+      max-height: calc(100% - 15px);
+    }
+  }
+
+  @media (min-width: 576px) {
+    [data-dialog] {
+      max-width: 540px;
+      box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-dialog] {
+      max-width: 720px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    [data-dialog] {
+      max-width: 960px;
+    }
+  }
+
+  [data-dialog-banner] {
+    position: relative;
+  }
+  [data-dialog-banner].banner-warning {
+    border-color: var(--color-ansi-yellow);
+  }
+  [data-dialog-banner].banner-error {
+    border-color: var(--color-ansi-red);
+  }
+
+  [data-dialog-banner]::after {
+    z-index: 2;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    /* banner width: */
+    border-top-width: var(--size-gap-half);
+    border-bottom-width: 0;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-top-color: inherit;
+    border-bottom-color: transparent;
+  }
+
+  [data-dialog-content] {
+    overflow-y: auto;
+    border: none;
+    margin: 0;
+    /* calc(padding + banner width offset) */
+    padding: calc(var(--size-gap-double) + var(--size-gap-half))
+      var(--size-gap-double);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  [data-dialog-content] > [data-dialog-header] {
+    flex-shrink: 0;
+    margin-bottom: var(--size-gap-double);
+  }
+  [data-dialog-content] > [data-dialog-body] {
+    position: relative;
+    flex: 1 1 auto;
+  }
+`;
+exports.styles = styles;

package/lib/view/components/Errors/CallStackFrame/CallStackFrame.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { StackFrame } from 'stacktrace-parser';
+import { OriginalStackFrame } from '../../../helpers/stack-frame';
+export declare type CallStackFrameProps = {
+    stackFrame: StackFrame;
+    codeFrame: string;
+};
+export declare const CallStackFrame: React.FC<{
+    frame: OriginalStackFrame;
+}>;

package/lib/view/components/Errors/CallStackFrame/CallStackFrame.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallStackFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const constants_1 = require("@shuvi/shared/esm/constants");
+const Icons_1 = require("../../Icons");
+const stack_frame_1 = require("../../../helpers/stack-frame");
+const CallStackFrame = function CallStackFrame({ frame }) {
+    var _a;
+    const f = (_a = frame.originalStackFrame) !== null && _a !== void 0 ? _a : frame.sourceStackFrame;
+    const hasSource = Boolean(frame.originalCodeFrame);
+    const open = React.useCallback(() => {
+        var _a;
+        if (!hasSource)
+            return;
+        const params = new URLSearchParams();
+        for (const key in f) {
+            params.append(key, ((_a = f[key]) !== null && _a !== void 0 ? _a : '').toString());
+        }
+        fetch(`${constants_1.DEV_HOT_LAUNCH_EDITOR_ENDPOINT}?${params.toString()}`).then(() => { }, () => {
+            console.error('There was an issue opening this code in your editor.');
+        });
+    }, [hasSource, f]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-call-stack-frame": true }, { children: [(0, jsx_runtime_1.jsx)("h6", Object.assign({ "data-frame-expanded": Boolean(frame.expanded) }, { children: f.methodName })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-has-source": hasSource ? 'true' : undefined, tabIndex: hasSource ? 10 : undefined, role: hasSource ? 'link' : undefined, onClick: open, title: hasSource ? 'Click to open in your editor' : undefined }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, stack_frame_1.getFrameSource)(f) }), (0, jsx_runtime_1.jsx)(Icons_1.ExternalLinkIcon, {})] }))] })));
+};
+exports.CallStackFrame = CallStackFrame;

package/lib/view/components/Errors/CallStackFrame/index.d.ts

@@ -0,0 +1 @@
+export { CallStackFrame } from './CallStackFrame';

package/lib/view/components/Errors/CallStackFrame/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallStackFrame = void 0;
+var CallStackFrame_1 = require("./CallStackFrame");
+Object.defineProperty(exports, "CallStackFrame", { enumerable: true, get: function () { return CallStackFrame_1.CallStackFrame; } });

package/lib/view/components/Errors/CodeFrame/CodeFrame.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StackFrame } from 'stacktrace-parser';
+export declare type CodeFrameProps = {
+    stackFrame: StackFrame;
+    codeFrame: string;
+};
+export declare const CodeFrame: React.FC<CodeFrameProps>;

package/lib/view/components/Errors/CodeFrame/CodeFrame.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anser_1 = __importDefault(require("anser"));
+const React = __importStar(require("react"));
+const strip_ansi_1 = __importDefault(require("strip-ansi"));
+const constants_1 = require("@shuvi/shared/esm/constants");
+const Icons_1 = require("../../Icons");
+const stack_frame_1 = require("../../../helpers/stack-frame");
+const CodeFrame = function CodeFrame({ stackFrame, codeFrame }) {
+    // Strip leading spaces out of the code frame:
+    const formattedFrame = React.useMemo(() => {
+        const lines = codeFrame.split(/\r?\n/g);
+        const prefixLength = lines
+            .map(line => /^>? +\d+ +\| ( *)/.exec((0, strip_ansi_1.default)(line)))
+            .filter(Boolean)
+            .map(v => v.pop())
+            .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN);
+        if (prefixLength > 1) {
+            const p = ' '.repeat(prefixLength);
+            return lines
+                .map((line, a) => ~(a = line.indexOf('|'))
+                ? line.substring(0, a) + line.substring(a).replace(p, '')
+                : line)
+                .join('\n');
+        }
+        return lines.join('\n');
+    }, [codeFrame]);
+    const decoded = React.useMemo(() => {
+        return anser_1.default.ansiToJson(formattedFrame, {
+            json: true,
+            use_classes: true,
+            remove_empty: true
+        });
+    }, [formattedFrame]);
+    const open = React.useCallback(() => {
+        var _a;
+        const params = new URLSearchParams();
+        for (const key in stackFrame) {
+            params.append(key, ((_a = stackFrame[key]) !== null && _a !== void 0 ? _a : '').toString());
+        }
+        fetch(`${constants_1.DEV_HOT_LAUNCH_EDITOR_ENDPOINT}?${params.toString()}`).then(() => { }, () => {
+            console.error('There was an issue opening this code in your editor.');
+        });
+    }, [stackFrame]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-codeframe": true }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("p", Object.assign({ role: "link", onClick: open, tabIndex: 1, title: "Click to open in your editor" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, stack_frame_1.getFrameSource)(stackFrame), " @ ", stackFrame.methodName] }), (0, jsx_runtime_1.jsx)(Icons_1.ExternalLinkIcon, {})] })) }), (0, jsx_runtime_1.jsx)("pre", { children: decoded.map((entry, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: Object.assign({ color: entry.fg ? `var(--color-${entry.fg})` : undefined }, (entry.decoration === 'bold'
+                        ? { fontWeight: 800 }
+                        : entry.decoration === 'italic'
+                            ? { fontStyle: 'italic' }
+                            : undefined)) }, { children: entry.content }), `frame-${index}`))) })] })));
+};
+exports.CodeFrame = CodeFrame;

package/lib/view/components/Errors/CodeFrame/index.d.ts

@@ -0,0 +1 @@
+export { CodeFrame } from './CodeFrame';

package/lib/view/components/Errors/CodeFrame/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+var CodeFrame_1 = require("./CodeFrame");
+Object.defineProperty(exports, "CodeFrame", { enumerable: true, get: function () { return CodeFrame_1.CodeFrame; } });

package/lib/view/components/Errors/Errors.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ReadyRuntimeError } from '../../helpers/getErrorByType';
+export declare type ErrorsProps = {
+    error: ReadyRuntimeError;
+};
+declare const Errors: React.FC<ErrorsProps>;
+export { Errors };