remote-components 0.1.0 → 0.1.2

package/dist/internal/shared/client/proxy-through-host.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/shared/client/proxy-through-host.ts"],"sourcesContent":["import { generateProtectedRcFallbackSrc } from './protected-rc-fallback';\n\n/**\n * Intercepts client-side URL resolution for remote component resources.\n * Called before each asset (script, stylesheet, chunk, module, image) is fetched.\n *\n * Return a new URL string to redirect the fetch (e.g., through a proxy),\n * or undefined to use the original URL.\n *\n * @param remoteSrc - The `src` of the remote component being loaded\n * @param url - The asset URL about to be fetched\n *\n * @example\n * // Proxy all assets from the remote's origin through the host\n * const resolveClientUrl = (remoteSrc, url) => {\n *   const remoteOrigin = new URL(remoteSrc).origin;\n *   const parsed = new URL(url);\n *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {\n *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;\n *   }\n * };\n */\nexport type ResolveClientUrl = (\n  remoteSrc: string,\n  url: string,\n) => string | undefined;\n\n/**\n * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.\n * Used by internal loaders that don't need to know the remote src.\n */\nexport type InternalResolveClientUrl = (url: string) => string | undefined;\n\n/**\n * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an\n * `InternalResolveClientUrl` that only needs the asset URL.\n */\nexport function withRemoteSrc(\n  resolveClientUrl: ResolveClientUrl,\n  remoteSrc: string,\n): InternalResolveClientUrl {\n  return (url) => resolveClientUrl(remoteSrc, url);\n}\n\n/**\n * A `ResolveClientUrl` that proxies cross-origin asset URLs\n * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).\n * Same-origin URLs are left unchanged.\n *\n * On Vercel preview deployments, deployment protection blocks direct cross-origin\n * asset fetches. This function proxies those requests through the host so they\n * inherit the host's authentication cookies.\n *\n * Requires `withRemoteComponentsHost` middleware on the host to handle the\n * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can\n * be proxied.\n *\n * @example\n * ```tsx\n * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';\n *\n * <RemoteComponent\n *   src=\"https://remote-app.com/components/header\"\n *   resolveClientUrl={proxyClientRequestsThroughHost}\n * />\n * ```\n */\nexport const proxyClientRequestsThroughHost: ResolveClientUrl = (\n  remoteSrc,\n  url,\n) => {\n  if (typeof location === 'undefined') {\n    return undefined;\n  }\n  const remoteOrigin = new URL(remoteSrc, location.href).origin;\n  if (remoteOrigin === location.origin) {\n    return undefined;\n  }\n  try {\n    const parsed = new URL(url, location.href);\n    if (parsed.origin === remoteOrigin) {\n      return generateProtectedRcFallbackSrc(url);\n    }\n  } catch {\n    // If URL parsing fails, return undefined to use the original\n  }\n  return undefined;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAA+C;AAqCxC,SAAS,cACd,kBACA,WAC0B;AAC1B,SAAO,CAAC,QAAQ,iBAAiB,WAAW,GAAG;AACjD;AAyBO,MAAM,iCAAmD,CAC9D,WACA,QACG;AACH,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,QAAM,eAAe,IAAI,IAAI,WAAW,SAAS,IAAI,EAAE;AACvD,MAAI,iBAAiB,SAAS,QAAQ;AACpC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI;AACzC,QAAI,OAAO,WAAW,cAAc;AAClC,iBAAO,6DAA+B,GAAG;AAAA,IAC3C;AAAA,EACF,QAAE;AAAA,EAEF;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/shared/client/proxy-through-host.ts"],"sourcesContent":["import { generateProtectedRcFallbackSrc } from './protected-rc-fallback';\n\n/**\n * Intercepts client-side URL resolution for remote component resources.\n * Called before each asset (script, stylesheet, chunk, module, image) is fetched.\n *\n * Return a new URL string to redirect the fetch (e.g., through a proxy),\n * or undefined to use the original URL.\n *\n * @param remoteSrc - The `src` of the remote component being loaded\n * @param url - The asset URL about to be fetched\n *\n * @example\n * // Proxy all assets from the remote's origin through the host\n * const resolveClientUrl = (remoteSrc, url) => {\n *   const remoteOrigin = new URL(remoteSrc).origin;\n *   const parsed = new URL(url);\n *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {\n *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;\n *   }\n * };\n */\nexport type ResolveClientUrl = (\n  remoteSrc: string,\n  url: string,\n) => string | undefined;\n\n/**\n * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.\n * Used by internal loaders that don't need to know the remote src.\n */\nexport type InternalResolveClientUrl = (url: string) => string | undefined;\n\n/**\n * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an\n * `InternalResolveClientUrl` that only needs the asset URL.\n *\n * Only invokes the callback for URLs whose origin matches the remote\n * component's origin. Third-party scripts (e.g. `vercel.live` toolbar)\n * are left untouched. To proxy additional domains in the future, a\n * field or flag can be added to the host configuration.\n */\nexport function withRemoteSrc(\n  resolveClientUrl: ResolveClientUrl,\n  remoteSrc: string,\n): InternalResolveClientUrl {\n  const remoteOrigin = parseOrigin(remoteSrc);\n  return (url) => {\n    const urlOrigin = parseOrigin(url);\n    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {\n      return undefined;\n    }\n    return resolveClientUrl(remoteSrc, url);\n  };\n}\n\nfunction parseOrigin(url: string): string | undefined {\n  try {\n    return new URL(url).origin;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A `ResolveClientUrl` that proxies cross-origin asset URLs\n * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).\n * Same-origin URLs are left unchanged.\n *\n * On Vercel preview deployments, deployment protection blocks direct cross-origin\n * asset fetches. This function proxies those requests through the host so they\n * inherit the host's authentication cookies.\n *\n * Requires `withRemoteComponentsHost` middleware on the host to handle the\n * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can\n * be proxied.\n *\n * @example\n * ```tsx\n * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';\n *\n * <RemoteComponent\n *   src=\"https://remote-app.com/components/header\"\n *   resolveClientUrl={proxyClientRequestsThroughHost}\n * />\n * ```\n */\nexport const proxyClientRequestsThroughHost: ResolveClientUrl = (\n  remoteSrc,\n  url,\n) => {\n  if (typeof location === 'undefined') {\n    return undefined;\n  }\n  const remoteOrigin = new URL(remoteSrc, location.href).origin;\n  if (remoteOrigin === location.origin) {\n    return undefined;\n  }\n  try {\n    const parsed = new URL(url, location.href);\n    if (parsed.origin === remoteOrigin) {\n      return generateProtectedRcFallbackSrc(url);\n    }\n  } catch {\n    // If URL parsing fails, return undefined to use the original\n  }\n  return undefined;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAA+C;AA0CxC,SAAS,cACd,kBACA,WAC0B;AAC1B,QAAM,eAAe,YAAY,SAAS;AAC1C,SAAO,CAAC,QAAQ;AACd,UAAM,YAAY,YAAY,GAAG;AACjC,QAAI,gBAAgB,aAAa,cAAc,cAAc;AAC3D,aAAO;AAAA,IACT;AACA,WAAO,iBAAiB,WAAW,GAAG;AAAA,EACxC;AACF;AAEA,SAAS,YAAY,KAAiC;AACpD,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,QAAE;AACA,WAAO;AAAA,EACT;AACF;AAyBO,MAAM,iCAAmD,CAC9D,WACA,QACG;AACH,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,QAAM,eAAe,IAAI,IAAI,WAAW,SAAS,IAAI,EAAE;AACvD,MAAI,iBAAiB,SAAS,QAAQ;AACpC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI;AACzC,QAAI,OAAO,WAAW,cAAc;AAClC,iBAAO,6DAA+B,GAAG;AAAA,IAC3C;AAAA,EACF,QAAE;AAAA,EAEF;AACA,SAAO;AACT;","names":[]}

package/dist/internal/shared/client/proxy-through-host.d.ts

@@ -27,6 +27,11 @@ type InternalResolveClientUrl = (url: string) => string | undefined;
 /**
  * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an
  * `InternalResolveClientUrl` that only needs the asset URL.
+ *
+ * Only invokes the callback for URLs whose origin matches the remote
+ * component's origin. Third-party scripts (e.g. `vercel.live` toolbar)
+ * are left untouched. To proxy additional domains in the future, a
+ * field or flag can be added to the host configuration.
  */
 declare function withRemoteSrc(resolveClientUrl: ResolveClientUrl, remoteSrc: string): InternalResolveClientUrl;
 /**

package/dist/internal/shared/client/proxy-through-host.js

@@ -1,6 +1,20 @@
 import { generateProtectedRcFallbackSrc } from "./protected-rc-fallback";
 function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  return (url) => resolveClientUrl(remoteSrc, url);
+  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;
+  }
 }
 const proxyClientRequestsThroughHost = (remoteSrc, url) => {
   if (typeof location === "undefined") {

package/dist/internal/shared/client/proxy-through-host.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/shared/client/proxy-through-host.ts"],"sourcesContent":["import { generateProtectedRcFallbackSrc } from './protected-rc-fallback';\n\n/**\n * Intercepts client-side URL resolution for remote component resources.\n * Called before each asset (script, stylesheet, chunk, module, image) is fetched.\n *\n * Return a new URL string to redirect the fetch (e.g., through a proxy),\n * or undefined to use the original URL.\n *\n * @param remoteSrc - The `src` of the remote component being loaded\n * @param url - The asset URL about to be fetched\n *\n * @example\n * // Proxy all assets from the remote's origin through the host\n * const resolveClientUrl = (remoteSrc, url) => {\n *   const remoteOrigin = new URL(remoteSrc).origin;\n *   const parsed = new URL(url);\n *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {\n *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;\n *   }\n * };\n */\nexport type ResolveClientUrl = (\n  remoteSrc: string,\n  url: string,\n) => string | undefined;\n\n/**\n * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.\n * Used by internal loaders that don't need to know the remote src.\n */\nexport type InternalResolveClientUrl = (url: string) => string | undefined;\n\n/**\n * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an\n * `InternalResolveClientUrl` that only needs the asset URL.\n */\nexport function withRemoteSrc(\n  resolveClientUrl: ResolveClientUrl,\n  remoteSrc: string,\n): InternalResolveClientUrl {\n  return (url) => resolveClientUrl(remoteSrc, url);\n}\n\n/**\n * A `ResolveClientUrl` that proxies cross-origin asset URLs\n * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).\n * Same-origin URLs are left unchanged.\n *\n * On Vercel preview deployments, deployment protection blocks direct cross-origin\n * asset fetches. This function proxies those requests through the host so they\n * inherit the host's authentication cookies.\n *\n * Requires `withRemoteComponentsHost` middleware on the host to handle the\n * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can\n * be proxied.\n *\n * @example\n * ```tsx\n * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';\n *\n * <RemoteComponent\n *   src=\"https://remote-app.com/components/header\"\n *   resolveClientUrl={proxyClientRequestsThroughHost}\n * />\n * ```\n */\nexport const proxyClientRequestsThroughHost: ResolveClientUrl = (\n  remoteSrc,\n  url,\n) => {\n  if (typeof location === 'undefined') {\n    return undefined;\n  }\n  const remoteOrigin = new URL(remoteSrc, location.href).origin;\n  if (remoteOrigin === location.origin) {\n    return undefined;\n  }\n  try {\n    const parsed = new URL(url, location.href);\n    if (parsed.origin === remoteOrigin) {\n      return generateProtectedRcFallbackSrc(url);\n    }\n  } catch {\n    // If URL parsing fails, return undefined to use the original\n  }\n  return undefined;\n};\n"],"mappings":"AAAA,SAAS,sCAAsC;AAqCxC,SAAS,cACd,kBACA,WAC0B;AAC1B,SAAO,CAAC,QAAQ,iBAAiB,WAAW,GAAG;AACjD;AAyBO,MAAM,iCAAmD,CAC9D,WACA,QACG;AACH,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,QAAM,eAAe,IAAI,IAAI,WAAW,SAAS,IAAI,EAAE;AACvD,MAAI,iBAAiB,SAAS,QAAQ;AACpC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI;AACzC,QAAI,OAAO,WAAW,cAAc;AAClC,aAAO,+BAA+B,GAAG;AAAA,IAC3C;AAAA,EACF,QAAE;AAAA,EAEF;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/shared/client/proxy-through-host.ts"],"sourcesContent":["import { generateProtectedRcFallbackSrc } from './protected-rc-fallback';\n\n/**\n * Intercepts client-side URL resolution for remote component resources.\n * Called before each asset (script, stylesheet, chunk, module, image) is fetched.\n *\n * Return a new URL string to redirect the fetch (e.g., through a proxy),\n * or undefined to use the original URL.\n *\n * @param remoteSrc - The `src` of the remote component being loaded\n * @param url - The asset URL about to be fetched\n *\n * @example\n * // Proxy all assets from the remote's origin through the host\n * const resolveClientUrl = (remoteSrc, url) => {\n *   const remoteOrigin = new URL(remoteSrc).origin;\n *   const parsed = new URL(url);\n *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {\n *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;\n *   }\n * };\n */\nexport type ResolveClientUrl = (\n  remoteSrc: string,\n  url: string,\n) => string | undefined;\n\n/**\n * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.\n * Used by internal loaders that don't need to know the remote src.\n */\nexport type InternalResolveClientUrl = (url: string) => string | undefined;\n\n/**\n * Binds a `ResolveClientUrl` to a specific `remoteSrc`, producing an\n * `InternalResolveClientUrl` that only needs the asset URL.\n *\n * Only invokes the callback for URLs whose origin matches the remote\n * component's origin. Third-party scripts (e.g. `vercel.live` toolbar)\n * are left untouched. To proxy additional domains in the future, a\n * field or flag can be added to the host configuration.\n */\nexport function withRemoteSrc(\n  resolveClientUrl: ResolveClientUrl,\n  remoteSrc: string,\n): InternalResolveClientUrl {\n  const remoteOrigin = parseOrigin(remoteSrc);\n  return (url) => {\n    const urlOrigin = parseOrigin(url);\n    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {\n      return undefined;\n    }\n    return resolveClientUrl(remoteSrc, url);\n  };\n}\n\nfunction parseOrigin(url: string): string | undefined {\n  try {\n    return new URL(url).origin;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A `ResolveClientUrl` that proxies cross-origin asset URLs\n * through the host's protected remote fetch endpoint (`/rc-fetch-protected-remote`).\n * Same-origin URLs are left unchanged.\n *\n * On Vercel preview deployments, deployment protection blocks direct cross-origin\n * asset fetches. This function proxies those requests through the host so they\n * inherit the host's authentication cookies.\n *\n * Requires `withRemoteComponentsHost` middleware on the host to handle the\n * proxied requests. Configure `allowedProxyUrls` to restrict which URLs can\n * be proxied.\n *\n * @example\n * ```tsx\n * import { RemoteComponent, proxyClientRequestsThroughHost } from 'remote-components/react';\n *\n * <RemoteComponent\n *   src=\"https://remote-app.com/components/header\"\n *   resolveClientUrl={proxyClientRequestsThroughHost}\n * />\n * ```\n */\nexport const proxyClientRequestsThroughHost: ResolveClientUrl = (\n  remoteSrc,\n  url,\n) => {\n  if (typeof location === 'undefined') {\n    return undefined;\n  }\n  const remoteOrigin = new URL(remoteSrc, location.href).origin;\n  if (remoteOrigin === location.origin) {\n    return undefined;\n  }\n  try {\n    const parsed = new URL(url, location.href);\n    if (parsed.origin === remoteOrigin) {\n      return generateProtectedRcFallbackSrc(url);\n    }\n  } catch {\n    // If URL parsing fails, return undefined to use the original\n  }\n  return undefined;\n};\n"],"mappings":"AAAA,SAAS,sCAAsC;AA0CxC,SAAS,cACd,kBACA,WAC0B;AAC1B,QAAM,eAAe,YAAY,SAAS;AAC1C,SAAO,CAAC,QAAQ;AACd,UAAM,YAAY,YAAY,GAAG;AACjC,QAAI,gBAAgB,aAAa,cAAc,cAAc;AAC3D,aAAO;AAAA,IACT;AACA,WAAO,iBAAiB,WAAW,GAAG;AAAA,EACxC;AACF;AAEA,SAAS,YAAY,KAAiC;AACpD,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,QAAE;AACA,WAAO;AAAA,EACT;AACF;AAyBO,MAAM,iCAAmD,CAC9D,WACA,QACG;AACH,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,QAAM,eAAe,IAAI,IAAI,WAAW,SAAS,IAAI,EAAE;AACvD,MAAI,iBAAiB,SAAS,QAAQ;AACpC,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI;AACzC,QAAI,OAAO,WAAW,cAAc;AAClC,aAAO,+BAA+B,GAAG;AAAA,IAC3C;AAAA,EACF,QAAE;AAAA,EAEF;AACA,SAAO;AACT;","names":[]}