fix: outdated endpoint in todo example app (#1344)

* fix: change context -> locals

* add Locals global interface

* fix endpoint lint errors

* fix comment typo

* pass Locals to Request in api function

* remove resolved TODO

* move global Locals -> $lib/types

* add comment on how to make it global

* add changeset

Co-authored-by: Conduitry <git@chor.date>

.changeset/bright-cherries-hug.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Fix usage of request.locals in starter project

packages/create-svelte/templates/default/src/lib/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Can be made globally available by placing this
+ * inside `global.d.ts` and removing `export` keyword
+ */
+export interface Locals {
+	userid: string;
+}

packages/create-svelte/templates/default/src/routes/todos/[uid].json.ts

@@ -1,14 +1,16 @@
 import { api } from './_api';
+import type { RequestHandler } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
 
 // PATCH /todos/:uid.json
-export const patch = async (request) => {
-	return api(request, `todos/${request.context.userid}/${request.params.uid}`, {
+export const patch: RequestHandler<Locals, FormData> = async (request) => {
+	return api(request, `todos/${request.locals.userid}/${request.params.uid}`, {
 		text: request.body.get('text'),
 		done: request.body.has('done') ? !!request.body.get('done') : undefined
 	});
 };
 
 // DELETE /todos/:uid.json
-export const del = async (request) => {
-	return api(request, `todos/${request.context.userid}/${request.params.uid}`);
+export const del: RequestHandler<Locals> = async (request) => {
+	return api(request, `todos/${request.locals.userid}/${request.params.uid}`);
 };

packages/create-svelte/templates/default/src/routes/todos/_api.ts

@@ -1,4 +1,5 @@
 import type { Request } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
 
 /*
 	This module is used by the /todos.json and /todos/[uid].json
@@ -13,9 +14,9 @@ import type { Request } from '@sveltejs/kit';
 
 const base = 'https://api.svelte.dev';
 
-export async function api(request: Request, resource: string, data?: {}) {
+export async function api(request: Request<Locals>, resource: string, data?: {}) {
 	// user must have a cookie set
-	if (!request.context.userid) {
+	if (!request.locals.userid) {
 		return { status: 401 };
 	}
 
@@ -36,8 +37,7 @@ export async function api(request: Request, resource: string, data?: {}) {
 			status: 303,
 			headers: {
 				location: '/todos'
-			},
-			body: '' // TODO https://github.com/sveltejs/kit/issues/1047
+			}
 		};
 	}
 

packages/create-svelte/templates/default/src/routes/todos/index.json.ts

@@ -1,10 +1,11 @@
 import { api } from './_api';
 import type { RequestHandler } from '@sveltejs/kit';
+import type { Locals } from '$lib/types';
 
 // GET /todos.json
-export const get: RequestHandler = async (request) => {
-	// request.context.userid comes from src/hooks.js
-	const response = await api(request, `todos/${request.context.userid}`);
+export const get: RequestHandler<Locals> = async (request) => {
+	// request.locals.userid comes from src/hooks.js
+	const response = await api(request, `todos/${request.locals.userid}`);
 
 	if (response.status === 404) {
 		// user hasn't created a todo list.
@@ -16,8 +17,8 @@ export const get: RequestHandler = async (request) => {
 };
 
 // POST /todos.json
-export const post: RequestHandler = async (request) => {
-	const response = await api(request, `todos/${request.context.userid}`, {
+export const post: RequestHandler<Locals, FormData> = async (request) => {
+	const response = await api(request, `todos/${request.locals.userid}`, {
 		// because index.svelte posts a FormData object,
 		// request.body is _also_ a (readonly) FormData
 		// object, which allows us to get form data