@financial-times/custom-code-component 2.0.1-beta.9 → 2.0.3

package/src/custom-code-component.ts

@@ -13,7 +13,7 @@ import {
   CCCRenderError,
   CCCTimeoutError,
 } from "./errors";
-import { CCCConnectedEvent } from "./events";
+import { CCCConnectedEvent, CCCReadyEvent, CCCViewportEvent } from "./events";
 import { ComponentPath } from "./path";
 import { kebabize } from "./util";
 import { assignTestURL, useComponentTestEnv } from "./environment";
@@ -35,10 +35,24 @@ export class FTCustomCodeComponent extends HTMLElement {
 
   source?: string;
   tracking?: Tracking;
-  component?: ComponentPath;
+  testUrl?: URL;
+  component = new ComponentPath();
 
   log: Logger;
 
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      this.dispatchEvent(
+        new CCCViewportEvent({
+          component: this.component,
+          source: this.source,
+          intersecting: entry.isIntersecting,
+          entry,
+        })
+      );
+    });
+  });
+
   constructor() {
     super();
     this.log = new Logger({
@@ -76,19 +90,40 @@ export class FTCustomCodeComponent extends HTMLElement {
   }
 
   emitError(error: Error) {
-    this.dispatchEvent(new ErrorEvent("ccc:error", {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      error,
-      message: error.message,
-    }));
+    if (error instanceof CCCError) {
+      this.dispatchEvent(
+        new ErrorEvent("ccc:error", {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          error,
+          message: error.message,
+        })
+      );
+    } else {
+      // Wrap original error with generic CCC error class
+      const wrappedError = new CCCError(error.message, {
+        component: this.component,
+        error: error,
+      });
+
+      this.dispatchEvent(
+        new ErrorEvent("ccc:error", {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          error: wrappedError,
+          message: wrappedError.message,
+        })
+      );
+    }
   }
 
   disconnectedCallback() {
     const path = this.getAttribute("path");
     this.log.info(`<custom-code-component:${path}> disconnected`);
     if (typeof this.onunmount === "function") this.onunmount();
+    this.observer.disconnect();
   }
 
   channel = new MessageChannel();
@@ -100,11 +135,23 @@ export class FTCustomCodeComponent extends HTMLElement {
   async onready(app: Promise<void>) {
     try {
       await app;
+
+      this.dispatchEvent(
+        new CCCReadyEvent({
+          component: this.component,
+          source: this.source,
+        })
+      );
+
+      this.dataset.cccReady = "true";
+      delete this.dataset.cccError;
+
+      this.observer.observe(this);
     } catch (e) {
       if (e instanceof Error) {
         const renderError = new CCCRenderError(e.message, {
           error: e,
-          component: this.component!,
+          component: this.component,
         });
         requestAnimationFrame(() => {
           this.emitError(renderError);
@@ -123,16 +170,6 @@ export class FTCustomCodeComponent extends HTMLElement {
       this.mode =
         this.getAttribute("shadow-open") == "false" ? "closed" : "open";
       if (this.component) {
-        this.dispatchEvent(
-          new CCCConnectedEvent({
-            component: this.component,
-            source: this.source,
-          })
-        );
-
-        this.dataset.cccReady = "true";
-        delete this.dataset.cccError;
-
         if (!this.app) {
           throw new Error("CCC mounted without App");
         }
@@ -141,6 +178,12 @@ export class FTCustomCodeComponent extends HTMLElement {
         const shadow =
           this.shadowRoot ?? this.attachShadow({ mode: this.mode });
 
+        this.dispatchEvent(
+          new CCCConnectedEvent({
+            component: this.component,
+            source: this.source,
+          })
+        );
         // Add global CCC styles if not already present in shadow DOM.
         if (
           !shadow.querySelector('link[href~="custom-code-component.css"]') &&
@@ -194,19 +237,22 @@ export class FTCustomCodeComponent extends HTMLElement {
           );
         }
 
-        const { unmount, onmessage, ready } =
-          this.app(
-            shadow,
-            {
-              ...(data ?? extraProps),
-              data: data ?? extraProps,
-              port: this.channel.port2,
-              tracking: this.tracking,
-              prerendered: !!prerendered,
-              children: this.children,
-            },
-            ssr
-          ) || {};
+        const {
+          unmount,
+          onmessage,
+          ready = Promise.resolve(),
+        } = this.app(
+          shadow,
+          {
+            ...(data ?? extraProps),
+            data: data ?? extraProps,
+            port: this.channel.port2,
+            tracking: this.tracking,
+            prerendered: !!prerendered,
+            children: this.children,
+          },
+          ssr
+        ) || {};
 
         if (unmount) this.onunmount = unmount;
         if (onmessage) this.onmessage = onmessage;
@@ -240,23 +286,33 @@ export class FTCustomCodeComponent extends HTMLElement {
       this.dataset.cccError = kebabize(e.name.replace("CCC", ""));
 
     delete this.dataset.cccReady;
+
+    this.observer.disconnect();
   }
 
   async load() {
-    if (!this.component) {
+    if (!this.component.isValid) {
       throw new Error("No path found");
     }
     const path = this.getAttribute("path");
     const componentVersionRange = this.getAttribute("version");
     const timeout = Number(this.getAttribute("load-timeout") || 10000);
     const testEnv = this.getAttribute("test-env");
-    const testUrl = assignTestURL(testEnv);
-    const isTestEnv = await useComponentTestEnv(this.component.name, testUrl);
+    this.testUrl = assignTestURL(testEnv);
+    const isTestEnv = await useComponentTestEnv(
+      this.component.name,
+      this.testUrl
+    );
 
-    const id = this.getAttribute("id");
     // id querystring necessary to multiple allow components with the same source (same name and version number) to appear on the page correctly
+    const id = this.getAttribute("id");
+
+    if (isTestEnv && this.testUrl) {
+      this.injectViteScripts();
+    }
+
     this.source = isTestEnv
-      ? `${testUrl?.origin}/src/${this.component.name}/index.jsx?id=${id}`
+      ? `${this.testUrl?.origin}/src/${this.component.name}/index.jsx?id=${id}`
       : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${
           componentVersionRange ? `@${componentVersionRange}` : "@latest"
         }/${this.component.name}/${this.component.name}.js?id=${id}`;
@@ -333,6 +389,28 @@ export class FTCustomCodeComponent extends HTMLElement {
       this.log.error(e);
     }
   };
+
+  injectViteScripts = () => {
+    if (document.querySelector('script[name="ccc-sdk-react-preamble"]')) return;
+
+    const preambleScript = document.createElement("script");
+    preambleScript.type = "module";
+    preambleScript.setAttribute("name", "ccc-sdk-react-preamble");
+
+    preambleScript.textContent = `
+      import RefreshRuntime from "${this.testUrl?.origin}/@react-refresh";
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    `.trim();
+    document.head.appendChild(preambleScript);
+
+    const viteClientScript = document.createElement("script");
+    viteClientScript.type = "module";
+    viteClientScript.src = `${this.testUrl?.origin}/@vite/client`;
+    document.head.appendChild(viteClientScript);
+  };
 }
 
 export interface CustomCodeComponent extends ContentTree.Node {

package/src/events.ts

@@ -1,16 +1,16 @@
 import { ComponentPath } from "./path";
 
-export class CCCConnectedEvent extends Event {
-  static eventType = "ccc:connected";
-
+export class CCCEvent extends Event {
   component: ComponentPath;
   source?: string;
+  static eventType = "ccc:event";
 
   constructor(
+    eventType: string = CCCEvent.eventType,
     detail: { component: ComponentPath; source?: string },
     opts?: EventInit
   ) {
-    super(CCCConnectedEvent.eventType, {
+    super(eventType, {
       bubbles: true,
       cancelable: false,
       composed: true,
@@ -20,3 +20,45 @@ export class CCCConnectedEvent extends Event {
     this.source = detail.source;
   }
 }
+
+export class CCCConnectedEvent extends CCCEvent {
+  static eventType = "ccc:connected";
+
+  constructor(
+    detail: { component: ComponentPath; source?: string },
+    opts?: EventInit
+  ) {
+    super(CCCConnectedEvent.eventType, detail, opts);
+  }
+}
+
+export class CCCReadyEvent extends CCCEvent {
+  static eventType = "ccc:ready";
+
+  constructor(
+    detail: { component: ComponentPath; source?: string },
+    opts?: EventInit
+  ) {
+    super(CCCReadyEvent.eventType, detail, opts);
+  }
+}
+
+export class CCCViewportEvent extends CCCEvent {
+  static eventType = "ccc:viewport";
+  intersecting = false;
+  entry?: IntersectionObserverEntry;
+
+  constructor(
+    detail: {
+      component: ComponentPath;
+      source?: string;
+      intersecting: boolean;
+      entry?: IntersectionObserverEntry;
+    },
+    opts?: EventInit
+  ) {
+    super(CCCViewportEvent.eventType, detail, opts);
+    this.intersecting = detail.intersecting;
+    this.entry = detail.entry;
+  }
+}

package/src/path.ts

@@ -12,7 +12,7 @@ export class ComponentPath {
   name: string;
   versionRange: string;
 
-  constructor(path: ComponentPathType | string) {
+  constructor(path?: ComponentPathType | string) {
     const { org, repo, name, versionRange } = isValidComponentPathObject(path)
       ? path
       : ComponentPath.fromString(path);
@@ -36,12 +36,18 @@ export class ComponentPath {
     return `${this.org}/${this.repo}@${this.versionRange}/${this.name}`;
   }
 
+  get isValid(): boolean {
+    return [this.org, this.repo, this.name].every(
+      (value) => value !== "unknown"
+    );
+  }
+
   toString(): string {
     return this.path;
   }
 
-  static fromString(path: string | null, v?: string | null): ComponentPath {
-    if (!path) throw new CCCError("No path specified");
+  static fromString(p?: string | null, v?: string | null): ComponentPath {
+    const path = p ?? "unknown/unknown/unknown";
 
     const [name, repo, org] = path
       .replace(/@[^\/]+/, "")