@financial-times/custom-code-component 2.0.22 → 2.1.0

package/src/custom-code-component.ts

@@ -69,7 +69,12 @@ export class FTCustomCodeComponent extends HTMLElement {
    * Logger instance. Set log level using `this.logger.setLogLevel(string|number|null)`.
    */
   logger: Logger;
-  
+
+  /**
+   * Abort controller used to abort async connectedCallback functionality when disconnectedCallback is called`.
+   */
+  ac: AbortController | null = null;
+
   /**
    * IntersectionObserver that dispatches CCCViewportEvents
    */
@@ -82,7 +87,7 @@ export class FTCustomCodeComponent extends HTMLElement {
           source: this.source,
           intersecting: entry.isIntersecting,
           entry,
-        })
+        }),
       );
     });
   });
@@ -96,7 +101,7 @@ export class FTCustomCodeComponent extends HTMLElement {
   constructor() {
     super();
     this.logger = new Logger();
-    
+
     const supportsDeclarative =
       HTMLElement.prototype.hasOwnProperty("attachInternals");
 
@@ -120,10 +125,11 @@ export class FTCustomCodeComponent extends HTMLElement {
       this.logger.component = this.component;
       this.logger.setLogLevel(this.getAttribute("log"));
       this.logger.debug("connectedCallback");
-
-      this.app = await this.load();
-      await this.mount();
-      await this.initTracking();
+      this.ac?.abort();
+      this.ac = new AbortController();
+      this.app = await this.load(this.ac.signal);
+      this.mount();
+      this.initTracking();
     } catch (e) {
       if (e instanceof Error) {
         requestAnimationFrame(() => {
@@ -150,7 +156,7 @@ export class FTCustomCodeComponent extends HTMLElement {
           composed: true,
           error,
           message: error.message,
-        })
+        }),
       );
     } else {
       // Wrap original error with generic CCC error class
@@ -166,7 +172,7 @@ export class FTCustomCodeComponent extends HTMLElement {
           composed: true,
           error: wrappedError,
           message: wrappedError.message,
-        })
+        }),
       );
     }
   }
@@ -177,8 +183,10 @@ export class FTCustomCodeComponent extends HTMLElement {
    * Called when a <custom-code-component> element is removed from DOM.
    */
   disconnectedCallback() {
+    this.ac?.abort();
     this.logger.debug("disconnectedCallback");
     const path = this.getAttribute("path");
+    this.destroyTracking();
     this.logger.info(`<custom-code-component:${path}> disconnected`);
     this.observer.disconnect();
   }
@@ -233,7 +241,7 @@ export class FTCustomCodeComponent extends HTMLElement {
         new CCCReadyEvent({
           component: this.component,
           source: this.source,
-        })
+        }),
       );
 
       this.dataset.cccReady = "true";
