// @refresh skip
import ErrorStackParser from 'error-stack-parser';
import * as htmlToImage from 'html-to-image';
import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from 'solid-js';
import { Portal } from 'solid-js/web';
import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from 'terracotta';
import info from '../../../package.json';
import { CodeView } from './CodeView';
import { createStackFrame } from './createStackFrame';
import download from './download';
import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon } from './icons';
import './styles.css';
export function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
function ErrorInfo(props) {
const error = createMemo(() => {
const e = props.error;
if (e instanceof Error) {
return { name: e.name, message: e.message };
}
if (e instanceof ErrorEvent) {
return { message: e.message };
}
return { message: e.toString() };
});
return (
{error().name}
{error().message}
);
}
function getFileName(source) {
try {
const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
const paths = path.pathname.split('/');
return paths[paths.length - 1];
}
catch (error) {
return getFileName(`/${source}`);
}
}
function getFilePath(source) {
const line = source.line ? `:${source.line}` : '';
const column = source.column ? `:${source.column}` : '';
return `${getFileName(source.source)}${line}${column}`;
}
function CodeFallback() {
return
Source not available.
;
}
function StackFramesContent(props) {
const stackframes = ErrorStackParser.parse(props.error);
const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
return (
{(() => {
const data = createStackFrame(selectedFrame(), () => props.isCompiled);
return (}>
}>
{(source) => (<>
{source.source}
)}
);
})()}
)}>
{(() => {
const data = createStackFrame(current, () => props.isCompiled);
return (
{(source) => (
{source.name ?? ''}
{getFilePath(source)}
)}
);
})()}
)}
);
}
function StackFrames(props) {
return (
{(current) => ()}
);
}
const ISSUE_THREAD = 'https://github.com/solidjs/solid-start/issues/new';
const DISCORD_INVITE = 'https://discord.com/invite/solidjs';
export default function DevOverlayDialog(props) {
const [currentPage, setCurrentPage] = createSignal(1);
const [isCompiled, setIsCompiled] = createSignal(false);
const length = createMemo(() => props.errors.length);
const truncated = createMemo(() => {
return Math.min(currentPage(), length());
});
function goPrev() {
setCurrentPage((c) => {
if (c > 1) {
return c - 1;
}
return length();
});
}
function goNext() {
setCurrentPage((c) => {
if (c < length()) {
return c + 1;
}
return 1;
});
}
function toggleIsCompiled() {
setIsCompiled((c) => !c);
}
const [panel, setPanel] = createSignal();
function downloadScreenshot() {
const current = panel();
if (current) {
htmlToImage.toPng(current, {
style: {
transform: 'scale(0.75)',
},
}).then((url) => {
download(url, 'start-screenshot.png');
});
}
}
function redirectToGithub() {
const url = new URL(ISSUE_THREAD);
url.searchParams.append('labels', 'bug');
url.searchParams.append('labels', 'needs+triage');
url.searchParams.append('template', 'bug.yml');
url.searchParams.append('title', `[Bug?]:` + props.errors[truncated() - 1].toString());
window.open(url, '_blank').focus();
}
function redirectToDiscord() {
window.open(DISCORD_INVITE, '_blank').focus();
}
return (
);
}