remote-components 0.0.47 → 0.0.49

package/dist/{component-loader-26b1f55e.d.ts → component-loader-1838f572.d.ts}

@@ -7,17 +7,51 @@ interface RemoteComponentMetadata {
     id: string;
     type: 'nextjs' | 'remote-component' | 'unknown';
 }
+/**
+ * Options object passed to hook functions containing abort capabilities.
+ * Uses standard AbortController/AbortSignal for compatibility with Web APIs.
+ *
+ * @example
+ * // Abort on redirect
+ * component.onResponse = (url, response, { signal, abort }) => {
+ *   if (response.redirected) {
+ *     abort();
+ *   }
+ * };
+ *
+ * @example
+ * // Check if already aborted
+ * component.onRequest = (url, init, { signal }) => {
+ *   if (signal.aborted) return;
+ *   // ...
+ * };
+ *
+ * @example
+ * // Pass signal to fetch or other APIs
+ * component.onRequest = async (url, init, { signal }) => {
+ *   const data = await fetch('/api/check', { signal });
+ *   // ...
+ * };
+ */
+interface HookOptions {
+    /** Standard AbortSignal - can be passed to fetch and other Web APIs */
+    signal: AbortSignal;
+    /** Abort loading - prevents further processing and DOM attachment */
+    abort(reason?: unknown): void;
+}
 /**
  * Hook function that intercepts remote component fetch requests.
- * Can be used to modify request options, provide a custom response, or inspect the request.
+ * Can be used to modify request options, provide a custom response, inspect the request,
+ * or abort loading.
  *
  * @param url - The URL being fetched
  * @param init - The fetch init options being used
+ * @param options - Options object containing the abort signal
  * @returns Optional Response to use instead of fetching, or void/undefined to proceed with normal fetch
  *
  * @example
  * // Log all remote component requests
- * const onRequest = async (url, init) => {
+ * const onRequest = async (url, init, { abort }) => {
  *   console.log('Fetching remote component from:', url.href);
  * };
  *
@@ -35,21 +69,32 @@ interface RemoteComponentMetadata {
  *     return new Response(cached);
  *   }
  * };
+ *
+ * @example
+ * // Block certain domains
+ * const onRequest = async (url, init, { abort }) => {
+ *   if (isBlockedDomain(url)) {
+ *     abort('Domain is blocked');
+ *   }
+ * };
  */
-type OnRequestHook = (url: URL, init: RequestInit) => Promise<Response | undefined> | Response | undefined;
+type OnRequestHook = (url: URL, init: RequestInit, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
 /**
  * Hook function that is called after a remote component fetch completes.
- * Can be used to inspect the response, check for redirects, or transform the response.
+ * Can be used to inspect the response, check for redirects, transform the response,
+ * or abort loading.
  *
  * @param url - The original URL that was requested
  * @param response - The Response object from the fetch
+ * @param options - Options object containing the abort signal
  * @returns Optional Response to use instead of the original, or void/undefined to use the original response
  *
  * @example
- * // Check for redirects
- * const onResponse = async (url, response) => {
+ * // Check for redirects and abort
+ * const onResponse = async (url, response, { abort }) => {
  *   if (response.redirected) {
  *     console.log(`Redirected from ${url.href} to ${response.url}`);
+ *     abort();
  *   }
  * };
  *
@@ -67,8 +112,17 @@ type OnRequestHook = (url: URL, init: RequestInit) => Promise<Response | undefin
  *   const modified = text.replace(/foo/g, 'bar');
  *   return new Response(modified, response);
  * };
+ *
+ * @example
+ * // Abort on redirect to legacy routes
+ * const onResponse = async (url, response, { abort }) => {
+ *   if (response.redirected && isLegacyRoute(response.url)) {
+ *     window.location.href = toLegacyUrl(response.url);
+ *     abort(); // Abort rendering - no flash!
+ *   }
+ * };
  */
-type OnResponseHook = (url: URL, response: Response) => Promise<Response | undefined> | Response | undefined;
+type OnResponseHook = (url: URL, response: Response, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
 
 interface RemoteComponentProps {
     /** The src provided to the `<RemoteComponent>` component. May be relative or absolute URL. */
@@ -141,4 +195,4 @@ type LoadRemoteComponentProps = Pick<RemoteComponentProps, 'name' | 'bundle' | '
  */
 declare function loadRemoteComponent({ url, name, rscName, bundle, route, runtime, data, nextData, scripts, shared, remoteShared, container, }: LoadRemoteComponentProps): Promise<LoaderResult>;
 
-export { GlobalScope as G, LoadRemoteComponentProps as L, MountOrUnmountFunction as M, OnRequestHook as O, RemoteComponentProps as R, OnResponseHook as a, LoaderResult as b, loadRemoteComponent as l };
+export { GlobalScope as G, HookOptions as H, LoadRemoteComponentProps as L, MountOrUnmountFunction as M, OnRequestHook as O, RemoteComponentProps as R, OnResponseHook as a, LoaderResult as b, loadRemoteComponent as l };

package/dist/html/host.cjs

@@ -270,19 +270,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;
@@ -300,6 +321,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";
   }
@@ -1703,17 +1725,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;
   }
@@ -1722,8 +1754,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) {
@@ -1765,6 +1876,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"];
     }
@@ -1775,6 +1888,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,
@@ -1797,6 +1914,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,
@@ -1830,6 +1951,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,
@@ -1844,6 +1969,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
@@ -1868,12 +1995,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(
@@ -1891,7 +2022,9 @@ if (typeof HTMLElement !== "undefined") {
                 error.stack = errorStack;
               }
             }
-          } catch {
+          } catch (parseError) {
+            if (isAbortError(parseError))
+              throw parseError;
           }
           throw error;
         }
@@ -2002,64 +2135,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) {
@@ -2214,8 +2309,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;
@@ -2267,8 +2362,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;