remote-components 0.0.51 → 0.1.2

package/dist/next/host/pages-router-client.cjs

@@ -42,7 +42,8 @@ function RemoteComponent({
   onError,
   onLoad,
   onRequest,
-  onResponse
+  onResponse,
+  resolveClientUrl
 }) {
   const elementRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -60,6 +61,9 @@ function RemoteComponent({
     if (onResponse) {
       element.onResponse = onResponse;
     }
+    if (resolveClientUrl !== void 0) {
+      element.resolveClientUrl = resolveClientUrl;
+    }
     const handleBeforeLoad = (e) => {
       const customEvent = e;
       onBeforeLoad?.(customEvent.src ?? src);
@@ -99,7 +103,16 @@ function RemoteComponent({
       if (onChange)
         element.removeEventListener("change", handleChange);
     };
-  }, [src, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse]);
+  }, [
+    src,
+    onBeforeLoad,
+    onChange,
+    onError,
+    onLoad,
+    onRequest,
+    onResponse,
+    resolveClientUrl
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { ref: elementRef, src, children });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/next/host/pages-router-client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { shared } from 'remote-components/shared/host/pages';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\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 properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  children?: React.ReactNode;\n  /** Called right before a new remote component load starts. */\n  onBeforeLoad?: (src: string | URL) => void;\n  /** Called when the remote component has been successfully loaded and mounted. */\n  onLoad?: (src: string | URL) => void;\n  /** Called when an error occurs while loading or mounting the remote component. */\n  onError?: (error: unknown) => void;\n  /** Called when a different remote component is loaded into the same wrapper. */\n  onChange?: (info: {\n    previousSrc: string | URL | null;\n    nextSrc: string | URL | null;\n    previousName: string | undefined;\n    nextName: string | undefined;\n  }) => void;\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\nexport function RemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n}: RemoteComponentProps) {\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 properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\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  }, [src, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgII;AAhIJ,mBAAkC;AAClC,mBAAuB;AAmDhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,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;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,CAAC,KAAK,cAAc,UAAU,SAAS,QAAQ,WAAW,UAAU,CAAC;AAExE,SACE,4CAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/pages-router-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { shared } from 'remote-components/shared/host/pages';\nimport type { ResolveClientUrl } from '#internal/shared/client/proxy-through-host';\nimport type {\n  ClientHostConfig,\n  HostConfig,\n  HostLifecycleCallbacks,\n} from '#internal/shared/contract/host-config';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\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 HostConfig}, {@link ClientHostConfig}, and\n * {@link HostLifecycleCallbacks}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface RemoteComponentProps\n  extends HostConfig,\n    ClientHostConfig,\n    HostLifecycleCallbacks {\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 RemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: RemoteComponentProps) {\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;AAyII;AAzIJ,mBAAkC;AAClC,mBAAuB;AA+ChB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,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/next/host/pages-router-client.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { O as OnRequestHook, a as OnResponseHook } from '../../types-cbe44b51.js';
+import { H as HostConfig, C as ClientHostConfig, a as HostLifecycleCallbacks } from '../../host-config-58cdccea.js';
+import '../../internal/shared/client/proxy-through-host.js';
+import '../../types-2b26a246.js';
 import 'parse5/dist/tree-adapters/default';
 
 declare module 'react/jsx-runtime' {
@@ -13,33 +15,19 @@ declare module 'react/jsx-runtime' {
         }
     }
 }
