Skip to content

Commit 222d5ff

Browse files
zerodevxzerodevx
committed
Fix type errors
1 parent 681fa42 commit 222d5ff

File tree

3 files changed

+38
-55
lines changed

3 files changed

+38
-55
lines changed

‎src/app.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ declare global {
77
// interface PageData {}
88
// interface Platform {}
99
}
10+
var PUBLIC_VERSION
11+
var toast
12+
var gtag
1013
}
1114

1215
export {}

‎src/routes/+layout.svelte

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ import { dev } from '$app/environment'
88
<svelte:head>
99
{#if !dev}
1010
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9JC5N7N1H"></script>
11+
<script>
12+
window.dataLayer = window.dataLayer || []
13+
function gtag() {
14+
dataLayer.push(arguments)
15+
}
16+
gtag('js', new Date())
17+
gtag('config', 'G-G9JC5N7N1H')
18+
</script>
1119
{/if}
12-
<script>
13-
window.dataLayer = window.dataLayer || []
14-
function gtag() {
15-
dataLayer.push(arguments)
16-
}
17-
gtag('js', new Date())
18-
gtag('config', 'G-G9JC5N7N1H')
19-
</script>
2020
</svelte:head>
2121

2222
<slot />

‎src/routes/+page.svelte

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<script>
2-
import { tick } from 'svelte'
2+
/* eslint no-useless-escape: "off" */
3+
/* global PUBLIC_VERSION */
4+
35
import { SvelteToast, toast } from '$lib'
6+
import { tick } from 'svelte'
7+
import { browser, dev } from '$app/environment'
48
import DummyComponent from './Dummy.svelte'
59
import camelCase from 'camelcase'
610
import Prism from 'prismjs'
711
8-
// @ts-ignore
12+
// Hoist to `window` for debug
13+
if (browser) window.toast = toast
14+
915
const version = PUBLIC_VERSION
1016
1117
let selected
@@ -19,9 +25,7 @@ const buttons = [
1925
{
2026
name: 'DEFAULT',
2127
code: `toast.push('Hello world!')`,
22-
run: () => {
23-
toast.push('Hello world!')
24-
}
28+
run: () => toast.push('Hello world!')
2529
},
2630
{
2731
name: 'COLORED TOAST',
@@ -32,25 +36,23 @@ const buttons = [
3236
'--toastBarBackground': '#2F855A'
3337
}
3438
})`,
35-
run: () => {
39+
run: () =>
3640
toast.push('Success!', {
3741
theme: {
3842
'--toastColor': 'mintcream',
3943
'--toastBackground': 'rgba(72,187,120,0.9)',
4044
'--toastBarBackground': '#2F855A'
4145
}
4246
})
43-
}
4447
},
4548
{
4649
name: 'RICH HTML',
4750
code: `toast.push(\`<strong>You won the jackpot!</strong><br>
4851
Click <a href="#" target="_blank">here</a> for details! 😛\`)`,
49-
run: () => {
52+
run: () =>
5053
toast.push(
5154
'<strong>You won the jackpot!</strong><br>Click <a href="#" target="_blank">here</a> for details! 😛'
5255
)
53-
}
5456
},
5557
{
5658
name: 'HIDE PROGRESS BAR',
@@ -59,30 +61,20 @@ const buttons = [
5961
'--toastBarHeight': 0
6062
}
6163
})`,
62-
run: () => {
63-
toast.push('Hide the progress bar', {
64-
theme: {
65-
'--toastBarHeight': 0
66-
}
67-
})
68-
}
64+
run: () => toast.push('Hide the progress bar', { theme: { '--toastBarHeight': 0 } })
6965
},
7066
{
7167
name: 'LONG DURATION',
7268
code: `toast.push('Watching the paint dry...', { duration: 20000 })`,
73-
run: () => {
74-
toast.push('Watching the paint dry...', { duration: 20000 })
75-
}
69+
run: () => toast.push('Watching the paint dry...', { duration: 20000 })
7670
},
7771
{
7872
name: 'NO EXPIRY',
7973
code: `toast.push('Tap button to dismiss', {
8074
// Effectively disables autoclose when \`initial\`==\`next\`
8175
initial: 0
8276
})`,
83-
run: () => {
84-
toast.push('Tap button to dismiss', { initial: 0 })
85-
}
77+
run: () => toast.push('Tap button to dismiss', { initial: 0 })
8678
},
8779
{
8880
name: 'NON-DISMISSABLE',
@@ -91,9 +83,7 @@ const buttons = [
9183
initial: 0,
9284
dismissable: false
9385
})`,
94-
run: () => {
95-
toast.push('Where the close btn?!?', { initial: 0, dismissable: false })
96-
}
86+
run: () => toast.push('Where the close btn?!?', { initial: 0, dismissable: false })
9787
},
9888
{
9989
name: 'REMOVE LAST TOAST',
@@ -103,9 +93,7 @@ toast.pop()
10393
// Or remove a particular one
10494
const id = toast.push('Yo!')
10595
toast.pop(id)`,
106-
run: () => {
107-
toast.pop()
108-
}
96+
run: () => toast.pop()
10997
},
11098
{
11199
name: 'FLIP PROGRESS BAR',
@@ -115,13 +103,12 @@ toast.pop(id)`,
115103
next: 1,
116104
duration: 6000
117105
})`,
118-
run: () => {
106+
run: () =>
119107
toast.push('Progress bar is flipped', {
120108
initial: 0,
121109
next: 1,
122110
duration: 6000
123111
})
124-
}
125112
},
126113
{
127114
name: 'USE AS LOADING INDICATOR',
@@ -244,9 +231,8 @@ toast.set(id, { next: 1 })`,
244231
}
245232
}
246233
</style>`,
247-
run: () => {
234+
run: () =>
248235
toast.push('<strong>NEW:</strong> Multiple toast container support!', { target: 'new' })
249-
}
250236
},
251237
{
252238
name: 'REMOVE ALL TOASTS FROM CONTAINER',
@@ -255,9 +241,7 @@ toast.pop(i => i.target !== 'new')
255241
256242
// Or remove ALL active toasts from ALL containers
257243
toast.pop(0)`,
258-
run: () => {
259-
toast.pop((i) => i.target !== 'new')
260-
}
244+
run: () => toast.pop((i) => i.target !== 'new')
261245
},
262246
{
263247
name: 'SEND COMPONENT AS A MESSAGE',
@@ -309,9 +293,7 @@ toast.pop(0)`,
309293
{
310294
name: 'PAUSE ON MOUSE HOVER',
311295
code: `toast.push('Hover me!', { pausable: true })`,
312-
run: () => {
313-
toast.push('Hover me!', { pausable: true })
314-
}
296+
run: () => toast.push('Hover me!', { pausable: true })
315297
},
316298
{
317299
name: 'RUN CALLBACK ON TOAST REMOVAL',
@@ -320,15 +302,14 @@ toast.pop(0)`,
320302
toast.push('onpop() callback has been executed.', { target: 'new' })
321303
}
322304
})`,
323-
run: () => {
305+
run: () =>
324306
toast.push('Wait for it...', {
325307
onpop: () => {
326308
toast.push(`<strong><tt>onpop()</tt></strong> callback has been executed.`, {
327309
target: 'new'
328310
})
329311
}
330312
})
331-
}
332313
},
333314
{
334315
name: 'STYLE WITH USER-DEFINED CLASSES',
@@ -363,7 +344,7 @@ toast.pop(0)`,
363344
'--toastBtnContent': \`url("data:image/svg+xml,...")\`
364345
}
365346
}`,
366-
run: () => {
347+
run: () =>
367348
toast.push('Say cheese!', {
368349
theme: {
369350
// @ts-ignore
@@ -372,15 +353,14 @@ toast.pop(0)`,
372353
: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='%23F1CB30' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cpath d='M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z'/%3E%3Cg%3E%3Cpath style='fill:%2357575C;' d='M355.297,175.321c-8.161,0-16.167,3.305-21.938,9.092c-5.773,5.772-9.092,13.762-9.092,21.938 c0,8.163,3.32,16.168,9.092,21.94c5.772,5.772,13.777,9.09,21.938,9.09c8.161,0,16.167-3.32,21.938-9.09 c5.773-5.772,9.092-13.777,9.092-21.94c0-8.176-3.32-16.167-9.092-21.938C371.464,178.626,363.472,175.321,355.297,175.321z'/%3E%3Cpath style='fill:%2357575C;' d='M178.641,228.291c5.773-5.772,9.092-13.762,9.092-21.94c0-8.176-3.32-16.167-9.092-21.938 c-5.772-5.787-13.777-9.092-21.938-9.092c-8.161,0-16.167,3.305-21.938,9.092c-5.772,5.772-9.092,13.762-9.092,21.938 c0,8.176,3.32,16.168,9.092,21.94c5.772,5.786,13.777,9.09,21.938,9.09C164.864,237.382,172.87,234.077,178.641,228.291z'/%3E%3C/g%3E%3Cpath style='fill:%23DF6246;' d='M356.49,326.085c-3.603-8.696-12.088-14.367-21.501-14.367H256h-78.991 c-9.413,0-17.898,5.671-21.501,14.367c-3.601,8.696-1.61,18.708,5.046,25.363c25.495,25.493,59.392,39.534,95.446,39.534 s69.952-14.041,95.446-39.534C358.102,344.792,360.093,334.78,356.49,326.085z'/%3E%3Cpath style='fill:%23E69629;' d='M160.552,351.448c-6.656-6.654-8.647-16.665-5.046-25.363c3.603-8.696,12.088-14.367,21.501-14.367 H256V0C114.842,0,0,114.842,0,256s114.842,256,256,256V390.982C219.946,390.982,186.048,376.941,160.552,351.448z M125.673,206.352 c0-8.176,3.32-16.167,9.092-21.938c5.772-5.787,13.777-9.092,21.938-9.092c8.161,0,16.167,3.305,21.938,9.092 c5.773,5.772,9.092,13.762,9.092,21.938c0,8.176-3.32,16.168-9.092,21.94c-5.772,5.786-13.777,9.09-21.938,9.09 c-8.161,0-16.167-3.305-21.938-9.09C128.993,222.52,125.673,214.528,125.673,206.352z'/%3E%3Cpath style='fill:%23DD512A;' d='M177.009,311.718c-9.413,0-17.898,5.671-21.501,14.367c-3.601,8.696-1.61,18.708,5.046,25.363 c25.495,25.493,59.39,39.534,95.445,39.534v-79.264H177.009z'/%3E%3C/svg%3E")`
373354
}
374355
})
375-
}
376356
}
377357
]
378358
379359
function clicked(btn) {
380360
selected = btn.name
381361
code = btn.code
382362
btn.run()
383-
window.gtag('event', 'toast', { event_label: btn.name })
363+
if (browser && !dev) window.gtag('event', 'toast', { event_label: btn.name })
384364
}
385365
386366
$: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
@@ -405,10 +385,10 @@ $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
405385
rel="noreferrer">GITHUB v{version}</a
406386
>
407387
</div>
408-
<p class="text-center mb-6">
409-
Simple elegant toast notifications for modern web frontends in very little lines of code.<br />
410-
Because a demo helps better than a thousand API docs, so here it is.<br />
411-
Use in Vanilla JS (8kb gzipped) or as a Svelte component.
388+
<p class="max-w-2xl mx-auto text-center mb-6">
389+
Simple elegant toast notifications for modern web frontends in very little lines of code.
390+
Because a demo helps better than a thousand API docs, so here it is. Use in Vanilla JS (8kb
391+
gzipped) or as a Svelte component.
412392
</p>
413393
<div class="mockup-code h-80 mb-4 text-sm overflow-auto">
414394
<pre><code class="language-javascript">{@html formatted}</code></pre>

0 commit comments

Comments
 (0)