remote-components 0.0.23 → 0.0.24

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

@@ -1,12 +1,21 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useLayoutEffect, useRef } from "react";
+import {
+  useId,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  startTransition
+} from "react";
 import { createPortal } from "react-dom";
+import * as Image from "next/image";
 import {
   loadRemoteComponent,
   DEFAULT_ROUTE,
   RUNTIME_WEBPACK
 } from "#internal/shared/client/remote-component";
+import { imageImpl, routerImpl } from "#internal/next/host/app-router-compat";
 async function tryImportShared() {
   try {
     const { shared } = await import("@remote-components/shared/host/app");
@@ -31,12 +40,14 @@ function RemoteComponentClient({
   reset,
   children
 }) {
+  const remoteComponentId = useId();
   const [component, setComponent] = useState(null);
   const metadataRef = useRef({
     name,
     bundle,
     route,
-    url
+    url,
+    loading: false
   });
   if (component instanceof Error) {
     throw component;
@@ -45,15 +56,30 @@ 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] = 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 = useRef(
+    typeof document === "undefined" ? null : document.querySelector(
+      `[data-remote-component-id="shadowroot_${remoteComponentId}"]`
+    )
+  );
+  const shadowRootRef = useRef(
+    self[shadowRootKey] ?? shadowContainerRef.current?.shadowRoot ?? null
+  );
+  const ssrShadowRootContentRef = useRef(
+    shadowRootRef.current?.querySelectorAll("*") ?? null
+  );
+  const ssrLinksStylesRef = useRef([]);
+  if (self[shadowRootKey] && shadowRootRef.current) {
+    self[shadowRootKey] = null;
+  }
   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.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, "_")}`;
+      const element = shadowContainerRef.current;
       shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
       self[shadowRootKey] = null;
       if (!shadowRootElement && element) {
@@ -63,51 +89,98 @@ function RemoteComponentClient({
         }
       }
       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, mode]);
+  }, [
+    name,
+    isolate,
+    links,
+    url,
+    mode,
+    self,
+    shadowRootKey,
+    shouldUseChildren,
+    remoteComponentId
+  ]);
   useEffect(() => {
-    let mounted = true;
-    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,
-        bundle,
-        route,
-        runtime,
-        data,
-        nextData,
-        scripts,
-        shared: tryImportShared(),
-        remoteShared,
-        container: shadowRoot
-      }).then((result) => {
-        if (mounted) {
+    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 loadRemoteComponent({
+            url: new URL(url, location.origin),
+            name,
+            bundle,
+            route,
+            runtime,
+            data,
+            nextData,
+            scripts,
+            shared: (async () => {
+              return {
+                "next/router": routerImpl,
+                ...await tryImportShared(),
+                "next/image": () => Promise.resolve(imageImpl(Image.default, bundle)),
+                "next/dist/client/image-component": () => Promise.resolve({ Image: 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,
@@ -121,30 +194,75 @@ function RemoteComponentClient({
     remoteShared,
     children,
     links,
-    isolate,
-    shadowRoot
+    isolate
   ]);
-  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",
-    {
-      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__ */ jsxs(Fragment, { children: [
+    (!nextData || nextData.buildId !== "development") && isolate !== false && reset ? /* @__PURE__ */ jsx("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null,
+    links.map((link) => /* @__PURE__ */ 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__ */ 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__ */ jsx(Fragment, { children }) : component;
   if (isolate !== false) {
     componentToRender = /* @__PURE__ */ jsxs(
       "div",
       {
-        id: `shadowroot_${new URL(url).href.replace(/[^a-z0-9]/g, "_")}_${name.replace(/[^a-z0-9]/g, "_")}`,
+        "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__ */ jsxs("template", { shadowrootmode: mode, children: [
-              /* @__PURE__ */ jsx(
+              mode === "closed" ? /* @__PURE__ */ jsx(
                 "div",
                 {
                   dangerouslySetInnerHTML: {
@@ -159,36 +277,31 @@ function RemoteComponentClient({
     />`
                   }
                 }
-              ),
-              resetStyle,
+              ) : null,
               linksToRender,
-              componentToRender
+              shouldUseChildren ? children : null
             ] })
           ) : null,
-          shadowRoot ? createPortal(
-            shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              resetStyle,
+          typeof document !== "undefined" && shadowRootRef.current && !shouldUseChildren ? createPortal(
+            /* @__PURE__ */ jsxs(Fragment, { children: [
               linksToRender,
               componentToRender
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              resetStyle,
-              componentToRender
             ] }),
-            shadowRoot
+            shadowRootRef.current
           ) : null
         ]
       }
     );
-    linksToRender = null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isolate === false ? /* @__PURE__ */ jsx("template", { id: `${name}_start` }) : null,
     /* @__PURE__ */ jsx("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
       name,
       bundle,
       route,
       runtime
     }) }),
