remote-components 0.0.3 → 0.0.4

package/dist/next/host/app-client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\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        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = 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        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\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]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={link.href as string}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {links.map((link) => (\n        <link\n          as={link.as as string}\n          href={link.href as string}\n          key={`${link.href as string}_${link.rel}`}\n          rel={link.rel as string}\n        />\n      ))}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\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        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = 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        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\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, links, url]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/next/host/app-client.js

@@ -47,7 +47,7 @@ function RemoteComponentClient({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot]);
+  }, [name, isolate, shadowRoot, links, url]);
   useEffect(() => {
     let mounted = true;
     if (!component && (isolate === false || shadowRoot)) {
@@ -101,7 +101,7 @@ function RemoteComponentClient({
     "link",
     {
       as: link.as,
-      href: link.href,
+      href: new URL(link.href, url || location.origin).href,
       rel: link.rel
     },
     `${link.href}_${link.rel}`
@@ -134,15 +134,6 @@ function RemoteComponentClient({
     }) }),
     linksToRender,
     componentToRender,
-    links.map((link) => /* @__PURE__ */ jsx(
-      "link",
-      {
-        as: link.as,
-        href: link.href,
-        rel: link.rel
-      },
-      `${link.href}_${link.rel}`
-    )),
     data.length > 0 ? /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.join("\n") }) : null,
     nextData ? /* @__PURE__ */ jsx(
       "script",

package/dist/next/host/app-client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\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        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = 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        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\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]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={link.href as string}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {links.map((link) => (\n        <link\n          as={link.as as string}\n          href={link.href as string}\n          key={`${link.href as string}_${link.rel}`}\n          rel={link.rel as string}\n        />\n      ))}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\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        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = 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        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\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, links, url]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/next/host/app-server.cjs

