remote-components 0.1.0 → 0.2.0

package/dist/internal/runtime/html/set-attributes-from-props.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/set-attributes-from-props.ts"],"sourcesContent":["// extracted from Next.js source at https://github.com/vercel/next.js/blob/canary/packages/next/src/client/set-attributes-from-props.ts\n\nconst DOMAttributeNames: Record<string, string> = {\n  acceptCharset: 'accept-charset',\n  className: 'class',\n  htmlFor: 'for',\n  httpEquiv: 'http-equiv',\n  noModule: 'noModule',\n};\n\nconst ignoreProps = [\n  'onLoad',\n  'onReady',\n  'dangerouslySetInnerHTML',\n  'children',\n  'onError',\n  'strategy',\n  'stylesheets',\n];\n\nfunction isBooleanScriptAttribute(\n  attr: string,\n): attr is 'async' | 'defer' | 'noModule' {\n  return ['async', 'defer', 'noModule'].includes(attr);\n}\n\nexport function setAttributesFromProps(el: HTMLElement, props: object) {\n  for (const [p, value] of Object.entries(props)) {\n    if (!Object.hasOwn(props, p)) continue;\n    if (ignoreProps.includes(p)) continue;\n\n    // we don't render undefined props to the DOM\n    if (value === undefined) {\n      continue;\n    }\n\n    const attr = DOMAttributeNames[p] || p.toLowerCase();\n\n    if (el.tagName === 'SCRIPT' && isBooleanScriptAttribute(attr)) {\n      // Correctly assign boolean script attributes\n      // https://github.com/vercel/next.js/pull/20748\n      (el as HTMLScriptElement)[attr] = Boolean(value);\n    } else {\n      el.setAttribute(attr, String(value));\n    }\n\n    // Remove falsy non-zero boolean attributes so they are correctly interpreted\n    // (e.g. if we set them to false, this coerces to the string \"false\", which the browser interprets as true)\n    if (\n      value === false ||\n      (el.tagName === 'SCRIPT' &&\n        isBooleanScriptAttribute(attr) &&\n        (!value || value === 'false'))\n    ) {\n      // Call setAttribute before, as we need to set and unset the attribute to override force async:\n      // https://html.spec.whatwg.org/multipage/scripting.html#script-force-async\n      el.setAttribute(attr, '');\n      el.removeAttribute(attr);\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,oBAA4C;AAAA,EAChD,eAAe;AAAA,EACf,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,yBACP,MACwC;AACxC,SAAO,CAAC,SAAS,SAAS,UAAU,EAAE,SAAS,IAAI;AACrD;AAEO,SAAS,uBAAuB,IAAiB,OAAe;AACrE,aAAW,CAAC,GAAG,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,QAAI,CAAC,OAAO,OAAO,OAAO,CAAC;AAAG;AAC9B,QAAI,YAAY,SAAS,CAAC;AAAG;AAG7B,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AAEA,UAAM,OAAO,kBAAkB,CAAC,KAAK,EAAE,YAAY;AAEnD,QAAI,GAAG,YAAY,YAAY,yBAAyB,IAAI,GAAG;AAG7D,MAAC,GAAyB,IAAI,IAAI,QAAQ,KAAK;AAAA,IACjD,OAAO;AACL,SAAG,aAAa,MAAM,OAAO,KAAK,CAAC;AAAA,IACrC;AAIA,QACE,UAAU,SACT,GAAG,YAAY,YACd,yBAAyB,IAAI,MAC5B,CAAC,SAAS,UAAU,UACvB;AAGA,SAAG,aAAa,MAAM,EAAE;AACxB,SAAG,gBAAgB,IAAI;AAAA,IACzB;AAAA,EACF;AACF;","names":[]}

package/dist/internal/runtime/html/set-attributes-from-props.d.ts

@@ -0,0 +1,3 @@
+declare function setAttributesFromProps(el: HTMLElement, props: object): void;
+
+export { setAttributesFromProps };

package/dist/internal/runtime/html/set-attributes-from-props.js

@@ -0,0 +1,44 @@
+const DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+const ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+export {
+  setAttributesFromProps
+};
+//# sourceMappingURL=set-attributes-from-props.js.map

