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 pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy