Merge pull request #30 from IgniteUI/dTsvetkov/update-typedoc-version

Update typedoc version and migrate to ESM
IgniteUI · Jan 7, 2025 · 725d253 · 725d253
2 parents b6f6370 + fc3dbc3
commit 725d253
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 168 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "author": "Infragistics",
   "license": "MIT",
   "main": "dist/index.js",
+  "type": "module",
   "files": [
     "dist",
     "LICENSE"
@@ -26,7 +27,7 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/lunr": "^2.3.3",
-    "@types/node": "^18.11.0",
+    "@types/node": "^20.17.6",
     "@types/react": "^17.0.40",
     "autoprefixer": "^9.8.6",
     "clean-webpack-plugin": "^3.0.0",
@@ -43,18 +44,18 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^8.0.12",
-    "typedoc": "^0.26.2",
+    "typedoc": "^0.27.0",
     "typescript": "^5.5.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.11.1",
     "webpack-cli": "^4.3.0",
     "webpack-merge": "^5.7.3"
   },
   "peerDependencies": {
-    "typedoc": "^0.26.2",
-    "typedoc-plugin-localization": "^3.0.5"
+    "typedoc": "^0.27.0",
+    "typedoc-plugin-localization": "^3.0.6"
   },
   "dependencies": {
-    "typedoc-plugin-localization": "^3.0.5"
+    "typedoc-plugin-localization": "^3.0.6"
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,32 @@
-import { cpSync } from 'fs';
-import { resolve } from 'path';
-import { navigation } from './partials/navigation';
-import { index } from './partials/index';
-import { memberSources } from './partials/member.sources';
-import { memberDeclaration } from './partials/member.declarations';
-import { reflectionTemplate } from './templates/reflection';
-import { memberSignatureBody } from './partials/member.signature.body';
-import { breadcrumb } from './partials/breadcrumb';
+import { cpSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { navigation } from "./partials/navigation.js";
+import { index } from "./partials/index.js";
+import { memberSources } from "./partials/member.sources.js";
+import { memberDeclaration } from "./partials/member.declarations.js";
+import { reflectionTemplate } from "./templates/reflection.js";
+import { memberSignatureBody } from "./partials/member.signature.body.js";
+import { breadcrumb } from "./partials/breadcrumb.js";
+
+import {
+    Application,
+    DefaultTheme,
+    DefaultThemeRenderContext,
+    JSX,
+    Options,
+    PageEvent,
+    Reflection,
+    RenderTemplate,
+    Renderer,
+    RendererEvent,
+} from "typedoc";
+import { defaultLayout } from "./layouts/default.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-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);
@@ -28,12 +45,10 @@ export class IgThemeRenderContext extends DefaultThemeRenderContext {
         this.breadcrumb = bind(breadcrumb, this);
 
         this.defaultLayout = (template: RenderTemplate<PageEvent<Reflection>>, props: PageEvent<Reflection>) => {
-            return (
-                defaultLayout(this, template, props)
-            );
-        }
+            return defaultLayout(this, template, props);
+        };
     }
-};
+}
 
 export class IgTheme extends DefaultTheme {
     private _ctx?: IgThemeRenderContext;
@@ -43,35 +58,31 @@ export class IgTheme extends DefaultTheme {
     }
 
     override getRenderContext(pageEvent: PageEvent<Reflection>): IgThemeRenderContext {
-        this._ctx ||= new IgThemeRenderContext(
-            this,
-            pageEvent,
-            this.application.options
-        );
+        this._ctx ||= new IgThemeRenderContext(this, pageEvent, this.application.options);
         return this._ctx;
     }
 }
 
 export function load(app: Application) {
     app.renderer.hooks.on(
-        'head.end',
+        "head.end",
         (context): JSX.Element => (
-            <link rel='stylesheet' href={context.relativeURL('assets/css/main.css')} />
+            <link rel="stylesheet" href={context.relativeURL("assets/css/main.css")} />
         )
-    )
+    );
 
     app.renderer.hooks.on(
-        'body.end',
+        "body.end",
         (context): JSX.Element => (
-            <script src={context.relativeURL('assets/common.js')} />
+            <script src={context.relativeURL("assets/common.js")} />
         )
-    )
+    );
 
     app.renderer.on(RendererEvent.END, () => {
-        const from = resolve(__dirname, "assets");
-        const to = resolve(app.options.getValue("out"), "assets");
+        const from = path.resolve(__dirname, "assets");
+        const to = path.resolve(app.options.getValue("out"), "assets");
         cpSync(from, to, { recursive: true });
     });
 