package/dist/internal/runtime/html/set-attributes-from-props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/set-attributes-from-props.ts"],"sourcesContent":["// extracted from Next.js source at https://github.com/vercel/next.js/blob/canary/packages/next/src/client/set-attributes-from-props.ts\n\nconst DOMAttributeNames: Record<string, string> = {\n  acceptCharset: 'accept-charset',\n  className: 'class',\n  htmlFor: 'for',\n  httpEquiv: 'http-equiv',\n  noModule: 'noModule',\n};\n\nconst ignoreProps = [\n  'onLoad',\n  'onReady',\n  'dangerouslySetInnerHTML',\n  'children',\n  'onError',\n  'strategy',\n  'stylesheets',\n];\n\nfunction isBooleanScriptAttribute(\n  attr: string,\n): attr is 'async' | 'defer' | 'noModule' {\n  return ['async', 'defer', 'noModule'].includes(attr);\n}\n\nexport function setAttributesFromProps(el: HTMLElement, props: object) {\n  for (const [p, value] of Object.entries(props)) {\n    if (!Object.hasOwn(props, p)) continue;\n    if (ignoreProps.includes(p)) continue;\n\n    // we don't render undefined props to the DOM\n    if (value === undefined) {\n      continue;\n    }\n\n    const attr = DOMAttributeNames[p] || p.toLowerCase();\n\n    if (el.tagName === 'SCRIPT' && isBooleanScriptAttribute(attr)) {\n      // Correctly assign boolean script attributes\n      // https://github.com/vercel/next.js/pull/20748\n      (el as HTMLScriptElement)[attr] = Boolean(value);\n    } else {\n      el.setAttribute(attr, String(value));\n    }\n\n    // Remove falsy non-zero boolean attributes so they are correctly interpreted\n    // (e.g. if we set them to false, this coerces to the string \"false\", which the browser interprets as true)\n    if (\n      value === false ||\n      (el.tagName === 'SCRIPT' &&\n        isBooleanScriptAttribute(attr) &&\n        (!value || value === 'false'))\n    ) {\n      // Call setAttribute before, as we need to set and unset the attribute to override force async:\n      // https://html.spec.whatwg.org/multipage/scripting.html#script-force-async\n      el.setAttribute(attr, '');\n      el.removeAttribute(attr);\n    }\n  }\n}\n"],"mappings":"AAEA,MAAM,oBAA4C;AAAA,EAChD,eAAe;AAAA,EACf,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,yBACP,MACwC;AACxC,SAAO,CAAC,SAAS,SAAS,UAAU,EAAE,SAAS,IAAI;AACrD;AAEO,SAAS,uBAAuB,IAAiB,OAAe;AACrE,aAAW,CAAC,GAAG,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,QAAI,CAAC,OAAO,OAAO,OAAO,CAAC;AAAG;AAC9B,QAAI,YAAY,SAAS,CAAC;AAAG;AAG7B,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AAEA,UAAM,OAAO,kBAAkB,CAAC,KAAK,EAAE,YAAY;AAEnD,QAAI,GAAG,YAAY,YAAY,yBAAyB,IAAI,GAAG;AAG7D,MAAC,GAAyB,IAAI,IAAI,QAAQ,KAAK;AAAA,IACjD,OAAO;AACL,SAAG,aAAa,MAAM,OAAO,KAAK,CAAC;AAAA,IACrC;AAIA,QACE,UAAU,SACT,GAAG,YAAY,YACd,yBAAyB,IAAI,MAC5B,CAAC,SAAS,UAAU,UACvB;AAGA,SAAG,aAAa,MAAM,EAAE;AACxB,SAAG,gBAAgB,IAAI;AAAA,IACzB;AAAA,EACF;AACF;","names":[]}

package/dist/internal/runtime/loaders/component-loader.cjs

