refactor(*): bump typedoc and typescript

.github/workflows/npm-ci.yml

@@ -16,12 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci

.github/workflows/npm-publish.yml

@@ -11,10 +11,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV
       - run: echo ${VERSION}
@@ -24,5 +24,5 @@ jobs:
       - run: echo ${NPM_TAG}
       - run: npm version ${VERSION} --no-git-tag-version --save --verbose
       - run: npm publish --tag ${NPM_TAG}
-        env: 
+        env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package.json

@@ -43,15 +43,15 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^8.0.12",
-    "typedoc": "^0.23.21",
-    "typescript": "^4.9.5",
+    "typedoc": "^0.25.3",
+    "typescript": "^5.2.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.11.1",
     "webpack-cli": "^4.3.0",
     "webpack-merge": "^5.7.3"
   },
   "peerDependecies": {
-    "typedoc": "^0.23.21",
+    "typedoc": "^0.25.3",
     "typedoc-plugin-localization": "^3.0.2"
   }
 }

src/assets/css/elements/_buttons.sass

@@ -36,3 +36,26 @@
 
         &:hover
             color: #fff
+
+pre
+    button
+        display: none
+        position: absolute
+        inset-block-start: 4px
+        inset-inline-end: 4px
+        background: transparent
+        color: #09f
+        border: 1px solid #09f
+        font-size: 12px
+        font-weight: 600
+        text-transform: uppercase
+        padding: 9px 16px
+        transition: all .25s ease-in-out
+
+        &:hover
+            background: #09f
+            color: #fff
+        &:active
+            background: transparent
+            color: #09f
+

src/assets/css/elements/_signatures.sass

@@ -30,6 +30,11 @@
             &::before
                 left: 20px
 
+    &.tsd-anchor-link
+        padding: 8px 0
+        color: #09f
+        font-weight: 600
+
 .tsd-signature-symbol
     color: $COLOR_TEXT_ASIDE
     font-weight: normal
@@ -52,6 +57,7 @@
     padding: 0
     margin: 0 0 1em 0
     border: 1px solid $COLOR_PANEL_DIVIDER
+    list-style: none
 
     .tsd-signature
         margin: 0

src/assets/js/src/typedoc/components/Search.ts

@@ -125,24 +125,31 @@ function bindEvents(
     });
 }
 
