Skip to content

Commit

Permalink
chore: update examples to use Svelte 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@userquin
userquin committed Nov 2, 2024
1 parent 9a6fcf3 commit 3eced4a
Show file tree
Hide file tree
Showing 10 changed files with 534 additions and 452 deletions.
14 changes: 7 additions & 7 deletions examples/sveltekit-ts-assets-generator/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,18 @@
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/adapter-node": "^2.0.0",
"@sveltejs/kit": "^2.0.1",
"@sveltejs/kit": "^2.7.4",
"@types/cookie": "^0.6.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vite-pwa/sveltekit": "workspace:*",
"eslint": "^8.55.0",
"eslint-plugin-svelte": "^2.35.1",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"tslib": "^2.6.2",
"typescript": "^5.4.5",
"vitest": "^2.0.5"
"eslint-plugin-svelte": "^2.45.1",
"svelte": "^5.1.9",
"svelte-check": "^4.0.5",
"tslib": "^2.8.1",
"typescript": "^5.6.3",
"vitest": "^2.1.4"
},
"type": "module",
"dependencies": {
Expand Down
14 changes: 9 additions & 5 deletions examples/sveltekit-ts-assets-generator/src/lib/Counter.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { spring } from 'svelte/motion';
let count = 0;
let count = $state(0);
const displayed_count = spring();
$: displayed_count.set(count);
$: offset = modulo($displayed_count, 1);
function modulo(n: number, m: number) {
// handle negative numbers
return ((n % m) + m) % m;
}
run(() => {
displayed_count.set(count);
});
let offset = $derived(modulo($displayed_count, 1));
</script>

<div class="counter">
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5" />
</svg>
Expand All @@ -27,7 +31,7 @@
</div>
</div>

<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
</svg>
Expand Down
34 changes: 22 additions & 12 deletions examples/sveltekit-ts-assets-generator/src/lib/ReloadPrompt.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,25 @@
needRefresh,
updateServiceWorker
} = useRegisterSW({
onRegistered(r) {
if (__RELOAD_SW__) {
r && setInterval(() => {
console.log('Checking for sw update')
r.update()
}, 20000 /* 20s for testing purposes */)
} else {
console.log(`SW Registered: ${r}`)
}
onRegisteredSW(swUrl, r) {
r && setInterval(async () => {
if (r.installing || !navigator)
return
if (('connection' in navigator) && !navigator.onLine)
return
const resp = await fetch(swUrl, {
cache: 'no-store',
headers: {
'cache': 'no-store',
'cache-control': 'no-cache',
},
})
if (resp?.status === 200)
await r.update()
}, 20000 /* 20s for testing purposes */)
},
onRegisterError(error) {
console.log('SW registration error', error)
Expand All @@ -28,7 +38,7 @@
needRefresh.set(false)
}
$: toast = $offlineReady || $needRefresh
let toast = $derived($offlineReady || $needRefresh)
</script>

{#if toast}
Expand All @@ -45,11 +55,11 @@
{/if}
</div>
{#if $needRefresh}
<button on:click={() => updateServiceWorker(true)}>
<button onclick={() => updateServiceWorker(true)}>
Reload
</button>
{/if}
<button on:click={close}>
<button onclick={close}>
Close
</button>
</div>
Expand Down
9 changes: 7 additions & 2 deletions examples/sveltekit-ts-assets-generator/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
import '../app.css';
import { pwaInfo } from 'virtual:pwa-info';
import { pwaAssetsHead } from 'virtual:pwa-assets/head';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
</script>

Expand All @@ -22,7 +27,7 @@
<Header />

<main>
<slot />
{@render children?.()}
</main>

<footer>
Expand Down
14 changes: 7 additions & 7 deletions examples/sveltekit-ts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,18 @@
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/adapter-node": "^2.0.0",
"@sveltejs/kit": "^2.0.1",
"@sveltejs/kit": "^2.7.4",
"@types/cookie": "^0.6.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vite-pwa/sveltekit": "workspace:*",
"eslint": "^8.55.0",
"eslint-plugin-svelte": "^2.35.1",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"tslib": "^2.6.2",
"typescript": "^5.4.5",
"vitest": "^2.0.5"
"eslint-plugin-svelte": "^2.46.0",
"svelte": "^5.1.9",
"svelte-check": "^4.0.5",
"tslib": "^2.8.1",
"typescript": "^5.6.3",
"vitest": "^2.1.4"
},
"type": "module",
"dependencies": {
Expand Down
14 changes: 9 additions & 5 deletions examples/sveltekit-ts/src/lib/Counter.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { spring } from 'svelte/motion';
let count = 0;
let count = $state(0);
const displayed_count = spring();
$: displayed_count.set(count);
$: offset = modulo($displayed_count, 1);
function modulo(n: number, m: number) {
// handle negative numbers
return ((n % m) + m) % m;
}
run(() => {
displayed_count.set(count);
});
let offset = $derived(modulo($displayed_count, 1));
</script>

<div class="counter">
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5" />
</svg>
Expand All @@ -27,7 +31,7 @@
</div>
</div>

<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
</svg>
Expand Down
34 changes: 22 additions & 12 deletions examples/sveltekit-ts/src/lib/ReloadPrompt.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,25 @@
needRefresh,
updateServiceWorker
} = useRegisterSW({
onRegistered(r) {
if (__RELOAD_SW__) {
r && setInterval(() => {
console.log('Checking for sw update')
r.update()
}, 20000 /* 20s for testing purposes */)
} else {
console.log(`SW Registered: ${r}`)
}
onRegisteredSW(swUrl, r) {
r && setInterval(async () => {
if (r.installing || !navigator)
return
if (('connection' in navigator) && !navigator.onLine)
return
const resp = await fetch(swUrl, {
cache: 'no-store',
headers: {
'cache': 'no-store',
'cache-control': 'no-cache',
},
})
if (resp?.status === 200)
await r.update()
}, 20000 /* 20s for testing purposes */)
},
onRegisterError(error) {
console.log('SW registration error', error)
Expand All @@ -28,7 +38,7 @@
needRefresh.set(false)
}
$: toast = $offlineReady || $needRefresh
let toast = $derived($offlineReady || $needRefresh)
</script>

{#if toast}
Expand All @@ -45,11 +55,11 @@
{/if}
</div>
{#if $needRefresh}
<button on:click={() => updateServiceWorker(true)}>
<button onclick={() => updateServiceWorker(true)}>
Reload
</button>
{/if}
<button on:click={close}>
<button onclick={close}>
Close
</button>
</div>
Expand Down
9 changes: 7 additions & 2 deletions examples/sveltekit-ts/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
import Header from '$lib/header/Header.svelte';
import '../app.css';
import { pwaInfo } from 'virtual:pwa-info';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
</script>

Expand All @@ -15,7 +20,7 @@
<Header />

<main>
<slot />
{@render children?.()}
</main>

<footer>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"@typescript-eslint/eslint-plugin": "^6.13.2",
"bumpp": "^9.2.0",
"eslint": "^8.55.0",
"typescript": "^5.4.5",
"typescript": "^5.6.3",
"unbuild": "^2.0.0",
"vite": "^5.0.10",
"vite-plugin-pwa": ">=0.20.5 <1"
Expand Down
Loading

0 comments on commit 3eced4a

Please sign in to comment.