remote-components 0.0.32 → 0.0.34

package/dist/{component-loader-e5513139.d.ts → component-loader-8951c052.d.ts}

@@ -3,8 +3,9 @@ import * as react from 'react';
 interface RemoteComponentMetadata {
     bundle: string;
     route: string;
-    runtime: 'webpack' | 'turbopack';
+    runtime: 'webpack' | 'turbopack' | 'script';
     id: string;
+    type: 'nextjs' | 'remote-component' | 'unknown';
 }
 
 interface RemoteComponentProps {
@@ -28,6 +29,7 @@ interface RemoteComponentProps {
     isolate?: boolean;
     mode?: 'open' | 'closed';
     reset?: boolean;
+    type?: RemoteComponentMetadata['type'];
     children: react.ReactNode;
 }
 interface GlobalScope {
@@ -46,7 +48,7 @@ interface GlobalScope {
         m?: Record<string | number, (module: {
             exports: unknown;
         }) => void>;
-        type?: 'turbopack' | 'webpack';
+        type?: 'turbopack' | 'webpack' | 'script';
     }>;
     __webpack_require_type__?: RemoteComponentMetadata['runtime'];
     __remote_shared_modules__?: Record<string, Record<string, unknown>>;
@@ -60,6 +62,7 @@ interface LoaderResult {
     component: react.ReactNode;
     error?: Error;
 }
+type MountOrUnmountFunction = (el?: ShadowRoot | DocumentFragment | HTMLElement | HTMLCollection | null) => Promise<void> | void;
 
 type LoadRemoteComponentProps = Pick<RemoteComponentProps, 'name' | 'bundle' | 'route' | 'runtime' | 'data' | 'nextData' | 'scripts'> & {
     url: URL;
@@ -73,4 +76,4 @@ type LoadRemoteComponentProps = Pick<RemoteComponentProps, 'name' | 'bundle' | '
  */
 declare function loadRemoteComponent({ url, name, rscName, bundle, route, runtime, data, nextData, scripts, shared, remoteShared, container, }: LoadRemoteComponentProps): Promise<LoaderResult>;
 
-export { GlobalScope as G, LoaderResult as L, RemoteComponentProps as R, LoadRemoteComponentProps as a, loadRemoteComponent as l };
+export { GlobalScope as G, LoadRemoteComponentProps as L, MountOrUnmountFunction as M, RemoteComponentProps as R, LoaderResult as a, loadRemoteComponent as l };

package/dist/html/host.cjs

@@ -62,6 +62,32 @@ var init_shared_modules = __esm({
   }
 });
 
+// src/shared/error.ts
+function multipleRemoteComponentsError(url) {
+  return new Error(
+    `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
+  );
+}
+function failedToFetchRemoteComponentError(url, error) {
+  return new RemoteComponentsError(
+    `Failed to fetch Remote Component from "${url}". Is the URL correct and accessible?`,
+    { cause: error instanceof Error ? error : new Error(String(error)) }
+  );
+}
+var RemoteComponentsError;
+var init_error = __esm({
+  "src/shared/error.ts"() {
+    "use strict";
+    RemoteComponentsError = class extends Error {
+      constructor(message, options) {
+        super(message, options);
+        this.code = "REMOTE_COMPONENTS_ERROR";
+        this.name = "RemoteComponentsError";
+      }
+    };
+  }
+});
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -100,8 +126,8 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? ""] ?? -1;
   if (!(componentLoaderChunk && appLoaderChunk)) {
-    throw new Error(
-      `Next.js client pages loader not found in bundle "${bundle}"`
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
     );
   }
   const __NEXT_P_ORIGINAL = self.__NEXT_P;
@@ -176,6 +202,7 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
 var init_next_client_pages_loader = __esm({
   "src/shared/webpack/next-client-pages-loader.ts"() {
     "use strict";
+    init_error();
   }
 });
 
@@ -334,11 +361,11 @@ async function handleTurbopackChunk(code, bundle, url) {
       scriptResolve(void 0);
       script.remove();
     };
-    script.onerror = (error) => {
+    script.onerror = () => {
       URL.revokeObjectURL(scriptUrl);
       scriptReject(
-        new Error(
-          `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
+        new RemoteComponentsError(
+          `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
         )
       );
       script.remove();
@@ -380,11 +407,11 @@ function createModuleRequire(runtime) {
       if (bundle && moduleId) {
         return handleTurbopackModule(bundle, moduleId, id);
       }
-      throw new Error(`Module ${id} not found`);
+      throw new Error(`Module "${id}" not found.`);
     } catch (requireError) {
       if (typeof self.__original_webpack_require__ !== "function") {
-        throw new Error(
-          `Module ${id} not found in remote component bundle ${bundle}`,
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
           {
             cause: requireError instanceof Error ? requireError : void 0
           }
@@ -393,8 +420,8 @@ function createModuleRequire(runtime) {
       try {
         return self.__original_webpack_require__(id);
       } catch (originalError) {
-        throw new Error(
-          `Module ${id} not found in remote component bundle ${bundle}`,
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
           { cause: originalError instanceof Error ? originalError : void 0 }
         );
       }
@@ -685,7 +712,9 @@ function handleTurbopackModule(bundle, moduleId, id) {
             return self.__webpack_chunk_load__?.(bundleUrl, bundle);
           }
         }
-        throw new Error(`Failed to load chunk ${url} for module ${id}`);
+        throw new Error(
+          `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+        );
       },
       // global
       g: self.__remote_components_turbopack_global__[bundle],
@@ -703,10 +732,111 @@ function handleTurbopackModule(bundle, moduleId, id) {
 var init_webpack_adapter = __esm({
   "src/shared/client/webpack-adapter.ts"() {
     "use strict";
+    init_error();
     init_const();
   }
 });
 
+// src/shared/client/static-loader.ts
+async function loadStaticRemoteComponent(scripts, url) {
+  const self = globalThis;
+  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
+    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  const mountUnmountSets = await Promise.all(
+    scripts.map(async (script) => {
+      try {
+        let src = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+        if (!src && script.textContent) {
+          const blob = new Blob(
+            [
+              script.textContent.replace(
+                /import\.meta\.url/g,
+                JSON.stringify(url)
+              )
+            ],
+            {
+              type: "text/javascript"
+            }
+          );
+          src = URL.createObjectURL(blob);
+        }
+        const mod = await import(
+          /* @vite-ignore */
+          /* webpackIgnore: true */
+          new URL(src, url).href
+        );
+        if (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
+        }
+        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
+          if (!self.__remote_script_entrypoint_mount__) {
+            self.__remote_script_entrypoint_mount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_mount__[url.href]) {
+            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_mount__[url.href]?.add(
+            mod.mount || mod.default?.mount || (() => {
+            })
+          );
+        }
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
+            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+            mod.unmount || mod.default?.unmount || (() => {
+            })
+          );
+        }
+        return {
+          mount: mod.mount || mod.default?.mount,
+          unmount: mod.unmount || mod.default?.unmount
+        };
+      } catch (e) {
+        console.error(
+          new RemoteComponentsError(
+            `Error loading remote component script from "${script.src || url.href}".`,
+            { cause: e }
+          )
+        );
+        return {
+          mount: void 0,
+          unmount: void 0
+        };
+      }
+    })
+  );
+  return mountUnmountSets.reduce(
+    (acc, { mount, unmount }) => {
+      if (typeof mount === "function") {
+        acc.mount.add(mount);
+      }
+      if (typeof unmount === "function") {
+        acc.unmount.add(unmount);
+      }
+      return acc;
+    },
+    {
+      mount: /* @__PURE__ */ new Set(),
+      unmount: /* @__PURE__ */ new Set()
+    }
+  );
+}
+var init_static_loader = __esm({
+  "src/shared/client/static-loader.ts"() {
+    "use strict";
+    init_error();
+  }
+});
+
 // src/shared/client/polyfill.tsx
 function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
@@ -924,10 +1054,14 @@ async function webpackRuntime(bundle, shared, remoteShared) {
       const remoteBundle = match?.groups?.bundle;
       const id = match?.groups?.id;
       if (!(id && remoteBundle)) {
-        throw new Error(`Module not found: "${remoteId}"`);
+        throw new RemoteComponentsError(
+          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+        );
       }
       if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
-        throw new Error(`Remote component loading error "${remoteBundle}"`);
+        throw new RemoteComponentsError(
+          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+        );
       }
       return self.__remote_webpack_require__[remoteBundle](id);
     };
@@ -949,8 +1083,8 @@ async function webpackRuntime(bundle, shared, remoteShared) {
           };
           newScript.onerror = () => {
             reject(
-              new Error(
-                `Failed to load script ${script.src} for remote component`
+              new RemoteComponentsError(
+                `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
               )
             );
             newScript.remove();
@@ -1010,6 +1144,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
 var init_webpack = __esm({
   "src/html/host/runtime/webpack.ts"() {
     "use strict";
+    init_error();
     init_shared_modules();
     init_next_client_pages_loader();
     init_polyfill();
@@ -1070,6 +1205,31 @@ var init_turbopack = __esm({
   }
 });
 
+// src/html/host/runtime/script.ts
+var script_exports = {};
+__export(script_exports, {
+  scriptRuntime: () => scriptRuntime
+});
+function scriptRuntime() {
+  const self = globalThis;
+  return {
+    self,
+    createFromReadableStream: () => Promise.resolve(null),
+    applySharedModules: () => Promise.resolve(),
+    nextClientPagesLoader: () => ({
+      Component: null,
+      App: null
+    }),
+    preloadScripts: loadStaticRemoteComponent
+  };
+}
+var init_script = __esm({
+  "src/html/host/runtime/script.ts"() {
+    "use strict";
+    init_static_loader();
+  }
+});
+
 // src/html/host/index.tsx
 var host_exports = {};
 __export(host_exports, {
@@ -1087,8 +1247,12 @@ var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
 var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
 init_shared_modules();
 init_next_client_pages_loader();
+init_error();
 init_webpack_adapter();
 
+// src/shared/client/script-loader.ts
+init_error();
+
 // src/shared/client/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
 function fixPayload(payload) {
@@ -1156,8 +1320,10 @@ function createRSCStream(rscName, data) {
 }
 
 // src/shared/client/remote-component.ts
+init_static_loader();
 init_webpack_adapter();
 init_const();
+init_error();
 
 // src/html/host/index.tsx
 init_utils();
@@ -1237,7 +1403,11 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/html/host/index.tsx
+init_error();
+
 // src/html/host/runtime/index.ts
+init_error();
 async function getRuntime(type, url, bundle, shared, remoteShared) {
   if (typeof globalThis.process === "undefined") {
     globalThis.process = {
@@ -1250,8 +1420,13 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(url, bundle, shared, remoteShared);
+  } else if (type === "script") {
+    const { scriptRuntime: scriptRuntime2 } = await Promise.resolve().then(() => (init_script(), script_exports));
+    return scriptRuntime2();
   }
-  throw new Error(`Runtime ${type} is not supported`);
+  throw new RemoteComponentsError(
+    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack", "turbopack", and "script".`
+  );
 }
 
 // src/html/host/index.tsx
@@ -1263,6 +1438,7 @@ if (typeof HTMLElement !== "undefined") {
       this.__next = null;
       this.fouc = null;
       this.isLoading = false;
+      this.prevIsRemoteComponent = false;
       this.root = null;
     }
     static get observedAttributes() {
@@ -1276,9 +1452,6 @@ if (typeof HTMLElement !== "undefined") {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
             console.error(e);
-            throw new Error(
-              `Failed to load remote component: ${this.bundle ?? this.name ?? this.getAttribute("src")}`
-            );
           });
         }
       } else if (name === "mode" && oldValue !== newValue && this.root) {
@@ -1290,7 +1463,7 @@ if (typeof HTMLElement !== "undefined") {
         });
         this.root = newRoot;
         this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
+          console.error(e);
         });
       }
     }
