remote-components 0.0.33 → 0.0.34

package/dist/html/remote.cjs

@@ -0,0 +1,198 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/shared/error.ts
+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/client/static-loader.ts
+var static_loader_exports = {};
+__export(static_loader_exports, {
+  loadStaticRemoteComponent: () => loadStaticRemoteComponent
+});
+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/html/remote/index.tsx
+init_error();
+if (typeof HTMLElement !== "undefined") {
+  class RemoteComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.root = null;
+      this.unmount = null;
+      const html = this.innerHTML;
+      this.root = this.attachShadow({
+        mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+      });
+      this.root.innerHTML = html;
+      (async () => {
+        const { loadStaticRemoteComponent: loadStaticRemoteComponent2 } = await Promise.resolve().then(() => (init_static_loader(), static_loader_exports));
+        loadStaticRemoteComponent2(
+          Array.from(this.root?.querySelectorAll("script") ?? []),
+          new URL(location.href)
+        ).then(({ mount, unmount }) => {
+          this.unmount = unmount;
+          return Promise.all(
+            Array.from(mount).map((mountFn) => mountFn(this.root))
+          );
+        }).catch((e) => {
+          console.error(
+            new RemoteComponentsError("Error mounting remote component.", {
+              cause: e
+            })
+          );
+        });
+      })().catch((e) => {
+        console.error(
+          new RemoteComponentsError("Error mounting remote component.", {
+            cause: e
+          })
+        );
+      });
+    }
+    disconnectedCallback() {
+      (async () => {
+        if (this.unmount) {
+          await Promise.all(
+            Array.from(this.unmount).map(async (unmount) => {
+              try {
+                await unmount(this.root);
+              } catch (e) {
+                console.error(
+                  new RemoteComponentsError(
+                    "Error unmounting remote component.",
+                    { cause: e }
+                  )
+                );
+              }
+            })
+          );
+        }
+      })().catch((e) => {
+        console.error(
+          new RemoteComponentsError("Error unmounting remote component.", {
+            cause: e
+          })
+        );
+      });
+    }
+  }
+  customElements.define("remote-component", RemoteComponent);
+}
+//# sourceMappingURL=remote.cjs.map

