remote-components 0.0.21 → 0.0.23

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        id?: string;\n        ref?: React.Ref<HTMLTemplateElement>;\n        dangerouslySetInnerHTML?: {\n          __html: string;\n        };\n        children?: React.ReactNode;\n      };\n    }\n  }\n}\n\n// import { shared } from '@remote-components/shared/host';\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = element?.shadowRoot ?? null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot, links, url]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared: tryImportShared(),\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} /> : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        id?: string;\n        ref?: React.Ref<HTMLTemplateElement>;\n        dangerouslySetInnerHTML?: {\n          __html: string;\n        };\n        children?: React.ReactNode;\n      };\n    }\n  }\n}\n\n// import { shared } from '@remote-components/shared/host';\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  mode = 'open',\n  reset,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n  const metadataRef = useRef<{\n    name: string;\n    bundle: string;\n    route: string;\n    url: string;\n  }>({\n    name,\n    bundle,\n    route,\n    url,\n  });\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(\n        `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}`,\n      );\n      const self = globalThis as Record<\n        `__remote_components_shadowroot_${string}`,\n        ShadowRoot | null\n      >;\n      const shadowRootKey =\n        `__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}` as const;\n      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n      self[shadowRootKey] = null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        try {\n          shadowRootElement = element.attachShadow({ mode });\n        } catch {\n          // do nothing if attachShadow fails because of existing shadow root\n        }\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot, links, url, mode]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (\n      (!component && (isolate === false || shadowRoot)) ||\n      metadataRef.current.url !== url ||\n      metadataRef.current.name !== name ||\n      metadataRef.current.bundle !== bundle ||\n      metadataRef.current.route !== route\n    ) {\n      metadataRef.current = {\n        name,\n        bundle,\n        route,\n        url,\n      };\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared: tryImportShared(),\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  const resetStyle = reset ? (\n    <style data-remote-components-reset>{`:host { all: initial; }`}</style>\n  ) : null;\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div\n        id={`shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}`}\n      >\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode={mode}>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: `<img\n      alt=\"\" decoding=\"async\" style=\"display:none\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n      onload=\"(function(el){\n        const root = el.getRootNode();\n        globalThis.__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')} = root;\n        el.parentElement.remove();\n      })(this)\"\n    />`,\n              }}\n            />\n            {resetStyle}\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {resetStyle}\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                <>\n                  {resetStyle}\n                  {componentToRender}\n                </>\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/[^a-zA-Z0-9]+/g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} /> : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/internal/next/host/app-router-client.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RemoteComponentProps } from '../../../types-7425dfe1.js';
+import { R as RemoteComponentProps } from '../../../types-b8210fd3.js';
 import 'react';
 import '../../../types-280a3640.js';
 
