Use just regular JavaScript events instead of ContextRoot

Author: humitos

package-lock.json

@@ -62,7 +62,6 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "@lit/context": "^1.1.3"
+    "@floating-ui/dom": "^1.6.13"
   }
 }

package.json

@@ -1,5 +1,9 @@
 import { CSSResult } from "lit";
 
+import {
+  EVENT_READTHEDOCS_ADDONS_DATA_READY,
+  EVENT_READTHEDOCS_URL_CHANGED,
+} from "./events";
 import { getReadTheDocsConfig } from "./readthedocs-config";
 import * as notification from "./notification";
 import * as analytics from "./analytics";
@@ -24,25 +28,14 @@ import {
 } from "./utils";
 
 import doctoolsStyleSheet from "./doctools.css";
-import { html, nothing, render, LitElement } from "lit";
-import { ContextConsumer } from "@lit/context";
-import { configContext } from "./context.js";
-
-export class AddonsAppElement extends LitElement {
-  static elementName = "readthedocs-application";
-
-  // `_config` is the context we are going to consume when it's updated.
-  _config = new ContextConsumer(this, {
-    context: configContext,
-    subscribe: true,
-  });
 
+export class AddonsApplication {
   constructor() {
-    super();
+    this.config = null;
 
     console.log(
-      "Addons Application _config (from constructor() method)",
-      this._config.value,
+      "Addons Application config (from constructor() method)",
+      this.config,
     );
 
     this.addons = [
@@ -67,29 +60,29 @@ export class AddonsAppElement extends LitElement {
 
     setupLogging();
     setupHistoryEvents();
+    this.addDoctoolData();
     getReadTheDocsConfig(this.sendUrlParam()); // .then(() => console.log("Finished"));;
   }
 
-  render() {
-    console.log(
-      "Addons Application _config (from render() method)",
-      this._config.value,
-    );
+  reload(config) {
+    console.log("Addons Application config (from reload() method)", config);
 
-    if (!this._config.value) {
-      return nothing;
+    if (!config) {
+      return null;
     }
 
-    if (this._config.value && !this.loadWhenEmbedded()) {
-      return nothing;
+    this.config = config;
+
+    if (this.config && !this.loadWhenEmbedded()) {
+      return null;
     }
 
     let promises = [];
     for (const addon of this.addons) {
-      if (addon.isEnabled(this._config.value, this.httpStatus)) {
+      if (addon.isEnabled(this.config, this.httpStatus)) {
         promises.push(
           new Promise((resolve) => {
-            resolve(new addon(this._config.value));
+            resolve(new addon(this.config));
           }),
         );
       }
@@ -99,12 +92,12 @@ export class AddonsAppElement extends LitElement {
       console.error(err);
     });
 
-    return nothing;
+    return null;
   }
 
   loadWhenEmbedded() {
     const loadWhenEmbedded = objectPath.get(
-      this._config.value,
+      this.config,
       "addons.options.load_when_embedded",
       false,
     );
@@ -152,5 +145,4 @@ export class AddonsAppElement extends LitElement {
   }
 }
 
-customElements.define("readthedocs-application", AddonsAppElement);
-render(new AddonsAppElement(), document.body);
+export const addonsApplication = new AddonsApplication();

src/application.js

@@ -1,4 +1,6 @@
 import { ADDONS_API_VERSION, getMetadataValue } from "./utils";
+import { addonsApplication } from "./application";
+import { getReadTheDocsConfig } from "./readthedocs-config";
 
 export const EVENT_READTHEDOCS_SEARCH_SHOW = "readthedocs-search-show";
 export const EVENT_READTHEDOCS_SEARCH_HIDE = "readthedocs-search-hide";
@@ -14,14 +16,23 @@ export const EVENT_READTHEDOCS_FLYOUT_HIDE = "readthedocs-flyout-hide";
 export const EVENT_READTHEDOCS_URL_CHANGED = "readthedocs-url-changed";
 
 /**
- * Event triggered when the Read the Docs data is ready to be consumed.
+ * Event triggered when the Read the Docs data is ready to be consumed by users.
  *
  * This is the event users subscribe to to make usage of Read the Docs data.
  * The object received is `ReadTheDocsEventData`.
  */
-export const EVENT_READTHEDOCS_ADDONS_DATA_READY =
+export const EVENT_READTHEDOCS_ADDONS_USER_DATA_READY =
   "readthedocs-addons-data-ready";
 
+/**
+ * Event triggered when the Read the Docs data is ready to be consumed internally.
+ *
+ * This is the event users subscribe to to make usage of Read the Docs data.
+ * The object received is `ReadTheDocsEventData`.
+ */
+export const EVENT_READTHEDOCS_ADDONS_INTERNAL_DATA_READY =
+  "readthedocs-addons-internal-data-ready";
+
 /**
  * Event triggered when any addons modifies the root DOM.
  *
@@ -79,3 +90,26 @@ export class ReadTheDocsEventData {
     return httpStatus;
   }
 }
+
+/**
+ * Subscribe to `EVENT_READTHEDOCS_ADDONS_DATA_READY` to reload all the events
+ * with Addons API data once it's ready.
+ *
+ */
+document.addEventListener(
+  EVENT_READTHEDOCS_ADDONS_INTERNAL_DATA_READY,
+  (event) => {
+    addonsApplication.reload(event.detail.data(true));
+  },
+);
+
+/**
+ * Subscribe to `EVENT_READTHEDOCS_URL_CHANGED` to trigger a new request to
+ * Addons API to fetch fresh data.
+ *
+ */
+window.addEventListener(EVENT_READTHEDOCS_URL_CHANGED, (event) => {
+  console.debug("URL Change detected. Triggering a new API call", event);
+  // TODO: find a way to get access to the `AddonApplication.sendUrlParam()` method.
+  getReadTheDocsConfig(true);
+});

src/context.js

@@ -1,6 +1,7 @@
 import { default as fetch } from "unfetch";
 import {
-  EVENT_READTHEDOCS_ADDONS_DATA_READY,
+  EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,
+  EVENT_READTHEDOCS_ADDONS_INTERNAL_DATA_READY,
   ReadTheDocsEventData,
 } from "./events";
 import {
@@ -108,6 +109,14 @@ export function getReadTheDocsConfig(sendUrlParam) {
         return response.json();
       })
       .then((data) => {
+        // Trigger the addons data ready CustomEvent to with the data the user is expecting.
+        console.log("Dispatching the event...");
+        return dispatchEvent(
+          EVENT_READTHEDOCS_ADDONS_INTERNAL_DATA_READY,
+          document,
+          new ReadTheDocsEventData(data),
+        );
+
         // Trigger a new task here to hit the API again in case the version
         // request missmatchs the one the user expects.
         getReadTheDocsUserConfig(sendUrlParam).then((dataUser) => {
@@ -116,7 +125,7 @@ export function getReadTheDocsConfig(sendUrlParam) {
 
           // Trigger the addons data ready CustomEvent to with the data the user is expecting.
           return dispatchEvent(
-            EVENT_READTHEDOCS_ADDONS_DATA_READY,
+            EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,
             document,
             new ReadTheDocsEventData(dataEvent),
           );

src/events.js

@@ -176,7 +176,7 @@ export class AddonBase {
  */
 export function setupHistoryEvents() {
   // Let's ensure that the history will be patched only once, so we create a Symbol to check by
-  const patchKey = Symbol.for("addons_history");
+  const patchKey = Symbol.for("addons-history");
 
   if (
     typeof history !== "undefined" &&