remote-components 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      type={metadata.type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DI;AA/DJ,qBAAO;AACP,mBAAmC;AACnC,wBAA6C;AAC7C,oCAAqC;AAGrC,MAAM,eAAe,QAAQ,IAAI;AAyBjC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,4CAAC,yBAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}

package/dist/host/nextjs/app.d.ts

@@ -0,0 +1,29 @@
+import { ConsumeServerConfig } from '../../internal/host/shared/config.js';
+import '../../internal/runtime/url/resolve-client-url.js';
+import '../../internal/host/shared/fetch-interceptors.js';
+
+/**
+ * Props for the Next.js App Router remote component host (server component).
+ */
+interface ConsumeRemoteComponentProps extends ConsumeServerConfig {
+    /** The source URL of the remote component. Required for server rendering. */
+    src: string | URL;
+    /** Loading fallback content to display while the remote component is being fetched. */
+    children?: React.ReactNode;
+}
+/**
+ * Next.js App Router server component that fetches and renders a remote component.
+ * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).
+ *
+ * @example
+ * ```tsx
+ * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';
+ *
+ * export default function MyPage() {
+ *   return <ConsumeRemoteComponent src="/nextjs-app-remote/components/header" />;
+ * }
+ * ```
+ */
+declare function ConsumeRemoteComponent({ src, name: nameProp, isolate, mode, reset, children, onRequest, onResponse, }: ConsumeRemoteComponentProps): Promise<React.ReactElement>;
+
+export { ConsumeRemoteComponent, ConsumeRemoteComponentProps };

package/dist/{next/host/app-router-server.js → host/nextjs/app.js}

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import "remote-components/remote/defaults/wrapper";
 import { Children, Suspense } from "react";
-import { RemoteComponentClient } from "#internal/next/host/app-router-client";
-import { fetchRemoteComponent } from "#internal/shared/ssr/fetch-remote-component";
+import { ConsumeRemoteComponentClient } from "#internal/host/nextjs/app-client";
+import { fetchRemoteComponent } from "#internal/host/server/fetch-remote-component";
 const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