@@ -1324,14 +1497,14 @@ if (typeof HTMLElement !== "undefined") {
       }
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
+          console.error(e);
         });
       }
       this.isLoading = true;
       const src = this.getAttribute("src");
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
-        throw new Error("src attribute is required");
+        throw new RemoteComponentsError('"src" attribute is required');
       }
       let url = null;
       let html = this.innerHTML;
@@ -1349,26 +1522,57 @@ if (typeof HTMLElement !== "undefined") {
         };
         const res = await fetch(url, fetchInit);
         if (!res.ok) {
-          throw new Error(
-            `Failed to fetch remote component "${this.name}": ${res.status}`
-          );
+          let error = failedToFetchRemoteComponentError(url.href, {
+            cause: new Error(`${res.status} ${res.statusText}`)
+          });
+          try {
+            const body = await res.text();
+            const parser2 = new DOMParser();
+            const doc2 = parser2.parseFromString(body, "text/html");
+            const errorTemplate = doc2.querySelector(
+              "template[data-next-error-message]"
+            );
+            const errorMessage = errorTemplate?.getAttribute(
+              "data-next-error-message"
+            );
+            const errorStack = errorTemplate?.getAttribute(
+              "data-next-error-stack"
+            );
+            if (errorMessage) {
+              error = new RemoteComponentsError(errorMessage);
+              if (errorStack) {
+                error.stack = errorStack;
+              }
+            }
+          } catch {
+          }
+          throw error;
         }
         html = await res.text();
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
+      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
+        `div[data-bundle][data-route][id^="${this.name}"]`
+      ) || doc.querySelectorAll("remote-component").length > 1 && !doc.querySelector(`remote-component[name="${this.name}"]`)) {
+        throw multipleRemoteComponentsError(
+          url?.href ?? (this.getAttribute("src") || "unknown")
+        );
+      }
       const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
       doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
