feat: add vim mode to repl

Author: paoloricciuti

pnpm-lock.yaml

@@ -19,7 +19,7 @@
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.4.15",
     "@supabase/supabase-js": "^2.31.0",
-    "@sveltejs/repl": "0.5.0",
+    "@sveltejs/repl": "0.6.0",
     "cookie": "^0.5.0",
     "devalue": "^4.3.2",
     "do-not-zip": "^1.0.0",

sites/svelte.dev/package.json

@@ -1,18 +1,36 @@
 import { redirect } from '@sveltejs/kit';
 
+/**
+ * create a query params string from an object of query parameters
+ * @param {Record<string, string>} queries
+ * @returns {string}
+ */
+function add_query_params(queries) {
+	const query_array = [];
+	for (let query in queries) {
+		if (queries[query] !== null) {
+			query_array.push(`${query}=${queries[query]}`);
+		}
+	}
+	return query_array.length > 0 ? `?${query_array.join('&')}` : ``;
+}
+
 export function load({ url }) {
 	const query = url.searchParams;
 	const gist = query.get('gist');
 	const example = query.get('example');
 	const version = query.get('version');
+	const vim = query.get('vim');
 
 	// redirect to v2 REPL if appropriate
 	if (/^[^>]?[12]/.test(version)) {
 		throw redirect(302, `https://v2.svelte.dev/repl?${query}`);
 	}
 
 	const id = gist || example || 'hello-world';
-	const q = version ? `?version=${version}` : ``;
-
+	const q = add_query_params({
+		version,
+		vim
+	});
 	throw redirect(301, `/repl/${id}${q}`);
 }

sites/svelte.dev/src/routes/(authed)/repl/+page.js

@@ -0,0 +1,18 @@
+import { browser } from '$app/environment';
+
+export function load({ data, url }) {
+	// initialize vim with the search param
+	const vim_search_params = url.searchParams.get('vim');
+	let vim = vim_search_params !== null && vim_search_params !== 'false';
+	// when in the browser check if there's a local storage entry and eventually override
+	// vim if there's not a search params otherwise update the local storage
+	if (browser) {
+		const vim_local_storage = window.localStorage.getItem('svelte:vim-enabled');
+		if (vim_search_params !== null) {
+			window.localStorage.setItem('svelte:vim-enabled', vim.toString());
+		} else if (vim_local_storage) {
+			vim = vim_local_storage !== 'false';
+		}
+	}
+	return { ...data, vim };
+}

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

@@ -61,6 +61,8 @@
 			: `https://unpkg.com/svelte@${version}`;
 
 	$: relaxed = data.gist.relaxed || (data.user && data.user.id === data.gist.owner);
+
+	$: vim = data.vim;
 </script>
 
 <svelte:head>
@@ -87,6 +89,7 @@
 			bind:this={repl}
 			{svelteUrl}
 			{relaxed}
+			{vim}
 			injectedJS={mapbox_setup}
 			showModified
 			showAst