Finish customJs feature

Author: Gerrit0

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 
+-   Added `customJs` option to include a script tag in generated HTML output, #2650.
 -   Added `markdownLinkExternal` option to treat `http[s]://` links in markdown documents and comments as external to be opened in a new tab, #2679.
 -   Added `navigation.excludeReferences` option to prevent re-exports from appearing in the left hand navigation, #2685.
 
@@ -13,6 +14,10 @@
 -   The `alphabetical` and `alphabetical-ignoring-documents` sort options now use `localeCompare` to sort, #2684.
 -   Fixed incorrect placement of parameter default values in some signatures with a `this` parameter, #2698.
 
+### Thanks!
+
+-   @Aryakoste
+
 ## v0.26.6 (2024-08-18)
 
 ### Features

src/lib/internationalization/translatable.ts

@@ -131,6 +131,7 @@ export const translatable = {
 
     // output plugins
     custom_css_file_0_does_not_exist: `Custom CSS file at {0} does not exist`,
+    custom_js_file_0_does_not_exist: `Custom JavaScript file at {0} does not exist`,
     unsupported_highlight_language_0_not_highlighted_in_comment_for_1: `Unsupported highlight language {0} will not be highlighted in comment for {1}`,
     unloaded_language_0_not_highlighted_in_comment_for_1: `Code block with language {0} will not be highlighted in comment for {1} as it was not included in the highlightLanguages option`,
     yaml_frontmatter_not_an_object: `Expected YAML frontmatter to be an object`,

src/lib/output/plugins/AssetsPlugin.ts

@@ -13,9 +13,11 @@ import { join } from "path";
  */
 @Component({ name: "assets" })
 export class AssetsPlugin extends RendererComponent {
-    /** @internal */
     @Option("customCss")
-    accessor customCss!: string;
+    private accessor customCss!: string;
+
+    @Option("customJs")
+    private accessor customJs!: string;
 
     getTranslatedStrings() {
         return {
@@ -47,6 +49,18 @@ export class AssetsPlugin extends RendererComponent {
                 );
             }
         }
+
+        if (this.customJs) {
+            if (existsSync(this.customJs)) {
+                copySync(this.customJs, join(dest, "custom.js"));
+            } else {
+                this.application.logger.error(
+                    this.application.i18n.custom_js_file_0_does_not_exist(
+                        this.customJs,
+                    ),
+                );
+            }
+        }
     }
 
     /**

src/lib/output/themes/default/layouts/default.tsx

@@ -28,10 +28,10 @@ export const defaultLayout = (
             {context.options.getValue("customCss") && (
                 <link rel="stylesheet" href={context.relativeURL("assets/custom.css", true)} />
             )}
+            <script defer src={context.relativeURL("assets/main.js", true)}></script>
             {context.options.getValue("customJs") && (
                 <script defer src={context.relativeURL("assets/custom.js", true)}></script>
             )}
-            <script defer src={context.relativeURL("assets/main.js", true)}></script>
             <script async src={context.relativeURL("assets/icons.js", true)} id="tsd-icons-script"></script>
             <script async src={context.relativeURL("assets/search.js", true)} id="tsd-search-script"></script>
             <script async src={context.relativeURL("assets/navigation.js", true)} id="tsd-nav-script"></script>