refactor(documentation-ui): remove container HTMLElement dependency (#569)

Author: fraxken

public/components/wiki/wiki.js

@@ -6,13 +6,25 @@ import { PackageInfo } from "../package/package.js";
 
 export class Wiki {
   constructor() {
-    this.documentationRootElement = document.querySelector("#documentation-root-element");
-    this.documentationRenderContainer = this.documentationRootElement.querySelector(".documentation-render-container");
-    this.openButton = this.documentationRootElement.querySelector(".open-button");
+    this.documentationRootElement = document.querySelector(
+      "#documentation-root-element"
+    );
+    this.openButton = this.documentationRootElement.querySelector(
+      ".open-button"
+    );
+
+    const { container, header, navigation } = documentationUI.render(
+      { preCacheAllFlags: true }
+    );
 
-    const { header, navigation } = documentationUI.render(
-      this.documentationRenderContainer, { preCacheAllFlags: true }
+    const documentationRenderContainer = this.documentationRootElement.querySelector(
+      ".documentation-render-container"
     );
+    for (const node of documentationRenderContainer.childNodes) {
+      node.remove();
+    }
+    documentationRenderContainer.appendChild(container);
+
     /** @type {documentationUI.Header} */
     this.header = header;
     /** @type {Record<string, documentationUI.Navigation>} */

workspaces/documentation-ui/index.js

@@ -47,11 +47,10 @@ const kHeaderMenus = Object.entries(kWikiMenus)
 
 /**
  * @description Render the documentation module in a given container
- * @param {!HTMLElement} rootElement
  * @param {object} [options]
  * @param {boolean} [options.prefetch=false]
  */
-export function render(rootElement, options = {}) {
+export function render(options = {}) {
   const { prefetch = false } = options;
 
   /** @type {Record<string, Navigation>} */
@@ -83,17 +82,13 @@ export function render(rootElement, options = {}) {
   }
 
   const header = new Header(kHeaderMenus, { defaultName: "flags" });
-  const mainContainer = utils.createDOMElement("div", {
+  const container = utils.createDOMElement("div", {
     className: "documentation--main",
     childs: [header.dom, ...containers]
   });
 
-  for (const node of rootElement.childNodes) {
-    node.remove();
-  }
-  rootElement.appendChild(mainContainer);
-
   return {
+    container,
     header,
     navigation
   };