-      doc.querySelector("div#__next");
+      doc.querySelector("div#__next") ?? // fallback to a <remote-component> element
+      doc.querySelector(`remote-component[name="${this.name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
       const nextData = JSON.parse(
         (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
       );
+      const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
       if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
         this.root.appendChild(this.fouc);
       }
-      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : this.name);
+      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component.getAttribute("name") || (nextData ? "__next" : this.name);
       const rsc = doc.querySelector(`#${this.name}_rsc`);
       this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
       if (url) {
@@ -1381,12 +1585,13 @@ if (typeof HTMLElement !== "undefined") {
       const metadata = document.createElement("script");
       metadata.type = "application/json";
       metadata.setAttribute("data-remote-component", "");
-      metadata.textContent = JSON.stringify({
+      const metadataObj = {
         name: this.name,
         bundle: this.bundle,
-        route: component?.getAttribute("data-route") ?? nextData?.page ?? "/",
-        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime
-      });
+        route: component?.getAttribute("data-route") ?? nextData?.page ?? url?.pathname ?? "/",
+        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? "script"
+      };
+      metadata.textContent = JSON.stringify(metadataObj);
       if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
         this.previousElementSibling?.remove();
       }
@@ -1396,9 +1601,43 @@ if (typeof HTMLElement !== "undefined") {
       );
       const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
       remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
-      if (!component || !(rsc || nextData)) {
-        throw new Error(`Failed to find component with id "${this.name}"`);
+      if ("__remote_components_missing_shared__" in remoteShared) {
+        throw new RemoteComponentsError(
+          remoteShared.__remote_components_missing_shared__
+        );
+      }
+      if (!component || !(rsc || nextData || isRemoteComponent)) {
+        throw new RemoteComponentsError(
+          `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+        );
+      }
+      if (this.prevIsRemoteComponent) {
+        if (this.prevUrl) {
+          const prevUrl = this.prevUrl;
+          const self2 = globalThis;
+          if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+            await Promise.all(
+              Array.from(
+                self2.__remote_script_entrypoint_unmount__[prevUrl.href] ?? []
+              ).map(async (unmount) => {
+                try {
+                  await unmount(this.root);
+                } catch (e) {
+                  console.error(
+                    new RemoteComponentsError(
+                      `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
+                      { cause: e }
+                    )
+                  );
+                }
+              })
+            );
+          }
+        }
+        this.root.innerHTML = "";
       }
