remote-components 0.0.47 → 0.0.49

package/dist/html/host.js

@@ -248,19 +248,40 @@ var init_shared_modules = __esm({
   }
 });
 
+// src/shared/utils/abort.ts
+function isAbortError(error) {
+  if (error instanceof DOMException && error.name === "AbortError") {
+    return true;
+  }
+  if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
+    const e = error;
+    return typeof e.code === "number" || e.constructor?.name === "DOMException";
+  }
+  return false;
+}
+var init_abort = __esm({
+  "src/shared/utils/abort.ts"() {
+    "use strict";
+  }
+});
+
 // src/shared/ssr/fetch-with-protected-rc-fallback.ts
 async function fetchWithProtectedRcFallback(url, init) {
   try {
     const res = await fetch(url, init);
     return res;
   } catch (error) {
+    if (isAbortError(error)) {
+      throw error;
+    }
     if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== new URL(url).origin) {
       logInfo(
         "FetchRemoteComponent",
         "Request failed due to CORS, attempting to fetch it via the withRemoteComponentsHost proxy."
       );
       const proxiedRes = await fetch(
-        `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${url}`
+        `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${url}`,
+        init?.signal ? { signal: init.signal } : void 0
       );
       if (proxiedRes.status === 200) {
         return proxiedRes;
@@ -278,6 +299,7 @@ var RC_PROTECTED_REMOTE_FETCH_PATHNAME;
 var init_fetch_with_protected_rc_fallback = __esm({
   "src/shared/ssr/fetch-with-protected-rc-fallback.ts"() {
     "use strict";
+    init_abort();
     init_logger();
     RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
   }
@@ -1678,17 +1700,27 @@ function remoteFetchHeaders() {
 // src/shared/ssr/fetch-with-hooks.ts
 init_fetch_with_protected_rc_fallback();
 async function fetchWithHooks(url, additionalInit, options = {}) {
-  const { onRequest, onResponse } = options;
+  const {
+    onRequest,
+    onResponse,
+    abortController = new AbortController()
+  } = options;
+  const signal = abortController.signal;
+  const hookOptions = {
+    signal,
+    abort: (reason) => abortController.abort(reason)
+  };
   const init = {
     method: "GET",
     headers: remoteFetchHeaders(),
+    signal,
     ...additionalInit
   };
-  let res = await onRequest?.(url, init);
+  let res = await onRequest?.(url, init, hookOptions);
   if (!res) {
     res = await fetchWithProtectedRcFallback(url, init);
   }
-  const transformedRes = await onResponse?.(url, res);
+  const transformedRes = await onResponse?.(url, res, hookOptions);
   if (transformedRes) {
     res = transformedRes;
   }
@@ -1697,8 +1729,87 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
 
 // src/html/host/index.tsx
 init_utils();
+init_abort();
 init_logger();
 
+// src/html/host/attach-styles.ts
+init_error();
+async function attachStyles({
+  doc,
+  component,
+  links,
+  signal,
+  baseUrl,
+  remoteComponentSrc,
+  root
+}) {
+  const appendedLinks = [];
+  let abortReject = null;
+  const abortPromise = new Promise((_, reject) => {
+    abortReject = reject;
+  });
+  const abortHandler = () => {
+    for (const link of appendedLinks) {
+      link.onload = null;
+      link.onerror = null;
+      link.remove();
+    }
+    abortReject?.(new DOMException("Aborted", "AbortError"));
+  };
+  signal?.addEventListener("abort", abortHandler, { once: true });
+  try {
+    await Promise.all(
+      Array.from(links).filter((link) => !component.contains(link)).map((link) => {
+        const newLink = document.createElement("link");
+        appendedLinks.push(newLink);
+        const loadPromise = new Promise((resolve, reject) => {
+          if (link.rel === "stylesheet") {
+            newLink.onload = () => resolve();
+            newLink.onerror = () => reject(
+              new RemoteComponentsError(
+                `Failed to load <link href="${link.href}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          } else {
+            resolve();
+          }
+        });
+        for (const attr of link.attributes) {
+          if (attr.name === "href") {
+            newLink.setAttribute(
+              attr.name,
+              new URL(attr.value, baseUrl ?? location.origin).href
+            );
+          } else {
+            newLink.setAttribute(attr.name, attr.value);
+          }
+        }
+        if (remoteComponentSrc) {
+          newLink.setAttribute(
+            "data-remote-component-src",
+            remoteComponentSrc
+          );
+        }
+        root?.appendChild(newLink);
+        return Promise.race([loadPromise, abortPromise]);
+      })
+    );
+  } finally {
+    signal?.removeEventListener("abort", abortHandler);
+  }
+  const styles = doc.querySelectorAll("style");
+  for (const style of styles) {
+    if (style.parentElement?.tagName.toLowerCase() === "head") {
+      const newStyle = document.createElement("style");
+      newStyle.textContent = style.textContent;
+      if (remoteComponentSrc) {
+        newStyle.setAttribute("data-remote-component-src", remoteComponentSrc);
+      }
+      root?.appendChild(newStyle);
+    }
+  }
+}
+
 // src/html/host/runtime/index.ts
 init_error();
 async function getRuntime(type, url, bundle, shared, remoteShared) {
@@ -1740,6 +1851,8 @@ if (typeof HTMLElement !== "undefined") {
     reactRoot;
     onRequest;
     onResponse;
+    /** Current AbortController for the loading operation - can be used to cancel loading via controller.abort() */
+    abortController;
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
@@ -1750,6 +1863,10 @@ if (typeof HTMLElement !== "undefined") {
       if ((name === "src" || name === "name") && oldValue !== newValue) {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
+            if (isAbortError(e)) {
+              this.isLoading = false;
+              return;
+            }
             logError("HtmlHost", "Error loading remote component.", e);
             const errorEvent = new Event("error", {
               bubbles: true,
@@ -1772,6 +1889,10 @@ if (typeof HTMLElement !== "undefined") {
         });
         this.root = newRoot;
         this.load().catch((e) => {
+          if (isAbortError(e)) {
+            this.isLoading = false;
+            return;
+          }
           logError("HtmlHost", "Error reloading remote component.", e);
           const errorEvent = new Event("error", {
             bubbles: true,
@@ -1805,6 +1926,10 @@ if (typeof HTMLElement !== "undefined") {
       this.bundle = "default";
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
+          if (isAbortError(e)) {
+            this.isLoading = false;
+            return;
+          }
           logError("HtmlHost", "Error loading remote component.", e);
           const errorEvent = new Event("error", {
             bubbles: true,
@@ -1819,6 +1944,8 @@ if (typeof HTMLElement !== "undefined") {
       }
       this.isLoading = true;
       const src = this.getAttribute("src");
+      this.abortController = new AbortController();
+      const signal = this.abortController.signal;
       const beforeLoadEvent = new Event("beforeload", {
         bubbles: true,
         composed: true
@@ -1843,12 +1970,16 @@ if (typeof HTMLElement !== "undefined") {
         };
         const res = await fetchWithHooks(url, fetchInit, {
           onRequest: this.onRequest,
-          onResponse: this.onResponse
+          onResponse: this.onResponse,
+          abortController: this.abortController
         });
-        if (!res.ok) {
-          let error = failedToFetchRemoteComponentError(url.href, res);
+        if (!res || !res.ok) {
+          let error = failedToFetchRemoteComponentError(
+            url.href,
+            res ?? new Response(null, { status: 0 })
+          );
           try {
-            const body = await res.text();
+            const body = res ? await res.text() : "";
             const parser2 = new DOMParser();
             const doc2 = parser2.parseFromString(body, "text/html");
             const errorTemplate = doc2.querySelector(
@@ -1866,7 +1997,9 @@ if (typeof HTMLElement !== "undefined") {
                 error.stack = errorStack;
               }
             }
-          } catch {
+          } catch (parseError) {
+            if (isAbortError(parseError))
+              throw parseError;
           }
           throw error;
         }
@@ -1977,64 +2110,26 @@ if (typeof HTMLElement !== "undefined") {
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
       const remoteComponentSrc = this.getAttribute("src");
-      const attachLinks = async () => {
-        await Promise.all(
-          Array.from(links).filter((link) => {
-            return !component.contains(link);
-          }).map((link) => {
-            return new Promise((resolve, reject) => {
-              const newLink = document.createElement("link");
-              if (link.rel === "stylesheet") {
-                newLink.onload = () => {
-                  resolve();
-                };
-                newLink.onerror = () => {
-                  reject(
-                    new RemoteComponentsError(
-                      `Failed to load <link href="${link.href}"> for Remote Component. Check the URL is correct.`
-                    )
-                  );
-                };
-              } else {
-                resolve();
-              }
-              for (const attr of link.attributes) {
-                if (attr.name === "href") {
-                  newLink.setAttribute(
-                    attr.name,
-                    new URL(attr.value, url ?? location.origin).href
-                  );
-                } else {
-                  newLink.setAttribute(attr.name, attr.value);
-                }
-              }
-              if (remoteComponentSrc) {
-                newLink.setAttribute(
-                  "data-remote-component-src",
-                  remoteComponentSrc
-                );
-              }
-              this.root?.appendChild(newLink);
-            });
-          })
-        );
-        const styles = doc.querySelectorAll("style");
-        styles.forEach((style) => {
-          if (style.parentElement?.tagName.toLowerCase() === "head") {
-            const newStyle = document.createElement("style");
-            newStyle.textContent = style.textContent;
-            if (remoteComponentSrc) {
-              newStyle.setAttribute(
-                "data-remote-component-src",
-                remoteComponentSrc
-              );
-            }
-            this.root?.appendChild(newStyle);
-          }
-        });
-      };
+      const doAttachStyles = () => attachStyles({
+        doc,
+        component,
+        links,
+        signal: void 0,
+        // Effects run after load, no abort needed
+        baseUrl: url?.href,
+        remoteComponentSrc,
+        root: this.root ?? null
+      });
       if (!this.reactRoot) {
-        await attachLinks();
+        await attachStyles({
+          doc,
+          component,
+          links,
+          signal,
+          baseUrl: url?.href,
+          remoteComponentSrc,
+          root: this.root
+        });
       }
       applyOriginToNodes(doc, url ?? new URL(location.href));
       if (!this.reactRoot) {
@@ -2189,8 +2284,8 @@ if (typeof HTMLElement !== "undefined") {
             doCleanup();
             applyReset();
             if (!initial) {
-              attachLinks().catch((e) => {
-                logError("HtmlHost", "Error attaching links.", e);
+              doAttachStyles().catch((e) => {
+                logError("HtmlHost", "Error attaching styles.", e);
               });
             }
             this.isLoading = false;
@@ -2242,8 +2337,8 @@ if (typeof HTMLElement !== "undefined") {
               doCleanup();
               if (!initial) {
                 applyReset();
-                attachLinks().catch((e) => {
-                  logError("HtmlHost", "Error attaching links.", e);
+                doAttachStyles().catch((e) => {
+                  logError("HtmlHost", "Error attaching styles.", e);
                 });
               }
               remoteComponent.isLoading = false;