Convert default themes to JSX; merge into typedoc repo

.prettierrc.json

@@ -1 +1,3 @@
-{}
+{
+    "printWidth": 120
+}

package.json

@@ -26,6 +26,8 @@
     "marked": "^2.1.1",
     "minimatch": "^3.0.0",
     "progress": "^2.0.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "shiki": "^0.9.3",
     "typedoc-default-themes": "^0.12.10"
   },

src/lib/models/reflections/abstract.ts

@@ -216,6 +216,10 @@ export class ReflectionFlags extends Array<string> {
         return this.hasFlag(ReflectionFlag.Readonly);
     }
 
+    get isExported() {
+        return TODO as boolean;
+    }
+
     setFlag(flag: ReflectionFlag, set: boolean) {
         switch (flag) {
             case ReflectionFlag.Private:

src/lib/output/events.ts

@@ -3,7 +3,7 @@ import * as Path from "path";
 
 import { Event } from "../utils/events";
 import { ProjectReflection } from "../models/reflections/project";
-import { UrlMapping } from "./models/UrlMapping";
+import { RenderTemplate, UrlMapping } from "./models/UrlMapping";
 import { NavigationItem } from "./models/NavigationItem";
 import { LegendItem } from "./plugins/LegendPlugin";
 
@@ -66,13 +66,13 @@ export class RendererEvent extends Event {
      * @param mapping  The mapping that defines the generated [[PageEvent]] state.
      * @returns A newly created [[PageEvent]] instance.
      */
-    public createPageEvent(mapping: UrlMapping): PageEvent {
-        const event = new PageEvent(PageEvent.BEGIN);
+    public createPageEvent<Model>(mapping: UrlMapping<Model>): PageEvent {
+        const event = new PageEvent<Model>(PageEvent.BEGIN);
         event.project = this.project;
         event.settings = this.settings;
         event.url = mapping.url;
         event.model = mapping.model;
-        event.templateName = mapping.template;
+        event.template = mapping.template;
         event.filename = Path.join(this.outputDirectory, mapping.url);
         return event;
     }
@@ -87,7 +87,7 @@ export class RendererEvent extends Event {
  * @see [[Renderer.EVENT_BEGIN_PAGE]]
  * @see [[Renderer.EVENT_END_PAGE]]
  */
-export class PageEvent extends Event {
+export class PageEvent<Model = any> extends Event {
     /**
      * The project the renderer is currently processing.
      */
@@ -111,17 +111,12 @@ export class PageEvent extends Event {
     /**
      * The model that should be rendered on this page.
      */
-    model: any;
+    model!: Model;
 
     /**
      * The template that should be used to render this page.
      */
-    template?: TemplateDelegate;
-
-    /**
-     * The name of the template that should be used to render this page.
-     */
-    templateName!: string;
+    template!: RenderTemplate<Model>;
 
     /**
      * The primary navigation structure of this page.

src/lib/output/helpers/wbr.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+/**
+ * Insert word break tags ``<wbr>`` into the given string.
+ *
+ * Breaks the given string at ``_``, ``-`` and capital letters.
+ *
+ * @param str The string that should be split.
+ * @return The original string containing ``<wbr>`` tags where possible.
+ */
+export function wbr(str: string): (string | Element)[] {
+    // TODO surely there is a better way to do this, but I'm tired.
+    const ret: (string | Element)[] = [];
+    const re = /^[\s\S]*?(?:([^_-][_-])(?=[^_-])|([^A-Z])(?=[A-Z][^A-Z]))/g;
+    let match: RegExpExecArray | null;
+    let i = 0;
+    while((match = re.exec(str))) {
+        ret.push(match[0]);
+        ret.push(<wbr />);
+        i += match.index + match[0].length;
+    }
+    ret.push(str.slice(i));
+
+    return ret;
+}

src/lib/output/models/UrlMapping.ts

@@ -1,16 +1,20 @@
+import { ReactElement } from "react";
+
 /**
  *
  */
-export class UrlMapping {
+export class UrlMapping<Model = any> {
     url: string;
 
-    model: any;
+    model: Model;
 
-    template: string;
+    template: RenderTemplate<Model>;
 
-    constructor(url: string, model: any, template: string) {
+    constructor(url: string, model: any, template: RenderTemplate<Model>) {
         this.url = url;
         this.model = model;
         this.template = template;
     }
 }
+
+export type RenderTemplate<T> = (data: T) => ReactElement | string;