remote-components 0.0.21 → 0.0.23

package/dist/next/host/pages-router-server.js

@@ -101,8 +101,11 @@ function RemoteComponent(props) {
       RemoteComponentReact,
       {
         isolate: props.isolate,
+        mode: props.mode,
+        name: props.name,
+        reset: props.reset,
         shared: shared(props.bundle ?? "default"),
-        src: props.src,
+        src: props.url ?? props.src,
         children: props.children
       }
     );
@@ -111,9 +114,11 @@ function RemoteComponent(props) {
     RemoteComponentReact,
     {
       isolate: props.isolate,
+      mode: props.mode,
       name: props.name,
+      reset: props.reset,
       shared: shared(props.bundle ?? "default"),
-      src: props.src,
+      src: props.url ?? props.src,
       children: remoteComponent
     }
   );
@@ -129,7 +134,8 @@ async function getRemoteComponentProps(src, headers) {
     name,
     links,
     component,
-    nextData
+    nextData,
+    url
   } = await fetchRemoteComponent(
     src,
     headers instanceof Headers ? headers : (
@@ -155,7 +161,8 @@ async function getRemoteComponentProps(src, headers) {
     name,
     route,
     runtime,
-    buildId: nextData?.buildId ?? null
+    buildId: nextData?.buildId ?? null,
+    url: url.href
   };
   const key = getKey(props);
   if (nextData?.buildId !== "development") {

package/dist/next/host/pages-router-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport { useRouter } from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter,\n  useSearchParams: () => {\n    const router = useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    return function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    };\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    ..._shared,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      name={props.name}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["self","key"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared as _shared } from '@remote-components/shared/host/pages';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Script from 'next/script';\nimport { useRouter } from 'next/router';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst navigationImpl = {\n  useRouter,\n  useSearchParams: () => {\n    const router = useRouter();\n    return {\n      get: (key: string) => router.query[key],\n      has: (key: string) => key in router.query,\n    };\n  },\n};\n\nconst sharedCache = new Map<string, Record<string, () => Promise<unknown>>>();\nconst shared = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ''}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    return function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    };\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    ..._shared,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, component: React.ReactNode): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, component);\n}\n\nfunction getComponent(key: string): React.ReactNode | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  url?: string | URL;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.url ?? props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.url ?? props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    links,\n    component,\n    nextData,\n    url,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n    {\n      rsc: true,\n    },\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n    buildId: nextData?.buildId ?? null,\n    url: url.href,\n  };\n\n  const key = getKey(props);\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId !== 'development') {\n    // store the HTML in a global store\n    setComponent(\n      key,\n      <>\n        {links.map((link) => (\n          <link\n            key={`${link.as}_${link.href}`}\n            {...link}\n            precedence={undefined}\n          />\n        ))}\n        {component}\n      </>,\n    );\n  }\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":"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","names":["self","key"]}

package/dist/next/middleware.cjs

@@ -29,7 +29,7 @@ function corsFromOptions(options) {
   const ALLOWED_ORIGINS = (process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS || (Array.isArray(options?.origin) ? options.origin.join(",") : options?.origin) || "*").split(",").map((origin) => origin.trim());
   const CORS_HEADERS = {
     "Access-Control-Allow-Methods": process.env.REMOTE_COMPONENTS_ALLOW_METHODS || (Array.isArray(options?.method) ? options.method.map((m) => m.trim()).join(",") : options?.method) || "GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS",
-    "Access-Control-Allow-Headers": `${process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || "Content-Type,Authorization"},vercel-remote-component-url`,
+    "Access-Control-Allow-Headers": process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || "Content-Type,Authorization",
     ...process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials ? {
       "Access-Control-Allow-Credentials": process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || "true"
     } : {}

package/dist/next/middleware.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers': `${\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization'\n    },vercel-remote-component-url`,\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin = request.headers.get('origin') ?? '';\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA+C;AAW/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCAAgC,GAC9B,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IAEF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SAAS,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AAChD,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,2BAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAAA,IAC5D;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}
+{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers':\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization',\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin = request.headers.get('origin') ?? '';\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA+C;AAW/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IACF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SAAS,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AAChD,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,2BAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAAA,IAC5D;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}

package/dist/next/middleware.js

@@ -4,7 +4,7 @@ function corsFromOptions(options) {
   const ALLOWED_ORIGINS = (process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS || (Array.isArray(options?.origin) ? options.origin.join(",") : options?.origin) || "*").split(",").map((origin) => origin.trim());
   const CORS_HEADERS = {
     "Access-Control-Allow-Methods": process.env.REMOTE_COMPONENTS_ALLOW_METHODS || (Array.isArray(options?.method) ? options.method.map((m) => m.trim()).join(",") : options?.method) || "GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS",
-    "Access-Control-Allow-Headers": `${process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || "Content-Type,Authorization"},vercel-remote-component-url`,
+    "Access-Control-Allow-Headers": process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || "Content-Type,Authorization",
     ...process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials ? {
       "Access-Control-Allow-Credentials": process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || "true"
     } : {}

package/dist/next/middleware.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers': `${\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization'\n    },vercel-remote-component-url`,\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin = request.headers.get('origin') ?? '';\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";AAAA,SAA2B,oBAAoB;AAW/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCAAgC,GAC9B,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IAEF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SAAS,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AAChD,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,aAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAAA,IAC5D;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}
+{"version":3,"sources":["../../src/next/middleware/index.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\n\nexport interface RemoteComponentMiddlewareOptions {\n  cors?: {\n    origin?: string | string[];\n    method?: string | string[];\n    headers?: string | string[];\n    credentials?: boolean;\n  };\n}\n\nfunction corsFromOptions(options?: RemoteComponentMiddlewareOptions['cors']) {\n  const ALLOWED_ORIGINS = (\n    process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS ||\n    (Array.isArray(options?.origin)\n      ? options.origin.join(',')\n      : options?.origin) ||\n    '*'\n  )\n    .split(',')\n    .map((origin) => origin.trim());\n\n  const CORS_HEADERS = {\n    'Access-Control-Allow-Methods':\n      process.env.REMOTE_COMPONENTS_ALLOW_METHODS ||\n      (Array.isArray(options?.method)\n        ? options.method.map((m) => m.trim()).join(',')\n        : options?.method) ||\n      'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS',\n    'Access-Control-Allow-Headers':\n      process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n      (Array.isArray(options?.headers)\n        ? options.headers.map((h) => h.trim()).join(',')\n        : options?.headers) ||\n      'Content-Type,Authorization',\n    ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials\n      ? {\n          'Access-Control-Allow-Credentials':\n            process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n        }\n      : {}),\n  };\n\n  return { ALLOWED_ORIGINS, CORS_HEADERS };\n}\n\n/**\n * This middleware is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js middleware function to add CORS headers and handle preflight requests.\n *\n * @param middleware - The Next.js middleware function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js middleware function that handles CORS and preflight requests\n */\nexport function withRemoteComponents(\n  middleware?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentMiddlewareOptions,\n) {\n  return async (request: NextRequest) => {\n    const { ALLOWED_ORIGINS, CORS_HEADERS } = corsFromOptions(options?.cors);\n\n    const origin = request.headers.get('origin') ?? '';\n    const isAllowed =\n      ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n    // Handle preflight\n    if (request.method === 'OPTIONS') {\n      return new Response(null, {\n        status: 200,\n        headers: isAllowed\n          ? {\n              'Access-Control-Allow-Origin': origin,\n              ...CORS_HEADERS,\n            }\n          : {},\n      });\n    }\n\n    // For all other requests, continue and attach CORS\n    const response =\n      typeof middleware === 'function'\n        ? await middleware(request)\n        : NextResponse.next();\n\n    if (isAllowed) {\n      response.headers.set('Access-Control-Allow-Origin', origin);\n    }\n\n    Object.entries(CORS_HEADERS).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\n/**\n * This configuration is used to specify the paths that the middleware should match.\n * It matches all paths by default.\n */\nexport const config = {\n  matcher: '/:path*',\n};\n"],"mappings":";AAAA,SAA2B,oBAAoB;AAW/C,SAAS,gBAAgB,SAAoD;AAC3E,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAEhC,QAAM,eAAe;AAAA,IACnB,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC5C,SAAS,WACb;AAAA,IACF,gCACE,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb;AAAA,IACF,GAAI,QAAQ,IAAI,uCAAuC,SAAS,cAC5D;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,iBAAiB,aAAa;AACzC;AAUO,SAAS,qBACd,YACA,SACA;AACA,SAAO,OAAO,YAAyB;AACrC,UAAM,EAAE,iBAAiB,aAAa,IAAI,gBAAgB,SAAS,IAAI;AAEvE,UAAM,SAAS,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AAChD,UAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAGlE,QAAI,QAAQ,WAAW,WAAW;AAChC,aAAO,IAAI,SAAS,MAAM;AAAA,QACxB,QAAQ;AAAA,QACR,SAAS,YACL;AAAA,UACE,+BAA+B;AAAA,UAC/B,GAAG;AAAA,QACL,IACA,CAAC;AAAA,MACP,CAAC;AAAA,IACH;AAGA,UAAM,WACJ,OAAO,eAAe,aAClB,MAAM,WAAW,OAAO,IACxB,aAAa,KAAK;AAExB,QAAI,WAAW;AACb,eAAS,QAAQ,IAAI,+BAA+B,MAAM;AAAA,IAC5D;AAEA,WAAO,QAAQ,YAAY,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MACzC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AACX;","names":[]}

package/dist/react/index.cjs

@@ -47,6 +47,8 @@ function getRemoteComponentHtml(html) {
 function RemoteComponent({
   src,
   isolate,
+  mode = "open",
+  reset,
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
   shared = {},
@@ -69,12 +71,21 @@ function RemoteComponent({
   const [data, setData] = (0, import_react.useState)(null);
   const [remoteComponent, setRemoteComponent] = (0, import_react.useState)(null);
   const shadowRootContainerRef = (0, import_react.useRef)(null);
-  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(
-    typeof document !== "undefined" ? document.getElementById(`shadowroot_${name}`)?.shadowRoot ?? null : null
-  );
+  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.getElementById(
+      `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
   const htmlRef = (0, import_react.useRef)(
-    typeof document !== "undefined" ? document.getElementById(`shadowroot_${name}`)?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML : null
+    typeof document !== "undefined" ? document.getElementById(
+      `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`
+    )?.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 ssrHtmlRef = (0, import_react.useRef)(htmlRef.current);
   const endTemplateRef = (0, import_react.useRef)(null);
   const childrenRef = (0, import_react.useRef)(
     typeof document !== "undefined" ? (() => {
@@ -98,11 +109,15 @@ function RemoteComponent({
     }
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
       let shadowRootElement = null;
-      const element = document.getElementById(`shadowroot_${name}`);
+      const element = document.getElementById(
+        `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`
+      );
       shadowRootElement = element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
-        element.attachShadow({ mode: "open" });
-        shadowRootElement = element.shadowRoot;
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+        } catch {
+        }
       }
       if (shadowRootElement) {
         shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
@@ -111,7 +126,7 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent]);
+  }, [name, isolate, shadowRoot, remoteComponent, mode]);
   const url = (0, import_react.useMemo)(() => {
     if (typeof src !== "string")
       return new URL(
@@ -134,9 +149,7 @@ function RemoteComponent({
           const fetchInit = {
             method: "GET",
             headers: {
-              Accept: "text/html",
-              // pass the public address of the remote component to the server used for module map mutation
-              "Vercel-Remote-Component-Url": url.href
+              Accept: "text/html"
             },
             credentials
           };
@@ -184,7 +197,7 @@ function RemoteComponent({
           "script[src],script[data-src]"
         );
         const inlineScripts = doc.querySelectorAll(
-          "script:not([src]):not([data-src]):not([id*='_rsc'])"
+          "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
         );
         const self = globalThis;
         const prevNextScripts = self.__next_s;
@@ -317,15 +330,16 @@ function RemoteComponent({
     remoteComponent ?? children
   ] });
   if (isolate !== false) {
-    const shadowRemoteComponentHtml = shadowRoot?.querySelector(
-      `#__REMOTE_COMPONENT${name}`
-    );
+    const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");
     if (shadowRemoteComponentHtml) {
       shadowRemoteComponentHtml.remove();
     }
     if (shadowRoot && remoteComponent && htmlRef.current) {
-      const content = shadowRoot.querySelectorAll(":not(link,style)");
-      content.forEach((node) => node.remove());
+      if (ssrHtmlRef.current) {
+        const content = shadowRoot.querySelectorAll(":not(link,style)");
+        content.forEach((node) => node.remove());
+        ssrHtmlRef.current = null;
+      }
       htmlRef.current = null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -333,12 +347,35 @@ function RemoteComponent({
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
-          id: `shadowroot_${data?.name ?? name}`,
+          id: `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`,
           ref: shadowRootContainerRef,
           children: [
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: "open", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: {
+                      __html: `<img
+      alt="" decoding="async" style="display:none"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+      onload="(function(el){
+        const root = el.getRootNode();
+        globalThis.__remote_components_shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")} = root;
+        el.parentElement.remove();
+      })(this)"
+    />`
+                    }
+                  }
+                ) : null,
+                reset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "style",
+                  {
+                    "data-remote-components-reset": true,
+                    children: `:host { all: initial; }`
+                  }
+                ) : null,
                 linksToRender,
                 children
               ] })

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useMemo,\n  startTransition,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  setAttributesFromProps,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n  REMOTE_COMPONENT_REGEX,\n  type LoadRemoteComponentProps,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps as RemoteComponentPropsType } 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 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  /** 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  const temp = document.createElement('div');\n  temp.innerHTML = 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`,\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  credentials = 'same-origin',\n  name: nameProp = '__vercel_remote_component',\n  shared = {},\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    typeof document !== 'undefined'\n      ? (document.getElementById(`shadowroot_${name}`)?.shadowRoot ?? null)\n      : null,\n  );\n  const htmlRef = useRef<string | null>(\n    typeof document !== 'undefined'\n      ? (document.getElementById(`shadowroot_${name}`)?.shadowRoot?.innerHTML ??\n          document.getElementById(`__REMOTE_COMPONENT${name}`)?.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\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      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, remoteComponent]);\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    let mounted = true;\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: {\n              Accept: 'text/html',\n              // pass the public address of the remote component to the server used for module map mutation\n              'Vercel-Remote-Component-Url': url.href,\n            },\n            credentials,\n          } as RequestInit;\n\n          const res = await fetch(url, fetchInit);\n\n          if (!res.ok) {\n            throw new Error(\n              `Failed to fetch remote component \"${name}\": ${res.status}`,\n            );\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 doc = document.createElement('div');\n        doc.innerHTML = html;\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        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';\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 metadata = {\n          name: remoteName,\n          bundle,\n          route:\n            component?.getAttribute('data-route') ??\n            nextData?.page ??\n            DEFAULT_ROUTE,\n          runtime: (component?.getAttribute('data-runtime') ??\n            (nextData?.props.__REMOTE_COMPONENT__?.runtime ||\n              RUNTIME_WEBPACK)) as RemoteComponentPropsType['runtime'],\n        };\n\n        const remoteSharedEl = doc.querySelector(`#${remoteName}_shared`);\n        const remoteShared = (JSON.parse(remoteSharedEl?.textContent ?? '{}') ??\n          {}) as Record<string, string>;\n        remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);\n\n        if (!component || !(rsc || nextData)) {\n          throw new Error(`Failed to find component with id \"${remoteName}\"`);\n        }\n\n        // reference to all link elements in the remote component\n        const links = Array.from(\n          doc.querySelectorAll<HTMLLinkElement>('link[href]'),\n        ).map((link) => ({\n          rel: link.rel,\n          href: new URL(link.getAttribute('href') ?? link.href, url).href,\n          as: link.getAttribute('as') || undefined,\n        }));\n\n        const scripts = doc.querySelectorAll<HTMLScriptElement>(\n          'script[src],script[data-src]',\n        );\n\n        // handle inline scripts in the remote component\n        const inlineScripts = doc.querySelectorAll(\n          \"script:not([src]):not([data-src]):not([id*='_rsc'])\",\n        );\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).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        if (mounted) {\n          if (rsc) {\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          const result = await loadRemoteComponent({\n            url: new URL(url, location.origin),\n            name: remoteName,\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            remoteShared,\n            container: shadowRoot,\n          });\n\n          // we need to re-check mounted state after await loadRemoteComponent\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          if (mounted) {\n            setData(newData);\n            if (result.error) {\n              setRemoteComponent(result.error);\n            } else {\n              setRemoteComponent(result.component);\n            }\n          }\n        }\n      } catch (error) {\n        if (mounted) {\n          setRemoteComponent(error as Error);\n        }\n      }\n    });\n\n    return () => {\n      mounted = false;\n    };\n  }, [url, src, isolate, credentials, name, shared, shadowRoot]);\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: data?.runtime || RUNTIME_WEBPACK,\n      })}\n    </script>\n  );\n  const linksToRender: React.ReactNode[] | null =\n    data?.links?.map((link) => (\n      <link\n        as={link.as as string}\n        href={new URL(link.href as string, url).href}\n        key={`${link.href as string}_${link.rel}`}\n        rel={link.rel as string}\n      />\n    )) || null;\n  const componentToRender = (\n    <>\n      {linksToRender}\n      {remoteComponent ?? children}\n    </>\n  );\n\n  if (isolate !== false) {\n    const shadowRemoteComponentHtml = shadowRoot?.querySelector(\n      `#__REMOTE_COMPONENT${name}`,\n    );\n    if (shadowRemoteComponentHtml) {\n      shadowRemoteComponentHtml.remove();\n    }\n\n    if (shadowRoot && remoteComponent && htmlRef.current) {\n      const content = shadowRoot.querySelectorAll(':not(link,style)');\n      content.forEach((node) => node.remove());\n      htmlRef.current = null;\n    }\n\n    return (\n      <>\n        {metadataJson}\n        <div\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=\"open\">\n              {linksToRender}\n              {children}\n            </template>\n          ) : null}\n          {shadowRoot && remoteComponent\n            ? createPortal(\n                <>\n                  {linksToRender}\n                  {remoteComponent}\n                </>,\n                shadowRoot,\n              )\n            : null}\n        </div>\n      </>\n    );\n  }\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":["url"]}
+{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useMemo,\n  startTransition,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  setAttributesFromProps,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n  REMOTE_COMPONENT_REGEX,\n  type LoadRemoteComponentProps,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps as RemoteComponentPropsType } 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  /** 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  const temp = document.createElement('div');\n  temp.innerHTML = 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`,\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  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 ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')}` as const;\n    const ssrShadowRoot =\n      typeof document !== 'undefined'\n        ? (document.getElementById(\n            `shadowroot_${src ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')}`,\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.getElementById(\n          `shadowroot_${src ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')}`,\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 ssrHtmlRef = useRef<string | null>(htmlRef.current);\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\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      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(\n        `shadowroot_${src ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')}`,\n      );\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        try {\n          shadowRootElement = element.attachShadow({ mode });\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]);\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    let mounted = true;\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: {\n              Accept: 'text/html',\n            },\n            credentials,\n          } as RequestInit;\n\n          const res = await fetch(url, fetchInit);\n\n          if (!res.ok) {\n            throw new Error(\n              `Failed to fetch remote component \"${name}\": ${res.status}`,\n            );\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 doc = document.createElement('div');\n        doc.innerHTML = html;\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        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';\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 metadata = {\n          name: remoteName,\n          bundle,\n          route:\n            component?.getAttribute('data-route') ??\n            nextData?.page ??\n            DEFAULT_ROUTE,\n          runtime: (component?.getAttribute('data-runtime') ??\n            (nextData?.props.__REMOTE_COMPONENT__?.runtime ||\n              RUNTIME_WEBPACK)) as RemoteComponentPropsType['runtime'],\n        };\n\n        const remoteSharedEl = doc.querySelector(`#${remoteName}_shared`);\n        const remoteShared = (JSON.parse(remoteSharedEl?.textContent ?? '{}') ??\n          {}) as Record<string, string>;\n        remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);\n\n        if (!component || !(rsc || nextData)) {\n          throw new Error(`Failed to find component with id \"${remoteName}\"`);\n        }\n\n        // reference to all link elements in the remote component\n        const links = Array.from(\n          doc.querySelectorAll<HTMLLinkElement>('link[href]'),\n        ).map((link) => ({\n          rel: link.rel,\n          href: new URL(link.getAttribute('href') ?? link.href, url).href,\n          as: link.getAttribute('as') || undefined,\n        }));\n\n        const scripts = doc.querySelectorAll<HTMLScriptElement>(\n          'script[src],script[data-src]',\n        );\n\n        // handle inline scripts in the remote component\n        const inlineScripts = doc.querySelectorAll(\n          \"script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])\",\n        );\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).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        if (mounted) {\n          if (rsc) {\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          const result = await loadRemoteComponent({\n            url: new URL(url, location.origin),\n            name: remoteName,\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            remoteShared,\n            container: shadowRoot,\n          });\n\n          // we need to re-check mounted state after await loadRemoteComponent\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          if (mounted) {\n            setData(newData);\n            if (result.error) {\n              setRemoteComponent(result.error);\n            } else {\n              setRemoteComponent(result.component);\n            }\n          }\n        }\n      } catch (error) {\n        if (mounted) {\n          setRemoteComponent(error as Error);\n        }\n      }\n    });\n\n    return () => {\n      mounted = false;\n    };\n  }, [url, src, isolate, credentials, name, shared, shadowRoot]);\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: data?.runtime || RUNTIME_WEBPACK,\n      })}\n    </script>\n  );\n  const linksToRender: React.ReactNode[] | null =\n    data?.links?.map((link) => (\n      <link\n        as={link.as as string}\n        href={new URL(link.href as string, url).href}\n        key={`${link.href as string}_${link.rel}`}\n        rel={link.rel as string}\n      />\n    )) || null;\n  const componentToRender = (\n    <>\n      {linksToRender}\n      {remoteComponent ?? children}\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    if (shadowRoot && remoteComponent && htmlRef.current) {\n      if (ssrHtmlRef.current) {\n        const content = shadowRoot.querySelectorAll(':not(link,style)');\n        content.forEach((node) => node.remove());\n        ssrHtmlRef.current = null;\n      }\n      htmlRef.current = null;\n    }\n\n    return (\n      <>\n        {metadataJson}\n        <div\n          id={`shadowroot_${src ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')}`}\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 ? new URL(src, typeof location !== 'undefined' ? location.origin : 'http://localhost').href.replace(/[^a-z0-9]/g, '_') : ''}_${(data?.name ?? name).replace(/[^a-z0-9]/g, '_')} = root;\n        el.parentElement.remove();\n      })(this)\"\n    />`,\n                  }}\n                />\n              ) : null}\n              {reset ? (\n                <style\n                  data-remote-components-reset\n                >{`:host { all: initial; }`}</style>\n              ) : null}\n              {linksToRender}\n              {children}\n            </template>\n          ) : null}\n          {shadowRoot && remoteComponent\n            ? createPortal(\n                <>\n                  {linksToRender}\n                  {remoteComponent}\n                </>,\n                shadowRoot,\n              )\n            : null}\n        </div>\n      </>\n    );\n  }\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":["url"]}

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RemoteComponentProps$1 } from '../types-7425dfe1.js';
+import { R as RemoteComponentProps$1 } from '../types-b8210fd3.js';
 import 'react';
 import '../types-280a3640.js';
 
@@ -30,6 +30,10 @@ interface RemoteComponentProps {
     src?: string | URL;
     /** Whether to isolate the remote component using a Shadow DOM wrapper. */
     isolate?: boolean;
+    /** The shadow DOM mode to use when isolating the remote component. */
+    mode?: 'open' | 'closed';
+    /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */
+    reset?: boolean;
     /** The credentials to use for the fetch request. Defaults to `same-origin`. */
     credentials?: RequestCredentials;
     name?: string;
@@ -74,6 +78,6 @@ interface RemoteComponentProps {
  * />
  * ```
  */
-declare function RemoteComponent({ src, isolate, credentials, name: nameProp, shared, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function RemoteComponent({ src, isolate, mode, reset, credentials, name: nameProp, shared, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
 export { RemoteComponent, RemoteComponentProps };