feat(shiki): add twoslash support #8132
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8132 +/- ##
==========================================
- Coverage 76.64% 76.39% -0.26%
==========================================
Files 115 115
Lines 9623 9643 +20
Branches 322 317 -5
==========================================
- Hits 7376 7367 -9
- Misses 2246 2275 +29
Partials 1 1 ☔ View full report in Codecov by Sentry. |
|
Hype 😁 ! |
|
Locally: |
avivkeller
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR adds TypeScript TwoSlash support to the syntax highlighting system, enabling interactive TypeScript error displays and type information tooltips in code blocks.
Key Changes:
- Integrated TwoSlash transformer for TypeScript/JavaScript code highlighting
- Refactored metadata parsing system from string-based to object-based approach
- Added CSS styling for TwoSlash popup containers and error displays
Reviewed Changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/rehype-shiki/src/index.mjs | Added TwoSlash transformer import and configuration |
| packages/rehype-shiki/src/highlighter.mjs | Updated functions to accept metadata parameter and pass transformers |
| packages/rehype-shiki/src/plugin.mjs | Replaced string-based metadata parsing with comprehensive object-based system |
| packages/rehype-shiki/src/twoslash.css | Added CSS styling for TwoSlash popup containers |
| packages/rehype-shiki/package.json | Added TwoSlash dependency and exported CSS file |
| packages/ui-components/src/Common/BaseCodeBox/index.module.css | Added CSS transforms for proper positioning |
| apps/site/next.config.mjs | Configured external packages and file tracing for TwoSlash |
| apps/site/package.json | Added twoslash dependency |
| apps/site/styles/index.css | Imported TwoSlash CSS styles |
| apps/site/pages/en/learn/typescript/transpile.md | Updated TypeScript example to use TwoSlash error annotations |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Is this all server side? I'm asking because given the TS port to Go, I'm not sure what the deal will be for shiki on the web; probably having to include a large Go binary in Wasm to work with all of the fancy stuff if not prerendered... |
|
@nodejs/nodejs-website @nodejs/web-infra for reviews. Currently, this is disabled on CF, but there's a TODO to enable it. |
|
I'll get to Augustin's review today, @nodejs/web any other comments / concerns |
|
I need an @nodejs/nodejs-website approval, and then I'll rebase |
| return parameter !== undefined && parameter.length > 0 | ||
| ? parameter | ||
| : undefined; | ||
| while ((match = rMeta.exec(meta)) !== null) { |
There was a problem hiding this comment.
This feels like some voodoo wizardry and so prone of going wrong I guess
There was a problem hiding this comment.
How so? The RegEx (AFAICT) is pretty robust.
There was a problem hiding this comment.
This regex pattern seems to be vulnerable to ReDoS.
| return transformers; | ||
| } | ||
|
|
||
| export const LANGS = [ |
There was a problem hiding this comment.
Does this need to be on the same file?
There was a problem hiding this comment.
Ideally yes, the index.mjs LANGS and the minimal.mjs LANGS
There was a problem hiding this comment.
IDK, feels like this should have a dedicated langs.mjs file tho
There was a problem hiding this comment.
I don't think so. The index.mjs exports all of the highlighting utilities needed for our server, and the minimal.mjs exports all for our client. A langs.mjs file for index.mjs doesn't make sense to me.
WDYT @nodejs/nodejs-website
Signed-off-by: Aviv Keller <[email protected]>
| import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; | ||
| import Blockquote from '@node-core/ui-components/Common/Blockquote'; | ||
| import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs'; | ||
| import { |
There was a problem hiding this comment.
These should all be separated files
There was a problem hiding this comment.
Also are these client components? This file should only contain server components. There's another file for client components no?
There was a problem hiding this comment.
No, we merged them into a single file in #8167
The bundle is a bit bigger, since it needs to load the extra JS (See #8160). The most recent Twoslash build took ~1:33, almost identical to the most recent |
|
Bypassing ownership from typescript team as it is a false positive. |
7 participants
Fixes #7932
Introduces
@shikijs/twoslashsupport in@node-core/rehype-shiki. Sincetwoslashdepends on TypeScript declaration files, it cannot be bundled and must instead be listed underserverExternalPackages.Because TypeScript declarations aren’t imported like regular files (they’re loaded through a TSVFS), they need to be explicitly included in the output bundle.
Because Cloudflare doesn't support WASM or Top-Level awaits, rehype-shiki has been rewritten to not rely on them.