remote-components 0.0.33 → 0.0.35

package/dist/next/host/client/index.js

@@ -5,54 +5,272 @@ import * as Image from "next/image";
 
 // src/react/index.tsx
 import {
-  useState,
+  startTransition,
   useEffect,
   useLayoutEffect,
-  useRef,
   useMemo,
-  startTransition
+  useRef,
+  useState
 } from "react";
 import { createPortal } from "react-dom";
 
-// src/shared/client/component-loader.ts
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import * as ReactDOMClient from "react-dom/client";
-import * as JSXDevRuntime from "react/jsx-dev-runtime";
-import * as JSXRuntime from "react/jsx-runtime";
+// src/shared/client/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url) {
+  if (url.origin !== location.origin) {
+    const nodes = doc.querySelectorAll(
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
+    );
+    nodes.forEach((node) => {
+      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+      }
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        node.setAttribute(
+          "href",
+          new URL(node.getAttribute("href") ?? "/", url).href
+        );
+      }
+      if (node.hasAttribute("srcset")) {
+        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("srcset", srcSet);
+        }
+      }
+      if (node.hasAttribute("imagesrcset")) {
+        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
+        }
+      }
+    });
+  }
+}
 
-// src/shared/webpack/shared-modules.ts
-function applySharedModules(bundle, resolve) {
+// src/shared/client/polyfill.tsx
+import { jsx } from "react/jsx-runtime";
+function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
-  if (self.__remote_webpack_require__?.[bundle]) {
-    const modulePaths = Object.keys(
-      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
-    );
-    for (const [key, value] of Object.entries(resolve)) {
-      let ids = modulePaths.filter((p) => p === key);
-      if (ids.length === 0) {
-        ids = modulePaths.filter((p) => p.includes(key));
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
+  }
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  }
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
+  }
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
+}
+var imageImpl = (bundle) => function RemoteImage({
+  fill: _fill,
+  loader: _loader,
+  quality: _quality,
+  priority: _priority,
+  loading: _loading,
+  placeholder: _placeholder,
+  blurDataURL: _blurDataURL,
+  unoptimized: _unoptimized,
+  overrideSrc: _overrideSrc,
+  src,
+  ...props
+}) {
+  const newSrc = applyBundleUrlToImagePropsSrc(
+    bundle,
+    typeof src === "string" ? src : src.src
+  );
+  return (
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        decoding: "async",
+        style: { color: "transparent" },
+        ...props,
+        src: newSrc,
+        suppressHydrationWarning: true
       }
-      for (let id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
-        if (webpackBundle.m) {
-          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+    )
+  );
+};
+function sharedPolyfills(shared) {
+  const self = globalThis;
+  const polyfill = {
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+      useRouter() {
+        return {
+          push: (routerUrl) => {
+            history.pushState({}, "", routerUrl);
+          },
+          replace: (routerUrl) => {
+            history.replaceState({}, "", routerUrl);
+          },
+          back: () => {
+            history.back();
           }
-          webpackBundle.m[id] = (module) => {
-            module.exports = value;
+        };
+      },
+      usePathname() {
+        return location.pathname;
+      },
+      useParams() {
+        return {};
+      },
+      useSearchParams() {
+        return new URLSearchParams(location.search);
+      },
+      useSelectedLayoutSegment() {
+        return null;
+      },
+      useSelectedLayoutSegments() {
+        return [];
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+      default: ({
+        scroll: _,
+        replace,
+        prefetch,
+        onNavigate,
+        children,
+        ...props
+      }) => {
+        if (prefetch) {
+          console.warn(
+            "Next.js Link prefetch is not supported in remote components"
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+      // TODO: implement <Script> component for non-Next.js host applications
+      // do not throw an error for now
+      default: () => null,
+      __esModule: true
+    })),
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
           };
+        },
+        __esModule: true
+      })
+    )),
+    "next/dist/build/polyfills/process": () => Promise.resolve({
+      default: {
+        env: {
+          NODE_ENV: "production"
         }
-      }
-    }
-  }
+      },
+      __esModule: true
+    })
+  };
+  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
 }
 
 // src/shared/error.ts
 var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
   constructor(message, options) {
     super(message, options);
-    this.code = "REMOTE_COMPONENTS_ERROR";
     this.name = "RemoteComponentsError";
   }
 };