@@ -38,7 +38,8 @@ async function RemoteComponent({
     hydrationData,
     nextData,
     component,
-    remoteShared
+    remoteShared,
+    url
   } = await (0, import_fetch_remote_component.fetchRemoteComponent)(src, headerList, true);
   const name = metadata.id.replace(/_ssr$/, "");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -54,7 +55,7 @@ async function RemoteComponent({
       route: metadata.route,
       runtime: metadata.runtime,
       scripts,
-      url: typeof src === "string" ? src : src.href,
+      url: url.href,
       children: component
     }
   );

package/dist/next/host/app-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js 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 src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</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 */\nexport async function RemoteComponent({\n  src,\n  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={typeof src === 'string' ? src : src.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDI;AAzDJ,qBAAwB;AACxB,oCAAqC;AACrC,wBAAsC;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,UAAM,wBAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js 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 src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</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 */\nexport async function RemoteComponent({\n  src,\n  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    url,\n  } = await fetchRemoteComponent(src, headerList, true);\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={url.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,qBAAwB;AACxB,oCAAqC;AACrC,wBAAsC;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,UAAM,wBAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/next/host/app-server.js

@@ -15,7 +15,8 @@ async function RemoteComponent({
     hydrationData,
     nextData,
     component,
-    remoteShared
+    remoteShared,
+    url
   } = await fetchRemoteComponent(src, headerList, true);
   const name = metadata.id.replace(/_ssr$/, "");
   return /* @__PURE__ */ jsx(
@@ -31,7 +32,7 @@ async function RemoteComponent({
       route: metadata.route,
       runtime: metadata.runtime,
       scripts,
-      url: typeof src === "string" ? src : src.href,
+      url: url.href,
       children: component
     }
   );

package/dist/next/host/app-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js 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 src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</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 */\nexport async function RemoteComponent({\n  src,\n  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={typeof src === 'string' ? src : src.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":"AAyDI;AAzDJ,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * RemoteComponent is a Next.js 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 src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</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 */\nexport async function RemoteComponent({\n  src,\n  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    url,\n  } = await fetchRemoteComponent(src, headerList, true);\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={url.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":"AA0DI;AA1DJ,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/next/remote/render-server.cjs

@@ -38,6 +38,13 @@ const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
 const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;
+async function tryImport(importer) {
+  try {
+    return await importer();
+  } catch {
+    return {};
+  }
+}
 function RemoteComponentData({ name, data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.map(
     (chunk, i) => (
@@ -84,15 +91,33 @@ async function RemoteComponent({
       ];
     })
   );
-  const [{ renderToReadableStream }, { RemoteComponentSSR }] = await Promise.all(
+  const [
+    { renderToReadableStream: nextRenderToReadableStream },
+    { renderToReadableStream: legacyRenderToReadableStream },
+    { RemoteComponentSSR }
+  ] = await Promise.all(
     process.env.TURBOPACK ? [
-      import("react-server-dom-turbopack/server.edge"),
+      tryImport(
+        () => import("react-server-dom-turbopack/server")
+      ),
+      tryImport(
+        () => import("react-server-dom-turbopack/server.edge")
+      ),
       import("./render-client-turbopack")
     ] : [
-      import("react-server-dom-webpack/server.edge"),
+      tryImport(
+        () => import("react-server-dom-webpack/server")
+      ),
+      tryImport(
+        () => import("react-server-dom-webpack/server.edge")
+      ),
       import("./render-client-webpack")
     ]
   );
+  const renderToReadableStream = nextRenderToReadableStream ?? legacyRenderToReadableStream;
+  if (typeof renderToReadableStream !== "function") {
+    throw new Error("No valid renderToReadableStream function found");
+  }
   const stream = renderToReadableStream(children, clientModules);
   const data = [];
   const decoder = new TextDecoder();

package/dist/next/remote/render-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * RemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}): Promise<React.ReactNode> {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [{ renderToReadableStream }, { RemoteComponentSSR }] =\n    await Promise.all(\n      process.env.TURBOPACK\n        ? [\n            import('react-server-dom-turbopack/server.edge'),\n            import('./render-client-turbopack'),\n          ]\n        : [\n            import('react-server-dom-webpack/server.edge'),\n            import('./render-client-webpack'),\n          ],\n    );\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAjBJ,qBAAwB;AACxB,gCAAiC;AAIjC,MAAM,oCAAoC,OAAO;AAAA,EAC/C;AACF;AAEA,MAAM,aAAa,QAAQ,IAAI;AAM/B,SAAS,oBAAoB,EAAE,MAAM,KAAK,GAAqC;AAC7E,SACE,4CAAC,YAAO,IAAI,GAAG,YACZ,eACE;AAAA,IACC,CAAC,OAAO;AAAA;AAAA,MAEN,GAAG,MAAM,IAAI,SAAS,gBAAgB,gBAAgB,WAAW,eAAe,KAAK;AAAA,QACnF;AAAA,MACF;AAAA;AAAA,EACJ,EACC,KAAK,IAAI,GACd;AAEJ;AA2BA,eAAsB,gBAAgB;AAAA,EACpC,OAAO;AAAA,EACP;AACF,GAG6B;AAC3B,QAAM,cAAc,UAAM,wBAAQ;AAClC,QAAM,MAAM,YAAY,IAAI,6BAA6B;AACzD,QAAM,WAAW,QAAQ;AAEzB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAKA,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAEhC,QAAM,EAAE,MAAM,MAAM,IAAI,2CAAiB,SAAS,KAAK,EAAE,MAAM,SAAS;AAGxE,QAAM,YACJ,WAKA,iCAAiC;AACnC,QAAM,WAAW,UAAU,kCAAkC,SAAS,IAAI;AAE1E,QAAM,OAAO;AAQb,OAAK,iBAAiB,KAAK,kBAAkB,CAAC;AAC9C,OAAK,eAAe,IAAI,IAAI,KAAK,eAAe,IAAI,KAAK;AAGzD,MAAI,gBAAgB,UAAU,iBAAiB,CAAC;AAChD,QAAM,mBAAmB,EAAE,GAAG,UAAU,iBAAiB;AAGzD,kBAAgB,OAAO;AAAA,IACrB,OAAO,QAAQ,aAAa,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAElD,YAAM,WAAW,IAAI,eAAe,MAAM;AAC1C,uBAAiB,QAAQ,IAAI,iBAAiB,MAAM,EAAE;AAEtD,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,UAGJ,QAAQ,MAAM,OAAO,IAAI,CAAC,UAAU,IAAI,eAAe,OAAO;AAAA;AAAA,QAEhE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAGA,QAAM,CAAC,EAAE,uBAAuB,GAAG,EAAE,mBAAmB,CAAC,IACvD,MAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,YACR;AAAA,MACE,OAAO,wCAAwC;AAAA,MAC/C,OAAO,2BAA2B;AAAA,IACpC,IACA;AAAA,MACE,OAAO,sCAAsC;AAAA,MAC7C,OAAO,yBAAyB;AAAA,IAClC;AAAA,EACN;AAEF,QAAM,SAAS,uBAAuB,UAAU,aAAa;AAE7D,QAAM,OAAO,CAAC;AACd,QAAM,UAAU,IAAI,YAAY;AAGhC,mBAAiB,SAAS,QAAgD;AACxE,SAAK,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACjC;AAEA,QAAM,UAAU,QAAQ,IAAI,YAAY,cAAc;AACtD,QAAM,sBAAsB,GAAG,QAAQ,OAAO,QAAQ,OAAO,GAAG;AAEhE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,IAAI,GAAG;AAAA,QAEP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,eAAe,UAAU,iBAAiB,CAAC;AAAA,cAC3C,WAAW;AAAA,cACX,MAAM;AAAA;AAAA,UACR;AAAA,UAEA,4CAAC,uBAAoB,MAAY,MAAM,qBAAqB;AAAA;AAAA;AAAA,IAC9D;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * RemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}): Promise<React.ReactNode> {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n    { RemoteComponentSSR },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n          import('./render-client-turbopack'),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n          import('./render-client-webpack'),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new Error('No valid renderToReadableStream function found');\n  }\n\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/next/remote/render-server.js

@@ -5,6 +5,13 @@ const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
 const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;
+async function tryImport(importer) {
+  try {
+    return await importer();
+  } catch {
+    return {};
+  }
+}
 function RemoteComponentData({ name, data }) {
   return /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.map(
     (chunk, i) => (
@@ -51,15 +58,33 @@ async function RemoteComponent({
       ];
     })
   );
-  const [{ renderToReadableStream }, { RemoteComponentSSR }] = await Promise.all(
+  const [
+    { renderToReadableStream: nextRenderToReadableStream },
+    { renderToReadableStream: legacyRenderToReadableStream },
+    { RemoteComponentSSR }
+  ] = await Promise.all(
     process.env.TURBOPACK ? [
-      import("react-server-dom-turbopack/server.edge"),
+      tryImport(
+        () => import("react-server-dom-turbopack/server")
+      ),
+      tryImport(
+        () => import("react-server-dom-turbopack/server.edge")
+      ),
       import("./render-client-turbopack")
     ] : [
-      import("react-server-dom-webpack/server.edge"),
+      tryImport(
+        () => import("react-server-dom-webpack/server")
+      ),
+      tryImport(
+        () => import("react-server-dom-webpack/server.edge")
+      ),
       import("./render-client-webpack")
     ]
   );
+  const renderToReadableStream = nextRenderToReadableStream ?? legacyRenderToReadableStream;
+  if (typeof renderToReadableStream !== "function") {
+    throw new Error("No valid renderToReadableStream function found");
+  }
   const stream = renderToReadableStream(children, clientModules);
   const data = [];
   const decoder = new TextDecoder();

package/dist/next/remote/render-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * RemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}): Promise<React.ReactNode> {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [{ renderToReadableStream }, { RemoteComponentSSR }] =\n    await Promise.all(\n      process.env.TURBOPACK\n        ? [\n            import('react-server-dom-turbopack/server.edge'),\n            import('./render-client-turbopack'),\n          ]\n        : [\n            import('react-server-dom-webpack/server.edge'),\n            import('./render-client-webpack'),\n          ],\n    );\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"AAiBI,cAwIA,YAxIA;AAjBJ,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAIjC,MAAM,oCAAoC,OAAO;AAAA,EAC/C;AACF;AAEA,MAAM,aAAa,QAAQ,IAAI;AAM/B,SAAS,oBAAoB,EAAE,MAAM,KAAK,GAAqC;AAC7E,SACE,oBAAC,YAAO,IAAI,GAAG,YACZ,eACE;AAAA,IACC,CAAC,OAAO;AAAA;AAAA,MAEN,GAAG,MAAM,IAAI,SAAS,gBAAgB,gBAAgB,WAAW,eAAe,KAAK;AAAA,QACnF;AAAA,MACF;AAAA;AAAA,EACJ,EACC,KAAK,IAAI,GACd;AAEJ;AA2BA,eAAsB,gBAAgB;AAAA,EACpC,OAAO;AAAA,EACP;AACF,GAG6B;AAC3B,QAAM,cAAc,MAAM,QAAQ;AAClC,QAAM,MAAM,YAAY,IAAI,6BAA6B;AACzD,QAAM,WAAW,QAAQ;AAEzB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAKA,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAEhC,QAAM,EAAE,MAAM,MAAM,IAAI,iBAAiB,SAAS,KAAK,EAAE,MAAM,SAAS;AAGxE,QAAM,YACJ,WAKA,iCAAiC;AACnC,QAAM,WAAW,UAAU,kCAAkC,SAAS,IAAI;AAE1E,QAAM,OAAO;AAQb,OAAK,iBAAiB,KAAK,kBAAkB,CAAC;AAC9C,OAAK,eAAe,IAAI,IAAI,KAAK,eAAe,IAAI,KAAK;AAGzD,MAAI,gBAAgB,UAAU,iBAAiB,CAAC;AAChD,QAAM,mBAAmB,EAAE,GAAG,UAAU,iBAAiB;AAGzD,kBAAgB,OAAO;AAAA,IACrB,OAAO,QAAQ,aAAa,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAElD,YAAM,WAAW,IAAI,eAAe,MAAM;AAC1C,uBAAiB,QAAQ,IAAI,iBAAiB,MAAM,EAAE;AAEtD,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,UAGJ,QAAQ,MAAM,OAAO,IAAI,CAAC,UAAU,IAAI,eAAe,OAAO;AAAA;AAAA,QAEhE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAGA,QAAM,CAAC,EAAE,uBAAuB,GAAG,EAAE,mBAAmB,CAAC,IACvD,MAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,YACR;AAAA,MACE,OAAO,wCAAwC;AAAA,MAC/C,OAAO,2BAA2B;AAAA,IACpC,IACA;AAAA,MACE,OAAO,sCAAsC;AAAA,MAC7C,OAAO,yBAAyB;AAAA,IAClC;AAAA,EACN;AAEF,QAAM,SAAS,uBAAuB,UAAU,aAAa;AAE7D,QAAM,OAAO,CAAC;AACd,QAAM,UAAU,IAAI,YAAY;AAGhC,mBAAiB,SAAS,QAAgD;AACxE,SAAK,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACjC;AAEA,QAAM,UAAU,QAAQ,IAAI,YAAY,cAAc;AACtD,QAAM,sBAAsB,GAAG,QAAQ,OAAO,QAAQ,OAAO,GAAG;AAEhE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,IAAI,GAAG;AAAA,QAEP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,eAAe,UAAU,iBAAiB,CAAC;AAAA,cAC3C,WAAW;AAAA,cACX,MAAM;AAAA;AAAA,UACR;AAAA,UAEA,oBAAC,uBAAoB,MAAY,MAAM,qBAAqB;AAAA;AAAA;AAAA,IAC9D;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID;\n\nasync function tryImport<T>(importer: () => Promise<T>) {\n  try {\n    return (await importer()) as T;\n  } catch {\n    return {} as T;\n  }\n}\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * RemoteComponent is a Next.js component that exposes a remote component\n * that can be used in a host application.\n *\n * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param children - The content of the remote component. This is the content that will be rendered as the remote component.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}): Promise<React.ReactNode> {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${PROJECT_ID}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${PROJECT_ID}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [\n    { renderToReadableStream: nextRenderToReadableStream },\n    { renderToReadableStream: legacyRenderToReadableStream },\n    { RemoteComponentSSR },\n  ] = await Promise.all(\n    process.env.TURBOPACK\n      ? [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-turbopack/server.edge'),\n          ),\n          import('./render-client-turbopack'),\n        ]\n      : [\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server'),\n          ),\n          tryImport<RSDWServer>(\n            () => import('react-server-dom-webpack/server.edge'),\n          ),\n          import('./render-client-webpack'),\n        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new Error('No valid renderToReadableStream function found');\n  }\n\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={PROJECT_ID}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shared/client/remote-component.cjs

@@ -31,7 +31,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var remote_component_exports = {};
 __export(remote_component_exports, {
   DEFAULT_ROUTE: () => DEFAULT_ROUTE,
-  REMOTE_COMPONENT_PREFIX: () => REMOTE_COMPONENT_PREFIX,
   REMOTE_COMPONENT_REGEX: () => REMOTE_COMPONENT_REGEX,
   RUNTIME_TURBOPACK: () => RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK: () => RUNTIME_WEBPACK,
@@ -159,47 +158,11 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   return { Component: null, App: null };
 }
 
-// src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
-  await Promise.all(
-    scripts.map((script) => {
-      return new Promise((resolve, reject) => {
-        const newSrc = new URL(
-          // remove the remote component bundle name identifier from the script src
-          script.src.replace(/\/_next\/\[.+\] /, "/_next/"),
-          location.origin
-        ).href;
-        const newScript = document.createElement("script");
-        newScript.onload = () => {
-          resolve();
-        };
-        newScript.onerror = () => {
-          reject(
-            new Error(
-              `Failed to load script ${script.src} for remote component`
-            )
-          );
-        };
-        newScript.src = newSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
-}
-function loadCSS(url) {
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = url;
-  document.head.appendChild(link);
-}
-
 // src/shared/client/const.ts
 var DEFAULT_ROUTE = "/";
 var RUNTIME_WEBPACK = "webpack";
 var RUNTIME_TURBOPACK = "turbopack";
-var REMOTE_COMPONENT_PREFIX = "[remote-component-";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*)?\[(?<bundle>remote-component-(?:[^\]]+))\](?:%20| )(?<id>.+)/;
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
 function getBundleKey(bundle) {
   return bundle.replace(/-/g, "_");
 }
@@ -258,7 +221,6 @@ function createChunkLoader(runtime) {
       self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
     ).href;
     if (url.endsWith(".css")) {
-      loadCSS(url);
       return;
     }
     return new Promise((resolve, reject) => {
@@ -290,12 +252,18 @@ async function handleTurbopackChunk(code, bundle, url) {
     /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
     `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
   ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
-    /\/\/# sourceMappingURL=(?<name>.+)\._\.js\.map/g,
-    `//# sourceMappingURL=${new URL(".", new URL(url)).pathname}$1._.js.map`
+    /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
+    `//# sourceMappingURL=${new URL(
+      ".",
+      new URL(
+        url,
+        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
+      )
+    ).href}$1$2.js.map`
   );
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
-      type: "application/javascript"
+      type: "application/javascript; charset=UTF-8"
     });
     const scriptUrl = URL.createObjectURL(blob);
     const script = document.createElement("script");
@@ -445,6 +413,35 @@ function handleTurbopackModule(bundle, moduleId, id) {
   return exports;
 }
 
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(/\/_next\/\[.+\] /, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new Error(
+              `Failed to load script ${script.src} for remote component`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+
 // src/shared/client/rsc.ts
 function fixPayload(payload) {
   if (Array.isArray(payload)) {
@@ -576,7 +573,6 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_ROUTE,
-  REMOTE_COMPONENT_PREFIX,
   REMOTE_COMPONENT_REGEX,
   RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK,