npm - remote-components - Versions diffs - 0.0.36 → 0.0.38 - Mend

remote-components 0.0.36 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/react/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n startTransition,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { applyOriginToNodes } from '#internal/shared/client/apply-origin';\nimport { sharedPolyfills } from '#internal/shared/client/polyfill';\nimport {\n DEFAULT_ROUTE,\n type LoadRemoteComponentProps,\n loadRemoteComponent,\n loadStaticRemoteComponent,\n REMOTE_COMPONENT_REGEX,\n RemoteComponentsError,\n RUNTIME_SCRIPT,\n RUNTIME_WEBPACK,\n setAttributesFromProps,\n} from '#internal/shared/client/remote-component';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n} from '#internal/shared/error';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n RemoteComponentProps as RemoteComponentPropsType,\n} from '#remote-components/shared/client/types';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n template: {\n shadowrootmode?: 'open' \| 'closed';\n id?: string;\n ref?: React.Ref<HTMLTemplateElement>;\n dangerouslySetInnerHTML?: {\n __html: string;\n };\n children?: React.ReactNode;\n };\n }\n }\n}\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. /\n src?: string \| URL;\n /* Whether to isolate the remote component using a Shadow DOM wrapper. /\n isolate?: boolean;\n /* The shadow DOM mode to use when isolating the remote component. /\n mode?: 'open' \| 'closed';\n /* Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. /\n reset?: boolean;\n /* The credentials to use for the fetch request. Defaults to `same-origin`. /\n credentials?: RequestCredentials;\n name?: string;\n /* Shared modules to include in the remote component's context. /\n shared?: LoadRemoteComponentProps['shared'];\n /* Additional headers to use when fetching the remote component. /\n additionalHeaders?: Headers \| Record<string, string>;\n /* The children to use as a loading fallback until the remote component is loaded. /\n children?: React.ReactNode;\n}\n\nfunction getRemoteComponentHtml(html: string) {\n if (typeof document === 'undefined') return html;\n\n // parse the HTML string to extract the relevant parts\n const parser = new DOMParser();\n const temp = parser.parseFromString(html, 'text/html');\n\n // used by the Next.js Pages Router remote as a wrapper\n const ssrRemoteComponentContainer = temp.querySelector(\n 'div[id^=\"__REMOTE_COMPONENT\"]',\n );\n if (ssrRemoteComponentContainer) {\n return ssrRemoteComponentContainer.innerHTML;\n }\n\n // remote component content\n const remoteComponentContainer = temp.querySelectorAll(\n `div[data-bundle][data-route][data-runtime][id^=\"__vercel_remote_component\"],div[data-bundle][data-route],div#__next,remote-component:not([src])`,\n );\n if (remoteComponentContainer.length > 0) {\n return `${Array.from(temp.querySelectorAll('link,script'))\n .map((link) => link.outerHTML)\n .join('')}${Array.from(remoteComponentContainer)\n .map((container) => container.outerHTML)\n .join('')}`;\n }\n\n return '';\n}\n\n/\n RemoteComponent is a React component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n \n @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n \n @example\n \n Use the `<RemoteComponent>` in your React application to consume a remote component from a remote application:\n \n ```tsx\n * import { RemoteComponent } from 'remote-components/react';\n \n export default function App() {\n * return (\n * <>\n * <h1>Welcome to My App</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n \n To share modules, you can provide a shared module map with references to the shared modules:\n \n ```tsx\n * <RemoteComponent\n * src=\"/nextjs-app-remote/components/header\"\n * shared={{\n * '@/components/provider': () => import('@/components/host-provider')\n * }}\n * />\n * ```\n /\nexport function RemoteComponent({\n src,\n isolate,\n mode = 'open',\n reset,\n credentials = 'same-origin',\n name: nameProp = '__vercel_remote_component',\n shared = {},\n additionalHeaders,\n children,\n}: RemoteComponentProps) {\n const name = useMemo(() => {\n if (typeof src === 'string') {\n const url = new URL(\n src,\n typeof document !== 'undefined' ? location.href : 'http://localhost',\n );\n if (url.hash) {\n return url.hash.slice(1);\n }\n } else if (typeof src === 'object' && 'hash' in src && src.hash) {\n return src.hash.slice(1) \|\| nameProp;\n }\n return nameProp;\n }, [src, nameProp]);\n\n const [data, setData] = useState<Omit<\n RemoteComponentPropsType,\n 'children'\n > \| null>(null);\n const [remoteComponent, setRemoteComponent] = useState<\n React.ReactNode \| Error\n >(null);\n const shadowRootContainerRef = useRef<HTMLDivElement \| null>(null);\n const [shadowRoot, setShadowRoot] = useState<ShadowRoot \| null>(() => {\n const self = globalThis as Record<\n `__remote_components_shadowroot_${string}`,\n ShadowRoot \| null\n >;\n const shadowRootKey =\n `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}` as const;\n const ssrShadowRoot =\n typeof document !== 'undefined'\n ? (document.querySelector(\n `[data-remote-component-id=\"shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}\"]`,\n )?.shadowRoot ??\n self[shadowRootKey] ??\n null)\n : null;\n self[shadowRootKey] = null;\n return ssrShadowRoot;\n });\n const htmlRef = useRef<string \| null>(\n typeof document !== 'undefined'\n ? (document.querySelector(\n `[data-remote-component-id=\"shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}\"]`,\n )?.shadowRoot?.innerHTML ??\n document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ??\n document.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`)\n ?.innerHTML ??\n document.querySelector('div[data-bundle][data-route]')?.innerHTML)\n : null,\n );\n const endTemplateRef = useRef<HTMLTemplateElement \| null>(null);\n // collect initial content that needs to be removed after remote component renders\n const childrenRef = useRef(\n typeof document !== 'undefined'\n ? (() => {\n let el = document.querySelector(`template[id=\"${name}_start\"]`);\n const elements = [];\n while (el && el.id !== `${name}_end`) {\n if (\n el.id !== `${name}_start` &&\n !el.getAttribute('data-remote-component')\n ) {\n elements.push(el);\n }\n el = el.nextElementSibling as HTMLTemplateElement \| null;\n }\n return elements;\n })()\n : [],\n );\n const prevSrcRef = useRef<string \| URL \| null>(null);\n const componentHydrationHtml = useRef<string \| null>(null);\n const prevIsRemoteComponentRef = useRef<boolean>(false);\n const prevUrlRef = useRef<URL \| null>(null);\n const prevRemoteComponentContainerRef = useRef<HTMLDivElement \| null>(null);\n const unmountRef = useRef<Set<MountOrUnmountFunction> \| null>(null);\n\n useLayoutEffect(() => {\n // clear initial content\n if (childrenRef.current.length > 0 && remoteComponent) {\n childrenRef.current.forEach((el) => {\n el.remove();\n });\n childrenRef.current = [];\n }\n\n if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n const self = globalThis as Record<\n `__remote_components_shadowroot_${string}`,\n ShadowRoot \| null\n >;\n const shadowRootKey =\n `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}` as const;\n\n let shadowRootElement: ShadowRoot \| null = null;\n const element = document.querySelector(\n `[data-remote-component-id=\"shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}\"]`,\n );\n shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n\n if (!shadowRootElement && element) {\n // create a shadow root if it doesn't exist\n // this is a fallback for browsers that don't support declarative shadow DOM\n try {\n shadowRootElement = element.attachShadow({ mode });\n self[shadowRootKey] = shadowRootElement;\n } catch {\n // do nothing if attachShadow fails because of existing shadow root\n }\n }\n\n if (shadowRootElement) {\n // remove all nodes from the shadow root except links\n shadowRootElement.querySelectorAll(':not(link)').forEach((node) => {\n node.remove();\n });\n setShadowRoot(shadowRootElement);\n }\n }\n }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);\n\n useLayoutEffect(() => {\n if (shadowRoot && remoteComponent) {\n const resetStyles = shadowRoot.querySelectorAll(\n 'style[data-remote-components-reset]',\n );\n // ensure we only have one reset style in the shadow root\n if (resetStyles.length > 1) {\n resetStyles.forEach((style, index) => {\n if (index > 0) {\n style.remove();\n }\n });\n }\n\n // clear the html ref after hydration\n htmlRef.current = null;\n\n // clear all nodes except links and styles until the start marker\n // the marker gets only rendered on hydration\n let el: ChildNode \| null = shadowRoot.childNodes[0] ?? null;\n while (el && (!('id' in el) \|\| el.id !== `${name}_start`)) {\n const nextEl = el.nextSibling;\n if (el.nodeName !== 'LINK' && el.nodeName !== 'STYLE') {\n el.parentNode?.removeChild(el);\n }\n el = nextEl;\n }\n }\n }, [shadowRoot, remoteComponent, name]);\n\n const url = useMemo(() => {\n if (typeof src !== 'string')\n return new URL(\n typeof document !== 'undefined' ? location.href : 'http://localhost',\n );\n try {\n return typeof document !== 'undefined'\n ? new URL(src, location.href)\n : new URL(src);\n } catch {\n return new URL(src, 'http://localhost');\n }\n }, [src]);\n\n useEffect(() => {\n if (src && src !== prevSrcRef.current) {\n prevSrcRef.current = src;\n\n startTransition(async () => {\n try {\n let html = getRemoteComponentHtml(\n htmlRef.current ??\n (endTemplateRef.current?.previousElementSibling?.tagName === 'div'\n ? endTemplateRef.current.previousElementSibling.innerHTML\n : ''),\n );\n\n if (!html && src) {\n // fetch the remote component\n const fetchInit = {\n method: 'GET',\n headers: remoteFetchHeaders(additionalHeaders),\n credentials,\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n let error: Error = failedToFetchRemoteComponentError(url.href, {\n cause: new Error(`${res.status} ${res.statusText}`),\n });\n try {\n const body = await res.text();\n const parser = new DOMParser();\n const doc = parser.parseFromString(body, 'text/html');\n const errorTemplate = doc.querySelector(\n 'template[data-next-error-message]',\n );\n const errorMessage = errorTemplate?.getAttribute(\n 'data-next-error-message',\n );\n const errorStack = errorTemplate?.getAttribute(\n 'data-next-error-stack',\n );\n\n if (errorMessage) {\n error = new RemoteComponentsError(errorMessage);\n if (errorStack) {\n error.stack = errorStack;\n }\n }\n } catch {\n // ignore\n }\n\n throw error;\n }\n\n // get the full HTML content as a string\n const remoteHtml = await res.text();\n htmlRef.current = remoteHtml;\n html = getRemoteComponentHtml(remoteHtml);\n }\n\n // create a virtual element which will be used to parse the HTML and extract the component and RSC flight data\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n if (\n (doc.querySelectorAll('div[data-bundle][data-route]').length > 1 &&\n !doc.querySelector(\n `div[data-bundle][data-route][id^=\"${name}\"]`,\n )) \|\|\n (doc.querySelectorAll('remote-component:not([src])').length > 1 &&\n !doc.querySelector(`remote-component[name=\"${name}\"]`))\n ) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // reference to the remote component content\n const component =\n doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`) ??\n // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component\n doc.querySelector('div[data-bundle][data-route]') ??\n // fallback to Next.js Pages Router\n doc.querySelector('div#__next') ??\n // fallback to the remote-component web component\n doc.querySelector(`remote-component[name=\"${name}\"]:not([src])`) ??\n doc.querySelector('remote-component:not([src])');\n const nextData = JSON.parse(\n (\n doc.querySelector('#__NEXT_DATA__') ??\n doc.querySelector('#__REMOTE_NEXT_DATA__')\n )?.textContent ?? 'null',\n ) as {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: 'turbopack' \| 'webpack' \| 'script';\n shared?: Record<string, string>;\n };\n };\n page: string;\n buildId: string;\n } \| null;\n\n const remoteName =\n component?.getAttribute('id')?.replace(/_ssr$/, '') \|\|\n (nextData ? '__next' : name);\n // reference to the RSC flight data\n const rsc = doc.querySelector(`#${remoteName}_rsc`);\n\n // reference to the bundle containing the client components\n const bundle =\n component?.getAttribute('data-bundle') \|\|\n nextData?.props.__REMOTE_COMPONENT__?.bundle \|\|\n 'default';\n\n const isRemoteComponent =\n component?.tagName.toLowerCase() === 'remote-component';\n\n const metadata = {\n name: remoteName,\n bundle,\n route:\n component?.getAttribute('data-route') ??\n nextData?.page ??\n (url.pathname \|\| DEFAULT_ROUTE),\n runtime: (component?.getAttribute('data-runtime') ??\n (nextData?.props.__REMOTE_COMPONENT__?.runtime \|\|\n RUNTIME_SCRIPT)) as RemoteComponentPropsType['runtime'],\n };\n\n const remoteSharedEl = doc.querySelector(\n `#${remoteName}_shared[data-remote-components-shared]`,\n );\n const remoteShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ??\n ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n string,\n string\n >);\n remoteSharedEl?.remove();\n\n if (!component \|\| !(rsc \|\| nextData \|\| isRemoteComponent)) {\n throw new RemoteComponentsError(\n `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>?`,\n );\n }\n\n if (prevIsRemoteComponentRef.current) {\n if (shadowRoot) {\n shadowRoot.innerHTML = '';\n }\n const self = globalThis as typeof globalThis &\n RemoteComponentMountUnmount;\n const prevUrl = prevUrlRef.current;\n if (\n prevUrl &&\n self.__remote_script_entrypoint_unmount__?.[prevUrl.href]\n ) {\n const unmountPromises = Promise.all(\n Array.from(unmountRef.current ?? []).map(async (unmount) =>\n unmount(\n shadowRoot ?? prevRemoteComponentContainerRef.current,\n ),\n ),\n );\n unmountRef.current = null;\n await unmountPromises;\n }\n }\n prevIsRemoteComponentRef.current = isRemoteComponent;\n prevUrlRef.current = url;\n\n // update all relative URLs to absolute URLs based on the remote component URL\n applyOriginToNodes(doc, url);\n\n // reference to all link elements in the remote component\n const links = Array.from(\n doc.querySelectorAll<HTMLLinkElement>('link[href]'),\n )\n .filter((link) => {\n return !component.contains(link);\n })\n .map((link) => ({\n href: new URL(link.getAttribute('href') ?? link.href, url).href,\n ...link\n .getAttributeNames()\n .reduce<Record<string, string>>((acc, key) => {\n if (key !== 'href') {\n acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? '';\n }\n return acc;\n }, {}),\n }));\n\n const scripts = (\n isRemoteComponent ? component : doc\n ).querySelectorAll<HTMLScriptElement>('script[src],script[data-src]');\n\n // handle inline scripts in the remote component\n const inlineScripts = (\n isRemoteComponent ? component : doc\n ).querySelectorAll(\n \"script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])\",\n );\n\n if (!isRemoteComponent) {\n // Next.js Script support\n const self = globalThis as typeof globalThis & {\n __next_s: [string, Record<string, string>][];\n };\n const prevNextScripts = self.__next_s;\n const nextScripts = [] as [string, Record<string, string>][];\n // eslint-disable-next-line camelcase\n self.__next_s = nextScripts;\n\n await Promise.all(\n Array.from(inlineScripts)\n .filter(\n (script) =>\n !(\n script.id.endsWith('_shared') &&\n script.getAttribute('type') === 'application/json' &&\n typeof script.getAttribute(\n 'data-remote-components-shared',\n ) === 'string'\n ),\n )\n .map((script) => {\n return new Promise((resolve) => {\n // only handle inline scripts with content, but not Next.js RSC scripts\n if (\n script.textContent &&\n !script.textContent.includes('self.__next_f=') &&\n !script.textContent.includes('self.__next_f.push')\n ) {\n // if script is inline javascript, then execute using blob\n if (\n !script.getAttribute('type') \|\|\n script.getAttribute('type') === 'text/javascript' \|\|\n script.getAttribute('type') === 'application/javascript'\n ) {\n const newScript = document.createElement('script');\n\n // scripts loaded from external sources needs this workaround\n const blob = new Blob([script.textContent], {\n type: 'application/javascript',\n });\n const blobUrl = URL.createObjectURL(blob);\n\n newScript.onload = () => {\n resolve(undefined);\n // script executed and safe to remove\n URL.revokeObjectURL(blobUrl);\n newScript.remove();\n };\n // on error we still want to resolve to not block the remote component loading\n newScript.onerror = () => {\n URL.revokeObjectURL(blobUrl);\n newScript.remove();\n resolve(undefined);\n };\n\n newScript.src = blobUrl;\n document.body.appendChild(newScript);\n } else {\n resolve(undefined);\n document.body.appendChild(script);\n }\n } else {\n resolve(undefined);\n }\n });\n }),\n );\n // process the remote component Next.js Script container\n nextScripts.forEach(([scriptSrc, props]) => {\n const script = document.createElement('script');\n // when we have a script src, apply it (inline scripts have `0` as src)\n if (scriptSrc) {\n script.src = scriptSrc;\n }\n // apply Script props\n if (typeof props.children === 'string') {\n script.textContent = props.children;\n }\n setAttributesFromProps(script, props);\n document.head.appendChild(script);\n });\n // restore previous Next.js Script container\n // eslint-disable-next-line camelcase\n self.__next_s = prevNextScripts;\n }\n\n let rscName;\n if (rsc) {\n rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;\n rsc.textContent =\n rsc.textContent?.replace(\n new RegExp(`self\\\\[\"${remoteName}\"\\\\]`, 'g'),\n `self[\"${rscName}\"]`,\n ) ?? '';\n document.body.appendChild(rsc);\n }\n\n const newData = {\n ...metadata,\n links,\n remoteShared,\n url: url.href,\n data: rsc\n ? (rsc.textContent \|\| '').split('\\n').filter(Boolean)\n : [],\n };\n\n componentHydrationHtml.current = `${Array.from(\n doc.querySelectorAll('link,style'),\n )\n .map((link) => link.outerHTML)\n .join(\n '',\n )}${reset ? `<style data-remote-components-reset=\"\">:host { all: initial; }</style>` : ''}${component.innerHTML}`;\n\n const userShared = await shared;\n\n if ('__remote_components_missing_shared__' in userShared) {\n userShared.__remote_components_missing_shared__().catch((e) => {\n throw e;\n });\n } else if ('__remote_components_missing_shared__' in remoteShared) {\n throw new RemoteComponentsError(\n remoteShared.__remote_components_missing_shared__,\n );\n }\n\n if (isRemoteComponent) {\n setData(newData);\n if (shadowRoot) {\n let shadowRootHtml = component.innerHTML;\n if (reset) {\n shadowRootHtml = `<style data-remote-components-reset=\"\">:host { all: initial; }</style>${shadowRootHtml}`;\n }\n shadowRoot.innerHTML = shadowRootHtml;\n setRemoteComponent(null);\n const { mount, unmount } = await loadStaticRemoteComponent(\n Array.from(shadowRoot.querySelectorAll('script')),\n url,\n );\n unmountRef.current = unmount;\n await Promise.all(\n Array.from(mount).map((mountFn) => mountFn(shadowRoot)),\n );\n } else if (isolate === false) {\n setRemoteComponent(\n // TODO: remove wrapper div by converting HTML to RSC or React tree\n <div\n dangerouslySetInnerHTML={{ __html: component.innerHTML }}\n ref={prevRemoteComponentContainerRef}\n />,\n );\n const { mount, unmount } = await loadStaticRemoteComponent(\n Array.from(component.querySelectorAll('script')),\n url,\n );\n unmountRef.current = unmount;\n await Promise.all(\n Array.from(mount).map((mountFn) =>\n mountFn(prevRemoteComponentContainerRef.current),\n ),\n );\n }\n } else {\n const result = await loadRemoteComponent({\n url: new URL(url, location.origin),\n name: remoteName,\n rscName,\n bundle,\n route: metadata.route,\n runtime: metadata.runtime,\n data: newData.data,\n nextData,\n scripts: Array.from(scripts).map((script) => {\n const scriptSrc =\n script.getAttribute('data-src') \|\|\n script.getAttribute('src') \|\|\n script.src;\n const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(\n scriptSrc,\n )?.groups ?? {\n prefix: undefined,\n id: scriptSrc,\n };\n return {\n src: new URL(\n `${prefix ?? ''}${path}`.replace(\n /(?<char>[^:])(?<double>\\/\\/)/g,\n '$1/',\n ),\n url,\n ).href,\n };\n }),\n shared: {\n ...sharedPolyfills(userShared),\n ...userShared,\n },\n remoteShared,\n container: shadowRoot,\n });\n if (rsc) {\n rsc.remove();\n }\n\n setData(newData);\n if (result.error) {\n setRemoteComponent(result.error);\n } else {\n setRemoteComponent(result.component);\n }\n }\n } catch (error) {\n setRemoteComponent(error as Error);\n }\n });\n }\n }, [\n url,\n src,\n isolate,\n credentials,\n name,\n shared,\n shadowRoot,\n additionalHeaders,\n reset,\n ]);\n\n if (remoteComponent instanceof Error) {\n throw remoteComponent;\n }\n\n const metadataJson = (\n <script data-remote-component type=\"application/json\">\n {JSON.stringify({\n name: data?.name \|\| name,\n bundle: data?.bundle \|\| 'default',\n route: data?.route \|\| DEFAULT_ROUTE,\n runtime: prevIsRemoteComponentRef.current\n ? RUNTIME_SCRIPT\n : data?.runtime \|\| RUNTIME_WEBPACK,\n })}\n </script>\n );\n const resetStyle = reset ? (\n <style data-remote-components-reset=\"\">{`:host { all: initial; }`}</style>\n ) : null;\n const linksToRender: React.ReactNode[] \| null =\n data?.links?.map((link) => (\n <link\n {...link}\n href={new URL(link.href as string, url).href}\n key={JSON.stringify(link)}\n />\n )) \|\| null;\n const componentToRender = (\n <>\n {resetStyle}\n {linksToRender}\n {remoteComponent ?? children}\n </>\n );\n\n if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {\n shadowRoot.innerHTML = componentHydrationHtml.current;\n componentHydrationHtml.current = null;\n\n if (prevIsRemoteComponentRef.current) {\n // ensure we load static resources when hydrating a remote component in shadow DOM\n loadStaticRemoteComponent(\n Array.from(shadowRoot.querySelectorAll('script')),\n url,\n )\n .then(({ mount }) => {\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(shadowRoot)),\n );\n })\n .catch((e) => {\n const error = new RemoteComponentsError(\n `Error mounting remote component from \"${url.href}\"`,\n {\n cause: e,\n },\n );\n setRemoteComponent(error);\n });\n }\n }\n\n if (isolate !== false) {\n const shadowRemoteComponentHtml =\n shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ??\n shadowRoot?.querySelector('div[data-bundle][data-route]');\n if (shadowRemoteComponentHtml) {\n shadowRemoteComponentHtml.remove();\n }\n\n return (\n <>\n {metadataJson}\n <div\n data-remote-component-id={`shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)}`}\n id={`shadowroot_${data?.name ?? name}`}\n ref={shadowRootContainerRef}\n >\n {typeof document === 'undefined' ? (\n // eslint-disable-next-line react/no-unknown-property\n <template shadowrootmode={mode}>\n {typeof document === 'undefined' ? (\n <div\n dangerouslySetInnerHTML={{\n __html: `<img\n alt=\"\" decoding=\"async\" style=\"display:none\"\n src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n onload=\"(function(el){\n const root = el.getRootNode();\n globalThis.__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href) : ''}_${escapeString(data?.name ?? name)} = root;\n el.parentElement.remove();\n })(this)\"\n />`,\n }}\n />\n ) : null}\n {resetStyle}\n {linksToRender}\n {children}\n </template>\n ) : null}\n {shadowRoot && remoteComponent\n ? createPortal(\n <>\n <template id={`${name}_start`} />\n {resetStyle}\n {linksToRender}\n {remoteComponent}\n <template id={`${name}_end`} ref={endTemplateRef} />\n </>,\n shadowRoot,\n )\n : null}\n </div>\n </>\n );\n }\n htmlRef.current = null;\n\n // render start/end markers for the remote component\n return (\n <>\n <template id={`${name}_start`} />\n {metadataJson}\n {componentToRender}\n <template id={`${name}_end`} ref={endTemplateRef} />\n </>\n );\n}\n"],"mappings":"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","names":["import_react","url","parser","doc"]}
1	+ {"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n startTransition,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { applyOriginToNodes } from '#internal/shared/client/apply-origin';\nimport { sharedPolyfills } from '#internal/shared/client/polyfill';\nimport {\n DEFAULT_ROUTE,\n type LoadRemoteComponentProps,\n loadRemoteComponent,\n loadStaticRemoteComponent,\n REMOTE_COMPONENT_REGEX,\n RemoteComponentsError,\n RUNTIME_SCRIPT,\n RUNTIME_WEBPACK,\n setAttributesFromProps,\n} from '#internal/shared/client/remote-component';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n} from '#internal/shared/error';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport { getClientOrServerUrl } from '#internal/shared/ssr/get-client-or-server-url';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n RemoteComponentProps as RemoteComponentPropsType,\n} from '#remote-components/shared/client/types';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace JSX {\n interface IntrinsicElements {\n template: {\n shadowrootmode?: 'open' \| 'closed';\n id?: string;\n ref?: React.Ref<HTMLTemplateElement>;\n dangerouslySetInnerHTML?: {\n __html: string;\n };\n children?: React.ReactNode;\n };\n }\n }\n}\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. /\n src?: string \| URL;\n /* Whether to isolate the remote component using a Shadow DOM wrapper. /\n isolate?: boolean;\n /* The shadow DOM mode to use when isolating the remote component. /\n mode?: 'open' \| 'closed';\n /* Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. /\n reset?: boolean;\n /* The credentials to use for the fetch request. Defaults to `same-origin`. /\n credentials?: RequestCredentials;\n name?: string;\n /* Shared modules to include in the remote component's context. /\n shared?: LoadRemoteComponentProps['shared'];\n /* Additional headers to use when fetching the remote component. /\n additionalHeaders?: Headers \| Record<string, string>;\n /* The children to use as a loading fallback until the remote component is loaded. /\n children?: React.ReactNode;\n}\n\nfunction getRemoteComponentHtml(html: string) {\n if (typeof document === 'undefined') return html;\n\n // parse the HTML string to extract the relevant parts\n const parser = new DOMParser();\n const temp = parser.parseFromString(html, 'text/html');\n\n // used by the Next.js Pages Router remote as a wrapper\n const ssrRemoteComponentContainer = temp.querySelector(\n 'div[id^=\"__REMOTE_COMPONENT\"]',\n );\n if (ssrRemoteComponentContainer) {\n return ssrRemoteComponentContainer.innerHTML;\n }\n\n // remote component content\n const remoteComponentContainer = temp.querySelectorAll(\n `div[data-bundle][data-route][data-runtime][id^=\"__vercel_remote_component\"],div[data-bundle][data-route],div#__next,remote-component:not([src])`,\n );\n if (remoteComponentContainer.length > 0) {\n return `${Array.from(temp.querySelectorAll('link,script'))\n .map((link) => link.outerHTML)\n .join('')}${Array.from(remoteComponentContainer)\n .map((container) => container.outerHTML)\n .join('')}`;\n }\n\n return '';\n}\n\nconst DUMMY_FALLBACK = 'http://remote-components-dummy-fallback';\n\n/\n RemoteComponent is a React component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n \n @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n \n @example\n \n Use the `<RemoteComponent>` in your React application to consume a remote component from a remote application:\n \n ```tsx\n * import { RemoteComponent } from 'remote-components/react';\n \n export default function App() {\n * return (\n * <>\n * <h1>Welcome to My App</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n \n To share modules, you can provide a shared module map with references to the shared modules:\n \n ```tsx\n * <RemoteComponent\n * src=\"/nextjs-app-remote/components/header\"\n * shared={{\n * '@/components/provider': () => import('@/components/host-provider')\n * }}\n * />\n * ```\n /\nexport function RemoteComponent({\n src,\n isolate,\n mode = 'open',\n reset,\n credentials = 'same-origin',\n name: nameProp = '__vercel_remote_component',\n shared = {},\n additionalHeaders,\n children,\n}: RemoteComponentProps) {\n const name = useMemo(() => {\n if (typeof src === 'string') {\n const url = new URL(\n src,\n typeof document !== 'undefined' ? location.href : DUMMY_FALLBACK,\n );\n if (url.hash) {\n return url.hash.slice(1);\n }\n } else if (typeof src === 'object' && 'hash' in src && src.hash) {\n return src.hash.slice(1) \|\| nameProp;\n }\n return nameProp;\n }, [src, nameProp]);\n\n const [data, setData] = useState<Omit<\n RemoteComponentPropsType,\n 'children'\n > \| null>(null);\n\n const url = useMemo(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);\n\n // for relative src paths, use just the pathname as the unique id.\n // for static urls, use the full url as the unique id as the path may not be unique.\n // this id needs to be the same for server and client side rendering.\n // note that if this needs to be more unique, can pass through the bundle as an id prop and ammend it to this id.\n const id =\n url.origin ===\n (typeof location !== 'undefined' ? location.origin : DUMMY_FALLBACK)\n ? url.pathname\n : url.href;\n\n const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}`;\n\n const [remoteComponent, setRemoteComponent] = useState<\n React.ReactNode \| Error\n >(null);\n const shadowRootContainerRef = useRef<HTMLDivElement \| null>(null);\n const [shadowRoot, setShadowRoot] = useState<ShadowRoot \| null>(() => {\n const self = globalThis as Record<\n `__remote_components_shadowroot_${string}`,\n ShadowRoot \| null\n >;\n const shadowRootKey =\n `__remote_components_shadowroot_${keySuffix}` as const;\n const ssrShadowRoot =\n typeof document !== 'undefined'\n ? (document.querySelector(\n `[data-remote-component-id=\"shadowroot_${keySuffix}\"]`,\n )?.shadowRoot ??\n self[shadowRootKey] ??\n null)\n : null;\n self[shadowRootKey] = null;\n return ssrShadowRoot;\n });\n const htmlRef = useRef<string \| null>(\n typeof document !== 'undefined'\n ? (document.querySelector(\n `[data-remote-component-id=\"shadowroot_${keySuffix}\"]`,\n )?.shadowRoot?.innerHTML ??\n document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ??\n document.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`)\n ?.innerHTML ??\n document.querySelector('div[data-bundle][data-route]')?.innerHTML)\n : null,\n );\n const endTemplateRef = useRef<HTMLTemplateElement \| null>(null);\n // collect initial content that needs to be removed after remote component renders\n const childrenRef = useRef(\n typeof document !== 'undefined'\n ? (() => {\n let el = document.querySelector(`template[id=\"${name}_start\"]`);\n const elements = [];\n while (el && el.id !== `${name}_end`) {\n if (\n el.id !== `${name}_start` &&\n !el.getAttribute('data-remote-component')\n ) {\n elements.push(el);\n }\n el = el.nextElementSibling as HTMLTemplateElement \| null;\n }\n return elements;\n })()\n : [],\n );\n const prevSrcRef = useRef<string \| URL \| null>(null);\n const componentHydrationHtml = useRef<string \| null>(null);\n const prevIsRemoteComponentRef = useRef<boolean>(false);\n const prevUrlRef = useRef<URL \| null>(null);\n const prevRemoteComponentContainerRef = useRef<HTMLDivElement \| null>(null);\n const unmountRef = useRef<Set<MountOrUnmountFunction> \| null>(null);\n\n useLayoutEffect(() => {\n // clear initial content\n if (childrenRef.current.length > 0 && remoteComponent) {\n childrenRef.current.forEach((el) => {\n el.remove();\n });\n childrenRef.current = [];\n }\n\n if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n const self = globalThis as Record<\n `__remote_components_shadowroot_${string}`,\n ShadowRoot \| null\n >;\n const shadowRootKey =\n `__remote_components_shadowroot_${keySuffix}` as const;\n\n let shadowRootElement: ShadowRoot \| null = null;\n const element = document.querySelector(\n `[data-remote-component-id=\"shadowroot_${keySuffix}\"]`,\n );\n shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n\n if (!shadowRootElement && element) {\n // create a shadow root if it doesn't exist\n // this is a fallback for browsers that don't support declarative shadow DOM\n try {\n shadowRootElement = element.attachShadow({ mode });\n self[shadowRootKey] = shadowRootElement;\n } catch {\n // do nothing if attachShadow fails because of existing shadow root\n }\n }\n\n if (shadowRootElement) {\n // remove all nodes from the shadow root except links\n shadowRootElement.querySelectorAll(':not(link)').forEach((node) => {\n node.remove();\n });\n setShadowRoot(shadowRootElement);\n }\n }\n }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);\n\n useLayoutEffect(() => {\n if (shadowRoot && remoteComponent) {\n const resetStyles = shadowRoot.querySelectorAll(\n 'style[data-remote-components-reset]',\n );\n // ensure we only have one reset style in the shadow root\n if (resetStyles.length > 1) {\n resetStyles.forEach((style, index) => {\n if (index > 0) {\n style.remove();\n }\n });\n }\n\n // clear the html ref after hydration\n htmlRef.current = null;\n\n // clear all nodes except links and styles until the start marker\n // the marker gets only rendered on hydration\n let el: ChildNode \| null = shadowRoot.childNodes[0] ?? null;\n while (el && (!('id' in el) \|\| el.id !== `${name}_start`)) {\n const nextEl = el.nextSibling;\n if (el.nodeName !== 'LINK' && el.nodeName !== 'STYLE') {\n el.parentNode?.removeChild(el);\n }\n el = nextEl;\n }\n }\n }, [shadowRoot, remoteComponent, name]);\n\n useEffect(() => {\n if (src && src !== prevSrcRef.current) {\n prevSrcRef.current = src;\n\n startTransition(async () => {\n try {\n let html = getRemoteComponentHtml(\n htmlRef.current ??\n (endTemplateRef.current?.previousElementSibling?.tagName === 'div'\n ? endTemplateRef.current.previousElementSibling.innerHTML\n : ''),\n );\n\n if (!html && src) {\n // fetch the remote component\n const fetchInit = {\n method: 'GET',\n headers: remoteFetchHeaders(additionalHeaders),\n credentials,\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok) {\n let error: Error = failedToFetchRemoteComponentError(url.href, {\n cause: new Error(`${res.status} ${res.statusText}`),\n });\n try {\n const body = await res.text();\n const parser = new DOMParser();\n const doc = parser.parseFromString(body, 'text/html');\n const errorTemplate = doc.querySelector(\n 'template[data-next-error-message]',\n );\n const errorMessage = errorTemplate?.getAttribute(\n 'data-next-error-message',\n );\n const errorStack = errorTemplate?.getAttribute(\n 'data-next-error-stack',\n );\n\n if (errorMessage) {\n error = new RemoteComponentsError(errorMessage);\n if (errorStack) {\n error.stack = errorStack;\n }\n }\n } catch {\n // ignore\n }\n\n throw error;\n }\n\n // get the full HTML content as a string\n const remoteHtml = await res.text();\n htmlRef.current = remoteHtml;\n html = getRemoteComponentHtml(remoteHtml);\n }\n\n // create a virtual element which will be used to parse the HTML and extract the component and RSC flight data\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n if (\n (doc.querySelectorAll('div[data-bundle][data-route]').length > 1 &&\n !doc.querySelector(\n `div[data-bundle][data-route][id^=\"${name}\"]`,\n )) \|\|\n (doc.querySelectorAll('remote-component:not([src])').length > 1 &&\n !doc.querySelector(`remote-component[name=\"${name}\"]`))\n ) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // reference to the remote component content\n const component =\n doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`) ??\n // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component\n doc.querySelector('div[data-bundle][data-route]') ??\n // fallback to Next.js Pages Router\n doc.querySelector('div#__next') ??\n // fallback to the remote-component web component\n doc.querySelector(`remote-component[name=\"${name}\"]:not([src])`) ??\n doc.querySelector('remote-component:not([src])');\n const nextData = JSON.parse(\n (\n doc.querySelector('#__NEXT_DATA__') ??\n doc.querySelector('#__REMOTE_NEXT_DATA__')\n )?.textContent ?? 'null',\n ) as {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: 'turbopack' \| 'webpack' \| 'script';\n shared?: Record<string, string>;\n };\n };\n page: string;\n buildId: string;\n } \| null;\n\n const remoteName =\n component?.getAttribute('id')?.replace(/_ssr$/, '') \|\|\n (nextData ? '__next' : name);\n // reference to the RSC flight data\n const rsc = doc.querySelector(`#${remoteName}_rsc`);\n\n // reference to the bundle containing the client components\n const bundle =\n component?.getAttribute('data-bundle') \|\|\n nextData?.props.__REMOTE_COMPONENT__?.bundle \|\|\n 'default';\n\n const isRemoteComponent =\n component?.tagName.toLowerCase() === 'remote-component';\n\n const metadata = {\n name: remoteName,\n bundle,\n route:\n component?.getAttribute('data-route') ??\n nextData?.page ??\n (url.pathname \|\| DEFAULT_ROUTE),\n runtime: (component?.getAttribute('data-runtime') ??\n (nextData?.props.__REMOTE_COMPONENT__?.runtime \|\|\n RUNTIME_SCRIPT)) as RemoteComponentPropsType['runtime'],\n };\n\n const remoteSharedEl = doc.querySelector(\n `#${remoteName}_shared[data-remote-components-shared]`,\n );\n const remoteShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ??\n ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n string,\n string\n >);\n remoteSharedEl?.remove();\n\n if (!component \|\| !(rsc \|\| nextData \|\| isRemoteComponent)) {\n throw new RemoteComponentsError(\n `Remote Component not found on ${url.href}.${\n remoteName !== '__vercel_remote_component'\n ? `The name for the <RemoteComponent> is \"${remoteName}\". Check <RemoteComponent> usage.`\n : ''\n } Did you forget to wrap the content in <RemoteComponent>?`,\n );\n }\n\n if (prevIsRemoteComponentRef.current) {\n if (shadowRoot) {\n shadowRoot.innerHTML = '';\n }\n const self = globalThis as typeof globalThis &\n RemoteComponentMountUnmount;\n const prevUrl = prevUrlRef.current;\n if (\n prevUrl &&\n self.__remote_script_entrypoint_unmount__?.[prevUrl.href]\n ) {\n const unmountPromises = Promise.all(\n Array.from(unmountRef.current ?? []).map(async (unmount) =>\n unmount(\n shadowRoot ?? prevRemoteComponentContainerRef.current,\n ),\n ),\n );\n unmountRef.current = null;\n await unmountPromises;\n }\n }\n prevIsRemoteComponentRef.current = isRemoteComponent;\n prevUrlRef.current = url;\n\n // update all relative URLs to absolute URLs based on the remote component URL\n applyOriginToNodes(doc, url);\n\n // reference to all link elements in the remote component\n const links = Array.from(\n doc.querySelectorAll<HTMLLinkElement>('link[href]'),\n )\n .filter((link) => {\n return !component.contains(link);\n })\n .map((link) => ({\n href: new URL(link.getAttribute('href') ?? link.href, url).href,\n ...link\n .getAttributeNames()\n .reduce<Record<string, string>>((acc, key) => {\n if (key !== 'href') {\n acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? '';\n }\n return acc;\n }, {}),\n }));\n\n const scripts = (\n isRemoteComponent ? component : doc\n ).querySelectorAll<HTMLScriptElement>('script[src],script[data-src]');\n\n // handle inline scripts in the remote component\n const inlineScripts = (\n isRemoteComponent ? component : doc\n ).querySelectorAll(\n \"script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])\",\n );\n\n if (!isRemoteComponent) {\n // Next.js Script support\n const self = globalThis as typeof globalThis & {\n __next_s: [string, Record<string, string>][];\n };\n const prevNextScripts = self.__next_s;\n const nextScripts = [] as [string, Record<string, string>][];\n // eslint-disable-next-line camelcase\n self.__next_s = nextScripts;\n\n await Promise.all(\n Array.from(inlineScripts)\n .filter(\n (script) =>\n !(\n script.id.endsWith('_shared') &&\n script.getAttribute('type') === 'application/json' &&\n typeof script.getAttribute(\n 'data-remote-components-shared',\n ) === 'string'\n ),\n )\n .map((script) => {\n return new Promise((resolve) => {\n // only handle inline scripts with content, but not Next.js RSC scripts\n if (\n script.textContent &&\n !script.textContent.includes('self.__next_f=') &&\n !script.textContent.includes('self.__next_f.push')\n ) {\n // if script is inline javascript, then execute using blob\n if (\n !script.getAttribute('type') \|\|\n script.getAttribute('type') === 'text/javascript' \|\|\n script.getAttribute('type') === 'application/javascript'\n ) {\n const newScript = document.createElement('script');\n\n // scripts loaded from external sources needs this workaround\n const blob = new Blob([script.textContent], {\n type: 'application/javascript',\n });\n const blobUrl = URL.createObjectURL(blob);\n\n newScript.onload = () => {\n resolve(undefined);\n // script executed and safe to remove\n URL.revokeObjectURL(blobUrl);\n newScript.remove();\n };\n // on error we still want to resolve to not block the remote component loading\n newScript.onerror = () => {\n URL.revokeObjectURL(blobUrl);\n newScript.remove();\n resolve(undefined);\n };\n\n newScript.src = blobUrl;\n document.body.appendChild(newScript);\n } else {\n resolve(undefined);\n document.body.appendChild(script);\n }\n } else {\n resolve(undefined);\n }\n });\n }),\n );\n // process the remote component Next.js Script container\n nextScripts.forEach(([scriptSrc, props]) => {\n const script = document.createElement('script');\n // when we have a script src, apply it (inline scripts have `0` as src)\n if (scriptSrc) {\n script.src = scriptSrc;\n }\n // apply Script props\n if (typeof props.children === 'string') {\n script.textContent = props.children;\n }\n setAttributesFromProps(script, props);\n document.head.appendChild(script);\n });\n // restore previous Next.js Script container\n // eslint-disable-next-line camelcase\n self.__next_s = prevNextScripts;\n }\n\n let rscName;\n if (rsc) {\n rscName = `__remote_component_rsc_${escapeString(\n id,\n )}_${escapeString(remoteName)}`;\n rsc.textContent =\n rsc.textContent?.replace(\n new RegExp(`self\\\\[\"${remoteName}\"\\\\]`, 'g'),\n `self[\"${rscName}\"]`,\n ) ?? '';\n document.body.appendChild(rsc);\n }\n\n const newData = {\n ...metadata,\n links,\n remoteShared,\n src: typeof src === 'string' ? src : src.href,\n serverUrl: url.href,\n data: rsc\n ? (rsc.textContent \|\| '').split('\\n').filter(Boolean)\n : [],\n };\n\n componentHydrationHtml.current = `${Array.from(\n doc.querySelectorAll('link,style'),\n )\n .map((link) => link.outerHTML)\n .join('')}${\n reset\n ? `<style data-remote-components-reset=\"\">:host { all: initial; }</style>`\n : ''\n }${component.innerHTML}`;\n\n const userShared = await shared;\n\n if ('__remote_components_missing_shared__' in userShared) {\n userShared.__remote_components_missing_shared__().catch((e) => {\n throw e;\n });\n } else if ('__remote_components_missing_shared__' in remoteShared) {\n throw new RemoteComponentsError(\n remoteShared.__remote_components_missing_shared__,\n );\n }\n\n if (isRemoteComponent) {\n setData(newData);\n if (shadowRoot) {\n let shadowRootHtml = component.innerHTML;\n if (reset) {\n shadowRootHtml = `<style data-remote-components-reset=\"\">:host { all: initial; }</style>${shadowRootHtml}`;\n }\n shadowRoot.innerHTML = shadowRootHtml;\n setRemoteComponent(null);\n const { mount, unmount } = await loadStaticRemoteComponent(\n Array.from(shadowRoot.querySelectorAll('script')),\n url,\n );\n unmountRef.current = unmount;\n await Promise.all(\n Array.from(mount).map((mountFn) => mountFn(shadowRoot)),\n );\n } else if (isolate === false) {\n setRemoteComponent(\n // TODO: remove wrapper div by converting HTML to RSC or React tree\n <div\n dangerouslySetInnerHTML={{ __html: component.innerHTML }}\n ref={prevRemoteComponentContainerRef}\n />,\n );\n const { mount, unmount } = await loadStaticRemoteComponent(\n Array.from(component.querySelectorAll('script')),\n url,\n );\n unmountRef.current = unmount;\n await Promise.all(\n Array.from(mount).map((mountFn) =>\n mountFn(prevRemoteComponentContainerRef.current),\n ),\n );\n }\n } else {\n const result = await loadRemoteComponent({\n url,\n name: remoteName,\n rscName,\n bundle,\n route: metadata.route,\n runtime: metadata.runtime,\n data: newData.data,\n nextData,\n scripts: Array.from(scripts).map((script) => {\n const scriptSrc =\n script.getAttribute('data-src') \|\|\n script.getAttribute('src') \|\|\n script.src;\n const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(\n scriptSrc,\n )?.groups ?? {\n prefix: undefined,\n id: scriptSrc,\n };\n return {\n src: new URL(\n `${prefix ?? ''}${path}`.replace(\n /(?<char>[^:])(?<double>\\/\\/)/g,\n '$1/',\n ),\n url,\n ).href,\n };\n }),\n shared: {\n ...sharedPolyfills(userShared),\n ...userShared,\n },\n remoteShared,\n container: shadowRoot,\n });\n if (rsc) {\n rsc.remove();\n }\n\n setData(newData);\n if (result.error) {\n setRemoteComponent(result.error);\n } else {\n setRemoteComponent(result.component);\n }\n }\n } catch (error) {\n setRemoteComponent(error as Error);\n }\n });\n }\n }, [\n url,\n src,\n isolate,\n credentials,\n name,\n shared,\n shadowRoot,\n additionalHeaders,\n reset,\n id,\n ]);\n\n if (remoteComponent instanceof Error) {\n throw remoteComponent;\n }\n\n const metadataJson = (\n <script data-remote-component type=\"application/json\">\n {JSON.stringify({\n name: data?.name \|\| name,\n bundle: data?.bundle \|\| 'default',\n route: data?.route \|\| DEFAULT_ROUTE,\n runtime: prevIsRemoteComponentRef.current\n ? RUNTIME_SCRIPT\n : data?.runtime \|\| RUNTIME_WEBPACK,\n })}\n </script>\n );\n const resetStyle = reset ? (\n <style data-remote-components-reset=\"\">{`:host { all: initial; }`}</style>\n ) : null;\n const linksToRender: React.ReactNode[] \| null =\n data?.links?.map((link) => (\n <link\n {...link}\n href={new URL(link.href as string, url).href}\n key={JSON.stringify(link)}\n />\n )) \|\| null;\n const componentToRender = (\n <>\n {resetStyle}\n {linksToRender}\n {remoteComponent ?? children}\n </>\n );\n\n if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {\n shadowRoot.innerHTML = componentHydrationHtml.current;\n componentHydrationHtml.current = null;\n\n if (prevIsRemoteComponentRef.current) {\n // ensure we load static resources when hydrating a remote component in shadow DOM\n loadStaticRemoteComponent(\n Array.from(shadowRoot.querySelectorAll('script')),\n url,\n )\n .then(({ mount }) => {\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(shadowRoot)),\n );\n })\n .catch((e) => {\n const error = new RemoteComponentsError(\n `Error mounting remote component from \"${url.href}\"`,\n {\n cause: e,\n },\n );\n setRemoteComponent(error);\n });\n }\n }\n\n if (isolate !== false) {\n const shadowRemoteComponentHtml =\n shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ??\n shadowRoot?.querySelector('div[data-bundle][data-route]');\n if (shadowRemoteComponentHtml) {\n shadowRemoteComponentHtml.remove();\n }\n\n return (\n <>\n {metadataJson}\n <div\n data-remote-component-id={`shadowroot_${keySuffix}`}\n id={`shadowroot_${data?.name ?? name}`}\n ref={shadowRootContainerRef}\n >\n {typeof document === 'undefined' ? (\n // eslint-disable-next-line react/no-unknown-property\n <template shadowrootmode={mode}>\n {typeof document === 'undefined' ? (\n <div\n dangerouslySetInnerHTML={{\n __html: `<img\n alt=\"\" decoding=\"async\" style=\"display:none\"\n src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n onload=\"(function(el){\n const root = el.getRootNode();\n globalThis.__remote_components_shadowroot_${keySuffix} = root;\n el.parentElement.remove();\n })(this)\"\n />`,\n }}\n />\n ) : null}\n {resetStyle}\n {linksToRender}\n {children}\n </template>\n ) : null}\n {shadowRoot && remoteComponent\n ? createPortal(\n <>\n <template id={`${name}_start`} />\n {resetStyle}\n {linksToRender}\n {remoteComponent}\n <template id={`${name}_end`} ref={endTemplateRef} />\n </>,\n shadowRoot,\n )\n : null}\n </div>\n </>\n );\n }\n htmlRef.current = null;\n\n // render start/end markers for the remote component\n return (\n <>\n <template id={`${name}_start`} />\n {metadataJson}\n {componentToRender}\n <template id={`${name}_end`} ref={endTemplateRef} />\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2qBgB;AAAA;AAAA;AAAA;AAwGV;AAnxBN,IAAAA,gBAOO;AACP,uBAA6B;AAC7B,0BAAmC;AACnC,sBAAgC;AAChC,8BAUO;AACP,mBAGO;AACP,2BAAmC;AACnC,sCAAqC;AACrC,mBAAyC;AA6CzC,SAAS,uBAAuB,MAAc;AAC5C,MAAI,OAAO,aAAa;AAAa,WAAO;AAG5C,QAAM,SAAS,IAAI,UAAU;AAC7B,QAAM,OAAO,OAAO,gBAAgB,MAAM,WAAW;AAGrD,QAAM,8BAA8B,KAAK;AAAA,IACvC;AAAA,EACF;AACA,MAAI,6BAA6B;AAC/B,WAAO,4BAA4B;AAAA,EACrC;AAGA,QAAM,2BAA2B,KAAK;AAAA,IACpC;AAAA,EACF;AACA,MAAI,yBAAyB,SAAS,GAAG;AACvC,WAAO,GAAG,MAAM,KAAK,KAAK,iBAAiB,aAAa,CAAC,EACtD,IAAI,CAAC,SAAS,KAAK,SAAS,EAC5B,KAAK,EAAE,IAAI,MAAM,KAAK,wBAAwB,EAC9C,IAAI,CAAC,cAAc,UAAU,SAAS,EACtC,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AACT;AAEA,MAAM,iBAAiB;AAsChB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,MAAM,WAAW;AAAA,EACjB,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,WAAO,uBAAQ,MAAM;AACzB,QAAI,OAAO,QAAQ,UAAU;AAC3B,YAAMC,OAAM,IAAI;AAAA,QACd;AAAA,QACA,OAAO,aAAa,cAAc,SAAS,OAAO;AAAA,MACpD;AACA,UAAIA,KAAI,MAAM;AACZ,eAAOA,KAAI,KAAK,MAAM,CAAC;AAAA,MACzB;AAAA,IACF,WAAW,OAAO,QAAQ,YAAY,UAAU,OAAO,IAAI,MAAM;AAC/D,aAAO,IAAI,KAAK,MAAM,CAAC,KAAK;AAAA,IAC9B;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,QAAQ,CAAC;AAElB,QAAM,CAAC,MAAM,OAAO,QAAI,wBAGd,IAAI;AAEd,QAAM,UAAM,uBAAQ,UAAM,sDAAqB,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC;AAM1E,QAAM,KACJ,IAAI,YACH,OAAO,aAAa,cAAc,SAAS,SAAS,kBACjD,IAAI,WACJ,IAAI;AAEV,QAAM,YAAY,OAAG,2BAAa,EAAE,SAAK,2BAAa,MAAM,QAAQ,IAAI;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,wBAE5C,IAAI;AACN,QAAM,6BAAyB,sBAA8B,IAAI;AACjE,QAAM,CAAC,YAAY,aAAa,QAAI,wBAA4B,MAAM;AACpE,UAAM,OAAO;AAIb,UAAM,gBACJ,kCAAkC;AACpC,UAAM,gBACJ,OAAO,aAAa,cACf,SAAS;AAAA,MACR,yCAAyC;AAAA,IAC3C,GAAG,cACH,KAAK,aAAa,KAClB,OACA;AACN,SAAK,aAAa,IAAI;AACtB,WAAO;AAAA,EACT,CAAC;AACD,QAAM,cAAU;AAAA,IACd,OAAO,aAAa,cACf,SAAS;AAAA,MACR,yCAAyC;AAAA,IAC3C,GAAG,YAAY,aACb,SAAS,eAAe,qBAAqB,MAAM,GAAG,aACtD,SAAS,cAAc,qCAAqC,QAAQ,GAChE,aACJ,SAAS,cAAc,8BAA8B,GAAG,YAC1D;AAAA,EACN;AACA,QAAM,qBAAiB,sBAAmC,IAAI;AAE9D,QAAM,kBAAc;AAAA,IAClB,OAAO,aAAa,eACf,MAAM;AACL,UAAI,KAAK,SAAS,cAAc,gBAAgB,cAAc;AAC9D,YAAM,WAAW,CAAC;AAClB,aAAO,MAAM,GAAG,OAAO,GAAG,YAAY;AACpC,YACE,GAAG,OAAO,GAAG,gBACb,CAAC,GAAG,aAAa,uBAAuB,GACxC;AACA,mBAAS,KAAK,EAAE;AAAA,QAClB;AACA,aAAK,GAAG;AAAA,MACV;AACA,aAAO;AAAA,IACT,GAAG,IACH,CAAC;AAAA,EACP;AACA,QAAM,iBAAa,sBAA4B,IAAI;AACnD,QAAM,6BAAyB,sBAAsB,IAAI;AACzD,QAAM,+BAA2B,sBAAgB,KAAK;AACtD,QAAM,iBAAa,sBAAmB,IAAI;AAC1C,QAAM,sCAAkC,sBAA8B,IAAI;AAC1E,QAAM,iBAAa,sBAA2C,IAAI;AAElE,qCAAgB,MAAM;AAEpB,QAAI,YAAY,QAAQ,SAAS,KAAK,iBAAiB;AACrD,kBAAY,QAAQ,QAAQ,CAAC,OAAO;AAClC,WAAG,OAAO;AAAA,MACZ,CAAC;AACD,kBAAY,UAAU,CAAC;AAAA,IACzB;AAEA,QAAI,YAAY,SAAS,OAAO,aAAa,eAAe,CAAC,YAAY;AACvE,YAAM,OAAO;AAIb,YAAM,gBACJ,kCAAkC;AAEpC,UAAI,oBAAuC;AAC3C,YAAM,UAAU,SAAS;AAAA,QACvB,yCAAyC;AAAA,MAC3C;AACA,0BAAoB,KAAK,aAAa,KAAK,SAAS,cAAc;AAElE,UAAI,CAAC,qBAAqB,SAAS;AAGjC,YAAI;AACF,8BAAoB,QAAQ,aAAa,EAAE,KAAK,CAAC;AACjD,eAAK,aAAa,IAAI;AAAA,QACxB,QAAE;AAAA,QAEF;AAAA,MACF;AAEA,UAAI,mBAAmB;AAErB,0BAAkB,iBAAiB,aAAa,EAAE,QAAQ,CAAC,SAAS;AAClE,eAAK,OAAO;AAAA,QACd,CAAC;AACD,sBAAc,iBAAiB;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,YAAY,iBAAiB,MAAM,SAAS,CAAC;AAE1D,qCAAgB,MAAM;AACpB,QAAI,cAAc,iBAAiB;AACjC,YAAM,cAAc,WAAW;AAAA,QAC7B;AAAA,MACF;AAEA,UAAI,YAAY,SAAS,GAAG;AAC1B,oBAAY,QAAQ,CAAC,OAAO,UAAU;AACpC,cAAI,QAAQ,GAAG;AACb,kBAAM,OAAO;AAAA,UACf;AAAA,QACF,CAAC;AAAA,MACH;AAGA,cAAQ,UAAU;AAIlB,UAAI,KAAuB,WAAW,WAAW,CAAC,KAAK;AACvD,aAAO,OAAO,EAAE,QAAQ,OAAO,GAAG,OAAO,GAAG,eAAe;AACzD,cAAM,SAAS,GAAG;AAClB,YAAI,GAAG,aAAa,UAAU,GAAG,aAAa,SAAS;AACrD,aAAG,YAAY,YAAY,EAAE;AAAA,QAC/B;AACA,aAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,IAAI,CAAC;AAEtC,+BAAU,MAAM;AACd,QAAI,OAAO,QAAQ,WAAW,SAAS;AACrC,iBAAW,UAAU;AAErB,yCAAgB,YAAY;AAC1B,YAAI;AACF,cAAI,OAAO;AAAA,YACT,QAAQ,YACL,eAAe,SAAS,wBAAwB,YAAY,QACzD,eAAe,QAAQ,uBAAuB,YAC9C;AAAA,UACR;AAEA,cAAI,CAAC,QAAQ,KAAK;AAEhB,kBAAM,YAAY;AAAA,cAChB,QAAQ;AAAA,cACR,aAAS,yCAAmB,iBAAiB;AAAA,cAC7C;AAAA,YACF;AAEA,kBAAM,MAAM,MAAM,MAAM,KAAK,SAAS;AAEtC,gBAAI,CAAC,IAAI,IAAI;AACX,kBAAI,YAAe,gDAAkC,IAAI,MAAM;AAAA,gBAC7D,OAAO,IAAI,MAAM,GAAG,IAAI,UAAU,IAAI,YAAY;AAAA,cACpD,CAAC;AACD,kBAAI;AACF,sBAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,sBAAMC,UAAS,IAAI,UAAU;AAC7B,sBAAMC,OAAMD,QAAO,gBAAgB,MAAM,WAAW;AACpD,sBAAM,gBAAgBC,KAAI;AAAA,kBACxB;AAAA,gBACF;AACA,sBAAM,eAAe,eAAe;AAAA,kBAClC;AAAA,gBACF;AACA,sBAAM,aAAa,eAAe;AAAA,kBAChC;AAAA,gBACF;AAEA,oBAAI,cAAc;AAChB,0BAAQ,IAAI,8CAAsB,YAAY;AAC9C,sBAAI,YAAY;AACd,0BAAM,QAAQ;AAAA,kBAChB;AAAA,gBACF;AAAA,cACF,QAAE;AAAA,cAEF;AAEA,oBAAM;AAAA,YACR;AAGA,kBAAM,aAAa,MAAM,IAAI,KAAK;AAClC,oBAAQ,UAAU;AAClB,mBAAO,uBAAuB,UAAU;AAAA,UAC1C;AAGA,gBAAM,SAAS,IAAI,UAAU;AAC7B,gBAAM,MAAM,OAAO,gBAAgB,MAAM,WAAW;AAEpD,cACG,IAAI,iBAAiB,8BAA8B,EAAE,SAAS,KAC7D,CAAC,IAAI;AAAA,YACH,qCAAqC;AAAA,UACvC,KACD,IAAI,iBAAiB,6BAA6B,EAAE,SAAS,KAC5D,CAAC,IAAI,cAAc,0BAA0B,QAAQ,GACvD;AACA,sBAAM,4CAA8B,IAAI,IAAI;AAAA,UAC9C;AAGA,gBAAM,YACJ,IAAI,cAAc,qCAAqC,QAAQ;AAAA,UAE/D,IAAI,cAAc,8BAA8B;AAAA,UAEhD,IAAI,cAAc,YAAY;AAAA,UAE9B,IAAI,cAAc,0BAA0B,mBAAmB,KAC/D,IAAI,cAAc,6BAA6B;AACjD,gBAAM,WAAW,KAAK;AAAA,aAElB,IAAI,cAAc,gBAAgB,KAClC,IAAI,cAAc,uBAAuB,IACxC,eAAe;AAAA,UACpB;AAaA,gBAAM,aACJ,WAAW,aAAa,IAAI,GAAG,QAAQ,SAAS,EAAE,MACjD,WAAW,WAAW;AAEzB,gBAAM,MAAM,IAAI,cAAc,IAAI,gBAAgB;AAGlD,gBAAM,SACJ,WAAW,aAAa,aAAa,KACrC,UAAU,MAAM,sBAAsB,UACtC;AAEF,gBAAM,oBACJ,WAAW,QAAQ,YAAY,MAAM;AAEvC,gBAAM,WAAW;AAAA,YACf,MAAM;AAAA,YACN;AAAA,YACA,OACE,WAAW,aAAa,YAAY,KACpC,UAAU,SACT,IAAI,YAAY;AAAA,YACnB,SAAU,WAAW,aAAa,cAAc,MAC7C,UAAU,MAAM,sBAAsB,WACrC;AAAA,UACN;AAEA,gBAAM,iBAAiB,IAAI;AAAA,YACzB,IAAI;AAAA,UACN;AACA,gBAAM,eACJ,UAAU,MAAM,sBAAsB,WACpC,KAAK,MAAM,gBAAgB,eAAe,IAAI,KAAK,CAAC;AAIxD,0BAAgB,OAAO;AAEvB,cAAI,CAAC,aAAa,EAAE,OAAO,YAAY,oBAAoB;AACzD,kBAAM,IAAI;AAAA,cACR,iCAAiC,IAAI,QACnC,eAAe,8BACX,0CAA0C,gDAC1C;AAAA,YAER;AAAA,UACF;AAEA,cAAI,yBAAyB,SAAS;AACpC,gBAAI,YAAY;AACd,yBAAW,YAAY;AAAA,YACzB;AACA,kBAAM,OAAO;AAEb,kBAAM,UAAU,WAAW;AAC3B,gBACE,WACA,KAAK,uCAAuC,QAAQ,IAAI,GACxD;AACA,oBAAM,kBAAkB,QAAQ;AAAA,gBAC9B,MAAM,KAAK,WAAW,WAAW,CAAC,CAAC,EAAE;AAAA,kBAAI,OAAO,YAC9C;AAAA,oBACE,cAAc,gCAAgC;AAAA,kBAChD;AAAA,gBACF;AAAA,cACF;AACA,yBAAW,UAAU;AACrB,oBAAM;AAAA,YACR;AAAA,UACF;AACA,mCAAyB,UAAU;AACnC,qBAAW,UAAU;AAGrB,sDAAmB,KAAK,GAAG;AAG3B,gBAAM,QAAQ,MAAM;AAAA,YAClB,IAAI,iBAAkC,YAAY;AAAA,UACpD,EACG,OAAO,CAAC,SAAS;AAChB,mBAAO,CAAC,UAAU,SAAS,IAAI;AAAA,UACjC,CAAC,EACA,IAAI,CAAC,UAAU;AAAA,YACd,MAAM,IAAI,IAAI,KAAK,aAAa,MAAM,KAAK,KAAK,MAAM,GAAG,EAAE;AAAA,YAC3D,GAAG,KACA,kBAAkB,EAClB,OAA+B,CAAC,KAAK,QAAQ;AAC5C,kBAAI,QAAQ,QAAQ;AAClB,oBAAI,wBAAW,GAAG,KAAK,GAAG,IAAI,KAAK,aAAa,GAAG,KAAK;AAAA,cAC1D;AACA,qBAAO;AAAA,YACT,GAAG,CAAC,CAAC;AAAA,UACT,EAAE;AAEJ,gBAAM,WACJ,oBAAoB,YAAY,KAChC,iBAAoC,8BAA8B;AAGpE,gBAAM,iBACJ,oBAAoB,YAAY,KAChC;AAAA,YACA;AAAA,UACF;AAEA,cAAI,CAAC,mBAAmB;AAEtB,kBAAM,OAAO;AAGb,kBAAM,kBAAkB,KAAK;AAC7B,kBAAM,cAAc,CAAC;AAErB,iBAAK,WAAW;AAEhB,kBAAM,QAAQ;AAAA,cACZ,MAAM,KAAK,aAAa,EACrB;AAAA,gBACC,CAAC,WACC,EACE,OAAO,GAAG,SAAS,SAAS,KAC5B,OAAO,aAAa,MAAM,MAAM,sBAChC,OAAO,OAAO;AAAA,kBACZ;AAAA,gBACF,MAAM;AAAA,cAEZ,EACC,IAAI,CAAC,WAAW;AACf,uBAAO,IAAI,QAAQ,CAAC,YAAY;AAE9B,sBACE,OAAO,eACP,CAAC,OAAO,YAAY,SAAS,gBAAgB,KAC7C,CAAC,OAAO,YAAY,SAAS,oBAAoB,GACjD;AAEA,wBACE,CAAC,OAAO,aAAa,MAAM,KAC3B,OAAO,aAAa,MAAM,MAAM,qBAChC,OAAO,aAAa,MAAM,MAAM,0BAChC;AACA,4BAAM,YAAY,SAAS,cAAc,QAAQ;AAGjD,4BAAM,OAAO,IAAI,KAAK,CAAC,OAAO,WAAW,GAAG;AAAA,wBAC1C,MAAM;AAAA,sBACR,CAAC;AACD,4BAAM,UAAU,IAAI,gBAAgB,IAAI;AAExC,gCAAU,SAAS,MAAM;AACvB,gCAAQ,MAAS;AAEjB,4BAAI,gBAAgB,OAAO;AAC3B,kCAAU,OAAO;AAAA,sBACnB;AAEA,gCAAU,UAAU,MAAM;AACxB,4BAAI,gBAAgB,OAAO;AAC3B,kCAAU,OAAO;AACjB,gCAAQ,MAAS;AAAA,sBACnB;AAEA,gCAAU,MAAM;AAChB,+BAAS,KAAK,YAAY,SAAS;AAAA,oBACrC,OAAO;AACL,8BAAQ,MAAS;AACjB,+BAAS,KAAK,YAAY,MAAM;AAAA,oBAClC;AAAA,kBACF,OAAO;AACL,4BAAQ,MAAS;AAAA,kBACnB;AAAA,gBACF,CAAC;AAAA,cACH,CAAC;AAAA,YACL;AAEA,wBAAY,QAAQ,CAAC,CAAC,WAAW,KAAK,MAAM;AAC1C,oBAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,kBAAI,WAAW;AACb,uBAAO,MAAM;AAAA,cACf;AAEA,kBAAI,OAAO,MAAM,aAAa,UAAU;AACtC,uBAAO,cAAc,MAAM;AAAA,cAC7B;AACA,kEAAuB,QAAQ,KAAK;AACpC,uBAAS,KAAK,YAAY,MAAM;AAAA,YAClC,CAAC;AAGD,iBAAK,WAAW;AAAA,UAClB;AAEA,cAAI;AACJ,cAAI,KAAK;AACP,sBAAU,8BAA0B;AAAA,cAClC;AAAA,YACF,SAAK,2BAAa,UAAU;AAC5B,gBAAI,cACF,IAAI,aAAa;AAAA,cACf,IAAI,OAAO,WAAW,kBAAkB,GAAG;AAAA,cAC3C,SAAS;AAAA,YACX,KAAK;AACP,qBAAS,KAAK,YAAY,GAAG;AAAA,UAC/B;AAEA,gBAAM,UAAU;AAAA,YACd,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,YACzC,WAAW,IAAI;AAAA,YACf,MAAM,OACD,IAAI,eAAe,IAAI,MAAM,IAAI,EAAE,OAAO,OAAO,IAClD,CAAC;AAAA,UACP;AAEA,iCAAuB,UAAU,GAAG,MAAM;AAAA,YACxC,IAAI,iBAAiB,YAAY;AAAA,UACnC,EACG,IAAI,CAAC,SAAS,KAAK,SAAS,EAC5B,KAAK,EAAE,IACR,QACI,2EACA,KACH,UAAU;AAEb,gBAAM,aAAa,MAAM;AAEzB,cAAI,0CAA0C,YAAY;AACxD,uBAAW,qCAAqC,EAAE,MAAM,CAAC,MAAM;AAC7D,oBAAM;AAAA,YACR,CAAC;AAAA,UACH,WAAW,0CAA0C,cAAc;AACjE,kBAAM,IAAI;AAAA,cACR,aAAa;AAAA,YACf;AAAA,UACF;AAEA,cAAI,mBAAmB;AACrB,oBAAQ,OAAO;AACf,gBAAI,YAAY;AACd,kBAAI,iBAAiB,UAAU;AAC/B,kBAAI,OAAO;AACT,iCAAiB,yEAAyE;AAAA,cAC5F;AACA,yBAAW,YAAY;AACvB,iCAAmB,IAAI;AACvB,oBAAM,EAAE,OAAO,QAAQ,IAAI,UAAM;AAAA,gBAC/B,MAAM,KAAK,WAAW,iBAAiB,QAAQ,CAAC;AAAA,gBAChD;AAAA,cACF;AACA,yBAAW,UAAU;AACrB,oBAAM,QAAQ;AAAA,gBACZ,MAAM,KAAK,KAAK,EAAE,IAAI,CAAC,YAAY,QAAQ,UAAU,CAAC;AAAA,cACxD;AAAA,YACF,WAAW,YAAY,OAAO;AAC5B;AAAA,gBAEE;AAAA,kBAAC;AAAA;AAAA,oBACC,yBAAyB,EAAE,QAAQ,UAAU,UAAU;AAAA,oBACvD,KAAK;AAAA;AAAA,gBACP;AAAA,cACF;AACA,oBAAM,EAAE,OAAO,QAAQ,IAAI,UAAM;AAAA,gBAC/B,MAAM,KAAK,UAAU,iBAAiB,QAAQ,CAAC;AAAA,gBAC/C;AAAA,cACF;AACA,yBAAW,UAAU;AACrB,oBAAM,QAAQ;AAAA,gBACZ,MAAM,KAAK,KAAK,EAAE;AAAA,kBAAI,CAAC,YACrB,QAAQ,gCAAgC,OAAO;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,kBAAM,SAAS,UAAM,6CAAoB;AAAA,cACvC;AAAA,cACA,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA,OAAO,SAAS;AAAA,cAChB,SAAS,SAAS;AAAA,cAClB,MAAM,QAAQ;AAAA,cACd;AAAA,cACA,SAAS,MAAM,KAAK,OAAO,EAAE,IAAI,CAAC,WAAW;AAC3C,sBAAM,YACJ,OAAO,aAAa,UAAU,KAC9B,OAAO,aAAa,KAAK,KACzB,OAAO;AACT,sBAAM,EAAE,QAAQ,IAAI,KAAK,IAAI,+CAAuB;AAAA,kBAClD;AAAA,gBACF,GAAG,UAAU;AAAA,kBACX,QAAQ;AAAA,kBACR,IAAI;AAAA,gBACN;AACA,uBAAO;AAAA,kBACL,KAAK,IAAI;AAAA,oBACP,GAAG,UAAU,KAAK,OAAO;AAAA,sBACvB;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA;AAAA,kBACF,EAAE;AAAA,gBACJ;AAAA,cACF,CAAC;AAAA,cACD,QAAQ;AAAA,gBACN,OAAG,iCAAgB,UAAU;AAAA,gBAC7B,GAAG;AAAA,cACL;AAAA,cACA;AAAA,cACA,WAAW;AAAA,YACb,CAAC;AACD,gBAAI,KAAK;AACP,kBAAI,OAAO;AAAA,YACb;AAEA,oBAAQ,OAAO;AACf,gBAAI,OAAO,OAAO;AAChB,iCAAmB,OAAO,KAAK;AAAA,YACjC,OAAO;AACL,iCAAmB,OAAO,SAAS;AAAA,YACrC;AAAA,UACF;AAAA,QACF,SAAS,OAAP;AACA,6BAAmB,KAAc;AAAA,QACnC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,2BAA2B,OAAO;AACpC,UAAM;AAAA,EACR;AAEA,QAAM,eACJ,4CAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,IACd,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,UAAU;AAAA,IACxB,OAAO,MAAM,SAAS;AAAA,IACtB,SAAS,yBAAyB,UAC9B,yCACA,MAAM,WAAW;AAAA,EACvB,CAAC,GACH;AAEF,QAAM,aAAa,QACjB,4CAAC,WAAM,gCAA6B,IAAI,qCAA0B,IAChE;AACJ,QAAM,gBACJ,MAAM,OAAO,IAAI,CAAC,SAChB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,IAAI,IAAI,KAAK,MAAgB,GAAG,EAAE;AAAA,MACxC,KAAK,KAAK,UAAU,IAAI;AAAA;AAAA,EAC1B,CACD,KAAK;AACR,QAAM,oBACJ,4EACG;AAAA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,KACtB;AAGF,MAAI,uBAAuB,WAAW,cAAc,CAAC,WAAW,WAAW;AACzE,eAAW,YAAY,uBAAuB;AAC9C,2BAAuB,UAAU;AAEjC,QAAI,yBAAyB,SAAS;AAEpC;AAAA,QACE,MAAM,KAAK,WAAW,iBAAiB,QAAQ,CAAC;AAAA,QAChD;AAAA,MACF,EACG,KAAK,CAAC,EAAE,MAAM,MAAM;AACnB,eAAO,QAAQ;AAAA,UACb,MAAM,KAAK,KAAK,EAAE,IAAI,CAAC,YAAY,QAAQ,UAAU,CAAC;AAAA,QACxD;AAAA,MACF,CAAC,EACA,MAAM,CAAC,MAAM;AACZ,cAAM,QAAQ,IAAI;AAAA,UAChB,yCAAyC,IAAI;AAAA,UAC7C;AAAA,YACE,OAAO;AAAA,UACT;AAAA,QACF;AACA,2BAAmB,KAAK;AAAA,MAC1B,CAAC;AAAA,IACL;AAAA,EACF;AAEA,MAAI,YAAY,OAAO;AACrB,UAAM,4BACJ,YAAY,cAAc,sBAAsB,MAAM,KACtD,YAAY,cAAc,8BAA8B;AAC1D,QAAI,2BAA2B;AAC7B,gCAA0B,OAAO;AAAA,IACnC;AAEA,WACE,4EACG;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,4BAA0B,cAAc;AAAA,UACxC,IAAI,cAAc,MAAM,QAAQ;AAAA,UAChC,KAAK;AAAA,UAEJ;AAAA,mBAAO,aAAa;AAAA;AAAA,cAEnB,6CAAC,cAAS,gBAAgB,MACvB;AAAA,uBAAO,aAAa,cACnB;AAAA,kBAAC;AAAA;AAAA,oBACC,yBAAyB;AAAA,sBACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,oDAKwB;AAAA;AAAA;AAAA;AAAA,oBAIlC;AAAA;AAAA,gBACF,IACE;AAAA,gBACH;AAAA,gBACA;AAAA,gBACA;AAAA,iBACH;AAAA,gBACE;AAAA,YACH,cAAc,sBACX;AAAA,cACE,4EACE;AAAA,4DAAC,cAAS,IAAI,GAAG,cAAc;AAAA,gBAC9B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACD,4CAAC,cAAS,IAAI,GAAG,YAAY,KAAK,gBAAgB;AAAA,iBACpD;AAAA,cACA;AAAA,YACF,IACA;AAAA;AAAA;AAAA,MACN;AAAA,OACF;AAAA,EAEJ;AACA,UAAQ,UAAU;AAGlB,SACE,4EACE;AAAA,gDAAC,cAAS,IAAI,GAAG,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACD,4CAAC,cAAS,IAAI,GAAG,YAAY,KAAK,gBAAgB;AAAA,KACpD;AAEJ;","names":["import_react","url","parser","doc"]}

package/dist/react/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RemoteComponentProps$1 } from '../types-4e7dea94.js';
+import { R as RemoteComponentProps$1 } from '../types-235b68a5.js';
 import 'react';
 import '../types-cbf6c34f.js';

package/dist/react/index.js CHANGED Viewed

@@ -26,6 +26,7 @@ import {
   multipleRemoteComponentsError
 } from "#internal/shared/error";
 import { remoteFetchHeaders } from "#internal/shared/ssr/fetch-headers";
+import { getClientOrServerUrl } from "#internal/shared/ssr/get-client-or-server-url";
 import { attrToProp, escapeString } from "#internal/shared/utils";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -46,6 +47,7 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
+const DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function RemoteComponent({
   src,
   isolate,
@@ -61,7 +63,7 @@ function RemoteComponent({
     if (typeof src === "string") {
       const url2 = new URL(
         src,
-        typeof document !== "undefined" ? location.href : "http://localhost"
+        typeof document !== "undefined" ? location.href : DUMMY_FALLBACK
       );
       if (url2.hash) {
         return url2.hash.slice(1);
@@ -72,20 +74,23 @@ function RemoteComponent({
     return nameProp;
   }, [src, nameProp]);
   const [data, setData] = useState(null);
+  const url = useMemo(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
+  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}`;
   const [remoteComponent, setRemoteComponent] = useState(null);
   const shadowRootContainerRef = useRef(null);
   const [shadowRoot, setShadowRoot] = useState(() => {
     const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
     self[shadowRootKey] = null;
     return ssrShadowRoot;
   });
   const htmlRef = useRef(
     typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+      `[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 = useRef(null);
@@ -117,10 +122,10 @@ function RemoteComponent({
     }
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
       const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
       let shadowRootElement = null;
       const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
       );
       shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
@@ -137,7 +142,7 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
   useLayoutEffect(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
@@ -161,17 +166,6 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  const url = useMemo(() => {
-    if (typeof src !== "string")
-      return new URL(
-        typeof document !== "undefined" ? location.href : "http://localhost"
-      );
-    try {
-      return typeof document !== "undefined" ? new URL(src, location.href) : new URL(src);
-    } catch {
-      return new URL(src, "http://localhost");
-    }
-  }, [src]);
   useEffect(() => {
     if (src && src !== prevSrcRef.current) {
       prevSrcRef.current = src;
@@ -346,7 +340,9 @@ function RemoteComponent({
           }
           let rscName;
           if (rsc) {
-            rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
+            rscName = `__remote_component_rsc_${escapeString(
+              id
+            )}_${escapeString(remoteName)}`;
             rsc.textContent = rsc.textContent?.replace(
               new RegExp(`self\\["${remoteName}"\\]`, "g"),
               `self["${rscName}"]`
@@ -357,14 +353,13 @@ function RemoteComponent({
             ...metadata,
             links,
             remoteShared,
-            url: url.href,
+            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}`;
+          ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -416,7 +411,7 @@ function RemoteComponent({
             }
           } else {
             const result = await loadRemoteComponent({
-              url: new URL(url, location.origin),
+              url,
               name: remoteName,
               rscName,
               bundle,
@@ -473,7 +468,8 @@ function RemoteComponent({
     shared,
     shadowRoot,
     additionalHeaders,
-    reset
+    reset,
+    id
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -530,7 +526,7 @@ function RemoteComponent({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          "data-remote-component-id": `shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`,
+          "data-remote-component-id": `shadowroot_${keySuffix}`,
           id: `shadowroot_${data?.name ?? name}`,
           ref: shadowRootContainerRef,
           children: [
@@ -546,7 +542,7 @@ function RemoteComponent({
       src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
       onload="(function(el){
         const root = el.getRootNode();
-        globalThis.__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)} = root;
+        globalThis.__remote_components_shadowroot_${keySuffix} = root;
         el.parentElement.remove();
       })(this)"
     />`