+      this.prevUrl = url ?? new URL(location.href);
+      this.prevIsRemoteComponent = isRemoteComponent;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
       const remoteComponentSrc = this.getAttribute("src");
@@ -1415,8 +1654,8 @@ if (typeof HTMLElement !== "undefined") {
                 };
                 newLink.onerror = () => {
                   reject(
-                    new Error(
-                      `Failed to load link ${link.href} for remote component`
+                    new RemoteComponentsError(
+                      `Failed to load <link href="${link.href}"> for Remote Component. Check the URL is correct.`
                     )
                   );
                 };
@@ -1464,7 +1703,35 @@ if (typeof HTMLElement !== "undefined") {
       applyOriginToNodes(doc, url ?? new URL(location.href));
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
-          this.root?.appendChild(el);
+          if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
+            const newScript = document.createElement("script");
+            for (const attr of el.attributes) {
+              if (attr.name === "src") {
+                newScript.setAttribute(
+                  attr.name,
+                  new URL(attr.value, url ?? location.origin).href
+                );
+              } else {
+                newScript.setAttribute(attr.name, attr.value);
+              }
+            }
+            newScript.textContent = el.textContent;
+            if (remoteComponentSrc) {
+              newScript.setAttribute(
+                "data-remote-component-src",
+                remoteComponentSrc
+              );
+            }
+            this.root?.appendChild(newScript);
+          } else {
+            const newEl = el.cloneNode(true);
+            for (const attr of el.attributes) {
+              if (attr.name.startsWith("on")) {
+                newEl.setAttribute(attr.name, attr.value);
+              }
+            }
+            this.root?.appendChild(newEl);
+          }
         });
       }
       for (const el of removable) {
@@ -1503,7 +1770,7 @@ if (typeof HTMLElement !== "undefined") {
         nextClientPagesLoader: nextClientPagesLoader2,
         preloadScripts
       } = await getRuntime(
-        component.getAttribute("data-runtime") ?? "webpack",
+        metadataObj.runtime,
         url ?? new URL(location.href),
         this.bundle,
         {
@@ -1515,8 +1782,8 @@ if (typeof HTMLElement !== "undefined") {
         },
         remoteShared
       );
-      const scripts = doc.querySelectorAll(
-        "script[src],script[data-src]"
+      const scripts = isRemoteComponent ? component.querySelectorAll("script") : doc.querySelectorAll(
+        "script[src],script[data-src],script[data-remote-component-entrypoint]"
       );
       if (!url) {
         url = new URL(
@@ -1530,6 +1797,13 @@ if (typeof HTMLElement !== "undefined") {
         this.bundle ?? "default",
         this.name ?? "__vercel_remote_component"
       );
+      if (isRemoteComponent) {
+        Array.from(component.children).forEach((child) => {
+          if (child.tagName === "SCRIPT") {
+            child.remove();
+          }
+        });
+      }
       const doCleanup = () => {
         if (this.root && remoteComponentSrc) {
           const selector = `[data-remote-component-src]:not([data-remote-component-src="${remoteComponentSrc}"])`;
@@ -1651,6 +1925,23 @@ if (typeof HTMLElement !== "undefined") {
         if (this.fouc) {
           this.root.removeChild(this.fouc);
         }
+      } else if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+        await Promise.all(
+          Array.from(
+            self.__remote_script_entrypoint_mount__[url.href] ?? []
+          ).map(async (mount) => {
+            try {
+              await mount(this.root);
+            } catch (e) {
+              console.error(
+                new RemoteComponentsError(
+                  `Error while calling mount() for Remote Component from ${url.href}.`,
+                  { cause: e }
+                )
+              );
+            }
+          })
+        );
       }
       this.isLoading = false;
     }