package/dist/html/remote.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n  code = 'REMOTE_COMPONENTS_ERROR';\n\n  constructor(message: string, options?: { cause?: unknown }) {\n    super(message, options);\n    this.name = 'RemoteComponentsError';\n  }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n  return new Error(\n    `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.`,\n  );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n  return new RemoteComponentsError(\n    `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n    { cause: error instanceof Error ? error : new Error(String(error)) },\n  );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n  MountOrUnmountFunction,\n  RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n  scripts: HTMLScriptElement[],\n  url: URL,\n) {\n  const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n  if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n    self.__remote_script_entrypoint_mount__[url.href] = new Set();\n  }\n  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n    self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n  }\n  const mountUnmountSets = await Promise.all(\n    scripts.map(async (script) => {\n      try {\n        let src =\n          typeof script.getAttribute === 'function'\n            ? (script.getAttribute('src') ?? script.src)\n            : script.src;\n        // if there's no src attribute but there is inline script content, create a blob URL for it\n        if (!src && script.textContent) {\n          const blob = new Blob(\n            [\n              script.textContent.replace(\n                /import\\.meta\\.url/g,\n                JSON.stringify(url),\n              ),\n            ],\n            {\n              type: 'text/javascript',\n            },\n          );\n          src = URL.createObjectURL(blob);\n        }\n        const mod = (await import(\n          /* @vite-ignore */\n          /* webpackIgnore: true */ new URL(src, url).href\n        )) as {\n          mount?: MountOrUnmountFunction;\n          unmount?: MountOrUnmountFunction;\n          default?: {\n            mount?: MountOrUnmountFunction;\n            unmount?: MountOrUnmountFunction;\n          };\n        };\n        // revoke the object URL if we created one\n        if (src.startsWith('blob:')) {\n          URL.revokeObjectURL(src);\n        }\n        if (\n          typeof mod.mount === 'function' ||\n          typeof mod.default?.mount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_mount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_mount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_mount__[url.href]) {\n            self.__remote_script_entrypoint_mount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_mount__[url.href]?.add(\n            mod.mount ||\n              mod.default?.mount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        if (\n          typeof mod.unmount === 'function' ||\n          typeof mod.default?.unmount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_unmount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_unmount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n            self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_unmount__[url.href]?.add(\n            mod.unmount ||\n              mod.default?.unmount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        return {\n          mount: mod.mount || mod.default?.mount,\n          unmount: mod.unmount || mod.default?.unmount,\n        };\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError(\n            `Error loading remote component script from \"${script.src || url.href}\".`,\n            { cause: e },\n          ),\n        );\n        return {\n          mount: undefined,\n          unmount: undefined,\n        };\n      }\n    }),\n  );\n  return mountUnmountSets.reduce(\n    (acc, { mount, unmount }) => {\n      if (typeof mount === 'function') {\n        acc.mount.add(mount);\n      }\n      if (typeof unmount === 'function') {\n        acc.unmount.add(unmount);\n      }\n      return acc;\n    },\n    {\n      mount: new Set<MountOrUnmountFunction>(),\n      unmount: new Set<MountOrUnmountFunction>(),\n    },\n  );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n  class RemoteComponent extends HTMLElement {\n    name?: string;\n    root?: ShadowRoot | null = null;\n    unmount?: Set<MountOrUnmountFunction> | null = null;\n\n    constructor() {\n      super();\n\n      const html = this.innerHTML;\n      this.root = this.attachShadow({\n        mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n      });\n      this.root.innerHTML = html;\n\n      // run the mount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        const { loadStaticRemoteComponent } = await import(\n          '../../shared/client/static-loader'\n        );\n        loadStaticRemoteComponent(\n          Array.from(this.root?.querySelectorAll('script') ?? []),\n          new URL(location.href),\n        )\n          .then(({ mount, unmount }) => {\n            this.unmount = unmount;\n            return Promise.all(\n              Array.from(mount).map((mountFn) => mountFn(this.root)),\n            );\n          })\n          .catch((e) => {\n            // eslint-disable-next-line no-console\n            console.error(\n              new RemoteComponentsError('Error mounting remote component.', {\n                cause: e,\n              }),\n            );\n          });\n      })().catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError('Error mounting remote component.', {\n            cause: e,\n          }),\n        );\n      });\n    }\n\n    disconnectedCallback() {\n      // run the unmount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        if (this.unmount) {\n          await Promise.all(\n            Array.from(this.unmount).map(async (unmount) => {\n              try {\n                await unmount(this.root);\n              } catch (e) {\n                // eslint-disable-next-line no-console\n                console.error(\n                  new RemoteComponentsError(\n                    'Error unmounting remote component.',\n                    { cause: e },\n                  ),\n                );\n              }\n            }),\n          );\n        }\n      })().catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError('Error unmounting remote component.', {\n            cause: e,\n          }),\n        );\n      });\n    }\n  }\n\n  // register the custom element\n  customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}

package/dist/html/remote.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/html/remote.js

@@ -0,0 +1,197 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/shared/error.ts
+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/client/static-loader.ts
+var static_loader_exports = {};
+__export(static_loader_exports, {
+  loadStaticRemoteComponent: () => loadStaticRemoteComponent
+});
+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/html/remote/index.tsx
+init_error();
+if (typeof HTMLElement !== "undefined") {
+  class RemoteComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.root = null;
+      this.unmount = null;
+      const html = this.innerHTML;
+      this.root = this.attachShadow({
+        mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+      });
+      this.root.innerHTML = html;
+      (async () => {
+        const { loadStaticRemoteComponent: loadStaticRemoteComponent2 } = await Promise.resolve().then(() => (init_static_loader(), static_loader_exports));
+        loadStaticRemoteComponent2(
+          Array.from(this.root?.querySelectorAll("script") ?? []),
+          new URL(location.href)
+        ).then(({ mount, unmount }) => {
+          this.unmount = unmount;
+          return Promise.all(
+            Array.from(mount).map((mountFn) => mountFn(this.root))
+          );
+        }).catch((e) => {
+          console.error(
+            new RemoteComponentsError("Error mounting remote component.", {
+              cause: e
+            })
+          );
+        });
+      })().catch((e) => {
+        console.error(
+          new RemoteComponentsError("Error mounting remote component.", {
+            cause: e
+          })
+        );
+      });
+    }
+    disconnectedCallback() {
+      (async () => {
+        if (this.unmount) {
+          await Promise.all(
+            Array.from(this.unmount).map(async (unmount) => {
+              try {
+                await unmount(this.root);
+              } catch (e) {
+                console.error(
+                  new RemoteComponentsError(
+                    "Error unmounting remote component.",
+                    { cause: e }
+                  )
+                );
+              }
+            })
+          );
+        }
+      })().catch((e) => {
+        console.error(
+          new RemoteComponentsError("Error unmounting remote component.", {
+            cause: e
+          })
+        );
+      });
+    }
+  }
+  customElements.define("remote-component", RemoteComponent);
+}
+//# sourceMappingURL=remote.js.map

