better rest parameters exercise

Author: Rich Harris

content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/README.md

@@ -1,5 +1,7 @@
 ---
 title: Rest parameters
+path: /how
+focus: /src/routes/[path]/+page.svelte
 ---
 
 To match an unknown number of path segments, use a `[...rest]` parameter, so named for its resemblance to [rest parameters in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
@@ -20,3 +22,5 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
 > ```
 >
 > Inside the `+page.server.js` file, `throw error(404)` inside `load`.
+
+Rest parameters do _not_ need to go at the end — a route like `/items/[...path]/edit` or `/items/[...path].json` is totally valid.

content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+__delete

content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte

@@ -4,20 +4,29 @@
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
 	$: depth = $page.params.path.split('/').filter(Boolean).length;
-
-	$: href =
-		depth === words.length
-			? '/'
-			: `/${words.slice(0, depth + 1).join('/')}`;
+	$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
 </script>
 
-<a {href}>{words[depth] ?? '?'}</a>
+<div class="flex">
+	{#each words.slice(0, depth) as word}
+		<p>{word}</p>
+	{/each}
+
+	<p><a href={next}>{words[depth] ?? '?'}</a></p>
+</div>
 
 <style>
-	:global(html),
-	:global(body) {
+	.flex {
+		display: flex;
 		height: 100%;
-		margin: 0;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	p {
+		margin: 0.5rem 0;
+		line-height: 1;
 	}
 
 	a {
@@ -26,6 +35,6 @@
 		height: 100%;
 		align-items: center;
 		justify-content: center;
-		font-size: 20vmin;
+		font-size: 4rem;
 	}
 </style>

content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/app-b/src/routes/[...path]/+page.svelte

@@ -4,20 +4,29 @@
 	let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
 
 	$: depth = $page.params.path.split('/').filter(Boolean).length;
-
-	$: href =
-		depth === words.length
-			? '/'
-			: `/${words.slice(0, depth + 1).join('/')}`;
+	$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
 </script>
 
-<a {href}>{words[depth] ?? '?'}</a>
+<div class="flex">
+	{#each words.slice(0, depth) as word}
+		<p>{word}</p>
+	{/each}
+
+	<p><a href={next}>{words[depth] ?? '?'}</a></p>
+</div>
 
 <style>
-	:global(html),
-	:global(body) {
+	.flex {
+		display: flex;
 		height: 100%;
-		margin: 0;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	p {
+		margin: 0.5rem 0;
+		line-height: 1;
 	}
 
 	a {
@@ -26,6 +35,6 @@
 		height: 100%;
 		align-items: center;
 		justify-content: center;
-		font-size: 20vmin;
+		font-size: 4rem;
 	}
 </style>

src/lib/client/adapters/webcontainer/index.js

@@ -119,8 +119,17 @@ export async function create(base, error, progress, logs) {
 				/** @type {import('$lib/types').Stub[]} */
 				const to_write = [];
 
+				const force_delete = [];
+
 				for (const stub of stubs) {
-					if (stub.type === 'file') {
+					if (stub.name.endsWith('/__delete')) {
+						force_delete.push(stub.name.slice(0, -9));
+					} else if (stub.type === 'file') {
+						if (stub.contents.startsWith('__delete')) {
+							force_delete.push(stub.name);
+							continue;
+						}
+
 						const current = /** @type {import('$lib/types').FileStub} */ (
 							current_stubs.get(stub.name)
 						);
@@ -138,9 +147,12 @@ export async function create(base, error, progress, logs) {
 
 				// Don't delete the node_modules folder when switching from one exercise to another
 				// where, as this crashes the dev server.
-				const to_delete = Array.from(current_stubs.keys()).filter(
-					(s) => !s.startsWith('/node_modules')
-				);
+				const to_delete = [
+					...Array.from(current_stubs.keys()).filter(
+						(s) => !s.startsWith('/node_modules')
+					),
+					...force_delete
+				];
 
 				current_stubs = stubs_to_map(stubs);
 

src/routes/tutorial/[slug]/filetree/Filetree.svelte

@@ -14,7 +14,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	const hidden = new Set(['__client.js', 'node_modules']);
+	const hidden = new Set(['__client.js', 'node_modules', '__delete']);
 
 	let modal_text = '';
 
@@ -122,6 +122,14 @@
 			dispatch('select', { name });
 		}
 	});
+
+	/** @param {import('$lib/types').Stub} file */
+	function is_deleted(file) {
+		if (file.type === 'directory') return `${file.name}/__delete` in exercise.a;
+		if (file.text) return file.contents.startsWith('__delete');
+
+		return false;
+	}
 </script>
 
 <ul
@@ -147,7 +155,7 @@
 			name: '',
 			basename: exercise.scope.name
 		}}
-		contents={$files.filter((file) => !hidden.has(file.basename))}
+		contents={$files.filter((file) => !hidden.has(file.basename) && !is_deleted(file))}
 	/>
 </ul>