remote-components 0.1.0 → 0.1.2

package/dist/react/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResolveClientUrl } from '../proxy-through-host-a676a522.js';
 export { p as proxyClientRequestsThroughHost } from '../proxy-through-host-a676a522.js';
-import { L as LoadRemoteComponentProps, O as OnRequestHook, a as OnResponseHook } from '../component-loader-76eb1b8b.js';
-export { H as HookOptions } from '../component-loader-76eb1b8b.js';
+import { H as HostConfig, C as ClientHostConfig, a as HostLifecycleCallbacks, L as LoadRemoteComponentProps } from '../component-loader-21865da3.js';
+export { b as HookOptions, O as OnRequestHook, c as OnResponseHook } from '../component-loader-21865da3.js';
 import 'react';
 
 /**
@@ -32,55 +32,18 @@ declare module 'react/jsx-runtime' {
         }
     }
 }
-interface RemoteComponentProps {
-    /** The source URL of the remote component. */
-    src?: string | URL;
-    /** Whether to isolate the remote component using a Shadow DOM wrapper. */
-    isolate?: boolean;
-    /** The shadow DOM mode to use when isolating the remote component. */
-    mode?: 'open' | 'closed';
-    /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */
-    reset?: boolean;
-    /** The credentials to use for the fetch request. Defaults to `same-origin`. */
-    credentials?: RequestCredentials;
-    name?: string;
+/**
+ * Props for the React remote component host.
+ *
+ * Extends {@link HostConfig}, {@link ClientHostConfig}, and
+ * {@link HostLifecycleCallbacks}. Adds `shared` for module sharing and
+ * `children` for loading fallback content.
+ */
+interface RemoteComponentProps extends HostConfig, ClientHostConfig, HostLifecycleCallbacks {
     /** Shared modules to include in the remote component's context. */
     shared?: LoadRemoteComponentProps['shared'];
-    /** The children to use as a loading fallback until the remote component is loaded. */
+    /** Loading fallback content displayed while the remote component is being fetched. */
     children?: React.ReactNode;
-    /** Called right before a new remote component load starts. */
-    onBeforeLoad?: (src: string | URL) => void;
-    /** Called when the remote component has been successfully loaded and mounted. */
-    onLoad?: (src: string | URL) => void;
-    /** Called when an error occurs while loading or mounting the remote component. */
-    onError?: (error: unknown) => void;
-    /** Called when a different remote component is loaded into the same wrapper. */
-    onChange?: (info: {
-        previousSrc: string | URL | null;
-        nextSrc: string | URL | null;
-        previousName: string | undefined;
-        nextName: string | undefined;
-    }) => void;
-    /**
-     * Called when a fetch request is made to retrieve the remote component payload.
-     * Can be used to intercept requests, modify headers, or provide a custom response.
-     */
-    onRequest?: OnRequestHook;
-    /**
-     * Called after a fetch completes to retrieve the remote component payload.
-     * Can be used to inspect the response (e.g., check for redirects) or transform it.
-     */
-    onResponse?: OnResponseHook;
-    /**
-     * Called before each client-side asset (script, stylesheet, chunk, module, image) is fetched.
-     * Return a new URL string to redirect the request (e.g., through a proxy),
-     * or `undefined` to use the original URL.
-     *
-     * Pass `proxyClientRequestsThroughHost` to proxy cross-origin assets through
-     * the host on Vercel preview deployments. Requires `withRemoteComponentsHost`
-     * middleware on the host to handle the proxied requests.
-     */
-    resolveClientUrl?: ResolveClientUrl;
 }
 /**
  * RemoteComponent is a React component that fetches and renders a remote component.
@@ -120,4 +83,4 @@ interface RemoteComponentProps {
  */
 declare function RemoteComponent({ src, isolate, mode, reset, credentials, name: nameProp, shared, children, onBeforeLoad, onLoad, onError, onChange, onRequest, onResponse, resolveClientUrl: _resolveClientUrl, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
-export { OnRequestHook, OnResponseHook, RemoteComponent, RemoteComponentProps, RemoteComponentsProvider, ResolveClientUrl };
+export { RemoteComponent, RemoteComponentProps, RemoteComponentsProvider, ResolveClientUrl };

package/dist/react/index.js

@@ -183,6 +183,122 @@ Docs: ${CORS_DOCS_URL}`
   );
 }
 
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/parse-remote-html.ts
+function validateSingleComponent(doc, name, url) {
+  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
+    throw multipleRemoteComponentsError(url);
+  }
+}
+function findComponentElement(doc, name) {
+  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+}
+function parseNextData(doc) {
+  return JSON.parse(
+    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+  );
+}
+function resolveComponentName(component, nextData, fallbackName) {
+  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
+  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  return { name, isRemoteComponent };
+}
+function extractComponentMetadata(component, nextData, name, url) {
+  return {
+    name,
+    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
+    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
+  };
+}
+function extractRemoteShared(doc, name, nextData) {
+  const remoteSharedEl = doc.querySelector(
+    `#${name}_shared[data-remote-components-shared]`
+  );
+  const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
+  remoteSharedEl?.remove();
+  return remoteShared;
+}
+function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
+  if (!component || !(rsc || nextData || isRemoteComponent)) {
+    throw new RemoteComponentsError(
+      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+    );
+  }
+}
+function extractLinks(doc, component) {
+  return Array.from(doc.querySelectorAll("link[href]")).filter(
+    (link) => !component.contains(link)
+  );
+}
+function extractScripts(doc, component, isRemoteComponent) {
+  return Array.from(
+    (isRemoteComponent ? component : doc).querySelectorAll(
+      "script[src],script[data-src]"
+    )
+  );
+}
+function parseRemoteComponentDocument(doc, name, url) {
+  validateSingleComponent(doc, name, url.href);
+  const component = findComponentElement(doc, name);
+  const nextData = parseNextData(doc);
+  const { name: resolvedName, isRemoteComponent } = resolveComponentName(
+    component,
+    nextData,
+    name
+  );
+  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const metadata = extractComponentMetadata(
+    component,
+    nextData,
+    resolvedName,
+    url
+  );
+  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
+  validateComponentFound(
+    component,
+    rsc,
+    nextData,
+    isRemoteComponent,
+    url.href,
+    resolvedName
+  );
+  const links = extractLinks(doc, component);
+  const scripts = extractScripts(doc, component, isRemoteComponent);
+  return {
+    component,
+    name: resolvedName,
+    isRemoteComponent,
+    metadata,
+    nextData,
+    rsc,
+    remoteShared,
+    links,
+    scripts
+  };
+}
+
 // src/shared/utils/logger.ts
 var PREFIX = "remote-components";
 var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
