Skip to content

Commit 9d8737e

Browse files
committed
Update JSX extension docs
De-emphasize information less likely to be useful, do not recommend triple slash references which should generally not be used.
1 parent 993c0f5 commit 9d8737e

File tree

1 file changed

+21
-39
lines changed

1 file changed

+21
-39
lines changed

site/development/themes.md

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -102,52 +102,34 @@ export function load(app: Application) {
102102
}
103103
```
104104

105-
[RendererHooks]: https://typedoc.org/api/interfaces/RendererHooks.html
106-
107105
## Registering your own custom elements/attributes
108106

109-
Start by writing a `jsx.d.ts` file somewhere.
107+
Custom JSX elements can be defined by merging with TypeDoc's `IntrinsicElements`
108+
interface. TypeScript will pick up properties of this interface as valid element
109+
names.
110110

111-
````ts
112-
// src/jsx.d.ts
113-
import { JSX as TypeDocJSX } from "typedoc";
111+
```ts
112+
import { Application, JSX } from "typedoc";
114113

115114
declare module "typedoc" {
116-
namespace JSX {
117-
namespace JSX {
118-
interface IntrinsicAttributes {
119-
popover?: boolean;
120-
popovertarget?: string;
121-
popovertargetaction?: "hide" | "show" | "toggle";
122-
}
123-
interface IntrinsicElements {
124-
// add your custom elements here, ie:
125-
/**
126-
* @example
127-
* ```tsx
128-
* <drop-down trigger="#my-trigger" class="header-menu">
129-
* <button>Option #1</button>
130-
* <button>Option #2</button>
131-
* </drop-down>
132-
* ```
133-
*/
134-
"drop-down": IntrinsicAttributes & {
135-
/**
136-
* A query selector, ie: '#my-trigger'
137-
*/
138-
trigger: string;
139-
};
140-
}
115+
// JSX.JSX is intentional due to TypeScript's strange JSX type discovery rules
116+
namespace JSX.JSX {
117+
interface IntrinsicElements {
118+
"custom-button": IntrinsicAttributes & {
119+
target: string;
120+
};
121+
}
122+
123+
// Generally shouldn't be necessary, TypeDoc contains an interface
124+
// with all attributes documented on MDN. Properties added here will
125+
// be permitted on all JSX elements.
126+
interface IntrinsicAttributes {
127+
customGlobalAttribute?: string;
141128
}
142129
}
143130
}
144-
````
145131

146-
Then in your plugin entry point, reference the `jsx.d.ts` file with a triple-slash directive.
147-
148-
```ts
149-
// src/index.ts
150-
/// <reference types="./jsx.d.ts" />
151-
152-
export function load(app: Application) { … }
132+
export function load(app: Application) {}
153133
```
134+
135+
[RendererHooks]: https://typedoc.org/api/interfaces/RendererHooks.html

0 commit comments

Comments
 (0)