docs: change all .js endings to .ts when having the TypeScript toggle enabled

[ivanhofer]

Describe the problem

When switching to the TypeScript mode in the docs

I would expect that all .js rererences were renamed to .ts but this isn't the case

Currently only the file name in the title of the code section changes to .ts.

Describe the proposed solution

All .js references should be renamed to .ts to be consistent and not to confuse people

Alternatives considered

No response

Importance

nice to have

Additional Information

The js is also part of some anchor links e.g. https://kit.svelte.dev/docs/routing#layout-layout-js
I think it is fine to leave the js there.

[vicentematus]

@dummdidumm I have a proposal for this.

As we can see one of the ways of dealing with typescript toggle on:

kit/sites/kit.svelte.dev/src/lib/docs/TSToggle.svelte

Lines 7 to 22 in c0612a8

	function toggle(checked) {
	try {
	document.documentElement.classList.toggle('prefers-ts', checked);
	localStorage.setItem('prefers-ts', checked);
	} catch (e) {
	// localStorage not available or we are on the server
	}
	}
	function prefers_ts() {
	try {
	return localStorage.getItem('prefers-ts') === 'true' ? true : false;
	} catch (e) {
	return false;
	}
	}

This will show the corresponding code block for the language selected (Typescript, Javascript) based on localStorage prefer-ts.

One of the proposals i have to deal with this is:

1. Modify the output of the rendered markdown file. For every <code> element make a conditional with regex that if it has a .ts or .js extension.
2. If it contains a .js or .ts extension, then render the code element with both available extensions as follows:

<code>+page <span class="js-version">.js</span> <span class="ts-version">.ts</span></code>

In that way we can reutilize the same function that shows or hides the js-version or ts-version of the code blocks.

The idea is to modify the parser and how it outputs the code element .Here we have parser for the code element tag renderer:

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

Lines 35 to 52 in c0612a8

	const default_renderer = {
	code(code, infostring, escaped) {
	const lang = (infostring || '').match(/\S*/)[0];
	code = code.replace(/\n$/, '') + '\n';
	if (!lang) {
	return '<pre><code>' + (escaped ? code : escape(code, true)) + '</code></pre>\n';
	}
	return (
	'<pre><code class="language-' +
	escape(lang, true) +
	'">' +
	(escaped ? code : escape(code, true)) +
	'</code></pre>\n'
	);
	},

Instead of creating duplicate markdown files for typescript, we deal with how the markdown renderer deal with this. What do you think?

[dummdidumm]

Makes sense! Do you want to open a PR with these changes?

[vicentematus]

That's great !! @dummdidumm yeah sure! can you assign me the issue please? 🙏

[vicentematus]

Just to update: i have found the exact code thats in charge of rendering the code element:

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

Lines 293 to 301 in c0612a8

	codespan: (text) => {
	return (
	'<code>' +
	text.replace(type_regex, (match, prefix, name) => {
	const link = `<a href="${type_links.get(name)}">${name}</a>`;
	return `${prefix || ''}${link}`;
	}) +
	'</code>'
	);

This would be the section where i'm gonna add the span element of the .js and .ts section. I dont know if accesibility is gonna be a problem for screen readers. But for the mean while we can fix it.

And the same would apply to the heading sections.

[ranile]

kit/documentation/docs/30-advanced/40-service-workers.md

Line 7 in 0f474c0

In SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker.ts`, `src/service-worker/index.js`, etc) it will be bundled and automatically registered. You can change the [location of your service worker](configuration#files) if you need to.

In SvelteKit, if you have a src/service-worker.js file (or src/service-worker.ts, src/service-worker/index.js, etc)

Where as the deployed docs (when toggled to typescript) say:

In SvelteKit, if you have a src/service-worker.ts file (or src/service-worker.ts, src/service-worker/index.js, etc)