remote-components 0.2.1 → 0.2.2

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

@@ -61,10 +61,12 @@ var init_app = __esm({
 // src/host/nextjs/app-client-only.tsx
 var app_client_only_exports = {};
 __export(app_client_only_exports, {
-  ConsumeRemoteComponent: () => ConsumeRemoteComponent2
+  ConsumeRemoteComponent: () => ConsumeRemoteComponent2,
+  RemoteComponentsClientProvider: () => RemoteComponentsClientProvider
 });
 module.exports = __toCommonJS(app_client_only_exports);
 var Image = __toESM(require("next/image"), 1);
+var import_react5 = require("react");
 
 // src/utils/logger.ts
 init_constants();
@@ -411,10 +413,11 @@ function sharedPolyfills(shared2, resolveClientUrl) {
 
 // src/host/nextjs/image-impl.tsx
 var import_jsx_runtime2 = require("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);
@@ -425,7 +428,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) {
@@ -435,40 +439,22 @@ function imageImpl2(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(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
+var import_context3 = require("#internal/host/react/context");
 
 // src/host/react/index.tsx
 var import_react3 = require("react");
 var import_react_dom = require("react-dom");
+var import_context2 = require("#internal/host/react/context");
 
 // src/host/server/fetch-headers.ts
 function remoteFetchHeaders() {
@@ -2003,13 +1989,40 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
 // src/host/react/hooks/use-resolve-client-url.ts
 var import_react = require("react");
 var import_context = require("#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 } = (0, import_context.useRemoteComponentsContext)();
-  const resolveClientUrl = prop ?? contextValue;
-  return (0, import_react.useMemo)(
-    () => bindResolveClientUrl(resolveClientUrl, urlHref),
-    [resolveClientUrl, urlHref]
+  const raw = prop ?? contextValue;
+  const bound = (0, import_react.useMemo)(
+    () => bindResolveClientUrl(raw, urlHref),
+    [raw, urlHref]
   );
+  return { bound, raw };
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -2094,9 +2107,9 @@ function ConsumeRemoteComponent({
   isolate,
   mode = "open",
   reset,
-  credentials = "same-origin",
+  credentials: credentialsProp,
   name: nameProp = "__vercel_remote_component",
-  shared: shared2 = {},
+  shared: sharedProp,
   children,
   onBeforeLoad,
   onLoad,
@@ -2104,9 +2117,12 @@ function ConsumeRemoteComponent({
   onChange,
   onRequest,
   onResponse,
-  resolveClientUrl: _resolveClientUrl
+  resolveClientUrl: resolveClientUrlProp
 }) {
   const instanceId = (0, import_react3.useId)();
+  const { credentials: contextCredentials, shared: contextShared } = (0, import_context2.useRemoteComponentsContext)();
+  const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
+  const shared2 = sharedProp ?? contextShared ?? {};
   const name = (0, import_react3.useMemo)(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2115,7 +2131,10 @@ function ConsumeRemoteComponent({
     null
   );
   const url = (0, import_react3.useMemo)(() => 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
@@ -2717,22 +2736,39 @@ var sharedModules = async (userShared, resolveClientUrl) => {
     ...resolvedUserShared
   };
 };
+function RemoteComponentsClientProvider({
+  shared: shared2,
+  resolveClientUrl,
+  children,
+  ...props
+}) {
+  const mergedShared = (0, import_react5.useMemo)(
+    () => sharedModules(shared2, resolveClientUrl),
+    [shared2, resolveClientUrl]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_context3.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__ */ (0, import_jsx_runtime4.jsx)(
     ConsumeRemoteComponent,
     {
       ...props,
-      shared: sharedModules(props.shared, resolveClientUrl)
+      shared: sharedModules(props.shared, props.resolveClientUrl)
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ConsumeRemoteComponent
+  ConsumeRemoteComponent,
+  RemoteComponentsClientProvider
 });
 //# sourceMappingURL=client-only.cjs.map