Skip to content

fix: enable types in JS code blocks #1398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+1,121 −28
Draft

fix: enable types in JS code blocks #1398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03c62c9
fix
eltigerchino Jun 27, 2025
84dc9ea
separate higlighting
eltigerchino Jun 27, 2025
f84d388
separate
eltigerchino Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion apps/svelte.dev/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,20 @@
"yootils": "^0.3.1"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20241127.0",
"@cloudflare/workers-types": "^4.20250620.0",
"@resvg/resvg-js": "^2.6.2",
"@supabase/supabase-js": "^2.43.4",
"@sveltejs/adapter-cloudflare": "^7.0.4",
"@sveltejs/adapter-netlify": "^5.0.2",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/adapter-vercel": "^5.7.0",
"@sveltejs/enhanced-img": "^0.4.3",
"@sveltejs/kit": "^2.20.0",
"@sveltejs/site-kit": "workspace:*",
"@sveltejs/vite-plugin-svelte": "4.0.3",
"@types/cookie": "^0.6.0",
"@types/express": "^5.0.3",
"@types/node": "^20.14.2",
"browserslist": "^4.24.2",
"chokidar": "^4.0.1",
Expand Down
26 changes: 10 additions & 16 deletions apps/svelte.dev/src/lib/server/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ export const render_content = (
) => {
return render_content_markdown(filename, body, options, (filename, source) => {
// TODO these are copied from Svelte and SvelteKit - adjust for new filenames
const injected = [];

if (/(svelte)/.test(source) || filename.includes('typescript')) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was previously always being injected for any file that mentions 'svelte'. Instead, we can just reference the Svelte types in the Twoslash typescript options

injected.push(`// @filename: ambient.d.ts`, `/// <reference types="svelte" />`);
}
const injected: string[] = [];

if (filename.includes('svelte-compiler')) {
injected.push('// @esModuleInterop');
Expand All @@ -22,7 +18,7 @@ export const render_content = (
}

// Actions JSDoc examples are invalid. Too many errors, edge cases
// d.ts files are not properly supported right now, fix this later
// TODO: d.ts files are not properly supported right now, fix this later
if (filename.includes('svelte-action') || source.includes(' declare const ')) {
injected.push('// @noErrors');
}
Expand All @@ -31,10 +27,11 @@ export const render_content = (
injected.push('// @errors: 2304');
}

// twoslash doesn't recognise these as SvelteKit imports, so we need to
// explicitly reference the types in these instances
if (
source.includes('$app/') ||
source.includes('$service-worker') ||
source.includes('@sveltejs/kit/')
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to check for @sveltejs/kit/* because Twoslash can resolve those itself

source.includes('$service-worker')
) {
injected.push(`// @filename: ambient-kit.d.ts`, `/// <reference types="@sveltejs/kit" />`);
}
Expand All @@ -43,10 +40,11 @@ export const render_content = (
// TODO we're hardcoding static env vars that are used in code examples
// in the types, which isn't... totally ideal, but will do for now
injected.push(
`declare module '$env/dynamic/private' { export const env: Record<string, string> }`,
`declare module '$env/dynamic/public' { export const env: Record<string, string> }`,
`declare module '$env/static/private' { export const API_KEY: string }`,
`declare module '$env/static/public' { export const PUBLIC_BASE_URL: string }`
`declare module '$env/dynamic/private' { export const env: Record<string, string>; }`,
`declare module '$env/dynamic/public' { export const env: Record<string, string>; }`,
// TODO: detect when a snippet imports from $env/static then generate the types on the fly
`declare module '$env/static/private' { export const API_KEY: string; export const BYPASS_TOKEN: string; export const VERCEL_COMMIT_REF: string; }`,
`declare module '$env/static/public' { export const PUBLIC_BASE_URL: string; }`
);
}

Expand All @@ -71,10 +69,6 @@ export const render_content = (
injected.push('// @errors: 7006 7031');
}

if (filename.endsWith('10-configuration.md')) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no such file in the docs

injected.push('// @errors: 2307');
}

// another special case
if (source.includes('$lib/types')) {
injected.push(`declare module '$lib/types' { export interface User {} }`);
Expand Down
15 changes: 12 additions & 3 deletions packages/site-kit/src/lib/markdown/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,14 @@ export async function render_content_markdown(

if ((token.lang === 'js' || token.lang === 'ts') && check) {
const match = /((?:[\s\S]+)\/\/ ---cut---\n)?([\s\S]+)/.exec(source)!;
[, prelude = '// ---cut---\n', source] = match;
// we need to ensure that the source content is separated from the
// injected content by a '// @filename: ...' otherwise it will be
// interpreted as the same file and prevent types from working
[
,
prelude = `${source.includes('// @filename:') ? '' : '// @filename: dummy.' + token.lang}\n// ---cut---\n`,
source
] = match;

const banner = twoslashBanner?.(filename, source);
if (banner) prelude = '// @filename: injected.d.ts\n' + banner + '\n' + prelude;
Expand Down Expand Up @@ -757,7 +764,7 @@ async function syntax_highlight({
/** We need to stash code wrapped in `---` highlights, because otherwise TS will error on e.g. bad syntax, duplicate declarations */
const redactions: string[] = [];

const redacted = source.replace(/( {13}(?:[^ ][^]+?) {13})/g, (_, content) => {
let redacted = source.replace(/( {13}(?:[^ ][^]+?) {13})/g, (_, content) => {
redactions.push(content);
return ' '.repeat(content.length);
});
Expand All @@ -773,7 +780,9 @@ async function syntax_highlight({
compilerOptions: {
allowJs: true,
checkJs: true,
types: ['svelte', '@sveltejs/kit']
// we always include the Svelte types because it's easier
// than adding a reference when we detect a rune being used
types: ['node', 'svelte']
}
},
// by default, twoslash does not run on .js files, change that through this option
Expand Down
Loading
Loading