@@ -68,6 +286,13 @@ function failedToFetchRemoteComponentError(url, error) {
   );
 }
 
+// src/shared/client/component-loader.ts
+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";
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -155,29 +380,151 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
         node.remove();
         node = nextCss.previousSibling;
       }
-      self.__remote_next_css__[bundle] = elements;
-    }
-    if (styleContainer) {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        styleContainer.appendChild(el.cloneNode(true));
-      });
+      self.__remote_next_css__[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      let ids = modulePaths.filter((p) => p === key);
+      if (ids.length === 0) {
+        ids = modulePaths.filter((p) => p.includes(key));
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          }
+          webpackBundle.m[id] = (module) => {
+            module.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+
+// src/shared/client/rsc.ts
+import { ReadableStream } from "web-streams-polyfill";
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
+      }
     } else {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        document.head.appendChild(el);
-      });
+      for (const item of payload) {
+        fixPayload(item);
+      }
     }
-    delete self.__NEXT_P;
-    self.__NEXT_P = __NEXT_P_ORIGINAL;
-    if (nextCssOriginal) {
-      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
     }
-    nextCss.remove();
-    nextCssEnd.remove();
-    return { Component, App };
   }
-  return { Component: null, App: null };
+}
+function createRSCStream(rscName, data) {
+  return new ReadableStream({
+    type: "bytes",
+    start(controller) {
+      const encoder = new TextEncoder();
+      const self = globalThis;
+      if (data.length > 0) {
+        data.forEach((chunk) => {
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+            if (match?.groups?.rsc) {
+              self[rscName] = self[rscName] ?? [];
+              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
+            }
+          }
+        });
+      }
+      const allChunks = (self[rscName] ?? [`0:[null]
+`]).join("");
+      self[rscName] = null;
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
+        } else {
+          controller.enqueue(encoder.encode(`${chunk}
+`));
+        }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  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\/\[.+\](?<whitespace>%20| )/, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
 }
 
 // src/shared/utils/index.ts
@@ -196,6 +543,7 @@ var attrToProp = {
 var DEFAULT_ROUTE = "/";
 var RUNTIME_WEBPACK = "webpack";
 var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
 var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
 function getBundleKey(bundle) {
   return escapeString(bundle);
@@ -364,7 +712,10 @@ async function handleTurbopackChunk(code, bundle, url) {
 function createModuleRequire(runtime) {
   return (id) => {
     const self = globalThis;
-    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "default", id };
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
     const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
@@ -700,101 +1051,6 @@ function handleTurbopackModule(bundle, moduleId, id) {
   return moduleExports.exports;
 }
 
-// src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
-  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\/\[.+\](?<whitespace>%20| )/, "/_next/"),
-          location.origin
-        ).href;
-        const newScript = document.createElement("script");
-        newScript.onload = () => {
-          resolve();
-        };
-        newScript.onerror = () => {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-            )
-          );
-        };
-        newScript.src = newSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
-}
-
-// src/shared/client/rsc.ts
-import { ReadableStream } from "web-streams-polyfill";
-function fixPayload(payload) {
-  if (Array.isArray(payload)) {
-    if (payload[0] === "$") {
-      fixPayload(payload[3]);
-      if (payload.length === 4) {
-        payload.push(null, null, 1);
-      }
-    } else {
-      for (const item of payload) {
-        fixPayload(item);
-      }
-    }
-  } else if (typeof payload === "object" && payload !== null) {
-    for (const key in payload) {
-      fixPayload(payload[key]);
-    }
-  }
-}
-function createRSCStream(rscName, data) {
-  return new ReadableStream({
-    type: "bytes",
-    start(controller) {
-      const encoder = new TextEncoder();
-      const self = globalThis;
-      if (data.length > 0) {
-        data.forEach((chunk) => {
-          const lines = chunk.split("\n");
-          for (const line of lines) {
-            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
-            if (match?.groups?.rsc) {
-              self[rscName] = self[rscName] ?? [];
-              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
-            }
-          }
-        });
-      }
-      const allChunks = (self[rscName] ?? [`0:[null]
-`]).join("");
-      self[rscName] = null;
-      allChunks.split("\n").forEach((chunk) => {
-        if (chunk.length > 0) {
-          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
-            chunk
-          )?.groups ?? {};
-          if (payload) {
-            const jsonPayload = JSON.parse(payload);
-            fixPayload(jsonPayload);
-            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
-            controller.enqueue(encoder.encode(`${reconstruct}
-`));
-          } else {
-            controller.enqueue(encoder.encode(`${chunk}
-`));
-          }
-        } else {
-          controller.enqueue(encoder.encode(`${chunk}
-`));
-        }
-      });
-      controller.close();
-    }
-  });
-}
-
 // src/shared/client/component-loader.ts
 async function loadRemoteComponent({
   url,
@@ -867,7 +1123,9 @@ async function loadRemoteComponent({
       component: null,
       error: new RemoteComponentsError(
         `Failed to load remote component "${name}".`,
-        { cause: error instanceof Error ? error : new Error(String(error)) }
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
+        }
       )
     };
   }
@@ -925,7 +1183,7 @@ function isBooleanScriptAttribute(attr) {
 }
 function setAttributesFromProps(el, props) {
   for (const [p, value] of Object.entries(props)) {
-    if (!Object.prototype.hasOwnProperty.call(props, p))
+    if (!Object.hasOwn(props, p))
       continue;
     if (ignoreProps.includes(p))
       continue;
@@ -944,257 +1202,99 @@ function setAttributesFromProps(el, props) {
     }
   }
 }
-
-// src/shared/client/polyfill.tsx
-import { jsx } from "react/jsx-runtime";
-function applyBundleUrlToSrc(bundle, src) {
-  const self = globalThis;
-  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
-    return src;
-  }
-  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
-  if (!path) {
-    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
-  }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
-  }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
-}
-var imageImpl = (bundle) => function RemoteImage({
-  fill: _fill,
-  loader: _loader,
-  quality: _quality,
-  priority: _priority,
-  loading: _loading,
-  placeholder: _placeholder,
-  blurDataURL: _blurDataURL,
-  unoptimized: _unoptimized,
-  overrideSrc: _overrideSrc,
-  src,
-  ...props
-}) {
-  const newSrc = applyBundleUrlToImagePropsSrc(
-    bundle,
-    typeof src === "string" ? src : src.src
-  );
-  return (
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        decoding: "async",
-        style: { color: "transparent" },
-        ...props,
-        src: newSrc,
-        suppressHydrationWarning: true
-      }
-    )
-  );
-};
-function sharedPolyfills(shared) {
+
+// src/shared/client/static-loader.ts
+async function loadStaticRemoteComponent(scripts, url) {
   const self = globalThis;
-  const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
-      useRouter() {
-        return {
-          push: (routerUrl) => {
-            history.pushState({}, "", routerUrl);
-          },
-          replace: (routerUrl) => {
-            history.replaceState({}, "", routerUrl);
-          },
-          back: () => {
-            history.back();
+  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__ = {};
           }
-        };
-      },
-      usePathname() {
-        return location.pathname;
-      },
-      useParams() {
-        return {};
-      },
-      useSearchParams() {
-        return new URLSearchParams(location.search);
-      },
-      useSelectedLayoutSegment() {
-        return null;
-      },
-      useSelectedLayoutSegments() {
-        return [];
-      },
-      __esModule: true
-    })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
-      default: ({
-        scroll: _,
-        replace,
-        prefetch,
-        onNavigate,
-        children,
-        ...props
-      }) => {
-        if (prefetch) {
-          console.warn(
-            "Next.js Link prefetch is not supported in remote components"
+          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 || (() => {
+            })
           );
         }
-        return /* @__PURE__ */ jsx(
-          "a",
-          {
-            ...props,
-            href: props.href,
-            onClick: (e) => {
-              e.preventDefault();
-              let preventDefaulted = false;
-              e.preventDefault = () => {
-                preventDefaulted = true;
-                e.defaultPrevented = true;
-              };
-              if (typeof props.onClick === "function") {
-                props.onClick(e);
-              }
-              onNavigate?.(e);
-              if (preventDefaulted) {
-                return;
-              }
-              if (replace) {
-                history.replaceState({}, "", props.href);
-              } else {
-                history.pushState({}, "", props.href);
-              }
-            },
-            suppressHydrationWarning: true,
-            children: children ?? null
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
           }
-        );
-      },
-      useLinkStatus() {
-        return { pending: false };
-      },
-      __esModule: true
-    })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
-      default: () => {
-        throw new Error("Next.js <Form> component not implemented");
-      },
-      __esModule: true
-    })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle),
-      __esModule: true
-    })),
-    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle),
-      getImageProps: (_imgProps) => {
-        throw new Error(
-          "Next.js getImageProps() is not implemented in remote components"
-        );
-      },
-      __esModule: true
-    })),
-    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
-      // TODO: implement <Script> component for non-Next.js host applications
-      // do not throw an error for now
-      default: () => null,
-      __esModule: true
-    })),
-    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
-      // TODO: incomplete implementation
-      Promise.resolve({
-        useRouter() {
-          return {
-            push: (routerUrl) => {
-              history.pushState({}, "", routerUrl);
-            },
-            replace: (routerUrl) => {
-              history.replaceState({}, "", routerUrl);
-            },
-            back: () => {
-              history.back();
-            }
-          };
-        },
-        __esModule: true
-      })
-    )),
-    "next/dist/build/polyfills/process": () => Promise.resolve({
-      default: {
-        env: {
-          NODE_ENV: "production"
+          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 || (() => {
+            })
+          );
         }
-      },
-      __esModule: true
-    })
-  };
-  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
-  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
-  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
-  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
-  polyfill["next/script"] = polyfill["next/dist/client/script"];
-  return polyfill;
-}
-
-// src/shared/client/apply-origin.ts
-var tagNames = [
-  "img",
-  "source",
-  "video",
-  "audio",
-  "track",
-  "iframe",
-  "embed",
-  "script",
-  "link"
-];
-function applyOriginToNodes(doc, url) {
-  if (url.origin !== location.origin) {
-    const nodes = doc.querySelectorAll(
-      tagNames.map(
-        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
-      ).join(",")
-    );
-    nodes.forEach((node) => {
-      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
-        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
-      }
-      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
-        node.setAttribute(
-          "href",
-          new URL(node.getAttribute("href") ?? "/", url).href
+        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
+        };
       }
-      if (node.hasAttribute("srcset")) {
-        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("srcset", srcSet);
-        }
+    })
+  );
+  return mountUnmountSets.reduce(
+    (acc, { mount, unmount }) => {
+      if (typeof mount === "function") {
+        acc.mount.add(mount);
       }
-      if (node.hasAttribute("imagesrcset")) {
-        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("imagesrcset", srcSet);
-        }
+      if (typeof unmount === "function") {
+        acc.unmount.add(unmount);
       }
-    });
-  }
+      return acc;
+    },
+    {
+      mount: /* @__PURE__ */ new Set(),
+      unmount: /* @__PURE__ */ new Set()
+    }
+  );
 }
 
 // src/shared/ssr/fetch-headers.ts
