diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json index 2cfa8e1336..febfe8548f 100644 --- a/apps/svelte.dev/package.json +++ b/apps/svelte.dev/package.json @@ -21,7 +21,6 @@ "@lezer/javascript": "^1.4.7", "@lezer/lr": "^1.3.10", "@rich_harris/svelte-split-pane": "^2.0.0", - "@shikijs/twoslash": "^1.22.0", "@sveltejs/amp": "^1.1.4", "@sveltejs/repl": "workspace:*", "@testing-library/dom": "^10.4.0", @@ -41,7 +40,6 @@ "flexsearch": "^0.7.43", "flru": "^1.0.2", "port-authority": "^2.0.1", - "shiki": "^1.22.0", "topojson-client": "^3.1.0", "vitest": "^2.1.9", "ws": "^8.18.0", diff --git a/apps/svelte.dev/vite.config.ts b/apps/svelte.dev/vite.config.ts index ba222b1ffd..197ee79ab5 100644 --- a/apps/svelte.dev/vite.config.ts +++ b/apps/svelte.dev/vite.config.ts @@ -59,7 +59,20 @@ const config: UserConfig = { } }, build: { - cssMinify: 'lightningcss' + cssMinify: 'lightningcss', + rollupOptions: { + output: { + banner: (chunk) => { + // this monstrosity is required for twoslash (which uses `require`) to work during prerendering. + // it is brittle and may not work in perpetuity but i'm not sure what a better solution would be + if (chunk.type === 'chunk' && chunk.name === 'renderer') { + return `import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);`; + } + + return ''; + } + } + } }, server: { fs: { allow: ['../../packages', '../../../KIT/kit/packages/kit'] }, @@ -74,8 +87,7 @@ const config: UserConfig = { exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser'] }, ssr: { - noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'], - external: ['shiki', '@shikijs/twoslash'] + noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'] }, worker: { format: 'es' diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 98e0fab722..37cdab652c 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -38,6 +38,7 @@ "@fontsource/fira-sans": "^5.1.0", "@lezer/common": "^1.0.4", "@replit/codemirror-lang-svelte": "^6.0.0", + "@shikijs/langs": "^3.2.1", "@shikijs/twoslash": "^3.2.1", "esm-env": "^1.0.0", "json5": "^2.2.3", diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index c453ed2b6c..3190094eed 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -5,7 +5,9 @@ import process from 'node:process'; import path from 'node:path'; import ts from 'typescript'; import * as marked from 'marked'; -import { codeToHtml, createCssVariablesTheme } from 'shiki'; +import { createHighlighterCore } from 'shiki/core'; +import { createOnigurumaEngine } from 'shiki/engine/oniguruma'; +import { createCssVariablesTheme } from 'shiki'; import { transformerTwoslash } from '@shikijs/twoslash'; import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils'; @@ -43,6 +45,20 @@ if (!fs.existsSync(original_file)) { hash_graph(hash, original_file); const digest = hash.digest().toString('base64').replace(/\//g, '-'); +const highlighter = await createHighlighterCore({ + themes: [], + langs: [ + import('@shikijs/langs/javascript'), + import('@shikijs/langs/typescript'), + import('@shikijs/langs/html'), + import('@shikijs/langs/css'), + import('@shikijs/langs/bash'), + import('@shikijs/langs/yaml'), + import('@shikijs/langs/svelte') + ], + engine: createOnigurumaEngine(import('shiki/wasm')) +}); + /** * Utility function to work with code snippet caching. * @@ -722,7 +738,7 @@ async function syntax_highlight({ if (/^(dts|yaml|yml)/.test(language)) { html = replace_blank_lines( - await codeToHtml(source, { + highlighter.codeToHtml(source, { lang: language === 'dts' ? 'ts' : language, theme }) @@ -737,7 +753,7 @@ async function syntax_highlight({ }); try { - html = await codeToHtml(prelude + redacted, { + html = highlighter.codeToHtml(prelude + redacted, { lang: language, theme, transformers: check @@ -833,7 +849,7 @@ async function syntax_highlight({ html = replace_blank_lines(html); } else { - const highlighted = await codeToHtml(source, { + const highlighted = highlighter.codeToHtml(source, { lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP], theme }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 96b73e5354..cb6412a4b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,9 +29,6 @@ importers: '@rich_harris/svelte-split-pane': specifier: ^2.0.0 version: 2.0.0(svelte@5.23.0) - '@shikijs/twoslash': - specifier: ^1.22.0 - version: 1.22.0(typescript@5.5.4) '@sveltejs/amp': specifier: ^1.1.4 version: 1.1.4(@sveltejs/kit@2.20.0(@sveltejs/vite-plugin-svelte@4.0.3(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.23.0)(vite@5.4.11(@types/node@20.14.2)(lightningcss@1.25.1))) @@ -89,9 +86,6 @@ importers: port-authority: specifier: ^2.0.1 version: 2.0.1 - shiki: - specifier: ^1.22.0 - version: 1.22.0 topojson-client: specifier: ^3.1.0 version: 3.1.0 @@ -388,6 +382,9 @@ importers: '@replit/codemirror-lang-svelte': specifier: ^6.0.0 version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.35.3))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.3)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1) + '@shikijs/langs': + specifier: ^3.2.1 + version: 3.2.1 '@shikijs/twoslash': specifier: ^3.2.1 version: 3.2.1(typescript@5.5.4) @@ -1469,21 +1466,12 @@ packages: cpu: [x64] os: [win32] - '@shikijs/core@1.22.0': - resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==} - '@shikijs/core@3.2.1': resolution: {integrity: sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==} - '@shikijs/engine-javascript@1.22.0': - resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==} - '@shikijs/engine-javascript@3.2.1': resolution: {integrity: sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==} - '@shikijs/engine-oniguruma@1.22.0': - resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==} - '@shikijs/engine-oniguruma@3.2.1': resolution: {integrity: sha512-wZZAkayEn6qu2+YjenEoFqj0OyQI64EWsNR6/71d1EkG4sxEOFooowKivsWPpaWNBu3sxAG+zPz5kzBL/SsreQ==} @@ -1493,26 +1481,17 @@ packages: '@shikijs/themes@3.2.1': resolution: {integrity: sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ==} - '@shikijs/twoslash@1.22.0': - resolution: {integrity: sha512-r5F/x4GTh18XzhAREehgT9lCDFZlISBSIsOFZQQaqjiOLG81PIqJN1I1D6XY58UN9OJt+3mffuKq19K4FOJKJA==} - '@shikijs/twoslash@3.2.1': resolution: {integrity: sha512-2ZiL9xXY8JRXHG5BdJXE9KoIeSsyH9/yK+YTN90/SUIKkq7Nf5dWqXp5wJ6+4SL0FQO8mq2HUutwqU+gamOgOA==} peerDependencies: typescript: '>=5.5.0' - '@shikijs/types@1.22.0': - resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==} - '@shikijs/types@3.2.1': resolution: {integrity: sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==} '@shikijs/vscode-textmate@10.0.2': resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} - '@shikijs/vscode-textmate@9.3.0': - resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==} - '@shuding/opentype.js@1.4.0-beta.0': resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==} engines: {node: '>= 8.0.0'} @@ -1678,11 +1657,6 @@ packages: '@types/ws@8.5.10': resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} - '@typescript/vfs@1.6.0': - resolution: {integrity: sha512-hvJUjNVeBMp77qPINuUvYXj4FyWeeMMKZkxEATEU3hqBAQ7qdTBCUFT7Sp0Zu0faeEtFf+ldXxMEDr/bk73ISg==} - peerDependencies: - typescript: '*' - '@typescript/vfs@1.6.1': resolution: {integrity: sha512-JwoxboBh7Oz1v38tPbkrZ62ZXNHAk9bJ7c9x0eI5zBfBnBYGhURdbnh7Z4smN/MV48Y5OCcZb58n972UtbazsA==} peerDependencies: @@ -2283,9 +2257,6 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} - hast-util-to-html@9.0.3: - resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==} - hast-util-to-html@9.0.5: resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} @@ -2624,9 +2595,6 @@ packages: oniguruma-to-es@4.1.0: resolution: {integrity: sha512-SNwG909cSLo4vPyyPbU/VJkEc9WOXqu2ycBlfd1UCXLqk1IijcQktSBb2yRQ2UFPsDhpkaf+C1dtT3PkLK/yWA==} - oniguruma-to-js@0.4.3: - resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==} - os-tmpdir@1.0.2: resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==} engines: {node: '>=0.10.0'} @@ -2765,9 +2733,6 @@ packages: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - property-information@6.5.0: - resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} - property-information@7.0.0: resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==} @@ -2811,9 +2776,6 @@ packages: regex-utilities@2.3.0: resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} - regex@4.3.3: - resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==} - regex@6.0.1: resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} @@ -2887,9 +2849,6 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} - shiki@1.22.0: - resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==} - shiki@3.2.1: resolution: {integrity: sha512-VML/2o1/KGYkEf/stJJ+s9Ypn7jUKQPomGLGYso4JJFMFxVDyPNsjsI3MB3KLjlMOeH44gyaPdXC6rik2WXvUQ==} @@ -3113,17 +3072,9 @@ packages: engines: {node: '>=18.0.0'} hasBin: true - twoslash-protocol@0.2.12: - resolution: {integrity: sha512-5qZLXVYfZ9ABdjqbvPc4RWMr7PrpPaaDSeaYY55vl/w1j6H6kzsWK/urAEIXlzYlyrFmyz1UbwIt+AA0ck+wbg==} - twoslash-protocol@0.3.1: resolution: {integrity: sha512-BMePTL9OkuNISSyyMclBBhV2s9++DiOCyhhCoV5Kaht6eaWLwVjCCUJHY33eZJPsyKeZYS8Wzz0h+XI01VohVw==} - twoslash@0.2.12: - resolution: {integrity: sha512-tEHPASMqi7kqwfJbkk7hc/4EhlrKCSLcur+TcvYki3vhIfaRMXnXjaYFgXpoZRbT6GdprD4tGuVBEmTpUgLBsw==} - peerDependencies: - typescript: '*' - twoslash@0.3.1: resolution: {integrity: sha512-OGqMTGvqXTcb92YQdwGfEdK0nZJA64Aj/ChLOelbl3TfYch2IoBST0Yx4C0LQ7Lzyqm9RpgcpgDxeXQIz4p2Kg==} peerDependencies: @@ -4330,15 +4281,6 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.21.2': optional: true - '@shikijs/core@1.22.0': - dependencies: - '@shikijs/engine-javascript': 1.22.0 - '@shikijs/engine-oniguruma': 1.22.0 - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 - '@types/hast': 3.0.4 - hast-util-to-html: 9.0.3 - '@shikijs/core@3.2.1': dependencies: '@shikijs/types': 3.2.1 @@ -4346,23 +4288,12 @@ snapshots: '@types/hast': 3.0.4 hast-util-to-html: 9.0.5 - '@shikijs/engine-javascript@1.22.0': - dependencies: - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 - oniguruma-to-js: 0.4.3 - '@shikijs/engine-javascript@3.2.1': dependencies: '@shikijs/types': 3.2.1 '@shikijs/vscode-textmate': 10.0.2 oniguruma-to-es: 4.1.0 - '@shikijs/engine-oniguruma@1.22.0': - dependencies: - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 - '@shikijs/engine-oniguruma@3.2.1': dependencies: '@shikijs/types': 3.2.1 @@ -4376,15 +4307,6 @@ snapshots: dependencies: '@shikijs/types': 3.2.1 - '@shikijs/twoslash@1.22.0(typescript@5.5.4)': - dependencies: - '@shikijs/core': 1.22.0 - '@shikijs/types': 1.22.0 - twoslash: 0.2.12(typescript@5.5.4) - transitivePeerDependencies: - - supports-color - - typescript - '@shikijs/twoslash@3.2.1(typescript@5.5.4)': dependencies: '@shikijs/core': 3.2.1 @@ -4394,11 +4316,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@shikijs/types@1.22.0': - dependencies: - '@shikijs/vscode-textmate': 9.3.0 - '@types/hast': 3.0.4 - '@shikijs/types@3.2.1': dependencies: '@shikijs/vscode-textmate': 10.0.2 @@ -4406,8 +4323,6 @@ snapshots: '@shikijs/vscode-textmate@10.0.2': {} - '@shikijs/vscode-textmate@9.3.0': {} - '@shuding/opentype.js@1.4.0-beta.0': dependencies: fflate: 0.7.4 @@ -4646,13 +4561,6 @@ snapshots: dependencies: '@types/node': 20.14.2 - '@typescript/vfs@1.6.0(typescript@5.5.4)': - dependencies: - debug: 4.4.0 - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript/vfs@1.6.1(typescript@5.5.4)': dependencies: debug: 4.4.0 @@ -5251,20 +5159,6 @@ snapshots: has-flag@4.0.0: {} - hast-util-to-html@9.0.3: - dependencies: - '@types/hast': 3.0.4 - '@types/unist': 3.0.3 - ccount: 2.0.1 - comma-separated-tokens: 2.0.3 - hast-util-whitespace: 3.0.0 - html-void-elements: 3.0.0 - mdast-util-to-hast: 13.2.0 - property-information: 6.5.0 - space-separated-tokens: 2.0.2 - stringify-entities: 4.0.4 - zwitch: 2.0.4 - hast-util-to-html@9.0.5: dependencies: '@types/hast': 3.0.4 @@ -5590,10 +5484,6 @@ snapshots: regex: 6.0.1 regex-recursion: 6.0.2 - oniguruma-to-js@0.4.3: - dependencies: - regex: 4.3.3 - os-tmpdir@1.0.2: {} outdent@0.5.0: {} @@ -5699,8 +5589,6 @@ snapshots: ansi-styles: 5.2.0 react-is: 17.0.2 - property-information@6.5.0: {} - property-information@7.0.0: {} publint@0.2.12: @@ -5744,8 +5632,6 @@ snapshots: regex-utilities@2.3.0: {} - regex@4.3.3: {} - regex@6.0.1: dependencies: regex-utilities: 2.3.0 @@ -5853,15 +5739,6 @@ snapshots: shebang-regex@3.0.0: {} - shiki@1.22.0: - dependencies: - '@shikijs/core': 1.22.0 - '@shikijs/engine-javascript': 1.22.0 - '@shikijs/engine-oniguruma': 1.22.0 - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 - '@types/hast': 3.0.4 - shiki@3.2.1: dependencies: '@shikijs/core': 3.2.1 @@ -6067,18 +5944,8 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - twoslash-protocol@0.2.12: {} - twoslash-protocol@0.3.1: {} - twoslash@0.2.12(typescript@5.5.4): - dependencies: - '@typescript/vfs': 1.6.0(typescript@5.5.4) - twoslash-protocol: 0.2.12 - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - twoslash@0.3.1(typescript@5.5.4): dependencies: '@typescript/vfs': 1.6.1(typescript@5.5.4)