@financial-times/cp-content-pipeline-ui 7.3.0 → 7.4.0-beta.0

package/CHANGELOG.md

@@ -574,6 +574,14 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [7.3.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.3.0...cp-content-pipeline-ui-v7.3.1) (2024-10-09)
+
+
+### Bug Fixes
+
+* remove duplicate id in ccc elements ([deadf51](https://github.com/Financial-Times/cp-content-pipeline/commit/deadf51f8a29da8da93c33bf129d25c354d1f565))
+* return early if already initialised ([ab7860d](https://github.com/Financial-Times/cp-content-pipeline/commit/ab7860d2e9299122893384a1afc3104307e4fc71))
+
 ## [7.3.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.2.1...cp-content-pipeline-ui-v7.3.0) (2024-10-07)
 
 

package/lib/components/Message/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type MessageProps = {
-    id: string;
+    id?: string;
     type?: string;
     state?: string;
     text?: string;

package/lib/components/content-tree/CustomCodeComponent/client/index.d.ts

@@ -11,7 +11,7 @@ declare class CustomCodeComponentClient {
      */
     tracking: CustomCodeComponentTracker;
     constructor(el: Element);
-    static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[];
+    static init(rootEl?: Element): CustomCodeComponentClient[] | void;
     static destroy(components: CustomCodeComponentClient[]): void;
 }
 export default CustomCodeComponentClient;

package/lib/components/content-tree/CustomCodeComponent/client/index.js

@@ -20,7 +20,12 @@ class CustomCodeComponentClient {
     }
     static init(rootEl) {
         const root = rootEl instanceof Element ? rootEl : document;
-        return Array.from(root.querySelectorAll('custom-code-component')).map((el) => new CustomCodeComponentClient(el));
+        return Array.from(root.querySelectorAll('custom-code-component')).reduce((acc, el) => {
+            if (!el.hasAttribute('data-o-tracking-initialised')) {
+                acc.push(new CustomCodeComponentClient(el));
+            }
+            return acc;
+        }, []);
     }
     static destroy(components) {
         components.forEach((component) => {

package/lib/components/content-tree/CustomCodeComponent/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAAA,yCAAuD;AAEvD;;;;;GAKG;AACH,MAAM,yBAAyB;IAM7B,YAAY,EAAW;QACrB,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,qCAA0B,CAAC,EAAa,EAAE,YAAY,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CACnE,CAAC,EAAW,EAAE,EAAE,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CACnD,CAAA;IACH,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,UAAuC;QACpD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAAA,yCAAuD;AAEvD;;;;;GAKG;AACH,MAAM,yBAAyB;IAM7B,YAAY,EAAW;QACrB,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,qCAA0B,CAC5C,EAAiB,EACjB,YAAY,CACb,CAAA;IACH,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAEtE,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE;YACZ,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,6BAA6B,CAAC,EAAE,CAAC;gBACpD,GAAG,CAAC,IAAI,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAA;YAC7C,CAAC;YACD,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAE,CAAC,CAAA;IACR,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,UAAuC;QACpD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}

package/lib/components/content-tree/CustomCodeComponent/client/tracking.d.ts

@@ -16,10 +16,12 @@ type TrackingData = {
 declare class CustomCodeComponentTracker {
     private component;
     private trackingData;
-    private observer;
-    private viewing;
-    constructor(component: Element, trackingData: TrackingData);
+    private mutationObserver?;
+    private intersectionObserver?;
+    private viewing?;
+    constructor(component: HTMLElement, trackingData: TrackingData);
     private init;
+    private mutationCallback;
     private onCccConnected;
     private onCccError;
     private onView;

package/lib/components/content-tree/CustomCodeComponent/client/tracking.js

@@ -13,31 +13,52 @@ class CustomCodeComponentTracker {
         this.trackingData = trackingData;
         this.component = component;
         this.trackingData = trackingData;
-        // this needs to instantiated here so that it can be accessed correctly in the destroy method
+        // we're using a mutation observer to watch for changes to the component rather than event listeners
+        // as dynamic imports in the app are run before the tracking client can be instantiated on second
+        // and subsequent page visits in a session
+        // the observers need to instantiated here so that they can be accessed correctly in the destroy method
         // called by the app
-        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+        this.mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
+        this.mutationObserver.observe(this.component, {
+            attributes: true,
+            attributeFilter: ['data-ccc-ready', 'data-ccc-error'],
+        });
+        this.intersectionObserver = new IntersectionObserver(this.onChange.bind(this), {
             rootMargin: `0px 0px -300px 0px`,
             threshold: 0,
         });
-        this.observer.observe(this.component);
+        this.intersectionObserver.observe(this.component);
         this.viewing = false;
         this.destroy = this.destroy.bind(this);
         this.init();
     }
     init() {
-        if (this.component.hasAttribute('data-o-tracking-initialised')) {
-            return;
-        }
         this.dispatchEvent('mount');
-        this.component.addEventListener('error', this.onCccError.bind(this));
-        this.component.addEventListener('ccc-connected', this.onCccConnected.bind(this));
+        if (this.component.dataset.cccError) {
+            this.onCccError();
+        }
+        if (this.component.dataset.cccReady) {
+            this.onCccConnected();
+        }
         this.component.setAttribute('data-o-tracking-initialised', 'true');
     }
+    mutationCallback(mutationsList) {
+        for (const mutation of mutationsList) {
+            if (mutation.attributeName === 'data-ccc-ready') {
+                this.onCccConnected();
+            }
+            if (mutation.attributeName === 'data-ccc-error') {
+                this.onCccError();
+            }
+        }
+    }
     onCccConnected() {
         this.dispatchEvent('act', { trigger_action: 'success' });
     }
     onCccError() {
-        this.dispatchEvent('act', { trigger_action: 'error' });
+        this.dispatchEvent('act', {
+            trigger_action: `error: ${this.component.dataset.cccError}`,
+        });
     }
     onView() {
         this.dispatchEvent('view');
@@ -75,15 +96,13 @@ class CustomCodeComponentTracker {
         });
     }
     destroy() {
-        if (this.observer && this.component) {
-            this.observer.unobserve(this.component);
-            this.observer.disconnect();
-            this.component.removeEventListener('ccc-connected', this.onCccConnected.bind(this));
-            this.component.removeEventListener('error', this.onCccError.bind(this));
-            if (this.viewing) {
-                this.onExitView();
-            }
-        }
+        if (!this.component)
+            return;
+        this.component.removeAttribute('data-o-tracking-initialised');
+        this.mutationObserver?.disconnect();
+        this.intersectionObserver?.unobserve(this.component);
+        this.intersectionObserver?.disconnect();
+        this.viewing && this.onExitView();
     }
 }
 exports.CustomCodeComponentTracker = CustomCodeComponentTracker;

package/lib/components/content-tree/CustomCodeComponent/client/tracking.js.map

@@ -1 +1 @@
-{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/tracking.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/tracking.ts"],"names":[],"mappings":"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"}

package/lib/components/content-tree/CustomCodeComponent/index.js

@@ -10,7 +10,7 @@ const RichText_1 = __importDefault(require("../../RichText"));
 const CustomCodeComponent = ({ content: { path, versionRange, id, layoutWidth = 'in-line', attributes = {}, body, }, }) => {
     return (react_1.default.createElement(Layout_1.Layout, { content: { type: 'layout', layoutName: 'auto', layoutWidth: layoutWidth } },
         react_1.default.createElement("custom-code-component", { path: path, version: versionRange, ...attributes, id: id },
-            react_1.default.createElement(Message_1.default, { id: id, type: "notice", state: "inform" }),
+            react_1.default.createElement(Message_1.default, { type: "notice", state: "inform" }),
             body?.structured && react_1.default.createElement(RichText_1.default, { structuredContent: body.structured }))));
 };
 exports.default = CustomCodeComponent;

package/lib/components/content-tree/CustomCodeComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/CustomCodeComponent/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AACnC,sCAAkC;AAClC,8DAAqC;AAqBrC,MAAM,mBAAmB,GAErB,CAAC,EACH,OAAO,EAAE,EACP,IAAI,EACJ,YAAY,EACZ,EAAE,EACF,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,EAAE,EACf,IAAI,GACL,GACwB,EAAE,EAAE;IAC7B,OAAO,CACL,8BAAC,eAAM,IACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE;QAEzE,yDACE,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAAY,KACjB,UAAU,EACd,EAAE,EAAE,EAAE;YAEN,8BAAC,iBAAO,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,GAAG;YAC/C,IAAI,EAAE,UAAU,IAAI,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,GAAI,CAC/C,CACjB,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/CustomCodeComponent/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AACnC,sCAAkC;AAClC,8DAAqC;AAqBrC,MAAM,mBAAmB,GAErB,CAAC,EACH,OAAO,EAAE,EACP,IAAI,EACJ,YAAY,EACZ,EAAE,EACF,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,EAAE,EACf,IAAI,GACL,GACwB,EAAE,EAAE;IAC7B,OAAO,CACL,8BAAC,eAAM,IACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE;QAEzE,yDACE,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAAY,KACjB,UAAU,EACd,EAAE,EAAE,EAAE;YAEN,8BAAC,iBAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,GAAG;YACvC,IAAI,EAAE,UAAU,IAAI,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,GAAI,CAC/C,CACjB,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "7.3.0",
+  "version": "7.4.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Message/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 export type MessageProps = {
-  id: string
+  id?: string
   type?: string
   state?: string
   text?: string

package/src/components/content-tree/CustomCodeComponent/client/index.ts

@@ -20,14 +20,22 @@ class CustomCodeComponentClient {
         type: 'custom-code-component',
       },
     }
-    this.tracking = new CustomCodeComponentTracker(el as Element, trackingData)
+    this.tracking = new CustomCodeComponentTracker(
+      el as HTMLElement,
+      trackingData
+    )
   }
 
-  static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[] {
+  static init(rootEl?: Element): CustomCodeComponentClient[] | void {
     const root = rootEl instanceof Element ? rootEl : document
-    return Array.from(root.querySelectorAll('custom-code-component')).map(
-      (el: Element) => new CustomCodeComponentClient(el)
-    )
+    return Array.from(root.querySelectorAll('custom-code-component')).reduce<
+      CustomCodeComponentClient[]
+    >((acc, el) => {
+      if (!el.hasAttribute('data-o-tracking-initialised')) {
+        acc.push(new CustomCodeComponentClient(el))
+      }
+      return acc
+    }, [])
   }
 
   static destroy(components: CustomCodeComponentClient[]): void {

package/src/components/content-tree/CustomCodeComponent/client/tracking.ts

@@ -16,43 +16,73 @@ type TrackingData = {
  * @param {TrackingData} trackingData - The specific component data
  */
 class CustomCodeComponentTracker {
-  private observer: IntersectionObserver
-  private viewing: boolean
+  private mutationObserver?: MutationObserver
+  private intersectionObserver?: IntersectionObserver
+  private viewing?: boolean
 
-  constructor(private component: Element, private trackingData: TrackingData) {
+  constructor(
+    private component: HTMLElement,
+    private trackingData: TrackingData
+  ) {
     this.component = component
     this.trackingData = trackingData
-    // this needs to instantiated here so that it can be accessed correctly in the destroy method
+    // we're using a mutation observer to watch for changes to the component rather than event listeners
+    // as dynamic imports in the app are run before the tracking client can be instantiated on second
+    // and subsequent page visits in a session
+    // the observers need to instantiated here so that they can be accessed correctly in the destroy method
     // called by the app
-    this.observer = new IntersectionObserver(this.onChange.bind(this), {
-      rootMargin: `0px 0px -300px 0px`,
-      threshold: 0,
+    this.mutationObserver = new MutationObserver(
+      this.mutationCallback.bind(this)
+    )
+    this.mutationObserver.observe(this.component, {
+      attributes: true,
+      attributeFilter: ['data-ccc-ready', 'data-ccc-error'],
     })
-    this.observer.observe(this.component)
+    this.intersectionObserver = new IntersectionObserver(
+      this.onChange.bind(this),
+      {
+        rootMargin: `0px 0px -300px 0px`,
+        threshold: 0,
+      }
+    )
+    this.intersectionObserver.observe(this.component)
     this.viewing = false
     this.destroy = this.destroy.bind(this)
     this.init()
   }
 
   private init() {
-    if (this.component.hasAttribute('data-o-tracking-initialised')) {
-      return
-    }
     this.dispatchEvent('mount')
-    this.component.addEventListener('error', this.onCccError.bind(this))
-    this.component.addEventListener(
-      'ccc-connected',
-      this.onCccConnected.bind(this)
-    )
+    if (this.component.dataset.cccError) {
+      this.onCccError()
+    }
+
+    if (this.component.dataset.cccReady) {
+      this.onCccConnected()
+    }
+
     this.component.setAttribute('data-o-tracking-initialised', 'true')
   }
 
+  private mutationCallback(mutationsList: MutationRecord[]): void {
+    for (const mutation of mutationsList) {
+      if (mutation.attributeName === 'data-ccc-ready') {
+        this.onCccConnected()
+      }
+      if (mutation.attributeName === 'data-ccc-error') {
+        this.onCccError()
+      }
+    }
+  }
+
   private onCccConnected(): void {
     this.dispatchEvent('act', { trigger_action: 'success' })
   }
 
   private onCccError(): void {
-    this.dispatchEvent('act', { trigger_action: 'error' })
+    this.dispatchEvent('act', {
+      trigger_action: `error: ${this.component.dataset.cccError}`,
+    })
   }
 
   private onView(): void {
@@ -99,18 +129,14 @@ class CustomCodeComponentTracker {
   }
 
   destroy(): void {
-    if (this.observer && this.component) {
-      this.observer.unobserve(this.component)
-      this.observer.disconnect()
-      this.component.removeEventListener(
-        'ccc-connected',
-        this.onCccConnected.bind(this)
-      )
-      this.component.removeEventListener('error', this.onCccError.bind(this))
-      if (this.viewing) {
-        this.onExitView()
-      }
-    }
+    if (!this.component) return
+
+    this.component.removeAttribute('data-o-tracking-initialised')
+    this.mutationObserver?.disconnect()
+    this.intersectionObserver?.unobserve(this.component)
+    this.intersectionObserver?.disconnect()
+
+    this.viewing && this.onExitView()
   }
 }
 

package/src/components/content-tree/CustomCodeComponent/index.tsx

@@ -44,7 +44,7 @@ const CustomCodeComponent: React.FC<
         {...attributes}
         id={id}
       >
-        <Message id={id} type="notice" state="inform" />
+        <Message type="notice" state="inform" />
         {body?.structured && <RichText structuredContent={body.structured} />}
       </custom-code-component>
     </Layout>