-interface RemoteComponentProps {
+/**
+ * Props for the Pages Router client-side remote component wrapper.
+ *
+ * Extends {@link HostConfig}, {@link ClientHostConfig}, and
+ * {@link HostLifecycleCallbacks}. The `src` prop is required since
+ * the client always needs a source URL to load from.
+ */
+interface RemoteComponentProps extends HostConfig, ClientHostConfig, HostLifecycleCallbacks {
+    /** 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;
-    /** Called right before a new remote component load starts. */
-    onBeforeLoad?: (src: string | URL) => void;
-    /** Called when the remote component has been successfully loaded and mounted. */
-    onLoad?: (src: string | URL) => void;
-    /** Called when an error occurs while loading or mounting the remote component. */
-    onError?: (error: unknown) => void;
-    /** Called when a different remote component is loaded into the same wrapper. */
-    onChange?: (info: {
-        previousSrc: string | URL | null;
-        nextSrc: string | URL | null;
-        previousName: string | undefined;
-        nextName: string | undefined;
-    }) => void;
-    /**
-     * 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;
 }
-declare function RemoteComponent({ src, children, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function RemoteComponent({ src, children, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse, resolveClientUrl, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
 export { RemoteComponent, RemoteComponentProps };

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

@@ -9,7 +9,8 @@ function RemoteComponent({
   onError,
   onLoad,
   onRequest,
-  onResponse
+  onResponse,
+  resolveClientUrl
 }) {
   const elementRef = useRef(null);
   useEffect(() => {
@@ -27,6 +28,9 @@ function RemoteComponent({
     if (onResponse) {
       element.onResponse = onResponse;
     }
+    if (resolveClientUrl !== void 0) {
+      element.resolveClientUrl = resolveClientUrl;
+    }
     const handleBeforeLoad = (e) => {
       const customEvent = e;
       onBeforeLoad?.(customEvent.src ?? src);
@@ -66,7 +70,16 @@ function RemoteComponent({
       if (onChange)
         element.removeEventListener("change", handleChange);
     };
-  }, [src, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse]);
+  }, [
+    src,
+    onBeforeLoad,
+    onChange,
+    onError,
+    onLoad,
+    onRequest,
+    onResponse,
+    resolveClientUrl
+  ]);
   return /* @__PURE__ */ jsx("remote-component", { ref: elementRef, src, children });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { shared } from 'remote-components/shared/host/pages';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\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 properties from the custom element\ninterface RemoteComponentElement extends HTMLElement {\n  onRequest?: OnRequestHook;\n  onResponse?: OnResponseHook;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  children?: React.ReactNode;\n  /** Called right before a new remote component load starts. */\n  onBeforeLoad?: (src: string | URL) => void;\n  /** Called when the remote component has been successfully loaded and mounted. */\n  onLoad?: (src: string | URL) => void;\n  /** Called when an error occurs while loading or mounting the remote component. */\n  onError?: (error: unknown) => void;\n  /** Called when a different remote component is loaded into the same wrapper. */\n  onChange?: (info: {\n    previousSrc: string | URL | null;\n    nextSrc: string | URL | null;\n    previousName: string | undefined;\n    nextName: string | undefined;\n  }) => void;\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\nexport function RemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n}: RemoteComponentProps) {\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 properties on the element before it loads\n    if (onRequest) {\n      element.onRequest = onRequest;\n    }\n    if (onResponse) {\n      element.onResponse = onResponse;\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  }, [src, onBeforeLoad, onChange, onError, onLoad, onRequest, onResponse]);\n\n  return (\n    <remote-component ref={elementRef} src={src}>\n      {children}\n    </remote-component>\n  );\n}\n"],"mappings":"AAgII;AAhIJ,SAAS,WAAW,cAAc;AAClC,SAAS,cAAc;AAmDhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,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;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,CAAC,KAAK,cAAc,UAAU,SAAS,QAAQ,WAAW,UAAU,CAAC;AAExE,SACE,oBAAC,sBAAiB,KAAK,YAAY,KAChC,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/pages-router-client.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { shared } from 'remote-components/shared/host/pages';\nimport type { ResolveClientUrl } from '#internal/shared/client/proxy-through-host';\nimport type {\n  ClientHostConfig,\n  HostConfig,\n  HostLifecycleCallbacks,\n} from '#internal/shared/contract/host-config';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\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 HostConfig}, {@link ClientHostConfig}, and\n * {@link HostLifecycleCallbacks}. The `src` prop is required since\n * the client always needs a source URL to load from.\n */\nexport interface RemoteComponentProps\n  extends HostConfig,\n    ClientHostConfig,\n    HostLifecycleCallbacks {\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 RemoteComponent({\n  src,\n  children,\n  onBeforeLoad,\n  onChange,\n  onError,\n  onLoad,\n  onRequest,\n  onResponse,\n  resolveClientUrl,\n}: RemoteComponentProps) {\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":"AAyII;AAzIJ,SAAS,WAAW,cAAc;AAClC,SAAS,cAAc;AA+ChB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,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

@@ -148,6 +148,7 @@ function RemoteComponent(props) {
         onLoad: props.onLoad,
         onRequest: props.onRequest,
         onResponse: props.onResponse,
+        resolveClientUrl: props.resolveClientUrl,
         reset: props.reset,
         shared: shared(props.bundle ?? "default"),
         src: props.src,
@@ -167,6 +168,7 @@ function RemoteComponent(props) {
       onLoad: props.onLoad,
       onRequest: props.onRequest,
       onResponse: props.onResponse,
+      resolveClientUrl: props.resolveClientUrl,
       reset: props.reset,
       shared: shared(props.bundle ?? "default"),
       src: props.src,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import * 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 { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\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 = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\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\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  /** Called right before a new remote component load starts. */\n  onBeforeLoad?: (src: string | URL) => void;\n  /** Called when the remote component has been successfully loaded and mounted. */\n  onLoad?: (src: string | URL) => void;\n  /** Called when an error occurs while loading or mounting the remote component. */\n  onError?: (error: unknown) => void;\n  /** Called when a different remote component is loaded into the same wrapper. */\n  onChange?: (info: {\n    previousSrc: string | URL | null;\n    nextSrc: string | URL | null;\n    previousName: string | undefined;\n    nextName: string | undefined;\n  }) => void;\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  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      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      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  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<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` 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: RemoteComponentProps = {\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;AA4Ca;AA5Cb,WAAsB;AACtB,YAAuB;AACvB,WAAsB;AACtB,aAAwB;AACxB,aAAwB;AACxB,mBAA0B;AAC1B,mBAAkC;AAClC,8BAAsC;AACtC,oCAAqC;AAErC,IAAAA,gBAAwD;AAExD,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,CAAC,WAAmB;AACjC,MAAI,YAAY,IAAI,MAAM,GAAG;AAC3B,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAEA,QAAM,eAAe,CAAC,EAAE,KAAK,OAAO,QAAQ,MAA8B;AACxE,UAAMC,QAAO;AAGb,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,GAAG,GAAG,UAAU,CAAC;AACxD,WAAO,GACLA,MAAK,wBAAwB,MAAM,GAAG,UAAU,KAC/C,+BAA+B,mBAAmB,GAAG,OAAO,WAC7D,WAAW;AAAA,EAEf;AAEA,QAAM,YAAY,CAAC,mBAAyC;AAC1D,aAAS,YAAY,OAAyB;AAC5C,aAAO,4CAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,gBAAY,UAAU;AACtB,gBAAY,gBAAgB,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,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,oCAAoC,MAClC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,OAAO,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IACzD,CAAC;AAAA,IACH,uBAAuB,MACrB,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,MACzD,eAAe,MAAM;AAAA,IACvB,CAAC;AAAA,IACH,eAAe,MAAM,QAAQ,QAAQ,MAAM;AAAA,IAC3C,GAAG,aAAAC;AAAA;AAAA,IAEH,cAAc,MACZ,QAAQ;AAAA;AAAA;AAAA,MAGN,UAAU,MAAM,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClD;AAAA,EACJ;AACF;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;AA2CO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B,OAAO,MAAM,UAAU,SAAS;AAAA,EAC3E,GAAG,CAAC,MAAM,MAAM,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,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,QACxC,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,OAAO,MAAM;AAAA,MACb,QAAQ,OAAO,MAAM,UAAU,SAAS;AAAA,MACxC,KAAK,MAAM;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAiB+B;AAC/B,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,QAA8B;AAAA,IAClC;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","self","_shared","RemoteComponentReact"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import * 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 { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport type {\n  ClientHostConfig,\n  HostConfig,\n  HostLifecycleCallbacks,\n} from '#internal/shared/contract/host-config';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\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 = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\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 HostConfig}, {@link ClientHostConfig}, and\n * {@link HostLifecycleCallbacks}. Adds Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface RemoteComponentProps\n  extends HostConfig,\n    ClientHostConfig,\n    HostLifecycleCallbacks {\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 RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        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={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      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={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  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<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` 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: RemoteComponentProps = {\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":"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","names":["import_react","self","_shared","RemoteComponentReact"]}

package/dist/next/host/pages-router-server.d.ts

@@ -1,41 +1,27 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { O as OnRequestHook, a as OnResponseHook } from '../../types-cbe44b51.js';
+import { H as HostConfig, C as ClientHostConfig, a as HostLifecycleCallbacks } from '../../host-config-58cdccea.js';
+import { O as OnRequestHook, a as OnResponseHook } from '../../types-2b26a246.js';
+import '../../internal/shared/client/proxy-through-host.js';
 import 'parse5/dist/tree-adapters/default';
 
 declare const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
-interface RemoteComponentProps {
-    src: string;
+/**
+ * Props for the Next.js Pages Router remote component host.
+ *
+ * Extends {@link HostConfig}, {@link ClientHostConfig}, and
+ * {@link HostLifecycleCallbacks}. Adds Pages Router–specific `bundle` and
+ * `route` props used for SSR hydration.
+ */
+interface RemoteComponentProps extends HostConfig, ClientHostConfig, HostLifecycleCallbacks {
+    /** 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;
-    name?: string;
-    isolate?: boolean;
-    mode?: 'open' | 'closed';
-    reset?: boolean;
-    /** Called right before a new remote component load starts. */
-    onBeforeLoad?: (src: string | URL) => void;
-    /** Called when the remote component has been successfully loaded and mounted. */
-    onLoad?: (src: string | URL) => void;
-    /** Called when an error occurs while loading or mounting the remote component. */
-    onError?: (error: unknown) => void;
-    /** Called when a different remote component is loaded into the same wrapper. */
-    onChange?: (info: {
-        previousSrc: string | URL | null;
-        nextSrc: string | URL | null;
-        previousName: string | undefined;
-        nextName: string | undefined;
-    }) => void;
-    /**
-     * 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;
-    [REMOTE_COMPONENT_KEY]?: 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.

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

@@ -114,6 +114,7 @@ function RemoteComponent(props) {
         onLoad: props.onLoad,
         onRequest: props.onRequest,
         onResponse: props.onResponse,
+        resolveClientUrl: props.resolveClientUrl,
         reset: props.reset,
         shared: shared(props.bundle ?? "default"),
         src: props.src,
@@ -133,6 +134,7 @@ function RemoteComponent(props) {
       onLoad: props.onLoad,
       onRequest: props.onRequest,
       onResponse: props.onResponse,
+      resolveClientUrl: props.resolveClientUrl,
       reset: props.reset,
       shared: shared(props.bundle ?? "default"),
       src: props.src,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import * 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 { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\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 = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\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\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  isolate?: boolean;\n  mode?: 'open' | 'closed';\n  reset?: boolean;\n  /** Called right before a new remote component load starts. */\n  onBeforeLoad?: (src: string | URL) => void;\n  /** Called when the remote component has been successfully loaded and mounted. */\n  onLoad?: (src: string | URL) => void;\n  /** Called when an error occurs while loading or mounting the remote component. */\n  onError?: (error: unknown) => void;\n  /** Called when a different remote component is loaded into the same wrapper. */\n  onChange?: (info: {\n    previousSrc: string | URL | null;\n    nextSrc: string | URL | null;\n    previousName: string | undefined;\n    nextName: string | undefined;\n  }) => void;\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  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        onBeforeLoad={props.onBeforeLoad}\n        onChange={props.onChange}\n        onError={props.onError}\n        onLoad={props.onLoad}\n        onRequest={props.onRequest}\n        onResponse={props.onResponse}\n        reset={props.reset}\n        shared={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      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      reset={props.reset}\n      shared={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  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<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` 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: RemoteComponentProps = {\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":"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","names":["self"]}
+{"version":3,"sources":["../../../src/next/host/pages-router-server.tsx"],"sourcesContent":["import * 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 { shared as _shared } from 'remote-components/shared/host/pages';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\nimport type {\n  ClientHostConfig,\n  HostConfig,\n  HostLifecycleCallbacks,\n} from '#internal/shared/contract/host-config';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\nimport type { OnRequestHook, OnResponseHook } from '#internal/shared/ssr/types';\nimport { RemoteComponent as RemoteComponentReact } from '#remote-components/react/index';\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 = (bundle: string) => {\n  if (sharedCache.has(bundle)) {\n    return sharedCache.get(bundle);\n  }\n\n  const remoteLoader = ({ src, width, quality }: Image.ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(src)?.groups ?? {};\n    return `${\n      self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n    }${assetPrefix}/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${\n      quality || 75\n    }`;\n  };\n\n  const imageImpl = (ImageComponent: typeof Image.default) => {\n    function RemoteImage(props: Image.ImageProps) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    RemoteImage.default = RemoteImage;\n    RemoteImage.getImageProps = Image.getImageProps;\n    return RemoteImage;\n  };\n\n  return {\n    // polyfill Next.js App Router client API (minimal)\n    // some API methods are not available when using a Next.js Pages Router application as host\n    'next/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/components/navigation': () =>\n      Promise.resolve(navigationImpl) as Promise<unknown>,\n    'next/dist/client/app-dir/link': () =>\n      Promise.resolve(Link.default) as Promise<unknown>,\n    'next/link': () => Promise.resolve(Link.default) as Promise<unknown>,\n    'next/dist/client/app-dir/form': () =>\n      Promise.resolve(Form.default) as Promise<unknown>,\n    'next/form': () => Promise.resolve(Form.default) as Promise<unknown>,\n    'next/dist/client/script': () =>\n      Promise.resolve(Script.default) as Promise<unknown>,\n    'next/script': () => Promise.resolve(Script.default) as Promise<unknown>,\n    'next/dist/client/image-component': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        Image: imageImpl(Image.default.default ?? Image.default),\n      }) as Promise<unknown>,\n    'next/dist/api/image': () =>\n      Promise.resolve({\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        default: imageImpl(Image.default.default ?? Image.default),\n        getImageProps: Image.getImageProps,\n      }) as Promise<unknown>,\n    'next/router': () => Promise.resolve(Router) as Promise<unknown>,\n    ..._shared,\n    // always override next/image to use the remote loader\n    'next/image': () =>\n      Promise.resolve(\n        // @ts-expect-error default.default\n        // eslint-disable-next-line\n        imageImpl(Image.default.default ?? Image.default),\n      ) as Promise<unknown>,\n  };\n};\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, React.ReactNode>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${\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 HostConfig}, {@link ClientHostConfig}, and\n * {@link HostLifecycleCallbacks}. Adds Pages Router–specific `bundle` and\n * `route` props used for SSR hydration.\n */\nexport interface RemoteComponentProps\n  extends HostConfig,\n    ClientHostConfig,\n    HostLifecycleCallbacks {\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 RemoteComponent(props: RemoteComponentProps) {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared(props.bundle ?? 'default');\n  }, [props.bundle]);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <RemoteComponentReact\n        isolate={props.isolate}\n        mode={props.mode}\n        name={props.name}\n        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={shared(props.bundle ?? 'default')}\n        src={props.src}\n      >\n        {props.children}\n      </RemoteComponentReact>\n    );\n  }\n\n  return (\n    <RemoteComponentReact\n      isolate={props.isolate}\n      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={shared(props.bundle ?? 'default')}\n      src={props.src}\n    >\n      {remoteComponent}\n    </RemoteComponentReact>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  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<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new RemoteComponentsError(\n      '`getRemoteComponentProps()` 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: RemoteComponentProps = {\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":"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","names":["self"]}

package/dist/next/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/index.tsx"],"sourcesContent":["import 'remote-components/shared/remote/wrapper';\nimport type { RemoteComponent as RemoteComponentRenderType } from '#internal/next/remote/render-server';\nimport { RemoteComponentsError } from '#internal/shared/error';\nimport type { RemoteComponent as RemoteComponentAppServerType } from '#remote-components/next/host/app-router-server';\n\ntype RemoteComponentAppServerProps = Parameters<\n  typeof RemoteComponentAppServerType\n>[0];\ntype RemoteComponentRenderProps = Parameters<\n  typeof RemoteComponentRenderType\n>[0];\ntype RemoteComponentProps =\n  | RemoteComponentAppServerProps\n  | RemoteComponentRenderProps;\n\n/**\n * RemoteComponent is a Next.js component that exposes or consumes a remote component\n * that can be used in a host application.\n *\n * @param src - [host] The source URL of the remote component. Use this to consume a remote component from another application.\n * @param name - [host & remote] The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param isolate - [host] Whether to isolate the remote component's styles and scripts. Defaults to true.\n * @param mode - [host] The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - [host] Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param children - [host & remote] Either the content of the remote component. Or when src is supplied, the fallback content to display while the remote component is being fetched.\n * @returns Either a React component that renders the remote component or a Next.js component that exposes the children as a remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component without the `src` prop:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from another application with the `src` prop:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *  return (\n *   <>\n *     <RemoteComponent src=\"https://example.com/remote-component\" />\n *   </>\n *  );\n * }\n * ```\n *\n * The `children` of the `<RemoteComponent>` will be exposed as a remote component or it will be used as the loading fallback when consuming a remote component.\n */\nexport async function RemoteComponent(\n  props: RemoteComponentProps,\n): Promise<React.ReactElement> {\n  if ('src' in props) {\n    const { RemoteComponent: RemoteComponentAppServer } = await import(\n      '#remote-components/next/host/app-router-server'\n    );\n    return RemoteComponentAppServer(props);\n  }\n\n  if ('children' in props) {\n    const { RemoteComponent: RemoteComponentRender } = await import(\n      '#internal/next/remote/render-server'\n    );\n    return RemoteComponentRender(props);\n  }\n\n  throw new RemoteComponentsError(\n    'Invalid props passed to <RemoteComponent>. Expected either \"src\" or \"children\".',\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAO;AAEP,mBAAsC;AA0DtC,eAAsB,gBACpB,OAC6B;AAC7B,MAAI,SAAS,OAAO;AAClB,UAAM,EAAE,iBAAiB,yBAAyB,IAAI,MAAM,OAC1D,gDACF;AACA,WAAO,yBAAyB,KAAK;AAAA,EACvC;AAEA,MAAI,cAAc,OAAO;AACvB,UAAM,EAAE,iBAAiB,sBAAsB,IAAI,MAAM,OACvD,qCACF;AACA,WAAO,sBAAsB,KAAK;AAAA,EACpC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/next/index.tsx"],"sourcesContent":["import 'remote-components/shared/remote/wrapper';\nimport type { RemoteComponent as RemoteComponentRenderType } from '#internal/next/remote/render-server';\nimport { RemoteComponentsError } from '#internal/shared/error';\nimport type { RemoteComponent as RemoteComponentAppServerType } from '#remote-components/next/host/app-router-server';\n\ntype RemoteComponentAppServerProps = Parameters<\n  typeof RemoteComponentAppServerType\n>[0];\ntype RemoteComponentRenderProps = Parameters<\n  typeof RemoteComponentRenderType\n>[0];\ntype RemoteComponentProps =\n  | RemoteComponentAppServerProps\n  | RemoteComponentRenderProps;\n\n/**\n * Dual-purpose Next.js App Router component: **host** (with `src`) or\n * **remote** (with `children` only). Props are documented on the underlying\n * types — see {@link RemoteComponentAppServerProps} and\n * {@link RemoteComponentRenderProps}.\n *\n * @example\n * ```tsx\n * // Host — consume a remote component\n * <RemoteComponent src=\"/other-app/components/header\" />\n *\n * // Remote — expose children as a remote component\n * <RemoteComponent>\n *   <h1>Hello from the remote!</h1>\n * </RemoteComponent>\n * ```\n */\nexport async function RemoteComponent(\n  props: RemoteComponentProps,\n): Promise<React.ReactElement> {\n  if ('src' in props) {\n    const { RemoteComponent: RemoteComponentAppServer } = await import(\n      '#remote-components/next/host/app-router-server'\n    );\n    return RemoteComponentAppServer(props);\n  }\n\n  if ('children' in props) {\n    const { RemoteComponent: RemoteComponentRender } = await import(\n      '#internal/next/remote/render-server'\n    );\n    return RemoteComponentRender(props);\n  }\n\n  throw new RemoteComponentsError(\n    'Invalid props passed to <RemoteComponent>. Expected either \"src\" or \"children\".',\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAO;AAEP,mBAAsC;AA8BtC,eAAsB,gBACpB,OAC6B;AAC7B,MAAI,SAAS,OAAO;AAClB,UAAM,EAAE,iBAAiB,yBAAyB,IAAI,MAAM,OAC1D,gDACF;AACA,WAAO,yBAAyB,KAAK;AAAA,EACvC;AAEA,MAAI,cAAc,OAAO;AACvB,UAAM,EAAE,iBAAiB,sBAAsB,IAAI,MAAM,OACvD,qCACF;AACA,WAAO,sBAAsB,KAAK;AAAA,EACpC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;","names":[]}

package/dist/next/index.d.ts

@@ -1,55 +1,29 @@
 import { RemoteComponent as RemoteComponent$2 } from '../internal/next/remote/render-server.js';
 import { RemoteComponent as RemoteComponent$1 } from './host/app-router-server.js';
-import '../types-cbe44b51.js';
+import '../host-config-58cdccea.js';
+import '../internal/shared/client/proxy-through-host.js';
+import '../types-2b26a246.js';
 import 'parse5/dist/tree-adapters/default';
 
 type RemoteComponentAppServerProps = Parameters<typeof RemoteComponent$1>[0];
 type RemoteComponentRenderProps = Parameters<typeof RemoteComponent$2>[0];
 type RemoteComponentProps = RemoteComponentAppServerProps | RemoteComponentRenderProps;
 /**
- * RemoteComponent is a Next.js component that exposes or consumes a remote component
- * that can be used in a host application.
- *
- * @param src - [host] The source URL of the remote component. Use this to consume a remote component from another application.
- * @param name - [host & remote] The name of the remote component. Use a unique name to expose multiple remote components from the same page.
- * @param isolate - [host] Whether to isolate the remote component's styles and scripts. Defaults to true.
- * @param mode - [host] The mode of the Shadow DOM. Defaults to `open`.
- * @param reset - [host] Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.
- * @param children - [host & remote] Either the content of the remote component. Or when src is supplied, the fallback content to display while the remote component is being fetched.
- * @returns Either a React component that renders the remote component or a Next.js component that exposes the children as a remote component.
+ * Dual-purpose Next.js App Router component: **host** (with `src`) or
+ * **remote** (with `children` only). Props are documented on the underlying
+ * types — see {@link RemoteComponentAppServerProps} and
+ * {@link RemoteComponentRenderProps}.
  *
  * @example
- *
- * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component without the `src` prop:
- *
  * ```tsx
- * import { RemoteComponent } from 'remote-components/next';
+ * // Host — consume a remote component
+ * <RemoteComponent src="/other-app/components/header" />
  *
- * export default function MyPage() {
- *   return (
- *     <RemoteComponent>
- *       <h1>Hello from the remote component!</h1>
- *       <p>This is a remote component that can be used in a host application.</p>
- *     </RemoteComponent>
- *   );
- * }
+ * // Remote — expose children as a remote component
+ * <RemoteComponent>
+ *   <h1>Hello from the remote!</h1>
+ * </RemoteComponent>
  * ```
- *
- * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from another application with the `src` prop:
- *
- * ```tsx
- * import { RemoteComponent } from 'remote-components/next';
- *
- * export default function MyPage() {
- *  return (
- *   <>
- *     <RemoteComponent src="https://example.com/remote-component" />
- *   </>
- *  );
- * }
- * ```
- *
- * The `children` of the `<RemoteComponent>` will be exposed as a remote component or it will be used as the loading fallback when consuming a remote component.
  */
 declare function RemoteComponent(props: RemoteComponentProps): Promise<React.ReactElement>;
 

package/dist/next/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/index.tsx"],"sourcesContent":["import 'remote-components/shared/remote/wrapper';\nimport type { RemoteComponent as RemoteComponentRenderType } from '#internal/next/remote/render-server';\nimport { RemoteComponentsError } from '#internal/shared/error';\nimport type { RemoteComponent as RemoteComponentAppServerType } from '#remote-components/next/host/app-router-server';\n\ntype RemoteComponentAppServerProps = Parameters<\n  typeof RemoteComponentAppServerType\n>[0];\ntype RemoteComponentRenderProps = Parameters<\n  typeof RemoteComponentRenderType\n>[0];\ntype RemoteComponentProps =\n  | RemoteComponentAppServerProps\n  | RemoteComponentRenderProps;\n\n/**\n * RemoteComponent is a Next.js component that exposes or consumes a remote component\n * that can be used in a host application.\n *\n * @param src - [host] The source URL of the remote component. Use this to consume a remote component from another application.\n * @param name - [host & remote] The name of the remote component. Use a unique name to expose multiple remote components from the same page.\n * @param isolate - [host] Whether to isolate the remote component's styles and scripts. Defaults to true.\n * @param mode - [host] The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - [host] Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param children - [host & remote] Either the content of the remote component. Or when src is supplied, the fallback content to display while the remote component is being fetched.\n * @returns Either a React component that renders the remote component or a Next.js component that exposes the children as a remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to expose the children as a remote component without the `src` prop:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *   return (\n *     <RemoteComponent>\n *       <h1>Hello from the remote component!</h1>\n *       <p>This is a remote component that can be used in a host application.</p>\n *     </RemoteComponent>\n *   );\n * }\n * ```\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from another application with the `src` prop:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next';\n *\n * export default function MyPage() {\n *  return (\n *   <>\n *     <RemoteComponent src=\"https://example.com/remote-component\" />\n *   </>\n *  );\n * }\n * ```\n *\n * The `children` of the `<RemoteComponent>` will be exposed as a remote component or it will be used as the loading fallback when consuming a remote component.\n */\nexport async function RemoteComponent(\n  props: RemoteComponentProps,\n): Promise<React.ReactElement> {\n  if ('src' in props) {\n    const { RemoteComponent: RemoteComponentAppServer } = await import(\n      '#remote-components/next/host/app-router-server'\n    );\n    return RemoteComponentAppServer(props);\n  }\n\n  if ('children' in props) {\n    const { RemoteComponent: RemoteComponentRender } = await import(\n      '#internal/next/remote/render-server'\n    );\n    return RemoteComponentRender(props);\n  }\n\n  throw new RemoteComponentsError(\n    'Invalid props passed to <RemoteComponent>. Expected either \"src\" or \"children\".',\n  );\n}\n"],"mappings":"AAAA,OAAO;AAEP,SAAS,6BAA6B;AA0DtC,eAAsB,gBACpB,OAC6B;AAC7B,MAAI,SAAS,OAAO;AAClB,UAAM,EAAE,iBAAiB,yBAAyB,IAAI,MAAM,OAC1D,gDACF;AACA,WAAO,yBAAyB,KAAK;AAAA,EACvC;AAEA,MAAI,cAAc,OAAO;AACvB,UAAM,EAAE,iBAAiB,sBAAsB,IAAI,MAAM,OACvD,qCACF;AACA,WAAO,sBAAsB,KAAK;AAAA,EACpC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/next/index.tsx"],"sourcesContent":["import 'remote-components/shared/remote/wrapper';\nimport type { RemoteComponent as RemoteComponentRenderType } from '#internal/next/remote/render-server';\nimport { RemoteComponentsError } from '#internal/shared/error';\nimport type { RemoteComponent as RemoteComponentAppServerType } from '#remote-components/next/host/app-router-server';\n\ntype RemoteComponentAppServerProps = Parameters<\n  typeof RemoteComponentAppServerType\n>[0];\ntype RemoteComponentRenderProps = Parameters<\n  typeof RemoteComponentRenderType\n>[0];\ntype RemoteComponentProps =\n  | RemoteComponentAppServerProps\n  | RemoteComponentRenderProps;\n\n/**\n * Dual-purpose Next.js App Router component: **host** (with `src`) or\n * **remote** (with `children` only). Props are documented on the underlying\n * types — see {@link RemoteComponentAppServerProps} and\n * {@link RemoteComponentRenderProps}.\n *\n * @example\n * ```tsx\n * // Host — consume a remote component\n * <RemoteComponent src=\"/other-app/components/header\" />\n *\n * // Remote — expose children as a remote component\n * <RemoteComponent>\n *   <h1>Hello from the remote!</h1>\n * </RemoteComponent>\n * ```\n */\nexport async function RemoteComponent(\n  props: RemoteComponentProps,\n): Promise<React.ReactElement> {\n  if ('src' in props) {\n    const { RemoteComponent: RemoteComponentAppServer } = await import(\n      '#remote-components/next/host/app-router-server'\n    );\n    return RemoteComponentAppServer(props);\n  }\n\n  if ('children' in props) {\n    const { RemoteComponent: RemoteComponentRender } = await import(\n      '#internal/next/remote/render-server'\n    );\n    return RemoteComponentRender(props);\n  }\n\n  throw new RemoteComponentsError(\n    'Invalid props passed to <RemoteComponent>. Expected either \"src\" or \"children\".',\n  );\n}\n"],"mappings":"AAAA,OAAO;AAEP,SAAS,6BAA6B;AA8BtC,eAAsB,gBACpB,OAC6B;AAC7B,MAAI,SAAS,OAAO;AAClB,UAAM,EAAE,iBAAiB,yBAAyB,IAAI,MAAM,OAC1D,gDACF;AACA,WAAO,yBAAyB,KAAK;AAAA,EACvC;AAEA,MAAI,cAAc,OAAO;AACvB,UAAM,EAAE,iBAAiB,sBAAsB,IAAI,MAAM,OACvD,qCACF;AACA,WAAO,sBAAsB,KAAK;AAAA,EACpC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;","names":[]}