@@ -24,6 +24,6 @@ declare module 'react/jsx-runtime' {
  * This component handles the loading and rendering of remote microfrontends.
  * It supports both RSC (React Server Components) and Next.js Pages Router based components.
  */
-declare function RemoteComponentClient({ url, name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, isolate, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function RemoteComponentClient({ url, name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, isolate, mode, reset, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
 export { RemoteComponentClient };

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

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useLayoutEffect } from "react";
+import { useEffect, useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import {
   loadRemoteComponent,
@@ -27,9 +27,17 @@ function RemoteComponentClient({
   links = [],
   remoteShared = {},
   isolate,
+  mode = "open",
+  reset,
   children
 }) {
   const [component, setComponent] = useState(null);
+  const metadataRef = useRef({
+    name,
+    bundle,
+    route,
+    url
+  });
   if (component instanceof Error) {
     throw component;
   }
@@ -41,11 +49,18 @@ function RemoteComponentClient({
   useLayoutEffect(() => {
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
       let shadowRootElement = null;
-      const element = document.getElementById(`shadowroot_${name}`);
-      shadowRootElement = element?.shadowRoot ?? null;
+      const element = document.getElementById(
+        `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")}`
+      );
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")}`;
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      self[shadowRootKey] = null;
       if (!shadowRootElement && element) {
-        element.attachShadow({ mode: "open" });
-        shadowRootElement = element.shadowRoot;
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+        } catch {
+        }
       }
       if (shadowRootElement) {
         shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
@@ -54,10 +69,16 @@ function RemoteComponentClient({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, links, url]);
+  }, [name, isolate, shadowRoot, links, url, mode]);
   useEffect(() => {
     let mounted = true;
-    if (!component && (isolate === false || shadowRoot)) {
+    if (!component && (isolate === false || shadowRoot) || metadataRef.current.url !== url || metadataRef.current.name !== name || metadataRef.current.bundle !== bundle || metadataRef.current.route !== route) {
+      metadataRef.current = {
+        name,
+        bundle,
+        route,
+        url
+      };
       loadRemoteComponent({
         url: new URL(url, location.origin),
         name,
@@ -103,6 +124,7 @@ function RemoteComponentClient({
     isolate,
     shadowRoot
   ]);
+  const resetStyle = reset ? /* @__PURE__ */ jsx("style", { "data-remote-components-reset": true, children: `:host { all: initial; }` }) : null;
   let componentToRender = /* @__PURE__ */ jsx(Fragment, { children: shouldUseChildren ? children : component });
   let linksToRender = links.map((link) => /* @__PURE__ */ jsx(
     "link",
@@ -114,22 +136,49 @@ function RemoteComponentClient({
     `${link.href}_${link.rel}`
   ));
   if (isolate !== false) {
-    componentToRender = /* @__PURE__ */ jsxs("div", { id: `shadowroot_${name}`, children: [
-      typeof document === "undefined" ? (
-        // eslint-disable-next-line react/no-unknown-property
-        /* @__PURE__ */ jsxs("template", { shadowrootmode: "open", children: [
-          linksToRender,
-          componentToRender
-        ] })
-      ) : null,
-      shadowRoot ? createPortal(
-        shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          linksToRender,
-          componentToRender
-        ] }) : componentToRender,
-        shadowRoot
-      ) : null
-    ] });
+    componentToRender = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")}`,
+        children: [
+          typeof document === "undefined" ? (
+            // eslint-disable-next-line react/no-unknown-property
+            /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  dangerouslySetInnerHTML: {
+                    __html: `<img
+      alt="" decoding="async" style="display:none"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+      onload="(function(el){
+        const root = el.getRootNode();
+        globalThis.__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")} = root;
+        el.parentElement.remove();
+      })(this)"
+    />`
+                  }
+                }
+              ),
+              resetStyle,
+              linksToRender,
+              componentToRender
+            ] })
+          ) : null,
+          shadowRoot ? createPortal(
+            shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              resetStyle,
+              linksToRender,
+              componentToRender
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              resetStyle,
+              componentToRender
+            ] }),
+            shadowRoot
+          ) : null
+        ]
+      }
+    );
     linksToRender = null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -144,7 +193,7 @@ function RemoteComponentClient({
     nextData ? /* @__PURE__ */ jsx(
       "script",
       {
-        id: `${bundle}_${route.replace(/\//g, "_")}${name}_next_data`,
+        id: `${bundle}_${route.replace(/[^a-zA-Z0-9]+/g, "_")}${name}_next_data`,
         type: "application/json",
         children: JSON.stringify(nextData)
       }

package/dist/internal/next/host/app-router-client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        id?: string;\n        ref?: React.Ref<HTMLTemplateElement>;\n        dangerouslySetInnerHTML?: {\n          __html: string;\n        };\n        children?: React.ReactNode;\n      };\n    }\n  }\n}\n\n// import { shared } from '@remote-components/shared/host';\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = element?.shadowRoot ?? null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot, links, url]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared: tryImportShared(),\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} /> : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        id?: string;\n        ref?: React.Ref<HTMLTemplateElement>;\n        dangerouslySetInnerHTML?: {\n          __html: string;\n        };\n        children?: React.ReactNode;\n      };\n    }\n  }\n}\n\n// import { shared } from '@remote-components/shared/host';\nasync function tryImportShared() {\n  try {\n    const { shared } = await import('@remote-components/shared/host/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  mode = 'open',\n  reset,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n  const metadataRef = useRef<{\n    name: string;\n    bundle: string;\n    route: string;\n    url: string;\n  }>({\n    name,\n    bundle,\n    route,\n    url,\n  });\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(\n        `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}`,\n      );\n      const self = globalThis as Record<\n        `__remote_components_shadowroot_${string}`,\n        ShadowRoot | null\n      >;\n      const shadowRootKey =\n        `__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}` as const;\n      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;\n      self[shadowRootKey] = null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        try {\n          shadowRootElement = element.attachShadow({ mode });\n        } catch {\n          // do nothing if attachShadow fails because of existing shadow root\n        }\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot, links, url, mode]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (\n      (!component && (isolate === false || shadowRoot)) ||\n      metadataRef.current.url !== url ||\n      metadataRef.current.name !== name ||\n      metadataRef.current.bundle !== bundle ||\n      metadataRef.current.route !== route\n    ) {\n      metadataRef.current = {\n        name,\n        bundle,\n        route,\n        url,\n      };\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared: tryImportShared(),\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  const resetStyle = reset ? (\n    <style data-remote-components-reset>{`:host { all: initial; }`}</style>\n  ) : null;\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={new URL(link.href as string, url || location.origin).href}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div\n        id={`shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')}`}\n      >\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode={mode}>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: `<img\n      alt=\"\" decoding=\"async\" style=\"display:none\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\"\n      onload=\"(function(el){\n        const root = el.getRootNode();\n        globalThis.__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name.replace(/[^a-z0-9]/g, '_')} = root;\n        el.parentElement.remove();\n      })(this)\"\n    />`,\n              }}\n            />\n            {resetStyle}\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {resetStyle}\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                <>\n                  {resetStyle}\n                  {componentToRender}\n                </>\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/[^a-zA-Z0-9]+/g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {isolate === false ? <template id={`${name}_end`} /> : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/internal/shared/client/remote-component.cjs

@@ -81,20 +81,28 @@ function applySharedModules(bundle, resolve) {
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
-  const nextCssOriginal = document.getElementById("__next_css__DO_NOT_USE__");
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
   if (nextCssOriginal) {
     nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
   }
   const nextCss = document.createElement("noscript");
   nextCss.id = "__next_css__DO_NOT_USE__";
-  const lastNode = document.head.childNodes[document.head.childNodes.length - 1];
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
   document.head.appendChild(nextCss);
   const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
   ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
   ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? ""] ?? -1;
@@ -136,28 +144,47 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
     ];
     const { default: Component } = componentLoader();
     const { default: App } = appLoader();
-    const cssRE = /\.s?css$/;
-    Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
-      self.__remote_webpack_require__?.[bundle]?.(id);
-    });
-    Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
-      const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
-      if (id) {
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
         self.__remote_webpack_require__?.[bundle]?.(id);
-      }
-    });
-    if (styleContainer) {
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
       let node = nextCss.previousSibling;
-      while (node && node !== lastNode) {
-        styleContainer.appendChild(node);
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        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));
+      });
+    } 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 };