Fix handling of partially loaded document in icons.js

Resolves #2589
TypeStrong · Jun 11, 2024 · 27c8474 · 27c8474
1 parent 325476b
commit 27c8474
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -79,6 +79,7 @@
 -   `charset` is now correctly cased in `<meta>` tag generated by the default theme, #2568.
 -   Fixed very slow conversion on Windows where Msys git was used by typedoc to discover repository links, #2586.
 -   Validation will now be run in watch mode, #2584.
+-   Fixed an issue where custom themes which added dependencies in the `<head>` element could result in broken icons, #2589.
 -   The `--hideParameterTypesInTitle` option no longer applies when rendering function types.
 -   Fixed `externalSymbolLinkMappings` option's support for [meanings](https://typedoc.org/guides/declaration-references/#meaning) in declaration references.
 -   Buttons to copy code now have the `type=button` attribute set to avoid being treated as submit buttons.

diff --git a/src/lib/output/plugins/IconsPlugin.tsx b/src/lib/output/plugins/IconsPlugin.tsx
@@ -5,6 +5,27 @@ import { DefaultTheme } from "../themes/default/DefaultTheme";
 import { join } from "path";
 import { JSX, renderElement } from "../../utils";
 
+const ICONS_JS = `
+(function() {
+    addIcons();
+    function addIcons() {
+        if (document.readyState !== "complete") return addEventListener("load", addIcons);
+        const svg = document.body.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
+        svg.innerHTML = \`"SVG_HTML"\`;
+        svg.style.display = "none";
+        if (location.protocol === "file:") updateUseElements();
+    }
+
+    function updateUseElements() {
+        document.querySelectorAll("use").forEach(el => {
+            if (el.getAttribute("href").includes("#icon-")) {
+                el.setAttribute("href", el.getAttribute("href").replace(/.*#/, "#"));
+            }
+        });
+    }
+})()
+`.trim();
+
 /**
  * Plugin which is responsible for creating an icons.js file that embeds the icon SVGs
  * within the page on page load to reduce page sizes.
@@ -34,23 +55,7 @@ export class IconsPlugin extends RendererComponent {
         }
 
         const svg = renderElement(<svg xmlns="http://www.w3.org/2000/svg">{children}</svg>);
-        const js = [
-            "(function(svg) {",
-            "    svg.innerHTML = `" + renderElement(<>{children}</>).replaceAll("`", "\\`") + "`;",
-            "    svg.style.display = 'none';",
-            "    if (location.protocol === 'file:') {",
-            "        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', updateUseElements);",
-            "        else updateUseElements()",
-            "        function updateUseElements() {",
-            "            document.querySelectorAll('use').forEach(el => {",
-            "                if (el.getAttribute('href').includes('#icon-')) {",
-            "                    el.setAttribute('href', el.getAttribute('href').replace(/.*#/, '#'));",
-            "                }",
-            "            });",
-            "        }",
-            "    }",
-            "})(document.body.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'svg')))",
-        ].join("\n");
+        const js = ICONS_JS.replace("SVG_HTML", renderElement(<>{children}</>).replaceAll("`", "\\`"));
 
         const svgPath = join(event.outputDirectory, "assets/icons.svg");
         const jsPath = join(event.outputDirectory, "assets/icons.js");