From c3ce9751f4bf9008de62d8548cccc7ea6cd0cf08 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 1 Oct 2024 12:33:58 +0200
Subject: [PATCH] fix: make TS the default without JS

It's the default when JS is enabled, by checking the checkboxes on startup. This can cause noticeable flickering on low-powered devices because the JS view is visible first. This makes the TS view visible by default without JS, causing less flickering for the majority of people (because they'll prefer TS)
---
 apps/svelte.dev/src/app.html                  |  4 +--
 .../site-kit/src/lib/components/Text.svelte   | 28 +++++++++----------
 .../site-kit/src/lib/markdown/renderer.ts     |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index 4fcb83027..49c4a44e6 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -59,8 +59,8 @@
 				}
 			}
 
-			if (localStorage.getItem('svelte:prefers-ts') !== 'false') {
-				for (const node of document.querySelectorAll('.ts-toggle')) {
+			if (localStorage.getItem('svelte:prefers-ts') === 'false') {
+				for (const node of document.querySelectorAll('.js-toggle')) {
 					node.checked = true;
 				}
 			}
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 089c62b9a..30b34e896 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -11,17 +11,17 @@
 	afterNavigate(update);
 
 	function update() {
-		const inputs = container.querySelectorAll('.ts-toggle') as NodeListOf<HTMLInputElement>;
+		const inputs = container.querySelectorAll('.js-toggle') as NodeListOf<HTMLInputElement>;
 
 		for (const input of inputs) {
-			input.checked = $prefers_ts;
+			input.checked = !$prefers_ts;
 		}
 	}
 
 	function toggle(e: Event) {
-		if ((e.target as HTMLElement).classList.contains('ts-toggle')) {
+		if ((e.target as HTMLElement).classList.contains('js-toggle')) {
 			const input = e.target as HTMLInputElement;
-			$prefers_ts = input.checked;
+			$prefers_ts = !input.checked;
 			fix_position(input, update);
 		}
 	}
@@ -32,7 +32,7 @@
 				.composedPath()
 				.find((node) => (node as HTMLElement).classList.contains('code-block')) as HTMLElement;
 
-			const ts = !!parent.querySelector('.ts-toggle:checked');
+			const ts = !parent.querySelector('.js-toggle:checked');
 			const code = parent.querySelector(`pre:${ts ? 'last' : 'first'}-of-type code`) as HTMLElement;
 
 			let result = '';
@@ -132,13 +132,13 @@
 					}
 				}
 
-				&:has(.ts-toggle:checked) {
-					.filename[data-ext='.js']::after {
-						content: '.ts';
+				&:has(.js-toggle:checked) {
+					.filename[data-ext='.ts']::after {
+						content: '.js';
 					}
 				}
 
-				.ts-toggle {
+				.js-toggle {
 					appearance: none;
 					display: flex;
 					align-items: center;
@@ -160,21 +160,21 @@
 
 					&::before {
 						content: 'JS';
+						opacity: 0.3;
 					}
 
 					&::after {
 						content: 'TS';
 						border-left: none;
-						opacity: 0.3;
 					}
 
 					&:checked {
 						&::before {
-							opacity: 0.3;
+							opacity: 1;
 						}
 
 						&::after {
-							opacity: 1;
+							opacity: 0.3;
 						}
 					}
 				}
@@ -236,11 +236,11 @@
 				}
 			}
 
-			&:has(.ts-toggle:checked) pre:first-of-type {
+			&:has(.js-toggle:not(:checked)) pre:first-of-type {
 				display: none;
 			}
 
-			&:has(.ts-toggle:not(:checked)) pre:last-of-type {
+			&:has(.js-toggle:checked) pre:last-of-type {
 				display: none;
 			}
 
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 6c2309a3b..5b7643646 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -171,7 +171,7 @@ export async function render_content_markdown(
 			}
 
 			if (converted) {
-				html += `<input class="ts-toggle" title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
+				html += `<input class="js-toggle" title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
 			}
 
 			if (options.copy) {