@@ -26,8 +11,7 @@
following into your command line and following the prompts:
-
-
npm init svelte@next
+
npm create svelte@latest
The page you're looking at is purely static HTML, with no client-side interactivity needed.
diff --git a/src/routes/demo/about/+page.ts b/src/routes/demo/about/+page.ts
new file mode 100644
index 0000000..3e13462
--- /dev/null
+++ b/src/routes/demo/about/+page.ts
@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement...
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in prod
+export const prerender = true;
diff --git a/src/routes/demo/todos/+page.server.ts b/src/routes/demo/todos/+page.server.ts
new file mode 100644
index 0000000..6444b59
--- /dev/null
+++ b/src/routes/demo/todos/+page.server.ts
@@ -0,0 +1,61 @@
+import { error } from '@sveltejs/kit';
+import { api } from './api';
+import type { PageServerLoad, Actions } from './$types';
+
+type Todo = {
+ uid: string;
+ created_at: Date;
+ text: string;
+ done: boolean;
+ pending_delete: boolean;
+};
+
+export const load: PageServerLoad = async ({ locals }) => {
+ // locals.userid comes from src/hooks.js
+ const response = await api('GET', `todos/${locals.userid}`);
+
+ if (response.status === 404) {
+ // user hasn't created a todo list.
+ // start with an empty array
+ return {
+ todos: [] as Todo[]
+ };
+ }
+
+ if (response.status === 200) {
+ return {
+ todos: (await response.json()) as Todo[]
+ };
+ }
+
+ throw error(response.status);
+};
+
+export const actions: Actions = {
+ add: async ({ request, locals }) => {
+ const form = await request.formData();
+
+ await api('POST', `todos/${locals.userid}`, {
+ text: form.get('text')
+ });
+ },
+ edit: async ({ request, locals }) => {
+ const form = await request.formData();
+
+ await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
+ text: form.get('text')
+ });
+ },
+ toggle: async ({ request, locals }) => {
+ const form = await request.formData();
+
+ await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
+ done: !!form.get('done')
+ });
+ },
+ delete: async ({ request, locals }) => {
+ const form = await request.formData();
+
+ await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
+ }
+};
diff --git a/src/routes/demo/todos/index.svelte b/src/routes/demo/todos/+page.svelte
similarity index 74%
rename from src/routes/demo/todos/index.svelte
rename to src/routes/demo/todos/+page.svelte
index 1504856..b42c625 100644
--- a/src/routes/demo/todos/index.svelte
+++ b/src/routes/demo/todos/+page.svelte
@@ -1,53 +1,17 @@
-
-
Todos
+
@@ -55,15 +19,15 @@
-
@@ -167,7 +121,7 @@
.done {
transform: none;
opacity: 0.4;
- filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
+ filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
}
form.text {
diff --git a/src/routes/demo/todos/[uid].json.ts b/src/routes/demo/todos/[uid].json.ts
deleted file mode 100644
index e86c5f9..0000000
--- a/src/routes/demo/todos/[uid].json.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { api } from './_api';
-import type { RequestHandler } from '@sveltejs/kit';
-
-// PATCH /todos/:uid.json
-export const patch: RequestHandler = async (event) => {
- const data = await event.request.formData();
-
- return api(event, `todos/${event.locals.userid}/${event.params.uid}`, {
- text: data.get('text'),
- done: data.has('done') ? !!data.get('done') : undefined
- });
-};
-
-// DELETE /todos/:uid.json
-export const del: RequestHandler = async (event) => {
- return api(event, `todos/${event.locals.userid}/${event.params.uid}`);
-};
diff --git a/src/routes/demo/todos/_api.ts b/src/routes/demo/todos/_api.ts
deleted file mode 100644
index 97e8f79..0000000
--- a/src/routes/demo/todos/_api.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { EndpointOutput, RequestEvent } from '@sveltejs/kit';
-
-/*
- This module is used by the /todos.json and /todos/[uid].json
- endpoints to make calls to api.svelte.dev, which stores todos
- for each user. The leading underscore indicates that this is
- a private module, _not_ an endpoint — visiting /todos/_api
- will net you a 404 response.
-
- (The data on the todo app will expire periodically; no
- guarantees are made. Don't use it to organise your life.)
-*/
-
-const base = 'https://api.svelte.dev';
-
-export async function api(
- event: RequestEvent,
- resource: string,
- data?: Record
-): Promise {
- // user must have a cookie set
- if (!event.locals.userid) {
- return { status: 401 };
- }
-
- const res = await fetch(`${base}/${resource}`, {
- method: event.request.method,
- headers: {
- 'content-type': 'application/json'
- },
- body: data && JSON.stringify(data)
- });
-
- // if the request came from a