Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update examples to use Svelte 5 #93

Merged
merged 5 commits into from
Nov 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/sveltekit-ts-assets-generator/README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# create-svelte
# sv

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest
npx sv create

# create a new project in my-app
npm create svelte@latest my-app
npx sv create my-app
```

## Developing
@@ -35,4 +35,4 @@ npm run build

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
14 changes: 7 additions & 7 deletions examples/sveltekit-ts-assets-generator/package.json
Original file line number Diff line number Diff line change
@@ -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": {
27 changes: 15 additions & 12 deletions examples/sveltekit-ts-assets-generator/src/lib/Counter.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<script lang="ts">
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);
// svelte-ignore state_referenced_locally
const displayedCount = spring(count);

$effect(() => {
displayedCount.set(count);
});
let offset = $derived(modulo($displayedCount, 1));

function modulo(n: number, m: number) {
// handle negative numbers
@@ -14,20 +18,20 @@
</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>
</button>

<div class="counter-viewport">
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
<strong>{Math.floor($displayed_count)}</strong>
<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
<strong>{Math.floor($displayedCount)}</strong>
</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>
@@ -51,12 +55,11 @@
border: 0;
background-color: transparent;
touch-action: manipulation;
color: var(--text-color);
font-size: 2rem;
}

.counter button:hover {
background-color: var(--secondary-color);
background-color: var(--color-bg-1);
}

svg {
@@ -67,7 +70,7 @@
path {
vector-effect: non-scaling-stroke;
stroke-width: 2px;
stroke: var(--text-color);
stroke: #444;
}

.counter-viewport {
@@ -84,7 +87,7 @@
width: 100%;
height: 100%;
font-weight: 400;
color: var(--accent-color);
color: var(--color-theme-1);
font-size: 4rem;
align-items: center;
justify-content: center;
34 changes: 22 additions & 12 deletions examples/sveltekit-ts-assets-generator/src/lib/ReloadPrompt.svelte
Original file line number Diff line number Diff line change
@@ -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)
@@ -28,7 +38,7 @@
needRefresh.set(false)
}

$: toast = $offlineReady || $needRefresh
let toast = $derived($offlineReady || $needRefresh)
</script>

{#if toast}
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>

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

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

<footer>
10 changes: 5 additions & 5 deletions examples/sveltekit-ts/README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# create-svelte
# sv

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest
npx sv create

# create a new project in my-app
npm create svelte@latest my-app
npx sv create my-app
```

## Developing
@@ -35,4 +35,4 @@ npm run build

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
14 changes: 7 additions & 7 deletions examples/sveltekit-ts/package.json
Original file line number Diff line number Diff line change
@@ -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": {
27 changes: 15 additions & 12 deletions examples/sveltekit-ts/src/lib/Counter.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<script lang="ts">
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);
// svelte-ignore state_referenced_locally
const displayedCount = spring(count);

$effect(() => {
displayedCount.set(count);
});
let offset = $derived(modulo($displayedCount, 1));

function modulo(n: number, m: number) {
// handle negative numbers
@@ -14,20 +18,20 @@
</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>
</button>

<div class="counter-viewport">
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
<strong>{Math.floor($displayed_count)}</strong>
<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
<strong>{Math.floor($displayedCount)}</strong>
</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>
@@ -51,12 +55,11 @@
border: 0;
background-color: transparent;
touch-action: manipulation;
color: var(--text-color);
font-size: 2rem;
}

.counter button:hover {
background-color: var(--secondary-color);
background-color: var(--color-bg-1);
}

svg {
@@ -67,7 +70,7 @@
path {
vector-effect: non-scaling-stroke;
stroke-width: 2px;
stroke: var(--text-color);
stroke: #444;
}

.counter-viewport {
@@ -84,7 +87,7 @@
width: 100%;
height: 100%;
font-weight: 400;
color: var(--accent-color);
color: var(--color-theme-1);
font-size: 4rem;
align-items: center;
justify-content: center;
Loading