Convert default themes to JSX; merge into typedoc repo

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/output/helpers/wbr.tsx

@@ -0,0 +1,25 @@
+import 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/themes/DefaultTheme.ts

@@ -56,25 +56,25 @@ export class DefaultTheme extends Theme {
             kind: [ReflectionKind.Class],
             isLeaf: false,
             directory: "classes",
-            template: "reflection.hbs",
+            template: this.reflection.bind(this)
         },
         {
             kind: [ReflectionKind.Interface],
             isLeaf: false,
             directory: "interfaces",
-            template: "reflection.hbs",
+            template: this.reflection.bind(this)
         },
         {
             kind: [ReflectionKind.Enum],
             isLeaf: false,
             directory: "enums",
-            template: "reflection.hbs",
+            template: this.reflection.bind(this)
         },
         {
             kind: [ReflectionKind.Namespace, ReflectionKind.Module],
             isLeaf: false,
             directory: "modules",
-            template: "reflection.hbs",
+            template: this.reflection.bind(this)
         },
     ];
 

src/lib/output/themes/default-themes/default/assets/css/_constants.sass

@@ -0,0 +1,11 @@
+// Fonts
+//
+$FONT_FAMILY: 'Segoe UI', sans-serif
+$FONT_FAMILY_MONO: Menlo, Monaco, Consolas, 'Courier New', monospace
+
+$FONT_SIZE: 16px
+$FONT_SIZE_MONO: 14px
+
+$LINE_HEIGHT: 1.333em
+
+$TOOLBAR_HEIGHT: 40px

src/lib/output/themes/default-themes/default/assets/css/_theme.scss

@@ -0,0 +1,28 @@
+// Default light theme
+:root {
+    --color-background: #fdfdfd;
+    --color-text: #222;
+    --color-text-aside: #707070;
+    --color-link: #4da6ff;
+
+    --color-menu-divider: #eee;
+    --color-menu-divider-focus: #000;
+    --color-menu-label: #707070;
+
+    --color-panel: #fff;
+    --color-panel-divider: #eee;
+
+    --color-comment-tag: #707070;
+    --color-comment-tag-text: #fff;
+
+    --color-code-background: rgba(0, 0, 0, 0.04);
+
+    --color-ts: #9600ff;
+    --color-ts-interface: #647f1b;
+    --color-ts-enum: #937210;
+    --color-ts-class: #0672de;
+    --color-ts-private: #707070;
+
+    --color-toolbar: #fff;
+    --color-toolbar-text: #333;
+}