docs: wire up Fumadocs Twoslash for TypeScript examples#185
Merged
Conversation
Adds the Shiki Twoslash transformer to the Fumadocs MDX pipeline so TypeScript code blocks tagged `ts twoslash` get build-time type hovers and error annotations. Twoslash runs the TS compiler at build, so a twoslashed block doubles as a compile guardrail: a type error fails `docs:build`. - Install fumadocs-twoslash + twoslash (peer) - Register transformerTwoslash() in source.config.ts - Externalize typescript/twoslash from the Next bundler - Import twoslash.css and register the `fumadocs-twoslash/ui` components - Convert the real `defineConfig()` example in configuration.mdx to `ts twoslash` — it type-checks against the actual actio-core types (resolved via the file:../packages/core symlink), so the config docs can't drift from the ActioConfig type without breaking the build. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Wires Fumadocs Twoslash into the docs site so TypeScript code blocks tagged
ts twoslashget build-time type hovers and error annotations via the TS compiler. Because Twoslash throws at build time on type errors, a twoslashed block doubles as a compile guardrail — our config examples can't drift from the real types without failingdocs:build.Twoslash only applies to TS/TSX blocks (
ts twoslash), not YAML — so the 136.actio.ymlYAML samples are untouched. The real, high-value targets are thedefineConfig()/actio-coreTypeScript examples.Changes
docs/package.json/ lockfilefumadocs-twoslash@^3.2.0+twoslash@^0.3.9docs/source.config.tstransformerTwoslash()to the ShikirehypeCodeOptions.transformers(after the existingtransformerActioKeywords())docs/next.config.mjsserverExternalPackages: ['typescript', 'twoslash'](per the guide)docs/app/global.css@import 'fumadocs-twoslash/twoslash.css'docs/components/mdx.tsx* as Twoslash from 'fumadocs-twoslash/ui'into the MDX components map (hover popups)docs/content/docs/configuration.mdxdefineConfig()example to```ts twoslashDoes real
actio-coreresolve in Twoslash? ✅ YesThe converted example imports
defineConfigfromactio-coreand type-checks against the actualActioConfigtype — nopathsmapping or self-contained stub needed. It resolves through the existingactio-core: file:../packages/coresymlink indocs/node_modulesplus the package's top-level"types": "./dist/index.d.ts"(so it resolves under any moduleResolution). Prereq:packages/coremust be built (npm run build) sodist/*.d.tsexists beforedocs:build— already part of the documented build chain.Verified in the built HTML for
/docs/configuration: the block renders withtwoslash lsp+twoslash-hovermarkup and thedefineConfighover surfaces theActioConfigtype.Scope note: only one example converted (intentional)
The two custom-pass examples lower in
configuration.mdxare intentionally illustrative pseudo-API — e.g. they calltransformSteps(ctx, fn)whereas the real signature istransformSteps(ctx, jobId, job, fn)("preferred form once the typed-IR API is available"). Twoslash would (correctly) reject them, so they stay as plaints. Good follow-up once those examples match the shipped API.Gates
npm run docs:build— green (runs Twoslash; a type error would fail it)npm test -- docs-completeness syntax-reference macros— 84/84 passingThis PR modifies
docs/components/mdx.tsx(adds...TwoslashtogetMDXComponents). A parallel branch (austenstone-docs-clarity-overhaul) also edits this file to register<Files>/<Folder>/<File>. Both are additive entries on the same return object — trivial to combine at merge. My change is minimal/additive by design.