Skip to content

Commit 993c0f5

Browse files
SacDeNoeudsGerrit0
authored andcommitted
expose html global jsx attributes to enable extending them for custom elements or api holes
document how to extend jsx attributes and elements add popover attribute to global jsx attribute interface fix lint
1 parent 288856c commit 993c0f5

File tree

3 files changed

+67
-1
lines changed

3 files changed

+67
-1
lines changed

site/development/themes.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,51 @@ export function load(app: Application) {
103103
```
104104

105105
[RendererHooks]: https://typedoc.org/api/interfaces/RendererHooks.html
106+
107+
## Registering your own custom elements/attributes
108+
109+
Start by writing a `jsx.d.ts` file somewhere.
110+
111+
````ts
112+
// src/jsx.d.ts
113+
import { JSX as TypeDocJSX } from "typedoc";
114+
115+
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+
}
141+
}
142+
}
143+
}
144+
````
145+
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) { … }
153+
```

src/lib/utils/jsx.elements.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,19 @@ export interface JsxHtmlGlobalProps {
185185
tabIndex?: number;
186186
title?: string;
187187
translate?: boolean;
188+
189+
// popover attributes
190+
/**
191+
* Default: 'auto'. true and 'auto' are equivalent
192+
*
193+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for more details
194+
*/
195+
popover?: boolean | "auto" | "manual";
196+
/**
197+
* It must be the popover element id, see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
198+
*/
199+
popovertarget?: string;
200+
popovertargetaction?: "hide" | "show" | "toggle";
188201
}
189202

190203
/**

src/lib/utils/jsx.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type {
2020
JsxElement,
2121
JsxChildren,
2222
JsxComponent,
23+
JsxHtmlGlobalProps,
2324
} from "./jsx.elements.js";
2425
import { JsxFragment } from "./jsx.elements.js";
2526

@@ -50,7 +51,11 @@ export function Raw(_props: { html: string }) {
5051
* @hidden
5152
*/
5253
export declare namespace JSX {
53-
export { IntrinsicElements, JsxElement as Element };
54+
export {
55+
IntrinsicElements,
56+
JsxElement as Element,
57+
JsxHtmlGlobalProps as IntrinsicAttributes,
58+
};
5459
}
5560

5661
const voidElements = new Set([

0 commit comments

Comments
 (0)