remote-components 0.0.22 → 0.0.24

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

@@ -35,7 +35,9 @@ module.exports = __toCommonJS(app_router_client_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
+var Image = __toESM(require("next/image"), 1);
 var import_remote_component = require("#internal/shared/client/remote-component");
+var import_app_router_compat = require("#internal/next/host/app-router-compat");
 async function tryImportShared() {
   try {
     const { shared } = await import("@remote-components/shared/host/app");
@@ -56,9 +58,19 @@ function RemoteComponentClient({
   links = [],
   remoteShared = {},
   isolate,
+  mode = "open",
+  reset,
   children
 }) {
+  const remoteComponentId = (0, import_react.useId)();
   const [component, setComponent] = (0, import_react.useState)(null);
+  const metadataRef = (0, import_react.useRef)({
+    name,
+    bundle,
+    route,
+    url,
+    loading: false
+  });
   if (component instanceof Error) {
     throw component;
   }
@@ -66,58 +78,131 @@ function RemoteComponentClient({
   // we don't use the provided static HTML
   // to mitigate layout shift when loading CSS using JavaScript on the client
   nextData?.buildId !== "development";
-  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(null);
+  const self = globalThis;
+  const shadowRootKey = `__remote_components_shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")}`;
+  const shadowContainerRef = (0, import_react.useRef)(
+    typeof document === "undefined" ? null : document.querySelector(
+      `[data-remote-component-id="shadowroot_${remoteComponentId}"]`
+    )
+  );
+  const shadowRootRef = (0, import_react.useRef)(
+    self[shadowRootKey] ?? shadowContainerRef.current?.shadowRoot ?? null
+  );
+  const ssrShadowRootContentRef = (0, import_react.useRef)(
+    shadowRootRef.current?.querySelectorAll("*") ?? null
+  );
+  const ssrLinksStylesRef = (0, import_react.useRef)([]);
+  if (self[shadowRootKey] && shadowRootRef.current) {
+    self[shadowRootKey] = null;
+  }
   (0, import_react.useLayoutEffect)(() => {
-    if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+    if (!shadowContainerRef.current || shadowContainerRef.current !== shadowRootRef.current?.host) {
+      shadowRootRef.current = null;
+    }
+    if (isolate !== false && typeof document !== "undefined" && !shadowRootRef.current) {
       let shadowRootElement = null;
-      const element = document.getElementById(
-        `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name}`
-      );
-      shadowRootElement = element?.shadowRoot ?? null;
+      const element = shadowContainerRef.current;
+      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) => {
-          node.remove();
+        shadowRootRef.current = shadowRootElement;
+      }
+    }
+    if (shadowRootRef.current && ssrShadowRootContentRef.current && !shouldUseChildren) {
+      ssrShadowRootContentRef.current.forEach((node) => {
+        if (node.nodeName !== "LINK" && node.nodeName !== "STYLE") {
+          node.parentNode?.removeChild(node);
+        } else {
+          ssrLinksStylesRef.current.push(
+            node
+          );
+        }
+      });
+      ssrShadowRootContentRef.current = null;
+    }
+    if (ssrLinksStylesRef.current.length > 0 && shadowRootRef.current) {
+      const waitForLoad = shadowRootRef.current.querySelectorAll("link[data-wait]");
+      if (waitForLoad.length > 0) {
+        Promise.all(
+          Array.from(waitForLoad).map(
+            (link) => new Promise((resolve) => {
+              link.addEventListener("load", () => resolve());
+              link.addEventListener("error", () => resolve());
+            })
+          )
+        ).then(() => {
+          waitForLoad.forEach((el) => {
+            el.removeAttribute("data-wait");
+          });
+          ssrLinksStylesRef.current.forEach((el) => {
+            el.parentNode?.removeChild(el);
+          });
+          ssrLinksStylesRef.current = [];
+        }).catch((e) => {
+          console.error(e);
         });
-        setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, links, url]);
+  }, [
+    name,
+    isolate,
+    links,
+    url,
+    mode,
+    self,
+    shadowRootKey,
+    shouldUseChildren,
+    remoteComponentId
+  ]);
   (0, import_react.useEffect)(() => {
-    let mounted = true;
-    if (!component && (isolate === false || shadowRoot)) {
-      (0, import_remote_component.loadRemoteComponent)({
-        url: new URL(url, location.origin),
-        name,
-        bundle,
-        route,
-        runtime,
-        data,
-        nextData,
-        scripts,
-        shared: tryImportShared(),
-        remoteShared,
-        container: shadowRoot
-      }).then((result) => {
-        if (mounted) {
+    (0, import_react.startTransition)(async () => {
+      try {
+        if (!metadataRef.current.loading && !component && (isolate === false || shadowRootRef.current) || metadataRef.current.url !== url || metadataRef.current.name !== name || metadataRef.current.bundle !== bundle || metadataRef.current.route !== route) {
+          metadataRef.current = {
+            name,
+            bundle,
+            route,
+            url,
+            loading: true
+          };
+          const result = await (0, import_remote_component.loadRemoteComponent)({
+            url: new URL(url, location.origin),
+            name,
+            bundle,
+            route,
+            runtime,
+            data,
+            nextData,
+            scripts,
+            shared: (async () => {
+              return {
+                "next/router": import_app_router_compat.routerImpl,
+                ...await tryImportShared(),
+                "next/image": () => Promise.resolve((0, import_app_router_compat.imageImpl)(Image.default, bundle)),
+                "next/dist/client/image-component": () => Promise.resolve({ Image: (0, import_app_router_compat.imageImpl)(Image.default, bundle) })
+              };
+            })(),
+            remoteShared,
+            container: shadowRootRef.current
+          });
+          metadataRef.current.loading = false;
           if (result.error) {
             setComponent(result.error);
           } else {
             setComponent(result.component);
           }
         }
-      }).catch((error) => {
-        if (mounted) {
-          setComponent(error);
-        }
-      });
-    }
-    return () => {
-      mounted = false;
-    };
+      } catch (error) {
+        metadataRef.current.loading = false;
+        setComponent(error);
+      }
+    });
   }, [
     url,
     component,
@@ -131,52 +216,114 @@ function RemoteComponentClient({
     remoteShared,
     children,
     links,
-    isolate,
-    shadowRoot
+    isolate
   ]);
-  let componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: shouldUseChildren ? children : component });
-  let linksToRender = links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "link",
-    {
-      as: link.as,
-      href: new URL(link.href, url || location.origin).href,
-      rel: link.rel
-    },
-    `${link.href}_${link.rel}`
-  ));
+  if (nextData?.buildId === "development" && shadowRootRef.current && isolate !== false && reset && !shadowRootRef.current.querySelector("[data-remote-components-reset]")) {
+    const style = document.createElement("style");
+    style.setAttribute("data-remote-components-reset", "");
+    style.textContent = `:host { all: initial; }`;
+    shadowRootRef.current.insertBefore(style, shadowRootRef.current.firstChild);
+  } else if (shadowRootRef.current && isolate !== false && !reset && shadowRootRef.current.querySelector("[data-remote-components-reset]")) {
+    const style = shadowRootRef.current.querySelector(
+      "[data-remote-components-reset]"
+    );
+    if (style && shadowRootRef.current.firstChild !== style) {
+      shadowRootRef.current.removeChild(style);
+    }
+  }
+  const linksToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    (!nextData || nextData.buildId !== "development") && isolate !== false && reset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null,
+    links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        ...Object.entries(link).reduce(
+          (acc, [key, value]) => {
+            if (key !== "href" && key !== "precedence" && typeof value === "string") {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {}
+        ),
+        "data-wait": link.rel === "stylesheet" && link.href ? "" : void 0,
+        href: new URL(link.href, url).href
+      },
+      JSON.stringify(link)
+    )),
+    links.filter((link) => link.rel === "stylesheet").map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        ...Object.entries(link).reduce(
+          (acc, [key, value]) => {
+            if (key !== "href" && key !== "precedence" && typeof value === "string") {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {}
+        ),
+        as: "style",
+        fetchPriority: "high",
+        href: new URL(link.href, url).href,
+        precedence: bundle,
+        rel: "preload"
+      },
+      JSON.stringify(link)
+    ))
+  ] });
+  let componentToRender = shouldUseChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }) : component;
   if (isolate !== false) {
     componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        id: `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name}`,
+        "data-remote-component-id": `shadowroot_${remoteComponentId}`,
+        "data-remote-component-isolation-root": "",
+        id: `shadowroot_${name}`,
+        ref: shadowContainerRef,
         children: [
           typeof document === "undefined" ? (
             // eslint-disable-next-line react/no-unknown-property
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: "open", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: mode, children: [
+              mode === "closed" ? /* @__PURE__ */ (0, import_jsx_runtime.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)"
+    />`
+                  }
+                }
+              ) : null,
               linksToRender,
-              componentToRender
+              shouldUseChildren ? children : null
             ] })
           ) : null,
-          shadowRoot ? (0, import_react_dom.createPortal)(
-            shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          typeof document !== "undefined" && shadowRootRef.current && !shouldUseChildren ? (0, import_react_dom.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
               linksToRender,
               componentToRender
-            ] }) : componentToRender,
-            shadowRoot
+            ] }),
+            shadowRootRef.current
           ) : null
         ]
       }
     );
-    linksToRender = null;
   }
   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,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
       name,
       bundle,
       route,
       runtime
     }) }),
-    linksToRender,
+    isolate === false ? linksToRender : null,
     componentToRender,
     nextData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "script",

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(\n        `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name}`,\n      );\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\n        id={`shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, '_')}_${name}`}\n      >\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(/[^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":[]}
+{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  startTransition,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport * as Image from 'next/image';\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';\nimport { imageImpl, routerImpl } from '#internal/next/host/app-router-compat';\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 remoteComponentId = useId();\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    loading: boolean;\n  }>({\n    name,\n    bundle,\n    route,\n    url,\n    loading: false,\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 self = globalThis as Record<\n    `__remote_components_shadowroot_${string}`,\n    ShadowRoot | null\n  > &\n    Record<`__remote_components_container_${string}`, HTMLDivElement | null>;\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  const shadowContainerRef = useRef<HTMLDivElement | null>(\n    typeof document === 'undefined'\n      ? null\n      : document.querySelector(\n          `[data-remote-component-id=\"shadowroot_${remoteComponentId}\"]`,\n        ),\n  );\n  const shadowRootRef = useRef<ShadowRoot | null>(\n    self[shadowRootKey] ?? shadowContainerRef.current?.shadowRoot ?? null,\n  );\n  const ssrShadowRootContentRef = useRef<NodeListOf<ChildNode> | null>(\n    shadowRootRef.current?.querySelectorAll('*') ?? null,\n  );\n  const ssrLinksStylesRef = useRef<(HTMLLinkElement | HTMLStyleElement)[]>([]);\n\n  if (self[shadowRootKey] && shadowRootRef.current) {\n    self[shadowRootKey] = null;\n  }\n\n  useLayoutEffect(() => {\n    if (\n      !shadowContainerRef.current ||\n      shadowContainerRef.current !== shadowRootRef.current?.host\n    ) {\n      shadowRootRef.current = null;\n    }\n\n    if (\n      isolate !== false &&\n      typeof document !== 'undefined' &&\n      !shadowRootRef.current\n    ) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = shadowContainerRef.current;\n\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        shadowRootRef.current = shadowRootElement;\n      }\n    }\n\n    if (\n      shadowRootRef.current &&\n      ssrShadowRootContentRef.current &&\n      !shouldUseChildren\n    ) {\n      // remove all nodes from the shadow root except links\n      ssrShadowRootContentRef.current.forEach((node) => {\n        if (node.nodeName !== 'LINK' && node.nodeName !== 'STYLE') {\n          node.parentNode?.removeChild(node);\n        } else {\n          ssrLinksStylesRef.current.push(\n            node as HTMLLinkElement | HTMLStyleElement,\n          );\n        }\n      });\n      ssrShadowRootContentRef.current = null;\n    }\n\n    if (ssrLinksStylesRef.current.length > 0 && shadowRootRef.current) {\n      const waitForLoad =\n        shadowRootRef.current.querySelectorAll('link[data-wait]');\n      if (waitForLoad.length > 0) {\n        Promise.all(\n          Array.from(waitForLoad).map(\n            (link) =>\n              new Promise<void>((resolve) => {\n                link.addEventListener('load', () => resolve());\n                link.addEventListener('error', () => resolve());\n              }),\n          ),\n        )\n          .then(() => {\n            waitForLoad.forEach((el) => {\n              el.removeAttribute('data-wait');\n            });\n\n            // remove SSR injected styles and links\n            ssrLinksStylesRef.current.forEach((el) => {\n              el.parentNode?.removeChild(el);\n            });\n            ssrLinksStylesRef.current = [];\n          })\n          .catch((e) => {\n            // eslint-disable-next-line no-console\n            console.error(e);\n          });\n      }\n    }\n  }, [\n    name,\n    isolate,\n    links,\n    url,\n    mode,\n    self,\n    shadowRootKey,\n    shouldUseChildren,\n    remoteComponentId,\n  ]);\n\n  useEffect(() => {\n    startTransition(async () => {\n      try {\n        // if we have a component, we don't need to load it again\n        if (\n          (!metadataRef.current.loading &&\n            !component &&\n            (isolate === false || shadowRootRef.current)) ||\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            loading: true,\n          };\n          const result = await loadRemoteComponent({\n            url: new URL(url, location.origin),\n            name,\n            bundle,\n            route,\n            runtime,\n            data,\n            nextData,\n            scripts,\n            shared: (async () => {\n              return {\n                'next/router': routerImpl,\n                ...(await tryImportShared()),\n                'next/image': () =>\n                  Promise.resolve(imageImpl(Image.default, bundle)),\n                'next/dist/client/image-component': () =>\n                  Promise.resolve({ Image: imageImpl(Image.default, bundle) }),\n              };\n            })(),\n            remoteShared,\n            container: shadowRootRef.current,\n          });\n          metadataRef.current.loading = false;\n          if (result.error) {\n            setComponent(result.error);\n          } else {\n            setComponent(result.component);\n          }\n        }\n      } catch (error: unknown) {\n        metadataRef.current.loading = false;\n        setComponent(error as Error);\n      }\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  ]);\n\n  if (\n    nextData?.buildId === 'development' &&\n    shadowRootRef.current &&\n    isolate !== false &&\n    reset &&\n    !shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // inject reset styles into the shadow root\n    const style = document.createElement('style');\n    style.setAttribute('data-remote-components-reset', '');\n    style.textContent = `:host { all: initial; }`;\n    shadowRootRef.current.insertBefore(style, shadowRootRef.current.firstChild);\n  } else if (\n    shadowRootRef.current &&\n    isolate !== false &&\n    !reset &&\n    shadowRootRef.current.querySelector('[data-remote-components-reset]')\n  ) {\n    // ensure reset styles are the first child in the shadow root\n    const style = shadowRootRef.current.querySelector(\n      '[data-remote-components-reset]',\n    );\n    if (style && shadowRootRef.current.firstChild !== style) {\n      shadowRootRef.current.removeChild(style);\n    }\n  }\n\n  const linksToRender = (\n    <>\n      {(!nextData || nextData.buildId !== 'development') &&\n      isolate !== false &&\n      reset ? (\n        <style data-remote-components-reset=\"\">{`:host { all: initial; }`}</style>\n      ) : null}\n      {links.map((link) => (\n        <link\n          key={JSON.stringify(link)}\n          {...Object.entries(link).reduce<Record<string, string>>(\n            (acc, [key, value]) => {\n              if (\n                key !== 'href' &&\n                key !== 'precedence' &&\n                typeof value === 'string'\n              ) {\n                acc[key] = value;\n              }\n              return acc;\n            },\n            {},\n          )}\n          data-wait={link.rel === 'stylesheet' && link.href ? '' : undefined}\n          href={new URL(link.href as string, url).href}\n        />\n      ))}\n      {links\n        .filter((link) => link.rel === 'stylesheet')\n        .map((link) => (\n          <link\n            key={JSON.stringify(link)}\n            {...Object.entries(link).reduce<Record<string, string>>(\n              (acc, [key, value]) => {\n                if (\n                  key !== 'href' &&\n                  key !== 'precedence' &&\n                  typeof value === 'string'\n                ) {\n                  acc[key] = value;\n                }\n                return acc;\n              },\n              {},\n            )}\n            as=\"style\"\n            fetchPriority=\"high\"\n            href={new URL(link.href as string, url).href}\n            precedence={bundle}\n            rel=\"preload\"\n          />\n        ))}\n    </>\n  );\n\n  let componentToRender = shouldUseChildren ? (\n    <>{children}</>\n  ) : (\n    (component as React.ReactNode)\n  );\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div\n        data-remote-component-id={`shadowroot_${remoteComponentId}`}\n        data-remote-component-isolation-root=\"\"\n        id={`shadowroot_${name}`}\n        ref={shadowContainerRef}\n      >\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode={mode}>\n            {mode === 'closed' ? (\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            ) : null}\n            {linksToRender}\n            {shouldUseChildren ? children : null}\n          </template>\n        ) : null}\n        {typeof document !== 'undefined' &&\n        shadowRootRef.current &&\n        !shouldUseChildren\n          ? createPortal(\n              <>\n                {linksToRender}\n                {componentToRender}\n              </>,\n              shadowRootRef.current,\n            )\n          : null}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {isolate === false ? <template id={`${name}_start`} /> : null}\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {isolate === false ? linksToRender : null}\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 };