Skip to content

Commit 87f556c

Browse files
lxsmnsycbrenelz
lxsmnsyc
and
brenelz
authored
cleanup(2.0): dev overlay classes (#2089)
Co-authored-by: Brenley Dueck <brenleydueck@gmail.com>
1 parent 798b285 commit 87f556c

File tree

5 files changed

+84
-86
lines changed

5 files changed

+84
-86
lines changed

‎packages/start/src/shared/dev-overlay/CodeView.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
// @refresh skip
2-
import { getSingletonHighlighter, type BuiltinLanguage, type Highlighter } from "shiki";
2+
import { type BuiltinLanguage, getSingletonHighlighter, type Highlighter } from "shiki";
33
import { loadWasm } from "shiki/engine/oniguruma";
4-
import { createEffect, createResource, type JSX } from "solid-js";
5-
6-
import url from "shiki/onig.wasm?url";
7-
84
import langJS from "shiki/langs/javascript.mjs";
95
import langJSX from "shiki/langs/jsx.mjs";
106
import langTSX from "shiki/langs/tsx.mjs";
117
import langTS from "shiki/langs/typescript.mjs";
8+
import url from "shiki/onig.wasm?url";
129
import darkPlus from "shiki/themes/dark-plus.mjs";
10+
import { createEffect, createResource, type JSX } from "solid-js";
1311

1412
let HIGHLIGHTER: Highlighter;
1513

@@ -74,7 +72,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
7472
for (let i = 0, len = lines.length; i < len; i++) {
7573
const el = lines[i] as HTMLElement;
7674
if (props.line - minLine() - 1 === i) {
77-
el.classList.add("dev-overlay-error-line");
75+
el.dataset.startDevOverlayErrorLine = '';
7876
}
7977
}
8078
}
@@ -83,7 +81,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
8381
return (
8482
<div
8583
ref={ref}
86-
class="dev-overlay-code-view"
84+
data-start-dev-overlay-code-view
8785
style={{
8886
"--dev-overlay-code-view-start": minLine() + 1,
8987
}}

‎packages/start/src/shared/dev-overlay/DevOverlayDialog.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import ErrorStackParser from "error-stack-parser";
33
import * as htmlToImage from "html-to-image";
44
import type { JSX } from "solid-js";
5-
import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from "solid-js";
5+
import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
66
import { Portal } from "solid-js/web";
77
// @ts-ignore - terracotta module resolution issue with NodeNext
88
import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
@@ -47,9 +47,9 @@ function ErrorInfo(props: ErrorInfoProps): JSX.Element {
4747
});
4848

