remote-components 0.3.4 → 0.3.5

package/dist/host/nextjs/app/client-only.js

@@ -523,6 +523,24 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
+// src/host/shared/lifecycle.ts
+function makeReactEmitter(callbacks) {
+  return {
+    beforeLoad(src) {
+      callbacks.onBeforeLoad?.(src);
+    },
+    load(src) {
+      callbacks.onLoad?.(src);
+    },
+    error(error, _src) {
+      callbacks.onError?.(error);
+    },
+    change(info) {
+      callbacks.onChange?.(info);
+    }
+  };
+}
+
 // src/host/shared/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function sharedPolyfills(shared2, resolveClientUrl) {
@@ -728,32 +746,6 @@ async function buildWebpackResolve(hostShared, remoteShared, bundle, reactModule
   return resolve;
 }
 
-// src/host/shared/state.ts
-function createHostState() {
-  return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
-  };
-}
-
-// src/host/utils/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/runtime/html/html-spec.ts
 var ORIGIN_REWRITE_TAGS = [
   "img",
@@ -956,48 +948,6 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
-// src/runtime/html/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
-}
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.hasOwn(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
-    }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
-    }
-  }
-}
-
 // src/runtime/loaders/component-loader.ts
 import * as React from "react";
 import * as JSXDevRuntime from "react/jsx-dev-runtime";
@@ -1278,7 +1228,7 @@ var REMOTE_SHARED_ASSIGNMENT_RE = new RegExp(
   `\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
 );
 var ASYNC_MODULE_LOADER_RE = new RegExp(
-  `(?:__turbopack_context__|e)\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
+  `(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
 );
 var ASYNC_MODULE_CALLBACK_RE = new RegExp(
   `(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
@@ -2237,6 +2187,188 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   );
 }
 
