@financial-times/custom-code-component 1.9.8 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/custom-code-component",
3
- "version": "1.9.8",
3
+ "version": "1.10.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -26,11 +26,13 @@
26
26
  "vite-plugin-dts": "^3.6.0"
27
27
  },
28
28
  "dependencies": {
29
- "@financial-times/o-tracking": "^4.5.4",
30
29
  "ftdomdelegate": "^5.0.0",
31
30
  "react": "^18.2.0",
32
31
  "react-dom": "^18.2.0"
33
32
  },
33
+ "peerDependencies": {
34
+ "@financial-times/o-tracking": "4.x"
35
+ },
34
36
  "overrides": {
35
37
  "react-dom16": {
36
38
  "react": "react16"
@@ -91,11 +91,15 @@ class FTCustomCodeComponent extends HTMLElement {
91
91
 
92
92
  if (!componentName || !componentRepo || !componentOrg) return;
93
93
 
94
+ const id = this.getAttribute('id');
95
+
96
+ // id querystring necessary to multiple allow components with the same source (same name and version number) to appear on the page correctly
94
97
  this.source = useLocalVersion
95
- ? `http://localhost:5173/src/${componentName}/index.jsx`
98
+ ? `http://localhost:5173/src/${componentName}/index.jsx?id=${id}`
96
99
  : `https://www.ft.com/__component/${componentOrg}/${componentRepo}${
97
100
  componentVersionRange ? `@${componentVersionRange}` : "@latest"
98
- }/${componentName}/${componentName}.js`;
101
+ }/${componentName}/${componentName}.js?id=${id}`;
102
+
99
103
 
100
104
  try {
101
105
  this.app = await new Promise((resolve, reject) => {
package/src/tracking.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import Delegate from "ftdomdelegate";
2
- import oTracking from "@financial-times/o-tracking";
3
2
  import { getTrace } from "./get-trace";
4
3
  import {
5
4
  sanitise,
@@ -127,8 +126,6 @@ class Tracking {
127
126
  this.isInitialised = true;
128
127
  this.cccId = id ? id : this.cccId;
129
128
 
130
- oTracking.init({ queue: true });
131
-
132
129
  const eventData = {
133
130
  action: "click",
134
131
  category: this.category,