Skip to content

docs: wire up Fumadocs Twoslash for TypeScript examples#185

Merged
austenstone merged 1 commit into
mainfrom
austenstone-docs-twoslash
Jun 22, 2026
Merged

docs: wire up Fumadocs Twoslash for TypeScript examples#185
austenstone merged 1 commit into
mainfrom
austenstone-docs-twoslash

Conversation

@austenstone

Copy link
Copy Markdown
Owner

What

Wires Fumadocs Twoslash into the docs site so TypeScript code blocks tagged ts twoslash get 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 failing docs:build.

Twoslash only applies to TS/TSX blocks (ts twoslash), not YAML — so the 136 .actio.yml YAML samples are untouched. The real, high-value targets are the defineConfig() / actio-core TypeScript examples.

Changes

File Change
docs/package.json / lockfile add fumadocs-twoslash@^3.2.0 + twoslash@^0.3.9
docs/source.config.ts add transformerTwoslash() to the Shiki rehypeCodeOptions.transformers (after the existing transformerActioKeywords())
docs/next.config.mjs serverExternalPackages: ['typescript', 'twoslash'] (per the guide)
docs/app/global.css @import 'fumadocs-twoslash/twoslash.css'
docs/components/mdx.tsx register * as Twoslash from 'fumadocs-twoslash/ui' into the MDX components map (hover popups)
docs/content/docs/configuration.mdx convert the primary defineConfig() example to ```ts twoslash

Does real actio-core resolve in Twoslash? ✅ Yes

The converted example imports defineConfig from actio-core and type-checks against the actual ActioConfig type — no paths mapping or self-contained stub needed. It resolves through the existing actio-core: file:../packages/core symlink in docs/node_modules plus the package's top-level "types": "./dist/index.d.ts" (so it resolves under any moduleResolution). Prereq: packages/core must be built (npm run build) so dist/*.d.ts exists before docs:build — already part of the documented build chain.

Verified in the built HTML for /docs/configuration: the block renders with twoslash lsp + twoslash-hover markup and the defineConfig hover surfaces the ActioConfig type.

Scope note: only one example converted (intentional)

The two custom-pass examples lower in configuration.mdx are intentionally illustrative pseudo-API — e.g. they call transformSteps(ctx, fn) whereas the real signature is transformSteps(ctx, jobId, job, fn) ("preferred form once the typed-IR API is available"). Twoslash would (correctly) reject them, so they stay as plain ts. Good follow-up once those examples match the shipped API.

Gates

  • npm run docs:buildgreen (runs Twoslash; a type error would fail it)
  • npm test -- docs-completeness syntax-reference macros84/84 passing
  • ✅ Rendered output confirmed to contain Twoslash type-hover markup

⚠️ Merge reconciliation

This PR modifies docs/components/mdx.tsx (adds ...Twoslash to getMDXComponents). 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.

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>
@austenstone austenstone marked this pull request as ready for review June 22, 2026 18:20
@austenstone austenstone merged commit 4831e32 into main Jun 22, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant