remote-components 0.2.0 → 0.2.2

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

@@ -1,16 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ConsumeRemoteComponentProps } from '../../react.js';
+import React from 'react';
+import { C as ConsumeClientOnlyConfig, a as ConsumeRemoteComponentProps } from '../../../index-4c65355c.js';
 
 /**
- * RemoteComponent - Client-side component for rendering remote components
+ * Provider for Next.js App Router hosts. Provides real Next.js implementations
+ * of `next/image`, `next/navigation`, `next/link`, etc. to all nested
+ * `<ConsumeRemoteComponent>` instances.
  *
- * This component is used in Next.js App Router to render remote components.
- * It supports both Next.js App Router and Pages Router based components.
+ * Works in both Server and Client Components — set it up once in your layout
+ * and use `<ConsumeRemoteComponent>` from `remote-components/react` everywhere:
  *
- * @param props - The props for the remote component.
- * @returns The rendered remote component.
+ * ```tsx
+ * import { RemoteComponentsClientProvider } from 'remote-components/host/nextjs/app/client-only';
+ *
+ * <RemoteComponentsClientProvider resolveClientUrl={proxyClientRequestsThroughHost}>
+ *   {children}
+ * </RemoteComponentsClientProvider>
+ * ```
+ */
+declare function RemoteComponentsClientProvider({ shared, resolveClientUrl, children, ...props }: ConsumeClientOnlyConfig & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * `ConsumeRemoteComponent` for Next.js App Router hosts. Provides real Next.js
+ * implementations of `next/image`, `next/navigation`, `next/link`, etc.
+ *
+ * The provider approach is recommended because it works in both Server and Client
+ * Components — set up `RemoteComponentsClientProvider` from this module once in
+ * your layout, and use `<ConsumeRemoteComponent>` from `remote-components/react`
+ * everywhere. Import this component only when adding a provider is not practical.
  */
-declare function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+declare function ConsumeRemoteComponent(props: ConsumeRemoteComponentProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
 
-export { ConsumeRemoteComponent };
+export { ConsumeRemoteComponent, RemoteComponentsClientProvider };

package/dist/host/nextjs/app/client-only.js

@@ -38,6 +38,7 @@ var init_app = __esm({
 
 // src/host/nextjs/app-client-only.tsx
 import * as Image from "next/image";
+import { useMemo as useMemo3 } from "react";
 
 // src/utils/logger.ts
 init_constants();
@@ -123,6 +124,11 @@ async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
   }
   return fallback;
 }
+function failedProxiedAssetError(kind, url, resolvedUrl) {
+  return new RemoteComponentsError(
+    `Failed to load ${kind} "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured, "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher, and the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+  );
+}
 function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
   if (status === 404) {
     return new RemoteComponentsError(
@@ -174,7 +180,7 @@ function warnCrossOriginFetchError(logLocation, url) {
     }
     logWarn(
       logLocation,
-      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHostProxy middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+      `Failed to fetch cross-origin resource "${parsed.href}". To load assets from a protected deployment, two steps are required: (1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. See: ${CORS_DOCS_URL}`
     );
   } catch {
   }
@@ -379,10 +385,11 @@ function sharedPolyfills(shared2, resolveClientUrl) {
 
 // src/host/nextjs/image-impl.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var getBundleUrl = (bundle) => globalThis.__remote_bundle_url__?.[bundle];
 function createRemoteLoader(bundle, resolveClientUrl) {
   return ({ src, width, quality }) => {
-    const self = globalThis;
-    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+    const bundleUrl = getBundleUrl(bundle);
+    const origin = bundleUrl?.origin ?? "";
     let imageUrl = src;
     try {
       const parsed = new URL(src);
@@ -393,7 +400,8 @@ function createRemoteLoader(bundle, resolveClientUrl) {
     }
     const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(imageUrl)?.groups ?? {};
     const url = `${origin}${assetPrefix ?? ""}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${quality ?? 75}`;
-    return resolveClientUrl?.(url) ?? url;
+    const remoteSrc = bundleUrl?.href ?? url;
+    return resolveClientUrl?.(remoteSrc, url) ?? url;
   };
 }
 function imageImpl2(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
@@ -403,36 +411,17 @@ function imageImpl2(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
       return /* @__PURE__ */ jsx2(ImageComponent, { loader: remoteLoader, ...props });
     }
     const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);
-    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;
+    const bundleUrl = getBundleUrl(bundle);
+    const remoteSrc = bundleUrl?.href ?? rawSrc;
+    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;
     return /* @__PURE__ */ jsx2(ImageComponent, { ...props, src });
   };
   component.default = component;
   return component;
 }
 
-// src/runtime/url/resolve-client-url.ts
-function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  const remoteOrigin = parseOrigin(remoteSrc);
-  return (url) => {
-    const urlOrigin = parseOrigin(url);
-    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
-      return void 0;
-    }
-    return resolveClientUrl(remoteSrc, url);
-  };
-}
-function parseOrigin(url) {
-  try {
-    return new URL(url).origin;
-  } catch {
-    return void 0;
-  }
-}
-
-// src/runtime/url/default-resolve-client-url.ts
-function bindResolveClientUrl(prop, remoteSrc) {
-  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
-}
+// src/host/nextjs/app-client-only.tsx
+import { RemoteComponentsContext } from "#internal/host/react/context";
 
 // src/host/react/index.tsx
 import {
@@ -445,6 +434,7 @@ import {
   useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
+import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
 
 // src/host/server/fetch-headers.ts
 function remoteFetchHeaders() {
@@ -756,6 +746,7 @@ import * as ReactDOM from "react-dom";
 import * as ReactDOMClient from "react-dom/client";
 
 // src/config/webpack/apply-shared-modules.ts
+var DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
 function applySharedModules(bundle, resolve) {
   logDebug(
     "SharedModules",
@@ -799,13 +790,16 @@ function applySharedModules(bundle, resolve) {
         } else {
           logWarn(
             "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}"`
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
           );
         }
       }
     }
   } else {
-    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
     logDebug(
       "SharedModules",
       `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
@@ -991,9 +985,6 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/runtime/turbopack/chunk-loader.ts
-init_constants();
-
 // src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
 var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -1062,11 +1053,7 @@ function createChunkLoader(runtime, resolveClientUrl) {
       }).then(resolve).catch((error) => {
         const isProxied = isProxiedUrl(resolvedUrl);
         if (isProxied) {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-            )
-          );
+          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
         } else {
           warnCrossOriginFetchError("ChunkLoader", url);
           reject(error);
@@ -1444,6 +1431,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
 }
 
 // src/runtime/turbopack/shared-modules.ts
+var DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
@@ -1494,7 +1482,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
             } else {
               logError(
                 "SharedModules",
-                `Host shared module "${module}" not found for ID ${id}`
+                `Host shared module "${module}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
               );
             }
           }
@@ -1511,7 +1499,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
         } else {
           logError(
             "SharedModules",
-            `Shared module "${module}" not found for "${bundle}"`
+            `Shared module "${module}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
           );
         }
       }
@@ -1659,7 +1647,6 @@ function createModuleRequire(runtime) {
 }
 
 // src/runtime/loaders/script-loader.ts
-init_constants();
 async function loadScripts(scripts, resolveClientUrl) {
   await Promise.all(
     scripts.map((script) => {
@@ -1675,11 +1662,7 @@ async function loadScripts(scripts, resolveClientUrl) {
         newScript.onerror = () => {
           const isProxied = isProxiedUrl(resolvedSrc);
           if (isProxied) {
-            reject(
-              new RemoteComponentsError(
-                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-              )
-            );
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
           } else {
             warnCrossOriginFetchError("ScriptLoader", newSrc);
             reject(
@@ -1986,13 +1969,40 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
 // src/host/react/hooks/use-resolve-client-url.ts
 import { useMemo } from "react";
 import { useRemoteComponentsContext } from "#internal/host/react/context";
+
+// src/runtime/url/resolve-client-url.ts
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/runtime/url/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/host/react/hooks/use-resolve-client-url.ts
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
-  const resolveClientUrl = prop ?? contextValue;
-  return useMemo(
-    () => bindResolveClientUrl(resolveClientUrl, urlHref),
-    [resolveClientUrl, urlHref]
+  const raw = prop ?? contextValue;
+  const bound = useMemo(
+    () => bindResolveClientUrl(raw, urlHref),
+    [raw, urlHref]
   );
+  return { bound, raw };
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -2074,9 +2084,9 @@ function ConsumeRemoteComponent({
   isolate,
   mode = "open",
   reset,
-  credentials = "same-origin",
+  credentials: credentialsProp,
   name: nameProp = "__vercel_remote_component",
-  shared: shared2 = {},
+  shared: sharedProp,
   children,
   onBeforeLoad,
   onLoad,
@@ -2084,9 +2094,12 @@ function ConsumeRemoteComponent({
   onChange,
   onRequest,
   onResponse,
-  resolveClientUrl: _resolveClientUrl
+  resolveClientUrl: resolveClientUrlProp
 }) {
   const instanceId = useId();
+  const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
+  const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
+  const shared2 = sharedProp ?? contextShared ?? {};
   const name = useMemo2(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2095,7 +2108,10 @@ function ConsumeRemoteComponent({
     null
   );
   const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
-  const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
+  const { bound: resolveClientUrl } = useResolveClientUrl(
+    resolveClientUrlProp,
+    url.href
+  );
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
   const keySuffix = `${escapeString(id)}_${escapeString(
     data?.name ?? name
@@ -2698,21 +2714,38 @@ var sharedModules = async (userShared, resolveClientUrl) => {
     ...resolvedUserShared
   };
 };
+function RemoteComponentsClientProvider({
+  shared: shared2,
+  resolveClientUrl,
+  children,
+  ...props
+}) {
+  const mergedShared = useMemo3(
+    () => sharedModules(shared2, resolveClientUrl),
+    [shared2, resolveClientUrl]
+  );
+  return /* @__PURE__ */ jsx4(
+    RemoteComponentsContext,
+    {
+      value: { shared: mergedShared, resolveClientUrl, ...props },
+      children
+    }
+  );
+}
 function ConsumeRemoteComponent2(props) {
   if (typeof props.src !== "string" && !(props.src instanceof URL)) {
     return props.children ?? null;
   }
-  const src = typeof props.src === "string" ? props.src : props.src.href;
-  const resolveClientUrl = props.resolveClientUrl ? bindResolveClientUrl(props.resolveClientUrl, src) : void 0;
   return /* @__PURE__ */ jsx4(
     ConsumeRemoteComponent,
     {
       ...props,
-      shared: sharedModules(props.shared, resolveClientUrl)
+      shared: sharedModules(props.shared, props.resolveClientUrl)
     }
   );
 }
 export {
-  ConsumeRemoteComponent2 as ConsumeRemoteComponent
+  ConsumeRemoteComponent2 as ConsumeRemoteComponent,
+  RemoteComponentsClientProvider
 };
 //# sourceMappingURL=client-only.js.map