remote-components 0.3.4 → 0.3.6

package/dist/chunk-KKBEMQU7.cjs

@@ -0,0 +1,670 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+
+
+
+
+var _chunkER73O65Fcjs = require('./chunk-ER73O65F.cjs');
+
+
+var _chunkCREXMFMFcjs = require('./chunk-CREXMFMF.cjs');
+
+
+
+
+
+
+
+var _chunkR4QFK5TNcjs = require('./chunk-R4QFK5TN.cjs');
+
+
+var _chunk7MVFHOIPcjs = require('./chunk-7MVFHOIP.cjs');
+
+
+
+
+var _chunkRUWR74XQcjs = require('./chunk-RUWR74XQ.cjs');
+
+// src/host/react/index.tsx
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _context = require('#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
+
+
+function useResolveClientUrl(prop, urlHref) {
+  const { resolveClientUrl: contextValue } = _context.useRemoteComponentsContext.call(void 0, );
+  const raw = _nullishCoalesce(prop, () => ( contextValue));
+  return _react.useMemo.call(void 0, () => _chunkER73O65Fcjs.bindResolveClientUrl.call(void 0, raw, urlHref), [raw, urlHref]);
+}
+
+// src/host/react/hooks/use-shadow-root.ts
+
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = _react.useRef.call(void 0, null);
+  const [shadowRoot, setShadowRoot] = _react.useState.call(void 0, () => {
+    const shadowRoots = _chunk7MVFHOIPcjs.getNamespace.call(void 0, ).shadowRoots;
+    const ssrShadowRoot = typeof document !== "undefined" ? _nullishCoalesce(_nullishCoalesce(_optionalChain([document, 'access', _ => _.querySelector, 'call', _2 => _2(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    ), 'optionalAccess', _3 => _3.shadowRoot]), () => ( shadowRoots[keySuffix])), () => ( null)) : null;
+    shadowRoots[keySuffix] = null;
+    return ssrShadowRoot;
+  });
+  _react.useLayoutEffect.call(void 0, () => {
+    const shadowRoots = _chunk7MVFHOIPcjs.getNamespace.call(void 0, ).shadowRoots;
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
+      );
+      shadowRootElement = _nullishCoalesce(_nullishCoalesce(shadowRoots[keySuffix], () => ( _optionalChain([element, 'optionalAccess', _4 => _4.shadowRoot]))), () => ( null));
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          shadowRoots[keySuffix] = shadowRootElement;
+        } catch (e2) {
+        }
+      }
+      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^="${_chunkR4QFK5TNcjs.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
+var _jsxruntime = require('react/jsx-runtime');
+
+function ConsumeRemoteComponent({
+  src,
+  isolate,
+  mode = "open",
+  reset,
+  credentials: credentialsProp,
+  name: nameProp = _chunkR4QFK5TNcjs.DEFAULT_COMPONENT_NAME,
+  shared: sharedProp,
+  children,
+  onBeforeLoad,
+  onLoad,
+  onError,
+  onChange,
+  onRequest,
+  onResponse,
+  resolveClientUrl: resolveClientUrlProp
+}) {
+  const instanceId = _react.useId.call(void 0, );
+  const { credentials: contextCredentials, shared: contextShared } = _context.useRemoteComponentsContext.call(void 0, );
+  const credentials = _nullishCoalesce(_nullishCoalesce(credentialsProp, () => ( contextCredentials)), () => ( "same-origin"));
+  const shared = _nullishCoalesce(_nullishCoalesce(sharedProp, () => ( contextShared)), () => ( {}));
+  const emitter = _react.useMemo.call(void 0, 
+    () => _chunkER73O65Fcjs.makeReactEmitter.call(void 0, { onBeforeLoad, onLoad, onError, onChange }),
+    [onBeforeLoad, onLoad, onError, onChange]
+  );
+  const name = _react.useMemo.call(void 0, 
+    () => _chunkER73O65Fcjs.resolveNameFromSrc.call(void 0, src, nameProp),
+    [src, nameProp]
+  );
+  const [data, setData] = _react.useState.call(void 0, 
+    null
+  );
+  const url = _react.useMemo.call(void 0, () => _chunkER73O65Fcjs.getClientOrServerUrl.call(void 0, 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 = `${_chunkR4QFK5TNcjs.escapeString.call(void 0, id)}_${_chunkR4QFK5TNcjs.escapeString.call(void 0, 
+    _nullishCoalesce(_optionalChain([data, 'optionalAccess', _5 => _5.name]), () => ( name))
+  )}_${_chunkR4QFK5TNcjs.escapeString.call(void 0, instanceId)}`;
+  const [remoteComponent, setRemoteComponent] = _react.useState.call(void 0, null);
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
+  });
+  const htmlRef = _react.useRef.call(void 0, 
+    typeof document !== "undefined" ? _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([document, 'access', _6 => _6.querySelector, 'call', _7 => _7(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    ), 'optionalAccess', _8 => _8.shadowRoot, 'optionalAccess', _9 => _9.innerHTML]), () => ( _optionalChain([document, 'access', _10 => _10.getElementById, 'call', _11 => _11(`__REMOTE_COMPONENT${name}`), 'optionalAccess', _12 => _12.innerHTML]))), () => ( _optionalChain([document, 'access', _13 => _13.querySelector, 'call', _14 => _14(`div[data-bundle][data-route][id^="${name}"]`), 'optionalAccess', _15 => _15.innerHTML]))), () => ( _optionalChain([document, 'access', _16 => _16.querySelector, 'call', _17 => _17("div[data-bundle][data-route]"), 'optionalAccess', _18 => _18.innerHTML]))) : null
+  );
+  const endTemplateRef = _react.useRef.call(void 0, null);
+  const childrenRef = _react.useRef.call(void 0, 
+    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 = _react.useRef.call(void 0, _chunkER73O65Fcjs.createHostState.call(void 0, ));
+  const componentHydrationHtml = _react.useRef.call(void 0, null);
+  const prevRemoteComponentContainerRef = _react.useRef.call(void 0, null);
+  const unmountRef = _react.useRef.call(void 0, null);
+  _react.useLayoutEffect.call(void 0, () => {
+    return () => {
+      delete _chunk7MVFHOIPcjs.getNamespace.call(void 0, ).shadowRoots[keySuffix];
+    };
+  }, [keySuffix]);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (childrenRef.current.length > 0 && remoteComponent) {
+      childrenRef.current.forEach((el) => {
+        el.remove();
+      });
+      childrenRef.current = [];
+    }
+  }, [remoteComponent]);
+  _react.useLayoutEffect.call(void 0, () => {
+    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 = _nullishCoalesce(shadowRoot.childNodes[0], () => ( null));
+      while (el && (!("id" in el) || el.id !== `${name}_start`)) {
+        const nextEl = el.nextSibling;
+        if (el.nodeName !== "LINK" && el.nodeName !== "STYLE") {
+          _optionalChain([el, 'access', _19 => _19.parentNode, 'optionalAccess', _20 => _20.removeChild, 'call', _21 => _21(el)]);
+        }
+        el = nextEl;
+      }
+    }
+  }, [shadowRoot, remoteComponent, name]);
+  _react.useEffect.call(void 0, () => {
+    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;
+      }
+      _optionalChain([hostStateRef, 'access', _22 => _22.current, 'access', _23 => _23.abortController, 'optionalAccess', _24 => _24.abort, 'call', _25 => _25()]);
+      hostStateRef.current.abortController = new AbortController();
+      const { signal } = hostStateRef.current.abortController;
+      emitter.beforeLoad(src);
+      hostStateRef.current.stage = "loading";
+      _react.startTransition.call(void 0, async () => {
+        try {
+          let html = getRemoteComponentHtml(
+            _nullishCoalesce(htmlRef.current, () => ( (_optionalChain([endTemplateRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.previousElementSibling, 'optionalAccess', _28 => _28.tagName]) === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")))
+          );
+          if (!html && src) {
+            const fetchInit = {
+              credentials
+            };
+            const resolvedUrl = new URL(
+              _nullishCoalesce(_optionalChain([resolveClientUrl, 'optionalCall', _29 => _29(url.href)]), () => ( url.href)),
+              location.href
+            );
+            const res = await _chunkER73O65Fcjs.fetchWithHooks.call(void 0, resolvedUrl, fetchInit, {
+              onRequest,
+              onResponse,
+              abortController: hostStateRef.current.abortController
+            });
+            if (!res || !res.ok) {
+              throw await _chunkRUWR74XQcjs.errorFromFailedFetch.call(void 0, 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 = _chunkER73O65Fcjs.preparePipeline.call(void 0, {
+            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 && _chunk7MVFHOIPcjs.getNamespace.call(void 0, ).unmountFns[prevUrl.href]) {
+              const unmountPromises = Promise.all(
+                Array.from(_nullishCoalesce(unmountRef.current, () => ( []))).map(
+                  async (unmount) => unmount(
+                    _nullishCoalesce(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(_nullishCoalesce(link.getAttribute("href"), () => ( link.href)), url).href,
+            ...link.getAttributeNames().reduce((acc, key) => {
+              if (key !== "href") {
+                acc[_nullishCoalesce(_chunkR4QFK5TNcjs.attrToProp[key], () => ( key))] = _nullishCoalesce(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_${_chunkR4QFK5TNcjs.escapeString.call(void 0, id)}_${_chunkR4QFK5TNcjs.escapeString.call(void 0, 
+            remoteName
+          )}` : void 0;
+          if (rsc) {
+            rsc.textContent = _nullishCoalesce(_optionalChain([rsc, 'access', _30 => _30.textContent, 'optionalAccess', _31 => _31.replace, 'call', _32 => _32(
+              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: _nullishCoalesce(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 _chunkCREXMFMFcjs.loadStaticRemoteComponent.call(void 0, 
+                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__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: { __html: component.innerHTML },
+                    ref: prevRemoteComponentContainerRef
+                  }
+                )
+              );
+              htmlRef.current = null;
+              const { mount, unmount } = await _chunkCREXMFMFcjs.loadStaticRemoteComponent.call(void 0, 
+                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 _chunkER73O65Fcjs.loadPrepared.call(void 0, {
+              prepared,
+              url,
+              signal,
+              shared: userShared,
+              resolveClientUrl,
+              container: shadowRoot,
+              rscName
+            });
+            if (rsc) {
+              rsc.remove();
+            }
+            setData(newData);
+            if (previousSrc !== void 0) {
+              emitter.change({
+                previousSrc: _nullishCoalesce(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 (_chunkRUWR74XQcjs.isAbortError.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, "script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+    name: _optionalChain([data, 'optionalAccess', _33 => _33.name]) || name,
+    bundle: _optionalChain([data, 'optionalAccess', _34 => _34.bundle]) || "default",
+    route: _optionalChain([data, 'optionalAccess', _35 => _35.route]) || _chunkR4QFK5TNcjs.DEFAULT_ROUTE,
+    runtime: hostStateRef.current.prevIsRemoteComponent ? _chunkR4QFK5TNcjs.RUNTIME_SCRIPT : _optionalChain([data, 'optionalAccess', _36 => _36.runtime]) || _chunkR4QFK5TNcjs.RUNTIME_WEBPACK
+  }) });
+  const resetStyle = reset ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const linksToRender = _optionalChain([data, 'optionalAccess', _37 => _37.links, 'optionalAccess', _38 => _38.map, 'call', _39 => _39((link) => /* @__PURE__ */ _react.createElement.call(void 0, 
+    "link",
+    {
+      ...link,
+      href: new URL(link.href, url).href,
+      key: JSON.stringify(link)
+    }
+  ))]) || null;
+  const componentToRender = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    resetStyle,
+    linksToRender,
+    _nullishCoalesce(remoteComponent, () => ( children))
+  ] });
+  if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
+    shadowRoot.innerHTML = componentHydrationHtml.current;
+    componentHydrationHtml.current = null;
+    if (hostStateRef.current.prevIsRemoteComponent) {
+      _chunkCREXMFMFcjs.loadStaticRemoteComponent.call(void 0, 
+        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 (0, _chunkRUWR74XQcjs.RemoteComponentsError)(
+          `Error mounting remote component from "${url.href}"`,
+          {
+            cause: e
+          }
+        );
+        setRemoteComponent(error);
+        emitter.error(error);
+      });
+    }
+  }
+  if (isolate !== false) {
+    const shadowRemoteComponentHtml = _nullishCoalesce(_optionalChain([shadowRoot, 'optionalAccess', _40 => _40.querySelector, 'call', _41 => _41(`#__REMOTE_COMPONENT${name}`)]), () => ( _optionalChain([shadowRoot, 'optionalAccess', _42 => _42.querySelector, 'call', _43 => _43("div[data-bundle][data-route]")])));
+    if (shadowRemoteComponentHtml) {
+      shadowRemoteComponentHtml.remove();
+    }
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      metadataJson,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          "data-remote-component-id": `shadowroot_${keySuffix}`,
+          id: `shadowroot_${_nullishCoalesce(_optionalChain([data, 'optionalAccess', _44 => _44.name]), () => ( name))}`,
+          ref: shadowRootContainerRef,
+          children: [
+            typeof document === "undefined" ? (
+              // eslint-disable-next-line react/no-unknown-property
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "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 ? _reactdom.createPortal.call(void 0, 
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "template", { id: `${name}_start` }),
+                resetStyle,
+                linksToRender,
+                remoteComponent,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "template", { id: `${name}_end`, ref: endTemplateRef })
+              ] }),
+              shadowRoot
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+  htmlRef.current = null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "template", { id: `${name}_start` }),
+    metadataJson,
+    componentToRender,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "template", { id: `${name}_end`, ref: endTemplateRef })
+  ] });
+}
+
+
+
+exports.ConsumeRemoteComponent = ConsumeRemoteComponent;
+//# sourceMappingURL=chunk-KKBEMQU7.cjs.map