@@ -274,7 +282,7 @@ export class FTCustomCodeComponent extends HTMLElement {
    *
    * @param prerendered
    */
-  async mount(prerendered?: ShadowRoot | null) {
+  mount(prerendered?: ShadowRoot | null) {
     this.logger.debug("mount", prerendered);
     try {
       this.mode =
@@ -292,7 +300,7 @@ export class FTCustomCodeComponent extends HTMLElement {
           new CCCConnectedEvent({
             component: this.component,
             source: this.source,
-          })
+          }),
         );
         // Add global CCC styles if not already present in shadow DOM.
         if (
@@ -322,9 +330,9 @@ export class FTCustomCodeComponent extends HTMLElement {
             .filter(
               (attribute) =>
                 !this.RESERVED_ATTRS.has(attribute.name) &&
-                !attribute.name.startsWith("data-")
+                !attribute.name.startsWith("data-"),
             )
-            .map((attribute) => [attribute.name, attribute.value])
+            .map((attribute) => [attribute.name, attribute.value]),
         );
 
         // Create tracking instance
@@ -340,12 +348,12 @@ export class FTCustomCodeComponent extends HTMLElement {
           this.logger.warn(
             `CCC ${this.component.toString()}: passing component settings as webcomponent attributes is %cDEPRECATED`,
             "font-weight: bold",
-            " and will be removed in v3."
+            " and will be removed in v3.",
           );
           this.logger.warn(
             `Please use the %cdata-component-props`,
             "text-decoration: underline;",
-            " attribute instead."
+            " attribute instead.",
           );
         }
 
@@ -362,7 +370,7 @@ export class FTCustomCodeComponent extends HTMLElement {
               children: this.children,
             },
             ssr,
-            this.onunmount.bind(this)
+            this.onunmount.bind(this),
           ) || {};
 
         if (onmessage) this.onmessage = onmessage;
@@ -371,7 +379,7 @@ export class FTCustomCodeComponent extends HTMLElement {
       }
     } catch (err) {
       this.logger.info(
-        `<custom-code-component> uncaught error during mount from ${this.component?.toString()}`
+        `<custom-code-component> uncaught error during mount from ${this.component?.toString()}`,
       );
       this.logger.error(err);
 
@@ -391,7 +399,7 @@ export class FTCustomCodeComponent extends HTMLElement {
 
     const template =
       this.querySelector<HTMLTemplateElement>(
-        "template[data-component-fallback]"
+        "template[data-component-fallback]",
       ) ?? this.querySelector<HTMLTemplateElement>("template");
 
     if (template) {
@@ -412,7 +420,7 @@ export class FTCustomCodeComponent extends HTMLElement {
    *
    * @returns Promise resolving to component renderer function
    */
-  async load() {
+  async load(signal: AbortSignal) {
     this.logger.debug("load");
 
     if (!this.component.isValid) {
@@ -426,7 +434,7 @@ export class FTCustomCodeComponent extends HTMLElement {
     this.testUrl = assignTestURL(testEnv);
     const isTestEnv = await useComponentTestEnv(
       this.component.name,
-      this.testUrl
+      this.testUrl,
     );
 
     // id querystring necessary to multiple allow components with the same source (same name and version number) to appear on the page correctly
@@ -446,13 +454,14 @@ export class FTCustomCodeComponent extends HTMLElement {
     try {
       return await new Promise<typeof BaseRenderer.prototype.render>(
         (resolve, reject) => {
+          signal.throwIfAborted();
           const to = setTimeout(() => {
             this.logger.error("CCC import timeout error");
             reject(
               new CCCTimeoutError({
                 component: this.component!,
                 source: this.source,
-              })
+              }),
             );
           }, Number(timeout));
 
@@ -468,7 +477,7 @@ export class FTCustomCodeComponent extends HTMLElement {
                     {
                       component: this.component!,
                       source: this.source,
-                    }
+                    },
                   );
               })
               .catch((e) => {
@@ -479,7 +488,7 @@ export class FTCustomCodeComponent extends HTMLElement {
                     new CCCImportError(e.message, {
                       component: this.component!,
                       source: this.source,
-                    })
+                    }),
                   );
                 } else {
                   reject(e);
@@ -492,11 +501,21 @@ export class FTCustomCodeComponent extends HTMLElement {
               source: this.source,
             });
           }
-        }
+
+          signal.addEventListener(
+            "abort",
+            () => {
+              // Stop the main operation
+              // Reject the promise with the abort reason.
+              reject(signal.reason);
+            },
+            { once: true },
+          );
+        },
       );
     } catch (err) {
       this.logger.error(
-        `<custom-code-component> error during import from ${path}@${componentVersionRange}`
+        `<custom-code-component> error during import from ${path}@${componentVersionRange}`,
       );
 
       throw err;
@@ -506,7 +525,7 @@ export class FTCustomCodeComponent extends HTMLElement {
   /**
    * Initialises OTracking
    */
-  initTracking = async () => {
+  initTracking = () => {
     this.logger.debug("initTracking", { cccId: this.id });
     try {
       this.tracking?.init(this.id);
@@ -514,7 +533,24 @@ export class FTCustomCodeComponent extends HTMLElement {
       const path = this.getAttribute("path");
       const componentVersionRange = this.getAttribute("version");
       this.logger.info(
-        `Error initialising tracking on <custom-code-component> ${path}@${componentVersionRange}`
+        `Error initialising tracking on <custom-code-component> ${path}@${componentVersionRange}`,
+      );
+      this.logger.error(e);
+    }
+  };
+
+  /**
+   * Destroys OTracking to avoid duplicate events
+   */
+  destroyTracking = () => {
+    this.logger.debug("destroyTracking", { cccId: this.id });
+    try {
+      this.tracking?.destroy();
+    } catch (e) {
+      const path = this.getAttribute("path");
+      const componentVersionRange = this.getAttribute("version");
+      this.logger.info(
+        `Error destroying tracking on <custom-code-component> ${path}@${componentVersionRange}`,
       );
       this.logger.error(e);
     }

package/src/logger.ts

@@ -49,7 +49,7 @@ export class Logger {
       level: LogLevel.DEFAULT,
     }
   ) {
-    this.level = localStorage.getItem("CCC_LOG_LEVEL")
+    this.level = localStorage?.getItem("CCC_LOG_LEVEL")
       ? convertStringLogLevel(localStorage.getItem("CCC_LOG_LEVEL"))
       : level;
     this.component = component;
@@ -82,7 +82,7 @@ export class Logger {
   }
 
   setLogLevel(level: string | number | null) {
-    if (localStorage.getItem("CCC_LOG_LEVEL")) {
+    if (localStorage?.getItem("CCC_LOG_LEVEL")) {
       this.level = convertStringLogLevel(localStorage.getItem("CCC_LOG_LEVEL"));
     } else if (typeof level === "number") {
       this.level = level;

package/src/tracking.ts

@@ -19,6 +19,7 @@ class Tracking {
   elements: string | string[];
   isInitialised: boolean;
   log: Logger;
+  shadowDelegate: typeof Delegate;
 
   constructor({
     id = "00000000-0000-0000-0000-000000000000",
@@ -68,7 +69,7 @@ class Tracking {
   // Controller for handling click events
   handleClickEvent(
     eventData: { action: string; category: string },
-    root: Element
+    root: Element,
   ) {
     return (clickEvent: Event, clickElement: HTMLElement) => {
       const context: any = this.getEventProperties(clickEvent);
@@ -98,7 +99,7 @@ class Tracking {
           detail: eventData,
           bubbles: true,
           composed: true,
-        })
+        }),
       );
     };
   }
@@ -125,7 +126,7 @@ class Tracking {
         detail: eventData,
         bubbles: true,
         composed: true,
-      })
+      }),
     );
   }
 
@@ -142,16 +143,20 @@ class Tracking {
       const root = this.shadowRoot?.querySelector("[data-component-root]");
 
       if (root) {
-        const shadowDelegate = new Delegate(root);
-        shadowDelegate.on(
+        this.shadowDelegate = new Delegate(root);
+        this.shadowDelegate.on(
           "click",
           this.elements,
           this.handleClickEvent(eventData, root),
-          true
+          true,
         );
       }
     }
   }
+
+  destroy() {
+    this.shadowDelegate?.off();
+  }
 }
 
 export default Tracking;