remote-components 0.0.37 → 0.0.39

package/dist/html/host.js

@@ -1423,6 +1423,8 @@ if (typeof HTMLElement !== "undefined") {
     isLoading = false;
     prevIsRemoteComponent = false;
     prevUrl;
+    prevSrc = null;
+    prevName;
     root = null;
     reactRoot;
     additionalHeaders;
@@ -1437,6 +1439,16 @@ if (typeof HTMLElement !== "undefined") {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
             console.error(e);
+            const errorEvent = new Event("error", {
+              bubbles: true,
+              composed: true
+            });
+            Object.assign(errorEvent, {
+              error: e,
+              src: this.getAttribute("src")
+            });
+            this.dispatchEvent(errorEvent);
+            this.isLoading = false;
           });
         }
       } else if (name === "mode" && oldValue !== newValue && this.root) {
@@ -1449,6 +1461,15 @@ if (typeof HTMLElement !== "undefined") {
         this.root = newRoot;
         this.load().catch((e) => {
           console.error(e);
+          const errorEvent = new Event("error", {
+            bubbles: true,
+            composed: true
+          });
+          Object.assign(errorEvent, {
+            error: e,
+            src: this.getAttribute("src")
+          });
+          this.dispatchEvent(errorEvent);
         });
       }
     }
@@ -1483,10 +1504,25 @@ if (typeof HTMLElement !== "undefined") {
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
           console.error(e);
+          const errorEvent = new Event("error", {
+            bubbles: true,
+            composed: true
+          });
+          Object.assign(errorEvent, {
+            error: e,
+            src: this.getAttribute("src")
+          });
+          this.dispatchEvent(errorEvent);
         });
       }
       this.isLoading = true;
       const src = this.getAttribute("src");
+      const beforeLoadEvent = new Event("beforeload", {
+        bubbles: true,
+        composed: true
+      });
+      Object.assign(beforeLoadEvent, { src });
+      this.dispatchEvent(beforeLoadEvent);
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
         throw new RemoteComponentsError('"src" attribute is required');
@@ -1621,8 +1657,23 @@ if (typeof HTMLElement !== "undefined") {
         }
         this.root.innerHTML = "";
       }
+      if (this.prevSrc !== null) {
+        const changeEvent = new Event("change", {
+          bubbles: true,
+          composed: true
+        });
+        Object.assign(changeEvent, {
+          previousSrc: this.prevSrc,
+          nextSrc: src,
+          previousName: this.prevName,
+          nextName: this.name
+        });
+        this.dispatchEvent(changeEvent);
+      }
       this.prevUrl = url ?? new URL(location.href);
       this.prevIsRemoteComponent = isRemoteComponent;
+      this.prevSrc = src;
+      this.prevName = this.name;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
       const remoteComponentSrc = this.getAttribute("src");
@@ -1841,6 +1892,12 @@ if (typeof HTMLElement !== "undefined") {
               });
             }
             this.isLoading = false;
+            const loadEvent = new Event("load", {
+              bubbles: true,
+              composed: true
+            });
+            Object.assign(loadEvent, { src: this.getAttribute("src") });
+            this.dispatchEvent(loadEvent);
           }, [initial, name]);
           return Component;
         };
@@ -1888,6 +1945,14 @@ if (typeof HTMLElement !== "undefined") {
                 });
               }
               remoteComponent.isLoading = false;
+              const loadEvent = new Event("load", {
+                bubbles: true,
+                composed: true
+              });
+              Object.assign(loadEvent, {
+                src: remoteComponent.getAttribute("src")
+              });
+              remoteComponent.dispatchEvent(loadEvent);
             }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ jsx2(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ jsx2(NextComponent, { ...nextData.props });
           })(App, Component, this);
@@ -1927,6 +1992,19 @@ if (typeof HTMLElement !== "undefined") {
             }
           })
         );
+        const loadEvent = new Event("load", {
+          bubbles: true,
+          composed: true
+        });
+        Object.assign(loadEvent, { src: this.getAttribute("src") });
+        this.dispatchEvent(loadEvent);
+      } else {
+        const loadEvent = new Event("load", {
+          bubbles: true,
+          composed: true
+        });
+        Object.assign(loadEvent, { src: this.getAttribute("src") });
+        this.dispatchEvent(loadEvent);
       }
       this.isLoading = false;
     }