@@ -0,0 +1,184 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var component_loader_exports = {};
+__export(component_loader_exports, {
+  loadRemoteComponent: () => loadRemoteComponent
+});
+module.exports = __toCommonJS(component_loader_exports);
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+var import_apply_shared_modules = require("#internal/config/webpack/apply-shared-modules");
+var import_next_client_pages_loader = require("#internal/config/webpack/next-client-pages-loader");
+var import_rsc = require("#internal/runtime/rsc");
+var import_webpack_runtime = require("#internal/runtime/turbopack/webpack-runtime");
+var import_error = require("#internal/utils/error");
+var import_logger = require("#internal/utils/logger");
+var import_script_loader = require("./script-loader");
+async function loadRemoteComponent({
+  url,
+  name,
+  rscName,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container,
+  resolveClientUrl
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      if (!self.__DISABLE_WEBPACK_EXEC__) {
+        self.__DISABLE_WEBPACK_EXEC__ = {};
+      }
+      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+      await (0, import_script_loader.loadScripts)(scripts, resolveClientUrl);
+    }
+    const hostShared = await shared;
+    (0, import_logger.logDebug)(
+      "ComponentLoader",
+      `loadRemoteComponent: bundle="${bundle}", name="${name}"`
+    );
+    (0, import_logger.logDebug)(
+      "ComponentLoader",
+      `Host shared modules available: ${Object.keys(hostShared)}`
+    );
+    (0, import_logger.logDebug)(
+      "ComponentLoader",
+      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
+    );
+    await (0, import_webpack_runtime.setupWebpackRuntime)(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      hostShared,
+      remoteShared,
+      resolveClientUrl
+    );
+    if (bundle) {
+      const resolve = {
+        "/react/index.js": React,
+        "/react/jsx-dev-runtime.js": JSXDevRuntime,
+        "/react/jsx-runtime.js": JSXRuntime,
+        "/react-dom/index.js": ReactDOM,
+        "/react-dom/client.js": ReactDOMClient,
+        ...Object.entries(remoteShared).reduce(
+          (acc, [key, value]) => {
+            if (typeof hostShared[value] !== "undefined") {
+              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+            } else {
+              (0, import_logger.logDebug)(
+                "ComponentLoader",
+                `Remote requests "${value}" but host doesn't provide it`
+              );
+            }
+            return acc;
+          },
+          {}
+        )
+      };
+      await Promise.all(
+        Object.entries(resolve).map(async ([key, value]) => {
+          if (typeof value === "function") {
+            resolve[key] = await value(bundle);
+          }
+          return Promise.resolve(value);
+        })
+      );
+      (0, import_apply_shared_modules.applySharedModules)(bundle, resolve);
+    } else {
+      (0, import_logger.logWarn)(
+        "ComponentLoader",
+        "No bundle specified, skipping shared module setup"
+      );
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(rscName ?? name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(rscName ?? name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: new import_error.RemoteComponentsError(
+        `Failed to load remote component "${name}".`,
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
+        }
+      )
+    };
+  }
+}
+async function importCreateFromReadableStream() {
+  try {
+    const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    return createFromReadableStream;
+  } catch {
+    const {
+      default: { createFromReadableStream }
+    } = await import("react-server-dom-webpack/client.browser");
+    return createFromReadableStream;
+  }
+}
+async function loadRSCComponent(rscName, data) {
+  const createFromReadableStream = await importCreateFromReadableStream();
+  if (typeof createFromReadableStream !== "function") {
+    throw new import_error.RemoteComponentsError(
+      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
+    );
+  }
+  const stream = (0, import_rsc.createRSCStream)(rscName, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name, container) {
+  const { Component, App } = (0, import_next_client_pages_loader.nextClientPagesLoader)(bundle, route, container);
+  if (!Component) {
+    throw new import_error.RemoteComponentsError(
+      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loadRemoteComponent
+});
+//# sourceMappingURL=component-loader.cjs.map

package/dist/internal/runtime/loaders/component-loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/loaders/component-loader.ts"],"sourcesContent":["import * as React from 'react';\nimport * as JSXDevRuntime from 'react/jsx-dev-runtime';\nimport * as JSXRuntime from 'react/jsx-runtime';\nimport * as ReactDOM from 'react-dom';\nimport * as ReactDOMClient from 'react-dom/client';\nimport { applySharedModules } from '#internal/config/webpack/apply-shared-modules';\nimport { nextClientPagesLoader } from '#internal/config/webpack/next-client-pages-loader';\nimport type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ConsumeLoaderPayload } from '#internal/host/shared/server-handoff';\nimport { createRSCStream } from '#internal/runtime/rsc';\nimport { setupWebpackRuntime } from '#internal/runtime/turbopack/webpack-runtime';\nimport type { GlobalScope, LoaderResult } from '#internal/runtime/types';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { logDebug, logWarn } from '#internal/utils/logger';\nimport { loadScripts } from './script-loader';\n\n/**\n * Props accepted by {@link loadRemoteComponent}.\n *\n * Extends {@link ConsumeLoaderPayload} (the SSR-resolved fields needed for\n * hydration) with loader-specific fields (`url`, `shared`, `container`, etc.).\n * `remoteShared` is narrowed from optional to required (defaults to `{}` at\n * the call site).\n */\nexport interface ConsumeLoaderProps extends ConsumeLoaderPayload {\n  url: URL;\n  shared:\n    | Promise<Record<string, (bundle?: string) => Promise<unknown>>>\n    | Record<string, (bundle?: string) => Promise<unknown>>;\n  remoteShared: Record<string, string>;\n  container?: HTMLHeadElement | ShadowRoot | null;\n  rscName?: string;\n  resolveClientUrl?: InternalResolveClientUrl;\n}\n\n/**\n * Main loader function that orchestrates the component loading process\n */\nexport async function loadRemoteComponent({\n  url,\n  name,\n  rscName,\n  bundle,\n  route = '/',\n  runtime = 'webpack',\n  data,\n  nextData,\n  scripts = [],\n  shared = Promise.resolve({}),\n  remoteShared = {},\n  container,\n  resolveClientUrl,\n}: ConsumeLoaderProps): Promise<LoaderResult> {\n  try {\n    // Load scripts if using webpack runtime\n    if (runtime === 'webpack') {\n      const self = globalThis as GlobalScope;\n      // disable webpack entrypoint execution for the remote\n      if (!self.__DISABLE_WEBPACK_EXEC__) {\n        self.__DISABLE_WEBPACK_EXEC__ = {};\n      }\n      // disable webpack entrypoint execution for the current remote bundle\n      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;\n      await loadScripts(scripts, resolveClientUrl);\n    }\n\n    const hostShared = await shared;\n    logDebug(\n      'ComponentLoader',\n      `loadRemoteComponent: bundle=\"${bundle}\", name=\"${name}\"`,\n    );\n    logDebug(\n      'ComponentLoader',\n      `Host shared modules available: ${Object.keys(hostShared)}`,\n    );\n    logDebug(\n      'ComponentLoader',\n      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`,\n    );\n\n    // Setup webpack runtime environment\n    await setupWebpackRuntime(\n      runtime,\n      scripts,\n      url,\n      bundle,\n      hostShared,\n      remoteShared,\n      resolveClientUrl,\n    );\n\n    // Setup shared modules\n    if (bundle) {\n      const resolve = {\n        '/react/index.js': React,\n        '/react/jsx-dev-runtime.js': JSXDevRuntime,\n        '/react/jsx-runtime.js': JSXRuntime,\n        '/react-dom/index.js': ReactDOM,\n        '/react-dom/client.js': ReactDOMClient,\n        ...Object.entries(remoteShared).reduce<Record<string, unknown>>(\n          (acc, [key, value]) => {\n            if (typeof hostShared[value] !== 'undefined') {\n              acc[key.replace(/^\\(ssr\\)\\/(?<relative>\\.\\/)?/, '')] =\n                hostShared[value];\n            } else {\n              logDebug(\n                'ComponentLoader',\n                `Remote requests \"${value}\" but host doesn't provide it`,\n              );\n            }\n            return acc;\n          },\n          {},\n        ),\n      } as Record<string, unknown>;\n      await Promise.all(\n        Object.entries(resolve).map(async ([key, value]) => {\n          if (typeof value === 'function') {\n            resolve[key] = await value(bundle);\n          }\n          return Promise.resolve(value);\n        }),\n      );\n      applySharedModules(bundle, resolve);\n    } else {\n      logWarn(\n        'ComponentLoader',\n        'No bundle specified, skipping shared module setup',\n      );\n    }\n\n    // Load component based on data type\n    if (data.length > 0) {\n      return await loadRSCComponent(rscName ?? name, data);\n    } else if (nextData) {\n      return loadNextPagesComponent(bundle, route, nextData, name, container);\n    }\n\n    return loadRSCComponent(rscName ?? name, [`0:[null]\\n`]); // Fallback to empty RSC payload\n  } catch (error) {\n    return {\n      component: null,\n      error: new RemoteComponentsError(\n        `Failed to load remote component \"${name}\".`,\n        {\n          cause: error instanceof Error ? error : new Error(String(error)),\n        },\n      ),\n    };\n  }\n}\n\nasync function importCreateFromReadableStream(): Promise<unknown> {\n  try {\n    const { createFromReadableStream } = await import(\n      'next/dist/compiled/react-server-dom-webpack/client.browser'\n    );\n    return createFromReadableStream;\n  } catch {\n    const {\n      default: { createFromReadableStream },\n    } = await import('react-server-dom-webpack/client.browser');\n    return createFromReadableStream;\n  }\n}\n\n/**\n * Loads RSC (React Server Components) based component\n */\nasync function loadRSCComponent(\n  rscName: string,\n  data: string[],\n): Promise<LoaderResult> {\n  // try to import react-server-dom-webpack from Next.js with a fallback\n  const createFromReadableStream = await importCreateFromReadableStream();\n  // remote components with RSC requires react-server-dom-webpack\n  if (typeof createFromReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'Failed to import \"react-server-dom-webpack\". Is Next.js installed correctly?',\n    );\n  }\n\n  const stream = createRSCStream(rscName, data);\n  const component = createFromReadableStream(stream);\n\n  return { component };\n}\n\n/**\n * Loads Next.js Pages Router based component\n */\nfunction loadNextPagesComponent(\n  bundle: string,\n  route: string,\n  nextData: NonNullable<ConsumeLoaderPayload['nextData']>,\n  name: string,\n  container?: HTMLHeadElement | ShadowRoot | null,\n): LoaderResult {\n  const { Component, App } = nextClientPagesLoader(bundle, route, container);\n\n  if (!Component) {\n    throw new RemoteComponentsError(\n      `Remote Component \"${name}\" is trying to load the component for route \"${route}\" but it is not available.`,\n    );\n  }\n\n  // error tolerance when app component is not found\n  const component = App\n    ? React.createElement(App, { Component, ...nextData.props })\n    : React.createElement(Component, nextData.props);\n\n  return { component };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/runtime/loaders/component-loader.d.ts

@@ -0,0 +1,31 @@
+import { InternalResolveClientUrl } from '../url/resolve-client-url.js';
+import { a as ConsumeLoaderPayload } from '../../../server-handoff-8c89b856.js';
+import { LoaderResult } from '../types.js';
+import 'react';
+import '../../host/shared/asset-descriptors.js';
+import '../../host/shared/config.js';
+import '../../host/shared/fetch-interceptors.js';
+import '../metadata.js';
+
+/**
+ * Props accepted by {@link loadRemoteComponent}.
+ *
+ * Extends {@link ConsumeLoaderPayload} (the SSR-resolved fields needed for
+ * hydration) with loader-specific fields (`url`, `shared`, `container`, etc.).
+ * `remoteShared` is narrowed from optional to required (defaults to `{}` at
+ * the call site).
+ */
+interface ConsumeLoaderProps extends ConsumeLoaderPayload {
+    url: URL;
+    shared: Promise<Record<string, (bundle?: string) => Promise<unknown>>> | Record<string, (bundle?: string) => Promise<unknown>>;
+    remoteShared: Record<string, string>;
+    container?: HTMLHeadElement | ShadowRoot | null;
+    rscName?: string;
+    resolveClientUrl?: InternalResolveClientUrl;
+}
+/**
+ * Main loader function that orchestrates the component loading process
+ */
+declare function loadRemoteComponent({ url, name, rscName, bundle, route, runtime, data, nextData, scripts, shared, remoteShared, container, resolveClientUrl, }: ConsumeLoaderProps): Promise<LoaderResult>;
+
+export { ConsumeLoaderProps, loadRemoteComponent };

package/dist/internal/runtime/loaders/component-loader.js

@@ -0,0 +1,150 @@
+import * as React from "react";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+import { applySharedModules } from "#internal/config/webpack/apply-shared-modules";
+import { nextClientPagesLoader } from "#internal/config/webpack/next-client-pages-loader";
+import { createRSCStream } from "#internal/runtime/rsc";
+import { setupWebpackRuntime } from "#internal/runtime/turbopack/webpack-runtime";
+import { RemoteComponentsError } from "#internal/utils/error";
+import { logDebug, logWarn } from "#internal/utils/logger";
+import { loadScripts } from "./script-loader";
+async function loadRemoteComponent({
+  url,
+  name,
+  rscName,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container,
+  resolveClientUrl
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      if (!self.__DISABLE_WEBPACK_EXEC__) {
+        self.__DISABLE_WEBPACK_EXEC__ = {};
+      }
+      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+      await loadScripts(scripts, resolveClientUrl);
+    }
+    const hostShared = await shared;
+    logDebug(
+      "ComponentLoader",
+      `loadRemoteComponent: bundle="${bundle}", name="${name}"`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Host shared modules available: ${Object.keys(hostShared)}`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
+    );
+    await setupWebpackRuntime(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      hostShared,
+      remoteShared,
+      resolveClientUrl
+    );
+    if (bundle) {
+      const resolve = {
+        "/react/index.js": React,
+        "/react/jsx-dev-runtime.js": JSXDevRuntime,
+        "/react/jsx-runtime.js": JSXRuntime,
+        "/react-dom/index.js": ReactDOM,
+        "/react-dom/client.js": ReactDOMClient,
+        ...Object.entries(remoteShared).reduce(
+          (acc, [key, value]) => {
+            if (typeof hostShared[value] !== "undefined") {
+              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+            } else {
+              logDebug(
+                "ComponentLoader",
+                `Remote requests "${value}" but host doesn't provide it`
+              );
+            }
+            return acc;
+          },
+          {}
+        )
+      };
+      await Promise.all(
+        Object.entries(resolve).map(async ([key, value]) => {
+          if (typeof value === "function") {
+            resolve[key] = await value(bundle);
+          }
+          return Promise.resolve(value);
+        })
+      );
+      applySharedModules(bundle, resolve);
+    } else {
+      logWarn(
+        "ComponentLoader",
+        "No bundle specified, skipping shared module setup"
+      );
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(rscName ?? name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(rscName ?? name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: new RemoteComponentsError(
+        `Failed to load remote component "${name}".`,
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
+        }
+      )
+    };
+  }
+}
+async function importCreateFromReadableStream() {
+  try {
+    const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    return createFromReadableStream;
+  } catch {
+    const {
+      default: { createFromReadableStream }
+    } = await import("react-server-dom-webpack/client.browser");
+    return createFromReadableStream;
+  }
+}
+async function loadRSCComponent(rscName, data) {
+  const createFromReadableStream = await importCreateFromReadableStream();
+  if (typeof createFromReadableStream !== "function") {
+    throw new RemoteComponentsError(
+      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
+    );
+  }
+  const stream = createRSCStream(rscName, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name, container) {
+  const { Component, App } = nextClientPagesLoader(bundle, route, container);
+  if (!Component) {
+    throw new RemoteComponentsError(
+      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
+}
+export {
+  loadRemoteComponent
+};
+//# sourceMappingURL=component-loader.js.map

package/dist/internal/runtime/loaders/component-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/loaders/component-loader.ts"],"sourcesContent":["import * as React from 'react';\nimport * as JSXDevRuntime from 'react/jsx-dev-runtime';\nimport * as JSXRuntime from 'react/jsx-runtime';\nimport * as ReactDOM from 'react-dom';\nimport * as ReactDOMClient from 'react-dom/client';\nimport { applySharedModules } from '#internal/config/webpack/apply-shared-modules';\nimport { nextClientPagesLoader } from '#internal/config/webpack/next-client-pages-loader';\nimport type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ConsumeLoaderPayload } from '#internal/host/shared/server-handoff';\nimport { createRSCStream } from '#internal/runtime/rsc';\nimport { setupWebpackRuntime } from '#internal/runtime/turbopack/webpack-runtime';\nimport type { GlobalScope, LoaderResult } from '#internal/runtime/types';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { logDebug, logWarn } from '#internal/utils/logger';\nimport { loadScripts } from './script-loader';\n\n/**\n * Props accepted by {@link loadRemoteComponent}.\n *\n * Extends {@link ConsumeLoaderPayload} (the SSR-resolved fields needed for\n * hydration) with loader-specific fields (`url`, `shared`, `container`, etc.).\n * `remoteShared` is narrowed from optional to required (defaults to `{}` at\n * the call site).\n */\nexport interface ConsumeLoaderProps extends ConsumeLoaderPayload {\n  url: URL;\n  shared:\n    | Promise<Record<string, (bundle?: string) => Promise<unknown>>>\n    | Record<string, (bundle?: string) => Promise<unknown>>;\n  remoteShared: Record<string, string>;\n  container?: HTMLHeadElement | ShadowRoot | null;\n  rscName?: string;\n  resolveClientUrl?: InternalResolveClientUrl;\n}\n\n/**\n * Main loader function that orchestrates the component loading process\n */\nexport async function loadRemoteComponent({\n  url,\n  name,\n  rscName,\n  bundle,\n  route = '/',\n  runtime = 'webpack',\n  data,\n  nextData,\n  scripts = [],\n  shared = Promise.resolve({}),\n  remoteShared = {},\n  container,\n  resolveClientUrl,\n}: ConsumeLoaderProps): Promise<LoaderResult> {\n  try {\n    // Load scripts if using webpack runtime\n    if (runtime === 'webpack') {\n      const self = globalThis as GlobalScope;\n      // disable webpack entrypoint execution for the remote\n      if (!self.__DISABLE_WEBPACK_EXEC__) {\n        self.__DISABLE_WEBPACK_EXEC__ = {};\n      }\n      // disable webpack entrypoint execution for the current remote bundle\n      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;\n      await loadScripts(scripts, resolveClientUrl);\n    }\n\n    const hostShared = await shared;\n    logDebug(\n      'ComponentLoader',\n      `loadRemoteComponent: bundle=\"${bundle}\", name=\"${name}\"`,\n    );\n    logDebug(\n      'ComponentLoader',\n      `Host shared modules available: ${Object.keys(hostShared)}`,\n    );\n    logDebug(\n      'ComponentLoader',\n      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`,\n    );\n\n    // Setup webpack runtime environment\n    await setupWebpackRuntime(\n      runtime,\n      scripts,\n      url,\n      bundle,\n      hostShared,\n      remoteShared,\n      resolveClientUrl,\n    );\n\n    // Setup shared modules\n    if (bundle) {\n      const resolve = {\n        '/react/index.js': React,\n        '/react/jsx-dev-runtime.js': JSXDevRuntime,\n        '/react/jsx-runtime.js': JSXRuntime,\n        '/react-dom/index.js': ReactDOM,\n        '/react-dom/client.js': ReactDOMClient,\n        ...Object.entries(remoteShared).reduce<Record<string, unknown>>(\n          (acc, [key, value]) => {\n            if (typeof hostShared[value] !== 'undefined') {\n              acc[key.replace(/^\\(ssr\\)\\/(?<relative>\\.\\/)?/, '')] =\n                hostShared[value];\n            } else {\n              logDebug(\n                'ComponentLoader',\n                `Remote requests \"${value}\" but host doesn't provide it`,\n              );\n            }\n            return acc;\n          },\n          {},\n        ),\n      } as Record<string, unknown>;\n      await Promise.all(\n        Object.entries(resolve).map(async ([key, value]) => {\n          if (typeof value === 'function') {\n            resolve[key] = await value(bundle);\n          }\n          return Promise.resolve(value);\n        }),\n      );\n      applySharedModules(bundle, resolve);\n    } else {\n      logWarn(\n        'ComponentLoader',\n        'No bundle specified, skipping shared module setup',\n      );\n    }\n\n    // Load component based on data type\n    if (data.length > 0) {\n      return await loadRSCComponent(rscName ?? name, data);\n    } else if (nextData) {\n      return loadNextPagesComponent(bundle, route, nextData, name, container);\n    }\n\n    return loadRSCComponent(rscName ?? name, [`0:[null]\\n`]); // Fallback to empty RSC payload\n  } catch (error) {\n    return {\n      component: null,\n      error: new RemoteComponentsError(\n        `Failed to load remote component \"${name}\".`,\n        {\n          cause: error instanceof Error ? error : new Error(String(error)),\n        },\n      ),\n    };\n  }\n}\n\nasync function importCreateFromReadableStream(): Promise<unknown> {\n  try {\n    const { createFromReadableStream } = await import(\n      'next/dist/compiled/react-server-dom-webpack/client.browser'\n    );\n    return createFromReadableStream;\n  } catch {\n    const {\n      default: { createFromReadableStream },\n    } = await import('react-server-dom-webpack/client.browser');\n    return createFromReadableStream;\n  }\n}\n\n/**\n * Loads RSC (React Server Components) based component\n */\nasync function loadRSCComponent(\n  rscName: string,\n  data: string[],\n): Promise<LoaderResult> {\n  // try to import react-server-dom-webpack from Next.js with a fallback\n  const createFromReadableStream = await importCreateFromReadableStream();\n  // remote components with RSC requires react-server-dom-webpack\n  if (typeof createFromReadableStream !== 'function') {\n    throw new RemoteComponentsError(\n      'Failed to import \"react-server-dom-webpack\". Is Next.js installed correctly?',\n    );\n  }\n\n  const stream = createRSCStream(rscName, data);\n  const component = createFromReadableStream(stream);\n\n  return { component };\n}\n\n/**\n * Loads Next.js Pages Router based component\n */\nfunction loadNextPagesComponent(\n  bundle: string,\n  route: string,\n  nextData: NonNullable<ConsumeLoaderPayload['nextData']>,\n  name: string,\n  container?: HTMLHeadElement | ShadowRoot | null,\n): LoaderResult {\n  const { Component, App } = nextClientPagesLoader(bundle, route, container);\n\n  if (!Component) {\n    throw new RemoteComponentsError(\n      `Remote Component \"${name}\" is trying to load the component for route \"${route}\" but it is not available.`,\n    );\n  }\n\n  // error tolerance when app component is not found\n  const component = App\n    ? React.createElement(App, { Component, ...nextData.props })\n    : React.createElement(Component, nextData.props);\n\n  return { component };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/runtime/loaders/script-loader.cjs

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var script_loader_exports = {};
+__export(script_loader_exports, {
+  loadScripts: () => loadScripts
+});
+module.exports = __toCommonJS(script_loader_exports);
+var import_constants = require("#internal/runtime/constants");
+var import_protected_rc_fallback = require("#internal/runtime/url/protected-rc-fallback");
+var import_constants2 = require("#internal/utils/constants");
+var import_error = require("#internal/utils/error");
+var import_logger = require("#internal/utils/logger");
+async function loadScripts(scripts, resolveClientUrl) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(import_constants.NEXT_BUNDLE_PATH_RE, "/_next/"),
+          location.origin
+        ).href;
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          const isProxied = (0, import_protected_rc_fallback.isProxiedUrl)(resolvedSrc);
+          if (isProxied) {
+            reject(
+              new import_error.RemoteComponentsError(
+                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHostProxy middleware is configured and "${import_constants2.RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${import_constants2.CORS_DOCS_URL}`
+              )
+            );
+          } else {
+            (0, import_logger.warnCrossOriginFetchError)("ScriptLoader", newSrc);
+            reject(
+              new import_error.RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
+        };
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loadScripts
+});
+//# sourceMappingURL=script-loader.cjs.map

package/dist/internal/runtime/loaders/script-loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/loaders/script-loader.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport { NEXT_BUNDLE_PATH_RE } from '#internal/runtime/constants';\nimport { isProxiedUrl } from '#internal/runtime/url/protected-rc-fallback';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { warnCrossOriginFetchError } from '#internal/utils/logger';\n\n/**\n * Loads external scripts for remote components\n */\nexport async function loadScripts(\n  scripts: { src: string }[],\n  resolveClientUrl?: InternalResolveClientUrl,\n): Promise<void> {\n  await Promise.all(\n    scripts.map((script) => {\n      return new Promise<void>((resolve, reject) => {\n        const newSrc = new URL(\n          // remove the remote component bundle name identifier from the script src\n          script.src.replace(NEXT_BUNDLE_PATH_RE, '/_next/'),\n          location.origin,\n        ).href;\n\n        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;\n\n        const newScript = document.createElement('script');\n        newScript.onload = () => resolve();\n        newScript.onerror = () => {\n          const isProxied = isProxiedUrl(resolvedSrc);\n          if (isProxied) {\n            reject(\n              new RemoteComponentsError(\n                `Failed to load script \"${newSrc}\" via proxy \"${resolvedSrc}\". ` +\n                  `Ensure withRemoteComponentsHostProxy middleware is configured and \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" is in the matcher. ` +\n                  `See: ${CORS_DOCS_URL}`,\n              ),\n            );\n          } else {\n            warnCrossOriginFetchError('ScriptLoader', newSrc);\n            reject(\n              new RemoteComponentsError(\n                `Failed to load <script src=\"${newSrc}\"> for Remote Component. Check the URL is correct.`,\n              ),\n            );\n          }\n        };\n        newScript.src = resolvedSrc;\n        newScript.async = true;\n        document.head.appendChild(newScript);\n      });\n    }),\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAoC;AACpC,mCAA6B;AAC7B,IAAAA,oBAGO;AACP,mBAAsC;AACtC,oBAA0C;AAK1C,eAAsB,YACpB,SACA,kBACe;AACf,QAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,CAAC,WAAW;AACtB,aAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,cAAM,SAAS,IAAI;AAAA;AAAA,UAEjB,OAAO,IAAI,QAAQ,sCAAqB,SAAS;AAAA,UACjD,SAAS;AAAA,QACX,EAAE;AAEF,cAAM,cAAc,mBAAmB,MAAM,KAAK;AAElD,cAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,kBAAU,SAAS,MAAM,QAAQ;AACjC,kBAAU,UAAU,MAAM;AACxB,gBAAM,gBAAY,2CAAa,WAAW;AAC1C,cAAI,WAAW;AACb;AAAA,cACE,IAAI;AAAA,gBACF,0BAA0B,sBAAsB,oFACwB,iFAC9D;AAAA,cACZ;AAAA,YACF;AAAA,UACF,OAAO;AACL,yDAA0B,gBAAgB,MAAM;AAChD;AAAA,cACE,IAAI;AAAA,gBACF,+BAA+B;AAAA,cACjC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AACA,kBAAU,MAAM;AAChB,kBAAU,QAAQ;AAClB,iBAAS,KAAK,YAAY,SAAS;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;","names":["import_constants"]}

package/dist/internal/runtime/loaders/script-loader.d.ts

@@ -0,0 +1,10 @@
+import { InternalResolveClientUrl } from '../url/resolve-client-url.js';
+
+/**
+ * Loads external scripts for remote components
+ */
+declare function loadScripts(scripts: {
+    src: string;
+}[], resolveClientUrl?: InternalResolveClientUrl): Promise<void>;
+
+export { loadScripts };

package/dist/internal/runtime/loaders/script-loader.js

@@ -0,0 +1,48 @@
+import { NEXT_BUNDLE_PATH_RE } from "#internal/runtime/constants";
+import { isProxiedUrl } from "#internal/runtime/url/protected-rc-fallback";
+import {
+  CORS_DOCS_URL,
+  RC_PROTECTED_REMOTE_FETCH_PATHNAME
+} from "#internal/utils/constants";
+import { RemoteComponentsError } from "#internal/utils/error";
+import { warnCrossOriginFetchError } from "#internal/utils/logger";
+async function loadScripts(scripts, resolveClientUrl) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
+          location.origin
+        ).href;
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        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}`
+              )
+            );
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
+        };
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+export {
+  loadScripts
+};
+//# sourceMappingURL=script-loader.js.map

package/dist/internal/runtime/loaders/script-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/loaders/script-loader.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport { NEXT_BUNDLE_PATH_RE } from '#internal/runtime/constants';\nimport { isProxiedUrl } from '#internal/runtime/url/protected-rc-fallback';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\nimport { RemoteComponentsError } from '#internal/utils/error';\nimport { warnCrossOriginFetchError } from '#internal/utils/logger';\n\n/**\n * Loads external scripts for remote components\n */\nexport async function loadScripts(\n  scripts: { src: string }[],\n  resolveClientUrl?: InternalResolveClientUrl,\n): Promise<void> {\n  await Promise.all(\n    scripts.map((script) => {\n      return new Promise<void>((resolve, reject) => {\n        const newSrc = new URL(\n          // remove the remote component bundle name identifier from the script src\n          script.src.replace(NEXT_BUNDLE_PATH_RE, '/_next/'),\n          location.origin,\n        ).href;\n\n        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;\n\n        const newScript = document.createElement('script');\n        newScript.onload = () => resolve();\n        newScript.onerror = () => {\n          const isProxied = isProxiedUrl(resolvedSrc);\n          if (isProxied) {\n            reject(\n              new RemoteComponentsError(\n                `Failed to load script \"${newSrc}\" via proxy \"${resolvedSrc}\". ` +\n                  `Ensure withRemoteComponentsHostProxy middleware is configured and \"${RC_PROTECTED_REMOTE_FETCH_PATHNAME}\" is in the matcher. ` +\n                  `See: ${CORS_DOCS_URL}`,\n              ),\n            );\n          } else {\n            warnCrossOriginFetchError('ScriptLoader', newSrc);\n            reject(\n              new RemoteComponentsError(\n                `Failed to load <script src=\"${newSrc}\"> for Remote Component. Check the URL is correct.`,\n              ),\n            );\n          }\n        };\n        newScript.src = resolvedSrc;\n        newScript.async = true;\n        document.head.appendChild(newScript);\n      });\n    }),\n  );\n}\n"],"mappings":"AACA,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAK1C,eAAsB,YACpB,SACA,kBACe;AACf,QAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,CAAC,WAAW;AACtB,aAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,cAAM,SAAS,IAAI;AAAA;AAAA,UAEjB,OAAO,IAAI,QAAQ,qBAAqB,SAAS;AAAA,UACjD,SAAS;AAAA,QACX,EAAE;AAEF,cAAM,cAAc,mBAAmB,MAAM,KAAK;AAElD,cAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,kBAAU,SAAS,MAAM,QAAQ;AACjC,kBAAU,UAAU,MAAM;AACxB,gBAAM,YAAY,aAAa,WAAW;AAC1C,cAAI,WAAW;AACb;AAAA,cACE,IAAI;AAAA,gBACF,0BAA0B,sBAAsB,oFACwB,+DAC9D;AAAA,cACZ;AAAA,YACF;AAAA,UACF,OAAO;AACL,sCAA0B,gBAAgB,MAAM;AAChD;AAAA,cACE,IAAI;AAAA,gBACF,+BAA+B;AAAA,cACjC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AACA,kBAAU,MAAM;AAChB,kBAAU,QAAQ;AAClB,iBAAS,KAAK,YAAY,SAAS;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;","names":[]}