@@ -1230,7 +1330,7 @@ function getRemoteComponentHtml(html) {
     return ssrRemoteComponentContainer.innerHTML;
   }
   const remoteComponentContainer = temp.querySelectorAll(
-    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next`
+    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
   );
   if (remoteComponentContainer.length > 0) {
     return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
@@ -1295,6 +1395,10 @@ function RemoteComponent({
   );
   const prevSrcRef = useRef(null);
   const componentHydrationHtml = useRef(null);
+  const prevIsRemoteComponentRef = useRef(false);
+  const prevUrlRef = useRef(null);
+  const prevRemoteComponentContainerRef = useRef(null);
+  const unmountRef = useRef(null);
   useLayoutEffect(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -1407,34 +1511,58 @@ function RemoteComponent({
           }
           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^="${name}"]`)) {
+          if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
+            `div[data-bundle][data-route][id^="${name}"]`
+          ) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
             throw multipleRemoteComponentsError(url.href);
           }
           const component = doc.querySelector(`div[data-bundle][data-route][id^="${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 the remote-component web component
+          doc.querySelector(`remote-component[name="${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 remoteName = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : name);
           const rsc = doc.querySelector(`#${remoteName}_rsc`);
           const bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default";
+          const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
           const metadata = {
             name: remoteName,
             bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? DEFAULT_ROUTE,
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_WEBPACK)
+            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
           };
           const remoteSharedEl = doc.querySelector(
             `#${remoteName}_shared[data-remote-components-shared]`
           );
           const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
           remoteSharedEl?.remove();
-          if (!component || !(rsc || nextData)) {
+          if (!component || !(rsc || nextData || isRemoteComponent)) {
             throw new RemoteComponentsError(
               `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
             );
           }
+          if (prevIsRemoteComponentRef.current) {
+            if (shadowRoot) {
+              shadowRoot.innerHTML = "";
+            }
+            const self = globalThis;
+            const prevUrl = prevUrlRef.current;
+            if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+              const unmountPromises = Promise.all(
+                Array.from(unmountRef.current ?? []).map(
+                  async (unmount) => unmount(
+                    shadowRoot ?? prevRemoteComponentContainerRef.current
+                  )
+                )
+              );
+              unmountRef.current = null;
+              await unmountPromises;
+            }
+          }
+          prevIsRemoteComponentRef.current = isRemoteComponent;
+          prevUrlRef.current = url;
           applyOriginToNodes(doc, url);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
@@ -1449,64 +1577,64 @@ function RemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = doc.querySelectorAll(
-            "script[src],script[data-src]"
-          );
-          const inlineScripts = doc.querySelectorAll(
+          const scripts = (isRemoteComponent ? component : doc).querySelectorAll("script[src],script[data-src]");
+          const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
-          const self = globalThis;
-          const prevNextScripts = self.__next_s;
-          const nextScripts = [];
-          self.__next_s = nextScripts;
-          await Promise.all(
-            Array.from(inlineScripts).filter(
-              (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
-                "data-remote-components-shared"
-              ) === "string")
-            ).map((script) => {
-              return new Promise((resolve) => {
-                if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
-                  if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
-                    const newScript = document.createElement("script");
-                    const blob = new Blob([script.textContent], {
-                      type: "application/javascript"
-                    });
-                    const blobUrl = URL.createObjectURL(blob);
-                    newScript.onload = () => {
+          if (!isRemoteComponent) {
+            const self = globalThis;
+            const prevNextScripts = self.__next_s;
+            const nextScripts = [];
+            self.__next_s = nextScripts;
+            await Promise.all(
+              Array.from(inlineScripts).filter(
+                (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
+                  "data-remote-components-shared"
+                ) === "string")
+              ).map((script) => {
+                return new Promise((resolve) => {
+                  if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
+                    if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
+                      const newScript = document.createElement("script");
+                      const blob = new Blob([script.textContent], {
+                        type: "application/javascript"
+                      });
+                      const blobUrl = URL.createObjectURL(blob);
+                      newScript.onload = () => {
+                        resolve(void 0);
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                      };
+                      newScript.onerror = () => {
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                        resolve(void 0);
+                      };
+                      newScript.src = blobUrl;
+                      document.body.appendChild(newScript);
+                    } else {
                       resolve(void 0);
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                    };
-                    newScript.onerror = () => {
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                      resolve(void 0);
-                    };
-                    newScript.src = blobUrl;
-                    document.body.appendChild(newScript);
+                      document.body.appendChild(script);
+                    }
                   } else {
                     resolve(void 0);
-                    document.body.appendChild(script);
                   }
-                } else {
-                  resolve(void 0);
-                }
-              });
-            })
-          );
-          nextScripts.forEach(([scriptSrc, props]) => {
-            const script = document.createElement("script");
-            if (scriptSrc) {
-              script.src = scriptSrc;
-            }
-            if (typeof props.children === "string") {
-              script.textContent = props.children;
-            }
-            setAttributesFromProps(script, props);
-            document.head.appendChild(script);
-          });
-          self.__next_s = prevNextScripts;
+                });
+              })
+            );
+            nextScripts.forEach(([scriptSrc, props]) => {
+              const script = document.createElement("script");
+              if (scriptSrc) {
+                script.src = scriptSrc;
+              }
+              if (typeof props.children === "string") {
+                script.textContent = props.children;
+              }
+              setAttributesFromProps(script, props);
+              document.head.appendChild(script);
+            });
+            self.__next_s = prevNextScripts;
+          }
           let rscName;
           if (rsc) {
             rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
@@ -1523,7 +1651,11 @@ function RemoteComponent({
             url: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
-          componentHydrationHtml.current = Array.from(doc.querySelectorAll("link,style")).map((link) => link.outerHTML).join("") + component.innerHTML;
+          componentHydrationHtml.current = `${Array.from(
+            doc.querySelectorAll("link,style")
+          ).map((link) => link.outerHTML).join(
+            ""
+          )}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -1534,48 +1666,89 @@ function RemoteComponent({
               remoteShared.__remote_components_missing_shared__
             );
           }
-          const result = await loadRemoteComponent({
-            url: new URL(url, location.origin),
-            name: remoteName,
-            rscName,
-            bundle,
-            route: metadata.route,
-            runtime: metadata.runtime,
-            data: newData.data,
-            nextData,
-            scripts: Array.from(scripts).map((script) => {
-              const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
-              const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
-                scriptSrc
-              )?.groups ?? {
-                prefix: void 0,
-                id: scriptSrc
-              };
-              return {
-                src: new URL(
-                  `${prefix ?? ""}${path}`.replace(
-                    /(?<char>[^:])(?<double>\/\/)/g,
-                    "$1/"
-                  ),
-                  url
-                ).href
-              };
-            }),
-            shared: {
-              ...sharedPolyfills(userShared),
-              ...userShared
-            },
-            remoteShared,
-            container: shadowRoot
-          });
-          if (rsc) {
-            rsc.remove();
-          }
-          setData(newData);
-          if (result.error) {
-            setRemoteComponent(result.error);
+          if (isRemoteComponent) {
+            setData(newData);
+            if (shadowRoot) {
+              let shadowRootHtml = component.innerHTML;
+              if (reset) {
+                shadowRootHtml = `<style data-remote-components-reset="">:host { all: initial; }</style>${shadowRootHtml}`;
+              }
+              shadowRoot.innerHTML = shadowRootHtml;
+              setRemoteComponent(null);
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(shadowRoot.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+              );
+            } else if (isolate === false) {
+              setRemoteComponent(
+                // TODO: remove wrapper div by converting HTML to RSC or React tree
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: { __html: component.innerHTML },
+                    ref: prevRemoteComponentContainerRef
+                  }
+                )
+              );
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(component.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map(
+                  (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
+                )
+              );
+            }
           } else {
-            setRemoteComponent(result.component);
+            const result = await loadRemoteComponent({
+              url: new URL(url, location.origin),
+              name: remoteName,
+              rscName,
+              bundle,
+              route: metadata.route,
+              runtime: metadata.runtime,
+              data: newData.data,
+              nextData,
+              scripts: Array.from(scripts).map((script) => {
+                const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+                const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
+                  scriptSrc
+                )?.groups ?? {
+                  prefix: void 0,
+                  id: scriptSrc
+                };
+                return {
+                  src: new URL(
+                    `${prefix ?? ""}${path}`.replace(
+                      /(?<char>[^:])(?<double>\/\/)/g,
+                      "$1/"
+                    ),
+                    url
+                  ).href
+                };
+              }),
+              shared: {
+                ...sharedPolyfills(userShared),
+                ...userShared
+              },
+              remoteShared,
+              container: shadowRoot
+            });
+            if (rsc) {
+              rsc.remove();
+            }
+            setData(newData);
+            if (result.error) {
+              setRemoteComponent(result.error);
+            } else {
+              setRemoteComponent(result.component);
+            }
           }
         } catch (error) {
           setRemoteComponent(error);
@@ -1590,7 +1763,8 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders
+    additionalHeaders,
+    reset
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1599,7 +1773,7 @@ function RemoteComponent({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
-    runtime: data?.runtime || RUNTIME_WEBPACK
+    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
@@ -1618,6 +1792,24 @@ function RemoteComponent({
   if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
+    if (prevIsRemoteComponentRef.current) {
+      loadStaticRemoteComponent(
+        Array.from(shadowRoot.querySelectorAll("script")),
+        url
+      ).then(({ mount }) => {
+        return Promise.all(
+          Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+        );
+      }).catch((e) => {
+        const error = new RemoteComponentsError(
+          `Error mounting remote component from "${url.href}"`,
+          {
+            cause: e
+          }
+        );
+        setRemoteComponent(error);
+      });
+    }
   }
   if (isolate !== false) {
     const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");