@financial-times/custom-code-component 2.0.4 → 2.0.6

package/src/custom-code-component.ts

@@ -90,6 +90,7 @@ export class FTCustomCodeComponent extends HTMLElement {
   }
 
   emitError(error: Error) {
+    console.debug("ccc#emitError", error);
     if (error instanceof CCCError) {
       this.dispatchEvent(
         new ErrorEvent("ccc:error", {
@@ -122,7 +123,6 @@ export class FTCustomCodeComponent extends HTMLElement {
   disconnectedCallback() {
     const path = this.getAttribute("path");
     this.log.info(`<custom-code-component:${path}> disconnected`);
-    if (typeof this.onunmount === "function") this.onunmount();
     this.observer.disconnect();
   }
 
@@ -130,12 +130,22 @@ export class FTCustomCodeComponent extends HTMLElement {
 
   onmessage() {}
 
-  onunmount(root?: any) {}
+  onunmount(e: Error) {
+    if (e instanceof Error) {
+      const renderError = new CCCRenderError(e.message, {
+        error: e,
+        component: this.component,
+      });
+      requestAnimationFrame(() => {
+        this.emitError(renderError);
+        this.unmount(renderError);
+      });
+    }
+  }
 
   async onready(app: Promise<void>) {
     try {
       await app;
-
       this.dispatchEvent(
         new CCCReadyEvent({
           component: this.component,
@@ -237,26 +247,24 @@ export class FTCustomCodeComponent extends HTMLElement {
           );
         }
 
-        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;
+        const { 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,
+            this.onunmount.bind(this)
+          ) || {};
+
         if (onmessage) this.onmessage = onmessage;
-        if (ready) this.onready(ready);
+
+        this.onready(ready);
       }
     } catch (err) {
       this.log.info(
@@ -272,7 +280,6 @@ export class FTCustomCodeComponent extends HTMLElement {
   // Replace shadow root with either <slot> or template[data-component-fallback]
   // slot on failure
   unmount(e: Error) {
-    this.onunmount(e);
     const template =
       this.querySelector<HTMLTemplateElement>(
         "template[data-component-fallback]"