remote-components 0.3.5 → 0.3.7

package/dist/chunk-GBFUPMMI.js

@@ -0,0 +1,670 @@
+import {
+  bindResolveClientUrl,
+  createHostState,
+  fetchWithHooks,
+  getClientOrServerUrl,
+  loadPrepared,
+  makeReactEmitter,
+  preparePipeline,
+  resolveNameFromSrc
+} from "./chunk-NZAB7REE.js";
+import {
+  loadStaticRemoteComponent
+} from "./chunk-LQ7VQ74E.js";
+import {
+  DEFAULT_COMPONENT_NAME,
+  DEFAULT_ROUTE,
+  RUNTIME_SCRIPT,
+  RUNTIME_WEBPACK,
+  attrToProp,
+  escapeString
+} from "./chunk-SJM7AAGU.js";
+import {
+  getNamespace
+} from "./chunk-D5GNZB6O.js";
+import {
+  RemoteComponentsError,
+  errorFromFailedFetch,
+  isAbortError
+} from "./chunk-S2A4TFLS.js";
+
+// src/host/react/index.tsx
+import {
+  startTransition,
+  useEffect,
+  useId,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { createPortal } from "react-dom";
+import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
+
+// 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";
+function useResolveClientUrl(prop, urlHref) {
+  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
+  const raw = prop ?? contextValue;
+  return useMemo(() => bindResolveClientUrl(raw, urlHref), [raw, urlHref]);
+}
+
+// src/host/react/hooks/use-shadow-root.ts
+import { useLayoutEffect, useRef, useState } from "react";
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = useRef(null);
+  const [shadowRoot, setShadowRoot] = useState(() => {
+    const shadowRoots = getNamespace().shadowRoots;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    )?.shadowRoot ?? shadowRoots[keySuffix] ?? null : null;
+    shadowRoots[keySuffix] = null;
+    return ssrShadowRoot;
+  });
+  useLayoutEffect(() => {
+    const shadowRoots = getNamespace().shadowRoots;
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
+      );
+      shadowRootElement = shadowRoots[keySuffix] ?? element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          shadowRoots[keySuffix] = shadowRootElement;
+        } catch {
+        }
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    } else if (isolate === false && shadowRoot) {
+      shadowRoots[keySuffix] = null;
+      setShadowRoot(null);
+    }
+  }, [isolate, shadowRoot, mode, keySuffix]);
+  return { shadowRoot, shadowRootContainerRef };
+}
+
+// src/host/react/utils/extract-remote-html.ts
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
+function getRemoteComponentHtml(html) {
+  if (typeof document === "undefined")
+    return html;
+  const parser = new DOMParser();
+  const temp = parser.parseFromString(html, "text/html");
+  const ssrRemoteComponentContainer = temp.querySelector(
+    'div[id^="__REMOTE_COMPONENT"]'
+  );
+  if (ssrRemoteComponentContainer) {
+    return ssrRemoteComponentContainer.innerHTML;
+  }
+  const remoteComponentContainer = temp.querySelectorAll(
+    `div[data-bundle][data-route][data-runtime][id^="${DEFAULT_COMPONENT_NAME}"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
+  );
+  if (remoteComponentContainer.length > 0) {
+    return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
+  }
+  return "";
+}
+
+// src/host/react/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+function ConsumeRemoteComponent({
+  src,
+  isolate,
+  mode = "open",
+  reset,
+  credentials: credentialsProp,
+  name: nameProp = DEFAULT_COMPONENT_NAME,
+  shared: sharedProp,
+  children,
+  onBeforeLoad,
+  onLoad,
+  onError,
+  onChange,
+  onRequest,
+  onResponse,
+  resolveClientUrl: resolveClientUrlProp
+}) {
+  const instanceId = useId();
+  const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
+  const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
+  const shared = sharedProp ?? contextShared ?? {};
+  const emitter = useMemo2(
+    () => makeReactEmitter({ onBeforeLoad, onLoad, onError, onChange }),
+    [onBeforeLoad, onLoad, onError, onChange]
+  );
+  const name = useMemo2(
+    () => resolveNameFromSrc(src, nameProp),
+    [src, nameProp]
+  );
+  const [data, setData] = useState2(
+    null
+  );
+  const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const resolveClientUrl = useResolveClientUrl(resolveClientUrlProp, url.href);
+  const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
+  const keySuffix = `${escapeString(id)}_${escapeString(
+    data?.name ?? name
+  )}_${escapeString(instanceId)}`;
+  const [remoteComponent, setRemoteComponent] = useState2(null);
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
+  });
+  const htmlRef = useRef2(
+    typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
+  );
+  const endTemplateRef = useRef2(null);
+  const childrenRef = useRef2(
+    typeof document !== "undefined" ? (() => {
+      let el = document.querySelector(`template[id="${name}_start"]`);
+      const elements = [];
+      while (el && el.id !== `${name}_end`) {
+        if (el.id !== `${name}_start` && !el.getAttribute("data-remote-component")) {
+          elements.push(el);
+        }
+        el = el.nextElementSibling;
+      }
+      return elements;
+    })() : []
+  );
+  const hostStateRef = useRef2(createHostState());
+  const componentHydrationHtml = useRef2(null);
+  const prevRemoteComponentContainerRef = useRef2(null);
+  const unmountRef = useRef2(null);
+  useLayoutEffect2(() => {
+    return () => {
+      delete getNamespace().shadowRoots[keySuffix];
+    };
+  }, [keySuffix]);
+  useLayoutEffect2(() => {
+    if (childrenRef.current.length > 0 && remoteComponent) {
+      childrenRef.current.forEach((el) => {
+        el.remove();
+      });
+      childrenRef.current = [];
+    }
+  }, [remoteComponent]);
+  useLayoutEffect2(() => {
+    if (shadowRoot && remoteComponent) {
+      const resetStyles = shadowRoot.querySelectorAll(
+        "style[data-remote-components-reset]"
+      );
+      if (resetStyles.length > 1) {
+        resetStyles.forEach((style, index) => {
+          if (index > 0 && style.getAttribute("data-remote-components-reset") !== "react") {
+            style.remove();
+          }
+        });
+      }
+      htmlRef.current = null;
+      let el = shadowRoot.childNodes[0] ?? null;
+      while (el && (!("id" in el) || el.id !== `${name}_start`)) {
+        const nextEl = el.nextSibling;
+        if (el.nodeName !== "LINK" && el.nodeName !== "STYLE") {
+          el.parentNode?.removeChild(el);
+        }
+        el = nextEl;
+      }
+    }
+  }, [shadowRoot, remoteComponent, name]);
+  useEffect(() => {
+    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;
+      emitter.beforeLoad(src);
+      hostStateRef.current.stage = "loading";
+      startTransition(async () => {
+        try {
+          let html = getRemoteComponentHtml(
+            htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
+          );
+          if (!html && src) {
+            const fetchInit = {
+              credentials
+            };
+            const resolvedUrl = new URL(
+              resolveClientUrl?.(url.href) ?? url.href,
+              location.href
+            );
+            const res = await fetchWithHooks(resolvedUrl, fetchInit, {
+              onRequest,
+              onResponse,
+              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 userShared = await shared;
+          if (signal.aborted)
+            return;
+          const prepared = preparePipeline({
+            html,
+            name,
+            url,
+            shared: userShared,
+            resolveClientUrl
+          });
+          const { doc, parsed } = prepared;
+          const {
+            component,
+            name: remoteName,
+            isRemoteComponent,
+            metadata,
+            rsc,
+            remoteShared,
+            links: linkElements
+          } = parsed;
+          if (hostStateRef.current.prevIsRemoteComponent) {
+            if (shadowRoot) {
+              shadowRoot.innerHTML = "";
+            }
+            const prevUrl = hostStateRef.current.prevUrl;
+            if (prevUrl && getNamespace().unmountFns[prevUrl.href]) {
+              const unmountPromises = Promise.all(
+                Array.from(unmountRef.current ?? []).map(
+                  async (unmount) => unmount(
+                    shadowRoot ?? prevRemoteComponentContainerRef.current
+                  )
+                )
+              );
+              unmountRef.current = null;
+              await unmountPromises;
+            }
+          }
+          hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
+          hostStateRef.current.prevUrl = url;
+          hostStateRef.current.prevName = remoteName;
+          const links = linkElements.map((link) => ({
+            href: new URL(link.getAttribute("href") ?? link.href, url).href,
+            ...link.getAttributeNames().reduce((acc, key) => {
+              if (key !== "href") {
+                acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
+              }
+              return acc;
+            }, {})
+          }));
+          const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
+            "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
+          );
+          if (!isRemoteComponent) {
+            const self = globalThis;
+            const prevNextScripts = self.__next_s;
+            const nextScripts = [];
+            self.__next_s = nextScripts;
+            await Promise.all(
+              Array.from(inlineScripts).filter(
+                (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
+                  "data-remote-components-shared"
+                ) === "string")
+              ).map((script) => {
+                return new Promise((resolve) => {
+                  if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
+                    if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
+                      const newScript = document.createElement("script");
+                      const blob = new Blob([script.textContent], {
+                        type: "application/javascript"
+                      });
+                      const blobUrl = URL.createObjectURL(blob);
+                      newScript.onload = () => {
+                        resolve(void 0);
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                      };
+                      newScript.onerror = () => {
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                        resolve(void 0);
+                      };
+                      newScript.src = blobUrl;
+                      document.body.appendChild(newScript);
+                    } else {
+                      resolve(void 0);
+                      document.body.appendChild(script);
+                    }
+                  } else {
+                    resolve(void 0);
+                  }
+                });
+              })
+            );
+            nextScripts.forEach(([scriptSrc, props]) => {
+              const script = document.createElement("script");
+              if (scriptSrc) {
+                script.src = scriptSrc;
+              }
+              if (typeof props.children === "string") {
+                script.textContent = props.children;
+              }
+              setAttributesFromProps(script, props);
+              document.head.appendChild(script);
+            });
+            self.__next_s = prevNextScripts;
+          }
+          const rscName = rsc ? `__remote_component_rsc_${escapeString(id)}_${escapeString(
+            remoteName
+          )}` : void 0;
+          if (rsc) {
+            rsc.textContent = rsc.textContent?.replace(
+              new RegExp(`self\\["${remoteName}"\\]`, "g"),
+              `self["${rscName}"]`
+            ) ?? "";
+            document.body.appendChild(rsc);
+          }
+          const newData = {
+            ...metadata,
+            links,
+            remoteShared,
+            src: typeof src === "string" ? src : src.href,
+            serverUrl: url.href,
+            data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
+          };
+          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}`;
+          if (isRemoteComponent) {
+            if (previousSrc !== void 0) {
+              emitter.change({
+                previousSrc: previousSrc ?? null,
+                nextSrc: src,
+                previousName,
+                nextName: remoteName
+              });
+            }
+            setData(newData);
+            if (shadowRoot) {
+              const shadowRootHtml = reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>${component.innerHTML}` : component.innerHTML;
+              shadowRoot.innerHTML = shadowRootHtml;
+              htmlRef.current = null;
+              setRemoteComponent(null);
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(shadowRoot.querySelectorAll("script")),
+                url,
+                resolveClientUrl
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+              );
+              emitter.load(src);
+            } else if (isolate === false) {
+              setRemoteComponent(
+                // TODO: remove wrapper div by converting HTML to RSC or React tree
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: { __html: component.innerHTML },
+                    ref: prevRemoteComponentContainerRef
+                  }
+                )
+              );
+              htmlRef.current = null;
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(component.querySelectorAll("script")),
+                url,
+                resolveClientUrl
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map(
+                  (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
+                )
+              );
+              emitter.load(src);
+            }
+            hostStateRef.current.stage = "loaded";
+          } else {
+            const result = await loadPrepared({
+              prepared,
+              url,
+              signal,
+              shared: userShared,
+              resolveClientUrl,
+              container: shadowRoot,
+              rscName
+            });
+            if (rsc) {
+              rsc.remove();
+            }
+            setData(newData);
+            if (previousSrc !== void 0) {
+              emitter.change({
+                previousSrc: previousSrc ?? null,
+                nextSrc: src,
+                previousName,
+                nextName: remoteName
+              });
+            }
+            if (result.status === "aborted") {
+              return;
+            }
+            if (result.status === "error") {
+              hostStateRef.current.stage = "error";
+              setRemoteComponent(result.error);
+              emitter.error(result.error);
+            } else if (result.status === "loaded") {
+              hostStateRef.current.stage = "loaded";
+              setRemoteComponent(result.component);
+              emitter.load(src);
+            }
+          }
+        } catch (error) {
+          if (isAbortError(error)) {
+            hostStateRef.current.stage = "idle";
+            return;
+          }
+          hostStateRef.current.stage = "error";
+          setRemoteComponent(error);
+          emitter.error(error);
+        }
+      });
+    }
+  }, [
+    url,
+    src,
+    isolate,
+    credentials,
+    name,
+    shared,
+    shadowRoot,
+    reset,
+    id,
+    emitter.beforeLoad,
+    emitter.load,
+    emitter.error,
+    emitter.change,
+    onRequest,
+    onResponse,
+    resolveClientUrl
+  ]);
+  if (remoteComponent instanceof Error) {
+    throw remoteComponent;
+  }
+  const metadataJson = /* @__PURE__ */ jsx("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+    name: data?.name || name,
+    bundle: data?.bundle || "default",
+    route: data?.route || DEFAULT_ROUTE,
+    runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
+  }) });
+  const resetStyle = reset ? /* @__PURE__ */ jsx("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement(
+    "link",
+    {
+      ...link,
+      href: new URL(link.href, url).href,
+      key: JSON.stringify(link)
+    }
+  )) || null;
+  const componentToRender = /* @__PURE__ */ jsxs(Fragment, { children: [
+    resetStyle,
+    linksToRender,
+    remoteComponent ?? children
+  ] });
+  if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
+    shadowRoot.innerHTML = componentHydrationHtml.current;
+    componentHydrationHtml.current = null;
+    if (hostStateRef.current.prevIsRemoteComponent) {
+      loadStaticRemoteComponent(
+        Array.from(shadowRoot.querySelectorAll("script")),
+        url,
+        resolveClientUrl
+      ).then(({ mount }) => {
+        return Promise.all(
+          Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+        );
+      }).then(() => {
+        if (src) {
+          emitter.load(src);
+        }
+      }).catch((e) => {
+        const error = new RemoteComponentsError(
+          `Error mounting remote component from "${url.href}"`,
+          {
+            cause: e
+          }
+        );
+        setRemoteComponent(error);
+        emitter.error(error);
+      });
+    }
+  }
+  if (isolate !== false) {
+    const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");
+    if (shadowRemoteComponentHtml) {
+      shadowRemoteComponentHtml.remove();
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      metadataJson,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-remote-component-id": `shadowroot_${keySuffix}`,
+          id: `shadowroot_${data?.name ?? name}`,
+          ref: shadowRootContainerRef,
+          children: [
+            typeof document === "undefined" ? (
+              // eslint-disable-next-line react/no-unknown-property
+              /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: {
+                      __html: `<img
+      alt="" decoding="async" style="display:none"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+      onload="(function(el){
+        // Capture the shadow root during SSR hydration so the client-side
+        // useShadowRoot hook can find it.
+        const root = el.getRootNode();
+        globalThis.__remote_components_shadowroot_${keySuffix}=root;
+        el.parentElement.remove();
+      })(this)"
+    />`
+                    }
+                  }
+                ) : null,
+                resetStyle,
+                linksToRender,
+                children
+              ] })
+            ) : null,
+            shadowRoot && remoteComponent ? createPortal(
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
+                resetStyle,
+                linksToRender,
+                remoteComponent,
+                /* @__PURE__ */ jsx("template", { id: `${name}_end`, ref: endTemplateRef })
+              ] }),
+              shadowRoot
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+  htmlRef.current = null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
+    metadataJson,
+    componentToRender,
+    /* @__PURE__ */ jsx("template", { id: `${name}_end`, ref: endTemplateRef })
+  ] });
+}
+
+export {
+  ConsumeRemoteComponent
+};
+//# sourceMappingURL=chunk-GBFUPMMI.js.map