+
todos
+
+ +++{#if form?.error}
+
{form.error}
+ {/if}+++
+
+
```
> You can also return data from an action _without_ wrapping it in `fail` — for example to show a 'success!' message when data was saved — and it will be available via the `form` prop.
diff --git a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js
index c91d6fd60..41dc94f2f 100644
--- a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js
+++ b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js
@@ -2,14 +2,15 @@ import { fail } from '@sveltejs/kit';
import * as db from '$lib/server/database.js';
export function load({ cookies }) {
- const id = cookies.get('userid');
+ let id = cookies.get('userid');
if (!id) {
- cookies.set('userid', crypto.randomUUID(), { path: '/' });
+ id = crypto.randomUUID();
+ cookies.set('userid', id, { path: '/' });
}
return {
- todos: db.getTodos(id) ?? []
+ todos: db.getTodos(id)
};
}
diff --git a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
index 8346527df..ae217b114 100644
--- a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
@@ -28,7 +28,7 @@
{/each}
diff --git a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
index 02f648ab4..dba733d18 100644
--- a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
@@ -31,7 +31,7 @@
{/each}
@@ -66,4 +66,12 @@
opacity: 0.5;
transition: opacity 0.2s;
}
+
+ button:hover {
+ opacity: 1;
+ }
+
+ .saving {
+ opacity: 0.5;
+ }
diff --git a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js
index 334b79ddd..f05f751cb 100644
--- a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js
+++ b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.server.js
@@ -2,14 +2,15 @@ import { fail } from '@sveltejs/kit';
import * as db from '$lib/server/database.js';
export function load({ cookies }) {
- const id = cookies.get('userid');
+ let id = cookies.get('userid');
if (!id) {
- cookies.set('userid', crypto.randomUUID(), { path: '/' });
+ id = crypto.randomUUID();
+ cookies.set('userid', id, { path: '/' });
}
return {
- todos: db.getTodos(id) ?? []
+ todos: db.getTodos(id)
};
}
diff --git a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
index a7770b986..51c5b9251 100644
--- a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
@@ -56,7 +56,7 @@
>
{todo.description}
-
+
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md
index d85a3f2f2..7be2a7929 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md
+++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md
@@ -12,20 +12,20 @@ Inside the `keydown` event handler of the 'add a todo' `
`, let's post som
type="text"
autocomplete="off"
on:keydown={async (e) => {
- if (e.key === 'Enter') {
- const input = e.currentTarget;
- const description = input.value;
-
-+++ const response = await fetch('/todo', {
- method: 'POST',
- body: JSON.stringify({ description }),
- headers: {
- 'Content-Type': 'application/json'
- }
- });+++
-
- input.value = '';
- }
+ if (e.key !== 'Enter') return;
+
+ const input = e.currentTarget;
+ const description = input.value;
+
++++ const response = await fetch('/todo', {
+ method: 'POST',
+ body: JSON.stringify({ description }),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ });+++
+
+ input.value = '';
}}
/>
```
@@ -51,7 +51,7 @@ export async function POST({ request, cookies }) {
As with `load` functions and form actions, the `request` is a standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object; `await request.json()` returns the data that we posted from the event handler.
-We're returning a response with a [201 Created](https://httpstatusdogs.com/201-created) status and the `id` of the newly generated todo in our database. Back in the event handler, we can use this to update the page:
+We're returning a response with a [201 Created](https://http.dog/201) status and the `id` of the newly generated todo in our database. Back in the event handler, we can use this to update the page:
```svelte
/// file: src/routes/+page.svelte
@@ -59,27 +59,27 @@ We're returning a response with a [201 Created](https://httpstatusdogs.com/201-c
type="text"
autocomplete="off"
on:keydown={async (e) => {
- if (e.key === 'Enter') {
- const input = e.currentTarget;
- const description = input.value;
-
- const response = await fetch('/todo', {
- method: 'POST',
- body: JSON.stringify({ description }),
- headers: {
- 'Content-Type': 'application/json'
- }
- });
-
-+++ const { id } = await response.json();
-
- data.todos = [...data.todos, {
- id,
- description
- }];+++
-
- input.value = '';
- }
+ if (e.key !== 'Enter') return;
+
+ const input = e.currentTarget;
+ const description = input.value;
+
+ const response = await fetch('/todo', {
+ method: 'POST',
+ body: JSON.stringify({ description }),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ });
+
++++ const { id } = await response.json();
+
+ data.todos = [...data.todos, {
+ id,
+ description
+ }];+++
+
+ input.value = '';
}}
/>
```
diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
index d2a9e1c83..2d6b71bae 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
@@ -11,14 +11,14 @@
type="text"
autocomplete="off"
on:keydown={async (e) => {
- if (e.key === 'Enter') {
- const input = e.currentTarget;
- const description = input.value;
-
- // TODO handle submit
+ if (e.key !== 'Enter') return;
- input.value = '';
- }
+ const input = e.currentTarget;
+ const description = input.value;
+
+ // TODO handle submit
+
+ input.value = '';
}}
/>
@@ -42,7 +42,7 @@
on:click={async (e) => {
// TODO handle delete
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
index 901216e14..50ed0a9c0 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
@@ -11,27 +11,27 @@
type="text"
autocomplete="off"
on:keydown={async (e) => {
- if (e.key === 'Enter') {
- const input = e.currentTarget;
- const description = input.value;
-
- const response = await fetch('/todo', {
- method: 'POST',
- body: JSON.stringify({ description }),
- headers: {
- 'Content-Type': 'application/json'
- }
- });
+ if (e.key !== 'Enter') return;
- const { id } = await response.json();
+ const input = e.currentTarget;
+ const description = input.value;
+
+ const response = await fetch('/todo', {
+ method: 'POST',
+ body: JSON.stringify({ description }),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ });
- data.todos = [...data.todos, {
- id,
- description
- }];
+ const { id } = await response.json();
- input.value = '';
- }
+ data.todos = [...data.todos, {
+ id,
+ description
+ }];
+
+ input.value = '';
}}
/>
@@ -55,7 +55,7 @@
on:click={async (e) => {
// TODO handle delete
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
index b27606b61..499744d03 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
+++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
@@ -24,7 +24,7 @@ export async function DELETE({ params, cookies }) {
}
```
-Since we don't need to return any actual data to the browser, we're returning an empty [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) with a [204 No Content](https://httpstatusdogs.com/204-no-content) status.
+Since we don't need to return any actual data to the browser, we're returning an empty [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) with a [204 No Content](https://http.dog/204) status.
We can now interact with this endpoint inside our event handlers:
@@ -56,6 +56,6 @@ We can now interact with this endpoint inside our event handlers:
data.todos = data.todos.filter((t) => t !== todo);+++
}}
- />
+ >
```
diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
index 009d8bcfd..f5b26108a 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
@@ -11,27 +11,27 @@
type="text"
autocomplete="off"
on:keydown={async (e) => {
- if (e.key === 'Enter') {
- const input = e.currentTarget;
- const description = input.value;
-
- const response = await fetch('/todo', {
- method: 'POST',
- body: JSON.stringify({ description }),
- headers: {
- 'Content-Type': 'application/json'
- }
- });
+ if (e.key !== 'Enter') return;
- const { id } = await response.json();
+ const input = e.currentTarget;
+ const description = input.value;
+
+ const response = await fetch('/todo', {
+ method: 'POST',
+ body: JSON.stringify({ description }),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ });
- data.todos = [...data.todos, {
- id,
- description
- }];
+ const { id } = await response.json();
- input.value = '';
- }
+ data.todos = [...data.todos, {
+ id,
+ description
+ }];
+
+ input.value = '';
}}
/>
@@ -65,7 +65,7 @@
data.todos = data.todos.filter((t) => t !== todo);
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
index 116d13531..dddb21220 100644
--- a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
+++ b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
@@ -4,15 +4,15 @@ title: page
As we learned [earlier](writable-stores), Svelte stores are a place to put data that doesn't belong to an individual component.
-SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updating`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page:
+SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page:
-* `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
-* `params` — the current page's [parameters](params)
-* `route` — an object with an `id` property representing the current route
-* `status` — the HTTP status code of the current page
-* `error` — the error object of the current page, if any (you'll learn more about error handling in [later](error-basics) [exercises](handleerror))
-* `data` — the data for the current page, combining the return values of all `load` functions
-* `form` — the data returned from a [form action](the-form-element)
+- `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
+- `params` — the current page's [parameters](params)
+- `route` — an object with an `id` property representing the current route
+- `status` — the HTTP status code of the current page
+- `error` — the error object of the current page, if any (you'll learn more about error handling in [later](error-basics) [exercises](handleerror))
+- `data` — the data for the current page, combining the return values of all `load` functions
+- `form` — the data returned from a [form action](the-form-element)
As with any other store, you can reference its value in a component by prefixing its name with the `$` symbol. For example, we can access the current pathname as `$page.url.pathname`:
@@ -32,5 +32,5 @@ As with any other store, you can reference its value in a component by prefixing
-
-```
\ No newline at end of file
+
+```
diff --git a/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md b/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
index fe0f24019..6da1d963e 100644
--- a/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
+++ b/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
@@ -2,7 +2,7 @@
title: navigating
---
-The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigation` will become an object with the following properties:
+The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
- `from` and `to` — objects with `params`, `route` and `url` properties
- `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
@@ -31,5 +31,5 @@ It can be used to show a loading indicator for long-running navigations. In this
{/if}+++
-
-```
\ No newline at end of file
+
+```
diff --git a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md
index 23f034492..967284576 100644
--- a/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md
+++ b/content/tutorial/03-sveltekit/08-stores/03-updated-store/README.md
@@ -4,38 +4,29 @@ title: updated
The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
-Version changes only happens in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
-
-You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
-
```svelte
/// file: src/routes/+layout.svelte
+```
-
-
- home
-
-
-
- about
-
+Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
- {#if $navigating}
- navigating to {$navigating.to.url.pathname}
- {/if}
-
-
-
+You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
-+++{#if $updated}
-
- A new version of the app is available
+```svelte
+/// file: src/routes/+layout.svelte
- location.reload()}>
- reload the page
-
-
-{/if}+++
++++{#if $updated}+++
+
+
+ A new version of the app is available
+
+ location.reload()}>
+ reload the page
+
+
+
++++{/if}+++
+```
diff --git a/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte b/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte
index a00cb3018..6932ab024 100644
--- a/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte
+++ b/content/tutorial/03-sveltekit/08-stores/03-updated-store/app-a/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
@@ -18,12 +18,35 @@
+
+
A new version of the app is available
location.reload()}>
reload the page
-{/if}
+
+
+ home
+
+
+
+ about
+
+
+ {#if $navigating}
+ navigating to {$navigating.to.url.pathname}
+ {/if}
+
+
+
+
+ A new version of the app is available
+
+ location.reload()}>
+ reload the page
+
+
+
} error
* @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
* @param {import('svelte/store').Writable} logs
- * @param {import('svelte/store').Writable>} warnings
+ * @param {import('svelte/store').Writable>} warnings
* @returns {Promise}
*/
export async function create(base, error, progress, logs, warnings) {
@@ -48,9 +44,9 @@ export async function create(base, error, progress, logs, warnings) {
}
});
- /** @type {Record} */
+ /** @type {Record} */
let $warnings;
- warnings.subscribe((value) => $warnings = value);
+ warnings.subscribe((value) => ($warnings = value));
/** @type {any} */
let timeout;
@@ -67,21 +63,19 @@ export async function create(base, error, progress, logs, warnings) {
if (chunk === '\x1B[1;1H') {
// clear screen
logs.set([]);
-
} else if (chunk?.startsWith('svelte:warnings:')) {
- /** @type {CompilerWarning} */
+ /** @type {import('$lib/types').Warning} */
const warn = JSON.parse(chunk.slice(16));
const current = $warnings[warn.filename];
if (!current) {
$warnings[warn.filename] = [warn];
- // the exact same warning may be given multiple times in a row
- } else if (!current.some((s) => (s.code === warn.code && s.pos === warn.pos))) {
+ // the exact same warning may be given multiple times in a row
+ } else if (!current.some((s) => s.code === warn.code && s.pos === warn.pos)) {
current.push(warn);
}
schedule_to_update_warning(100);
-
} else {
const log = converter.toHtml(escape_html(chunk)).replace(/\n/g, '
+
-
diff --git a/src/lib/server/content.js b/src/lib/server/content.js
index 1f4f50652..2d7ce1c2e 100644
--- a/src/lib/server/content.js
+++ b/src/lib/server/content.js
@@ -1,7 +1,7 @@
import { posixify } from '$lib/utils.js';
-import fs from 'node:fs';
+import { readFile, readdir, stat } from 'node:fs/promises';
import path from 'node:path';
-import glob from 'tiny-glob/sync.js';
+import glob from 'tiny-glob';
import { transform } from './markdown.js';
const text_files = new Set([
@@ -20,8 +20,8 @@ const text_files = new Set([
const excluded = new Set(['.DS_Store', '.gitkeep', '.svelte-kit', 'package-lock.json']);
/** @param {string} file */
-function json(file) {
- return JSON.parse(fs.readFileSync(file, 'utf-8'));
+async function json(file) {
+ return JSON.parse(await readFile(file, 'utf-8'));
}
/** @param {string} dir */
@@ -29,62 +29,92 @@ function is_valid(dir) {
return /^\d{2}-/.test(dir);
}
+/**
+ * @param {string} path
+ */
+async function exists(path) {
+ try {
+ await stat(path);
+ return true;
+ } catch {
+ return false;
+ }
+}
+
/**
* @param {string} part
* @param {string} chapter
* @param {string} dir
*/
-function exists_readme(part, chapter, dir) {
- return fs.existsSync(`content/tutorial/${part}/${chapter}/${dir}/README.md`);
+async function exists_readme(part, chapter, dir) {
+ return exists(`content/tutorial/${part}/${chapter}/${dir}/README.md`);
}
/**
- * @returns {import('$lib/types').PartStub[]}
+ * @returns {Promise}
*/
-export function get_index() {
- const parts = fs.readdirSync('content/tutorial').filter(is_valid).map(posixify);
+export async function get_index() {
+ const parts = (await readdir('content/tutorial')).filter(is_valid).map(posixify);
+
+ /** @type {import('$lib/types').PartStub[]} */
+ const final_data = [];
- return parts.map((part) => {
- const chapters = fs.readdirSync(`content/tutorial/${part}`).filter(is_valid).map(posixify);
+ for (const part of parts) {
+ const chapters = (await readdir(`content/tutorial/${part}`)).filter(is_valid).map(posixify);
- return {
+ const obj = /** @type {import('$lib/types').PartStub} */ ({
slug: part,
- title: json(`content/tutorial/${part}/meta.json`).title,
- chapters: chapters.map((chapter) => {
- const exercises = fs
- .readdirSync(`content/tutorial/${part}/${chapter}`)
- .filter((dir) => is_valid(dir) && exists_readme(part, chapter, dir))
- .map(posixify);
-
- return {
- slug: chapter,
- title: json(`content/tutorial/${part}/${chapter}/meta.json`).title,
- exercises: exercises.map((exercise) => {
- const dir = `content/tutorial/${part}/${chapter}/${exercise}`;
-
- const text = fs.readFileSync(`${dir}/README.md`, 'utf-8');
- const { frontmatter } = extract_frontmatter(text, dir);
- const { title } = frontmatter;
-
- return {
- slug: exercise.slice(3),
- title
- };
- })
- };
- })
- };
- });
+ title: (await json(`content/tutorial/${part}/meta.json`)).title,
+ chapters: []
+ });
+
+ for (const chapter of chapters) {
+ let exercises = await readdir(`content/tutorial/${part}/${chapter}`);
+ for (const exercise of exercises) {
+ if (!(is_valid(exercise) && (await exists_readme(part, chapter, exercise)))) {
+ exercises = exercises.filter((e) => e !== exercise);
+ }
+ }
+ exercises = exercises.map(posixify);
+
+ const chapters_obj = /** @type {import('$lib/types').ChapterStub} */ ({
+ slug: chapter,
+ title: (await json(`content/tutorial/${part}/${chapter}/meta.json`)).title,
+ exercises: []
+ });
+
+ for (const exercise of exercises) {
+ const dir = `content/tutorial/${part}/${chapter}/${exercise}`;
+
+ const text = await readFile(`${dir}/README.md`, 'utf-8');
+ const { frontmatter } = extract_frontmatter(text, dir);
+ const { title } = frontmatter;
+
+ chapters_obj.exercises.push({
+ slug: exercise.slice(3),
+ title
+ });
+ }
+
+ obj.chapters.push(chapters_obj);
+ }
+
+ final_data.push(obj);
+ }
+
+ return final_data;
}
/**
* @param {string} slug
- * @returns {import('$lib/types').Exercise | undefined}
+ * @returns {Promise}
*/
-export function get_exercise(slug) {
- const exercises = glob('[0-9][0-9]-*/[0-9][0-9]-*/[0-9][0-9]-*/README.md', {
- cwd: 'content/tutorial'
- }).map(posixify);
+export async function get_exercise(slug) {
+ const exercises = (
+ await glob('[0-9][0-9]-*/[0-9][0-9]-*/[0-9][0-9]-*/README.md', {
+ cwd: 'content/tutorial'
+ })
+ ).map(posixify);
/** @type {string[]} */
const chain = [];
@@ -96,24 +126,24 @@ export function get_exercise(slug) {
const dir = `content/tutorial/${part_dir}/${chapter_dir}/${exercise_dir}`;
- if (fs.existsSync(`${dir}/app-a`)) {
+ if (await exists(`${dir}/app-a`)) {
chain.length = 0;
chain.push(`${dir}/app-a`);
}
if (exercise_slug === slug) {
const a = {
- ...walk('content/tutorial/common', {
+ ...(await walk('content/tutorial/common', {
exclude: ['node_modules', 'static/tutorial', 'static/svelte-logo-mask.svg']
- }),
- ...walk(`content/tutorial/${part_dir}/common`)
+ })),
+ ...(await walk(`content/tutorial/${part_dir}/common`))
};
for (const dir of chain) {
- Object.assign(a, walk(dir));
+ Object.assign(a, await walk(dir));
}
- const b = walk(`${dir}/app-b`);
+ const b = await walk(`${dir}/app-b`);
const has_solution = Object.keys(b).length > 0;
// ensure no duplicate content
@@ -129,15 +159,17 @@ export function get_exercise(slug) {
}
}
- const part_meta = json(`content/tutorial/${part_dir}/meta.json`);
- const chapter_meta = json(`content/tutorial/${part_dir}/${chapter_dir}/meta.json`);
+ const part_meta = await json(`content/tutorial/${part_dir}/meta.json`);
+ const chapter_meta = await json(`content/tutorial/${part_dir}/${chapter_dir}/meta.json`);
const exercise_meta_file = `content/tutorial/${part_dir}/${chapter_dir}/${exercise_dir}/meta.json`;
- const exercise_meta = fs.existsSync(exercise_meta_file) ? json(exercise_meta_file) : {};
+ const exercise_meta = (await exists(exercise_meta_file))
+ ? await json(exercise_meta_file)
+ : {};
const scope = chapter_meta.scope ?? part_meta.scope;
- const text = fs.readFileSync(`${dir}/README.md`, 'utf-8');
+ const text = await readFile(`${dir}/README.md`, 'utf-8');
const { frontmatter, markdown } = extract_frontmatter(text, dir);
const { title, path = '/', focus } = frontmatter;
@@ -158,12 +190,12 @@ export function get_exercise(slug) {
const dirs = next_exercise.split('/');
if (dirs[0] !== part_dir) {
- title = json(`content/tutorial/${dirs[0]}/meta.json`).title;
+ title = (await json(`content/tutorial/${dirs[0]}/meta.json`)).title;
} else if (dirs[1] !== chapter_dir) {
- title = json(`content/tutorial/${dirs[0]}/${dirs[1]}/meta.json`).title;
+ title = (await json(`content/tutorial/${dirs[0]}/${dirs[1]}/meta.json`)).title;
} else {
title = extract_frontmatter(
- fs.readFileSync(`content/tutorial/${next_exercise}`, 'utf-8'),
+ await readFile(`content/tutorial/${next_exercise}`, 'utf-8'),
next_exercise
).frontmatter.title;
}
@@ -230,7 +262,8 @@ export function get_exercise(slug) {
return {
part: {
slug: part_dir,
- title: `Part ${part_dir.slice(1, 2)}`
+ title: `Part ${part_dir.slice(1, 2)}`,
+ label: part_meta.title
},
chapter: {
slug: chapter_dir,
@@ -245,7 +278,8 @@ export function get_exercise(slug) {
next,
dir,
editing_constraints,
- html: transform(markdown, {
+ markdown,
+ html: await transform(markdown, {
codespan: (text) =>
filenames.size > 1 && filenames.has(text)
? `${text}`
@@ -291,18 +325,18 @@ function extract_frontmatter(markdown, dir) {
* exclude?: string[]
* }} options
*/
-function walk(cwd, options = {}) {
+async function walk(cwd, options = {}) {
/** @type {Record} */
const result = {};
- if (!fs.existsSync(cwd)) return result;
+ if (!(await exists(cwd))) return result;
/**
* @param {string} dir
* @param {number} depth
*/
- function walk_dir(dir, depth) {
- const files = fs.readdirSync(path.join(cwd, dir)).map(posixify);
+ async function walk_dir(dir, depth) {
+ const files = (await readdir(path.join(cwd, dir))).map(posixify);
for (const basename of files) {
if (excluded.has(basename)) continue;
@@ -312,7 +346,7 @@ function walk(cwd, options = {}) {
if (options.exclude?.some((exclude) => posixify(name).endsWith(exclude))) continue;
const resolved = path.join(cwd, name);
- const stats = fs.statSync(resolved);
+ const stats = await stat(resolved);
if (stats.isDirectory()) {
result[name] = {
@@ -321,10 +355,10 @@ function walk(cwd, options = {}) {
basename
};
- walk_dir(name + '/', depth + 1);
+ await walk_dir(name + '/', depth + 1);
} else {
const text = text_files.has(path.extname(name) || path.basename(name));
- const contents = fs.readFileSync(resolved, text ? 'utf-8' : 'base64');
+ const contents = await readFile(resolved, text ? 'utf-8' : 'base64');
result[name] = {
type: 'file',
@@ -337,5 +371,5 @@ function walk(cwd, options = {}) {
}
}
- return walk_dir('/', 1), result;
+ return await walk_dir('/', 1), result;
}
diff --git a/src/lib/server/markdown.js b/src/lib/server/markdown.js
index 33b7c353f..ebaec5639 100644
--- a/src/lib/server/markdown.js
+++ b/src/lib/server/markdown.js
@@ -3,7 +3,7 @@ import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-diff.js';
import 'prismjs/components/prism-typescript.js';
import 'prism-svelte';
-import { marked } from 'marked';
+import { Marked } from 'marked';
import { escape_html } from '$lib/utils';
const languages = {
@@ -108,21 +108,17 @@ const default_renderer = {
}
};
-marked.use({
- renderer: {}
-});
-
/**
* @param {string} markdown
* @param {Partial} options
*/
-export function transform(markdown, options) {
- marked.use({
+export async function transform(markdown, options) {
+ const marked = new Marked({
renderer: {
...default_renderer,
...options
}
});
- return marked(markdown);
+ return (await marked.parse(markdown)) ?? '';
}
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index f0779b4a8..8c50af22d 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -31,6 +31,7 @@ export interface Exercise {
part: {
slug: string;
title: string;
+ label: string;
};
chapter: {
slug: string;
@@ -44,6 +45,7 @@ export interface Exercise {
slug: string;
prev: { slug: string } | null;
next: { slug: string; title: string } | null;
+ markdown: string;
html: string;
dir: string;
editing_constraints: {
@@ -76,3 +78,20 @@ export interface EditingConstraints {
create: Set;
remove: Set;
}
+
+// TODO replace with `Warning` from `svelte/compiler`
+export interface Warning {
+ code: string;
+ start: { line: number; column: number; character: number };
+ end: { line: number; column: number; character: number };
+ pos: number;
+ filename: string;
+ frame: string;
+ message: string;
+}
+
+export interface MenuItem {
+ icon: string;
+ label: string;
+ fn: () => void;
+}
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
deleted file mode 100644
index 189f71e2e..000000000
--- a/src/routes/+layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
new file mode 100644
index 000000000..83ed4d87b
--- /dev/null
+++ b/src/routes/+layout.server.js
@@ -0,0 +1,7 @@
+export const prerender = true;
+
+export const load = async ({ fetch }) => {
+ return {
+ links: await fetch('/nav.json').then((r) => r.json())
+ };
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 226b68bcc..e4296445f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,35 +1,61 @@
-
-
+
+
learn .svelte.dev
-
- Svelte
+
+ learn
+
+
+
+ {#if $page.url.pathname !== '/search'}
+
+
+
+ Svelte
- SvelteKit
+ SvelteKit
-
- Discord
-
+
- GitHub
-
+
+ Discord
+
+
+
+ GitHub
+
+{#if browser}
+
-
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 0f2526e36..629a2cf5b 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -1,7 +1,7 @@
-
{
- if (sessionStorage[copy_enabled]) return;
-
- /** @type {HTMLElement | null} */
- let node = /** @type {HTMLElement} */ (e.target);
+
+ {
+ if (sessionStorage[copy_enabled]) return;
- while (node && node !== e.currentTarget) {
- if (node.nodeName === 'PRE') {
- show_modal = true;
+ /** @type {HTMLElement | null} */
+ let node = /** @type {HTMLElement} */ (e.target);
- e.preventDefault();
- return;
- }
+ while (node && node !== e.currentTarget) {
+ if (node.nodeName === 'PRE') {
+ show_modal = true;
- node = /** @type {HTMLElement | null} */ (node.parentNode);
- }
- }}
->
-
-
{
- const node = /** @type {HTMLElement} */ (e.target);
-
- if (node.nodeName === 'CODE') {
- const { file } = node.dataset;
- if (file) {
- dispatch('select', { file });
+ e.preventDefault();
+ return;
}
- }
- if (node.nodeName === 'SPAN' && node.classList.contains('filename')) {
- const file = exercise.scope.prefix + node.textContent;
- dispatch('select', { file });
+ node = /** @type {HTMLElement | null} */ (node.parentNode);
}
}}
>
- {@html exercise.html}
+
+
+
{
+ const node = /** @type {HTMLElement} */ (e.target);
+
+ if (node.nodeName === 'CODE') {
+ const { file } = node.dataset;
+ if (file) {
+ dispatch('select', { file });
+ }
+ }
+
+ if (node.nodeName === 'SPAN' && node.classList.contains('filename')) {
+ const file = exercise.scope.prefix + node.textContent;
+ dispatch('select', { file });
+ }
+ }}
+ >
+ {@html exercise.html}
+
+
+ {#if exercise.next}
+
Next: {exercise.next.title}
+ {/if}
- {#if exercise.next}
-
Next: {exercise.next.title}
- {/if}
-
{#if show_modal}
(show_modal = false)}>
@@ -113,9 +107,16 @@
{/if}
\ No newline at end of file
+
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 629a4d863..e321c3892 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -6,19 +6,6 @@ import * as adapter from './adapter.js';
* @typedef {import('svelte/store').Writable} Writable
*/
-// TODO would be nice if svelte exported this type (maybe it does already?)
-/**
- * @typedef {{
- * code: string;
- * start: { line: number, column: number, character: number };
- * end: { line: number, column: number, character: number };
- * pos: number;
- * filename: string;
- * frame: string;
- * message: string;
- * }} CompilerWarning
- */
-
/** @type {Writable} */
export const files = writable([]);
@@ -98,4 +85,4 @@ export function create_directories(name, files) {
}
return directories;
-}
\ No newline at end of file
+}
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 000000000..eb0536286
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/svelte.config.js b/svelte.config.js
index 83e7b17cb..3b4551d49 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -6,17 +6,13 @@ const config = {
kit: {
adapter: adapter({ runtime: 'edge' }),
+ prerender: {
+ concurrency: 4
+ },
+
version: {
name: child_process.execSync('git rev-parse HEAD').toString().trim()
}
- },
-
- vitePlugin: {
- experimental: {
- inspector: {
- holdMode: true
- }
- }
}
};
diff --git a/tests/env_file.spec.ts b/tests/env_file.spec.ts
index 7177e40cf..7a546b29c 100644
--- a/tests/env_file.spec.ts
+++ b/tests/env_file.spec.ts
@@ -1,7 +1,18 @@
-import { expect, test } from '@playwright/test';
+import { expect, test, type Page } from '@playwright/test';
const iframe_selector = 'iframe[src*="webcontainer.io/"]';
+async function disableAnimations(page: Page) {
+ await page.addStyleTag({
+ content: `
+ *, *::before, *::after {
+ animation-duration: 0s !important;
+ transition-duration: 0s !important;
+ }
+ `
+ });
+}
+
test.describe.configure({ mode: 'parallel' });
test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async ({
@@ -11,15 +22,18 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e
await page.goto('/tutorial/welcome-to-svelte');
+ // disable animations to prevent flakiness
+ await disableAnimations(page);
+
const iframe_locator = page.frameLocator(iframe_selector);
// wait for the iframe to load
await iframe_locator.getByText('Welcome!').waitFor();
// switch to another tutorial with a .env file
- await page.click('header > h1', { delay: 200 });
- await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
- await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 });
+ await page.click('header > button > h1', { delay: 200 });
+ await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
+ await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 });
await page.locator('a', { hasText: '$env/static/private' }).click({ delay: 200 });
// wait for the iframe to load
@@ -41,15 +55,18 @@ test('.env file: environment variables are available when switching a tutorial w
await page.goto('/tutorial/welcome-to-svelte');
+ // disable animations to prevent flakiness
+ await disableAnimations(page);
+
const iframe_locator = page.frameLocator(iframe_selector);
// wait for the iframe to load
await iframe_locator.getByText('Welcome!').waitFor();
// switch to another tutorial with a .env file
- await page.click('header > h1', { delay: 200 });
- await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
- await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 });
+ await page.click('header > button > h1', { delay: 200 });
+ await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
+ await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 });
await page.locator('a', { hasText: '$env/dynamic/private' }).click({ delay: 200 });
// wait for the iframe to load
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 000000000..fb6340954
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://openapi.vercel.sh/vercel.json",
+ "headers": [
+ {
+ "source": "_app/immutable/workers/(.*)",
+ "headers": [
+ {
+ "key": "cross-origin-opener-policy",
+ "value": "same-origin"
+ },
+ {
+ "key": "cross-origin-embedder-policy",
+ "value": "require-corp"
+ },
+ {
+ "key": "cross-origin-resource-policy",
+ "value": "cross-origin"
+ }
+ ]
+ }
+ ]
+}
diff --git a/vite.config.js b/vite.config.js
index 1a3c3386d..bf5e4e7dc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,14 +1,23 @@
-import path from 'path';
import { sveltekit } from '@sveltejs/kit/vite';
+import browserslist from 'browserslist';
+import { browserslistToTargets } from 'lightningcss';
+import path from 'node:path';
/** @type {import('vite').UserConfig} */
export default {
+ logLevel: 'info',
+
+ css: {
+ transformer: 'lightningcss',
+ lightningcss: {
+ targets: browserslistToTargets(browserslist(['>0.2%', 'not dead']))
+ }
+ },
build: {
- target: 'esnext'
+ target: 'esnext',
+ cssMinify: 'lightningcss'
},
- logLevel: 'info',
-
plugins: [
// apply cross-origin isolation headers when previewing locally
{
@@ -28,10 +37,16 @@ export default {
server: {
fs: {
- allow: [path.resolve('.apps')]
+ allow: [path.resolve('.apps')],
+ strict: false
},
watch: {
ignored: ['**/.apps/**']
+ },
+ headers: {
+ 'cross-origin-opener-policy': 'same-origin',
+ 'cross-origin-embedder-policy': 'require-corp',
+ 'cross-origin-resource-policy': 'cross-origin'
}
},