Skip to content

Commit e88c870

Browse files
authored
docs: add twoslash-remote documentation (#92)
1 parent 36ebbcf commit e88c870

2 files changed

Lines changed: 66 additions & 0 deletions

File tree

docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const INTEGRATIONS = [
2828
{ text: 'Svelte Language Support', link: '/packages/svelte' },
2929
{ text: 'ESLint TwoSlash', link: '/packages/eslint' },
3030
{ text: 'CDN Usage', link: '/packages/cdn' },
31+
{ text: 'Remote API', link: '/packages/remote' },
3132
] satisfies DefaultTheme.SidebarItem[]
3233

3334
const VERSIONS = [

docs/packages/remote.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Twoslash Remote
2+
3+
Run [Twoslash](https://github.com/twoslashes/twoslash) by delegating resolution to a remote HTTP API. Keep the heavy dependencies (TypeScript, type acquisition, virtual file system, Vue language server, ...) on a server and ship only a tiny client to the browser, build pipeline, or edge function.
4+
5+
The package exposes two entry points:
6+
7+
- `twoslash-remote` — a client that sends a code snippet + metadata to your endpoint and resolves the `TwoslashGenericResult` you get back.
8+
- `twoslash-remote/server` — web-standard `Request → Response` helpers to implement the contract on the server side, with any backend that returns a `TwoslashGenericResult` (`twoslash`, `twoslash-eslint`, `twoslash-vue`, or your own).
9+
10+
## Usage
11+
12+
### Client
13+
14+
```ts
15+
import { createTwoslashFromRemote } from 'twoslash-remote'
16+
17+
const twoslash = createTwoslashFromRemote({
18+
endpoint: 'https://my-api.example.com/twoslash',
19+
})
20+
21+
const result = await twoslash.run(
22+
`
23+
const count = 1
24+
// ^?
25+
`,
26+
'ts',
27+
// Optional: serializable twoslasher options forwarded to the backend
28+
{ compilerOptions: { strict: true } },
29+
// Optional: transport-level options (meta, headers, signal)
30+
{ meta: { tenant: 'docs-site' } },
31+
)
32+
33+
console.log(result) // { code: '...', nodes: [...] }
34+
```
35+
36+
The third argument is forwarded to the server backend as `options` in the request body. The fourth argument is transport-only (`meta`, `headers`, `signal`).
37+
38+
### Server
39+
40+
`createTwoslashRequestHandler` returns a web-standard `(req: Request) => Promise<Response>`. It runs in Node ≥ 18, Bun, Deno, Cloudflare Workers, Vercel/Netlify edge functions, and any framework that speaks the fetch API.
41+
42+
```ts
43+
import { createTwoslasher } from 'twoslash'
44+
import { createTwoslashRequestHandler } from 'twoslash-remote/server'
45+
46+
const twoslasher = createTwoslasher()
47+
48+
export default createTwoslashRequestHandler({
49+
twoslasher,
50+
cors: true,
51+
})
52+
```
53+
54+
Plug in any backend that returns a `TwoslashGenericResult``twoslash-eslint`, `twoslash-vue`, or a custom wrapper:
55+
56+
```ts
57+
import { createTwoslasher as createESLintTwoslasher } from 'twoslash-eslint'
58+
import { createTwoslashRequestHandler } from 'twoslash-remote/server'
59+
60+
const twoslasher = createESLintTwoslasher({ eslintConfig: [/* ... */] })
61+
62+
export default createTwoslashRequestHandler({ twoslasher })
63+
```
64+
65+
Lower-level building blocks (`parseTwoslashRequest`, `serializeTwoslashError`) are also exported for users who want to integrate into a framework manually.

0 commit comments

Comments
 (0)