remote-components 0.0.33 → 0.0.34
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/{component-loader-28ad0083.d.ts → component-loader-8951c052.d.ts} +6 -4
- package/dist/html/host.cjs +227 -13
- package/dist/html/host.cjs.map +1 -1
- package/dist/html/host.js +227 -13
- package/dist/html/host.js.map +1 -1
- package/dist/html/remote.cjs +198 -0
- package/dist/html/remote.cjs.map +1 -0
- package/dist/html/remote.d.ts +2 -0
- package/dist/html/remote.js +197 -0
- package/dist/html/remote.js.map +1 -0
- package/dist/internal/next/host/app-router-client.cjs +56 -4
- package/dist/internal/next/host/app-router-client.cjs.map +1 -1
- package/dist/internal/next/host/app-router-client.d.ts +3 -3
- package/dist/internal/next/host/app-router-client.js +58 -5
- package/dist/internal/next/host/app-router-client.js.map +1 -1
- package/dist/internal/shared/client/remote-component.cjs +99 -0
- package/dist/internal/shared/client/remote-component.cjs.map +1 -1
- package/dist/internal/shared/client/remote-component.d.ts +11 -4
- package/dist/internal/shared/client/remote-component.js +97 -0
- package/dist/internal/shared/client/remote-component.js.map +1 -1
- package/dist/internal/shared/error.cjs.map +1 -1
- package/dist/internal/shared/error.d.ts +1 -1
- package/dist/internal/shared/error.js.map +1 -1
- package/dist/internal/shared/ssr/dom-flight.cjs +17 -5
- package/dist/internal/shared/ssr/dom-flight.cjs.map +1 -1
- package/dist/internal/shared/ssr/dom-flight.d.ts +1 -1
- package/dist/internal/shared/ssr/dom-flight.js +17 -5
- package/dist/internal/shared/ssr/dom-flight.js.map +1 -1
- package/dist/internal/shared/ssr/fetch-remote-component.cjs +7 -3
- package/dist/internal/shared/ssr/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/shared/ssr/fetch-remote-component.d.ts +2 -1
- package/dist/internal/shared/ssr/fetch-remote-component.js +7 -3
- package/dist/internal/shared/ssr/fetch-remote-component.js.map +1 -1
- package/dist/next/host/app-router-server.cjs +1 -0
- package/dist/next/host/app-router-server.cjs.map +1 -1
- package/dist/next/host/app-router-server.js +1 -0
- package/dist/next/host/app-router-server.js.map +1 -1
- package/dist/next/host/client/index.cjs +292 -103
- package/dist/next/host/client/index.cjs.map +1 -1
- package/dist/next/host/client/index.d.ts +1 -1
- package/dist/next/host/client/index.js +289 -102
- package/dist/next/host/client/index.js.map +1 -1
- package/dist/react/index.cjs +197 -103
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +196 -102
- package/dist/react/index.js.map +1 -1
- package/dist/{types-7c207455.d.ts → types-4e7dea94.d.ts} +2 -1
- package/dist/{types-e4a3fa37.d.ts → types-cbf6c34f.d.ts} +2 -2
- package/package.json +8 -1
|
@@ -147,13 +147,25 @@ function visit(node, context = {
|
|
|
147
147
|
context.onHTML?.(serializeOuter(node));
|
|
148
148
|
}
|
|
149
149
|
return null;
|
|
150
|
+
} else if (context.active && node.nodeName === "script" && "childNodes" in node && node.childNodes.length > 0) {
|
|
151
|
+
context.onScript?.({
|
|
152
|
+
...node.attrs.reduce(
|
|
153
|
+
(props, attr) => {
|
|
154
|
+
props[attr.name] = attr.value || true;
|
|
155
|
+
return props;
|
|
156
|
+
},
|
|
157
|
+
{}
|
|
158
|
+
),
|
|
159
|
+
textContent: node.childNodes[0].value
|
|
160
|
+
});
|
|
161
|
+
return null;
|
|
150
162
|
}
|
|
151
163
|
}
|
|
152
164
|
if (!context.active) {
|
|
153
165
|
if (!context.visitedNonActiveNodes) {
|
|
154
166
|
context.visitedNonActiveNodes = /* @__PURE__ */ new Set();
|
|
155
167
|
}
|
|
156
|
-
if ("childNodes" in node) {
|
|
168
|
+
if ("childNodes" in node && !(node.nodeName === "remote-component" && !node.attrsObj?.src && (context.name ? node.attrsObj?.name !== context.name : false))) {
|
|
157
169
|
if (!context.visitedNonActiveNodes.has(node)) {
|
|
158
170
|
context.visitedNonActiveNodes.add(node);
|
|
159
171
|
node.childNodes.forEach((childNode) => {
|
|
@@ -182,13 +194,13 @@ function visit(node, context = {
|
|
|
182
194
|
return null;
|
|
183
195
|
default: {
|
|
184
196
|
const nodeId = node.attrsObj?.id;
|
|
185
|
-
if (node.nodeName === "div" && (nodeId === "__next" || (context.name ? nodeId?.startsWith(context.name) : node.attrsObj && "data-bundle" in node.attrsObj && node.attrsObj["data-bundle"] && "data-route" in node.attrsObj && nodeId?.endsWith("_ssr")))) {
|
|
197
|
+
if (node.nodeName === "remote-component" && !node.attrsObj?.src && (!context.name || node.attrsObj?.name === context.name) || node.nodeName === "div" && (nodeId === "__next" || (context.name ? nodeId?.startsWith(context.name) : node.attrsObj && "data-bundle" in node.attrsObj && node.attrsObj["data-bundle"] && "data-route" in node.attrsObj && nodeId?.endsWith("_ssr")))) {
|
|
186
198
|
context.onMetadata?.({
|
|
187
199
|
bundle: node.attrsObj?.["data-bundle"] ?? "default",
|
|
188
|
-
route: node.attrsObj?.["data-route"] ??
|
|
189
|
-
runtime: node.attrsObj?.["data-runtime"] ?? "webpack",
|
|
200
|
+
route: node.attrsObj?.["data-route"] ?? context.url.pathname,
|
|
201
|
+
runtime: node.attrsObj?.["data-runtime"] ?? (node.nodeName === "remote-component" ? "script" : "webpack"),
|
|
190
202
|
id: nodeId?.endsWith("_ssr") ? nodeId : "__vercel_remote_component",
|
|
191
|
-
type: node.attrsObj?.["data-type"] || "unknown"
|
|
203
|
+
type: node.nodeName === "remote-component" ? "remote-component" : node.attrsObj?.["data-type"] || "unknown"
|
|
192
204
|
});
|
|
193
205
|
context.onHTML?.(serializeOuter(node));
|
|
194
206
|
return node.childNodes.reduce((acc, childNode) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/shared/ssr/dom-flight.ts"],"sourcesContent":["import { isCustomAttribute, possibleStandardNames } from 'react-property';\nimport styleToJs from 'style-to-js';\nimport type {\n ChildNode,\n Element,\n Node,\n TextNode,\n} from 'parse5/dist/tree-adapters/default';\nimport { serializeOuter } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\n\n// add fetch-priority to the possible standard names\npossibleStandardNames.fetchpriority = 'fetchPriority';\npossibleStandardNames['data-precedence'] = 'precedence';\n\nexport interface Context {\n name?: string;\n url: URL;\n origin?: string;\n defer?: boolean;\n active?: boolean;\n visitedRSCNodes?: Set<Node>;\n visitedNonActiveNodes?: Set<Node>;\n onMetadata?: (metadata: RemoteComponentMetadata) => void;\n onScript?: (attrs: Record<string, string | boolean>) => void;\n onLink?: (attrs: Record<string, string | boolean>) => void;\n onRSC?: (rsc: string) => void;\n onNextData?: (data: {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n };\n };\n page?: string;\n }) => void;\n onHTML?: (html: string) => void;\n onShared?: (shared: Record<string, string>) => void;\n onError?: (message: string, stack?: string) => void;\n}\n\ntype RSC =\n | ['$', string, null, Record<string, unknown>, null, null, number]\n | (\n | ['$', string, null, Record<string, unknown>, null, null, number]\n | string\n | null\n )[]\n | string\n | null;\n\nconst applyOriginToNodes = [\n 'img',\n 'source',\n 'video',\n 'audio',\n 'track',\n 'iframe',\n 'embed',\n 'script',\n 'link',\n];\n\nexport function visit(\n node: (Node | ChildNode) & {\n attrsObj?: Record<string, string>;\n attrsObjToArray?: Record<string, { name: string; value: string }>;\n },\n context: Context = {\n url: new URL('http://localhost'),\n active: false,\n },\n): RSC | RSC[] | string | null {\n if ('attrs' in node && typeof node.attrsObj === 'undefined') {\n node.attrsObjToArray = {};\n node.attrsObj = node.attrs.reduce<Record<string, string>>((acc, attr) => {\n acc[attr.name] = attr.value;\n if (node.attrsObjToArray) {\n node.attrsObjToArray[attr.name] = attr;\n }\n return acc;\n }, {});\n }\n\n if (\n node.nodeName === 'template' &&\n node.attrsObj?.['data-next-error-message']\n ) {\n context.onError?.(\n node.attrsObj['data-next-error-message'],\n node.attrsObj['data-next-error-stack'],\n );\n }\n\n // apply origin to src and srcset attributes\n if (\n applyOriginToNodes.includes(node.nodeName.toLowerCase()) &&\n 'attrs' in node\n ) {\n const origin = context.origin ?? context.url.origin;\n const src = node.attrsObj?.src;\n if (src) {\n const url = new URL(src, origin);\n if (node.attrsObjToArray && 'src' in node.attrsObjToArray) {\n node.attrsObjToArray.src.value = url.href;\n }\n }\n const href = node.attrsObj?.href;\n if (href) {\n const url = new URL(href, origin);\n if (node.attrsObjToArray && 'href' in node.attrsObjToArray) {\n node.attrsObjToArray.href.value = url.href;\n }\n }\n\n const srcSet = node.attrsObj?.srcset;\n if (srcSet) {\n const srcSetValue = srcSet\n .split(',')\n .map((entry) => {\n const [url, descriptor] = entry.trim().split(/\\s+/);\n if (!url) return entry;\n\n const absoluteUrl = new URL(url, origin).href;\n return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;\n })\n .join(', ');\n if (node.attrsObjToArray && 'srcset' in node.attrsObjToArray) {\n node.attrsObjToArray.srcset.value = srcSetValue;\n }\n }\n const imageSrcSet = node.attrsObj?.imagesrcset;\n if (imageSrcSet) {\n const srcSetValue = imageSrcSet\n .split(',')\n .map((entry) => {\n const [url, descriptor] = entry.trim().split(/\\s+/);\n if (!url) return entry;\n\n const absoluteUrl = new URL(url, origin).href;\n return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;\n })\n .join(', ');\n if (node.attrsObjToArray && 'imagesrcset' in node.attrsObjToArray) {\n node.attrsObjToArray.imagesrcset.value = srcSetValue;\n }\n }\n }\n\n if (node.nodeName === 'script' || node.nodeName === 'link') {\n const nodeId = node.attrsObj?.id;\n if (nodeId?.endsWith('_shared')) {\n context.onShared?.(\n JSON.parse((node.childNodes[0] as TextNode).value) as Record<\n string,\n string\n >,\n );\n return null;\n } else if (nodeId?.endsWith('_rsc') && 'childNodes' in node) {\n if (!context.visitedRSCNodes) {\n context.visitedRSCNodes = new Set();\n }\n if (\n !context.visitedRSCNodes.has(node) &&\n (context.name ? nodeId.startsWith(context.name) : true)\n ) {\n context.visitedRSCNodes.add(node);\n context.onRSC?.((node.childNodes[0] as TextNode).value);\n }\n } else if (nodeId === '__NEXT_DATA__' && 'childNodes' in node) {\n context.onHTML?.(\n `<script id=\"__REMOTE_NEXT_DATA__\" type=\"application/json\">${(node.childNodes[0] as TextNode).value}</script>`,\n );\n context.onNextData?.(\n JSON.parse((node.childNodes[0] as TextNode).value) as {\n props: { pageProps: Record<string, unknown> };\n },\n );\n } else if (node.childNodes.length === 0) {\n if (\n node.nodeName === 'script' &&\n node.attrsObj &&\n !('src' in node.attrsObj)\n ) {\n return [\n '$',\n node.nodeName,\n null,\n node.attrs.reduce<Record<string, string>>((props, attr) => {\n props[possibleStandardNames[attr.name] ?? attr.name] = attr.value;\n return props;\n }, {}),\n null,\n null,\n 1,\n ] as RSC;\n }\n if (node.nodeName === 'script') {\n context.onScript?.(\n node.attrs.reduce<Record<string, string | boolean>>((props, attr) => {\n props[attr.name] = attr.value || true;\n return props;\n }, {}),\n );\n const src = node.attrsObj?.src;\n if (src) {\n node.attrs = node.attrs.filter((attr) => attr.name !== 'src');\n node.attrs.push({\n name: 'data-src',\n value: src,\n });\n if (node.attrsObj) {\n delete node.attrsObj.src;\n node.attrsObj['data-src'] = src;\n }\n }\n context.onHTML?.(serializeOuter(node));\n } else {\n context.onLink?.(\n node.attrs.reduce<Record<string, string | boolean>>((props, attr) => {\n if (attr.name === 'href') {\n attr.value = new URL(attr.value, context.url.origin).href;\n }\n props[possibleStandardNames[attr.name] ?? attr.name] =\n attr.value || true;\n return props;\n }, {}),\n );\n context.onHTML?.(serializeOuter(node));\n }\n return null;\n }\n }\n\n if (!context.active) {\n if (!context.visitedNonActiveNodes) {\n context.visitedNonActiveNodes = new Set();\n }\n\n if ('childNodes' in node) {\n if (!context.visitedNonActiveNodes.has(node)) {\n context.visitedNonActiveNodes.add(node);\n (node as Element).childNodes.forEach((childNode) => {\n visit(childNode, context);\n });\n }\n } else return null;\n }\n\n switch (node.nodeName) {\n case '#document-fragment':\n return node.childNodes.reduce<RSC[]>((acc, childNode) => {\n const result = visit(childNode, context);\n if (result !== null) {\n acc.push(result as unknown as RSC);\n }\n return acc;\n }, []);\n case '#text':\n return (node as TextNode).value;\n case '#comment':\n case 'head':\n case 'meta':\n case 'title':\n case 'noscript':\n return null;\n default: {\n const nodeId = node.attrsObj?.id;\n\n if (\n node.nodeName === 'div' &&\n (nodeId === '__next' ||\n (context.name\n ? nodeId?.startsWith(context.name)\n : node.attrsObj &&\n 'data-bundle' in node.attrsObj &&\n node.attrsObj['data-bundle'] &&\n 'data-route' in node.attrsObj &&\n nodeId?.endsWith('_ssr')))\n ) {\n context.onMetadata?.({\n bundle: node.attrsObj?.['data-bundle'] ?? 'default',\n route: node.attrsObj?.['data-route'] ?? '/',\n runtime: (node.attrsObj?.['data-runtime'] ??\n 'webpack') as RemoteComponentMetadata['runtime'],\n id: nodeId?.endsWith('_ssr') ? nodeId : '__vercel_remote_component',\n type: (node.attrsObj?.['data-type'] ||\n 'unknown') as RemoteComponentMetadata['type'],\n });\n context.onHTML?.(serializeOuter(node));\n return node.childNodes.reduce<RSC[]>((acc, childNode) => {\n const result = visit(childNode, {\n ...context,\n active: true,\n });\n if (result !== null) {\n acc.push(result as unknown as RSC);\n }\n return acc;\n }, []);\n }\n const childNodes = (node as Element).childNodes.reduce<unknown[]>(\n (acc, childNode) => {\n const result = visit(childNode, context);\n if (result !== null) {\n acc.push(result as unknown);\n }\n return acc;\n },\n [],\n );\n const children = childNodes.length > 1 ? childNodes : childNodes[0];\n const nodeProps = (node as Element).attrs.reduce<\n Record<string, string | ReturnType<typeof styleToJs>> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n children?: any;\n }\n >((props, attr) => {\n if (attr.name === 'style') {\n props.style = styleToJs(attr.value, {\n reactCompat: true,\n });\n return props;\n }\n if (node.nodeName === 'input' && attr.name === 'value') {\n props.defaultValue = attr.value;\n return props;\n }\n if (isCustomAttribute(attr.name)) {\n props[attr.name] = attr.value;\n return props;\n }\n props[possibleStandardNames[attr.name] ?? attr.name] = attr.value;\n return props;\n }, {});\n if (typeof children !== 'undefined') {\n if (\n node.nodeName === 'script' &&\n typeof children === 'string' &&\n children.startsWith('$')\n ) {\n nodeProps.children = `$${children}`;\n } else {\n nodeProps.children = children;\n }\n }\n if (!context.active) {\n if (childNodes.length > 0) {\n return childNodes as RSC;\n }\n return null;\n }\n return ['$', node.nodeName, null, nodeProps, null, null, 1] as RSC;\n }\n }\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/shared/ssr/dom-flight.ts"],"sourcesContent":["import { isCustomAttribute, possibleStandardNames } from 'react-property';\nimport styleToJs from 'style-to-js';\nimport type {\n ChildNode,\n Element,\n Node,\n TextNode,\n} from 'parse5/dist/tree-adapters/default';\nimport { serializeOuter } from 'parse5';\nimport type { RemoteComponentMetadata } from './types';\n\n// add fetch-priority to the possible standard names\npossibleStandardNames.fetchpriority = 'fetchPriority';\npossibleStandardNames['data-precedence'] = 'precedence';\n\nexport interface Context {\n name?: string;\n url: URL;\n origin?: string;\n defer?: boolean;\n active?: boolean;\n visitedRSCNodes?: Set<Node>;\n visitedNonActiveNodes?: Set<Node>;\n onMetadata?: (metadata: RemoteComponentMetadata) => void;\n onScript?: (attrs: Record<string, string | boolean>) => void;\n onLink?: (attrs: Record<string, string | boolean>) => void;\n onRSC?: (rsc: string) => void;\n onNextData?: (data: {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n };\n };\n page?: string;\n }) => void;\n onHTML?: (html: string) => void;\n onShared?: (shared: Record<string, string>) => void;\n onError?: (message: string, stack?: string) => void;\n}\n\ntype RSC =\n | ['$', string, null, Record<string, unknown>, null, null, number]\n | (\n | ['$', string, null, Record<string, unknown>, null, null, number]\n | string\n | null\n )[]\n | string\n | null;\n\nconst applyOriginToNodes = [\n 'img',\n 'source',\n 'video',\n 'audio',\n 'track',\n 'iframe',\n 'embed',\n 'script',\n 'link',\n];\n\nexport function visit(\n node: (Node | ChildNode) & {\n attrsObj?: Record<string, string>;\n attrsObjToArray?: Record<string, { name: string; value: string }>;\n },\n context: Context = {\n url: new URL('http://localhost'),\n active: false,\n },\n): RSC | RSC[] | string | null {\n if ('attrs' in node && typeof node.attrsObj === 'undefined') {\n node.attrsObjToArray = {};\n node.attrsObj = node.attrs.reduce<Record<string, string>>((acc, attr) => {\n acc[attr.name] = attr.value;\n if (node.attrsObjToArray) {\n node.attrsObjToArray[attr.name] = attr;\n }\n return acc;\n }, {});\n }\n\n if (\n node.nodeName === 'template' &&\n node.attrsObj?.['data-next-error-message']\n ) {\n context.onError?.(\n node.attrsObj['data-next-error-message'],\n node.attrsObj['data-next-error-stack'],\n );\n }\n\n // apply origin to src and srcset attributes\n if (\n applyOriginToNodes.includes(node.nodeName.toLowerCase()) &&\n 'attrs' in node\n ) {\n const origin = context.origin ?? context.url.origin;\n const src = node.attrsObj?.src;\n if (src) {\n const url = new URL(src, origin);\n if (node.attrsObjToArray && 'src' in node.attrsObjToArray) {\n node.attrsObjToArray.src.value = url.href;\n }\n }\n const href = node.attrsObj?.href;\n if (href) {\n const url = new URL(href, origin);\n if (node.attrsObjToArray && 'href' in node.attrsObjToArray) {\n node.attrsObjToArray.href.value = url.href;\n }\n }\n\n const srcSet = node.attrsObj?.srcset;\n if (srcSet) {\n const srcSetValue = srcSet\n .split(',')\n .map((entry) => {\n const [url, descriptor] = entry.trim().split(/\\s+/);\n if (!url) return entry;\n\n const absoluteUrl = new URL(url, origin).href;\n return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;\n })\n .join(', ');\n if (node.attrsObjToArray && 'srcset' in node.attrsObjToArray) {\n node.attrsObjToArray.srcset.value = srcSetValue;\n }\n }\n const imageSrcSet = node.attrsObj?.imagesrcset;\n if (imageSrcSet) {\n const srcSetValue = imageSrcSet\n .split(',')\n .map((entry) => {\n const [url, descriptor] = entry.trim().split(/\\s+/);\n if (!url) return entry;\n\n const absoluteUrl = new URL(url, origin).href;\n return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;\n })\n .join(', ');\n if (node.attrsObjToArray && 'imagesrcset' in node.attrsObjToArray) {\n node.attrsObjToArray.imagesrcset.value = srcSetValue;\n }\n }\n }\n\n if (node.nodeName === 'script' || node.nodeName === 'link') {\n const nodeId = node.attrsObj?.id;\n if (nodeId?.endsWith('_shared')) {\n context.onShared?.(\n JSON.parse((node.childNodes[0] as TextNode).value) as Record<\n string,\n string\n >,\n );\n return null;\n } else if (nodeId?.endsWith('_rsc') && 'childNodes' in node) {\n if (!context.visitedRSCNodes) {\n context.visitedRSCNodes = new Set();\n }\n if (\n !context.visitedRSCNodes.has(node) &&\n (context.name ? nodeId.startsWith(context.name) : true)\n ) {\n context.visitedRSCNodes.add(node);\n context.onRSC?.((node.childNodes[0] as TextNode).value);\n }\n } else if (nodeId === '__NEXT_DATA__' && 'childNodes' in node) {\n context.onHTML?.(\n `<script id=\"__REMOTE_NEXT_DATA__\" type=\"application/json\">${(node.childNodes[0] as TextNode).value}</script>`,\n );\n context.onNextData?.(\n JSON.parse((node.childNodes[0] as TextNode).value) as {\n props: { pageProps: Record<string, unknown> };\n },\n );\n } else if (node.childNodes.length === 0) {\n if (\n node.nodeName === 'script' &&\n node.attrsObj &&\n !('src' in node.attrsObj)\n ) {\n return [\n '$',\n node.nodeName,\n null,\n node.attrs.reduce<Record<string, string>>((props, attr) => {\n props[possibleStandardNames[attr.name] ?? attr.name] = attr.value;\n return props;\n }, {}),\n null,\n null,\n 1,\n ] as RSC;\n }\n if (node.nodeName === 'script') {\n context.onScript?.(\n node.attrs.reduce<Record<string, string | boolean>>((props, attr) => {\n props[attr.name] = attr.value || true;\n return props;\n }, {}),\n );\n const src = node.attrsObj?.src;\n if (src) {\n node.attrs = node.attrs.filter((attr) => attr.name !== 'src');\n node.attrs.push({\n name: 'data-src',\n value: src,\n });\n if (node.attrsObj) {\n delete node.attrsObj.src;\n node.attrsObj['data-src'] = src;\n }\n }\n context.onHTML?.(serializeOuter(node));\n } else {\n context.onLink?.(\n node.attrs.reduce<Record<string, string | boolean>>((props, attr) => {\n if (attr.name === 'href') {\n attr.value = new URL(attr.value, context.url.origin).href;\n }\n props[possibleStandardNames[attr.name] ?? attr.name] =\n attr.value || true;\n return props;\n }, {}),\n );\n context.onHTML?.(serializeOuter(node));\n }\n return null;\n } else if (\n context.active &&\n node.nodeName === 'script' &&\n 'childNodes' in node &&\n node.childNodes.length > 0\n ) {\n // inline script\n context.onScript?.({\n ...node.attrs.reduce<Record<string, string | boolean>>(\n (props, attr) => {\n props[attr.name] = attr.value || true;\n return props;\n },\n {},\n ),\n textContent: (node.childNodes[0] as TextNode).value,\n });\n return null;\n }\n }\n\n if (!context.active) {\n if (!context.visitedNonActiveNodes) {\n context.visitedNonActiveNodes = new Set();\n }\n\n if (\n 'childNodes' in node &&\n !(\n node.nodeName === 'remote-component' &&\n !node.attrsObj?.src &&\n (context.name ? node.attrsObj?.name !== context.name : false)\n )\n ) {\n if (!context.visitedNonActiveNodes.has(node)) {\n context.visitedNonActiveNodes.add(node);\n (node as Element).childNodes.forEach((childNode) => {\n visit(childNode, context);\n });\n }\n } else return null;\n }\n\n switch (node.nodeName) {\n case '#document-fragment':\n return node.childNodes.reduce<RSC[]>((acc, childNode) => {\n const result = visit(childNode, context);\n if (result !== null) {\n acc.push(result as unknown as RSC);\n }\n return acc;\n }, []);\n case '#text':\n return (node as TextNode).value;\n case '#comment':\n case 'head':\n case 'meta':\n case 'title':\n case 'noscript':\n return null;\n default: {\n const nodeId = node.attrsObj?.id;\n\n if (\n (node.nodeName === 'remote-component' &&\n !node.attrsObj?.src &&\n (!context.name || node.attrsObj?.name === context.name)) ||\n (node.nodeName === 'div' &&\n (nodeId === '__next' ||\n (context.name\n ? nodeId?.startsWith(context.name)\n : node.attrsObj &&\n 'data-bundle' in node.attrsObj &&\n node.attrsObj['data-bundle'] &&\n 'data-route' in node.attrsObj &&\n nodeId?.endsWith('_ssr'))))\n ) {\n context.onMetadata?.({\n bundle: node.attrsObj?.['data-bundle'] ?? 'default',\n route: node.attrsObj?.['data-route'] ?? context.url.pathname,\n runtime: (node.attrsObj?.['data-runtime'] ??\n (node.nodeName === 'remote-component'\n ? 'script'\n : 'webpack')) as RemoteComponentMetadata['runtime'],\n id: nodeId?.endsWith('_ssr') ? nodeId : '__vercel_remote_component',\n type: (node.nodeName === 'remote-component'\n ? 'remote-component'\n : node.attrsObj?.['data-type'] ||\n 'unknown') as RemoteComponentMetadata['type'],\n });\n context.onHTML?.(serializeOuter(node));\n return node.childNodes.reduce<RSC[]>((acc, childNode) => {\n const result = visit(childNode, {\n ...context,\n active: true,\n });\n if (result !== null) {\n acc.push(result as unknown as RSC);\n }\n return acc;\n }, []);\n }\n const childNodes = (node as Element).childNodes.reduce<unknown[]>(\n (acc, childNode) => {\n const result = visit(childNode, context);\n if (result !== null) {\n acc.push(result as unknown);\n }\n return acc;\n },\n [],\n );\n const children = childNodes.length > 1 ? childNodes : childNodes[0];\n const nodeProps = (node as Element).attrs.reduce<\n Record<string, string | ReturnType<typeof styleToJs>> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n children?: any;\n }\n >((props, attr) => {\n if (attr.name === 'style') {\n props.style = styleToJs(attr.value, {\n reactCompat: true,\n });\n return props;\n }\n if (node.nodeName === 'input' && attr.name === 'value') {\n props.defaultValue = attr.value;\n return props;\n }\n if (isCustomAttribute(attr.name)) {\n props[attr.name] = attr.value;\n return props;\n }\n props[possibleStandardNames[attr.name] ?? attr.name] = attr.value;\n return props;\n }, {});\n if (typeof children !== 'undefined') {\n if (\n node.nodeName === 'script' &&\n typeof children === 'string' &&\n children.startsWith('$')\n ) {\n nodeProps.children = `$${children}`;\n } else {\n nodeProps.children = children;\n }\n }\n if (!context.active) {\n if (childNodes.length > 0) {\n return childNodes as RSC;\n }\n return null;\n }\n return ['$', node.nodeName, null, nodeProps, null, null, 1] as RSC;\n }\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -109,9 +109,12 @@ async function fetchRemoteComponent(src, headers = new Headers(), options = {
|
|
|
109
109
|
hasRemoteComponent = true;
|
|
110
110
|
},
|
|
111
111
|
onScript(attrs) {
|
|
112
|
-
if (!scripts.find(
|
|
112
|
+
if (!scripts.find(
|
|
113
|
+
(it) => it.src === attrs.src || it.textContent === attrs.textContent
|
|
114
|
+
)) {
|
|
113
115
|
scripts.push({
|
|
114
|
-
src: new URL(attrs.src, new URL(url).origin).href
|
|
116
|
+
src: typeof attrs.textContent === "string" ? "" : new URL(attrs.src, new URL(url).origin).href,
|
|
117
|
+
textContent: typeof attrs.textContent === "string" ? attrs.textContent : void 0
|
|
115
118
|
});
|
|
116
119
|
}
|
|
117
120
|
},
|
|
@@ -170,7 +173,8 @@ async function fetchRemoteComponent(src, headers = new Headers(), options = {
|
|
|
170
173
|
`The Remote Component at "${url.href}" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`
|
|
171
174
|
);
|
|
172
175
|
}
|
|
173
|
-
if (
|
|
176
|
+
if (metadata.type === "nextjs" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
177
|
+
!hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {
|
|
174
178
|
throw new Error(
|
|
175
179
|
`No shared dependencies found for Remote Component at "${url.href}". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`
|
|
176
180
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { visit } from '#internal/shared/ssr/dom-flight';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/shared/error';\nimport type { RemoteComponentMetadata } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers = new Headers(),\n options: {\n name?: string;\n rsc?: boolean;\n } = {\n rsc: false,\n },\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n // pass all headers to the remote component\n headers: remoteFetchHeaders(headers),\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(\n url.href,\n new Error(`${res.status} ${res.statusText}`),\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(\n `Response is empty for Remote Component \"${url.href}\". Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n type: 'unknown',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n shared?: Record<string, string>;\n };\n };\n page?: string;\n buildId?: string;\n }\n | undefined;\n let html = '';\n\n const remoteName =\n options.name || url.hash ? url.hash.substring(1) : undefined;\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n let hasRemoteComponent = false;\n let hasRSC = false;\n let hasShared = false;\n let hasMultipleRemoteComponents = false;\n let error: Error | undefined;\n const rsc = visit(fragment, {\n url,\n name: remoteName,\n onMetadata(_metadata) {\n metadata = _metadata;\n if (hasRemoteComponent && metadata.id !== _metadata.id) {\n hasMultipleRemoteComponents = true;\n }\n hasRemoteComponent = true;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({\n src: new URL(attrs.src as string, new URL(url).origin).href,\n });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: new URL(attrs.href as string, new URL(url).origin).href,\n };\n if (\n !links.find(\n (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n )\n ) {\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n if (error) {\n throw error;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRemoteComponent) {\n throw new Error(\n `No Remote Component found at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (hasMultipleRemoteComponents && !remoteName) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new Error(\n `The Remote Component at \"${url.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {\n throw new Error(\n `No shared dependencies found for Remote Component at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (options.rsc) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { visit } from '#internal/shared/ssr/dom-flight';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/shared/error';\nimport type { RemoteComponentMetadata } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers = new Headers(),\n options: {\n name?: string;\n rsc?: boolean;\n } = {\n rsc: false,\n },\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n // pass all headers to the remote component\n headers: remoteFetchHeaders(headers),\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(\n url.href,\n new Error(`${res.status} ${res.statusText}`),\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(\n `Response is empty for Remote Component \"${url.href}\". Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n type: 'unknown',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string; textContent?: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n shared?: Record<string, string>;\n };\n };\n page?: string;\n buildId?: string;\n }\n | undefined;\n let html = '';\n\n const remoteName =\n options.name || url.hash ? url.hash.substring(1) : undefined;\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n let hasRemoteComponent = false;\n let hasRSC = false;\n let hasShared = false;\n let hasMultipleRemoteComponents = false;\n let error: Error | undefined;\n const rsc = visit(fragment, {\n url,\n name: remoteName,\n onMetadata(_metadata) {\n metadata = _metadata;\n if (hasRemoteComponent && metadata.id !== _metadata.id) {\n hasMultipleRemoteComponents = true;\n }\n hasRemoteComponent = true;\n },\n onScript(attrs) {\n if (\n !scripts.find(\n (it) => it.src === attrs.src || it.textContent === attrs.textContent,\n )\n ) {\n scripts.push({\n src:\n typeof attrs.textContent === 'string'\n ? ''\n : new URL(attrs.src as string, new URL(url).origin).href,\n textContent:\n typeof attrs.textContent === 'string'\n ? attrs.textContent\n : undefined,\n });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: new URL(attrs.href as string, new URL(url).origin).href,\n };\n if (\n !links.find(\n (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n )\n ) {\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n if (error) {\n throw error;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRemoteComponent) {\n throw new Error(\n `No Remote Component found at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (hasMultipleRemoteComponents && !remoteName) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new Error(\n `The Remote Component at \"${url.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n if (\n metadata.type === 'nextjs' &&\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new Error(\n `No shared dependencies found for Remote Component at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (options.rsc) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { R as RemoteComponentMetadata } from '../../../types-
|
|
2
|
+
import { R as RemoteComponentMetadata } from '../../../types-cbf6c34f.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Resolves the base URL that should be used to fetch the remote component.
|
|
@@ -17,6 +17,7 @@ declare function fetchRemoteComponent(src: string | URL, headers?: Headers, opti
|
|
|
17
17
|
rsc: (string | ["$", string, null, Record<string, unknown>, null, null, number] | (string | ["$", string, null, Record<string, unknown>, null, null, number] | null)[] | null) | (string | ["$", string, null, Record<string, unknown>, null, null, number] | (string | ["$", string, null, Record<string, unknown>, null, null, number] | null)[] | null)[];
|
|
18
18
|
scripts: {
|
|
19
19
|
src: string;
|
|
20
|
+
textContent?: string;
|
|
20
21
|
}[];
|
|
21
22
|
links: Record<string, string | boolean>[];
|
|
22
23
|
hydrationData: string[];
|
|
@@ -79,9 +79,12 @@ async function fetchRemoteComponent(src, headers = new Headers(), options = {
|
|
|
79
79
|
hasRemoteComponent = true;
|
|
80
80
|
},
|
|
81
81
|
onScript(attrs) {
|
|
82
|
-
if (!scripts.find(
|
|
82
|
+
if (!scripts.find(
|
|
83
|
+
(it) => it.src === attrs.src || it.textContent === attrs.textContent
|
|
84
|
+
)) {
|
|
83
85
|
scripts.push({
|
|
84
|
-
src: new URL(attrs.src, new URL(url).origin).href
|
|
86
|
+
src: typeof attrs.textContent === "string" ? "" : new URL(attrs.src, new URL(url).origin).href,
|
|
87
|
+
textContent: typeof attrs.textContent === "string" ? attrs.textContent : void 0
|
|
85
88
|
});
|
|
86
89
|
}
|
|
87
90
|
},
|
|
@@ -140,7 +143,8 @@ async function fetchRemoteComponent(src, headers = new Headers(), options = {
|
|
|
140
143
|
`The Remote Component at "${url.href}" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`
|
|
141
144
|
);
|
|
142
145
|
}
|
|
143
|
-
if (
|
|
146
|
+
if (metadata.type === "nextjs" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
147
|
+
!hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {
|
|
144
148
|
throw new Error(
|
|
145
149
|
`No shared dependencies found for Remote Component at "${url.href}". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`
|
|
146
150
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { visit } from '#internal/shared/ssr/dom-flight';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/shared/error';\nimport type { RemoteComponentMetadata } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers = new Headers(),\n options: {\n name?: string;\n rsc?: boolean;\n } = {\n rsc: false,\n },\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n // pass all headers to the remote component\n headers: remoteFetchHeaders(headers),\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(\n url.href,\n new Error(`${res.status} ${res.statusText}`),\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(\n `Response is empty for Remote Component \"${url.href}\". Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n type: 'unknown',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n shared?: Record<string, string>;\n };\n };\n page?: string;\n buildId?: string;\n }\n | undefined;\n let html = '';\n\n const remoteName =\n options.name || url.hash ? url.hash.substring(1) : undefined;\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n let hasRemoteComponent = false;\n let hasRSC = false;\n let hasShared = false;\n let hasMultipleRemoteComponents = false;\n let error: Error | undefined;\n const rsc = visit(fragment, {\n url,\n name: remoteName,\n onMetadata(_metadata) {\n metadata = _metadata;\n if (hasRemoteComponent && metadata.id !== _metadata.id) {\n hasMultipleRemoteComponents = true;\n }\n hasRemoteComponent = true;\n },\n onScript(attrs) {\n if (!scripts.find((it) => it.src === attrs.src)) {\n scripts.push({\n src: new URL(attrs.src as string, new URL(url).origin).href,\n });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: new URL(attrs.href as string, new URL(url).origin).href,\n };\n if (\n !links.find(\n (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n )\n ) {\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n if (error) {\n throw error;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRemoteComponent) {\n throw new Error(\n `No Remote Component found at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (hasMultipleRemoteComponents && !remoteName) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new Error(\n `The Remote Component at \"${url.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {\n throw new Error(\n `No shared dependencies found for Remote Component at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (options.rsc) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/shared/ssr/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { visit } from '#internal/shared/ssr/dom-flight';\nimport { remoteFetchHeaders } from '#internal/shared/ssr/fetch-headers';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/shared/error';\nimport type { RemoteComponentMetadata } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n/**\n * Resolves the base URL that should be used to fetch the remote component.\n * This function must support local development, Vercel environments, and SSG\n * and dynamic rendering.\n */\nexport function getBaseUrl(reqHeaders: Headers): string {\n const host = reqHeaders.get('host');\n if (host) {\n return host.startsWith('localhost') ? `http://${host}` : `https://${host}`;\n }\n const forwardedHost = reqHeaders.get('x-forwarded-host');\n if (forwardedHost) {\n return `https://${forwardedHost}`;\n }\n if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {\n return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n }\n // TODO: Resolve the correct URL in local development when the proxy is not running.\n return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n headers: Headers = new Headers(),\n options: {\n name?: string;\n rsc?: boolean;\n } = {\n rsc: false,\n },\n) {\n const url = new URL(src, getBaseUrl(headers));\n\n const fetchInit = {\n method: 'GET',\n // pass all headers to the remote component\n headers: remoteFetchHeaders(headers),\n credentials: 'include',\n } as RequestInit;\n\n const res = await fetch(url, fetchInit);\n\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(\n url.href,\n new Error(`${res.status} ${res.statusText}`),\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw new Error(\n `Response is empty for Remote Component \"${url.href}\". Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n type: 'unknown',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: { src: string; textContent?: string }[] = [];\n const links: Record<string, string | boolean>[] = [];\n const hydrationData: string[] = [];\n let nextData:\n | {\n props: {\n pageProps: Record<string, unknown>;\n __REMOTE_COMPONENT__?: {\n bundle: string;\n runtime: string;\n shared?: Record<string, string>;\n };\n };\n page?: string;\n buildId?: string;\n }\n | undefined;\n let html = '';\n\n const remoteName =\n options.name || url.hash ? url.hash.substring(1) : undefined;\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n let hasRemoteComponent = false;\n let hasRSC = false;\n let hasShared = false;\n let hasMultipleRemoteComponents = false;\n let error: Error | undefined;\n const rsc = visit(fragment, {\n url,\n name: remoteName,\n onMetadata(_metadata) {\n metadata = _metadata;\n if (hasRemoteComponent && metadata.id !== _metadata.id) {\n hasMultipleRemoteComponents = true;\n }\n hasRemoteComponent = true;\n },\n onScript(attrs) {\n if (\n !scripts.find(\n (it) => it.src === attrs.src || it.textContent === attrs.textContent,\n )\n ) {\n scripts.push({\n src:\n typeof attrs.textContent === 'string'\n ? ''\n : new URL(attrs.src as string, new URL(url).origin).href,\n textContent:\n typeof attrs.textContent === 'string'\n ? attrs.textContent\n : undefined,\n });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: new URL(attrs.href as string, new URL(url).origin).href,\n };\n if (\n !links.find(\n (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n )\n ) {\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n if (error) {\n throw error;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRemoteComponent) {\n throw new Error(\n `No Remote Component found at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (hasMultipleRemoteComponents && !remoteName) {\n throw multipleRemoteComponentsError(url.href);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new Error(\n `The Remote Component at \"${url.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n if (\n metadata.type === 'nextjs' &&\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new Error(\n `No shared dependencies found for Remote Component at \"${url.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (options.rsc) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: url.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n const name = metadata.id.replace(/_ssr$/, '');\n return {\n name,\n url,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Suspense, Children } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n src: string | URL;\n /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n name?: string;\n /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n isolate?: boolean;\n /** The mode of the Shadow DOM. Defaults to `open`. */\n mode?: 'open' | 'closed';\n /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n reset?: boolean;\n /** Headers to use when fetching the remote component, such as authentication headers. */\n additionalHeaders?: Headers | Record<string, string>;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n additionalHeaders,\n children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n const headers = new Headers();\n for (const [key, value] of additionalHeaders instanceof Headers\n ? additionalHeaders.entries()\n : Object.entries(additionalHeaders ?? {})) {\n headers.set(key, value);\n }\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headers, {\n name: nameProp,\n rsc: true,\n });\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n const remoteComponentClient = (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFI;AAzFJ,mBAAmC;AACnC,+BAAsC;AACtC,oCAAqC;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAGF,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,4CAAC,yBAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Suspense, Children } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n src: string | URL;\n /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n name?: string;\n /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n isolate?: boolean;\n /** The mode of the Shadow DOM. Defaults to `open`. */\n mode?: 'open' | 'closed';\n /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n reset?: boolean;\n /** Headers to use when fetching the remote component, such as authentication headers. */\n additionalHeaders?: Headers | Record<string, string>;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n additionalHeaders,\n children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n const headers = new Headers();\n for (const [key, value] of additionalHeaders instanceof Headers\n ? additionalHeaders.entries()\n : Object.entries(additionalHeaders ?? {})) {\n headers.set(key, value);\n }\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headers, {\n name: nameProp,\n rsc: true,\n });\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n const remoteComponentClient = (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n type={metadata.type}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFI;AAzFJ,mBAAmC;AACnC,+BAAsC;AACtC,oCAAqC;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAGF,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,4CAAC,yBAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Suspense, Children } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n src: string | URL;\n /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n name?: string;\n /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n isolate?: boolean;\n /** The mode of the Shadow DOM. Defaults to `open`. */\n mode?: 'open' | 'closed';\n /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n reset?: boolean;\n /** Headers to use when fetching the remote component, such as authentication headers. */\n additionalHeaders?: Headers | Record<string, string>;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n additionalHeaders,\n children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n const headers = new Headers();\n for (const [key, value] of additionalHeaders instanceof Headers\n ? additionalHeaders.entries()\n : Object.entries(additionalHeaders ?? {})) {\n headers.set(key, value);\n }\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headers, {\n name: nameProp,\n rsc: true,\n });\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n const remoteComponentClient = (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":"AAyFI;AAzFJ,SAAS,UAAU,gBAAgB;AACnC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Suspense, Children } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n src: string | URL;\n /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n name?: string;\n /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n isolate?: boolean;\n /** The mode of the Shadow DOM. Defaults to `open`. */\n mode?: 'open' | 'closed';\n /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n reset?: boolean;\n /** Headers to use when fetching the remote component, such as authentication headers. */\n additionalHeaders?: Headers | Record<string, string>;\n /** Loading fallback content to display while the remote component is being fetched. */\n children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n * return (\n * <>\n * <h1>Welcome to My Page</h1>\n * <p>This page consumes a remote component from another application.</p>\n * <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n * </>\n * );\n * }\n * ```\n */\nexport async function RemoteComponent({\n src,\n name: nameProp,\n isolate,\n mode,\n reset,\n additionalHeaders,\n children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n const headers = new Headers();\n for (const [key, value] of additionalHeaders instanceof Headers\n ? additionalHeaders.entries()\n : Object.entries(additionalHeaders ?? {})) {\n headers.set(key, value);\n }\n\n const {\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n remoteShared,\n url,\n } = await fetchRemoteComponent(src, headers, {\n name: nameProp,\n rsc: true,\n });\n\n // pass all remote component data to the SSR/client layer\n // render remote component static HTML as children\n // remote _ssr suffix from remote component id\n const name = metadata.id.replace(/_ssr$/, '');\n const remoteComponentClient = (\n <RemoteComponentClient\n bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n data={hydrationData}\n isolate={isolate}\n links={links}\n mode={mode}\n name={name}\n nextData={nextData}\n remoteShared={remoteShared}\n reset={reset}\n route={metadata.route}\n runtime={metadata.runtime}\n scripts={scripts}\n type={metadata.type}\n url={url.href}\n >\n {component}\n </RemoteComponentClient>\n );\n\n if (Children.count(children) > 0) {\n // if there are children, render them inside the remote component\n return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n }\n\n return remoteComponentClient;\n}\n"],"mappings":"AAyFI;AAzFJ,SAAS,UAAU,gBAAgB;AACnC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
|