-async function RemoteComponent({
+async function ConsumeRemoteComponent({
   src,
   name: nameProp,
   isolate,
@@ -31,7 +32,7 @@ async function RemoteComponent({
   });
   const name = metadata.id.replace(/_ssr$/, "");
   const remoteComponentClient = /* @__PURE__ */ jsx(
-    RemoteComponentClient,
+    ConsumeRemoteComponentClient,
     {
       bundle: metadata.bundle || (CURRENT_ZONE ?? name),
       data: hydrationData,
@@ -57,6 +58,6 @@ async function RemoteComponent({
   return remoteComponentClient;
 }
 export {
-  RemoteComponent
+  ConsumeRemoteComponent
 };
-//# sourceMappingURL=app-router-server.js.map
+//# sourceMappingURL=app.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      type={metadata.type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":"AA+DI;AA/DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAGrC,MAAM,eAAe,QAAQ,IAAI;AAyBjC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}

package/dist/{next/host/pages-router-client.cjs → host/nextjs/pages/client-only.cjs}

@@ -26,15 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var pages_router_client_exports = {};
-__export(pages_router_client_exports, {
-  RemoteComponent: () => RemoteComponent
+var pages_client_exports = {};
+__export(pages_client_exports, {
+  ConsumeRemoteComponent: () => ConsumeRemoteComponent
 });
-module.exports = __toCommonJS(pages_router_client_exports);
+module.exports = __toCommonJS(pages_client_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_pages = require("remote-components/shared/host/pages");
-function RemoteComponent({
+var import_pages = require("#remote-components/host/defaults/pages");
+function ConsumeRemoteComponent({
   src,
   children,
   onBeforeLoad,
@@ -117,6 +117,6 @@ function RemoteComponent({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent
+  ConsumeRemoteComponent
 });
-//# sourceMappingURL=pages-router-client.cjs.map
+//# sourceMappingURL=client-only.cjs.map

package/dist/host/nextjs/pages/client-only.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html/host');\n  }, []);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set onRequest/onResponse/resolveClientUrl properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\n    }\n    if (resolveClientUrl !== undefined) {\n      element.resolveClientUrl = resolveClientUrl;\n    }\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [\n    src,\n    onBeforeLoad,\n    onChange,\n    onError,\n    onLoad,\n    onRequest,\n    onResponse,\n    resolveClientUrl,\n  ]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqII;AArIJ,mBAAkC;AAOlC,mBAAuB;AAqChB,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,iBAAa,qBAA+B,IAAI;AAEtD,8BAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,6BAA6B;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,QAAI,WAAW;AACb,cAAQ,YAAY;AAAA,IACtB;AACA,QAAI,YAAY;AACd,cAAQ,aAAa;AAAA,IACvB;AACA,QAAI,qBAAqB,QAAW;AAClC,cAAQ,mBAAmB;AAAA,IAC7B;AAGA,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}

package/dist/host/nextjs/pages/client-only.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ConsumeRemoteComponentConfig } from '../../../internal/host/shared/config.js';
+import '../../../internal/runtime/url/resolve-client-url.js';
+import '../../../internal/host/shared/fetch-interceptors.js';
+
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'remote-component': {
+                src?: string;
+                ref?: React.Ref<HTMLElement>;
+                children: React.ReactNode;
+            };
+        }
+    }
+}
+/**
+ * Props for the Pages Router client-side remote component wrapper.
+ *
+ * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since
+ * the client always needs a source URL to load from.
+ */
+interface ConsumeRemoteComponentProps extends ConsumeRemoteComponentConfig {
+    /** The source URL of the remote component. Required for client-side loading. */
+    src: string;
+    /** Loading fallback content displayed while the remote component is being fetched. */
+    children?: React.ReactNode;
+}
+declare function ConsumeRemoteComponent({ src, children, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse, resolveClientUrl, }: ConsumeRemoteComponentProps): react_jsx_runtime.JSX.Element;
+
+export { ConsumeRemoteComponent, ConsumeRemoteComponentProps };

package/dist/{next/host/pages-router-client.js → host/nextjs/pages/client-only.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { shared } from "remote-components/shared/host/pages";
-function RemoteComponent({
+import { shared } from "#remote-components/host/defaults/pages";
+function ConsumeRemoteComponent({
   src,
   children,
   onBeforeLoad,
@@ -83,6 +83,6 @@ function RemoteComponent({
   return /* @__PURE__ */ jsx("remote-component", { ref: elementRef, src, children });
 }
 export {
-  RemoteComponent
+  ConsumeRemoteComponent
 };
-//# sourceMappingURL=pages-router-client.js.map
+//# sourceMappingURL=client-only.js.map

package/dist/host/nextjs/pages/client-only.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/nextjs/pages-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { shared } from '#remote-components/host/defaults/pages';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        ref?: React.Ref<HTMLElement>;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// Extend HTMLElement to include onRequest/onResponse/resolveClientUrl properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n  resolveClientUrl?: ResolveClientUrl;\n}\n\n/**\n * Props for the Pages Router client-side remote component wrapper.\n *\n * Extends {@link ConsumeRemoteComponentConfig}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for client-side loading. */\n  src: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\nexport function ConsumeRemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: ConsumeRemoteComponentProps) {\n  const elementRef = useRef<RemoteComponentElement>(null);\n\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html/host');\n  }, []);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Set onRequest/onResponse/resolveClientUrl properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\n    }\n    if (resolveClientUrl !== undefined) {\n      element.resolveClientUrl = resolveClientUrl;\n    }\n\n    // Set up event listeners for lifecycle hooks\n    const handleBeforeLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onBeforeLoad?.(customEvent.src ?? src);\n    };\n    const handleLoad = (e: Event) => {\n      const customEvent = e as CustomEvent & { src?: string };\n      onLoad?.(customEvent.src ?? src);\n    };\n    const handleError = (e: Event) => {\n      const customEvent = e as CustomEvent & { error?: unknown };\n      onError?.(customEvent.error);\n    };\n    const handleChange = (e: Event) => {\n      const customEvent = e as CustomEvent & {\n        previousSrc?: string | null;\n        nextSrc?: string | null;\n        previousName?: string;\n        nextName?: string;\n      };\n      onChange?.({\n        previousSrc: customEvent.previousSrc ?? null,\n        nextSrc: customEvent.nextSrc ?? null,\n        previousName: customEvent.previousName,\n        nextName: customEvent.nextName,\n      });\n    };\n\n    if (onBeforeLoad) element.addEventListener('beforeload', handleBeforeLoad);\n    if (onLoad) element.addEventListener('load', handleLoad);\n    if (onError) element.addEventListener('error', handleError);\n    if (onChange) element.addEventListener('change', handleChange);\n\n    return () => {\n      if (onBeforeLoad)\n        element.removeEventListener('beforeload', handleBeforeLoad);\n      if (onLoad) element.removeEventListener('load', handleLoad);\n      if (onError) element.removeEventListener('error', handleError);\n      if (onChange) element.removeEventListener('change', handleChange);\n    };\n  }, [\n    src,\n    onBeforeLoad,\n    onChange,\n    onError,\n    onLoad,\n    onRequest,\n    onResponse,\n    resolveClientUrl,\n  ]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":"AAqII;AArIJ,SAAS,WAAW,cAAc;AAOlC,SAAS,cAAc;AAqChB,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,aAAa,OAA+B,IAAI;AAEtD,YAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,6BAA6B;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC;AAAS;AAGd,QAAI,WAAW;AACb,cAAQ,YAAY;AAAA,IACtB;AACA,QAAI,YAAY;AACd,cAAQ,aAAa;AAAA,IACvB;AACA,QAAI,qBAAqB,QAAW;AAClC,cAAQ,mBAAmB;AAAA,IAC7B;AAGA,UAAM,mBAAmB,CAAC,MAAa;AACrC,YAAM,cAAc;AACpB,qBAAe,YAAY,OAAO,GAAG;AAAA,IACvC;AACA,UAAM,aAAa,CAAC,MAAa;AAC/B,YAAM,cAAc;AACpB,eAAS,YAAY,OAAO,GAAG;AAAA,IACjC;AACA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,cAAc;AACpB,gBAAU,YAAY,KAAK;AAAA,IAC7B;AACA,UAAM,eAAe,CAAC,MAAa;AACjC,YAAM,cAAc;AAMpB,iBAAW;AAAA,QACT,aAAa,YAAY,eAAe;AAAA,QACxC,SAAS,YAAY,WAAW;AAAA,QAChC,cAAc,YAAY;AAAA,QAC1B,UAAU,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAEA,QAAI;AAAc,cAAQ,iBAAiB,cAAc,gBAAgB;AACzE,QAAI;AAAQ,cAAQ,iBAAiB,QAAQ,UAAU;AACvD,QAAI;AAAS,cAAQ,iBAAiB,SAAS,WAAW;AAC1D,QAAI;AAAU,cAAQ,iBAAiB,UAAU,YAAY;AAE7D,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,oBAAoB,cAAc,gBAAgB;AAC5D,UAAI;AAAQ,gBAAQ,oBAAoB,QAAQ,UAAU;AAC1D,UAAI;AAAS,gBAAQ,oBAAoB,SAAS,WAAW;AAC7D,UAAI;AAAU,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}

package/dist/{next/host/pages-router-server.cjs → host/nextjs/pages.cjs}

@@ -26,23 +26,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var pages_router_server_exports = {};
-__export(pages_router_server_exports, {
-  RemoteComponent: () => RemoteComponent,
-  getRemoteComponentProps: () => getRemoteComponentProps
+var pages_exports = {};
+__export(pages_exports, {
+  ConsumeRemoteComponent: () => ConsumeRemoteComponent,
+  getConsumeRemoteComponentProps: () => getConsumeRemoteComponentProps
 });
-module.exports = __toCommonJS(pages_router_server_exports);
+module.exports = __toCommonJS(pages_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_wrapper = require("remote-components/remote/defaults/wrapper");
 var Form = __toESM(require("next/form"), 1);
 var Image = __toESM(require("next/image"), 1);
 var Link = __toESM(require("next/link"), 1);
 var Router = __toESM(require("next/router"), 1);
 var Script = __toESM(require("next/script"), 1);
 var import_react = require("react");
-var import_pages = require("remote-components/shared/host/pages");
-var import_remote_component = require("#internal/shared/client/remote-component");
-var import_fetch_remote_component = require("#internal/shared/ssr/fetch-remote-component");
-var import_react2 = require("#remote-components/react/index");
+var import_react2 = require("remote-components/host/react");
+var import_image_impl = require("#internal/host/nextjs/image-impl");
+var import_image_shared = require("#internal/host/nextjs/image-shared");
+var import_fetch_remote_component = require("#internal/host/server/fetch-remote-component");
+var import_default_resolve_client_url = require("#internal/runtime/url/default-resolve-client-url");
+var import_error = require("#internal/utils/error");
+var import_pages = require("#remote-components/host/defaults/pages");
 const navigationImpl = {
   useRouter: () => Router.useRouter(),
   useSearchParams: () => {
@@ -54,24 +58,14 @@ const navigationImpl = {
   }
 };
 const sharedCache = /* @__PURE__ */ new Map();
-const shared = (bundle) => {
-  if (sharedCache.has(bundle)) {
-    return sharedCache.get(bundle);
-  }
-  const remoteLoader = ({ src, width, quality }) => {
-    const self2 = globalThis;
-    const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(src)?.groups ?? {};
-    return `${self2.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
-  };
-  const imageImpl = (ImageComponent) => {
-    function RemoteImage(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageComponent, { loader: remoteLoader, ...props });
+const shared = (bundle, resolveClientUrl) => {
+  if (!resolveClientUrl) {
+    if (sharedCache.has(bundle)) {
+      return sharedCache.get(bundle);
     }
-    RemoteImage.default = RemoteImage;
-    RemoteImage.getImageProps = Image.getImageProps;
-    return RemoteImage;
-  };
-  return {
+  }
+  const ImageComponent = Image.default.default ?? Image.default;
+  const result = {
     // polyfill Next.js App Router client API (minimal)
     // some API methods are not available when using a Next.js Pages Router application as host
     "next/navigation": () => Promise.resolve(navigationImpl),
@@ -82,26 +76,18 @@ const shared = (bundle) => {
     "next/form": () => Promise.resolve(Form.default),
     "next/dist/client/script": () => Promise.resolve(Script.default),
     "next/script": () => Promise.resolve(Script.default),
-    "next/dist/client/image-component": () => Promise.resolve({
-      // @ts-expect-error default.default
-      // eslint-disable-next-line
-      Image: imageImpl(Image.default.default ?? Image.default)
-    }),
-    "next/dist/api/image": () => Promise.resolve({
-      // @ts-expect-error default.default
-      // eslint-disable-next-line
-      default: imageImpl(Image.default.default ?? Image.default),
-      getImageProps: Image.getImageProps
-    }),
     "next/router": () => Promise.resolve(Router),
     ...import_pages.shared,
-    // always override next/image to use the remote loader
-    "next/image": () => Promise.resolve(
-      // @ts-expect-error default.default
-      // eslint-disable-next-line
-      imageImpl(Image.default.default ?? Image.default)
+    // Always override Next.js image modules to use the bundle URL rewriter.
+    ...(0, import_image_shared.createNextImageSharedEntries)(
+      () => (0, import_image_impl.imageImpl)(ImageComponent, bundle, resolveClientUrl, true),
+      { getImageProps: Image.getImageProps }
     )
   };
+  if (!resolveClientUrl) {
+    sharedCache.set(bundle, result);
+  }
+  return result;
 };
 const REMOTE_COMPONENT_STORE = Symbol("REMOTE_COMPONENT_STORE");
 const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
@@ -124,20 +110,23 @@ function getComponent(key) {
   self[REMOTE_COMPONENT_STORE]?.delete(key);
   return component;
 }
-function RemoteComponent(props) {
+function ConsumeRemoteComponent(props) {
   const remoteComponent = typeof document !== "undefined" ? null : (
     // retrieve the HTML from the global store
     getComponent(
       props[REMOTE_COMPONENT_KEY] ?? "__vercel_remote_component"
     )
   );
+  const src = typeof props.src === "string" ? props.src : props.src.href;
+  const resolveClientUrl = props.resolveClientUrl ? (0, import_default_resolve_client_url.bindResolveClientUrl)(props.resolveClientUrl, src) : void 0;
+  const sharedResult = shared(props.bundle ?? "default", resolveClientUrl);
   (0, import_react.useEffect)(() => {
     const clientSelf = globalThis;
-    clientSelf.__remote_component_shared__ = shared(props.bundle ?? "default");
-  }, [props.bundle]);
+    clientSelf.__remote_component_shared__ = sharedResult;
+  }, [sharedResult]);
   if (!props[REMOTE_COMPONENT_KEY]) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.RemoteComponent,
+      import_react2.ConsumeRemoteComponent,
       {
         isolate: props.isolate,
         mode: props.mode,
@@ -150,14 +139,14 @@ function RemoteComponent(props) {
         onResponse: props.onResponse,
         resolveClientUrl: props.resolveClientUrl,
         reset: props.reset,
-        shared: shared(props.bundle ?? "default"),
+        shared: sharedResult,
         src: props.src,
         children: props.children
       }
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react2.RemoteComponent,
+    import_react2.ConsumeRemoteComponent,
     {
       isolate: props.isolate,
       mode: props.mode,
@@ -170,16 +159,16 @@ function RemoteComponent(props) {
       onResponse: props.onResponse,
       resolveClientUrl: props.resolveClientUrl,
       reset: props.reset,
-      shared: shared(props.bundle ?? "default"),
+      shared: sharedResult,
       src: props.src,
       children: remoteComponent
     }
   );
 }
-async function getRemoteComponentProps(src, options) {
+async function getConsumeRemoteComponentProps(src, options) {
   if (typeof document !== "undefined") {
-    throw new import_remote_component.RemoteComponentsError(
-      "`getRemoteComponentProps()` can only be used on the server side."
+    throw new import_error.RemoteComponentsError(
+      "`getConsumeRemoteComponentProps()` can only be used on the server side."
     );
   }
   const {
@@ -233,7 +222,7 @@ async function getRemoteComponentProps(src, options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent,
-  getRemoteComponentProps
+  ConsumeRemoteComponent,
+  getConsumeRemoteComponentProps
 });
-//# sourceMappingURL=pages-router-server.cjs.map
+//# sourceMappingURL=pages.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/host/nextjs/pages.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport * as Form from 'next/form';\nimport * as Image from 'next/image';\nimport * as Link from 'next/link';\nimport * as Router from 'next/router';\nimport * as Script from 'next/script';\nimport { useEffect } from 'react';\nimport { ConsumeRemoteComponent as ConsumeRemoteComponentReact } from 'remote-components/host/react';\nimport { imageImpl } from '#internal/host/nextjs/image-impl';\nimport { createNextImageSharedEntries } from '#internal/host/nextjs/image-shared';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeRemoteComponentConfig } from '#internal/host/shared/config';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { shared as _shared } from '#remote-components/host/defaults/pages';\n\nconst navigationImpl = {\n  useRouter: () => Router.useRouter(),\n  useSearchParams: () => {\n    const router = 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 = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) => {\n  // Skip cache when resolveClientUrl is provided — different resolver instances\n  // must not share a cache entry, since imageImpl closes over the resolver.\n  if (!resolveClientUrl) {\n    if (sharedCache.has(bundle)) {\n      return sharedCache.get(bundle);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const ImageComponent: typeof Image.default =\n    (Image.default as any).default ?? Image.default;\n  const result = {\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/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // Always override Next.js image modules to use the bundle URL rewriter.\n    ...createNextImageSharedEntries(\n      () => imageImpl(ImageComponent, bundle, resolveClientUrl, true),\n      { getImageProps: Image.getImageProps },\n    ),\n  };\n\n  if (!resolveClientUrl) {\n    sharedCache.set(bundle, result);\n  }\n\n  return result;\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 ?? '/'}:${\n    name ?? '__vercel_remote_component'\n  }__${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\n/**\n * Props for the Next.js Pages Router remote component host.\n *\n * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface ConsumeRemoteComponentProps\n  extends ConsumeRemoteComponentConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** The Webpack bundle name for the remote component. */\n  bundle?: string;\n  /** The page route of the remote component. */\n  route?: string;\n  /** Loading fallback content displayed while the remote component is being fetched. */\n  children?: React.ReactNode;\n  [REMOTE_COMPONENT_KEY]?: string;\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 ConsumeRemoteComponent(props: ConsumeRemoteComponentProps) {\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  const src =\n    typeof props.src === 'string' ? props.src : (props.src as URL).href;\n  const resolveClientUrl = props.resolveClientUrl\n    ? bindResolveClientUrl(props.resolveClientUrl, src)\n    : undefined;\n  const sharedResult = shared(props.bundle ?? 'default', resolveClientUrl);\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__ = sharedResult;\n  }, [sharedResult]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <ConsumeRemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        resolveClientUrl={props.resolveClientUrl}\n        reset={props.reset}\n        shared={sharedResult}\n        src={props.src}\n      >\n        {props.children}\n      </ConsumeRemoteComponentReact>\n    );\n  }\n\n  return (\n    <ConsumeRemoteComponentReact\n      isolate={props.isolate}\n      mode={props.mode}\n      name={props.name}\n      onBeforeLoad={props.onBeforeLoad}\n      onChange={props.onChange}\n      onError={props.onError}\n      onLoad={props.onLoad}\n      onRequest={props.onRequest}\n      onResponse={props.onResponse}\n      resolveClientUrl={props.resolveClientUrl}\n      reset={props.reset}\n      shared={sharedResult}\n      src={props.src}\n    >\n      {remoteComponent}\n    </ConsumeRemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` 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 getConsumeRemoteComponentProps(\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 getConsumeRemoteComponentProps(\n  src: string,\n  options?: {\n    /**\n     * Called when a fetch request is made to retrieve the remote component payload.\n     * Can be used to intercept requests, modify headers, or provide a custom response.\n     */\n    onRequest?: OnRequestHook;\n    /**\n     * Called after a fetch completes to retrieve the remote component payload.\n     * Can be used to inspect the response (e.g., check for redirects) or transform it.\n     */\n    onResponse?: OnResponseHook;\n    /**\n     * The name of the exposed remote component. Used to identify the remote component\n     * when multiple remote components are exposed on a page.\n     */\n    name?: string;\n  },\n): Promise<ConsumeRemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getConsumeRemoteComponentProps()` can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route },\n    name,\n    links,\n    component,\n    nextData,\n    remoteShared,\n  } = await fetchRemoteComponent(src, {\n    rsc: true,\n    ...options,\n  });\n\n  const props: ConsumeRemoteComponentProps = {\n    src,\n    bundle,\n    name,\n    route,\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        <script\n          data-remote-components-shared=\"\"\n          id={`${name}_shared`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(remoteShared)}\n        </script>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0KM;AA1KN,qBAAO;AACP,WAAsB;AACtB,YAAuB;AACvB,WAAsB;AACtB,aAAwB;AACxB,aAAwB;AACxB,mBAA0B;AAC1B,IAAAA,gBAAsE;AACtE,wBAA0B;AAC1B,0BAA6C;AAC7C,oCAAqC;AAMrC,wCAAqC;AAErC,mBAAsC;AACtC,mBAAkC;AAElC,MAAM,iBAAiB;AAAA,EACrB,WAAW,MAAM,OAAO,UAAU;AAAA,EAClC,iBAAiB,MAAM;AACrB,UAAM,SAAS,OAAO,UAAU;AAChC,WAAO;AAAA,MACL,KAAK,CAAC,QAAgB,OAAO,MAAM,GAAG;AAAA,MACtC,KAAK,CAAC,QAAgB,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,cAAc,oBAAI,IAAoD;AAC5E,MAAM,SAAS,CACb,QACA,qBACG;AAGH,MAAI,CAAC,kBAAkB;AACrB,QAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,aAAO,YAAY,IAAI,MAAM;AAAA,IAC/B;AAAA,EACF;AAGA,QAAM,iBACH,MAAM,QAAgB,WAAW,MAAM;AAC1C,QAAM,SAAS;AAAA;AAAA;AAAA,IAGb,mBAAmB,MACjB,QAAQ,QAAQ,cAAc;AAAA,IAChC,0CAA0C,MACxC,QAAQ,QAAQ,cAAc;AAAA,IAChC,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,iCAAiC,MAC/B,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC9B,aAAa,MAAM,QAAQ,QAAQ,KAAK,OAAO;AAAA,IAC/C,2BAA2B,MACzB,QAAQ,QAAQ,OAAO,OAAO;AAAA,IAChC,eAAe,MAAM,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACnD,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG,aAAAC;AAAA;AAAA,IAEH,OAAG;AAAA,MACD,UAAM,6BAAU,gBAAgB,QAAQ,kBAAkB,IAAI;AAAA,MAC9D,EAAE,eAAe,MAAM,cAAc;AAAA,IACvC;AAAA,EACF;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,IAAI,QAAQ,MAAM;AAAA,EAChC;AAEA,SAAO;AACT;AAGA,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OACvC,QAAQ,gCACL,OAAO,WAAW;AACzB;AAEA,SAAS,aAAa,KAAa,WAAkC;AACnE,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,SAAS;AACjD;AAEA,SAAS,aAAa,KAA0C;AAC9D,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AA2BO,SAAS,uBAAuB,OAAoC;AACzE,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,QAAM,MACJ,OAAO,MAAM,QAAQ,WAAW,MAAM,MAAO,MAAM,IAAY;AACjE,QAAM,mBAAmB,MAAM,uBAC3B,wDAAqB,MAAM,kBAAkB,GAAG,IAChD;AACJ,QAAM,eAAe,OAAO,MAAM,UAAU,WAAW,gBAAgB;AAEvE,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AAAA,EAC3C,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,cAAc,MAAM;AAAA,QACpB,UAAU,MAAM;AAAA,QAChB,SAAS,MAAM;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,WAAW,MAAM;AAAA,QACjB,YAAY,MAAM;AAAA,QAClB,kBAAkB,MAAM;AAAA,QACxB,OAAO,MAAM;AAAA,QACb,QAAQ;AAAA,QACR,KAAK,MAAM;AAAA,QAEV,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,cAAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,cAAc,MAAM;AAAA,MACpB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MACd,WAAW,MAAM;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,kBAAkB,MAAM;AAAA,MACxB,OAAO,MAAM;AAAA,MACb,QAAQ;AAAA,MACR,KAAK,MAAM;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,+BACpB,KACA,SAiBsC;AACtC,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,MAAM;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AAED,QAAM,QAAqC;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,MAAM,OAAO,KAAK;AAIxB,MAAI,UAAU,YAAY,eAAe;AAEvC;AAAA,MACE;AAAA,MACA,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,iCAA8B;AAAA,YAC9B,IAAI,GAAG;AAAA,YACP,MAAK;AAAA,YAEJ,eAAK,UAAU,YAAY;AAAA;AAAA,QAC9B;AAAA,QACC,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG;AAAA,YACJ,YAAY;AAAA;AAAA,UAFP,GAAG,KAAK,MAAM,KAAK;AAAA,QAG1B,CACD;AAAA,QACA;AAAA,SACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["import_react","_shared","ConsumeRemoteComponentReact"]}

package/dist/host/nextjs/pages.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ConsumeRemoteComponentConfig } from '../../internal/host/shared/config.js';
+import { OnRequestHook, OnResponseHook } from '../../internal/host/shared/fetch-interceptors.js';
+import '../../internal/runtime/url/resolve-client-url.js';
+
+declare const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
+/**
+ * Props for the Next.js Pages Router remote component host.
+ *
+ * Extends {@link ConsumeRemoteComponentConfig} with Pages Router–specific `bundle` and
+ * `route` props used for SSR hydration.
+ */
+interface ConsumeRemoteComponentProps extends ConsumeRemoteComponentConfig {
+    /** The source URL of the remote component. Required for server rendering. */
+    src: string | URL;
+    /** The Webpack bundle name for the remote component. */
+    bundle?: string;
+    /** The page route of the remote component. */
+    route?: string;
+    /** Loading fallback content displayed while the remote component is being fetched. */
+    children?: React.ReactNode;
+    [REMOTE_COMPONENT_KEY]?: string;
+}
+/**
+ * This component handles the rendering of remote microfrontends.
+ *
+ * @param props - The properties for the remote component.
+ * @returns A React component that renders the remote component.
+ */
+declare function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps): react_jsx_runtime.JSX.Element;
+/**
+ * Fetches the remote component properties from the server. You need to pass these properties to the `<ConsumeRemoteComponent>` component to render the fetched remote component.
+ *
+ * @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.
+ * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.
+ * @returns The properties of the remote component.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { getRemoteComponentProps } from 'remote-components/next/host/pages';
+ * import type { GetServerSideProps } from 'next';
+ *
+ * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {
+ *   const myRemoteComponent = await getConsumeRemoteComponentProps(
+ *     '/nextjs-app-remote/components/header',
+ *     req.headers,
+ *   );
+ *   return {
+ *     props: {
+ *       remoteComponents: {
+ *         myRemoteComponent,
+ *       },
+ *     },
+ *   };
+ * }
+ * ```
+ */
+declare function getConsumeRemoteComponentProps(src: string, options?: {
+    /**
+     * Called when a fetch request is made to retrieve the remote component payload.
+     * Can be used to intercept requests, modify headers, or provide a custom response.
+     */
+    onRequest?: OnRequestHook;
+    /**
+     * Called after a fetch completes to retrieve the remote component payload.
+     * Can be used to inspect the response (e.g., check for redirects) or transform it.
+     */
+    onResponse?: OnResponseHook;
+    /**
+     * The name of the exposed remote component. Used to identify the remote component
+     * when multiple remote components are exposed on a page.
+     */
+    name?: string;
+}): Promise<ConsumeRemoteComponentProps>;
+
+export { ConsumeRemoteComponent, ConsumeRemoteComponentProps, getConsumeRemoteComponentProps };