Skip to content

Commit

Permalink
Merge pull request #1268 from solidjs/fix-dev-overlay
Browse files Browse the repository at this point in the history 
fix: dev overlay stuff
  • Loading branch information
@ryansolid
ryansolid authored Jan 19, 2024
2 parents 3ef18e9 + 809996d commit 43f41a8
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 51 deletions.
100 changes: 51 additions & 49 deletions packages/start/shared/dev-overlay/DevOverlayDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
if (current) {
htmlToImage.toPng(current, {
style: {
transform: 'scale(1)',
transform: 'scale(0.75)',
},
}).then((url) => {
download(url, 'start-screenshot.png');
Expand All @@ -216,59 +216,61 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
<Dialog class="dev-overlay" isOpen>
<div>
<DialogOverlay class="dev-overlay-background"/>
<DialogPanel ref={setPanel} class="dev-overlay-panel">
<div class="dev-overlay-navbar">
<div class="dev-overlay-navbar-left">
<div class="dev-overlay-version">
<div>
<SolidStartIcon title="Solid Start Version" />
</div>
<span>{info.version as string}</span>
</div>
<Show when={props.errors.length > 1}>
<div class="dev-overlay-pagination">
<button class="dev-overlay-button" onClick={goPrev} type="button">
<ArrowLeftIcon title="Go Previous" />
</button>
<div class="dev-overlay-page-counter">
{`${truncated()} of ${props.errors.length}`}
<DialogPanel ref={setPanel} class="dev-overlay-panel-container">
<div class="dev-overlay-panel">
<div class="dev-overlay-navbar">
<div class="dev-overlay-navbar-left">
<div class="dev-overlay-version">
<div>
<SolidStartIcon title="Solid Start Version" />
</div>
<button class="dev-overlay-button" onClick={goNext} type="button">
<ArrowRightIcon title="Go Next" />
</button>
<span>{info.version as string}</span>
</div>
</Show>
</div>
<div class="dev-overlay-controls">
<button class="dev-overlay-button" onClick={redirectToGithub} type="button">
<GithubIcon title="Create an issue thread on Github" />
</button>
<button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
<DiscordIcon title="Join our Discord Channel" />
</button>
<button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
<CameraIcon title="Capture Error Overlay" />
</button>
<button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
<Show when={isCompiled()} fallback={(
<ViewOriginalIcon title="View Original Source" />
)}>
<ViewCompiledIcon title="View Compiled Source" />
<Show when={props.errors.length > 1}>
<div class="dev-overlay-pagination">
<button class="dev-overlay-button" onClick={goPrev} type="button">
<ArrowLeftIcon title="Go Previous" />
</button>
<div class="dev-overlay-page-counter">
{`${truncated()} of ${props.errors.length}`}
</div>
<button class="dev-overlay-button" onClick={goNext} type="button">
<ArrowRightIcon title="Go Next" />
</button>
</div>
</Show>
</button>
<button class="dev-overlay-button" onClick={props.resetError} type="button">
<RefreshIcon title="Reset Error" />
</button>
</div>
<div class="dev-overlay-controls">
<button class="dev-overlay-button" onClick={redirectToGithub} type="button">
<GithubIcon title="Create an issue thread on Github" />
</button>
<button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
<DiscordIcon title="Join our Discord Channel" />
</button>
<button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
<CameraIcon title="Capture Error Overlay" />
</button>
<button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
<Show when={isCompiled()} fallback={(
<ViewOriginalIcon title="View Original Source" />
)}>
<ViewCompiledIcon title="View Compiled Source" />
</Show>
</button>
<button class="dev-overlay-button" onClick={props.resetError} type="button">
<RefreshIcon title="Reset Error" />
</button>
</div>
</div>
<Show when={props.errors[truncated() - 1]} keyed>
{(current) => (
<div class="dev-overlay-content">
<ErrorInfo error={current} />
<StackFrames error={current} isCompiled={isCompiled()} />
</div>
)}
</Show>
</div>
<Show when={props.errors[truncated() - 1]} keyed>
{(current) => (
<div class="dev-overlay-content">
<ErrorInfo error={current} />
<StackFrames error={current} isCompiled={isCompiled()} />
</div>
)}
</Show>
</DialogPanel>
</div>
</Dialog>
Expand Down
10 changes: 9 additions & 1 deletion packages/start/shared/dev-overlay/createStackFrame.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ export interface StackFrameSource {
column: number;
}

function getActualFileSource(path: string): string {
if (path.startsWith('file://')) {
return '/_build/@fs' + path.substring('file://'.length);
}
return path;
}

export function createStackFrame(
stackframe: StackFrame,
isCompiled: () => boolean,
Expand All @@ -24,7 +31,7 @@ export function createStackFrame(
if (!source.fileName) {
return null;
}
const response = await fetch(source.fileName);
const response = await fetch(getActualFileSource(source.fileName));
if (!response.ok) {
return null;
}
Expand All @@ -51,6 +58,7 @@ export function createStackFrame(
line: source.line,
column: source.column,
});
console.log('sourcemap', result);

return {
...result,
Expand Down
6 changes: 5 additions & 1 deletion packages/start/shared/dev-overlay/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,16 @@
width: 75vw;
margin-top: 2rem;
margin-bottom: 2rem;
z-index: 10;
gap: 0.5rem;
color: rgb(17 24 39);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dev-overlay-panel-container {
margin: 2rem;
z-index: 10;
}

.dev-overlay-navbar {
display: flex;
flex-direction: row;
Expand Down

0 comments on commit 43f41a8

Please sign in to comment.