docs: fix js and ts extension when TSToggle is active (#9486)

* docs: fix js and ts extension when TSToggle is active

* remove inline-flex

* simplify

* simplify

* exclude certain files/patterns

* deduplicate

* exclude .d.ts files

* simplify

---------

Co-authored-by: Rich Harris <[email protected]>

Author: vicentematus

documentation/docs/10-getting-started/30-project-structure.md

@@ -54,9 +54,9 @@ The `src` directory contains the meat of your project. Everything except `src/ro
 - `hooks.server.js` contains your server [hooks](/docs/hooks)
 - `service-worker.js` contains your [service worker](/docs/service-workers)
 
-You can use `.ts` files instead of `.js` files, if using TypeScript.
+(Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project. You can switch between JavaScript and TypeScript in the documentation using the toggle at the bottom of this page.)
 
-If you added [Vitest](https://vitest.dev) when you set up your project, your unit tests will live in the `src` directory with a `.test.js` (or `.test.ts`) extension.
+If you added [Vitest](https://vitest.dev) when you set up your project, your unit tests will live in the `src` directory with a `.test.js` extension.
 
 ### static
 

documentation/docs/20-core-concepts/10-routing.md

@@ -46,7 +46,7 @@ A `+page.svelte` component defines a page of your app. By default, pages are ren
 
 ### +page.js
 
-Often, a page will need to load some data before it can be rendered. For this, we add a `+page.js` (or `+page.ts`, if you're TypeScript-inclined) module that exports a `load` function:
+Often, a page will need to load some data before it can be rendered. For this, we add a `+page.js` module that exports a `load` function:
 
 ```js
 /// file: src/routes/blog/[slug]/+page.js
@@ -248,7 +248,7 @@ Like `+layout.js`, `+layout.server.js` can export [page options](page-options) 
 
 ## +server
 
-As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file (or `+server.ts`) exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, and `OPTIONS` that take a `RequestEvent` argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
+As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, and `OPTIONS` that take a `RequestEvent` argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
 
 For example we could create an `/api/random-number` route with a `GET` handler:
 

documentation/docs/20-core-concepts/20-load.md

@@ -6,7 +6,7 @@ Before a [`+page.svelte`](routing#page-page-svelte) component (and its containin
 
 ## Page data
 
-A `+page.svelte` file can have a sibling `+page.js` (or `+page.ts`) that exports a `load` function, the return value of which is available to the page via the `data` prop:
+A `+page.svelte` file can have a sibling `+page.js` that exports a `load` function, the return value of which is available to the page via the `data` prop:
 
 ```js
 /// file: src/routes/blog/[slug]/+page.js

sites/kit.svelte.dev/src/app.html

@@ -24,7 +24,7 @@
 				display: none;
 			}
 			.prefers-ts .ts-version {
-				display: block;
+				display: inline;
 			}
 			.no-js .ts-toggle {
 				display: none;

sites/kit.svelte.dev/src/lib/docs/server/index.js

@@ -56,12 +56,23 @@ modules.forEach((module) => {
 		type_links.set(type.name, link);
 	});
 });
+
 /** @param {string} html */
 function replace_blank_lines(html) {
 	// preserve blank lines in output (maybe there's a more correct way to do this?)
 	return html.replaceAll(/<div class='line'>(&nbsp;)?<\/div>/g, '<div class="line">\n</div>');
 }
 
+function dynamic_extensions(text) {
+	if (text === 'svelte.config.js') return text;
+
+	return text.replace(/^(\S+)\.(js|ts)$/, (match, $1) => {
+		if (match.endsWith('.d.ts')) return match;
+		if ($1 === 'svelte.config') return match;
+		return `${$1}<span class="js-version">.js</span><span class="ts-version">.ts</span>`;
+	});
+}
+
 /**
  * @param {string} file
  */
@@ -307,7 +318,7 @@ export async function read_file(file) {
 		codespan: (text) => {
 			return (
 				'<code>' +
-				text.replace(type_regex, (match, prefix, name) => {
+				dynamic_extensions(text).replace(type_regex, (match, prefix, name) => {
 					const link = `<a href="${type_links.get(name)}">${name}</a>`;
 					return `${prefix || ''}${link}`;
 				}) +
@@ -385,7 +396,8 @@ function parse({ file, body, code, codespan }) {
 				throw new Error(`Unexpected <h${level}> in ${file}`);
 			}
 
-			return `<h${level} id="${slug}">${html}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`;
+			return `<h${level} id="${slug}">${dynamic_extensions(html)}
+				<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`;
 		},
 		code: (source, language) => code(source, language, current),
 		codespan