@financial-times/custom-code-component - npm Package Compare versions

Comparing version 2.1.5 to 2.1.6

dist/custom-element.d.ts

@@ -202,2 +202,3 @@ import { BaseRenderer } from '../../ccc-sdk/src/renderers/BaseRenderer';
     });
+    private formatConsoleArgs;
     debug(...args: any[]): void;
@@ -204,0 +205,0 @@ log: (...args: any[]) => void;

dist/custom-element.js

@@ -120,3 +120,3 @@ function g(o) {
   DEFAULT: 2
-}), w = "CCC:";
+}), L = "CCC:";
 function S(o) {
@@ -126,3 +126,3 @@ const t = o == null ? void 0 : o.toLowerCase();
 }
-class P {
+class x {
   constructor({
@@ -136,13 +136,20 @@ level: t = u.DEFAULT,
   }
+  formatConsoleArgs(t) {
+    const e = this.component ? [this.component] : [];
+    if (t.length === 0)
+      return [L, ...e];
+    const [n, ...r] = t;
+    return typeof n == "string" ? [`${L} ${n}`, ...r, ...e] : [L, n, ...r, ...e];
+  }
   debug(...t) {
-    this.level <= u.DEBUG && console.info(w, ...t, this.component);
+    this.level <= u.DEBUG && console.info(...this.formatConsoleArgs(t));
   }
   info(...t) {
-    this.level <= u.INFO && console.info(w, ...t, this.component);
+    this.level <= u.INFO && console.info(...this.formatConsoleArgs(t));
   }
   warn(...t) {
-    this.level <= u.WARN && console.warn(w, ...t, this.component);
+    this.level <= u.WARN && console.warn(...this.formatConsoleArgs(t));
   }
   error(...t) {
-    this.level <= u.ERROR && console.error(w, ...t, this.component);
+    this.level <= u.ERROR && console.error(...this.formatConsoleArgs(t));
   }
@@ -160,3 +167,3 @@ setLogLevel(t) {
     };
-}, x = [
+}, P = [
   "nodeName",
@@ -170,3 +177,3 @@ "className",
   const t = {};
-  for (const e of x) {
+  for (const e of P) {
     const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
@@ -192,3 +199,3 @@ n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = N(n));
   const n = {};
-  return e && x.forEach((r) => {
+  return e && P.forEach((r) => {
     typeof t[r] < "u" && r !== "id" && (n[r] = t[r]);
@@ -225,3 +232,3 @@ }), o.filter((r) => r.name.match(/^data-trackable-context-/i)).forEach((r) => {
   }) {
-    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = r, this.shadowRoot = s, this.category = i, this.elements = c, this.isInitialised = !1, this.log = a ?? new P();
+    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = r, this.shadowRoot = s, this.category = i, this.elements = c, this.isInitialised = !1, this.log = a ?? new x();
   }
@@ -302,10 +309,10 @@ // Get properties for the event (as opposed to properties of the clicked element)
 }
-class d {
+class f {
   constructor(t) {
     this.org = "local", this.repo = "dev";
-    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : d.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : f.fromString(t);
     e && (this.org = e), n && (this.repo = n), this.name = r, this.versionRange = s;
   }
   set path(t) {
-    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : d.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : f.fromString(t);
     this.org = e, this.repo = n, this.name = r, this.versionRange = s;
@@ -327,4 +334,4 @@ }
     const n = t ?? "unknown/unknown/unknown", [r, s, i] = n.replace(/@[^\/]+/, "").split("/").reverse(), c = e ?? ((a = n.match(/@[^\/]+/)) == null ? void 0 : a.toString().replace("@", "")) ?? "unknown";
-    if (s && !c) throw new f("No version specified");
-    return new d({ org: i, repo: s, name: r, versionRange: c });
+    if (s && !c) throw new d("No version specified");
+    return new f({ org: i, repo: s, name: r, versionRange: c });
   }
@@ -335,3 +342,3 @@ }
 }
-class f extends Error {
+class d extends Error {
   constructor(t, e) {
@@ -341,10 +348,10 @@ var n;
       t ?? `${e.cause ?? "Unknown error"} in ${e.component} imported from ${e.source ?? "an undefined source"}.`
-    ), this.component = d.fromString(e.component)) : T(e == null ? void 0 : e.component) ? (super(
+    ), this.component = f.fromString(e.component)) : T(e == null ? void 0 : e.component) ? (super(
       t ?? `${e.cause ?? "Unknown error"} in ${e.component.org}/${e.component.repo}/${e.component.name}@${e.component.versionRange} imported from ${e.source ?? "an undefined source"}.`
-    ), this.component = new d(e.component)) : (super(
+    ), this.component = new f(e.component)) : (super(
       `${(e == null ? void 0 : e.cause) ?? "Unknown error"} in unknown component imported from ${(e == null ? void 0 : e.source) ?? "unknown source"}.`
-    ), this.component = null), this.source = (e == null ? void 0 : e.source) ?? "unknown source", this.errors = [], e != null && e.error && ((n = this.errors) == null || n.push(e == null ? void 0 : e.error)), Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCError";
+    ), this.component = null), this.source = (e == null ? void 0 : e.source) ?? "unknown source", this.errors = [], e != null && e.error && ((n = this.errors) == null || n.push(e == null ? void 0 : e.error)), Error.captureStackTrace && Error.captureStackTrace(this, d), this.name = "CCCError";
   }
 }
-class E extends f {
+class w extends d {
   constructor(t, e) {
@@ -354,3 +361,3 @@ super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
 }
-class O extends f {
+class O extends d {
   constructor(t, e) {
@@ -360,3 +367,3 @@ super(t, { ...e, cause: "Render error" }), this.name = "CCCRenderError";
 }
-class J extends f {
+class J extends d {
   constructor(t) {
@@ -366,4 +373,4 @@ super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
 }
-const y = class y extends Event {
-  constructor(t = y.eventType, e, n) {
+const E = class E extends Event {
+  constructor(t = E.eventType, e, n) {
     super(t, {
@@ -377,4 +384,11 @@ bubbles: !0,
 };
-y.eventType = "ccc:event";
-let b = y;
+E.eventType = "ccc:event";
+let b = E;
+const y = class y extends b {
+  constructor(t, e) {
+    super(y.eventType, t, e);
+  }
+};
+y.eventType = "ccc:connected";
+let k = y;
 const v = class v extends b {
@@ -385,18 +399,11 @@ constructor(t, e) {
 };
-v.eventType = "ccc:connected";
-let k = v;
+v.eventType = "ccc:ready";
+let A = v;
 const C = class C extends b {
   constructor(t, e) {
-    super(C.eventType, t, e);
+    super(C.eventType, t, e), this.intersecting = !1, this.intersecting = t.intersecting, this.entry = t.entry;
   }
 };
-C.eventType = "ccc:ready";
-let A = C;
-const L = class L extends b {
-  constructor(t, e) {
-    super(L.eventType, t, e), this.intersecting = !1, this.intersecting = t.intersecting, this.entry = t.entry;
-  }
-};
-L.eventType = "ccc:viewport";
-let R = L;
+C.eventType = "ccc:viewport";
+let R = C;
 const W = (o) => o.replace(
@@ -472,3 +479,3 @@ /[A-Z]+(?![a-z])|[A-Z]/g,
       "load-timeout"
-    ]), this.component = new d(), this.ac = null, this.observer = new IntersectionObserver((e) => {
+    ]), this.component = new f(), this.ac = null, this.observer = new IntersectionObserver((e) => {
       this.logger.debug("Intersection Observer callback", { entries: e }), e.forEach((n) => {
@@ -519,3 +526,3 @@ this.dispatchEvent(
       n.type = "module", n.src = `${(s = this.testUrl) == null ? void 0 : s.origin}/@vite/client`, document.head.appendChild(n);
-    }, this.logger = new P();
+    }, this.logger = new x();
     const t = HTMLElement.prototype.hasOwnProperty("attachInternals");
@@ -537,3 +544,3 @@ try {
       const e = this.getAttribute("path"), n = this.getAttribute("version");
-      this.component = d.fromString(e, n), this.logger.component = this.component, this.logger.setLogLevel(this.getAttribute("log")), this.logger.debug("connectedCallback"), (t = this.ac) == null || t.abort(), this.ac = new AbortController(), this.app = await this.load(this.ac.signal), this.mount(), this.initTracking();
+      this.component = f.fromString(e, n), this.logger.component = this.component, this.logger.setLogLevel(this.getAttribute("log")), this.logger.debug("connectedCallback"), (t = this.ac) == null || t.abort(), this.ac = new AbortController(), this.app = await this.load(this.ac.signal), this.mount(), this.initTracking();
     } catch (e) {
@@ -551,3 +558,3 @@ e instanceof Error && requestAnimationFrame(() => {
   emitError(t) {
-    if (this.logger.debug("emitError", { error: t }), t instanceof f)
+    if (this.logger.debug("emitError", { error: t }), t instanceof d)
       this.dispatchEvent(
@@ -563,3 +570,3 @@ new ErrorEvent("ccc:error", {
     else {
-      const e = new f(t.message, {
+      const e = new d(t.message, {
         component: this.component,
@@ -688,9 +695,9 @@ error: t
         }), !i && Object.keys(c).length > 0 && (this.logger.warn(
-          `CCC ${this.component.toString()}: passing component settings as webcomponent attributes is %cDEPRECATED`,
+          "passing component settings as webcomponent attributes is %cDEPRECATED%c and will be removed in v3.",
           "font-weight: bold",
-          " and will be removed in v3."
+          ""
         ), this.logger.warn(
-          "Please use the %cdata-component-props",
+          "Please use the %cdata-component-props%c attribute instead.",
           "text-decoration: underline;",
-          " attribute instead."
+          ""
         ));
@@ -771,3 +778,3 @@ const { onmessage: a, ready: h = Promise.resolve() } = this.app(
               else
-                throw new E(
+                throw new w(
                   "No component renderer default export found",
@@ -780,4 +787,4 @@ {
             }).catch((m) => {
-              clearTimeout(p), this.logger.error(m), m instanceof Error && !(m instanceof E) ? l(
-                new E(m.message, {
+              clearTimeout(p), this.logger.error(m), m instanceof Error && !(m instanceof w) ? l(
+                new w(m.message, {
                   component: this.component,
@@ -789,3 +796,3 @@ source: this.source
           else
-            throw clearTimeout(p), new E(`Unable to mount ${e}`, {
+            throw clearTimeout(p), new w(`Unable to mount ${e}`, {
               component: this.component,
@@ -792,0 +799,0 @@ source: this.source

package.json

 {
   "name": "@financial-times/custom-code-component",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "type": "module",
@@ -5,0 +5,0 @@ "exports": {

src/custom-code-component.ts

@@ -349,10 +349,10 @@ /**
           this.logger.warn(
-            `CCC ${this.component.toString()}: passing component settings as webcomponent attributes is %cDEPRECATED`,
+            "passing component settings as webcomponent attributes is %cDEPRECATED%c and will be removed in v3.",
             "font-weight: bold",
-            " and will be removed in v3.",
+            "",
           );
           this.logger.warn(
-            `Please use the %cdata-component-props`,
+            "Please use the %cdata-component-props%c attribute instead.",
             "text-decoration: underline;",
-            " attribute instead.",
+            "",
           );
@@ -359,0 +359,0 @@ }

src/logger.ts

@@ -58,5 +58,21 @@ import { ComponentPath } from "./path";
 
+  private formatConsoleArgs(args: any[]) {
+    const suffix = this.component ? [this.component] : [];
+
+    if (args.length === 0) {
+      return [LOG_PREFIX, ...suffix];
+    }
+
+    const [first, ...rest] = args;
+
+    if (typeof first === "string") {
+      return [`${LOG_PREFIX} ${first}`, ...rest, ...suffix];
+    }
+
+    return [LOG_PREFIX, first, ...rest, ...suffix];
+  }
+
   debug(...args: any[]) {
     if (this.level <= LogLevel.DEBUG) {
-      console.info(LOG_PREFIX, ...args, this.component);
+      console.info(...this.formatConsoleArgs(args));
     }
@@ -69,3 +85,3 @@ }
     if (this.level <= LogLevel.INFO) {
-      console.info(LOG_PREFIX, ...args, this.component);
+      console.info(...this.formatConsoleArgs(args));
     }
@@ -76,3 +92,3 @@ }
     if (this.level <= LogLevel.WARN) {
-      console.warn(LOG_PREFIX, ...args, this.component);
+      console.warn(...this.formatConsoleArgs(args));
     }
@@ -83,3 +99,3 @@ }
     if (this.level <= LogLevel.ERROR) {
-      console.error(LOG_PREFIX, ...args, this.component);
+      console.error(...this.formatConsoleArgs(args));
     }
@@ -86,0 +102,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

190949

0.66%

Lines of code

2660

0.72%

No dependency changes