From 61e083c29273ac1d7aba80816938bf2351c1a0d6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 11 Sep 2024 21:59:03 +0200
Subject: [PATCH] feat: TypeScript/JavaScript toggle on files itself

More obvious how to switch. Also gives room for a "show Svelte 4 contents" toogle
---
 .../06-transitions-and-animations.md          |  3 +
 .../src/routes/blog/[slug]/+page.svelte       |  4 +-
 .../src/routes/docs/[...path]/+page.svelte    |  4 +-
 packages/site-kit/src/lib/actions/index.ts    |  1 +
 .../site-kit/src/lib/actions/ts-js-select.ts  | 45 ++++++++++++++
 .../site-kit/src/lib/docs/DocsContents.svelte |  2 +-
 .../site-kit/src/lib/docs/TsJsSelect.svelte   | 61 +++++++++++++++++++
 7 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 packages/site-kit/src/lib/actions/ts-js-select.ts
 create mode 100644 packages/site-kit/src/lib/docs/TsJsSelect.svelte

diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md
index 8163d96a6e..753c07e86a 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md
@@ -102,6 +102,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { elasticOut } from 'svelte/easing';
 
@@ -345,6 +346,7 @@ The function is called repeatedly _before_ the animation begins, with different
 <!-- TODO: Types -->
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
@@ -378,6 +380,7 @@ A custom animation function can also return a `tick` function, which is called _
 > If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 204f8ecd7f..f022208fbc 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
+	import { copy_code_descendants, ts_js_select } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
@@ -21,7 +21,7 @@
 </svelte:head>
 
 <div class="content">
-	<article class="post listify text" use:copy_code_descendants>
+	<article class="post listify text" use:ts_js_select use:copy_code_descendants>
 		<h1>{data.title}</h1>
 		<p class="standfirst">{data.description}</p>
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 6690626939..daac75b2bd 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Icon } from '@sveltejs/site-kit/components';
-	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
+	import { copy_code_descendants, ts_js_select } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	let { data } = $props();
@@ -19,7 +19,7 @@
 	<meta name="Description" content="{data.document.metadata.title} • Svelte documentation" />
 </svelte:head>
 
-<div class="text" id="docs-content" use:copy_code_descendants>
+<div class="text" id="docs-content" use:ts_js_select use:copy_code_descendants>
 	<a
 		class="edit"
 		href="https://github.com/sveltejs/svelte.dev/edit/main/apps/svelte.dev/content/{data.document
diff --git a/packages/site-kit/src/lib/actions/index.ts b/packages/site-kit/src/lib/actions/index.ts
index 65c61df457..b96735f613 100644
--- a/packages/site-kit/src/lib/actions/index.ts
+++ b/packages/site-kit/src/lib/actions/index.ts
@@ -3,3 +3,4 @@ export { copy_code_descendants } from './copy-code-descendants';
 export { focus_outside } from './focus-outside';
 export { focusable_children, trap } from './focus';
 export { root_scroll } from './root-scroll';
+export { ts_js_select } from './ts-js-select';
diff --git a/packages/site-kit/src/lib/actions/ts-js-select.ts b/packages/site-kit/src/lib/actions/ts-js-select.ts
new file mode 100644
index 0000000000..929ecd6af9
--- /dev/null
+++ b/packages/site-kit/src/lib/actions/ts-js-select.ts
@@ -0,0 +1,45 @@
+import { page } from '$app/stores';
+import { mount, unmount } from 'svelte';
+import TsJsSelect from '../docs/TsJsSelect.svelte';
+
+const map = new WeakMap();
+
+export function ts_js_select(node: HTMLElement) {
+	let blocks: Element[];
+
+	function update() {
+		blocks = [
+			...node.querySelectorAll('div.ts-version'),
+			...node.querySelectorAll('div.js-version')
+		];
+
+		// Add a select to each code block
+		for (const block of blocks) {
+			map.set(
+				block,
+				mount(TsJsSelect, {
+					target: block
+				})
+			);
+		}
+	}
+
+	function destroy() {
+		for (const block of blocks) {
+			const component = map.get(block);
+			if (component) unmount(component);
+			map.delete(block);
+		}
+	}
+
+	// Page changed. Update again
+	const unsubscribe = page.subscribe(update);
+
+	return {
+		update,
+		destroy() {
+			destroy();
+			unsubscribe();
+		}
+	};
+}
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 86fa772799..c6e789492f 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -8,7 +8,7 @@
 		show_ts_toggle?: boolean;
 	}
 
-	let { contents, show_ts_toggle = true }: Props = $props();
+	let { contents, show_ts_toggle = false }: Props = $props();
 </script>
 
 <nav aria-label="Docs">
diff --git a/packages/site-kit/src/lib/docs/TsJsSelect.svelte b/packages/site-kit/src/lib/docs/TsJsSelect.svelte
new file mode 100644
index 0000000000..fd29ff5ddf
--- /dev/null
+++ b/packages/site-kit/src/lib/docs/TsJsSelect.svelte
@@ -0,0 +1,61 @@
+<script module>
+	import { tick } from 'svelte';
+	import { persisted } from 'svelte-persisted-store';
+	import { browser } from '$app/environment';
+
+	const prefers_ts = persisted('svelte:prefers-ts', true);
+
+	if (browser) {
+		prefers_ts.subscribe((ts) => {
+			document.body.classList.toggle('prefers-ts', ts);
+		});
+	}
+</script>
+
+<script lang="ts">
+	async function onchange(e: Event) {
+		const target = e.target as HTMLSelectElement;
+		const is_ts_version = target.parentElement!.classList.contains('ts-version');
+		const use_ts = target.value === 'TypeScript';
+		prefers_ts.set(use_ts);
+
+		await tick();
+
+		// Focus the select that is now visible
+		let prev: HTMLSelectElement | null = null;
+		for (const select of document.querySelectorAll<HTMLSelectElement>('select.ts-js-select')) {
+			if (use_ts && prev === target && !is_ts_version) {
+				select.focus();
+				break;
+			} else if (!use_ts && select === target && is_ts_version) {
+				prev!.focus();
+				break;
+			}
+
+			prev = select;
+		}
+	}
+</script>
+
+<select class="ts-js-select" value={$prefers_ts ? 'TypeScript' : 'JavaScript'} {onchange}>
+	<option>TypeScript</option>
+	<option>JavaScript</option>
+</select>
+
+<style>
+	:global(.code-block) select {
+		top: 6px;
+		position: absolute;
+		right: 4rem;
+		font-size: var(--sk-text-xs);
+		padding: 0.25rem 0.5rem;
+		border: none;
+		border-radius: 4px;
+		background-color: var(--sk-back-4);
+		color: var(--sk-text-2);
+		&:hover {
+			background-color: var(--sk-back-2);
+			cursor: pointer;
+		}
+	}
+</style>