-    linksToRender,
+    isolate === false ? linksToRender : null,
     componentToRender,
     nextData ? /* @__PURE__ */ jsx(
       "script",

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, 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":[]}
+{"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-compat.cjs

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var app_router_compat_exports = {};
+__export(app_router_compat_exports, {
+  imageImpl: () => imageImpl,
+  routerImpl: () => routerImpl
+});
+module.exports = __toCommonJS(app_router_compat_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_navigation = require("next/navigation");
+var import_polyfill = require("#internal/shared/client/polyfill");
+function imageImpl(ImageComponent, bundle) {
+  const component = function RemoteImage(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ImageComponent,
+      {
+        ...props,
+        src: (0, import_polyfill.applyBundleUrlToImagePropsSrc)(bundle, props.src)
+      }
+    );
+  };
+  component.default = component;
+  return component;
+}
+const routerImpl = async () => {
+  const { useRouter } = await import("next/navigation");
+  return Promise.resolve({
+    useRouter: () => {
+      const router = useRouter();
+      const pathname = (0, import_navigation.usePathname)();
+      const searchParams = (0, import_navigation.useSearchParams)();
+      const query = Object.fromEntries(searchParams.entries());
+      return {
+        pathname,
+        query,
+        asPath: searchParams.toString() ? `${pathname}?${searchParams.toString()}` : pathname,
+        push: (href, _, options) => {
+          router.push(href, options);
+          return Promise.resolve(true);
+        },
+        replace: (href, _, options) => {
+          router.replace(href, options);
+          return Promise.resolve(true);
+        },
+        refresh: () => Promise.resolve(router.refresh()),
+        prefetch: async () => {
+          console.warn(
+            "You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router."
+          );
+          return Promise.resolve();
+        },
+        back: () => {
+          if (typeof window !== "undefined") {
+            window.history.back();
+          }
+        },
+        reload: () => {
+          router.refresh();
+        },
+        beforePopState: () => {
+        },
+        events: {
+          on: () => {
+            console.warn(
+              "You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router."
+            );
+          },
+          off: () => {
+            console.warn(
+              "You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router."
+            );
+          },
+          emit: () => {
+            console.warn(
+              "You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router."
+            );
+          }
+        }
+      };
+    }
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  imageImpl,
+  routerImpl
+});
+//# sourceMappingURL=app-router-compat.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/next/host/app-router-compat.tsx"],"sourcesContent":["import type { default as ImageComponentType, ImageProps } from 'next/image';\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';\nimport { applyBundleUrlToImagePropsSrc } from '#internal/shared/client/polyfill';\n\nexport function imageImpl(\n  ImageComponent: typeof ImageComponentType,\n  bundle: string,\n) {\n  const component = function RemoteImage(props: ImageProps) {\n    return (\n      <ImageComponent\n        {...props}\n        src={applyBundleUrlToImagePropsSrc(bundle, props.src)}\n      />\n    );\n  };\n  component.default = component;\n  return component;\n}\n\nexport const routerImpl = async () => {\n  const { useRouter } = await import('next/navigation');\n  return Promise.resolve({\n    useRouter: () => {\n      const router = useRouter();\n      const pathname = usePathname();\n      const searchParams = useSearchParams();\n      const query = Object.fromEntries(searchParams.entries());\n      return {\n        pathname,\n        query,\n        asPath: searchParams.toString()\n          ? `${pathname}?${searchParams.toString()}`\n          : pathname,\n        push: (href: string, _: string, options?: NavigateOptions) => {\n          router.push(href, options);\n          return Promise.resolve(true);\n        },\n        replace: (href: string, _: string, options?: NavigateOptions) => {\n          router.replace(href, options);\n          return Promise.resolve(true);\n        },\n        refresh: () => Promise.resolve(router.refresh()),\n        prefetch: async () => {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router.',\n          );\n          return Promise.resolve();\n        },\n        back: () => {\n          // there's no back() in the App Router\n          if (typeof window !== 'undefined') {\n            window.history.back();\n          }\n        },\n        reload: () => {\n          router.refresh();\n        },\n        beforePopState: () => {\n          // there's no beforePopState() in the App Router\n        },\n        events: {\n          on: () => {\n            // there's no router.events in the App Router\n            // eslint-disable-next-line no-console\n            console.warn(\n              'You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router.',\n            );\n          },\n          off: () => {\n            // there's no router.events in the App Router\n            // eslint-disable-next-line no-console\n            console.warn(\n              'You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router.',\n            );\n          },\n          emit: () => {\n            // there's no router.events in the App Router\n            // eslint-disable-next-line no-console\n            console.warn(\n              'You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router.',\n            );\n          },\n        },\n      };\n    },\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWM;AAVN,wBAA6C;AAE7C,sBAA8C;AAEvC,SAAS,UACd,gBACA,QACA;AACA,QAAM,YAAY,SAAS,YAAY,OAAmB;AACxD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAK,+CAA8B,QAAQ,MAAM,GAAG;AAAA;AAAA,IACtD;AAAA,EAEJ;AACA,YAAU,UAAU;AACpB,SAAO;AACT;AAEO,MAAM,aAAa,YAAY;AACpC,QAAM,EAAE,UAAU,IAAI,MAAM,OAAO,iBAAiB;AACpD,SAAO,QAAQ,QAAQ;AAAA,IACrB,WAAW,MAAM;AACf,YAAM,SAAS,UAAU;AACzB,YAAM,eAAW,+BAAY;AAC7B,YAAM,mBAAe,mCAAgB;AACrC,YAAM,QAAQ,OAAO,YAAY,aAAa,QAAQ,CAAC;AACvD,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,QAAQ,aAAa,SAAS,IAC1B,GAAG,YAAY,aAAa,SAAS,MACrC;AAAA,QACJ,MAAM,CAAC,MAAc,GAAW,YAA8B;AAC5D,iBAAO,KAAK,MAAM,OAAO;AACzB,iBAAO,QAAQ,QAAQ,IAAI;AAAA,QAC7B;AAAA,QACA,SAAS,CAAC,MAAc,GAAW,YAA8B;AAC/D,iBAAO,QAAQ,MAAM,OAAO;AAC5B,iBAAO,QAAQ,QAAQ,IAAI;AAAA,QAC7B;AAAA,QACA,SAAS,MAAM,QAAQ,QAAQ,OAAO,QAAQ,CAAC;AAAA,QAC/C,UAAU,YAAY;AAEpB,kBAAQ;AAAA,YACN;AAAA,UACF;AACA,iBAAO,QAAQ,QAAQ;AAAA,QACzB;AAAA,QACA,MAAM,MAAM;AAEV,cAAI,OAAO,WAAW,aAAa;AACjC,mBAAO,QAAQ,KAAK;AAAA,UACtB;AAAA,QACF;AAAA,QACA,QAAQ,MAAM;AACZ,iBAAO,QAAQ;AAAA,QACjB;AAAA,QACA,gBAAgB,MAAM;AAAA,QAEtB;AAAA,QACA,QAAQ;AAAA,UACN,IAAI,MAAM;AAGR,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,UACA,KAAK,MAAM;AAGT,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,UACA,MAAM,MAAM;AAGV,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AACH;","names":[]}

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import ImageComponentType, { ImageProps } from 'next/image';
+import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
+declare function imageImpl(ImageComponent: typeof ImageComponentType, bundle: string): {
+    (props: ImageProps): react_jsx_runtime.JSX.Element;
+    default: /*elided*/ any;
+};
+declare const routerImpl: () => Promise<{
+    useRouter: () => {
+        pathname: string;
+        query: {
+            [k: string]: string;
+        };
+        asPath: string;
+        push: (href: string, _: string, options?: NavigateOptions) => Promise<boolean>;
+        replace: (href: string, _: string, options?: NavigateOptions) => Promise<boolean>;
+        refresh: () => Promise<void>;
+        prefetch: () => Promise<void>;
+        back: () => void;
+        reload: () => void;
+        beforePopState: () => void;
+        events: {
+            on: () => void;
+            off: () => void;
+            emit: () => void;
+        };
+    };
+}>;
+
+export { imageImpl, routerImpl };

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

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from "next/navigation";
+import { applyBundleUrlToImagePropsSrc } from "#internal/shared/client/polyfill";
+function imageImpl(ImageComponent, bundle) {
+  const component = function RemoteImage(props) {
+    return /* @__PURE__ */ jsx(
+      ImageComponent,
+      {
+        ...props,
+        src: applyBundleUrlToImagePropsSrc(bundle, props.src)
+      }
+    );
+  };
+  component.default = component;
+  return component;
+}
+const routerImpl = async () => {
+  const { useRouter } = await import("next/navigation");
+  return Promise.resolve({
+    useRouter: () => {
+      const router = useRouter();
+      const pathname = usePathname();
+      const searchParams = useSearchParams();
+      const query = Object.fromEntries(searchParams.entries());
+      return {
+        pathname,
+        query,
+        asPath: searchParams.toString() ? `${pathname}?${searchParams.toString()}` : pathname,
+        push: (href, _, options) => {
+          router.push(href, options);
+          return Promise.resolve(true);
+        },
+        replace: (href, _, options) => {
+          router.replace(href, options);
+          return Promise.resolve(true);
+        },
+        refresh: () => Promise.resolve(router.refresh()),
+        prefetch: async () => {
+          console.warn(
+            "You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router."
+          );
+          return Promise.resolve();
+        },
+        back: () => {
+          if (typeof window !== "undefined") {
+            window.history.back();
+          }
+        },
+        reload: () => {
+          router.refresh();
+        },
+        beforePopState: () => {
+        },
+        events: {
+          on: () => {
+            console.warn(
+              "You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router."
+            );
+          },
+          off: () => {
+            console.warn(
+              "You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router."
+            );
+          },
+          emit: () => {
+            console.warn(
+              "You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router."
+            );
+          }
+        }
+      };
+    }
+  });
+};
+export {
+  imageImpl,
+  routerImpl
+};
+//# sourceMappingURL=app-router-compat.js.map