Skip to content

Commit 5e4dc4d

Browse files
ciscoheatciscoheat
committed
Working with stores and promises.
But not with a promise that resolves to a store.
1 parent 9e7090c commit 5e4dc4d

File tree

2 files changed

+68
-92
lines changed

2 files changed

+68
-92
lines changed

‎src/lib/client/SuperDebug.svelte‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { page } from '$app/stores';
3-
import { onDestroy } from 'svelte';
3+
import { readable, get } from 'svelte/store';
44
55
/**
66
* @typedef {unknown | Promise<unknown>} EncodeableData
@@ -68,7 +68,7 @@
6868
* --sd-bg-color
6969
* --sd-label-color
7070
* --sd-promise-loading-color
71-
* --sd-promise-error-color
71+
* --sd-promise-rejected-color
7272
* --sd-code-default
7373
* --sd-info
7474
* --sd-success
@@ -131,6 +131,9 @@
131131
if (typeof value === 'function' && functions) {
132132
return '#}F#' + `[function ${value.name}]`;
133133
}
134+
if (value instanceof Error) {
135+
return '#}E#' + value.message;
136+
}
134137
return value;
135138
},
136139
2
@@ -171,6 +174,9 @@
171174
} else if (match.startsWith('"#}F#')) {
172175
cls = 'function';
173176
match = match.slice(5, -1);
177+
} else if (match.startsWith('"#}E#')) {
178+
cls = 'error';
179+
match = 'Error: ' + match.slice(5, -1);
174180
}
175181
}
176182
} else if (/true|false/.test(match)) {
@@ -183,15 +189,6 @@
183189
);
184190
}
185191
186-
/**
187-
* @param {EncodeableData} json
188-
* @returns {Promise<string>}
189-
*/
190-
async function promiseSyntaxHighlight(json) {
191-
json = await json;
192-
return syntaxHighlight(json);
193-
}
194-
195192
/**
196193
* @param {EncodeableData} data
197194
* @param {boolean} raw
@@ -247,21 +244,8 @@
247244
`
248245
: undefined;
249246
250-
/** @type {EncodeableData} */
251-
let debugData;
252-
253-
let dataIsStore = false;
254-
if (assertStore(data, raw)) {
255-
dataIsStore = true;
256-
const unsubscribe = data.subscribe((value) => {
257-
debugData = value;
258-
});
259-
onDestroy(unsubscribe);
260-
}
261-
262-
$: if (!dataIsStore) {
263-
debugData = data;
264-
}
247+
/** @type {import('svelte/store').Readable<EncodeableData>} */
248+
$: debugData = assertStore(data, raw) ? data : readable(data);
265249
</script>
266250
267251
{#if display}
@@ -287,11 +271,14 @@
287271
class="super-debug--pre {label === '' ? 'pt-4' : 'pt-0'}"
288272
bind:this={ref}><code class="super-debug--code"
289273
><slot
290-
>{#if assertPromise(debugData, raw, promise)}{#await promiseSyntaxHighlight(debugData)}<div
291-
class="super-debug--promise-loading">Loading data...</div>{:then result}{@html result}{:catch error}<div
292-
class="super-debug--promise-error">{error}</div>{/await}{:else}{@html syntaxHighlight(
293-
debugData
294-
)}{/if}</slot
274+
>{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
275+
class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
276+
assertStore(result, raw) ? get(result) : result
277+
)}{:catch error}<span class="super-debug--promise-rejected"
278+
>Rejected:</span
279+
> {@html syntaxHighlight(
280+
error
281+
)}{/await}{:else}{@html syntaxHighlight($debugData)}{/if}</slot
295282
></code
296283
></pre>
297284
</div>
@@ -376,10 +363,10 @@
376363
);
377364
}
378365
379-
.super-debug--promise-error {
366+
.super-debug--promise-rejected {
380367
color: var(
381-
--sd-promise-error-color,
382-
var(--sd-vscode-promise-error-color, #ff475d)
368+
--sd-promise-rejected-color,
369+
var(--sd-vscode-promise-rejected-color, #ff475d)
383370
);
384371
}
385372
@@ -453,6 +440,10 @@
453440
color: var(--sd-code-symbol, var(--sd-vscode-code-symbol, #4de0c5));
454441
}
455442
443+
:global(.super-debug--code .error) {
444+
color: var(--sd-code-error, var(--sd-vscode-code-error, #ff475d));
445+
}
446+
456447
.super-debug pre::-webkit-scrollbar {
457448
width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1.25rem));
458449
height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1.25rem));

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

Lines changed: 43 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,20 @@
77
88
export let data;
99
10-
const bigSForm = superForm(data.bigForm);
10+
const bigSForm = superForm(data.bigForm, { taintedMessage: null });
1111
const bigForm = bigSForm.form;
12-
$bigForm.full_name =
13-
'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
12+
const { form } = superForm(data.form, { taintedMessage: null });
1413
15-
const { form } = superForm(data.form);
16-
17-
$form.full_name = 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
14+
const name = 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
15+
$bigForm.full_name = name;
16+
$form.full_name = name;
1817
1918
/** @type {unknown} */
2019
let someUnknownData;
2120
const emptyObject = {};
2221
23-
const someObject = {
24-
full_name: 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.'
25-
};
2622
const promiseNeverCameTrue = new Promise((_, reject) => {
27-
setTimeout(() => reject('Rejected'), 5000);
23+
setTimeout(() => reject(new Error('Broken promise')), 1000);
2824
});
2925
3026
/** @type {() => Promise<unknown>} */
@@ -79,100 +75,89 @@
7975

8076
<main class="space-y-4">
8177
<section>
82-
<h4>Super Debug with label</h4>
83-
<p>Label is useful when using multiple instance of SuperDebug.</p>
84-
<SuperDebug label="Sample User" data={$form} />
85-
</section>
86-
<section>
87-
<h4>Super Debug without status</h4>
88-
<SuperDebug label="Sample User" status={false} data={$form} />
78+
<h3>SuperDebug demonstrations</h3>
79+
<b>Change name: <input bind:value={$form.full_name} /></b>
8980
</section>
9081
<section>
91-
<h4>Super Debug without label</h4>
82+
<h4>SuperDebug without label</h4>
9283
<p>
9384
This is SuperDebug's classic layout. Make sure we don't have weird
9485
spaces when there is no label.
9586
</p>
9687
<SuperDebug data={$form} />
9788
</section>
9889
<section>
99-
<h4>Super Debug without label and status</h4>
90+
<h4>SuperDebug with label</h4>
91+
<p>Label is useful when using multiple instance of SuperDebug.</p>
92+
<SuperDebug label="Sample User" data={$form} />
93+
</section>
94+
<section>
95+
<h4>SuperDebug without status</h4>
96+
<SuperDebug label="Sample User" status={false} data={$form} />
97+
</section>
98+
<section>
99+
<h4>SuperDebug without label and status</h4>
100100
<SuperDebug data={$form} status={false} />
101101
</section>
102102
<section>
103-
<h4>Super Debug with label and undefined data</h4>
103+
<h4>SuperDebug with label and undefined data</h4>
104104
<p>
105-
Do not hide output from <code>syntaxHighlight</code> even when the result
106-
is undefined. In JavaScript it is a crucial piece of information.
105+
Do not hide output when the result is undefined. In JavaScript it is a
106+
crucial piece of information.
107107
</p>
108108
<SuperDebug label="Data not ready" data={someUnknownData} />
109109
</section>
110110
<section>
111-
<h4>Super Debug without label and undefined data</h4>
111+
<h4>SuperDebug without label and undefined data</h4>
112112
<p>
113113
There are cases when the data is not readily available on page load.
114114
Make sure SuperDebug layout does not break on itself.
115115
</p>
116116
<SuperDebug data={someUnknownData} />
117117
</section>
118118
<section>
119-
<h4>Super Debug with empty object</h4>
119+
<h4>SuperDebug with empty object</h4>
120120
<SuperDebug data={emptyObject} />
121121
</section>
122122
<section class="space-y-4">
123-
<h4>Super Debug promise support</h4>
123+
<h4>SuperDebug promise support</h4>
124124
<p>
125-
Fancy way of loading things for fancy people. Try reloading the page to
126-
see it in action. Right now when waiting for promise a message that
127-
says "Loading data" appears. Having a named slot for customization is
128-
nice but it is trivial.
125+
To see this in action, slightly scroll above near Dummyjson product and
126+
hit refresh.
129127
</p>
130-
<pre><code
131-
>{@html `let promiseNeverCameTrue = new Promise((resolve, reject) => {
132-
setTimeout(() => resolve({}), 5000)
133-
})`}
134-
{@html '&lt;SuperDebug promise={true} data={promiseNeverCameTrue} /&gt;'}</code
135-
></pre>
136-
<SuperDebug promise={true} data={promiseNeverCameTrue} />
137128
<pre><code
138129
>{@html `let promiseProduct = async () => {
139130
const response = await fetch('https://dummyjson.com/products/1')
140131
const body = await response.json()
141132
return body
142133
}`}
143-
{@html `&lt;SuperDebug label="Dummyjson product" promise={true} data={promiseProduct()} /&gt;`}</code
134+
{@html `&lt;SuperDebug label="Dummyjson product" data={promiseProduct()} /&gt;`}</code
144135
></pre>
145136
<SuperDebug
146137
label="Dummyjson product"
147138
promise={true}
148139
data={promiseProduct()}
149140
/>
150-
</section>
151-
<section class="space-y-4">
152-
<h4>Super Debug using promise on non-promise related data</h4>
153-
<p>
154-
To see this in action, slightly scroll above near Dummyjson product and
155-
hit refresh.
156-
</p>
157-
<ul style="list-style-type: none;">
158-
<li>
159-
ChadDev: <b
160-
>No one can stop me from enabling promise because I can't read.</b
161-
>
162-
</li>
163-
<li>SuperForm: Hey, that's illegal!</li>
164-
<li>ChadDev: It works!</li>
165-
</ul>
166-
<SuperDebug label="Promisify $form" promise={true} data={someObject} />
141+
<pre><code
142+
>{@html `let promiseNeverCameTrue = new Promise((resolve, reject) => {
143+
setTimeout(() => resolve({}), 5000)
144+
})`}
145+
{@html '&lt;SuperDebug data={promiseNeverCameTrue} /&gt;'}</code
146+
></pre>
147+
<h4>SuperDebug rejected promises</h4>
148+
<p>To see this in action, hit refresh. The promise is rejected with</p>
149+
<pre><code>new Error("Broken promise")</code></pre>
150+
151+
<SuperDebug data={promiseNeverCameTrue} />
167152
</section>
168153
<section>
169-
<h4>Super Debug displaying $page data</h4>
154+
<h4>SuperDebug displaying $page data</h4>
170155
<p>Svelte's <code>$page</code> data in all its glory.</p>
171156
<SuperDebug label="$page data" data={$page} />
172157
</section>
173158

174159
<section>
175-
<h4>Super Debug loves stores</h4>
160+
<h4>SuperDebug loves stores</h4>
176161
<p>Why not to pass a store directly.</p>
177162
<label for="form_full_name">
178163
<span>Full Name</span>
@@ -195,13 +180,13 @@
195180
</section>
196181

197182
<section>
198-
<h4>Super Debug loves stores x2</h4>
183+
<h4>SuperDebug loves stores x2</h4>
199184
<p>Does superform handle stores of promises?, Yep its cool.</p>
200185
<SuperDebug data={promiseStore} label="Store of promises" />
201186
</section>
202187

203188
<section>
204-
<h4>Super Debug custom styling 😎</h4>
189+
<h4>SuperDebug custom styling 😎</h4>
205190
<p>Bugs are easier to solve if they look familiar.</p>
206191
<SuperDebug data={$form} label="VS Code like theme" theme="vscode" />
207192
<p

0 commit comments

Comments
 (0)