Skip to content

Commit 59d4fd4

Browse files
josu-devjosu-dev
committed
Merge branch 'superdebug-improvements' of https://github.com/J-Josu/sveltekit-superforms into superdebug-improvements
2 parents a4e9931 + 3b87e4e commit 59d4fd4

File tree

2 files changed

+118
-46
lines changed

2 files changed

+118
-46
lines changed

‎src/lib/client/SuperDebug.svelte‎

Lines changed: 111 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,37 @@
6262
*/
6363
export let functions = false;
6464
65+
/**
66+
* Theme, which can also be customized with CSS variables:
67+
* --sd-bg-color
68+
* --sd-label-color
69+
* --sd-promise-loading-color
70+
* --sd-promise-error-color
71+
* --sd-code-default
72+
* --sd-info
73+
* --sd-success
74+
* --sd-redirect
75+
* --sd-error
76+
* --sd-code-key
77+
* --sd-code-string
78+
* --sd-code-date
79+
* --sd-code-boolean
80+
* --sd-code-number
81+
* --sd-code-bigint
82+
* --sd-code-null
83+
* --sd-code-nan
84+
* --sd-code-undefined
85+
* --sd-code-function
86+
* --sd-sb-width
87+
* --sd-sb-height
88+
* --sd-sb-track-color
89+
* --sd-sb-track-color-focus
90+
* --sd-sb-thumb-color
91+
* --sd-sb-thumb-color-focus
92+
* @type {"default" | "vscode"}
93+
*/
94+
export let theme = 'default';
95+
6596
/**
6697
* @param {unknown} json
6798
* @returns {string}
@@ -191,6 +222,23 @@
191222
);
192223
}
193224
225+
const themeStyle =
226+
theme == 'vscode'
227+
? `
228+
--sd-vscode-bg-color:#1f1f1f;
229+
--sd-vscode-label-color:#cccccc;
230+
--sd-vscode-code-default:#8c8a89;
231+
--sd-vscode-code-key:#9cdcfe;
232+
--sd-vscode-code-string:#ce9171;
233+
--sd-vscode-code-number:#b5c180;
234+
--sd-vscode-code-boolean:#4a9cd6;
235+
--sd-vscode-code-null:#4a9cd6;
236+
--sd-vscode-code-undefined:#4a9cd6;
237+
--sd-vscode-sb-thumb-color:#35373a;
238+
--sd-vscode-sb-thumb-color-focus:#4b4d50;
239+
`
240+
: undefined;
241+
194242
/** @type {EncodeableData} */
195243
let debugData;
196244
@@ -209,7 +257,7 @@
209257
</script>
210258
211259
{#if display}
212-
<div class="super-debug">
260+
<div class="super-debug" style={themeStyle}>
213261
<div
214262
class="super-debug--status {label === ''
215263
? 'absolute inset-x-0 top-0'
@@ -231,7 +279,9 @@
231279
class="super-debug--pre {label === '' ? 'pt-4' : 'pt-0'}"
232280
bind:this={ref}><code class="super-debug--code"
233281
><slot
234-
>{#if assertPromise(debugData, raw, promise)}{#await promiseSyntaxHighlight(debugData)}<div>Loading data...</div>{:then result}{@html result}{/await}{:else}{@html syntaxHighlight(
282+
>{#if assertPromise(debugData, raw, promise)}{#await promiseSyntaxHighlight(debugData)}<div
283+
class="super-debug--promise-loading">Loading data...</div>{:then result}{@html result}{:catch error}<div
284+
class="super-debug--promise-error">{error}</div>{/await}{:else}{@html syntaxHighlight(
235285
debugData
236286
)}{/if}</slot
237287
></code
@@ -311,7 +361,10 @@
311361
}
312362
313363
.super-debug {
314-
--_sd-bg-color: var(--sd-bg-color, rgb(30, 41, 59));
364+
--_sd-bg-color: var(
365+
--sd-bg-color,
366+
var(--sd-vscode-bg-color, rgb(30, 41, 59))
367+
);
315368
position: relative;
316369
background-color: var(--_sd-bg-color);
317370
border-radius: 0.5rem;
@@ -327,94 +380,127 @@
327380
}
328381
329382
.super-debug--label {
330-
color: var(--sd-label-color, white);
383+
color: var(--sd-label-color, var(--sd-vscode-label-color, white));
384+
}
385+
386+
.super-debug--promise-loading {
387+
color: var(
388+
--sd-promise-loading-color,
389+
var(--sd-vscode-promise-loading-color, #999)
390+
);
391+
}
392+
393+
.super-debug--promise-error {
394+
color: var(
395+
--sd-promise-error-color,
396+
var(--sd-vscode-promise-error-color, #ff475d)
397+
);
331398
}
332399
333400
.super-debug pre {
334-
color: var(--sd-code-default, #999);
401+
color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
335402
background-color: var(--_sd-bg-color);
336403
margin-bottom: 0px;
337404
/** Sakura is doing 0.9em, turn font-size back to 1em **/
338405
font-size: 1em;
339406
}
340407
341408
.info {
342-
color: var(--sd-info, rgb(85, 85, 255));
409+
color: var(--sd-info, var(--sd-vscode-info, rgb(85, 85, 255)));
343410
}
344411
345412
.success {
346-
color: var(--sd-success, #2cd212);
413+
color: var(--sd-success, var(--sd-vscode-success, #2cd212));
347414
}
348415
349416
.redirect {
350-
color: var(--sd-redirect, #03cae5);
417+
color: var(--sd-redirect, var(--sd-vscode-redirect, #03cae5));
351418
}
352419
353420
.error {
354-
color: var(--sd-error, #ff475d);
421+
color: var(--sd-error, var(--sd-vscode-error, #ff475d));
355422
}
356423
357424
:global(.super-debug--code .key) {
358-
color: var(--sd-code-key, #eab308);
425+
color: var(--sd-code-key, var(--sd-vscode-code-key, #eab308));
359426
}
360427
361428
:global(.super-debug--code .string) {
362-
color: var(--sd-code-string, #6ec687);
429+
color: var(--sd-code-string, var(--sd-vscode-code-string, #6ec687));
363430
}
364431
365432
:global(.super-debug--code .date) {
366-
color: var(--sd-code-date, #f06962);
433+
color: var(--sd-code-date, var(--sd-vscode-code-date, #f06962));
367434
}
368435
369436
:global(.super-debug--code .boolean) {
370-
color: var(--sd-code-boolean, #79b8ff);
437+
color: var(--sd-code-boolean, var(--sd-vscode-code-boolean, #79b8ff));
371438
}
372439
373440
:global(.super-debug--code .number) {
374-
color: var(--sd-code-number, #af77e9);
441+
color: var(--sd-code-number, var(--sd-vscode-code-number, #af77e9));
375442
}
376443
377444
:global(.super-debug--code .bigint) {
378-
color: var(--sd-code-bigint, #af77e9);
445+
color: var(--sd-code-bigint, var(--sd-vscode-code-bigint, #af77e9));
379446
}
380447
381448
:global(.super-debug--code .null) {
382-
color: var(--sd-code-null, #238afe);
449+
color: var(--sd-code-null, var(--sd-vscode-code-null, #238afe));
383450
}
384451
385452
:global(.super-debug--code .nan) {
386-
color: var(--sd-code-nan, #af77e9);
453+
color: var(--sd-code-nan, var(--sd-vscode-code-nan, #af77e9));
387454
}
388455
389456
:global(.super-debug--code .undefined) {
390-
color: var(--sd-code-undefined, #238afe);
457+
color: var(
458+
--sd-code-undefined,
459+
var(--sd-vscode-code-undefined, #238afe)
460+
);
391461
}
392462
393463
:global(.super-debug--code .function) {
394-
color: var(--sd-code-function, #f06962);
464+
color: var(--sd-code-function, var(--sd-vscode-code-function, #f06962));
395465
}
396466
397467
:global(.super-debug--code .symbol) {
398468
color: var(--sd-code-symbol, #77e9c3);
399469
}
400470
401471
.super-debug pre::-webkit-scrollbar {
402-
width: var(--sd-sb-width, 1.25rem);
403-
height: var(--sd-sb-height, 1.25rem);
472+
width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1.25rem));
473+
height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1.25rem));
404474
opacity: 0.5;
405475
}
406476
407477
.super-debug pre::-webkit-scrollbar-track {
408-
background-color: var(--sd-sb-track-color, hsl(0, 0%, 40%, 0.2));
478+
background-color: var(
479+
--sd-sb-track-color,
480+
--sd-vscode-sb-track-color,
481+
hsl(0, 0%, 40%, 0.2)
482+
);
409483
}
410484
.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
411-
background-color: var(--sd-sb-track-color-focus, hsl(0, 0%, 50%, 0.2));
485+
background-color: var(
486+
--sd-sb-track-color-focus,
487+
--sd-vscode-sb-track-color-focus,
488+
hsl(0, 0%, 50%, 0.2)
489+
);
412490
}
413491
414492
.super-debug pre::-webkit-scrollbar-thumb {
415-
background-color: var(--sd-sb-thumb-color, hsl(217, 50%, 50%, 0.5));
493+
background-color: var(
494+
--sd-sb-thumb-color,
495+
--sd-vscode-sb-thumb-color,
496+
hsl(217, 50%, 50%, 0.5)
497+
);
416498
}
417499
.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
418-
background-color: var(--sd-sb-thumb-color-focus, hsl(217, 50%, 50%));
500+
background-color: var(
501+
--sd-sb-thumb-color-focus,
502+
--sd-vscode-sb-thumb-color-focus,
503+
hsl(217, 50%, 50%)
504+
);
419505
}
420506
</style>

‎src/routes/super-debug/+page.svelte‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
import { readable } from 'svelte/store';
77
88
export let data;
9-
9+
1010
const bigSForm = superForm(data.bigForm);
1111
const bigForm = bigSForm.form;
12-
$bigForm.full_name = 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
12+
$bigForm.full_name =
13+
'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
1314
1415
const { form } = superForm(data.form);
1516
@@ -22,11 +23,10 @@
2223
const someObject = {
2324
full_name: 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.'
2425
};
25-
const promiseNeverCameTrue = new Promise((resolve, reject) => {
26-
setTimeout(() => resolve({}), 5000);
26+
const promiseNeverCameTrue = new Promise((_, reject) => {
27+
setTimeout(() => reject('Rejected'), 5000);
2728
});
2829
29-
3030
/** @type {() => Promise<unknown>} */
3131
let promiseProduct = async () => ({});
3232
@@ -203,27 +203,13 @@
203203
<section>
204204
<h4>Super Debug custom styling 😎</h4>
205205
<p>Bugs are easier to solve if they look familiar.</p>
206-
<SuperDebug
207-
data={$form}
208-
label="VS Code like theme"
209-
--sd-bg-color="#1f1f1f"
210-
--sd-label-color="#cccccc"
211-
--sd-code-default="#8c8a89"
212-
--sd-code-key="#9cdcfe"
213-
--sd-code-string="#ce9171"
214-
--sd-code-number="#b5c180"
215-
--sd-code-boolean="#4a9cd6"
216-
--sd-code-null="#4a9cd6"
217-
--sd-code-undefined="#4a9cd6"
218-
--sd-sb-thumb-color="#35373a"
219-
--sd-sb-thumb-color-focus="#4b4d50"
220-
/>
206+
<SuperDebug data={$form} label="VS Code like theme" theme="vscode" />
221207
<p
222208
style:margin-top="1em"
223209
style:padding-left="4px"
224210
style:background-color="#1f1f1f0f"
225211
>
226-
<strong>Note:</strong> styling the component produces de side effect
212+
<strong>Note:</strong> styling the component produces the side-effect
227213
described at the
228214
<a
229215
href="https://svelte.dev/docs/component-directives#style-props"

0 commit comments

Comments
 (0)