From 20fcc93d5aa7c3d86db85ef8323d2513a9860773 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 7 Dec 2024 12:11:48 +0100 Subject: [PATCH 1/5] Initial efforts --- packages/site-kit/package.json | 4 +- .../site-kit/src/lib/markdown/renderer.ts | 26 +++++----- pnpm-lock.yaml | 48 +++++++++++++++++++ 3 files changed, 65 insertions(+), 13 deletions(-) diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 84abf82b95..75cb2b3839 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -37,13 +37,15 @@ "@fontsource/eb-garamond": "^5.1.0", "@fontsource/fira-mono": "^5.1.0", "@fontsource/fira-sans": "^5.1.0", + "@hugokorte/twoslash-svelte": "^0.0.2", "@lezer/common": "^1.0.4", "@replit/codemirror-lang-svelte": "^6.0.0", "@shikijs/twoslash": "^1.22.0", "esm-env": "^1.0.0", "json5": "^2.2.3", "shiki": "^1.22.0", - "svelte-persisted-store": "^0.9.2" + "svelte-persisted-store": "^0.9.2", + "svelte2tsx": "^0.7.30" }, "devDependencies": { "@sveltejs/kit": "^2.8.0", diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index bd79475332..f4e0b15185 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -7,6 +7,7 @@ import ts from 'typescript'; import * as marked from 'marked'; import { codeToHtml, createCssVariablesTheme } from 'shiki'; import { transformerTwoslash } from '@shikijs/twoslash'; +import { createTwoslasher } from '@hugokorte/twoslash-svelte'; import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils'; interface SnippetOptions { @@ -262,7 +263,6 @@ export async function render_content_markdown( if (needs_controls) { html += ''; } - html += await syntax_highlight({ filename, language: token.lang, prelude, source, check }); if (converted) { @@ -662,6 +662,8 @@ function highlight_spans(content: string, classname: string) { .join('\n'); } +const twoslasherSvelte = createTwoslasher(); + async function syntax_highlight({ prelude, source, @@ -697,17 +699,17 @@ async function syntax_highlight({ html = await codeToHtml(prelude + redacted, { lang: 'ts', theme, - transformers: check - ? [ - transformerTwoslash({ - twoslashOptions: { - compilerOptions: { - types: ['svelte', '@sveltejs/kit'] - } - } - }) - ] - : [] + transformers: [ + transformerTwoslash({ + langs: ['svelte', 'js', 'ts'], + twoslasher: twoslasherSvelte, + twoslashOptions: { + compilerOptions: { + types: ['svelte', '@sveltejs/kit'] + } + } + }) + ] }); html = html.replace(/ {27,}/g, () => redactions.shift()!); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65b17938ae..dd34c03bdb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -455,6 +455,9 @@ importers: '@fontsource/fira-sans': specifier: ^5.1.0 version: 5.1.0 + '@hugokorte/twoslash-svelte': + specifier: ^0.0.2 + version: 0.0.2(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4) '@lezer/common': specifier: ^1.0.4 version: 1.2.2 @@ -476,6 +479,9 @@ importers: svelte-persisted-store: specifier: ^0.9.2 version: 0.9.4(svelte@5.1.11) + svelte2tsx: + specifier: ^0.7.30 + version: 0.7.30(svelte@5.1.11)(typescript@5.5.4) devDependencies: '@sveltejs/kit': specifier: ^2.8.0 @@ -932,6 +938,12 @@ packages: '@fontsource/fira-sans@5.1.0': resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==} + '@hugokorte/twoslash-svelte@0.0.2': + resolution: {integrity: sha512-QCQp+wNJgqIl2+hKnouqrqeGFBIrpsfE0lPgOUQ7sO/pjh4RI7jU8TMt6COHQxiFdkB+vrc9GxXOWIuCDRYGeg==} + peerDependencies: + svelte2tsx: '*' + typescript: '*' + '@img/sharp-darwin-arm64@0.33.4': resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==} engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} @@ -1657,6 +1669,12 @@ packages: '@vitest/utils@2.1.2': resolution: {integrity: sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==} + '@volar/language-core@2.4.10': + resolution: {integrity: sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==} + + '@volar/source-map@2.4.10': + resolution: {integrity: sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==} + '@webcontainer/api@1.1.9': resolution: {integrity: sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg==} @@ -2970,6 +2988,12 @@ packages: typescript: optional: true + svelte2tsx@0.7.30: + resolution: {integrity: sha512-sHXK/vw/sVJmFuPSq6zeKrtuZKvo0jJyEi8ybN0dfrqSYVvHu8zFbO0zQKAL8y/fYackYojH41EJGe6v8rd5fw==} + peerDependencies: + svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 + typescript: ^4.9.4 || ^5.0.0 + svelte2tsx@0.7.8: resolution: {integrity: sha512-ABK3RDFcy59AqAiU1N5Kxu1RnKrb1GDMrQjLgNgJfE8Q+coCKpjCAPtUVKQM2HnmuqeNWcT3NqfXbE+ZmN5Pow==} peerDependencies: @@ -3701,6 +3725,17 @@ snapshots: '@fontsource/fira-sans@5.1.0': {} + '@hugokorte/twoslash-svelte@0.0.2(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4)': + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + '@volar/language-core': 2.4.10 + svelte2tsx: 0.7.30(svelte@5.1.11)(typescript@5.5.4) + twoslash: 0.2.12(typescript@5.5.4) + twoslash-protocol: 0.2.12 + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + '@img/sharp-darwin-arm64@0.33.4': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.2 @@ -4559,6 +4594,12 @@ snapshots: loupe: 3.1.1 tinyrainbow: 1.2.0 + '@volar/language-core@2.4.10': + dependencies: + '@volar/source-map': 2.4.10 + + '@volar/source-map@2.4.10': {} + '@webcontainer/api@1.1.9': {} abbrev@1.1.1: {} @@ -5860,6 +5901,13 @@ snapshots: postcss: 8.4.45 typescript: 5.5.4 + svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4): + dependencies: + dedent-js: 1.0.1 + pascal-case: 3.1.2 + svelte: 5.1.11 + typescript: 5.5.4 + svelte2tsx@0.7.8(svelte@5.1.11)(typescript@5.5.4): dependencies: dedent-js: 1.0.1 From 2ef2e5d8240d24ea5f85bca6d9b3a47b085296b5 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 7 Dec 2024 12:16:26 +0100 Subject: [PATCH 2/5] Add back `check` condition --- .../site-kit/src/lib/markdown/renderer.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index f4e0b15185..4549318a2e 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -699,17 +699,19 @@ async function syntax_highlight({ html = await codeToHtml(prelude + redacted, { lang: 'ts', theme, - transformers: [ - transformerTwoslash({ - langs: ['svelte', 'js', 'ts'], - twoslasher: twoslasherSvelte, - twoslashOptions: { - compilerOptions: { - types: ['svelte', '@sveltejs/kit'] - } - } - }) - ] + transformers: check + ? [ + transformerTwoslash({ + langs: ['svelte', 'js', 'ts'], + twoslasher: twoslasherSvelte, + twoslashOptions: { + compilerOptions: { + types: ['svelte', '@sveltejs/kit'] + } + } + }) + ] + : [] }); html = html.replace(/ {27,}/g, () => redactions.shift()!); From b82cbab35628b73507ab7839cd0bf9c5465b38a9 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 7 Dec 2024 12:32:37 +0100 Subject: [PATCH 3/5] Move `svelte2tsx` to `svelte.dev` --- apps/svelte.dev/package.json | 1 + packages/site-kit/package.json | 3 +-- pnpm-lock.yaml | 18 ++++++------------ 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json index 54a05f92d9..5520a23909 100644 --- a/apps/svelte.dev/package.json +++ b/apps/svelte.dev/package.json @@ -42,6 +42,7 @@ "flru": "^1.0.2", "port-authority": "^2.0.1", "shiki": "^1.22.0", + "svelte2tsx": "^0.7.30", "topojson-client": "^3.1.0", "vitest": "^2.1.2", "ws": "^8.13.0", diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 75cb2b3839..ed1478f32f 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -44,8 +44,7 @@ "esm-env": "^1.0.0", "json5": "^2.2.3", "shiki": "^1.22.0", - "svelte-persisted-store": "^0.9.2", - "svelte2tsx": "^0.7.30" + "svelte-persisted-store": "^0.9.2" }, "devDependencies": { "@sveltejs/kit": "^2.8.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd34c03bdb..f8c6e53a4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: shiki: specifier: ^1.22.0 version: 1.22.0 + svelte2tsx: + specifier: ^0.7.30 + version: 0.7.30(svelte@5.3.0)(typescript@5.5.4) topojson-client: specifier: ^3.1.0 version: 3.1.0 @@ -479,9 +482,6 @@ importers: svelte-persisted-store: specifier: ^0.9.2 version: 0.9.4(svelte@5.1.11) - svelte2tsx: - specifier: ^0.7.30 - version: 0.7.30(svelte@5.1.11)(typescript@5.5.4) devDependencies: '@sveltejs/kit': specifier: ^2.8.0 @@ -2994,12 +2994,6 @@ packages: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - svelte2tsx@0.7.8: - resolution: {integrity: sha512-ABK3RDFcy59AqAiU1N5Kxu1RnKrb1GDMrQjLgNgJfE8Q+coCKpjCAPtUVKQM2HnmuqeNWcT3NqfXbE+ZmN5Pow==} - peerDependencies: - svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 - typescript: ^4.9.4 || ^5.0.0 - svelte@5.1.11: resolution: {integrity: sha512-XpPcUBKCg2c+L0nDTkv0ekc8LOHMzN328MNOeAHt4sRcX5AROU9tkqwL35VvE6srt8RpmnzsXBGDwyRB5TSbuw==} engines: {node: '>=18'} @@ -4399,7 +4393,7 @@ snapshots: sade: 1.8.1 semver: 7.6.2 svelte: 5.1.11 - svelte2tsx: 0.7.8(svelte@5.1.11)(typescript@5.5.4) + svelte2tsx: 0.7.30(svelte@5.1.11)(typescript@5.5.4) transitivePeerDependencies: - typescript @@ -5908,11 +5902,11 @@ snapshots: svelte: 5.1.11 typescript: 5.5.4 - svelte2tsx@0.7.8(svelte@5.1.11)(typescript@5.5.4): + svelte2tsx@0.7.30(svelte@5.3.0)(typescript@5.5.4): dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 5.1.11 + svelte: 5.3.0 typescript: 5.5.4 svelte@5.1.11: From 1666521908f7daa98fabaed897b984c84e7e571b Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 7 Dec 2024 12:35:55 +0100 Subject: [PATCH 4/5] Add `svelte2tsx` to `svelte.dev`'s `optimizeDeps` in `vite.config.ts` --- apps/svelte.dev/vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts index e1d4ffc832..e73a094470 100644 --- a/apps/svelte.dev/vite.config.ts +++ b/apps/svelte.dev/vite.config.ts @@ -71,7 +71,7 @@ const config: UserConfig = { } }, optimizeDeps: { - exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser'] + exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser', 'svelte2tsx'] }, ssr: { noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'], From 9dc4097c55b807f16a765e97b7ef702d8381662a Mon Sep 17 00:00:00 2001 From: hugos68 Date: Fri, 13 Dec 2024 23:47:48 +0100 Subject: [PATCH 5/5] This should fix it, but it doesn't? --- apps/svelte.dev/package.json | 1 - packages/site-kit/package.json | 2 +- .../site-kit/src/lib/markdown/renderer.ts | 4 ++-- pnpm-lock.yaml | 20 +++++-------------- 4 files changed, 8 insertions(+), 19 deletions(-) diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json index 5520a23909..54a05f92d9 100644 --- a/apps/svelte.dev/package.json +++ b/apps/svelte.dev/package.json @@ -42,7 +42,6 @@ "flru": "^1.0.2", "port-authority": "^2.0.1", "shiki": "^1.22.0", - "svelte2tsx": "^0.7.30", "topojson-client": "^3.1.0", "vitest": "^2.1.2", "ws": "^8.13.0", diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index ed1478f32f..de717af9ad 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -37,7 +37,7 @@ "@fontsource/eb-garamond": "^5.1.0", "@fontsource/fira-mono": "^5.1.0", "@fontsource/fira-sans": "^5.1.0", - "@hugokorte/twoslash-svelte": "^0.0.2", + "@hugokorte/twoslash-svelte": "^0.0.3", "@lezer/common": "^1.0.4", "@replit/codemirror-lang-svelte": "^6.0.0", "@shikijs/twoslash": "^1.22.0", diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index 4549318a2e..848e7d6b1c 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -686,7 +686,7 @@ async function syntax_highlight({ theme }) ); - } else if (language === 'js' || language === 'ts') { + } else if (['js', 'ts', 'svelte'].includes(language)) { /** We need to stash code wrapped in `---` highlights, because otherwise TS will error on e.g. bad syntax, duplicate declarations */ const redactions: string[] = []; @@ -697,7 +697,7 @@ async function syntax_highlight({ try { html = await codeToHtml(prelude + redacted, { - lang: 'ts', + lang: language === 'svelte' ? language : 'ts', theme, transformers: check ? [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8c6e53a4a..eaa9edf3cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,9 +92,6 @@ importers: shiki: specifier: ^1.22.0 version: 1.22.0 - svelte2tsx: - specifier: ^0.7.30 - version: 0.7.30(svelte@5.3.0)(typescript@5.5.4) topojson-client: specifier: ^3.1.0 version: 3.1.0 @@ -459,8 +456,8 @@ importers: specifier: ^5.1.0 version: 5.1.0 '@hugokorte/twoslash-svelte': - specifier: ^0.0.2 - version: 0.0.2(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4) + specifier: ^0.0.3 + version: 0.0.3(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4) '@lezer/common': specifier: ^1.0.4 version: 1.2.2 @@ -938,8 +935,8 @@ packages: '@fontsource/fira-sans@5.1.0': resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==} - '@hugokorte/twoslash-svelte@0.0.2': - resolution: {integrity: sha512-QCQp+wNJgqIl2+hKnouqrqeGFBIrpsfE0lPgOUQ7sO/pjh4RI7jU8TMt6COHQxiFdkB+vrc9GxXOWIuCDRYGeg==} + '@hugokorte/twoslash-svelte@0.0.3': + resolution: {integrity: sha512-bxV5ZIbUhlYLPaw2u6CAAkYNHDIQ08dcT5RUwChCM+ldiNU4U+QFzFEfks9kVlGtjHB6IG4paiYYxnoxX0uriQ==} peerDependencies: svelte2tsx: '*' typescript: '*' @@ -3719,7 +3716,7 @@ snapshots: '@fontsource/fira-sans@5.1.0': {} - '@hugokorte/twoslash-svelte@0.0.2(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4)': + '@hugokorte/twoslash-svelte@0.0.3(svelte2tsx@0.7.30(svelte@5.1.11)(typescript@5.5.4))(typescript@5.5.4)': dependencies: '@jridgewell/sourcemap-codec': 1.5.0 '@volar/language-core': 2.4.10 @@ -5902,13 +5899,6 @@ snapshots: svelte: 5.1.11 typescript: 5.5.4 - svelte2tsx@0.7.30(svelte@5.3.0)(typescript@5.5.4): - dependencies: - dedent-js: 1.0.1 - pascal-case: 3.1.2 - svelte: 5.3.0 - typescript: 5.5.4 - svelte@5.1.11: dependencies: '@ampproject/remapping': 2.3.0