remote-components 0.1.2 → 0.2.0

package/dist/remote/html.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/runtime/url/protected-rc-fallback.ts","../../src/utils/abort.ts","../../src/utils/error.ts","../../src/utils/logger.ts","../../src/runtime/loaders/static-loader.ts","../../src/remote/html/index.tsx"],"sourcesContent":["export const RC_PROTECTED_REMOTE_FETCH_PATHNAME = '/rc-fetch-protected-remote';\n\nexport const MISSING_SHARED_MODULES_MESSAGE =\n  'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?';\n\nexport const CORS_DOCS_URL =\n  'https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components';\n","import { RC_PROTECTED_REMOTE_FETCH_PATHNAME } from '#internal/utils/constants';\n\n/**\n * Generates a fallback URL that proxies the request through the host's protected remote fetch endpoint\n */\nexport function generateProtectedRcFallbackSrc(url: string): string {\n  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;\n}\n\nexport function isProxiedUrl(url: string): boolean {\n  try {\n    return (\n      new URL(url, location.href).pathname ===\n      RC_PROTECTED_REMOTE_FETCH_PATHNAME\n    );\n  } catch {\n    return false;\n  }\n}\n","/**\n * Type guard to check if an error is an AbortError.\n * Handles cross-environment differences (Node.js, browsers, JSDOM).\n */\nexport function isAbortError(error: unknown): error is DOMException {\n  if (error instanceof DOMException && error.name === 'AbortError') {\n    return true;\n  }\n\n  // Handle Node.js native AbortError which may not be instanceof global DOMException\n  if (\n    error !== null &&\n    typeof error === 'object' &&\n    'name' in error &&\n    error.name === 'AbortError' &&\n    'message' in error &&\n    typeof (error as { message: unknown }).message === 'string'\n  ) {\n    // Additional check: verify it has DOMException-like structure\n    const e = error as { code?: unknown; constructor?: { name?: string } };\n    return typeof e.code === 'number' || e.constructor?.name === 'DOMException';\n  }\n\n  return false;\n}\n","import { isProxiedUrl } from '#internal/runtime/url/protected-rc-fallback';\nimport { isAbortError } from '#internal/utils/abort';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\n\nexport class RemoteComponentsError extends Error {\n  code = 'REMOTE_COMPONENTS_ERROR';\n\n  constructor(message: string, options?: { cause?: unknown }) {\n    super(message, options);\n    this.name = 'RemoteComponentsError';\n  }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n  return new RemoteComponentsError(\n    `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n  );\n}\n\nexport function failedToFetchRemoteComponentError(\n  url: string,\n  { status, statusText }: { status: number; statusText: string },\n  help: string = 'Is the URL correct and accessible?',\n) {\n  return new RemoteComponentsError(\n    `Failed to fetch Remote Component from \"${url}\". ${help}`,\n    { cause: new Error(`${status} ${statusText}`) },\n  );\n}\n\nexport async function errorFromFailedFetch(\n  originalUrl: string,\n  resolvedUrl: URL,\n  res: Response | null | undefined,\n): Promise<RemoteComponentsError> {\n  const isProxied = isProxiedUrl(resolvedUrl.href);\n\n  if (isProxied && res) {\n    const body = await res.text().catch(() => '');\n    return failedProxyFetchError(\n      originalUrl,\n      resolvedUrl.href,\n      res.status,\n      body,\n    );\n  }\n\n  const fallback = failedToFetchRemoteComponentError(\n    originalUrl,\n    res ?? { status: 0, statusText: 'No Response' },\n  );\n\n  if (!res) return fallback;\n\n  try {\n    const body = await res.text();\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(body, 'text/html');\n    const errorTemplate = doc.querySelector(\n      'template[data-next-error-message]',\n    );\n    const errorMessage = errorTemplate?.getAttribute('data-next-error-message');\n    if (errorMessage) {\n      const error = new RemoteComponentsError(errorMessage);\n      const errorStack = errorTemplate?.getAttribute('data-next-error-stack');\n      if (errorStack) {\n        error.stack = errorStack;\n      }\n      return error;\n    }\n  } catch (parseError) {\n    // Re-throw abort errors, ignore parse errors\n    if (isAbortError(parseError)) throw parseError;\n  }\n\n  return fallback;\n}\n\nexport function failedProxyFetchError(\n  originalUrl: string,\n  proxyUrl: string,\n  status: number,\n  responseBody?: string,\n): RemoteComponentsError {\n  if (status === 404) {\n    return new RemoteComponentsError(\n      `Could not proxy the request to \"${originalUrl}\" — the proxy endpoint \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" returned 404.\\n\\n` +\n        `The host server needs middleware or a route that handles \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\".\\n\\n` +\n        `Proxying requires two pieces:\\n` +\n        `  1. resolveClientUrl={routeThroughHostProxy} on <RemoteComponent>\\n` +\n        `  2. Middleware or a route for \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" on the host server\\n\\n` +\n        `Docs: ${CORS_DOCS_URL}`,\n    );\n  }\n  if (status === 403) {\n    const detail = responseBody ? ` ${responseBody}` : '';\n    return new RemoteComponentsError(\n      `Proxied request to \"${proxyUrl}\" was forbidden.${detail} ` +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  }\n  return new RemoteComponentsError(\n    `Proxied request for \"${originalUrl}\" via \"${proxyUrl}\" failed with status ${status}. ` +\n      `See: ${CORS_DOCS_URL}`,\n  );\n}\n","import { CORS_DOCS_URL } from '#internal/utils/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ntype LogLocation =\n  | 'ChunkLoader'\n  | 'ComponentLoader'\n  | 'SharedModules'\n  | 'WebpackRuntime'\n  | 'TurbopackModule'\n  | 'StaticLoader'\n  | 'ScriptLoader'\n  | 'Polyfill'\n  | 'HtmlRemote'\n  | 'HtmlHost'\n  | 'Config'\n  | 'NextAppRouter'\n  | 'NextAppRouterCompat'\n  | 'FetchRemoteComponent';\n\nconst PREFIX = 'remote-components';\nconst DEBUG =\n  typeof window !== 'undefined' && localStorage.getItem('RC_DEBUG') === 'true';\n\nexport function logDebug(location: LogLocation, message: string) {\n  if (DEBUG) {\n    // eslint-disable-next-line no-console\n    console.debug(`[${PREFIX}:${location}]: ${message}`);\n  }\n}\n\nexport function logInfo(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.info(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logWarn(location: LogLocation, message: string) {\n  // eslint-disable-next-line no-console\n  console.warn(`[${PREFIX}:${location}]: ${message}`);\n}\n\nexport function logError(\n  location: LogLocation,\n  message: string,\n  cause?: unknown,\n) {\n  // eslint-disable-next-line no-console\n  console.error(\n    new RemoteComponentsError(`[${PREFIX}:${location}]: ${message}`, {\n      cause,\n    }),\n  );\n}\n\n/**\n * Logs a warning when a cross-origin asset request fails, guiding users\n * to configure the withRemoteComponentsHostProxy middleware on their host.\n */\nexport function warnCrossOriginFetchError(\n  logLocation: LogLocation,\n  url: string | URL,\n): void {\n  try {\n    const parsed = typeof url === 'string' ? new URL(url) : url;\n    if (typeof location === 'undefined' || parsed.origin === location.origin) {\n      return;\n    }\n    logWarn(\n      logLocation,\n      `Failed to fetch cross-origin resource \"${parsed.href}\". ` +\n        'If this is a protected deployment, ensure withRemoteComponentsHostProxy middleware ' +\n        'is configured in your host and that the remote URL is included in allowedProxyUrls. ' +\n        `See: ${CORS_DOCS_URL}`,\n    );\n  } catch {\n    // URL parsing failed — skip the warning\n  }\n}\n","import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type {\n  MountOrUnmountFunction,\n  MountUnmountFunctions,\n} from '#internal/runtime/types';\nimport { logError, warnCrossOriginFetchError } from '#internal/utils/logger';\n\ntype ScriptMod = {\n  mount?: MountOrUnmountFunction;\n  unmount?: MountOrUnmountFunction;\n  default?: {\n    mount?: MountOrUnmountFunction;\n    unmount?: MountOrUnmountFunction;\n  };\n};\n\n/**\n * Fetches an ES module via the resolveClientUrl callback, rewrites its\n * relative imports to also go through the callback, then loads it by injecting a\n * wrapper <script type=\"module\"> tag. The module's namespace is captured via\n * a temporary global and returned.\n *\n * This is needed when a direct import() of a cross-origin module fails due to\n * CORS restrictions or Vercel preview-deployment auth. A simple URL rewrite\n * doesn't work for import() because relative imports inside the module would\n * resolve against the rewritten URL instead of the original remote origin.\n */\nasync function importViaCallback<T>(\n  absoluteSrc: string,\n  resolveClientUrl: InternalResolveClientUrl,\n): Promise<T> {\n  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;\n  const fetchUrl = new URL(resolvedUrl, location.href).href;\n  const response = await fetch(fetchUrl);\n  if (!response.ok) throw new Error(`Proxied fetch failed: ${response.status}`);\n\n  // Restore import.meta.url to the original module URL so any code that\n  // relies on it (e.g. for asset resolution) gets the right value.\n  // Rewrite relative imports to absolute URLs resolved through the callback so\n  // that transitive dependencies also bypass CORS/auth.\n  const content = (await response.text())\n    .replace(/import\\.meta\\.url/g, JSON.stringify(absoluteSrc))\n    .replace(\n      /\\b(from|import)\\s*([\"'])(\\.\\.?\\/[^\"']+)\\2/g,\n      (_, keyword, quote, relativePath) => {\n        const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;\n        const resolvedImportUrl = new URL(\n          resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,\n          location.href,\n        ).href;\n        return `${keyword} ${quote}${resolvedImportUrl}${quote}`;\n      },\n    );\n  const moduleBlobUrl = URL.createObjectURL(\n    new Blob([content], { type: 'text/javascript' }),\n  );\n  const wrapperContent = [\n    `import*as m from${JSON.stringify(moduleBlobUrl)};`,\n    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,\n    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`,\n  ].join('');\n  const wrapperBlobUrl = URL.createObjectURL(\n    new Blob([wrapperContent], { type: 'text/javascript' }),\n  );\n  const scriptEl = document.createElement('script');\n  scriptEl.type = 'module';\n  scriptEl.src = wrapperBlobUrl;\n  try {\n    await new Promise<void>((resolve, reject) => {\n      scriptEl.onload = () => resolve();\n      scriptEl.onerror = () =>\n        reject(new Error(`Failed to load module for ${absoluteSrc}`));\n      document.head.appendChild(scriptEl);\n    });\n  } finally {\n    scriptEl.remove();\n    URL.revokeObjectURL(moduleBlobUrl);\n    URL.revokeObjectURL(wrapperBlobUrl);\n  }\n  const registry = (\n    globalThis as unknown as { __rc_module_registry__?: Record<string, T> }\n  ).__rc_module_registry__;\n  const mod = registry?.[absoluteSrc] ?? ({} as T);\n  if (registry) delete registry[absoluteSrc];\n  return mod;\n}\n\nasync function importDirectly<T>(absoluteSrc: string): Promise<T> {\n  try {\n    return (await import(\n      /* @vite-ignore */\n      /* webpackIgnore: true */ absoluteSrc\n    )) as T;\n  } catch (importError) {\n    if (!absoluteSrc.startsWith('blob:')) {\n      warnCrossOriginFetchError('StaticLoader', absoluteSrc);\n    }\n    throw importError;\n  }\n}\n\nfunction resolveScriptSrc(script: HTMLScriptElement, url: URL): string {\n  const rawSrc =\n    typeof script.getAttribute === 'function'\n      ? (script.getAttribute('src') ?? script.src)\n      : script.src;\n  if (!rawSrc && script.textContent) {\n    return URL.createObjectURL(\n      new Blob(\n        [script.textContent.replace(/import\\.meta\\.url/g, JSON.stringify(url))],\n        { type: 'text/javascript' },\n      ),\n    );\n  }\n  return rawSrc;\n}\n\nexport async function loadStaticRemoteComponent(\n  scripts: HTMLScriptElement[],\n  url: URL,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & MountUnmountFunctions;\n  if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n    self.__remote_script_entrypoint_mount__[url.href] = new Set();\n  }\n  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n    self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n  }\n  const mountUnmountSets = await Promise.all(\n    scripts.map(async (script) => {\n      try {\n        const src = resolveScriptSrc(script, url);\n        const absoluteSrc = new URL(src, url).href;\n        const mod: ScriptMod = resolveClientUrl\n          ? await importViaCallback<ScriptMod>(absoluteSrc, resolveClientUrl)\n          : await importDirectly<ScriptMod>(absoluteSrc);\n        // revoke the object URL if we created one for inline script content\n        if (src.startsWith('blob:')) {\n          URL.revokeObjectURL(src);\n        }\n        if (\n          typeof mod.mount === 'function' ||\n          typeof mod.default?.mount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_mount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_mount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_mount__[url.href]) {\n            self.__remote_script_entrypoint_mount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_mount__[url.href]?.add(\n            mod.mount ||\n              mod.default?.mount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        if (\n          typeof mod.unmount === 'function' ||\n          typeof mod.default?.unmount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_unmount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_unmount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n            self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_unmount__[url.href]?.add(\n            mod.unmount ||\n              mod.default?.unmount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        return {\n          mount: mod.mount || mod.default?.mount,\n          unmount: mod.unmount || mod.default?.unmount,\n        };\n      } catch (e) {\n        logError(\n          'StaticLoader',\n          `Error loading remote component script from \"${script.src || url.href}\".`,\n          e,\n        );\n        return {\n          mount: undefined,\n          unmount: undefined,\n        };\n      }\n    }),\n  );\n  return mountUnmountSets.reduce(\n    (acc, { mount, unmount }) => {\n      if (typeof mount === 'function') {\n        acc.mount.add(mount);\n      }\n      if (typeof unmount === 'function') {\n        acc.unmount.add(unmount);\n      }\n      return acc;\n    },\n    {\n      mount: new Set<MountOrUnmountFunction>(),\n      unmount: new Set<MountOrUnmountFunction>(),\n    },\n  );\n}\n","import type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { logError } from '#internal/utils/logger';\n\nif (typeof HTMLElement !== 'undefined') {\n  class RemoteComponent extends HTMLElement {\n    name?: string;\n    root?: ShadowRoot | null = null;\n    unmount?: Set<MountOrUnmountFunction> | null = null;\n\n    constructor() {\n      super();\n\n      const html = this.innerHTML;\n      this.root = this.attachShadow({\n        mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n      });\n      this.root.innerHTML = html;\n      // Clear light DOM — content was copied into the shadow root above.\n      // Without this the original children render twice (once in light DOM,\n      // once in shadow DOM).\n      this.replaceChildren();\n\n      // run the mount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        const { loadStaticRemoteComponent } = await import(\n          '../../runtime/loaders/static-loader'\n        );\n        loadStaticRemoteComponent(\n          Array.from(this.root?.querySelectorAll('script') ?? []),\n          new URL(location.href),\n        )\n          .then(({ mount, unmount }) => {\n            this.unmount = unmount;\n            return Promise.all(\n              Array.from(mount).map((mountFn) => mountFn(this.root)),\n            );\n          })\n          .catch((e) => {\n            logError('HtmlRemote', 'Error mounting remote component.', e);\n          });\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error mounting remote component.', e);\n      });\n    }\n\n    disconnectedCallback() {\n      // run the unmount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        if (this.unmount) {\n          await Promise.all(\n            Array.from(this.unmount).map(async (unmount) => {\n              try {\n                await unmount(this.root);\n              } catch (e) {\n                logError('HtmlRemote', 'Error unmounting remote component.', e);\n              }\n            }),\n          );\n        }\n      })().catch((e) => {\n        logError('HtmlRemote', 'Error unmounting remote component.', e);\n      });\n    }\n  }\n\n  // register the custom element\n  customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["location","loadStaticRemoteComponent"]}

package/dist/{shared/remote/proxy.cjs → remote/middleware.cjs}

@@ -16,14 +16,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var proxy_exports = {};
-__export(proxy_exports, {
-  getCorsHeaders: () => getCorsHeaders,
-  getHeader: () => getHeader,
-  getSecurityHeaders: () => getSecurityHeaders,
-  handleCorsPreflightRequest: () => handleCorsPreflightRequest
+
+// src/remote/middleware/index.ts
+var middleware_exports = {};
+__export(middleware_exports, {
+  withExposeRemoteComponents: () => withExposeRemoteComponents
 });
-module.exports = __toCommonJS(proxy_exports);
+module.exports = __toCommonJS(middleware_exports);
+var import_server = require("next/server");
+
+// src/remote/middleware/headers.ts
 function getHeader(headers, name) {
   if (headers instanceof Headers) {
     return headers.get(name) ?? void 0;
@@ -69,11 +71,34 @@ function handleCorsPreflightRequest(method, headers, options) {
     headers: { ...corsHeaders, ...getSecurityHeaders() }
   });
 }
+
+// src/remote/middleware/index.ts
+function withExposeRemoteComponents(proxy, options) {
+  return async (request) => {
+    const preflightResponse = handleCorsPreflightRequest(
+      request.method,
+      request.headers,
+      options?.cors
+    );
+    if (preflightResponse) {
+      return preflightResponse;
+    }
+    const response = typeof proxy === "function" ? await proxy(request) : import_server.NextResponse.next();
+    if (options?.cors !== false) {
+      const corsHeaders = getCorsHeaders(options?.cors, request.headers);
+      Object.entries(corsHeaders).forEach(
+        ([k, v]) => response.headers.set(k, v)
+      );
+    }
+    const securityHeaders = getSecurityHeaders();
+    Object.entries(securityHeaders).forEach(
+      ([k, v]) => response.headers.set(k, v)
+    );
+    return response;
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getCorsHeaders,
-  getHeader,
-  getSecurityHeaders,
-  handleCorsPreflightRequest
+  withExposeRemoteComponents
 });
-//# sourceMappingURL=proxy.cjs.map
+//# sourceMappingURL=middleware.cjs.map

package/dist/remote/middleware.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/remote/middleware/index.ts","../../src/remote/middleware/headers.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\nimport {\n  getCorsHeaders,\n  getSecurityHeaders,\n  handleCorsPreflightRequest,\n  type RemoteComponentProxyOptions,\n} from './headers';\n\n/**\n * This proxy is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js proxy handler function to add CORS headers and handle preflight requests.\n *\n * @param proxy - The Next.js proxy handler function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js proxy handler function that handles CORS and preflight requests\n */\nexport function withExposeRemoteComponents(\n  proxy?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentProxyOptions,\n) {\n  return async (request: NextRequest) => {\n    // Check if this is a CORS preflight request\n    const preflightResponse = handleCorsPreflightRequest(\n      request.method,\n      request.headers,\n      options?.cors,\n    );\n\n    if (preflightResponse) {\n      return preflightResponse;\n    }\n\n    // For all other requests, continue and attach CORS headers\n    const response =\n      typeof proxy === 'function' ? await proxy(request) : NextResponse.next();\n\n    if (options?.cors !== false) {\n      const corsHeaders = getCorsHeaders(options?.cors, request.headers);\n      Object.entries(corsHeaders).forEach(([k, v]) =>\n        response.headers.set(k, v),\n      );\n    }\n\n    const securityHeaders = getSecurityHeaders();\n    Object.entries(securityHeaders).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\nexport type { RemoteComponentProxyOptions } from './headers';\n","/**\n * Proxy utilities for remote applications that expose components to hosts.\n */\n\nimport type { IncomingHttpHeaders } from 'node:http';\n\nexport interface RemoteComponentProxyOptions {\n  cors?:\n    | {\n        origin?: string | string[];\n        method?: string | string[];\n        headers?: string | string[];\n        credentials?: boolean;\n        maxAge?: string;\n      }\n    | false;\n}\n\n/**\n * Gets a header value from either a Headers object or a plain object.\n */\nexport function getHeader(\n  headers: Record<string, string> | Headers | IncomingHttpHeaders,\n  name: string,\n): string | undefined {\n  if (headers instanceof Headers) {\n    return headers.get(name) ?? undefined;\n  }\n  const value = headers[name];\n  // IncomingHttpHeaders can have string | string[] | undefined\n  return Array.isArray(value) ? value[0] : value;\n}\n\n/**\n * Computes CORS headers based on the provided options and request headers.\n *\n * @param options - CORS configuration options\n * @param requestHeaders - Headers from the incoming request (can be a Headers object or a plain object)\n * @returns Object containing CORS headers to be added to the response\n */\nexport function getCorsHeaders(\n  options: RemoteComponentProxyOptions['cors'],\n  requestHeaders: Record<string, string> | Headers | IncomingHttpHeaders,\n): Record<string, string> {\n  if (options === false) {\n    return {};\n  }\n\n  const originHeader = getHeader(requestHeaders, 'origin');\n  const refererHeader = getHeader(requestHeaders, 'referer');\n  const origin =\n    originHeader ?? (refererHeader ? new URL(refererHeader).origin : '*');\n\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((allowedOrigin) => allowedOrigin.trim());\n\n  const isAllowed =\n    ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n  const allowedHeaders =\n    process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n    (Array.isArray(options?.headers)\n      ? options.headers.map((h) => h.trim()).join(',')\n      : options?.headers) ||\n    getHeader(requestHeaders, 'access-control-request-headers');\n\n  const CORS_HEADERS = (\n    isAllowed\n      ? {\n          'Access-Control-Allow-Origin': origin,\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          ...(allowedHeaders\n            ? { 'Access-Control-Allow-Headers': allowedHeaders }\n            : {}),\n          ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS ||\n          options?.credentials\n            ? {\n                'Access-Control-Allow-Credentials':\n                  process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n              }\n            : {}),\n          'Access-Control-Max-Age': options?.maxAge || '600',\n          Vary: 'Origin',\n        }\n      : {}\n  ) as Record<string, string>;\n\n  return CORS_HEADERS;\n}\n\n/**\n * Returns security headers that prevent the remote component pages from being\n * embedded in frames. Remote components are fetched via HTTP and rendered\n * directly into the host's DOM — they should never be loaded in an iframe.\n */\nexport function getSecurityHeaders(): Record<string, string> {\n  return {\n    'Content-Security-Policy': \"frame-ancestors 'none'\",\n    'X-Frame-Options': 'DENY',\n  };\n}\n\n/**\n * Handles CORS preflight OPTIONS requests.\n *\n * @param method - The HTTP method of the incoming request\n * @param headers - Headers from the incoming request (can be a Headers object or a plain object)\n * @param options - CORS configuration options\n * @returns Response object for the preflight request, or null if not a preflight\n */\nexport function handleCorsPreflightRequest(\n  method: string,\n  headers: Record<string, string> | Headers | IncomingHttpHeaders,\n  options?: RemoteComponentProxyOptions['cors'],\n): Response | null {\n  if (method !== 'OPTIONS' || options === false) {\n    return null;\n  }\n\n  const corsHeaders = getCorsHeaders(options, headers);\n\n  return new Response(undefined, {\n    status: 200,\n    headers: { ...corsHeaders, ...getSecurityHeaders() },\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/remote/middleware.d.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Proxy utilities for remote applications that expose components to hosts.
+ */
+
+interface RemoteComponentProxyOptions {
+    cors?: {
+        origin?: string | string[];
+        method?: string | string[];
+        headers?: string | string[];
+        credentials?: boolean;
+        maxAge?: string;
+    } | false;
+}
+
+/**
+ * This proxy is used to handle CORS and other remote component related tasks.
+ * It can be used to wrap a Next.js proxy handler function to add CORS headers and handle preflight requests.
+ *
+ * @param proxy - The Next.js proxy handler function to wrap.
+ * @param options - Optional configuration for handling remote components.
+ * @returns A Next.js proxy handler function that handles CORS and preflight requests
+ */
+declare function withExposeRemoteComponents(proxy?: (request: NextRequest) => NextResponse | Promise<NextResponse>, options?: RemoteComponentProxyOptions): (request: NextRequest) => Promise<Response>;
+
+export { RemoteComponentProxyOptions, withExposeRemoteComponents };

package/dist/{shared/remote/proxy.js → remote/middleware.js}

@@ -1,3 +1,7 @@
+// src/remote/middleware/index.ts
+import { NextResponse } from "next/server";
+
+// src/remote/middleware/headers.ts
 function getHeader(headers, name) {
   if (headers instanceof Headers) {
     return headers.get(name) ?? void 0;
@@ -43,10 +47,33 @@ function handleCorsPreflightRequest(method, headers, options) {
     headers: { ...corsHeaders, ...getSecurityHeaders() }
   });
 }
+
+// src/remote/middleware/index.ts
+function withExposeRemoteComponents(proxy, options) {
+  return async (request) => {
+    const preflightResponse = handleCorsPreflightRequest(
+      request.method,
+      request.headers,
+      options?.cors
+    );
+    if (preflightResponse) {
+      return preflightResponse;
+    }
+    const response = typeof proxy === "function" ? await proxy(request) : NextResponse.next();
+    if (options?.cors !== false) {
+      const corsHeaders = getCorsHeaders(options?.cors, request.headers);
+      Object.entries(corsHeaders).forEach(
+        ([k, v]) => response.headers.set(k, v)
+      );
+    }
+    const securityHeaders = getSecurityHeaders();
+    Object.entries(securityHeaders).forEach(
+      ([k, v]) => response.headers.set(k, v)
+    );
+    return response;
+  };
+}
 export {
-  getCorsHeaders,
-  getHeader,
-  getSecurityHeaders,
-  handleCorsPreflightRequest
+  withExposeRemoteComponents
 };
-//# sourceMappingURL=proxy.js.map
+//# sourceMappingURL=middleware.js.map

package/dist/remote/middleware.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/remote/middleware/index.ts","../../src/remote/middleware/headers.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\nimport {\n  getCorsHeaders,\n  getSecurityHeaders,\n  handleCorsPreflightRequest,\n  type RemoteComponentProxyOptions,\n} from './headers';\n\n/**\n * This proxy is used to handle CORS and other remote component related tasks.\n * It can be used to wrap a Next.js proxy handler function to add CORS headers and handle preflight requests.\n *\n * @param proxy - The Next.js proxy handler function to wrap.\n * @param options - Optional configuration for handling remote components.\n * @returns A Next.js proxy handler function that handles CORS and preflight requests\n */\nexport function withExposeRemoteComponents(\n  proxy?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: RemoteComponentProxyOptions,\n) {\n  return async (request: NextRequest) => {\n    // Check if this is a CORS preflight request\n    const preflightResponse = handleCorsPreflightRequest(\n      request.method,\n      request.headers,\n      options?.cors,\n    );\n\n    if (preflightResponse) {\n      return preflightResponse;\n    }\n\n    // For all other requests, continue and attach CORS headers\n    const response =\n      typeof proxy === 'function' ? await proxy(request) : NextResponse.next();\n\n    if (options?.cors !== false) {\n      const corsHeaders = getCorsHeaders(options?.cors, request.headers);\n      Object.entries(corsHeaders).forEach(([k, v]) =>\n        response.headers.set(k, v),\n      );\n    }\n\n    const securityHeaders = getSecurityHeaders();\n    Object.entries(securityHeaders).forEach(([k, v]) =>\n      response.headers.set(k, v),\n    );\n\n    return response;\n  };\n}\n\nexport type { RemoteComponentProxyOptions } from './headers';\n","/**\n * Proxy utilities for remote applications that expose components to hosts.\n */\n\nimport type { IncomingHttpHeaders } from 'node:http';\n\nexport interface RemoteComponentProxyOptions {\n  cors?:\n    | {\n        origin?: string | string[];\n        method?: string | string[];\n        headers?: string | string[];\n        credentials?: boolean;\n        maxAge?: string;\n      }\n    | false;\n}\n\n/**\n * Gets a header value from either a Headers object or a plain object.\n */\nexport function getHeader(\n  headers: Record<string, string> | Headers | IncomingHttpHeaders,\n  name: string,\n): string | undefined {\n  if (headers instanceof Headers) {\n    return headers.get(name) ?? undefined;\n  }\n  const value = headers[name];\n  // IncomingHttpHeaders can have string | string[] | undefined\n  return Array.isArray(value) ? value[0] : value;\n}\n\n/**\n * Computes CORS headers based on the provided options and request headers.\n *\n * @param options - CORS configuration options\n * @param requestHeaders - Headers from the incoming request (can be a Headers object or a plain object)\n * @returns Object containing CORS headers to be added to the response\n */\nexport function getCorsHeaders(\n  options: RemoteComponentProxyOptions['cors'],\n  requestHeaders: Record<string, string> | Headers | IncomingHttpHeaders,\n): Record<string, string> {\n  if (options === false) {\n    return {};\n  }\n\n  const originHeader = getHeader(requestHeaders, 'origin');\n  const refererHeader = getHeader(requestHeaders, 'referer');\n  const origin =\n    originHeader ?? (refererHeader ? new URL(refererHeader).origin : '*');\n\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((allowedOrigin) => allowedOrigin.trim());\n\n  const isAllowed =\n    ALLOWED_ORIGINS.includes('*') || ALLOWED_ORIGINS.includes(origin);\n\n  const allowedHeaders =\n    process.env.REMOTE_COMPONENTS_ALLOW_HEADERS ||\n    (Array.isArray(options?.headers)\n      ? options.headers.map((h) => h.trim()).join(',')\n      : options?.headers) ||\n    getHeader(requestHeaders, 'access-control-request-headers');\n\n  const CORS_HEADERS = (\n    isAllowed\n      ? {\n          'Access-Control-Allow-Origin': origin,\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          ...(allowedHeaders\n            ? { 'Access-Control-Allow-Headers': allowedHeaders }\n            : {}),\n          ...(process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS ||\n          options?.credentials\n            ? {\n                'Access-Control-Allow-Credentials':\n                  process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || 'true',\n              }\n            : {}),\n          'Access-Control-Max-Age': options?.maxAge || '600',\n          Vary: 'Origin',\n        }\n      : {}\n  ) as Record<string, string>;\n\n  return CORS_HEADERS;\n}\n\n/**\n * Returns security headers that prevent the remote component pages from being\n * embedded in frames. Remote components are fetched via HTTP and rendered\n * directly into the host's DOM — they should never be loaded in an iframe.\n */\nexport function getSecurityHeaders(): Record<string, string> {\n  return {\n    'Content-Security-Policy': \"frame-ancestors 'none'\",\n    'X-Frame-Options': 'DENY',\n  };\n}\n\n/**\n * Handles CORS preflight OPTIONS requests.\n *\n * @param method - The HTTP method of the incoming request\n * @param headers - Headers from the incoming request (can be a Headers object or a plain object)\n * @param options - CORS configuration options\n * @returns Response object for the preflight request, or null if not a preflight\n */\nexport function handleCorsPreflightRequest(\n  method: string,\n  headers: Record<string, string> | Headers | IncomingHttpHeaders,\n  options?: RemoteComponentProxyOptions['cors'],\n): Response | null {\n  if (method !== 'OPTIONS' || options === false) {\n    return null;\n  }\n\n  const corsHeaders = getCorsHeaders(options, headers);\n\n  return new Response(undefined, {\n    status: 200,\n    headers: { ...corsHeaders, ...getSecurityHeaders() },\n  });\n}\n"],"mappings":";AAAA,SAA2B,oBAAoB;;;ACqBxC,SAAS,UACd,SACA,MACoB;AACpB,MAAI,mBAAmB,SAAS;AAC9B,WAAO,QAAQ,IAAI,IAAI,KAAK;AAAA,EAC9B;AACA,QAAM,QAAQ,QAAQ,IAAI;AAE1B,SAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AAC3C;AASO,SAAS,eACd,SACA,gBACwB;AACxB,MAAI,YAAY,OAAO;AACrB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,eAAe,UAAU,gBAAgB,QAAQ;AACvD,QAAM,gBAAgB,UAAU,gBAAgB,SAAS;AACzD,QAAM,SACJ,iBAAiB,gBAAgB,IAAI,IAAI,aAAa,EAAE,SAAS;AAEnE,QAAM,mBACJ,QAAQ,IAAI,sCACX,MAAM,QAAQ,SAAS,MAAM,IAC1B,QAAQ,OAAO,KAAK,GAAG,IACvB,SAAS,WACb,KAEC,MAAM,GAAG,EACT,IAAI,CAAC,kBAAkB,cAAc,KAAK,CAAC;AAE9C,QAAM,YACJ,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,MAAM;AAElE,QAAM,iBACJ,QAAQ,IAAI,oCACX,MAAM,QAAQ,SAAS,OAAO,IAC3B,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAC7C,SAAS,YACb,UAAU,gBAAgB,gCAAgC;AAE5D,QAAM,eACJ,YACI;AAAA,IACE,+BAA+B;AAAA,IAC/B,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,GAAI,iBACA,EAAE,gCAAgC,eAAe,IACjD,CAAC;AAAA,IACL,GAAI,QAAQ,IAAI,uCAChB,SAAS,cACL;AAAA,MACE,oCACE,QAAQ,IAAI,uCAAuC;AAAA,IACvD,IACA,CAAC;AAAA,IACL,0BAA0B,SAAS,UAAU;AAAA,IAC7C,MAAM;AAAA,EACR,IACA,CAAC;AAGP,SAAO;AACT;AAOO,SAAS,qBAA6C;AAC3D,SAAO;AAAA,IACL,2BAA2B;AAAA,IAC3B,mBAAmB;AAAA,EACrB;AACF;AAUO,SAAS,2BACd,QACA,SACA,SACiB;AACjB,MAAI,WAAW,aAAa,YAAY,OAAO;AAC7C,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,SAAO,IAAI,SAAS,QAAW;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS,EAAE,GAAG,aAAa,GAAG,mBAAmB,EAAE;AAAA,EACrD,CAAC;AACH;;;ADzHO,SAAS,2BACd,OACA,SACA;AACA,SAAO,OAAO,YAAyB;AAErC,UAAM,oBAAoB;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAEA,QAAI,mBAAmB;AACrB,aAAO;AAAA,IACT;AAGA,UAAM,WACJ,OAAO,UAAU,aAAa,MAAM,MAAM,OAAO,IAAI,aAAa,KAAK;AAEzE,QAAI,SAAS,SAAS,OAAO;AAC3B,YAAM,cAAc,eAAe,SAAS,MAAM,QAAQ,OAAO;AACjE,aAAO,QAAQ,WAAW,EAAE;AAAA,QAAQ,CAAC,CAAC,GAAG,CAAC,MACxC,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,MAC3B;AAAA,IACF;AAEA,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO,QAAQ,eAAe,EAAE;AAAA,MAAQ,CAAC,CAAC,GAAG,CAAC,MAC5C,SAAS,QAAQ,IAAI,GAAG,CAAC;AAAA,IAC3B;AAEA,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/{internal/next/remote/render-server.cjs → remote/nextjs/app.cjs}

@@ -26,16 +26,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var render_server_exports = {};
-__export(render_server_exports, {
-  RemoteComponent: () => RemoteComponent
+var app_exports = {};
+__export(app_exports, {
+  ExposeRemoteComponent: () => ExposeRemoteComponent
 });
-module.exports = __toCommonJS(render_server_exports);
+module.exports = __toCommonJS(app_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_wrapper = require("remote-components/remote/defaults/wrapper");
 var import_work_async_storage = require("next/dist/server/app-render/work-async-storage.external");
 var import_react = require("react");
-var import_render_client = require("#internal/next/remote/render-client");
-var import_error = require("#internal/shared/error");
+var import_app_client = require("#internal/remote/nextjs/app-client");
+var import_error = require("#internal/utils/error");
 const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
@@ -52,13 +53,11 @@ function RemoteComponentData({ name, data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.map(
     (chunk, i) => (
       // make the data handling somewhat safe
-      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(
-        chunk
-      )});`
+      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(chunk)});`
     )
   ).join("\n") });
 }
-async function RemoteComponent({
+async function ExposeRemoteComponent({
   name = "__vercel_remote_component",
   children
 }) {
@@ -73,10 +72,9 @@ async function RemoteComponent({
   self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
   self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};
   self.__RSC_SERVER_MANIFEST[page] = self.__RSC_SERVER_MANIFEST[page] || manifest;
-  let clientModules = manifest?.clientModules ?? {};
   const ssrModuleMapping = { ...manifest?.ssrModuleMapping };
-  clientModules = Object.fromEntries(
-    Object.entries(clientModules).map(([key, value]) => {
+  const clientModules = Object.fromEntries(
+    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {
       const remoteId = `[${PROJECT_ID}] ${value.id}`;
       ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];
       return [
@@ -141,7 +139,7 @@ async function RemoteComponent({
         "data-type": "nextjs",
         id: `${remoteComponentName}_ssr`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_render_client.RemoteComponentSharedRemote, { name: remoteComponentName }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_client.RemoteComponentSharedRemote, { name: remoteComponentName }),
           typeof error !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "template",
@@ -160,6 +158,6 @@ async function RemoteComponent({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent
+  ExposeRemoteComponent
 });
-//# sourceMappingURL=render-server.cjs.map
+//# sourceMappingURL=app.cjs.map

package/dist/remote/nextjs/app.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\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);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_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            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent 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 `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\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 *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\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  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\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  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.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        },\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  ] = 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        ]\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        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\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      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\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/{internal/next/remote/render-server.d.ts → remote/nextjs/app.d.ts}

@@ -1,23 +1,22 @@
-import { a as HostLifecycleCallbacks } from '../../../host-config-58cdccea.js';
-import '../../shared/client/proxy-through-host.js';
-import '../../../types-2b26a246.js';
-import 'parse5/dist/tree-adapters/default';
+import { ConsumeLifecycleCallbacks } from '../../internal/host/shared/config.js';
+import '../../internal/runtime/url/resolve-client-url.js';
+import '../../internal/host/shared/fetch-interceptors.js';
 
 /**
  * Props for exposing a Next.js component as a remote component.
  *
- * Extends {@link HostLifecycleCallbacks} so the host can wire up lifecycle
+ * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle
  * events. The `children` prop is the component content to expose (required,
  * unlike host props where children are an optional loading fallback).
  */
-interface RemoteComponentProps extends HostLifecycleCallbacks {
+interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {
     /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */
     name?: string;
     /** The content of the remote component. This is the content that will be rendered as the remote component. */
     children: React.ReactNode;
 }
 /**
- * RemoteComponent is a Next.js component that exposes a remote component
+ * ExposeRemoteComponent is a Next.js component that exposes a remote component
  * that can be used in a host application.
  *
  * @param name - The name of the remote component. Use a unique name to expose multiple remote components from the same page.
@@ -26,21 +25,21 @@ interface RemoteComponentProps extends HostLifecycleCallbacks {
  *
  * @example
  *
- * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component:
+ * Use the `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:
  *
  * ```tsx
- * import { RemoteComponent } from 'remote-components/next';
+ * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';
  *
  * export default function MyPage() {
  *   return (
- *     <RemoteComponent>
+ *     <ExposeRemoteComponent>
  *       <h1>Hello from the remote component!</h1>
  *       <p>This is a remote component that can be used in a host application.</p>
- *     </RemoteComponent>
+ *     </ExposeRemoteComponent>
  *   );
  * }
  * ```
  */
-declare function RemoteComponent({ name, children, }: RemoteComponentProps): Promise<React.ReactElement>;
+declare function ExposeRemoteComponent({ name, children, }: ExposeRemoteComponentProps): Promise<React.ReactElement>;
 
-export { RemoteComponent, RemoteComponentProps };
+export { ExposeRemoteComponent, ExposeRemoteComponentProps };

package/dist/{internal/next/remote/render-server.js → remote/nextjs/app.js}

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "remote-components/remote/defaults/wrapper";
 import { workAsyncStorage } from "next/dist/server/app-render/work-async-storage.external";
 import { Suspense } from "react";
-import { RemoteComponentSharedRemote } from "#internal/next/remote/render-client";
-import { RemoteComponentsError } from "#internal/shared/error";
+import { RemoteComponentSharedRemote } from "#internal/remote/nextjs/app-client";
+import { RemoteComponentsError } from "#internal/utils/error";
 const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
   "next.server.action-manifests"
 );
@@ -19,13 +20,11 @@ function RemoteComponentData({ name, data }) {
   return /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.map(
     (chunk, i) => (
       // make the data handling somewhat safe
-      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(
-        chunk
-      )});`
+      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(chunk)});`
     )
   ).join("\n") });
 }
-async function RemoteComponent({
+async function ExposeRemoteComponent({
   name = "__vercel_remote_component",
   children
 }) {
@@ -40,10 +39,9 @@ async function RemoteComponent({
   self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
   self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};
   self.__RSC_SERVER_MANIFEST[page] = self.__RSC_SERVER_MANIFEST[page] || manifest;
-  let clientModules = manifest?.clientModules ?? {};
   const ssrModuleMapping = { ...manifest?.ssrModuleMapping };
-  clientModules = Object.fromEntries(
-    Object.entries(clientModules).map(([key, value]) => {
+  const clientModules = Object.fromEntries(
+    Object.entries(manifest?.clientModules ?? {}).map(([key, value]) => {
       const remoteId = `[${PROJECT_ID}] ${value.id}`;
       ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];
       return [
@@ -126,6 +124,6 @@ async function RemoteComponent({
   );
 }
 export {
-  RemoteComponent
+  ExposeRemoteComponent
 };
-//# sourceMappingURL=render-server.js.map
+//# sourceMappingURL=app.js.map

package/dist/remote/nextjs/app.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/remote/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport { Suspense } from 'react';\nimport type { ConsumeLifecycleCallbacks } from '#internal/host/shared/config';\nimport { RemoteComponentSharedRemote } from '#internal/remote/nextjs/app-client';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\ninterface Manifest {\n  clientModules?: Record<\n    string,\n    { id: string; name: string; chunks: string[]; async: boolean }\n  >;\n  moduleLoading: { prefix?: string; crossOrigin?: boolean | null };\n  ssrModuleMapping?: Record<string, unknown>;\n}\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);\nconst MANIFESTS_SINGLETON = Symbol.for('next.server.manifests');\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_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            `${\n              i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''\n            }self[\"${name}\"].push(${JSON.stringify(chunk)});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n/**\n * Props for exposing a Next.js component as a remote component.\n *\n * Extends {@link ConsumeLifecycleCallbacks} so the consuming host can wire up lifecycle\n * events. The `children` prop is the component content to expose (required,\n * unlike host props where children are an optional loading fallback).\n */\nexport interface ExposeRemoteComponentProps extends ConsumeLifecycleCallbacks {\n  /** The name of the remote component. Use a unique name to expose multiple remote components from the same page. */\n  name?: string;\n  /** The content of the remote component. This is the content that will be rendered as the remote component. */\n  children: React.ReactNode;\n}\n\n/**\n * ExposeRemoteComponent 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 `<ExposeRemoteComponent>` in your Next.js App Router application to expose the children as a remote component:\n *\n * ```tsx\n * import { ExposeRemoteComponent } from 'remote-components/remote/nextjs/app';\n *\n * export default function MyPage() {\n *   return (\n *     <ExposeRemoteComponent>\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 *     </ExposeRemoteComponent>\n *   );\n * }\n * ```\n */\nexport async function ExposeRemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: ExposeRemoteComponentProps): Promise<React.ReactElement> {\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? {\n    page: '/',\n    route: '/',\n  };\n\n  // get reference to the manifests from the global scope\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    [MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerRoute?: Map<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n    __RSC_SERVER_MANIFEST?: Record<string, unknown>;\n  };\n  const manifests =\n    self[MANIFESTS_SINGLETON] ?? self[SERVER_ACTION_MANIFESTS_SINGLETON] ?? {};\n  const manifest =\n    'clientReferenceManifestsPerRoute' in manifests\n      ? manifests.clientReferenceManifestsPerRoute?.get?.(route)\n      : 'clientReferenceManifestsPerPage' in manifests\n        ? manifests.clientReferenceManifestsPerPage?.[route]\n        : undefined;\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  self.__RSC_SERVER_MANIFEST = self.__RSC_SERVER_MANIFEST || {};\n  self.__RSC_SERVER_MANIFEST[page] =\n    self.__RSC_SERVER_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\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  const clientModules = Object.fromEntries(\n    Object.entries(manifest?.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        },\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  ] = 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        ]\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        ],\n  );\n  const renderToReadableStream =\n    nextRenderToReadableStream ?? legacyRenderToReadableStream;\n\n  if (typeof renderToReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'No valid `renderToReadableStream()` function found. Do you have Next.js installed?',\n    );\n  }\n\n  let error: Error | undefined;\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules, {\n    onError(e) {\n      error = e;\n    },\n  });\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      data-type=\"nextjs\"\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSharedRemote name={remoteComponentName} />\n      {typeof error !== 'undefined' ? (\n        <>\n          <template\n            data-next-error-message={\n              error instanceof Error ? error.message : String(error)\n            }\n            data-next-error-stack={\n              error instanceof Error ? (error.stack ?? '') : ''\n            }\n          />\n          <Suspense fallback={null}>{children}</Suspense>\n        </>\n      ) : (\n        children\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/pages-router.cjs → remote/nextjs/pages.cjs}

@@ -16,14 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var pages_router_exports = {};
-__export(pages_router_exports, {
-  getRemoteComponentMetadata: () => getRemoteComponentMetadata
+var pages_exports = {};
+__export(pages_exports, {
+  getExposeRemoteComponentProps: () => getExposeRemoteComponentProps
 });
-module.exports = __toCommonJS(pages_router_exports);
-var import_pages = require("remote-components/shared/remote/pages");
+module.exports = __toCommonJS(pages_exports);
+var import_pages = require("#remote-components/remote/defaults/pages");
 const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
-function getRemoteComponentMetadata() {
+function getExposeRemoteComponentProps() {
   return {
     __REMOTE_COMPONENT__: {
       bundle: PROJECT_ID,
@@ -34,6 +34,6 @@ function getRemoteComponentMetadata() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getRemoteComponentMetadata
+  getExposeRemoteComponentProps
 });
-//# sourceMappingURL=pages-router.cjs.map
+//# sourceMappingURL=pages.cjs.map

package/dist/remote/nextjs/pages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEvB,MAAM,aACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AA0CP,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/{next/remote/pages-router.d.ts → remote/nextjs/pages.d.ts}

@@ -1,4 +1,4 @@
-interface RemoteComponentMetadata {
+interface ExposeRemoteComponentProps {
     __REMOTE_COMPONENT__: {
         bundle: string | undefined;
         runtime: 'turbopack' | 'webpack';
@@ -19,9 +19,9 @@ interface RemoteComponentMetadata {
  *
  * ```
  * import {
- *   getRemoteComponentMetadata,
- *   type RemoteComponentMetadata,
- * } from 'remote-components/next/pages';
+ *   getExposeRemoteComponentProps,
+ *   type ExposeRemoteComponentProps,
+ * } from 'remote-components/remote/nextjs/pages';
  * import App from 'next/app';
  * import type { AppContext, AppInitialProps, AppProps } from 'next/app';
  *
@@ -31,12 +31,12 @@ interface RemoteComponentMetadata {
  *
  * MyApp.getInitialProps = async (
  *   context: AppContext,
- * ): Promise<RemoteComponentMetadata & AppInitialProps> => {
+ * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {
  *   const ctx = await App.getInitialProps(context);
- *   return { ...ctx, ...getRemoteComponentMetadata() };
+ *   return { ...ctx, ...getExposeRemoteComponentProps() };
  * };
  * ```
  */
-declare function getRemoteComponentMetadata(): RemoteComponentMetadata;
+declare function getExposeRemoteComponentProps(): ExposeRemoteComponentProps;
 
-export { RemoteComponentMetadata, getRemoteComponentMetadata };
+export { ExposeRemoteComponentProps, getExposeRemoteComponentProps };

package/dist/{next/remote/pages-router.js → remote/nextjs/pages.js}

@@ -1,6 +1,6 @@
-import { shared } from "remote-components/shared/remote/pages";
+import { shared } from "#remote-components/remote/defaults/pages";
 const PROJECT_ID = process.env.REMOTE_COMPONENTS_PROJECT_ID || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || process.env.VERCEL_PROJECT_ID;
-function getRemoteComponentMetadata() {
+function getExposeRemoteComponentProps() {
   return {
     __REMOTE_COMPONENT__: {
       bundle: PROJECT_ID,
@@ -10,6 +10,6 @@ function getRemoteComponentMetadata() {
   };
 }
 export {
-  getRemoteComponentMetadata
+  getExposeRemoteComponentProps
 };
-//# sourceMappingURL=pages-router.js.map
+//# sourceMappingURL=pages.js.map

package/dist/remote/nextjs/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/remote/nextjs/pages.ts"],"sourcesContent":["import { shared } from '#remote-components/remote/defaults/pages';\n\nconst PROJECT_ID =\n  process.env.REMOTE_COMPONENTS_PROJECT_ID ||\n  process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION ||\n  process.env.VERCEL_PROJECT_ID;\n\nexport interface ExposeRemoteComponentProps {\n  __REMOTE_COMPONENT__: {\n    bundle: string | undefined;\n    runtime: 'turbopack' | 'webpack';\n    shared?: Record<string, string>;\n  };\n}\n\n/**\n * Returns the metadata for the remote component.\n * This metadata is used to identify the remote component and its bundle.\n *\n * Extend your Next.js Pages Router page props with this metadata to ensure proper remote component loading.\n *\n * @returns The metadata for the remote component.\n *\n * @example\n *\n * Create a custom App component in your Next.js application to include the remote component metadata:\n *\n * ```\n * import {\n *   getExposeRemoteComponentProps,\n *   type ExposeRemoteComponentProps,\n * } from 'remote-components/remote/nextjs/pages';\n * import App from 'next/app';\n * import type { AppContext, AppInitialProps, AppProps } from 'next/app';\n *\n * export default function MyApp({ Component, pageProps }: AppProps) {\n *   return <Component {...pageProps} />;\n * }\n *\n * MyApp.getInitialProps = async (\n *   context: AppContext,\n * ): Promise<ExposeRemoteComponentProps & AppInitialProps> => {\n *   const ctx = await App.getInitialProps(context);\n *   return { ...ctx, ...getExposeRemoteComponentProps() };\n * };\n * ```\n */\nexport function getExposeRemoteComponentProps(): ExposeRemoteComponentProps {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: PROJECT_ID,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n      shared,\n    },\n  };\n}\n"],"mappings":"AAAA,SAAS,cAAc;AAEvB,MAAM,aACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,uCACZ,QAAQ,IAAI;AA0CP,SAAS,gCAA4D;AAC1E,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}