-function checkIndex(state: SearchState, searchEl: HTMLElement) {
+async function checkIndex(state: SearchState, searchEl: HTMLElement) {
     if (state.index) return;
 
     if (window.searchData) {
         searchEl.classList.remove("loading");
         searchEl.classList.add("ready");
-        state.data = window.searchData;
-        state.index = Index.load(window.searchData.index);
+
+        const res = await fetch(window.searchData as unknown as RequestInfo);
+        const json = new Blob([await res.arrayBuffer()])
+            .stream()
+            .pipeThrough(new DecompressionStream("gzip"));
+
+        const data: IData = await new Response(json).json();
+        state.data = data;
+        state.index = Index.load(data.index);
     }
 }
 
-function updateResults(
+async function updateResults(
     searchEl: HTMLElement,
     results: HTMLElement,
     query: HTMLInputElement,
     state: SearchState
 ) {
-    checkIndex(state, searchEl);
+    await checkIndex(state, searchEl);
     // Don't clear results if loading state is not ready,
     // because loading or error message can be removed.
     if (!state.index || !state.data) return;

src/index.tsx

@@ -1,5 +1,5 @@
-import path from 'path';
-import { copy } from "fs-extra";
+import { cpSync } from 'fs';
+import { resolve } from 'path';
 import { navigation } from './partials/navigation';
 import { index } from './partials/index';
 import { memberSources } from './partials/member.sources';
@@ -8,16 +8,16 @@ import { reflectionTemplate } from './templates/reflection';
 import { memberSignatureBody } from './partials/member.signature.body';
 import { breadcrumb } from './partials/breadcrumb';
 
-import { Application, DefaultTheme, DefaultThemeRenderContext, JSX, Options, PageEvent, Reflection, Renderer, RendererEvent } from "typedoc";
+import { Application, DefaultTheme, DefaultThemeRenderContext, JSX, Options, PageEvent, Reflection, RenderTemplate, Renderer, RendererEvent } from "typedoc";
 import { defaultLayout } from "./layouts/default";
 
 function bind<F, L extends any[], R>(fn: (f: F, ...a: L) => R, first: F) {
     return (...r: L) => fn(first, ...r);
 }
 
 export class IgThemeRenderContext extends DefaultThemeRenderContext {
-    constructor(theme: DefaultTheme, options: Options) {
-        super(theme, options);
+    constructor(theme: DefaultTheme, page: PageEvent<Reflection>, options: Options) {
+        super(theme, page, options);
 
         this.reflectionTemplate = bind(reflectionTemplate, this);
         this.navigation = bind(navigation, this);
@@ -27,9 +27,9 @@ export class IgThemeRenderContext extends DefaultThemeRenderContext {
         this.memberSignatureBody = bind(memberSignatureBody, this);
         this.breadcrumb = bind(breadcrumb, this);
 
-        this.defaultLayout = (props: PageEvent<Reflection>) => {
+        this.defaultLayout = (template: RenderTemplate<PageEvent<Reflection>>, props: PageEvent<Reflection>) => {
             return (
-                defaultLayout(this, props)
+                defaultLayout(this, template, props)
             );
         }
     }
@@ -40,23 +40,12 @@ export class IgTheme extends DefaultTheme {
 
     public constructor(renderer: Renderer) {
         super(renderer);
-
-        renderer.on(RendererEvent.END, async () => {
-            const out = this.application.options.getValue('out');
-
-            await copy(
-                path.join(
-                    process.cwd(),
-                    '/node_modules/ig-typedoc-theme/dist/assets',
-                ),
-                path.join(out, '/assets'),
-            );
-        });
     }
 
-    override getRenderContext(): IgThemeRenderContext {
+    override getRenderContext(pageEvent: PageEvent<Reflection>): IgThemeRenderContext {
         this._ctx ||= new IgThemeRenderContext(
             this,
+            pageEvent,
             this.application.options
         );
         return this._ctx;
@@ -78,5 +67,11 @@ export function load(app: Application) {
         )
     )
 
+    app.listenTo(app.renderer, RendererEvent.END, () => {
+        const from = resolve(__dirname, "assets");
+        const to = resolve(app.options.getValue("out"), "assets");
+        cpSync(from, to, { recursive: true });
+    });
+
     app.renderer.defineTheme('igtheme', IgTheme);
 }

src/layouts/default.tsx

@@ -1,12 +1,12 @@
-import { DefaultThemeRenderContext, PageEvent, Reflection, JSX } from "typedoc";
+import { DefaultThemeRenderContext, PageEvent, Reflection, ReflectionKind, JSX, RenderTemplate } from "typedoc";
 import { analytics } from "../partials/analytics";
 import { footer } from "../partials/footer";
 import { header } from "../partials/header";
 import { navigation } from "../partials/navigation";
 import { getConfigData, hasTypeParameters, join } from "../utils/lib";
 const plugin = require('typedoc-plugin-localization');
 
-export const defaultLayout = (context: DefaultThemeRenderContext, props: PageEvent<Reflection>) => {
+export const defaultLayout = (context: DefaultThemeRenderContext, template: RenderTemplate<PageEvent<Reflection>>, props: PageEvent<Reflection>) => {
     const defaultEnUrl = getConfigData(context, 'typedoc_default_url', 'en');
     const defaultJpUrl = getConfigData(context, 'typedoc_default_url', 'jp');
     const baseUrl = getConfigData(context, 'url');
@@ -109,7 +109,7 @@ export const defaultLayout = (context: DefaultThemeRenderContext, props: PageEve
                                 <div class="container">
                                     {!!props.model.parent && <ul class="tsd-breadcrumb">{context.breadcrumb(props.model)}</ul>}
                                     <h1>
-                                        {props.model.kindString !== "Project" && `${props.model.kindString ?? ""} `}
+                                        {ReflectionKind.singularString(props.model.kind) !== "Project" && `${ReflectionKind.singularString(props.model.kind) ?? ""} `}
                                         {props.model.name}
                                         {hasTypeParameters(props.model) && (
                                             <>
@@ -121,7 +121,7 @@ export const defaultLayout = (context: DefaultThemeRenderContext, props: PageEve
                                     </h1>
                                 </div>
                             </div>
-                            {props.template(props)}
+                            {template(props)}
                         </div>
                     </div>
                 </div>