+// src/host/shared/pipeline.ts
+function preparePipeline(input) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input.html, "text/html");
+  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);
+  const remoteShared = input.remoteShared ?? parsed.remoteShared;
+  if ("__remote_components_missing_shared__" in remoteShared) {
+    throw new RemoteComponentsError(
+      remoteShared.__remote_components_missing_shared__
+    );
+  }
+  applyOriginToNodes(doc, input.url, input.resolveClientUrl);
+  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
+  return { doc, parsed, scriptDescriptors };
+}
+async function loadPrepared(input) {
+  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
+  const { doc, parsed, scriptDescriptors } = prepared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  const userShared = await input.shared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  if (parsed.isRemoteComponent) {
+    return loadStaticPath({
+      parsed,
+      doc,
+      url,
+      resolveClientUrl
+    });
+  }
+  return loadDynamicPath({
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: userShared,
+    resolveClientUrl,
+    container,
+    rscName
+  });
+}
+function buildScriptDescriptors(scripts, url) {
+  return scripts.map((script) => {
+    const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
+      prefix: void 0,
+      id: scriptSrc
+    };
+    return {
+      src: new URL(collapseDoubleSlashes(`${prefix ?? ""}${path}`), url).href
+    };
+  });
+}
+async function loadStaticPath(input) {
+  const { parsed, doc, url, resolveClientUrl } = input;
+  const scripts = Array.from(
+    parsed.component.querySelectorAll("script")
+  );
+  const { mount, unmount } = await loadStaticRemoteComponent(
+    scripts,
+    url,
+    resolveClientUrl
+  );
+  return {
+    status: "static",
+    mount,
+    unmount,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+async function loadDynamicPath(input) {
+  const {
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: shared2,
+    resolveClientUrl,
+    container
+  } = input;
+  const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}` : void 0);
+  const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
+  const result = await loadRemoteComponent({
+    url,
+    name: parsed.name,
+    rscName,
+    bundle: parsed.metadata.bundle,
+    route: parsed.metadata.route,
+    runtime: parsed.metadata.runtime,
+    data: rscData,
+    nextData: parsed.nextData,
+    scripts: scriptDescriptors,
+    shared: buildHostShared(shared2, resolveClientUrl),
+    remoteShared: parsed.remoteShared,
+    container,
+    resolveClientUrl
+  });
+  if (result.error) {
+    return { status: "error", error: result.error };
+  }
+  return {
+    status: "loaded",
+    component: result.component,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+
+// src/host/shared/state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/host/utils/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/runtime/html/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
 // src/host/react/hooks/use-resolve-client-url.ts
 import { useMemo } from "react";
 import { useRemoteComponentsContext } from "#internal/host/react/context";
@@ -2337,6 +2469,10 @@ function ConsumeRemoteComponent({
   const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
   const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
   const shared2 = sharedProp ?? contextShared ?? {};
+  const emitter = useMemo2(
+    () => makeReactEmitter({ onBeforeLoad, onLoad, onError, onChange }),
+    [onBeforeLoad, onLoad, onError, onChange]
+  );
   const name = useMemo2(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2426,7 +2562,7 @@ function ConsumeRemoteComponent({
       hostStateRef.current.abortController?.abort();
       hostStateRef.current.abortController = new AbortController();
       const { signal } = hostStateRef.current.abortController;
-      onBeforeLoad?.(src);
+      emitter.beforeLoad(src);
       hostStateRef.current.stage = "loading";
       startTransition(async () => {
         try {
@@ -2457,19 +2593,26 @@ function ConsumeRemoteComponent({
           }
           if (signal.aborted)
             return;
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(html, "text/html");
+          const userShared = await shared2;
+          if (signal.aborted)
+            return;
+          const prepared = preparePipeline({
+            html,
+            name,
+            url,
+            shared: userShared,
+            resolveClientUrl
+          });
+          const { doc, parsed } = prepared;
           const {
             component,
             name: remoteName,
             isRemoteComponent,
             metadata,
-            nextData,
             rsc,
             remoteShared,
-            links: linkElements,
-            scripts: scriptElements
-          } = parseRemoteComponentDocument(doc, name, url);
+            links: linkElements
+          } = parsed;
           if (hostStateRef.current.prevIsRemoteComponent) {
             if (shadowRoot) {
               shadowRoot.innerHTML = "";
@@ -2490,7 +2633,6 @@ function ConsumeRemoteComponent({
           hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
           hostStateRef.current.prevUrl = url;
           hostStateRef.current.prevName = remoteName;
-          applyOriginToNodes(doc, url, resolveClientUrl);
           const links = linkElements.map((link) => ({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
@@ -2500,7 +2642,6 @@ function ConsumeRemoteComponent({
               return acc;
             }, {})
           }));
-          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__'])"
           );
@@ -2579,20 +2720,10 @@ function ConsumeRemoteComponent({
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
           ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
-          const userShared = await shared2;
-          if ("__remote_components_missing_shared__" in userShared) {
-            userShared.__remote_components_missing_shared__().catch((e) => {
-              throw e;
-            });
-          } else if ("__remote_components_missing_shared__" in remoteShared) {
-            throw new RemoteComponentsError(
-              remoteShared.__remote_components_missing_shared__
-            );
-          }
           if (isRemoteComponent) {
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
@@ -2613,7 +2744,7 @@ function ConsumeRemoteComponent({
               await Promise.all(
                 Array.from(mount).map((mountFn) => mountFn(shadowRoot))
               );
-              onLoad?.(src);
+              emitter.load(src);
             } else if (isolate === false) {
               setRemoteComponent(
                 // TODO: remove wrapper div by converting HTML to RSC or React tree
@@ -2637,59 +2768,42 @@ function ConsumeRemoteComponent({
                   (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
                 )
               );
-              onLoad?.(src);
+              emitter.load(src);
             }
             hostStateRef.current.stage = "loaded";
           } else {
-            const result = await loadRemoteComponent({
+            const result = await loadPrepared({
+              prepared,
               url,
-              name: remoteName,
-              rscName,
-              bundle: metadata.bundle,
-              route: metadata.route,
-              runtime: metadata.runtime,
-              data: newData.data,
-              nextData,
-              scripts: Array.from(scripts).map((script) => {
-                const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
-                const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
-                  scriptSrc
-                )?.groups ?? {
-                  prefix: void 0,
-                  id: scriptSrc
-                };
-                return {
-                  src: new URL(
-                    collapseDoubleSlashes(`${prefix ?? ""}${path}`),
-                    url
-                  ).href
-                };
-              }),
-              shared: buildHostShared(userShared, resolveClientUrl),
-              remoteShared,
+              signal,
+              shared: userShared,
+              resolveClientUrl,
               container: shadowRoot,
-              resolveClientUrl
+              rscName
             });
             if (rsc) {
               rsc.remove();
             }
             setData(newData);
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
               });
             }
-            if (result.error) {
+            if (result.status === "aborted") {
+              return;
+            }
+            if (result.status === "error") {
               hostStateRef.current.stage = "error";
               setRemoteComponent(result.error);
-              onError?.(result.error);
-            } else {
+              emitter.error(result.error);
+            } else if (result.status === "loaded") {
               hostStateRef.current.stage = "loaded";
               setRemoteComponent(result.component);
-              onLoad?.(src);
+              emitter.load(src);
             }
           }
         } catch (error) {
@@ -2699,7 +2813,7 @@ function ConsumeRemoteComponent({
           }
           hostStateRef.current.stage = "error";
           setRemoteComponent(error);
-          onError?.(error);
+          emitter.error(error);
         }
       });
     }
@@ -2713,10 +2827,10 @@ function ConsumeRemoteComponent({
     shadowRoot,
     reset,
     id,
-    onBeforeLoad,
-    onLoad,
-    onError,
-    onChange,
+    emitter.beforeLoad,
+    emitter.load,
+    emitter.error,
+    emitter.change,
     onRequest,
     onResponse,
     resolveClientUrl
@@ -2758,7 +2872,7 @@ function ConsumeRemoteComponent({
         );
       }).then(() => {
         if (src) {
-          onLoad?.(src);
+          emitter.load(src);
         }
       }).catch((e) => {
         const error = new RemoteComponentsError(
@@ -2768,7 +2882,7 @@ function ConsumeRemoteComponent({
           }
         );
         setRemoteComponent(error);
-        onError?.(error);
+        emitter.error(error);
       });
     }
   }