fix(site-2): REPL component and minor fixes (#8616)

* Push

* Update deps

* Allow autocomplete on embed pages

* nit

* Remove unnecessary import

* Remove debug

* Update deps stiff

* Cleanup

* Remove prerender auto from repl page

* Use REPL next.4

sites/svelte.dev/package.json

@@ -17,10 +17,11 @@
 		"check:format": "prettier --check . --ignore-path .gitignore --plugin-search-dir=."
 	},
 	"dependencies": {
-		"@supabase/supabase-js": "^2.22.0",
+		"@jridgewell/sourcemap-codec": "^1.4.15",
-		"@sveltejs/repl": "^0.5.0-next.3",
+		"@supabase/supabase-js": "^2.24.0",
+		"@sveltejs/repl": "0.5.0-next.4",
 		"cookie": "^0.5.0",
-		"devalue": "^4.3.1",
+		"devalue": "^4.3.2",
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.31",
 		"flru": "^1.0.2"
@@ -28,21 +29,21 @@
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.0",
-		"@sveltejs/kit": "^1.18.0",
+		"@sveltejs/kit": "^1.20.0",
 		"@sveltejs/site-kit": "^5.2.1",
-		"@sveltejs/vite-plugin-svelte": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^2.4.1",
 		"@types/marked": "^5.0.0",
-		"@types/node": "^20.2.1",
+		"@types/node": "^20.2.5",
 		"@types/prettier": "^2.7.2",
 		"degit": "^2.8.4",
-		"dotenv": "^16.0.3",
+		"dotenv": "^16.1.0",
 		"jimp": "^0.22.8",
 		"magic-string": "^0.30.0",
-		"marked": "^5.0.2",
+		"marked": "^5.0.3",
 		"node-fetch": "^3.3.1",
 		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.0",
+		"prettier-plugin-svelte": "^2.10.1",
-		"rollup": "^3.22.0",
+		"rollup": "^3.23.0",
 		"rollup-plugin-dts": "^5.3.0",
 		"sass": "^1.62.1",
 		"satori": "^0.9.1",
@@ -51,12 +52,12 @@
 		"shiki": "^0.14.2",
 		"shiki-twoslash": "^3.1.2",
 		"svelte": "workspace:*",
-		"svelte-check": "^3.3.2",
+		"svelte-check": "^3.4.3",
-		"svelte-preprocess": "^5.0.3",
+		"svelte-preprocess": "^5.0.4",
 		"tiny-glob": "^0.2.9",
 		"ts-morph": "^18.0.0",
 		"typescript": "^5.0.4",
-		"vite": "4.3.8",
+		"vite": "^4.3.9",
 		"vite-imagetools": "^5.0.4"
 	}
 }

sites/svelte.dev/src/lib/components/ReplWidget.svelte

@@ -84,5 +84,12 @@
 </script>
 
 {#if browser}
-	<Repl bind:this={repl} {svelteUrl} embedded relaxed previewTheme={$theme.current} />
+	<Repl
+		bind:this={repl}
+		autocomplete={embedded}
+		{svelteUrl}
+		embedded
+		relaxed
+		previewTheme={$theme.current}
+	/>
 {/if}

sites/svelte.dev/src/routes/(authed)/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { setContext } from 'svelte';
 	import { invalidate } from '$app/navigation';
+	import { setContext } from 'svelte';
 
 	setContext('app', {
 		login: () => {

sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte

@@ -41,7 +41,7 @@
 	});
 
 	afterNavigate(() => {
-		repl.set({
+		repl?.set({
 			files: data.gist.components
 		});
 	});

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <svelte:head>
-	<title>{data.page.title} • Docs • Svelte</title>
+	<title>{data.page?.title} • Docs • Svelte</title>
 
 	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
 	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
@@ -36,6 +36,7 @@
 <div class="controls">
 	<div>
 		<span class:faded={!prev}>previous</span>
+
 		{#if prev}
 			<a href={prev.path}>{prev.title}</a>
 		{/if}

sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte

@@ -80,8 +80,9 @@
 
 	let completed = false;
 
+	/** @param {import('svelte').ComponentEvents<Repl>['change']} event */
 	function handle_change(event) {
-		completed = event.detail.components.every((file, i) => {
+		completed = event.detail.files.every((file, i) => {
 			const expected = data.tutorial.complete[i] && clone(data.tutorial.complete[i]);
 			return (
 				expected &&