remote-components 0.0.34 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html/host.cjs +127 -117
- package/dist/html/host.cjs.map +1 -1
- package/dist/html/host.js +127 -117
- package/dist/html/host.js.map +1 -1
- package/dist/html/remote.cjs +4 -3
- package/dist/html/remote.cjs.map +1 -1
- package/dist/html/remote.js +4 -3
- package/dist/html/remote.js.map +1 -1
- package/dist/internal/next/host/app-router-client.cjs +4 -15
- package/dist/internal/next/host/app-router-client.cjs.map +1 -1
- package/dist/internal/next/host/app-router-client.js +10 -21
- package/dist/internal/next/host/app-router-client.js.map +1 -1
- package/dist/internal/next/host/app-router-compat.cjs.map +1 -1
- package/dist/internal/next/host/app-router-compat.d.ts +1 -1
- package/dist/internal/next/host/app-router-compat.js.map +1 -1
- package/dist/internal/next/remote/render-server.cjs +1 -1
- package/dist/internal/next/remote/render-server.cjs.map +1 -1
- package/dist/internal/next/remote/render-server.js +1 -1
- package/dist/internal/next/remote/render-server.js.map +1 -1
- package/dist/internal/shared/client/polyfill.cjs.map +1 -1
- package/dist/internal/shared/client/polyfill.js.map +1 -1
- package/dist/internal/shared/client/remote-component.cjs +179 -174
- package/dist/internal/shared/client/remote-component.cjs.map +1 -1
- package/dist/internal/shared/client/remote-component.d.ts +23 -23
- package/dist/internal/shared/client/remote-component.js +179 -174
- package/dist/internal/shared/client/remote-component.js.map +1 -1
- package/dist/internal/shared/error.cjs +1 -1
- package/dist/internal/shared/error.cjs.map +1 -1
- package/dist/internal/shared/error.js +1 -1
- package/dist/internal/shared/error.js.map +1 -1
- package/dist/internal/shared/ssr/dom-flight.cjs +7 -3
- package/dist/internal/shared/ssr/dom-flight.cjs.map +1 -1
- package/dist/internal/shared/ssr/dom-flight.js +7 -3
- package/dist/internal/shared/ssr/dom-flight.js.map +1 -1
- package/dist/internal/shared/ssr/fetch-remote-component.cjs +4 -4
- package/dist/internal/shared/ssr/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/shared/ssr/fetch-remote-component.js +5 -5
- package/dist/internal/shared/ssr/fetch-remote-component.js.map +1 -1
- package/dist/next/config.cjs +100 -86
- package/dist/next/config.cjs.map +1 -1
- package/dist/next/config.js +100 -86
- package/dist/next/config.js.map +1 -1
- package/dist/next/host/app-router-server.cjs.map +1 -1
- package/dist/next/host/app-router-server.js +1 -1
- package/dist/next/host/app-router-server.js.map +1 -1
- package/dist/next/host/client/index.cjs +723 -718
- package/dist/next/host/client/index.cjs.map +1 -1
- package/dist/next/host/client/index.js +727 -722
- package/dist/next/host/client/index.js.map +1 -1
- package/dist/next/host/pages-router-server.cjs +4 -4
- package/dist/next/host/pages-router-server.cjs.map +1 -1
- package/dist/next/host/pages-router-server.js +4 -4
- package/dist/next/host/pages-router-server.js.map +1 -1
- package/dist/next/{middleware.cjs → proxy.cjs} +24 -14
- package/dist/next/proxy.cjs.map +1 -0
- package/dist/next/proxy.d.ts +29 -0
- package/dist/next/{middleware.js → proxy.js} +21 -11
- package/dist/next/proxy.js.map +1 -0
- package/dist/react/index.cjs +4 -4
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +11 -11
- package/dist/react/index.js.map +1 -1
- package/package.json +15 -9
- package/dist/next/middleware.cjs.map +0 -1
- package/dist/next/middleware.d.ts +0 -29
- package/dist/next/middleware.js.map +0 -1
package/dist/html/remote.cjs
CHANGED
|
@@ -15,9 +15,9 @@ var init_error = __esm({
|
|
|
15
15
|
"src/shared/error.ts"() {
|
|
16
16
|
"use strict";
|
|
17
17
|
RemoteComponentsError = class extends Error {
|
|
18
|
+
code = "REMOTE_COMPONENTS_ERROR";
|
|
18
19
|
constructor(message, options) {
|
|
19
20
|
super(message, options);
|
|
20
|
-
this.code = "REMOTE_COMPONENTS_ERROR";
|
|
21
21
|
this.name = "RemoteComponentsError";
|
|
22
22
|
}
|
|
23
23
|
};
|
|
@@ -132,10 +132,11 @@ var init_static_loader = __esm({
|
|
|
132
132
|
init_error();
|
|
133
133
|
if (typeof HTMLElement !== "undefined") {
|
|
134
134
|
class RemoteComponent extends HTMLElement {
|
|
135
|
+
name;
|
|
136
|
+
root = null;
|
|
137
|
+
unmount = null;
|
|
135
138
|
constructor() {
|
|
136
139
|
super();
|
|
137
|
-
this.root = null;
|
|
138
|
-
this.unmount = null;
|
|
139
140
|
const html = this.innerHTML;
|
|
140
141
|
this.root = this.attachShadow({
|
|
141
142
|
mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
|
package/dist/html/remote.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n code = 'REMOTE_COMPONENTS_ERROR';\n\n constructor(message: string, options?: { cause?: unknown }) {\n super(message, options);\n this.name = 'RemoteComponentsError';\n }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n return new Error(\n `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n return new RemoteComponentsError(\n `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n { cause: error instanceof Error ? error : new Error(String(error)) },\n );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n scripts: HTMLScriptElement[],\n url: URL,\n) {\n const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n const mountUnmountSets = await Promise.all(\n scripts.map(async (script) => {\n try {\n let src =\n typeof script.getAttribute === 'function'\n ? (script.getAttribute('src') ?? script.src)\n : script.src;\n // if there's no src attribute but there is inline script content, create a blob URL for it\n if (!src && script.textContent) {\n const blob = new Blob(\n [\n script.textContent.replace(\n /import\\.meta\\.url/g,\n JSON.stringify(url),\n ),\n ],\n {\n type: 'text/javascript',\n },\n );\n src = URL.createObjectURL(blob);\n }\n const mod = (await import(\n /* @vite-ignore */\n /* webpackIgnore: true */ new URL(src, url).href\n )) as {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n default?: {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n };\n };\n // revoke the object URL if we created one\n if (src.startsWith('blob:')) {\n URL.revokeObjectURL(src);\n }\n if (\n typeof mod.mount === 'function' ||\n typeof mod.default?.mount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_mount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_mount__ = {};\n }\n if (!self.__remote_script_entrypoint_mount__[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_mount__[url.href]?.add(\n mod.mount ||\n mod.default?.mount ||\n (() => {\n // noop\n }),\n );\n }\n if (\n typeof mod.unmount === 'function' ||\n typeof mod.default?.unmount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_unmount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_unmount__ = {};\n }\n if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_unmount__[url.href]?.add(\n mod.unmount ||\n mod.default?.unmount ||\n (() => {\n // noop\n }),\n );\n }\n return {\n mount: mod.mount || mod.default?.mount,\n unmount: mod.unmount || mod.default?.unmount,\n };\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n `Error loading remote component script from \"${script.src || url.href}\".`,\n { cause: e },\n ),\n );\n return {\n mount: undefined,\n unmount: undefined,\n };\n }\n }),\n );\n return mountUnmountSets.reduce(\n (acc, { mount, unmount }) => {\n if (typeof mount === 'function') {\n acc.mount.add(mount);\n }\n if (typeof unmount === 'function') {\n acc.unmount.add(unmount);\n }\n return acc;\n },\n {\n mount: new Set<MountOrUnmountFunction>(),\n unmount: new Set<MountOrUnmountFunction>(),\n },\n );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n class RemoteComponent extends HTMLElement {\n name?: string;\n root?: ShadowRoot | null = null;\n unmount?: Set<MountOrUnmountFunction> | null = null;\n\n constructor() {\n super();\n\n const html = this.innerHTML;\n this.root = this.attachShadow({\n mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n });\n this.root.innerHTML = html;\n\n // run the mount functions for any scripts inside the shadow root asynchronously\n (async () => {\n const { loadStaticRemoteComponent } = await import(\n '../../shared/client/static-loader'\n );\n loadStaticRemoteComponent(\n Array.from(this.root?.querySelectorAll('script') ?? []),\n new URL(location.href),\n )\n .then(({ mount, unmount }) => {\n this.unmount = unmount;\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(this.root)),\n );\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n\n disconnectedCallback() {\n // run the unmount functions for any scripts inside the shadow root asynchronously\n (async () => {\n if (this.unmount) {\n await Promise.all(\n Array.from(this.unmount).map(async (unmount) => {\n try {\n await unmount(this.root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n 'Error unmounting remote component.',\n { cause: e },\n ),\n );\n }\n }),\n );\n }\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error unmounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n }\n\n // register the custom element\n customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}
|
|
1
|
+
{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n code = 'REMOTE_COMPONENTS_ERROR';\n\n constructor(message: string, options?: { cause?: unknown }) {\n super(message, options);\n this.name = 'RemoteComponentsError';\n }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n return new Error(\n `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n return new RemoteComponentsError(\n `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n { cause: error instanceof Error ? error : new Error(String(error)) },\n );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n scripts: HTMLScriptElement[],\n url: URL,\n) {\n const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n const mountUnmountSets = await Promise.all(\n scripts.map(async (script) => {\n try {\n let src =\n typeof script.getAttribute === 'function'\n ? (script.getAttribute('src') ?? script.src)\n : script.src;\n // if there's no src attribute but there is inline script content, create a blob URL for it\n if (!src && script.textContent) {\n const blob = new Blob(\n [\n script.textContent.replace(\n /import\\.meta\\.url/g,\n JSON.stringify(url),\n ),\n ],\n {\n type: 'text/javascript',\n },\n );\n src = URL.createObjectURL(blob);\n }\n const mod = (await import(\n /* @vite-ignore */\n /* webpackIgnore: true */ new URL(src, url).href\n )) as {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n default?: {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n };\n };\n // revoke the object URL if we created one\n if (src.startsWith('blob:')) {\n URL.revokeObjectURL(src);\n }\n if (\n typeof mod.mount === 'function' ||\n typeof mod.default?.mount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_mount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_mount__ = {};\n }\n if (!self.__remote_script_entrypoint_mount__[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_mount__[url.href]?.add(\n mod.mount ||\n mod.default?.mount ||\n (() => {\n // noop\n }),\n );\n }\n if (\n typeof mod.unmount === 'function' ||\n typeof mod.default?.unmount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_unmount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_unmount__ = {};\n }\n if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_unmount__[url.href]?.add(\n mod.unmount ||\n mod.default?.unmount ||\n (() => {\n // noop\n }),\n );\n }\n return {\n mount: mod.mount || mod.default?.mount,\n unmount: mod.unmount || mod.default?.unmount,\n };\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n `Error loading remote component script from \"${script.src || url.href}\".`,\n { cause: e },\n ),\n );\n return {\n mount: undefined,\n unmount: undefined,\n };\n }\n }),\n );\n return mountUnmountSets.reduce(\n (acc, { mount, unmount }) => {\n if (typeof mount === 'function') {\n acc.mount.add(mount);\n }\n if (typeof unmount === 'function') {\n acc.unmount.add(unmount);\n }\n return acc;\n },\n {\n mount: new Set<MountOrUnmountFunction>(),\n unmount: new Set<MountOrUnmountFunction>(),\n },\n );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n class RemoteComponent extends HTMLElement {\n name?: string;\n root?: ShadowRoot | null = null;\n unmount?: Set<MountOrUnmountFunction> | null = null;\n\n constructor() {\n super();\n\n const html = this.innerHTML;\n this.root = this.attachShadow({\n mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n });\n this.root.innerHTML = html;\n\n // run the mount functions for any scripts inside the shadow root asynchronously\n (async () => {\n const { loadStaticRemoteComponent } = await import(\n '../../shared/client/static-loader'\n );\n loadStaticRemoteComponent(\n Array.from(this.root?.querySelectorAll('script') ?? []),\n new URL(location.href),\n )\n .then(({ mount, unmount }) => {\n this.unmount = unmount;\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(this.root)),\n );\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n\n disconnectedCallback() {\n // run the unmount functions for any scripts inside the shadow root asynchronously\n (async () => {\n if (this.unmount) {\n await Promise.all(\n Array.from(this.unmount).map(async (unmount) => {\n try {\n await unmount(this.root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n 'Error unmounting remote component.',\n { cause: e },\n ),\n );\n }\n }),\n );\n }\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error unmounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n }\n\n // register the custom element\n customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}
|
package/dist/html/remote.js
CHANGED
|
@@ -14,9 +14,9 @@ var init_error = __esm({
|
|
|
14
14
|
"src/shared/error.ts"() {
|
|
15
15
|
"use strict";
|
|
16
16
|
RemoteComponentsError = class extends Error {
|
|
17
|
+
code = "REMOTE_COMPONENTS_ERROR";
|
|
17
18
|
constructor(message, options) {
|
|
18
19
|
super(message, options);
|
|
19
|
-
this.code = "REMOTE_COMPONENTS_ERROR";
|
|
20
20
|
this.name = "RemoteComponentsError";
|
|
21
21
|
}
|
|
22
22
|
};
|
|
@@ -131,10 +131,11 @@ var init_static_loader = __esm({
|
|
|
131
131
|
init_error();
|
|
132
132
|
if (typeof HTMLElement !== "undefined") {
|
|
133
133
|
class RemoteComponent extends HTMLElement {
|
|
134
|
+
name;
|
|
135
|
+
root = null;
|
|
136
|
+
unmount = null;
|
|
134
137
|
constructor() {
|
|
135
138
|
super();
|
|
136
|
-
this.root = null;
|
|
137
|
-
this.unmount = null;
|
|
138
139
|
const html = this.innerHTML;
|
|
139
140
|
this.root = this.attachShadow({
|
|
140
141
|
mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
|
package/dist/html/remote.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n code = 'REMOTE_COMPONENTS_ERROR';\n\n constructor(message: string, options?: { cause?: unknown }) {\n super(message, options);\n this.name = 'RemoteComponentsError';\n }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n return new Error(\n `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n return new RemoteComponentsError(\n `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n { cause: error instanceof Error ? error : new Error(String(error)) },\n );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n scripts: HTMLScriptElement[],\n url: URL,\n) {\n const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n const mountUnmountSets = await Promise.all(\n scripts.map(async (script) => {\n try {\n let src =\n typeof script.getAttribute === 'function'\n ? (script.getAttribute('src') ?? script.src)\n : script.src;\n // if there's no src attribute but there is inline script content, create a blob URL for it\n if (!src && script.textContent) {\n const blob = new Blob(\n [\n script.textContent.replace(\n /import\\.meta\\.url/g,\n JSON.stringify(url),\n ),\n ],\n {\n type: 'text/javascript',\n },\n );\n src = URL.createObjectURL(blob);\n }\n const mod = (await import(\n /* @vite-ignore */\n /* webpackIgnore: true */ new URL(src, url).href\n )) as {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n default?: {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n };\n };\n // revoke the object URL if we created one\n if (src.startsWith('blob:')) {\n URL.revokeObjectURL(src);\n }\n if (\n typeof mod.mount === 'function' ||\n typeof mod.default?.mount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_mount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_mount__ = {};\n }\n if (!self.__remote_script_entrypoint_mount__[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_mount__[url.href]?.add(\n mod.mount ||\n mod.default?.mount ||\n (() => {\n // noop\n }),\n );\n }\n if (\n typeof mod.unmount === 'function' ||\n typeof mod.default?.unmount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_unmount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_unmount__ = {};\n }\n if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_unmount__[url.href]?.add(\n mod.unmount ||\n mod.default?.unmount ||\n (() => {\n // noop\n }),\n );\n }\n return {\n mount: mod.mount || mod.default?.mount,\n unmount: mod.unmount || mod.default?.unmount,\n };\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n `Error loading remote component script from \"${script.src || url.href}\".`,\n { cause: e },\n ),\n );\n return {\n mount: undefined,\n unmount: undefined,\n };\n }\n }),\n );\n return mountUnmountSets.reduce(\n (acc, { mount, unmount }) => {\n if (typeof mount === 'function') {\n acc.mount.add(mount);\n }\n if (typeof unmount === 'function') {\n acc.unmount.add(unmount);\n }\n return acc;\n },\n {\n mount: new Set<MountOrUnmountFunction>(),\n unmount: new Set<MountOrUnmountFunction>(),\n },\n );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n class RemoteComponent extends HTMLElement {\n name?: string;\n root?: ShadowRoot | null = null;\n unmount?: Set<MountOrUnmountFunction> | null = null;\n\n constructor() {\n super();\n\n const html = this.innerHTML;\n this.root = this.attachShadow({\n mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n });\n this.root.innerHTML = html;\n\n // run the mount functions for any scripts inside the shadow root asynchronously\n (async () => {\n const { loadStaticRemoteComponent } = await import(\n '../../shared/client/static-loader'\n );\n loadStaticRemoteComponent(\n Array.from(this.root?.querySelectorAll('script') ?? []),\n new URL(location.href),\n )\n .then(({ mount, unmount }) => {\n this.unmount = unmount;\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(this.root)),\n );\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n\n disconnectedCallback() {\n // run the unmount functions for any scripts inside the shadow root asynchronously\n (async () => {\n if (this.unmount) {\n await Promise.all(\n Array.from(this.unmount).map(async (unmount) => {\n try {\n await unmount(this.root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n 'Error unmounting remote component.',\n { cause: e },\n ),\n );\n }\n }),\n );\n }\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error unmounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n }\n\n // register the custom element\n customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}
|
|
1
|
+
{"version":3,"sources":["../../src/shared/error.ts","../../src/shared/client/static-loader.ts","../../src/html/remote/index.tsx"],"sourcesContent":["export class RemoteComponentsError extends Error {\n code = 'REMOTE_COMPONENTS_ERROR';\n\n constructor(message: string, options?: { cause?: unknown }) {\n super(message, options);\n this.name = 'RemoteComponentsError';\n }\n}\n\nexport function multipleRemoteComponentsError(url: string | undefined) {\n return new Error(\n `Multiple Remote Components found at \"${url}\". When a page exposes multiple Remote Components you must specify the \"name\" prop to select which one to load.`,\n );\n}\n\nexport function failedToFetchRemoteComponentError(url: string, error: unknown) {\n return new RemoteComponentsError(\n `Failed to fetch Remote Component from \"${url}\". Is the URL correct and accessible?`,\n { cause: error instanceof Error ? error : new Error(String(error)) },\n );\n}\n","import { RemoteComponentsError } from '../error';\nimport type {\n MountOrUnmountFunction,\n RemoteComponentMountUnmount,\n} from './types';\n\nexport async function loadStaticRemoteComponent(\n scripts: HTMLScriptElement[],\n url: URL,\n) {\n const self = globalThis as typeof globalThis & RemoteComponentMountUnmount;\n if (self.__remote_script_entrypoint_mount__?.[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n if (self.__remote_script_entrypoint_unmount__?.[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n const mountUnmountSets = await Promise.all(\n scripts.map(async (script) => {\n try {\n let src =\n typeof script.getAttribute === 'function'\n ? (script.getAttribute('src') ?? script.src)\n : script.src;\n // if there's no src attribute but there is inline script content, create a blob URL for it\n if (!src && script.textContent) {\n const blob = new Blob(\n [\n script.textContent.replace(\n /import\\.meta\\.url/g,\n JSON.stringify(url),\n ),\n ],\n {\n type: 'text/javascript',\n },\n );\n src = URL.createObjectURL(blob);\n }\n const mod = (await import(\n /* @vite-ignore */\n /* webpackIgnore: true */ new URL(src, url).href\n )) as {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n default?: {\n mount?: MountOrUnmountFunction;\n unmount?: MountOrUnmountFunction;\n };\n };\n // revoke the object URL if we created one\n if (src.startsWith('blob:')) {\n URL.revokeObjectURL(src);\n }\n if (\n typeof mod.mount === 'function' ||\n typeof mod.default?.mount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_mount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_mount__ = {};\n }\n if (!self.__remote_script_entrypoint_mount__[url.href]) {\n self.__remote_script_entrypoint_mount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_mount__[url.href]?.add(\n mod.mount ||\n mod.default?.mount ||\n (() => {\n // noop\n }),\n );\n }\n if (\n typeof mod.unmount === 'function' ||\n typeof mod.default?.unmount === 'function'\n ) {\n if (!self.__remote_script_entrypoint_unmount__) {\n // eslint-disable-next-line camelcase\n self.__remote_script_entrypoint_unmount__ = {};\n }\n if (!self.__remote_script_entrypoint_unmount__[url.href]) {\n self.__remote_script_entrypoint_unmount__[url.href] = new Set();\n }\n self.__remote_script_entrypoint_unmount__[url.href]?.add(\n mod.unmount ||\n mod.default?.unmount ||\n (() => {\n // noop\n }),\n );\n }\n return {\n mount: mod.mount || mod.default?.mount,\n unmount: mod.unmount || mod.default?.unmount,\n };\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n `Error loading remote component script from \"${script.src || url.href}\".`,\n { cause: e },\n ),\n );\n return {\n mount: undefined,\n unmount: undefined,\n };\n }\n }),\n );\n return mountUnmountSets.reduce(\n (acc, { mount, unmount }) => {\n if (typeof mount === 'function') {\n acc.mount.add(mount);\n }\n if (typeof unmount === 'function') {\n acc.unmount.add(unmount);\n }\n return acc;\n },\n {\n mount: new Set<MountOrUnmountFunction>(),\n unmount: new Set<MountOrUnmountFunction>(),\n },\n );\n}\n","import type { MountOrUnmountFunction } from '../../shared/client/types';\nimport { RemoteComponentsError } from '../../shared/error';\n\nif (typeof HTMLElement !== 'undefined') {\n class RemoteComponent extends HTMLElement {\n name?: string;\n root?: ShadowRoot | null = null;\n unmount?: Set<MountOrUnmountFunction> | null = null;\n\n constructor() {\n super();\n\n const html = this.innerHTML;\n this.root = this.attachShadow({\n mode: this.getAttribute('mode') === 'closed' ? 'closed' : 'open',\n });\n this.root.innerHTML = html;\n\n // run the mount functions for any scripts inside the shadow root asynchronously\n (async () => {\n const { loadStaticRemoteComponent } = await import(\n '../../shared/client/static-loader'\n );\n loadStaticRemoteComponent(\n Array.from(this.root?.querySelectorAll('script') ?? []),\n new URL(location.href),\n )\n .then(({ mount, unmount }) => {\n this.unmount = unmount;\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(this.root)),\n );\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error mounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n\n disconnectedCallback() {\n // run the unmount functions for any scripts inside the shadow root asynchronously\n (async () => {\n if (this.unmount) {\n await Promise.all(\n Array.from(this.unmount).map(async (unmount) => {\n try {\n await unmount(this.root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError(\n 'Error unmounting remote component.',\n { cause: e },\n ),\n );\n }\n }),\n );\n }\n })().catch((e) => {\n // eslint-disable-next-line no-console\n console.error(\n new RemoteComponentsError('Error unmounting remote component.', {\n cause: e,\n }),\n );\n });\n }\n }\n\n // register the custom element\n customElements.define('remote-component', RemoteComponent);\n}\n"],"mappings":"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","names":["loadStaticRemoteComponent"]}
|
|
@@ -33,11 +33,11 @@ __export(app_router_client_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(app_router_client_exports);
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var Image = __toESM(require("next/image"), 1);
|
|
36
37
|
var import_react = require("react");
|
|
37
38
|
var import_react_dom = require("react-dom");
|
|
38
|
-
var Image = __toESM(require("next/image"), 1);
|
|
39
|
-
var import_remote_component = require("#internal/shared/client/remote-component");
|
|
40
39
|
var import_app_router_compat = require("#internal/next/host/app-router-compat");
|
|
40
|
+
var import_remote_component = require("#internal/shared/client/remote-component");
|
|
41
41
|
var import_utils = require("#internal/shared/utils");
|
|
42
42
|
async function tryImportShared() {
|
|
43
43
|
try {
|
|
@@ -154,17 +154,7 @@ function RemoteComponentClient({
|
|
|
154
154
|
});
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
|
-
}, [
|
|
158
|
-
name,
|
|
159
|
-
isolate,
|
|
160
|
-
links,
|
|
161
|
-
url,
|
|
162
|
-
mode,
|
|
163
|
-
self,
|
|
164
|
-
shadowRootKey,
|
|
165
|
-
shouldUseChildren,
|
|
166
|
-
remoteComponentId
|
|
167
|
-
]);
|
|
157
|
+
}, [isolate, mode, self, shadowRootKey, shouldUseChildren]);
|
|
168
158
|
(0, import_react.useEffect)(() => {
|
|
169
159
|
if (prevRemoteComponentUnmountRef.current && component !== children) {
|
|
170
160
|
const { unmount, root } = prevRemoteComponentUnmountRef.current;
|
|
@@ -273,7 +263,6 @@ function RemoteComponentClient({
|
|
|
273
263
|
nextData,
|
|
274
264
|
remoteShared,
|
|
275
265
|
children,
|
|
276
|
-
links,
|
|
277
266
|
isolate,
|
|
278
267
|
type
|
|
279
268
|
]);
|
|
@@ -330,7 +319,7 @@ function RemoteComponentClient({
|
|
|
330
319
|
JSON.stringify(link)
|
|
331
320
|
))
|
|
332
321
|
] });
|
|
333
|
-
let componentToRender = shouldUseChildren ?
|
|
322
|
+
let componentToRender = shouldUseChildren ? children : component;
|
|
334
323
|
if (isolate !== false) {
|
|
335
324
|
componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
336
325
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 loadStaticRemoteComponent,\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';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\nimport type { MountOrUnmountFunction } from '#internal/shared/client/types';\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 type,\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 const startRef = useRef<HTMLTemplateElement | null>(null);\n const endRef = useRef<HTMLTemplateElement | null>(null);\n const prevRemoteComponentUnmountRef = useRef<{\n unmount: Set<MountOrUnmountFunction>;\n root: ShadowRoot | DocumentFragment | null;\n } | null>(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 type !== 'remote-component' &&\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_${escapeString(new URL(url).href)}_${escapeString(name)}` 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 // run unmount functions when the component changes or unmounts\n if (prevRemoteComponentUnmountRef.current && component !== children) {\n const { unmount, root } = prevRemoteComponentUnmountRef.current;\n prevRemoteComponentUnmountRef.current = null;\n Promise.all(\n Array.from(unmount).map(async (unmountFn) => {\n try {\n await unmountFn(root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }),\n ).catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n });\n }\n }, [component, children]);\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\n // use the children as the component when type is remote-component\n if (type === 'remote-component') {\n setComponent(children);\n // load static scripts and execute mount functions\n // run this async but don't await it as we render children immediately\n loadStaticRemoteComponent(\n scripts as HTMLScriptElement[],\n new URL(url, location.origin),\n )\n .then(({ mount, unmount }) => {\n if (mount.size > 0) {\n let root: ShadowRoot | DocumentFragment | null =\n shadowRootRef.current;\n try {\n if (!root && startRef.current && endRef.current) {\n root = document.querySelectorAll(\n `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n ) as unknown as DocumentFragment;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n if (unmount.size > 0) {\n prevRemoteComponentUnmountRef.current = { unmount, root };\n }\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(root)),\n );\n }\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n setComponent(e as Error);\n });\n return;\n }\n\n const rscName = `__remote_components_rsc_${escapeString(new URL(url).href)}_${escapeString(name)}`;\n const result = await loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n rscName,\n data,\n nextData,\n scripts,\n shared: (async () => {\n const shared = await tryImportShared();\n\n if ('__remote_components_missing_shared__' in shared) {\n await shared.__remote_components_missing_shared__();\n }\n\n return {\n 'next/router': routerImpl,\n ...shared,\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 type,\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n data-wait={link.rel === 'stylesheet' && link.href ? '' : undefined}\n href={link.href ? new URL(link.href as string, url).href : undefined}\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n as=\"style\"\n fetchPriority=\"high\"\n href={\n link.href ? new URL(link.href as string, url).href : undefined\n }\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_${escapeString(new URL(url).href)}_${escapeString(name)} = 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 ? (\n <template id={`${name}_start`} ref={startRef} />\n ) : 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`} ref={endRef} /> : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport * as Image from 'next/image';\nimport {\n startTransition,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { imageImpl, routerImpl } from '#internal/next/host/app-router-compat';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\nimport {\n DEFAULT_ROUTE,\n loadRemoteComponent,\n loadStaticRemoteComponent,\n RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { MountOrUnmountFunction } from '#internal/shared/client/types';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\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 type,\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 const startRef = useRef<HTMLTemplateElement | null>(null);\n const endRef = useRef<HTMLTemplateElement | null>(null);\n const prevRemoteComponentUnmountRef = useRef<{\n unmount: Set<MountOrUnmountFunction>;\n root: ShadowRoot | DocumentFragment | null;\n } | null>(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 type !== 'remote-component' &&\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_${escapeString(new URL(url).href)}_${escapeString(name)}` 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 }, [isolate, mode, self, shadowRootKey, shouldUseChildren]);\n\n useEffect(() => {\n // run unmount functions when the component changes or unmounts\n if (prevRemoteComponentUnmountRef.current && component !== children) {\n const { unmount, root } = prevRemoteComponentUnmountRef.current;\n prevRemoteComponentUnmountRef.current = null;\n Promise.all(\n Array.from(unmount).map(async (unmountFn) => {\n try {\n await unmountFn(root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }),\n ).catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n });\n }\n }, [component, children]);\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\n // use the children as the component when type is remote-component\n if (type === 'remote-component') {\n setComponent(children);\n // load static scripts and execute mount functions\n // run this async but don't await it as we render children immediately\n loadStaticRemoteComponent(\n scripts as HTMLScriptElement[],\n new URL(url, location.origin),\n )\n .then(({ mount, unmount }) => {\n if (mount.size > 0) {\n let root: ShadowRoot | DocumentFragment | null =\n shadowRootRef.current;\n try {\n if (!root && startRef.current && endRef.current) {\n root = document.querySelectorAll(\n `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n ) as unknown as DocumentFragment;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n if (unmount.size > 0) {\n prevRemoteComponentUnmountRef.current = { unmount, root };\n }\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(root)),\n );\n }\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n setComponent(e as Error);\n });\n return;\n }\n\n const rscName = `__remote_components_rsc_${escapeString(new URL(url).href)}_${escapeString(name)}`;\n const result = await loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n rscName,\n data,\n nextData,\n scripts,\n shared: (async () => {\n const shared = await tryImportShared();\n\n if ('__remote_components_missing_shared__' in shared) {\n await shared.__remote_components_missing_shared__();\n }\n\n return {\n 'next/router': routerImpl,\n ...shared,\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 isolate,\n type,\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n data-wait={link.rel === 'stylesheet' && link.href ? '' : undefined}\n href={link.href ? new URL(link.href as string, url).href : undefined}\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n as=\"style\"\n fetchPriority=\"high\"\n href={\n link.href ? new URL(link.href as string, url).href : undefined\n }\n precedence={bundle}\n rel=\"preload\"\n />\n ))}\n </>\n );\n\n let componentToRender = shouldUseChildren\n ? children\n : (component as React.ReactNode);\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_${escapeString(new URL(url).href)}_${escapeString(name)} = 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 ? (\n <template id={`${name}_start`} ref={startRef} />\n ) : 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`} ref={endRef} /> : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as Image from "next/image";
|
|
3
4
|
import {
|
|
4
|
-
|
|
5
|
+
startTransition,
|
|
5
6
|
useEffect,
|
|
7
|
+
useId,
|
|
6
8
|
useLayoutEffect,
|
|
7
9
|
useRef,
|
|
8
|
-
useState
|
|
9
|
-
startTransition
|
|
10
|
+
useState
|
|
10
11
|
} from "react";
|
|
11
12
|
import { createPortal } from "react-dom";
|
|
12
|
-
import
|
|
13
|
+
import { imageImpl, routerImpl } from "#internal/next/host/app-router-compat";
|
|
13
14
|
import {
|
|
14
|
-
loadRemoteComponent,
|
|
15
15
|
DEFAULT_ROUTE,
|
|
16
|
-
|
|
17
|
-
loadStaticRemoteComponent
|
|
16
|
+
loadRemoteComponent,
|
|
17
|
+
loadStaticRemoteComponent,
|
|
18
|
+
RUNTIME_WEBPACK
|
|
18
19
|
} from "#internal/shared/client/remote-component";
|
|
19
|
-
import { imageImpl, routerImpl } from "#internal/next/host/app-router-compat";
|
|
20
20
|
import { attrToProp, escapeString } from "#internal/shared/utils";
|
|
21
21
|
async function tryImportShared() {
|
|
22
22
|
try {
|
|
@@ -133,17 +133,7 @@ function RemoteComponentClient({
|
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
|
-
}, [
|
|
137
|
-
name,
|
|
138
|
-
isolate,
|
|
139
|
-
links,
|
|
140
|
-
url,
|
|
141
|
-
mode,
|
|
142
|
-
self,
|
|
143
|
-
shadowRootKey,
|
|
144
|
-
shouldUseChildren,
|
|
145
|
-
remoteComponentId
|
|
146
|
-
]);
|
|
136
|
+
}, [isolate, mode, self, shadowRootKey, shouldUseChildren]);
|
|
147
137
|
useEffect(() => {
|
|
148
138
|
if (prevRemoteComponentUnmountRef.current && component !== children) {
|
|
149
139
|
const { unmount, root } = prevRemoteComponentUnmountRef.current;
|
|
@@ -252,7 +242,6 @@ function RemoteComponentClient({
|
|
|
252
242
|
nextData,
|
|
253
243
|
remoteShared,
|
|
254
244
|
children,
|
|
255
|
-
links,
|
|
256
245
|
isolate,
|
|
257
246
|
type
|
|
258
247
|
]);
|
|
@@ -309,7 +298,7 @@ function RemoteComponentClient({
|
|
|
309
298
|
JSON.stringify(link)
|
|
310
299
|
))
|
|
311
300
|
] });
|
|
312
|
-
let componentToRender = shouldUseChildren ?
|
|
301
|
+
let componentToRender = shouldUseChildren ? children : component;
|
|
313
302
|
if (isolate !== false) {
|
|
314
303
|
componentToRender = /* @__PURE__ */ jsxs(
|
|
315
304
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 loadStaticRemoteComponent,\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';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\nimport type { MountOrUnmountFunction } from '#internal/shared/client/types';\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 type,\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 const startRef = useRef<HTMLTemplateElement | null>(null);\n const endRef = useRef<HTMLTemplateElement | null>(null);\n const prevRemoteComponentUnmountRef = useRef<{\n unmount: Set<MountOrUnmountFunction>;\n root: ShadowRoot | DocumentFragment | null;\n } | null>(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 type !== 'remote-component' &&\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_${escapeString(new URL(url).href)}_${escapeString(name)}` 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 // run unmount functions when the component changes or unmounts\n if (prevRemoteComponentUnmountRef.current && component !== children) {\n const { unmount, root } = prevRemoteComponentUnmountRef.current;\n prevRemoteComponentUnmountRef.current = null;\n Promise.all(\n Array.from(unmount).map(async (unmountFn) => {\n try {\n await unmountFn(root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }),\n ).catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n });\n }\n }, [component, children]);\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\n // use the children as the component when type is remote-component\n if (type === 'remote-component') {\n setComponent(children);\n // load static scripts and execute mount functions\n // run this async but don't await it as we render children immediately\n loadStaticRemoteComponent(\n scripts as HTMLScriptElement[],\n new URL(url, location.origin),\n )\n .then(({ mount, unmount }) => {\n if (mount.size > 0) {\n let root: ShadowRoot | DocumentFragment | null =\n shadowRootRef.current;\n try {\n if (!root && startRef.current && endRef.current) {\n root = document.querySelectorAll(\n `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n ) as unknown as DocumentFragment;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n if (unmount.size > 0) {\n prevRemoteComponentUnmountRef.current = { unmount, root };\n }\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(root)),\n );\n }\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n setComponent(e as Error);\n });\n return;\n }\n\n const rscName = `__remote_components_rsc_${escapeString(new URL(url).href)}_${escapeString(name)}`;\n const result = await loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n rscName,\n data,\n nextData,\n scripts,\n shared: (async () => {\n const shared = await tryImportShared();\n\n if ('__remote_components_missing_shared__' in shared) {\n await shared.__remote_components_missing_shared__();\n }\n\n return {\n 'next/router': routerImpl,\n ...shared,\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 type,\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n data-wait={link.rel === 'stylesheet' && link.href ? '' : undefined}\n href={link.href ? new URL(link.href as string, url).href : undefined}\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n as=\"style\"\n fetchPriority=\"high\"\n href={\n link.href ? new URL(link.href as string, url).href : undefined\n }\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_${escapeString(new URL(url).href)}_${escapeString(name)} = 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 ? (\n <template id={`${name}_start`} ref={startRef} />\n ) : 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`} ref={endRef} /> : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/next/host/app-router-client.tsx"],"sourcesContent":["'use client';\n\nimport * as Image from 'next/image';\nimport {\n startTransition,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { imageImpl, routerImpl } from '#internal/next/host/app-router-compat';\nimport type { RemoteComponentProps } from '#internal/shared/client/remote-component';\nimport {\n DEFAULT_ROUTE,\n loadRemoteComponent,\n loadStaticRemoteComponent,\n RUNTIME_WEBPACK,\n} from '#internal/shared/client/remote-component';\nimport type { MountOrUnmountFunction } from '#internal/shared/client/types';\nimport { attrToProp, escapeString } from '#internal/shared/utils';\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 type,\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 const startRef = useRef<HTMLTemplateElement | null>(null);\n const endRef = useRef<HTMLTemplateElement | null>(null);\n const prevRemoteComponentUnmountRef = useRef<{\n unmount: Set<MountOrUnmountFunction>;\n root: ShadowRoot | DocumentFragment | null;\n } | null>(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 type !== 'remote-component' &&\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_${escapeString(new URL(url).href)}_${escapeString(name)}` 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 }, [isolate, mode, self, shadowRootKey, shouldUseChildren]);\n\n useEffect(() => {\n // run unmount functions when the component changes or unmounts\n if (prevRemoteComponentUnmountRef.current && component !== children) {\n const { unmount, root } = prevRemoteComponentUnmountRef.current;\n prevRemoteComponentUnmountRef.current = null;\n Promise.all(\n Array.from(unmount).map(async (unmountFn) => {\n try {\n await unmountFn(root);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }),\n ).catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n });\n }\n }, [component, children]);\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\n // use the children as the component when type is remote-component\n if (type === 'remote-component') {\n setComponent(children);\n // load static scripts and execute mount functions\n // run this async but don't await it as we render children immediately\n loadStaticRemoteComponent(\n scripts as HTMLScriptElement[],\n new URL(url, location.origin),\n )\n .then(({ mount, unmount }) => {\n if (mount.size > 0) {\n let root: ShadowRoot | DocumentFragment | null =\n shadowRootRef.current;\n try {\n if (!root && startRef.current && endRef.current) {\n root = document.querySelectorAll(\n `#${startRef.current.id} ~ *:not(#${endRef.current.id}):has(~ #${endRef.current.id})`,\n ) as unknown as DocumentFragment;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error(e);\n }\n if (unmount.size > 0) {\n prevRemoteComponentUnmountRef.current = { unmount, root };\n }\n return Promise.all(\n Array.from(mount).map((mountFn) => mountFn(root)),\n );\n }\n })\n .catch((e) => {\n // eslint-disable-next-line no-console\n console.error(e);\n setComponent(e as Error);\n });\n return;\n }\n\n const rscName = `__remote_components_rsc_${escapeString(new URL(url).href)}_${escapeString(name)}`;\n const result = await loadRemoteComponent({\n url: new URL(url, location.origin),\n name,\n bundle,\n route,\n runtime,\n rscName,\n data,\n nextData,\n scripts,\n shared: (async () => {\n const shared = await tryImportShared();\n\n if ('__remote_components_missing_shared__' in shared) {\n await shared.__remote_components_missing_shared__();\n }\n\n return {\n 'next/router': routerImpl,\n ...shared,\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 isolate,\n type,\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n data-wait={link.rel === 'stylesheet' && link.href ? '' : undefined}\n href={link.href ? new URL(link.href as string, url).href : undefined}\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[attrToProp[key] ?? key] = value;\n }\n return acc;\n },\n {},\n )}\n as=\"style\"\n fetchPriority=\"high\"\n href={\n link.href ? new URL(link.href as string, url).href : undefined\n }\n precedence={bundle}\n rel=\"preload\"\n />\n ))}\n </>\n );\n\n let componentToRender = shouldUseChildren\n ? children\n : (component as React.ReactNode);\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_${escapeString(new URL(url).href)}_${escapeString(name)} = 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 ? (\n <template id={`${name}_start`} ref={startRef} />\n ) : 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`} ref={endRef} /> : null}\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/next/host/app-router-compat.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../../../../src/next/host/app-router-compat.tsx"],"sourcesContent":["import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';\nimport type { default as ImageComponentType, ImageProps } from 'next/image';\nimport { usePathname, useSearchParams } from 'next/navigation';\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;AATN,wBAA6C;AAC7C,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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import ImageComponentType, { ImageProps } from 'next/image';
|
|
3
2
|
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
|
|
3
|
+
import ImageComponentType, { ImageProps } from 'next/image';
|
|
4
4
|
|
|
5
5
|
declare function imageImpl(ImageComponent: typeof ImageComponentType, bundle: string): {
|
|
6
6
|
(props: ImageProps): react_jsx_runtime.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/next/host/app-router-compat.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../../../../src/next/host/app-router-compat.tsx"],"sourcesContent":["import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';\nimport type { default as ImageComponentType, ImageProps } from 'next/image';\nimport { usePathname, useSearchParams } from 'next/navigation';\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":"AAWM;AATN,SAAS,aAAa,uBAAuB;AAC7C,SAAS,qCAAqC;AAEvC,SAAS,UACd,gBACA,QACA;AACA,QAAM,YAAY,SAAS,YAAY,OAAmB;AACxD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,8BAA8B,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,WAAW,YAAY;AAC7B,YAAM,eAAe,gBAAgB;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":[]}
|
|
@@ -32,8 +32,8 @@ __export(render_server_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(render_server_exports);
|
|
34
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var import_react = require("react");
|
|
36
35
|
var import_work_async_storage = require("next/dist/server/app-render/work-async-storage.external");
|
|
36
|
+
var import_react = require("react");
|
|
37
37
|
var import_render_client = require("#internal/next/remote/render-client");
|
|
38
38
|
var import_error = require("#internal/shared/error");
|
|
39
39
|
const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
|