@@ -698,28 +814,6 @@ async function loadScripts(scripts, resolveClientUrl) {
   );
 }
 
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var attrToProp = {
-  fetchpriority: "fetchPriority",
-  crossorigin: "crossOrigin",
-  imagesrcset: "imageSrcSet",
-  imagesizes: "imageSizes",
-  srcset: "srcSet"
-};
-
-// src/shared/client/const.ts
-var DEFAULT_ROUTE = "/";
-var RUNTIME_WEBPACK = "webpack";
-var RUNTIME_TURBOPACK = "turbopack";
-var RUNTIME_SCRIPT = "script";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-
 // src/shared/client/turbopack-patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
 var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -1520,7 +1614,21 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
 
 // src/shared/client/proxy-through-host.ts
 function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  return (url) => resolveClientUrl(remoteSrc, url);
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
+  }
 }
 var proxyClientRequestsThroughHost = (remoteSrc, url) => {
   if (typeof location === "undefined") {
@@ -1732,6 +1840,32 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   );
 }
 
+// src/shared/contract/host-state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/shared/contract/resolve-name-from-src.ts
+function resolveNameFromSrc(src, defaultName) {
+  if (!src) {
+    return defaultName;
+  }
+  const hash = typeof src === "string" ? src : src.hash;
+  const hashIndex = hash.indexOf("#");
+  if (hashIndex < 0) {
+    return defaultName;
+  }
+  const name = hash.slice(hashIndex + 1);
+  return name || defaultName;
+}
+
 // src/shared/ssr/fetch-headers.ts
 function remoteFetchHeaders() {
   return {
@@ -1859,7 +1993,7 @@ function useShadowRoot({
   return { shadowRoot, shadowRootContainerRef };
 }
 
-// src/react/utils/parse-remote-html.ts
+// src/react/utils/extract-remote-html.ts
 var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -1903,20 +2037,10 @@ function RemoteComponent({
   resolveClientUrl: _resolveClientUrl
 }) {
   const instanceId = useId();
-  const name = useMemo2(() => {
-    if (typeof src === "string") {
-      const url2 = new URL(
-        src,
-        typeof document !== "undefined" ? location.href : DUMMY_FALLBACK
-      );
-      if (url2.hash) {
-        return url2.hash.slice(1);
-      }
-    } else if (typeof src === "object" && "hash" in src && src.hash) {
-      return src.hash.slice(1) || nameProp;
-    }
-    return nameProp;
-  }, [src, nameProp]);
+  const name = useMemo2(
+    () => resolveNameFromSrc(src, nameProp),
+    [src, nameProp]
+  );
   const [data, setData] = useState2(null);
   const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
   const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
@@ -1949,13 +2073,10 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = useRef2(null);
+  const hostStateRef = useRef2(createHostState());
   const componentHydrationHtml = useRef2(null);
-  const prevIsRemoteComponentRef = useRef2(false);
-  const prevUrlRef = useRef2(null);
   const prevRemoteComponentContainerRef = useRef2(null);
   const unmountRef = useRef2(null);
-  const prevNameRef = useRef2(void 0);
   useLayoutEffect2(() => {
     const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     return () => {
@@ -1994,14 +2115,18 @@ function RemoteComponent({
     }
   }, [shadowRoot, remoteComponent, name]);
   useEffect(() => {
-    if (src && src !== prevSrcRef.current) {
-      const previousSrc = prevSrcRef.current;
-      const previousName = prevNameRef.current;
-      prevSrcRef.current = src;
+    if (src && src !== hostStateRef.current.prevSrc) {
+      const previousSrc = hostStateRef.current.prevSrc;
+      const previousName = hostStateRef.current.prevName;
+      hostStateRef.current.prevSrc = src;
       if (previousSrc !== null) {
         htmlRef.current = null;
       }
+      hostStateRef.current.abortController?.abort();
+      hostStateRef.current.abortController = new AbortController();
+      const { signal } = hostStateRef.current.abortController;
       onBeforeLoad?.(src);
+      hostStateRef.current.stage = "loading";
       startTransition(async () => {
         try {
           let html = getRemoteComponentHtml(
@@ -2015,59 +2140,41 @@ function RemoteComponent({
               resolveClientUrl?.(url.href) ?? url.href,
               location.href
             );
-            const abortController = new AbortController();
             const res = await fetchWithHooks(resolvedUrl, fetchInit, {
               onRequest,
               onResponse,
-              abortController
+              abortController: hostStateRef.current.abortController
             });
             if (!res || !res.ok) {
               throw await errorFromFailedFetch(url.href, resolvedUrl, res);
             }
             const remoteHtml = await res.text();
+            if (signal.aborted)
+              return;
             htmlRef.current = remoteHtml;
             html = getRemoteComponentHtml(remoteHtml);
           }
+          if (signal.aborted)
+            return;
           const parser = new DOMParser();
           const doc = parser.parseFromString(html, "text/html");
-          if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
-            `div[data-bundle][data-route][id^="${name}"]`
-          ) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
-            throw multipleRemoteComponentsError(url.href);
-          }
-          const component = doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
-          doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
-          doc.querySelector("div#__next") ?? // fallback to the remote-component web component
-          doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
-          const nextData = JSON.parse(
-            (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
-          );
-          const remoteName = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : name);
-          const rsc = doc.querySelector(`#${remoteName}_rsc`);
-          const bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default";
-          const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-          const metadata = {
+          const {
+            component,
             name: remoteName,
-            bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-          };
-          const remoteSharedEl = doc.querySelector(
-            `#${remoteName}_shared[data-remote-components-shared]`
-          );
-          const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
-          remoteSharedEl?.remove();
-          if (!component || !(rsc || nextData || isRemoteComponent)) {
-            throw new RemoteComponentsError(
-              `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
-            );
-          }
-          if (prevIsRemoteComponentRef.current) {
+            isRemoteComponent,
+            metadata,
+            nextData,
+            rsc,
+            remoteShared,
+            links: linkElements,
+            scripts: scriptElements
+          } = parseRemoteComponentDocument(doc, name, url);
+          if (hostStateRef.current.prevIsRemoteComponent) {
             if (shadowRoot) {
               shadowRoot.innerHTML = "";
             }
             const self = globalThis;
-            const prevUrl = prevUrlRef.current;
+            const prevUrl = hostStateRef.current.prevUrl;
             if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
               const unmountPromises = Promise.all(
                 Array.from(unmountRef.current ?? []).map(
@@ -2080,15 +2187,11 @@ function RemoteComponent({
               await unmountPromises;
             }
           }
-          prevIsRemoteComponentRef.current = isRemoteComponent;
-          prevUrlRef.current = url;
-          prevNameRef.current = remoteName;
+          hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
+          hostStateRef.current.prevUrl = url;
+          hostStateRef.current.prevName = remoteName;
           applyOriginToNodes(doc, url, resolveClientUrl);
-          const links = Array.from(
-            doc.querySelectorAll("link[href]")
-          ).filter((link) => {
-            return !component.contains(link);
-          }).map((link) => ({
+          const links = linkElements.map((link) => ({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
               if (key !== "href") {
@@ -2097,7 +2200,7 @@ function RemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = (isRemoteComponent ? component : doc).querySelectorAll("script[src],script[data-src]");
+          const scripts = scriptElements;
           const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
@@ -2188,7 +2291,7 @@ function RemoteComponent({
             );
           }
           if (isRemoteComponent) {
-            if (previousSrc !== null) {
+            if (previousSrc !== void 0) {
               onChange?.({
                 previousSrc,
                 nextSrc: src,
@@ -2240,12 +2343,13 @@ function RemoteComponent({
               );
               onLoad?.(src);
             }
+            hostStateRef.current.stage = "loaded";
           } else {
             const result = await loadRemoteComponent({
               url,
               name: remoteName,
               rscName,
-              bundle,
+              bundle: metadata.bundle,
               route: metadata.route,
               runtime: metadata.runtime,
               data: newData.data,
@@ -2280,7 +2384,7 @@ function RemoteComponent({
               rsc.remove();
             }
             setData(newData);
-            if (previousSrc !== null) {
+            if (previousSrc !== void 0) {
               onChange?.({
                 previousSrc,
                 nextSrc: src,
@@ -2289,17 +2393,21 @@ function RemoteComponent({
               });
             }
             if (result.error) {
+              hostStateRef.current.stage = "error";
               setRemoteComponent(result.error);
               onError?.(result.error);
             } else {
+              hostStateRef.current.stage = "loaded";
               setRemoteComponent(result.component);
               onLoad?.(src);
             }
           }
         } catch (error) {
           if (isAbortError(error)) {
+            hostStateRef.current.stage = "idle";
             return;
           }
+          hostStateRef.current.stage = "error";
           setRemoteComponent(error);
           onError?.(error);
         }
@@ -2330,7 +2438,7 @@ function RemoteComponent({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
-    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
+    runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
@@ -2349,7 +2457,7 @@ function RemoteComponent({
   if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
-    if (prevIsRemoteComponentRef.current) {
+    if (hostStateRef.current.prevIsRemoteComponent) {
       loadStaticRemoteComponent(
         Array.from(shadowRoot.querySelectorAll("script")),
         url,