package/dist/html/remote.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n  code = 'REMOTE_COMPONENTS_ERROR';\n\n  constructor(message: string, options?: { cause?: unknown }) {\n    super(message, options);\n    this.name = 'RemoteComponentsError';\n  }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n  return new Error(\n    `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.`,\n  );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n  return new RemoteComponentsError(\n    `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n    { cause: error instanceof Error ? error : new Error(String(error)) },\n  );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n  MountOrUnmountFunction,\n  RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n  scripts: HTMLScriptElement[],\n  url: URL,\n) {\n  const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n  if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n    self.__remote_script_entrypoint_mount__[url.href] = new Set();\n  }\n  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n    self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n  }\n  const mountUnmountSets = await Promise.all(\n    scripts.map(async (script) => {\n      try {\n        let src =\n          typeof script.getAttribute === 'function'\n            ? (script.getAttribute('src') ?? script.src)\n            : script.src;\n        // if there's no src attribute but there is inline script content, create a blob URL for it\n        if (!src && script.textContent) {\n          const blob = new Blob(\n            [\n              script.textContent.replace(\n                /import\\.meta\\.url/g,\n                JSON.stringify(url),\n              ),\n            ],\n            {\n              type: 'text/javascript',\n            },\n          );\n          src = URL.createObjectURL(blob);\n        }\n        const mod = (await import(\n          /* @vite-ignore */\n          /* webpackIgnore: true */ new URL(src, url).href\n        )) as {\n          mount?: MountOrUnmountFunction;\n          unmount?: MountOrUnmountFunction;\n          default?: {\n            mount?: MountOrUnmountFunction;\n            unmount?: MountOrUnmountFunction;\n          };\n        };\n        // revoke the object URL if we created one\n        if (src.startsWith('blob:')) {\n          URL.revokeObjectURL(src);\n        }\n        if (\n          typeof mod.mount === 'function' ||\n          typeof mod.default?.mount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_mount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_mount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_mount__[url.href]) {\n            self.__remote_script_entrypoint_mount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_mount__[url.href]?.add(\n            mod.mount ||\n              mod.default?.mount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        if (\n          typeof mod.unmount === 'function' ||\n          typeof mod.default?.unmount === 'function'\n        ) {\n          if (!self.__remote_script_entrypoint_unmount__) {\n            // eslint-disable-next-line camelcase\n            self.__remote_script_entrypoint_unmount__ = {};\n          }\n          if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n            self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n          }\n          self.__remote_script_entrypoint_unmount__[url.href]?.add(\n            mod.unmount ||\n              mod.default?.unmount ||\n              (() => {\n                // noop\n              }),\n          );\n        }\n        return {\n          mount: mod.mount || mod.default?.mount,\n          unmount: mod.unmount || mod.default?.unmount,\n        };\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError(\n            `Error loading remote component script from \"${script.src || url.href}\".`,\n            { cause: e },\n          ),\n        );\n        return {\n          mount: undefined,\n          unmount: undefined,\n        };\n      }\n    }),\n  );\n  return mountUnmountSets.reduce(\n    (acc, { mount, unmount }) => {\n      if (typeof mount === 'function') {\n        acc.mount.add(mount);\n      }\n      if (typeof unmount === 'function') {\n        acc.unmount.add(unmount);\n      }\n      return acc;\n    },\n    {\n      mount: new Set<MountOrUnmountFunction>(),\n      unmount: new Set<MountOrUnmountFunction>(),\n    },\n  );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n  class RemoteComponent extends HTMLElement {\n    name?: string;\n    root?: ShadowRoot | null = null;\n    unmount?: Set<MountOrUnmountFunction> | null = null;\n\n    constructor() {\n      super();\n\n      const html = this.innerHTML;\n      this.root = this.attachShadow({\n        mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n      });\n      this.root.innerHTML = html;\n\n      // run the mount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        const { loadStaticRemoteComponent } = await import(\n          '../../shared/client/static-loader'\n        );\n        loadStaticRemoteComponent(\n          Array.from(this.root?.querySelectorAll('script') ?? []),\n          new URL(location.href),\n        )\n          .then(({ mount, unmount }) => {\n            this.unmount = unmount;\n            return Promise.all(\n              Array.from(mount).map((mountFn) => mountFn(this.root)),\n            );\n          })\n          .catch((e) => {\n            // eslint-disable-next-line no-console\n            console.error(\n              new RemoteComponentsError('Error mounting remote component.', {\n                cause: e,\n              }),\n            );\n          });\n      })().catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError('Error mounting remote component.', {\n            cause: e,\n          }),\n        );\n      });\n    }\n\n    disconnectedCallback() {\n      // run the unmount functions for any scripts inside the shadow root asynchronously\n      (async () => {\n        if (this.unmount) {\n          await Promise.all(\n            Array.from(this.unmount).map(async (unmount) => {\n              try {\n                await unmount(this.root);\n              } catch (e) {\n                // eslint-disable-next-line no-console\n                console.error(\n                  new RemoteComponentsError(\n                    'Error unmounting remote component.',\n                    { cause: e },\n                  ),\n                );\n              }\n            }),\n          );\n        }\n      })().catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(\n          new RemoteComponentsError('Error unmounting remote component.', {\n            cause: e,\n          }),\n        );\n      });\n    }\n  }\n\n  // register the custom element\n  customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}

package/dist/internal/next/host/app-router-client.cjs

@@ -61,6 +61,7 @@ function RemoteComponentClient({
   isolate,
   mode = "open",
   reset,
+  type,
   children
 }) {
   const remoteComponentId = (0, import_react.useId)();
@@ -72,10 +73,13 @@ function RemoteComponentClient({
     url,
     loading: false
   });
+  const startRef = (0, import_react.useRef)(null);
+  const endRef = (0, import_react.useRef)(null);
+  const prevRemoteComponentUnmountRef = (0, import_react.useRef)(null);
   if (component instanceof Error) {
     throw component;
   }
-  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
+  const shouldUseChildren = (!component || component && !nextData && type !== "remote-component" && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
   // we don't use the provided static HTML
   // to mitigate layout shift when loading CSS using JavaScript on the client
   nextData?.buildId !== "development";
@@ -161,6 +165,23 @@ function RemoteComponentClient({
     shouldUseChildren,
     remoteComponentId
   ]);
+  (0, import_react.useEffect)(() => {
+    if (prevRemoteComponentUnmountRef.current && component !== children) {
+      const { unmount, root } = prevRemoteComponentUnmountRef.current;
+      prevRemoteComponentUnmountRef.current = null;
+      Promise.all(
+        Array.from(unmount).map(async (unmountFn) => {
+          try {
+            await unmountFn(root);
+          } catch (e) {
+            console.error(e);
+          }
+        })
+      ).catch((e) => {
+        console.error(e);
+      });
+    }
+  }, [component, children]);
   (0, import_react.useEffect)(() => {
     (0, import_react.startTransition)(async () => {
       try {
@@ -172,6 +193,36 @@ function RemoteComponentClient({
             url,
             loading: true
           };
+          if (type === "remote-component") {
+            setComponent(children);
+            (0, import_remote_component.loadStaticRemoteComponent)(
+              scripts,
+              new URL(url, location.origin)
+            ).then(({ mount, unmount }) => {
+              if (mount.size > 0) {
+                let root = shadowRootRef.current;
+                try {
+                  if (!root && startRef.current && endRef.current) {
+                    root = document.querySelectorAll(
+                      `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`
+                    );
+                  }
+                } catch (e) {
+                  console.error(e);
+                }
+                if (unmount.size > 0) {
+                  prevRemoteComponentUnmountRef.current = { unmount, root };
+                }
+                return Promise.all(
+                  Array.from(mount).map((mountFn) => mountFn(root))
+                );
+              }
+            }).catch((e) => {
+              console.error(e);
+              setComponent(e);
+            });
+            return;
+          }
           const rscName = `__remote_components_rsc_${(0, import_utils.escapeString)(new URL(url).href)}_${(0, import_utils.escapeString)(name)}`;
           const result = await (0, import_remote_component.loadRemoteComponent)({
             url: new URL(url, location.origin),
@@ -223,7 +274,8 @@ function RemoteComponentClient({
     remoteShared,
     children,
     links,
-    isolate
+    isolate,
+    type
   ]);
   if (nextData?.buildId === "development" && shadowRootRef.current && isolate !== false && reset && !shadowRootRef.current.querySelector("[data-remote-components-reset]")) {
     const style = document.createElement("style");
@@ -323,7 +375,7 @@ function RemoteComponentClient({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    isolate === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_start` }) : null,
+    isolate === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_start`, ref: startRef }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
       name,
       bundle,
@@ -340,7 +392,7 @@ function RemoteComponentClient({
         children: JSON.stringify(nextData)
       }
     ) : null,
-    isolate === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_end` }) : null
+    isolate === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { id: `${name}_end`, ref: endRef }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: