JSX theming

[cspotcode]

Creating an issue to track the work that I'm doing.

Search Terms

jsx, theme, handlebars

Problem

Themes implemented in handlebars, do not use native TS language features. Themes can be typechecked, compiled, and rendered with less tooling if they are written natively in TS.

Suggested Solution

Implement themes as JSX components which can be rendered at build time to static HTML.

Theme is an object with functions/methods. Default themes are implemented as a class, so they can be subclassed, but themes can also use {...defaultTheme, ...overrideFunctions} if they prefer to avoid classes.

Some "extension points" in the theme can be implemented as stubbed methods which return void. Theme implementers can choose to implement these methods to inject markup into the emitted docs.

Related issues:
#1266
TypeStrong/typedoc-default-themes#137
#1543

[milesj]

FWIW, I basically rewrote all the handlebar templates in React here: https://github.com/milesj/docusaurus-plugin-typedoc-api/tree/master/packages/plugin/src/components

[Gerrit0]

I wish we'd known about that sooner! TypeDoc's themes on the beta branch basically duplicated that work

[milesj]

@Gerrit0 Yeah saw that too 😅

They are a bit different though, as mine is based on the JSON, while the new ones seem based on the model? Which kind of makes them not easily reusable.

[Gerrit0]

To some extent - I plan on doing something like #1646, but that uses the existing JSON output to deserialize

[Gerrit0]

v0.22.0 has been released with this included in it