4949
return (
50-
<span class="dev-overlay-error-info">
51-
<span class="dev-overlay-error-info-name">{error().name}</span>
52-
<span class="dev-overlay-error-info-message">{error().message}</span>
50+
<span data-start-dev-overlay-error-info>
51+
<span data-start-dev-overlay-error-info-name>{error().name}</span>
52+
<span data-start-dev-overlay-error-info-message>{error().message}</span>
5353
</span>
5454
);
5555
}
@@ -77,7 +77,7 @@ function getFilePath(source: StackFrameSource) {
7777

7878
function CodeFallback(): JSX.Element {
7979
return (
80-
<div class="dev-overlay-stack-frames-code-fallback">
80+
<div data-start-dev-overlay-stack-frames-code-fallback>
8181
<span>Source not available.</span>
8282
</div>
8383
);
@@ -89,8 +89,8 @@ function StackFramesContent(props: StackFramesContentProps) {
8989
const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]!);
9090

9191
return (
92-
<div class="dev-overlay-stack-frames-content">
93-
<div class="dev-overlay-stack-frames-code">
92+
<div data-start-dev-overlay-stack-frames-content>
93+
<div data-start-dev-overlay-stack-frames-code>
9494
<ErrorBoundary fallback={null}>
9595
{(() => {
9696
const data = createStackFrame(selectedFrame(), () => props.isCompiled);
@@ -99,8 +99,8 @@ function StackFramesContent(props: StackFramesContentProps) {
9999
<Show when={data()} keyed fallback={<CodeFallback />}>
100100
{source => (
101101
<>
102-
<span class="dev-overlay-stack-frames-code-source">{source.source}</span>
103-
<div class="dev-overlay-stack-frames-code-container">
102+
<span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
103+
<div data-start-dev-overlay-stack-frames-code-container>
104104
<CodeView
105105
fileName={source.source}
106106
line={source.line}
@@ -116,19 +116,19 @@ function StackFramesContent(props: StackFramesContentProps) {
116116
</ErrorBoundary>
117117
</div>
118118
<Select<ErrorStackParser.StackFrame>
119-
class="dev-overlay-stack-frames"
119+
data-start-dev-overlay-stack-frames
120120
value={selectedFrame()}
121121
onChange={setSelectedFrame}
122122
>
123123
<For each={stackframes}>
124124
{current => (
125125
<ErrorBoundary
126126
fallback={
127-
<div class="dev-overlay-stack-frame">
128-
<span class="dev-overlay-stack-frame-function">
127+
<div data-start-dev-overlay-stack-frame>
128+
<span data-start-dev-overlay-stack-frame-function>
129129
{current.functionName ?? "<anonymous>"}
130130
</span>
131-
<span class="dev-overlay-stack-frame-file">
131+
<span data-start-dev-overlay-stack-frame-file>
132132
{getFilePath({
133133
source: current.getFileName()!,
134134
content: "",
@@ -146,11 +146,11 @@ function StackFramesContent(props: StackFramesContentProps) {
146146
<Suspense>
147147
<Show when={data()} keyed>
148148
{source => (
149-
<SelectOption class="dev-overlay-stack-frame" value={current}>
150-
<span class="dev-overlay-stack-frame-function">
149+
<SelectOption data-start-dev-overlay-stack-frame value={current}>
150+
<span data-start-dev-overlay-stack-frame-function>
151151
{source.name ?? "<anonymous>"}
152152
</span>
153-
<span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
153+
<span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
154154
</SelectOption>
155155
)}
156156
</Show>
@@ -249,59 +249,59 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
249249

250250
return (
251251
<Portal>
252-
<Dialog class="dev-overlay" isOpen>
252+
<Dialog data-start-dev-overlay isOpen>
253253
<div>
254-
<DialogOverlay class="dev-overlay-background" />
255-
<DialogPanel ref={setPanel} class="dev-overlay-panel-container">
256-
<div class="dev-overlay-panel">
257-
<div class="dev-overlay-navbar">
258-
<div class="dev-overlay-navbar-left">
259-
<div class="dev-overlay-version">
254+
<DialogOverlay data-start-dev-overlay-background />
255+
<DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
256+
<div data-start-dev-overlay-panel>
257+
<div data-start-dev-overlay-navbar>
258+
<div data-start-dev-overlay-navbar-left>
259+
<div data-start-dev-overlay-version>
260260
<div>
261261
<SolidStartIcon title="Solid Start Version" />
262262
</div>
263263
<span>{info.version as string}</span>
264264
</div>
265265
<Show when={props.errors.length > 1}>
266-
<div class="dev-overlay-pagination">
267-
<button class="dev-overlay-button" onClick={goPrev} type="button">
266+
<div data-start-dev-overlay-pagination>
267+
<button data-start-dev-overlay-button onClick={goPrev} type="button">
268268
<ArrowLeftIcon title="Go Previous" />
269269
</button>
270-
<div class="dev-overlay-page-counter">
270+
<div data-start-dev-overlay-page-counter>
271271
{`${truncated()} of ${props.errors.length}`}
272272
</div>
273-
<button class="dev-overlay-button" onClick={goNext} type="button">
273+
<button data-start-dev-overlay-button onClick={goNext} type="button">
274274
<ArrowRightIcon title="Go Next" />
275275
</button>
276276
</div>
277277
</Show>
278278
</div>
279-
<div class="dev-overlay-controls">
280-
<button class="dev-overlay-button" onClick={redirectToGithub} type="button">
279+
<div data-start-dev-overlay-controls>
280+
<button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
281281
<GithubIcon title="Create an issue thread on Github" />
282282
</button>
283-
<button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
283+
<button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
284284
<DiscordIcon title="Join our Discord Channel" />
285285
</button>
286-
<button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
286+
<button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
287287
<CameraIcon title="Capture Error Overlay" />
288288
</button>
289-
<button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
289+
<button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
290290
<Show
291291
when={isCompiled()}
292292
fallback={<ViewOriginalIcon title="View Original Source" />}
293293
>
294294
<ViewCompiledIcon title="View Compiled Source" />
295295
</Show>
296296
</button>
297-
<button class="dev-overlay-button" onClick={props.resetError} type="button">
297+
<button data-start-dev-overlay-button onClick={props.resetError} type="button">
298298
<RefreshIcon title="Reset Error" />
299299
</button>
300300
</div>
301301
</div>
302302
<Show when={props.errors[truncated() - 1]} keyed>
303303
{current => (
304-
<div class="dev-overlay-content">
304+
<div data-start-dev-overlay-content>
305305
<ErrorInfo error={current} />
306306
<StackFrames error={current} isCompiled={isCompiled()} />
307307
</div>

‎packages/start/src/shared/dev-overlay/get-source-map.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { RawSourceMap, SourceMapConsumer } from "source-map-js";
1+
import { type RawSourceMap, SourceMapConsumer } from "source-map-js";
22

33
const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
44
const SOURCEMAP_REGEX =

‎packages/start/src/shared/dev-overlay/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// @refresh skip
22
import {
3-
ErrorBoundary,
4-
Show,
53
createEffect,
64
createSignal,
5+
ErrorBoundary,
6+
type JSX,
77
onCleanup,
88
resetErrorBoundaries,
9-
type JSX,
9+
Show,
1010
} from "solid-js";
11-
import { HttpStatusCode } from "../HttpStatusCode.ts";
1211
import clientOnly from "../clientOnly.ts";
12+
import { HttpStatusCode } from "../HttpStatusCode.ts";
1313

1414
export interface DevOverlayProps {
1515
children?: JSX.Element;

0 commit comments

Comments
 (0)