You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ts-plugin.md
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@ Use the [`@knighted/jsx-ts-plugin`](https://github.com/knightedcodemonkey/jsx-ts
4
4
5
5
> [!IMPORTANT]
6
6
> 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`).
7
9
8
10
## Installation
9
11
@@ -34,6 +36,12 @@ Enable the plugin inside the `plugins` section of your `tsconfig.json` (or `jsco
34
36
> [!TIP]
35
37
> 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.
36
38
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
+
37
45
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.
38
46
39
47
## Mixed DOM + React diagnostics
@@ -52,6 +60,14 @@ You can override the mode per expression by dropping an inline directive immedia
52
60
53
61
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.
54
62
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
+
55
71
## Helpful types
56
72
57
73
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