-    app.renderer.defineTheme('igtheme', IgTheme);
+    app.renderer.defineTheme("igtheme", IgTheme);
 }
diff --git a/src/layouts/default.tsx b/src/layouts/default.tsx
@@ -1,10 +1,10 @@
 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');
+import { analytics } from "../partials/analytics.js";
+import { footer } from "../partials/footer.js";
+import { header } from "../partials/header.js";
+import { navigation } from "../partials/navigation.js";
+import { getConfigData, hasTypeParameters, join } from "../utils/lib.js";
+import { localize } from 'typedoc-plugin-localization';
 
 export const defaultLayout = (context: DefaultThemeRenderContext, template: RenderTemplate<PageEvent<Reflection>>, props: PageEvent<Reflection>) => {
     const defaultEnUrl = getConfigData(context, 'typedoc_default_url', 'en');
@@ -68,7 +68,7 @@ export const defaultLayout = (context: DefaultThemeRenderContext, template: Rend
                             <div class="table-cell" id="tsd-search" data-index={searchPath} data-base={context.relativeURL("./")}>
                                 <div class="field">
                                     <label for="tsd-search-field" class="material-icons">search</label>
-                                    <input id="tsd-search-field" type="text" placeholder={plugin.localize('Search API')} />
+                                    <input id="tsd-search-field" type="text" placeholder={localize('Search API')} />
                                 </div>
                                 <ul class="results">
                                     <li class="state loading">Preparing search index...</li>
@@ -78,26 +78,26 @@ export const defaultLayout = (context: DefaultThemeRenderContext, template: Rend
                             <div id="tsd-filter">
                                 <div class="tsd-filter-group">
                                     <div class="tsd-select" id="tsd-filter-visibility">
-                                        <span class="tsd-select-label">{plugin.localize('All')}</span>
+                                        <span class="tsd-select-label">{localize('All')}</span>
                                             <ul class="tsd-select-list">
-                                                <li data-value="public">{plugin.localize('Public')}</li>
-                                                <li data-value="protected">{plugin.localize('Public/Protected')}</li>
-                                                <li data-value="private" class="selected">{plugin.localize('All')}</li>
+                                                <li data-value="public">{localize('Public')}</li>
+                                                <li data-value="protected">{localize('Public/Protected')}</li>
+                                                <li data-value="private" class="selected">{localize('All')}</li>
                                             </ul>
                                     </div>
                                     <input type="checkbox" id="tsd-filter-inherited" checked />
-                                    <label class="tsd-widget" for="tsd-filter-inherited">{plugin.localize('Inherited')}</label>
+                                    <label class="tsd-widget" for="tsd-filter-inherited">{localize('Inherited')}</label>
 
                                     {!context.options.getValue("excludeExternals") && (
                                     <>
                                         <input type="checkbox" id="tsd-filter-externals" checked={true} />
-                                        <label class="tsd-widget" for="tsd-filter-externals">{plugin.localize('Externals')}</label>
+                                        <label class="tsd-widget" for="tsd-filter-externals">{localize('Externals')}</label>
                                     </>
                                     )}
                                     {!context.options.getValue("excludeExternals") && (
                                     <>
                                         <input type="checkbox" id="tsd-filter-externals" />
-                                        <label class="tsd-widget" for="tsd-filter-only-exported">{plugin.localize('Only exported')}</label>
+                                        <label class="tsd-widget" for="tsd-filter-only-exported">{localize('Only exported')}</label>
                                     </>
                                     )}
                                 </div>

diff --git a/src/partials/analytics.tsx b/src/partials/analytics.tsx
@@ -1,5 +1,5 @@
 import { DefaultThemeRenderContext, JSX } from "typedoc";
-import { getConfigData } from "../utils/lib";
+import { getConfigData } from "../utils/lib.js";
 
 export function analytics(context: DefaultThemeRenderContext) {
     const gaID = getConfigData(context, "gaID");

diff --git a/src/partials/breadcrumb.tsx b/src/partials/breadcrumb.tsx
@@ -1,5 +1,5 @@
 import { DefaultThemeRenderContext, Reflection, JSX } from "typedoc";
-const plugin = require('typedoc-plugin-localization');
+import { localize } from 'typedoc-plugin-localization';
 
 export const breadcrumb = (context: DefaultThemeRenderContext, props: Reflection): JSX.Element | undefined =>
     props.parent ? (
@@ -9,6 +9,6 @@ export const breadcrumb = (context: DefaultThemeRenderContext, props: Reflection
         </>
     ) : props.url ? (
         <li>
-            <a href={context.urlTo(props)}>{plugin.localize('Globals')}</a>
+            <a href={context.urlTo(props)}>{localize('Globals')}</a>
         </li>
     ) : undefined;
diff --git a/src/partials/footer.tsx b/src/partials/footer.tsx
@@ -1,6 +1,6 @@
 import {DefaultThemeRenderContext, JSX, PageEvent, Reflection} from 'typedoc';
-import { footerEn } from './infrafoot';
-import { footerJp } from './infrafoot.ja';
+import { footerEn } from './infrafoot.js';
+import { footerJp } from './infrafoot.ja.js';
 
 export function footer(context: DefaultThemeRenderContext, props: PageEvent<Reflection>) {
     if (!context.options.getValue('name').includes('Ignite UI')) {

diff --git a/src/partials/header.tsx b/src/partials/header.tsx
@@ -1,7 +1,7 @@
 import { DefaultThemeRenderContext, PageEvent, Reflection, JSX } from 'typedoc';
-import { navEn } from './infranav';
-import { navJp } from './infranav.ja';
-const plugin = require('typedoc-plugin-localization');
+import { navEn } from './infranav.js';
+import { navJp } from './infranav.ja.js';
+import { localize } from 'typedoc-plugin-localization';
 
 export const header = (context: DefaultThemeRenderContext, props: PageEvent<Reflection>) => {
     if (!context.options.getValue('name').includes('Ignite UI')) {
@@ -36,12 +36,12 @@ export const header = (context: DefaultThemeRenderContext, props: PageEvent<Refl
                         <ul class="tsd-nav">
                             <li class="tsd-nav-item">
                                 <button class="tsd-button--flat">
-                                    <a href={link}>{plugin.localize('Components')}</a>
+                                    <a href={link}>{localize('Components')}</a>
                                 </button>
                             </li>
                             <li class="tsd-nav-item">
                                 <button class="tsd-button">
-                                    <a href={link}>{plugin.localize('Get Started')}</a>
+                                    <a href={link}>{localize('Get Started')}</a>
                                 </button>
                             </li>
                         </ul>

diff --git a/src/partials/index.tsx b/src/partials/index.tsx
@@ -1,5 +1,5 @@
 import { DefaultThemeRenderContext, ReflectionCategory, JSX, ContainerReflection, ReflectionKind} from "typedoc";
-import { wbr } from "../utils/lib";
+import { wbr } from "../utils/lib.js";
 
 function renderCategory({ urlTo }: DefaultThemeRenderContext, item: ReflectionCategory, prependName = "") {
     return (

diff --git a/src/partials/member.declarations.tsx b/src/partials/member.declarations.tsx
@@ -1,6 +1,6 @@
 import { DeclarationReflection, DefaultThemeRenderContext, JSX, ReflectionType } from 'typedoc';
-import { renderTypeParametersSignature, wbr } from '../utils/lib';
-const plugin = require('typedoc-plugin-localization');
+import { renderTypeParametersSignature, wbr } from '../utils/lib.js';
+import { localize } from 'typedoc-plugin-localization';
 
 export const memberDeclaration = (context: DefaultThemeRenderContext, props: DeclarationReflection) => (
     <>
@@ -30,14 +30,14 @@ export const memberDeclaration = (context: DefaultThemeRenderContext, props: Dec
 
         {!!props.typeParameters && (
             <>
-                <h4 class="tsd-type-parameters-title">{plugin.localize('Type parameters')}</h4>
+                <h4 class="tsd-type-parameters-title">{localize('Type parameters')}</h4>
                 {context.typeParameters(props.typeParameters)}
             </>
         )}
         {props.type instanceof ReflectionType && (
             <div class="tsd-type-declaration">
-                <h4>{plugin.localize('Type declaration')}</h4>
-                {context.parameter(props.type.declaration)}
+                <h4>{localize('Type declaration')}</h4>
+                {context.typeDeclaration(props.type)}
             </div>
         )}
     </>

diff --git a/src/partials/member.signature.body.tsx b/src/partials/member.signature.body.tsx
@@ -1,6 +1,6 @@
 import { DefaultThemeRenderContext, JSX, ReflectionType, SignatureReflection } from 'typedoc';
-import { renderFlags } from '../utils/lib';
-const plugin = require('typedoc-plugin-localization');
+import { renderFlags } from '../utils/lib.js';
+import { localize } from 'typedoc-plugin-localization';
 
 export const memberSignatureBody = (
     context: DefaultThemeRenderContext,
@@ -14,13 +14,13 @@ export const memberSignatureBody = (
 
         {!!props.typeParameters && (
             <>
-                <h4 class="tsd-type-parameters-title">{plugin.localize('Type parameters')}</h4>
+                <h4 class="tsd-type-parameters-title">{localize('Type parameters')}</h4>
                 {context.typeParameters(props.typeParameters)}
             </>
         )}
         {props.parameters && props.parameters.length > 0 && (
             <>
-                <h4 class="tsd-parameters-title">{plugin.localize('Parameters')}</h4>
+                <h4 class="tsd-parameters-title">{localize('Parameters')}</h4>
                 <ul class="tsd-parameters">
                     {props.parameters.map((item) => (
                         <li>
@@ -39,7 +39,7 @@ export const memberSignatureBody = (
                             </h5>
                             {context.commentSummary(item)}
                             {context.commentTags(item)}
-                            {item.type instanceof ReflectionType && context.parameter(item.type.declaration)}
+                            {item.type instanceof ReflectionType && context.typeDeclaration(item.type)}
                         </li>
                     ))}
                 </ul>
@@ -48,10 +48,10 @@ export const memberSignatureBody = (
         {props.type && (
             <>
                 <h4 class="tsd-returns-title">
-                    {plugin.localize('Returns') + ' '}
+                    {localize('Returns') + ' '}
                     {context.type(props.type)}
                 </h4>
-                {props.type instanceof ReflectionType && context.parameter(props.type.declaration)}
+                {props.type instanceof ReflectionType && context.typeDeclaration(props.type)}
             </>
         )}
     </>

diff --git a/src/partials/member.sources.tsx b/src/partials/member.sources.tsx
@@ -1,5 +1,5 @@
 import { DeclarationReflection, DefaultThemeRenderContext, JSX, SignatureReflection } from 'typedoc';
-const plugin = require('typedoc-plugin-localization');
+import { localize } from 'typedoc-plugin-localization';
 
 export const memberSources = (
     context: DefaultThemeRenderContext,
@@ -10,23 +10,23 @@ export const memberSources = (
     if (props.implementationOf) {
         sources.push(
             <p>
-                {plugin.localize('Implementation of') + ' '}
+                {localize('Implementation of') + ' '}
                 {context.typeAndParent(props.implementationOf)}
             </p>
         );
     }
     if (props.inheritedFrom) {
         sources.push(
             <p>
-                {plugin.localize('Inherited from') + ' '}
+                {localize('Inherited from') + ' '}
                 {context.typeAndParent(props.inheritedFrom)}
             </p>
         );
     }
     if (props.overwrites) {
         sources.push(
             <p>
-                {plugin.localize('Overrides') + ' '}
+                {localize('Overrides') + ' '}
                 {context.typeAndParent(props.overwrites)}
             </p>
         );
@@ -37,14 +37,14 @@ export const memberSources = (
                 {props.sources.map((item) =>
                     item.url ? (
                         <li>
-                            {plugin.localize('Defined in') + ' '}
+                            {localize('Defined in') + ' '}
                             <a href={item.url}>
                                 {item.fileName}:{item.line}
                             </a>
                         </li>
                     ) : (
                         <li>
-                            {plugin.localize('Defined in') + ' '} {item.fileName}:{item.line}
+                            {localize('Defined in') + ' '} {item.fileName}:{item.line}
                         </li>
                     )
                 )}