Skip to content

Commit dbe0fb9

Browse files
docs: update plugin info. (#50)
1 parent 188228f commit dbe0fb9

1 file changed

Lines changed: 16 additions & 0 deletions

File tree

docs/ts-plugin.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Use the [`@knighted/jsx-ts-plugin`](https://github.com/knightedcodemonkey/jsx-ts
44

55
> [!IMPORTANT]
66
> TypeScript only loads language-service plugins inside editors (via `tsserver`). Running `tsc` or `tsc --noEmit` directly will **not** execute this plugin. To enforce the same diagnostics in CI, pair your build with a compiler transform (loader, `ts-patch`, etc.) or run a custom check that reuses the plugin’s transformation logic.
7+
>
8+
> Requires TypeScript 5.4 or newer (matching the v0.3.x peer dependency in `@knighted/jsx-ts-plugin`).
79
810
## Installation
911

@@ -34,6 +36,12 @@ Enable the plugin inside the `plugins` section of your `tsconfig.json` (or `jsco
3436
> [!TIP]
3537
> The `tagModes` entry shown above matches the built-in defaults. Keep it when you add custom tag names (for example, if you alias `jsx` to `html`), otherwise you can omit the property entirely.
3638
39+
### Options reference
40+
41+
- `tagModes`: maps each tagged template function to either `"dom"` or `"react"`. Defaults to `{ "jsx": "dom", "reactJsx": "react" }` so mixed projects work with zero config.
42+
- `tags` / `mode`: legacy aliases from early releases. They continue to work but `tagModes` is preferred because it supports multiple identifiers at once.
43+
- `maxTemplatesPerFile`: optional safeguard that skips files containing more tagged templates than the provided number—handy if you have giant fixtures that would otherwise slow down the language service.
44+
3745
Restart your editor after saving the config. From VS Code you can run **TypeScript: Select TypeScript Version****Use Workspace Version** to make sure the plugin loads from `node_modules`. The plugin repository documents every option and includes advanced examples—see [knightedcodemonkey/jsx-ts-plugin](https://github.com/knightedcodemonkey/jsx-ts-plugin) for details.
3846

3947
## Mixed DOM + React diagnostics
@@ -52,6 +60,14 @@ You can override the mode per expression by dropping an inline directive immedia
5260

5361
The directive applies only to the next tagged template, making it safe to mix DOM wrappers and React islands inside the same file without global config churn.
5462

63+
Directives can be line or block comments, and they work even when the tag name is custom (for example, if you alias `jsx` to `html`).
64+
65+
## TSX runtime integration
66+
67+
`@knighted/jsx` bundles a `jsx-runtime` entrypoint, so setting `"jsxImportSource": "@knighted/jsx"` gives the TypeScript compiler everything it needs for TSX files.
68+
69+
Remember that DOM-mode helpers return `JsxRenderable` (real DOM nodes, strings, iterables, etc.) while React-mode helpers return `ReactElement`. When sharing utilities between the two ecosystems, let inference pick the right return type and only cast when you truly need DOM-only APIs.
70+
5571
## Helpful types
5672

5773
The runtime exports the `JsxRenderable` helper so DOM templates never have to cast through `ReactNode`. Use it when you surface values from pure functions or external libraries:

0 commit comments

Comments
 (0)