Conversation
- Extract twoslash options to dedicated file - Add global types for improved diagnostics - Implement custom hover and error filtering - Include script for local tw
|
WalkthroughA new Twoslash configuration system is extracted from source.config.ts into a dedicated module (twoslash-options.ts) with filtering logic and JSDoc support. A CLI script (twoslash-mdx.ts) processes MDX files to extract and annotate TypeScript code blocks using Twoslasher, with corresponding documentation and npm script added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Script as twoslash-mdx.ts
participant FS as File System
participant Parser as Regex Parser
participant Twoslasher
participant Config as twoslash-options
participant Output
User->>Script: Run with MDX file path
Script->>FS: Read MDX file
FS-->>Script: File contents
Script->>Parser: Find code blocks (```ts twoslash)
Parser-->>Script: Matched blocks
loop For each code block
Script->>Config: Get twoslashOptions & filterNode
Config-->>Script: arktypeTwoslashOptions
Script->>Twoslasher: Process code with options
Twoslasher-->>Script: Hovers & Errors
Script->>Config: Filter hovers via filterNode
Config-->>Script: Filtered hovers
Script->>Config: Filter errors via filterNode
Config-->>Script: Filtered errors
Script->>Output: Print block header + results
end
Output-->>User: Annotated code blocks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Add Valibot and Zod to noise filter - Ensure whitelisted CAPS keys are always shown
- Document utility scripts in bin directory - Add `twoslash` pnpm script for convenience - Fix potential error in twoslash
- Introduce ArkTypeTwoslashOptions interface - Add filterNode property to twoslash options - Remove 'any' assertion for filterNode usage
- Introduce TwoslashNode type definition - Apply TwoslashNode to ArkTypeTwoslashOptions - Update filterNode parameter type - Rename unused
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/www/bin/twoslash-mdx.ts`:
- Around line 17-26: The regex and loop only handle TypeScript and hardcode
"ts"; update codeBlockRegex to capture the language as the first capture group
limited to (ts|js) and allow CRLFs (use \r?\n), then change the match handling
to extract lang = match[1] ?? "ts" and code = match[2] (instead of match[1]),
and pass lang into twoslasher(code, lang, options); ensure this aligns with
arktypeTwoslashOptions.langs which contains ["ts","js"] so no tsx is included.
🧹 Nitpick comments (4)
apps/www/lib/twoslash-options.ts (3)
1-12: Make repo root resolution deterministic.
rootdepends onprocess.cwd(), which can vary across tooling and break the path mappings when run outsideapps/www. Resolving relative to this module keeps paths stable.🔧 Suggested fix
-import path from "node:path"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; @@ -const require = createRequire(import.meta.url); - -export const root = path.resolve(process.cwd(), "../../"); +const require = createRequire(import.meta.url); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +export const root = path.resolve(__dirname, "../../..");
14-26: Add JSDoc for exported types/options.These exports define the shared contract for the CLI and MDX transformer; a short doc comment will make the filter semantics easier to maintain. As per coding guidelines, please add JSDoc for public APIs and complex type logic.
✍️ Suggested doc additions
-export type TwoslashNode = { +/** Twoslash output node passed to `filterNode`. */ +export type TwoslashNode = { @@ -export type ArkTypeTwoslashOptions = TransformerTwoslashOptions & { +/** Shared twoslash options used by MDX and CLI tooling. */ +export type ArkTypeTwoslashOptions = TransformerTwoslashOptions & { @@ -export const arktypeTwoslashOptions: ArkTypeTwoslashOptions = { +/** Centralized twoslash configuration for docs tooling. */ +export const arktypeTwoslashOptions: ArkTypeTwoslashOptions = {
190-212: Guard against missingerrorLens.replaceconfiguration.If the
arkdarkpackage.json structure changes, this loop will throw at runtime; defaulting to an empty list avoids the crash.🛡️ Suggested defensive guard
- case "error": - for (const transformation of arkTypePackageJson.contributes - .configurationDefaults["errorLens.replace"]) { + case "error": { + const replacements = + arkTypePackageJson.contributes?.configurationDefaults?.[ + "errorLens.replace" + ] ?? []; + for (const transformation of replacements) { @@ - return true; + return true; + }apps/www/bin/twoslash-mdx.ts (1)
5-9: Align the usage hint with thepnpm twoslashscript.The CLI is documented as
pnpm twoslash, but the error message points to a different command; mentioning both reduces confusion.✏️ Suggested tweak
-console.error("Usage: tsx twoslash-mdx.ts <path-to-mdx>"); +console.error( + "Usage: pnpm twoslash <path-to-mdx> (or: tsx bin/twoslash-mdx.ts <path-to-mdx>)", +);
| const codeBlockRegex = /```ts twoslash(?:.*)\n([\s\S]*?)\n```/g; | ||
| let blockIndex = 1; | ||
|
|
||
| for (const match of content.matchAll(codeBlockRegex)) { | ||
| const code = match[1]; | ||
| if (code === undefined) continue; | ||
| console.log(`\n--- Block ${blockIndex++} ---`); | ||
| try { | ||
| const result = twoslasher(code, "ts", options); | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n apps/www/bin/twoslash-mdx.tsRepository: yamcodes/arkenv
Length of output: 1747
🏁 Script executed:
# Search for twoslasher configuration and usage patterns
rg "twoslasher|langs" apps/www --type ts -B 2 -A 2Repository: yamcodes/arkenv
Length of output: 1227
🏁 Script executed:
# Check the actual twoslasher package to understand supported languages
fd package.json apps/www | head -5Repository: yamcodes/arkenv
Length of output: 80
🏁 Script executed:
cat apps/www/package.json | grep -A 2 -B 2 "twoslash"Repository: yamcodes/arkenv
Length of output: 480
🏁 Script executed:
# Search for "tsx" usage in code blocks or comments
rg "twoslash.*tsx|```tsx" apps/www --type ts --type tsxRepository: yamcodes/arkenv
Length of output: 127
🏁 Script executed:
# Check the twoslash package in node_modules or find its type definitions
fd -e "d.ts" | grep twoslash | head -5Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
# Check if twoslash is in node_modules and inspect its exports
find node_modules -name "twoslash" -type d 2>/dev/null | head -1Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
# Look for twoslash package info and check its index file
find . -path "*/node_modules/twoslash*" -name "*.d.ts" -o -path "*/node_modules/twoslash*" -name "index.*" 2>/dev/null | head -10Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
# Try to find documentation or check fumadocs integration
rg "lang|language" apps/www/lib/twoslash-options.ts -A 3 -B 3Repository: yamcodes/arkenv
Length of output: 228
🌐 Web query:
twoslash 0.3.6 language parameter supported values twoslasher
💡 Result:
In twoslash@0.3.6, the twoslasher(code, lang, opts) lang parameter is not an enum—it’s typed as a plain string, so Twoslash itself does not restrict/validate the allowed values. It’s effectively treated as the file “language/extension” used for parsing. [1][2]
Practically, you should pass a TypeScript/JavaScript-like extension that the TS compiler understands, e.g. 'ts', 'tsx', 'js', 'jsx' (older docs/examples also mention 'typescript' / 'javascript'). [2]
If you want Vue SFC support, use twoslash-vue (it adds .vue handling). [3]
Sources: [1] [2] [3]
Update regex to capture code block language, but include only ts and js to align with configuration.
The current regex only processes TypeScript blocks and hardcodes "ts" as the language. Capture the language from the code fence and pass it to twoslasher() to support both ts and js blocks. The suggested diff also adds CRLF handling (\r?\n), which is appropriate for cross-platform files.
However, the suggested regex includes tsx, which is not declared in arktypeTwoslashOptions.langs (only ["ts", "js"]). Either remove tsx from the regex to strictly align with the declared configuration, or update the commit message to clarify that tsx support is intentionally extended beyond the explicit config.
🔧 Corrected update
-const codeBlockRegex = /```ts twoslash(?:.*)\n([\s\S]*?)\n```/g;
+const codeBlockRegex = /```(ts|js) twoslash(?:.*)\r?\n([\s\S]*?)\r?\n```/g;
@@
-for (const match of content.matchAll(codeBlockRegex)) {
- const code = match[1];
+for (const match of content.matchAll(codeBlockRegex)) {
+ const lang = match[1] ?? "ts";
+ const code = match[2];
@@
- const result = twoslasher(code, "ts", options);
+ const result = twoslasher(code, lang, options);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const codeBlockRegex = /```ts twoslash(?:.*)\n([\s\S]*?)\n```/g; | |
| let blockIndex = 1; | |
| for (const match of content.matchAll(codeBlockRegex)) { | |
| const code = match[1]; | |
| if (code === undefined) continue; | |
| console.log(`\n--- Block ${blockIndex++} ---`); | |
| try { | |
| const result = twoslasher(code, "ts", options); | |
| const codeBlockRegex = / |
🤖 Prompt for AI Agents
In `@apps/www/bin/twoslash-mdx.ts` around lines 17 - 26, The regex and loop only
handle TypeScript and hardcode "ts"; update codeBlockRegex to capture the
language as the first capture group limited to (ts|js) and allow CRLFs (use
\r?\n), then change the match handling to extract lang = match[1] ?? "ts" and
code = match[2] (instead of match[1]), and pass lang into twoslasher(code, lang,
options); ensure this aligns with arktypeTwoslashOptions.langs which contains
["ts","js"] so no tsx is included.
1 participant
Closes #733
Summary by CodeRabbit
Documentation
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.