remote-components 0.4.0 → 0.4.2
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/{chunk-Y4GMYUJT.cjs → chunk-4O3EOST4.cjs} +10 -10
- package/dist/{chunk-5WL3FP4V.js → chunk-CC3WOSDO.js} +2 -2
- package/dist/{chunk-AYC2AWUG.cjs → chunk-KVQI55BZ.cjs} +4 -4
- package/dist/{chunk-NN5V3FVD.js → chunk-LOYJP2V2.js} +2 -2
- package/dist/{chunk-EYALF655.cjs → chunk-MQ2BBSL4.cjs} +2 -2
- package/dist/chunk-MQ2BBSL4.cjs.map +1 -0
- package/dist/{chunk-N3KPUFOB.js → chunk-MTMDXJLM.js} +2 -2
- package/dist/chunk-MTMDXJLM.js.map +1 -0
- package/dist/host/html.cjs +11 -11
- package/dist/host/html.js +3 -3
- package/dist/host/nextjs/app/client-only.cjs +5 -5
- package/dist/host/nextjs/app/client-only.js +3 -3
- package/dist/host/react.cjs +4 -4
- package/dist/host/react.js +3 -3
- package/dist/internal/host/server/fetch-remote-component.cjs +27 -12
- package/dist/internal/host/server/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.d.ts +3 -2
- package/dist/internal/host/server/fetch-remote-component.js +32 -13
- package/dist/internal/host/server/fetch-remote-component.js.map +1 -1
- package/dist/internal/host/server/get-ssr-relative-path-base-url.cjs +13 -6
- package/dist/internal/host/server/get-ssr-relative-path-base-url.cjs.map +1 -1
- package/dist/internal/host/server/get-ssr-relative-path-base-url.d.ts +3 -1
- package/dist/internal/host/server/get-ssr-relative-path-base-url.js +11 -6
- package/dist/internal/host/server/get-ssr-relative-path-base-url.js.map +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.cjs +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.js +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.js.map +1 -1
- package/dist/{turbopack-DK6L7P3J.js → turbopack-5N44NVPT.js} +2 -2
- package/dist/{turbopack-PSD4THQE.cjs → turbopack-EPXGK4EV.cjs} +5 -5
- package/package.json +1 -1
- package/dist/chunk-EYALF655.cjs.map +0 -1
- package/dist/chunk-N3KPUFOB.js.map +0 -1
- /package/dist/{chunk-Y4GMYUJT.cjs.map → chunk-4O3EOST4.cjs.map} +0 -0
- /package/dist/{chunk-5WL3FP4V.js.map → chunk-CC3WOSDO.js.map} +0 -0
- /package/dist/{chunk-AYC2AWUG.cjs.map → chunk-KVQI55BZ.cjs.map} +0 -0
- /package/dist/{chunk-NN5V3FVD.js.map → chunk-LOYJP2V2.js.map} +0 -0
- /package/dist/{turbopack-DK6L7P3J.js.map → turbopack-5N44NVPT.js.map} +0 -0
- /package/dist/{turbopack-PSD4THQE.cjs.map → turbopack-EPXGK4EV.cjs.map} +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk4O3EOST4cjs = require('../../../chunk-4O3EOST4.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _chunkKVQI55BZcjs = require('../../../chunk-KVQI55BZ.cjs');
|
|
8
8
|
require('../../../chunk-42TVDI3G.cjs');
|
|
9
|
-
require('../../../chunk-
|
|
9
|
+
require('../../../chunk-MQ2BBSL4.cjs');
|
|
10
10
|
require('../../../chunk-JJTCFQHE.cjs');
|
|
11
11
|
require('../../../chunk-TZT7DLO5.cjs');
|
|
12
12
|
require('../../../chunk-N3SQTOSE.cjs');
|
|
@@ -32,7 +32,7 @@ function resolveForBundle(unbound, bundle) {
|
|
|
32
32
|
if (!unbound)
|
|
33
33
|
return void 0;
|
|
34
34
|
const remoteSrc = _nullishCoalesce(_optionalChain([_chunkRLI4YTBJcjs.getScope.call(void 0, bundle), 'optionalAccess', _2 => _2.url, 'access', _3 => _3.href]), () => ( ""));
|
|
35
|
-
return
|
|
35
|
+
return _chunkKVQI55BZcjs.bindResolveClientUrl.call(void 0, unbound, remoteSrc);
|
|
36
36
|
}
|
|
37
37
|
function createImageLoaderSharedEntries({
|
|
38
38
|
bound,
|
|
@@ -191,7 +191,7 @@ function ConsumeRemoteComponent2(props) {
|
|
|
191
191
|
return _nullishCoalesce(props.children, () => ( null));
|
|
192
192
|
}
|
|
193
193
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
194
|
-
|
|
194
|
+
_chunk4O3EOST4cjs.ConsumeRemoteComponent,
|
|
195
195
|
{
|
|
196
196
|
...props,
|
|
197
197
|
shared: sharedModules(props.shared, props.resolveClientUrl)
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
ConsumeRemoteComponent
|
|
4
|
-
} from "../../../chunk-
|
|
4
|
+
} from "../../../chunk-LOYJP2V2.js";
|
|
5
5
|
import {
|
|
6
6
|
bindResolveClientUrl
|
|
7
|
-
} from "../../../chunk-
|
|
7
|
+
} from "../../../chunk-CC3WOSDO.js";
|
|
8
8
|
import "../../../chunk-AKOMV2UF.js";
|
|
9
|
-
import "../../../chunk-
|
|
9
|
+
import "../../../chunk-MTMDXJLM.js";
|
|
10
10
|
import "../../../chunk-MKO52FRO.js";
|
|
11
11
|
import "../../../chunk-LQ7VQ74E.js";
|
|
12
12
|
import "../../../chunk-RHGEBXPL.js";
|
package/dist/host/react.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
4
|
+
var _chunk4O3EOST4cjs = require('../chunk-4O3EOST4.cjs');
|
|
5
|
+
require('../chunk-KVQI55BZ.cjs');
|
|
6
6
|
require('../chunk-42TVDI3G.cjs');
|
|
7
|
-
require('../chunk-
|
|
7
|
+
require('../chunk-MQ2BBSL4.cjs');
|
|
8
8
|
require('../chunk-JJTCFQHE.cjs');
|
|
9
9
|
require('../chunk-TZT7DLO5.cjs');
|
|
10
10
|
require('../chunk-N3SQTOSE.cjs');
|
|
@@ -18,5 +18,5 @@ require('../chunk-SHFJ5OQA.cjs');
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
exports.ConsumeRemoteComponent =
|
|
21
|
+
exports.ConsumeRemoteComponent = _chunk4O3EOST4cjs.ConsumeRemoteComponent; exports.useRemoteNavigate = _chunk4O3EOST4cjs.useRemoteNavigate;
|
|
22
22
|
//# sourceMappingURL=react.cjs.map
|
package/dist/host/react.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ConsumeRemoteComponent,
|
|
3
3
|
useRemoteNavigate
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-LOYJP2V2.js";
|
|
5
|
+
import "../chunk-CC3WOSDO.js";
|
|
6
6
|
import "../chunk-AKOMV2UF.js";
|
|
7
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-MTMDXJLM.js";
|
|
8
8
|
import "../chunk-MKO52FRO.js";
|
|
9
9
|
import "../chunk-LQ7VQ74E.js";
|
|
10
10
|
import "../chunk-RHGEBXPL.js";
|
|
@@ -182,9 +182,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
|
|
|
182
182
|
html: Array.from(htmlChunks).join("")
|
|
183
183
|
};
|
|
184
184
|
}
|
|
185
|
-
async function
|
|
186
|
-
const
|
|
187
|
-
const serverUrl = new URL(src, ssrRelativePathBaseUrl);
|
|
185
|
+
async function fetchWithTags(src, relativePathBaseUrl, options) {
|
|
186
|
+
const serverUrl = new URL(src, relativePathBaseUrl);
|
|
188
187
|
const tags = [
|
|
189
188
|
"_vc_rc:fetch-remote-component",
|
|
190
189
|
// the max size of a next cache tag is 256 characters
|
|
@@ -196,15 +195,32 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
196
195
|
if (options.name) {
|
|
197
196
|
tags.push(options.name.slice(-256));
|
|
198
197
|
}
|
|
199
|
-
const fetchInit = {
|
|
200
|
-
next: {
|
|
201
|
-
tags
|
|
202
|
-
}
|
|
203
|
-
};
|
|
198
|
+
const fetchInit = { next: { tags } };
|
|
204
199
|
const res = await (0, import_fetch_with_hooks.fetchWithHooks)(serverUrl, fetchInit, {
|
|
205
200
|
onRequest: options.onRequest,
|
|
206
201
|
onResponse: options.onResponse
|
|
207
202
|
});
|
|
203
|
+
return {
|
|
204
|
+
res,
|
|
205
|
+
serverUrl,
|
|
206
|
+
// If the remote component is part of a microfrontend, the src provided will be relative.
|
|
207
|
+
isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
async function fetchRemoteComponent(src, options = {}) {
|
|
211
|
+
let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
|
|
212
|
+
src,
|
|
213
|
+
(0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)(),
|
|
214
|
+
options
|
|
215
|
+
);
|
|
216
|
+
const maybeFirstMfeProductionDeployment = isMfeRelativeSrc && serverUrl.host === import_get_ssr_relative_path_base_url.PRODUCTION_URL;
|
|
217
|
+
if (res.status === 404 && maybeFirstMfeProductionDeployment && import_get_ssr_relative_path_base_url.DEPLOYMENT_URL) {
|
|
218
|
+
({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
|
|
219
|
+
src,
|
|
220
|
+
`https://${import_get_ssr_relative_path_base_url.DEPLOYMENT_URL}`,
|
|
221
|
+
options
|
|
222
|
+
));
|
|
223
|
+
}
|
|
208
224
|
if (!res.ok && !res.body) {
|
|
209
225
|
throw (0, import_error.failedToFetchRemoteComponentError)(serverUrl.href, res);
|
|
210
226
|
}
|
|
@@ -219,10 +235,9 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
219
235
|
throw (0, import_error.failedToFetchRemoteComponentError)(
|
|
220
236
|
serverUrl.href,
|
|
221
237
|
res,
|
|
222
|
-
|
|
238
|
+
maybeFirstMfeProductionDeployment ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment` : `Check if you can open it in the browser.`
|
|
223
239
|
);
|
|
224
240
|
}
|
|
225
|
-
const parser = import_parse5.Parser.getFragmentParser();
|
|
226
241
|
if (!res.body) {
|
|
227
242
|
throw (0, import_error.failedToFetchRemoteComponentError)(
|
|
228
243
|
serverUrl.href,
|
|
@@ -230,6 +245,7 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
230
245
|
`Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`
|
|
231
246
|
);
|
|
232
247
|
}
|
|
248
|
+
const parser = import_parse5.Parser.getFragmentParser();
|
|
233
249
|
const decoder = new TextDecoder();
|
|
234
250
|
for await (const chunk of res.body) {
|
|
235
251
|
parser.tokenizer.write(decoder.decode(chunk), false);
|
|
@@ -248,9 +264,8 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
248
264
|
} = visitFragment(fragment, serverUrl, remoteName);
|
|
249
265
|
if (!metadata) {
|
|
250
266
|
const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
|
|
251
|
-
const isSSRRelativePathBase = serverUrl.host === new URL(ssrRelativePathBaseUrl).host;
|
|
252
267
|
const isPreview = process.env.VERCEL_TARGET_ENV === "preview";
|
|
253
|
-
if (isSSGBuild &&
|
|
268
|
+
if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {
|
|
254
269
|
let skeletonComponent;
|
|
255
270
|
if (options.rsc) {
|
|
256
271
|
const { createElement } = await import("react");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n buildMetadata,\n type RawMetadataAttrs,\n type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n rsc: RSC | RSC[] | string | null,\n serverUrl: URL,\n): Promise<React.ReactNode> {\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n const { createFromReadableStream } = await importRSCClientEdge();\n return 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: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n}\n\nfunction buildSkeletonResponse(\n serverUrl: URL,\n metadata: RemoteComponentMetadata,\n skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: getSkeletonMessage(),\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: getSkeletonHtml(serverUrl.href),\n remoteShared: {},\n };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n fragment: DefaultTreeAdapterMap['documentFragment'],\n serverUrl: URL,\n remoteName: string | undefined,\n) {\n const scriptSrcSet = new Set<string>();\n const scriptTextSet = new Set<string>();\n const scripts: ScriptDescriptor[] = [];\n\n const linkKeySet = new Set<string>();\n const links: LinkDescriptor[] = [];\n\n const hydrationData: string[] = [];\n const htmlChunks = new Set<string>();\n\n let metadata: RemoteComponentMetadata | undefined;\n let nextData: NextData | undefined;\n let remoteShared: Record<string, string> = {};\n let hasRSC = false;\n let hasShared = false;\n let error: RemoteComponentsError | undefined;\n\n const rawRscChunks: string[] = [];\n\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(attrs: RawMetadataAttrs) {\n const incoming = buildMetadata(attrs, serverUrl);\n // Skip multiple component detection for Pages Router (__next) since\n // it only supports one remote component per page\n if (\n !remoteName &&\n metadata &&\n metadata.id !== incoming.id &&\n incoming.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n metadata = incoming;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n const textContent =\n typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n if (textContent) {\n if (!scriptTextSet.has(textContent)) {\n scriptTextSet.add(textContent);\n scripts.push({ src: '', textContent });\n }\n } else if (!scriptSrcSet.has(clientSrc)) {\n scriptSrcSet.add(clientSrc);\n scripts.push({ src: clientSrc });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n if (!linkKeySet.has(linkKey)) {\n linkKeySet.add(linkKey);\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n rawRscChunks.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n },\n onHTML(chunk) {\n if (!htmlChunks.has(chunk)) {\n htmlChunks.add(chunk);\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 hydrationData.push(...rawRscChunks);\n\n if (error) {\n throw error;\n }\n\n if (metadata) {\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.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 !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n }\n\n const resolvedShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n return {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared: resolvedShared,\n html: Array.from(htmlChunks).join(''),\n };\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n } = {},\n): Promise<FetchRemoteComponentResponse> {\n const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = {\n next: {\n tags,\n },\n };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'Check if you can open it in the browser.',\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. 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 const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n const {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared,\n html,\n } = visitFragment(fragment, serverUrl, remoteName);\n\n if (!metadata) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // If the remote component is part of a microfrontend, the src provided\n // will be relative.\n const isSSRRelativePathBase =\n serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: {\n __html: getSkeletonHtml(serverUrl.href),\n },\n });\n }\n\n return buildSkeletonResponse(\n serverUrl,\n buildMetadata({}, serverUrl),\n skeletonComponent,\n );\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n const name = remoteName || metadata.name;\n const component = options.rsc\n ? await buildRscComponent(rsc, serverUrl)\n : undefined;\n\n return {\n name,\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n DEPLOYMENT_URL,\n getSSRRelativePathBaseUrl,\n PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n buildMetadata,\n type RawMetadataAttrs,\n type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n rsc: RSC | RSC[] | string | null,\n serverUrl: URL,\n): Promise<React.ReactNode> {\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n const { createFromReadableStream } = await importRSCClientEdge();\n return 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: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n}\n\nfunction buildSkeletonResponse(\n serverUrl: URL,\n metadata: RemoteComponentMetadata,\n skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: getSkeletonMessage(),\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: getSkeletonHtml(serverUrl.href),\n remoteShared: {},\n };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n fragment: DefaultTreeAdapterMap['documentFragment'],\n serverUrl: URL,\n remoteName: string | undefined,\n) {\n const scriptSrcSet = new Set<string>();\n const scriptTextSet = new Set<string>();\n const scripts: ScriptDescriptor[] = [];\n\n const linkKeySet = new Set<string>();\n const links: LinkDescriptor[] = [];\n\n const hydrationData: string[] = [];\n const htmlChunks = new Set<string>();\n\n let metadata: RemoteComponentMetadata | undefined;\n let nextData: NextData | undefined;\n let remoteShared: Record<string, string> = {};\n let hasRSC = false;\n let hasShared = false;\n let error: RemoteComponentsError | undefined;\n\n const rawRscChunks: string[] = [];\n\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(attrs: RawMetadataAttrs) {\n const incoming = buildMetadata(attrs, serverUrl);\n // Skip multiple component detection for Pages Router (__next) since\n // it only supports one remote component per page\n if (\n !remoteName &&\n metadata &&\n metadata.id !== incoming.id &&\n incoming.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n metadata = incoming;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n const textContent =\n typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n if (textContent) {\n if (!scriptTextSet.has(textContent)) {\n scriptTextSet.add(textContent);\n scripts.push({ src: '', textContent });\n }\n } else if (!scriptSrcSet.has(clientSrc)) {\n scriptSrcSet.add(clientSrc);\n scripts.push({ src: clientSrc });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n if (!linkKeySet.has(linkKey)) {\n linkKeySet.add(linkKey);\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n rawRscChunks.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n },\n onHTML(chunk) {\n if (!htmlChunks.has(chunk)) {\n htmlChunks.add(chunk);\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 hydrationData.push(...rawRscChunks);\n\n if (error) {\n throw error;\n }\n\n if (metadata) {\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.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 !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n }\n\n const resolvedShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n return {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared: resolvedShared,\n html: Array.from(htmlChunks).join(''),\n };\n}\n\ninterface Options {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n src: string | URL,\n relativePathBaseUrl: string,\n options: Options,\n) {\n const serverUrl = new URL(src, relativePathBaseUrl);\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = { next: { tags } };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n return {\n res,\n serverUrl,\n // If the remote component is part of a microfrontend, the src provided will be relative.\n isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n };\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n src,\n getSSRRelativePathBaseUrl(),\n options,\n );\n\n const maybeFirstMfeProductionDeployment =\n isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n if (\n res.status === 404 &&\n maybeFirstMfeProductionDeployment &&\n DEPLOYMENT_URL\n ) {\n ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n src,\n `https://${DEPLOYMENT_URL}`,\n options,\n ));\n }\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n maybeFirstMfeProductionDeployment\n ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n : `Check if you can open it in the browser.`,\n );\n }\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\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 const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n const {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared,\n html,\n } = visitFragment(fragment, serverUrl, remoteName);\n\n if (!metadata) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: {\n __html: getSkeletonHtml(serverUrl.href),\n },\n });\n }\n\n return buildSkeletonResponse(\n serverUrl,\n buildMetadata({}, serverUrl),\n skeletonComponent,\n );\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n const name = remoteName || metadata.name;\n const component = options.rsc\n ? await buildRscComponent(rsc, serverUrl)\n : undefined;\n\n return {\n name,\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -6,13 +6,14 @@ import '../../runtime/metadata.js';
|
|
|
6
6
|
import '../shared/asset-descriptors.js';
|
|
7
7
|
import '../../runtime/url/resolve-client-url.js';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
interface Options {
|
|
10
10
|
name?: string;
|
|
11
11
|
rsc?: boolean;
|
|
12
12
|
/** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */
|
|
13
13
|
appRouter?: boolean;
|
|
14
14
|
onRequest?: OnRequestHook;
|
|
15
15
|
onResponse?: OnResponseHook;
|
|
16
|
-
}
|
|
16
|
+
}
|
|
17
|
+
declare function fetchRemoteComponent(src: string | URL, options?: Options): Promise<FetchRemoteComponentResponse>;
|
|
17
18
|
|
|
18
19
|
export { fetchRemoteComponent };
|
|
@@ -6,7 +6,11 @@ import {
|
|
|
6
6
|
} from "#internal/host/nextjs/skeleton";
|
|
7
7
|
import { fetchWithHooks } from "#internal/host/server/fetch-with-hooks";
|
|
8
8
|
import { getClientSrc } from "#internal/host/server/get-client-src";
|
|
9
|
-
import {
|
|
9
|
+
import {
|
|
10
|
+
DEPLOYMENT_URL,
|
|
11
|
+
getSSRRelativePathBaseUrl,
|
|
12
|
+
PRODUCTION_URL
|
|
13
|
+
} from "#internal/host/server/get-ssr-relative-path-base-url";
|
|
10
14
|
import {
|
|
11
15
|
buildMetadata
|
|
12
16
|
} from "#internal/runtime/metadata";
|
|
@@ -158,9 +162,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
|
|
|
158
162
|
html: Array.from(htmlChunks).join("")
|
|
159
163
|
};
|
|
160
164
|
}
|
|
161
|
-
async function
|
|
162
|
-
const
|
|
163
|
-
const serverUrl = new URL(src, ssrRelativePathBaseUrl);
|
|
165
|
+
async function fetchWithTags(src, relativePathBaseUrl, options) {
|
|
166
|
+
const serverUrl = new URL(src, relativePathBaseUrl);
|
|
164
167
|
const tags = [
|
|
165
168
|
"_vc_rc:fetch-remote-component",
|
|
166
169
|
// the max size of a next cache tag is 256 characters
|
|
@@ -172,15 +175,32 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
172
175
|
if (options.name) {
|
|
173
176
|
tags.push(options.name.slice(-256));
|
|
174
177
|
}
|
|
175
|
-
const fetchInit = {
|
|
176
|
-
next: {
|
|
177
|
-
tags
|
|
178
|
-
}
|
|
179
|
-
};
|
|
178
|
+
const fetchInit = { next: { tags } };
|
|
180
179
|
const res = await fetchWithHooks(serverUrl, fetchInit, {
|
|
181
180
|
onRequest: options.onRequest,
|
|
182
181
|
onResponse: options.onResponse
|
|
183
182
|
});
|
|
183
|
+
return {
|
|
184
|
+
res,
|
|
185
|
+
serverUrl,
|
|
186
|
+
// If the remote component is part of a microfrontend, the src provided will be relative.
|
|
187
|
+
isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
async function fetchRemoteComponent(src, options = {}) {
|
|
191
|
+
let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
|
|
192
|
+
src,
|
|
193
|
+
getSSRRelativePathBaseUrl(),
|
|
194
|
+
options
|
|
195
|
+
);
|
|
196
|
+
const maybeFirstMfeProductionDeployment = isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;
|
|
197
|
+
if (res.status === 404 && maybeFirstMfeProductionDeployment && DEPLOYMENT_URL) {
|
|
198
|
+
({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(
|
|
199
|
+
src,
|
|
200
|
+
`https://${DEPLOYMENT_URL}`,
|
|
201
|
+
options
|
|
202
|
+
));
|
|
203
|
+
}
|
|
184
204
|
if (!res.ok && !res.body) {
|
|
185
205
|
throw failedToFetchRemoteComponentError(serverUrl.href, res);
|
|
186
206
|
}
|
|
@@ -195,10 +215,9 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
195
215
|
throw failedToFetchRemoteComponentError(
|
|
196
216
|
serverUrl.href,
|
|
197
217
|
res,
|
|
198
|
-
|
|
218
|
+
maybeFirstMfeProductionDeployment ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment` : `Check if you can open it in the browser.`
|
|
199
219
|
);
|
|
200
220
|
}
|
|
201
|
-
const parser = Parser.getFragmentParser();
|
|
202
221
|
if (!res.body) {
|
|
203
222
|
throw failedToFetchRemoteComponentError(
|
|
204
223
|
serverUrl.href,
|
|
@@ -206,6 +225,7 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
206
225
|
`Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`
|
|
207
226
|
);
|
|
208
227
|
}
|
|
228
|
+
const parser = Parser.getFragmentParser();
|
|
209
229
|
const decoder = new TextDecoder();
|
|
210
230
|
for await (const chunk of res.body) {
|
|
211
231
|
parser.tokenizer.write(decoder.decode(chunk), false);
|
|
@@ -224,9 +244,8 @@ async function fetchRemoteComponent(src, options = {}) {
|
|
|
224
244
|
} = visitFragment(fragment, serverUrl, remoteName);
|
|
225
245
|
if (!metadata) {
|
|
226
246
|
const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
|
|
227
|
-
const isSSRRelativePathBase = serverUrl.host === new URL(ssrRelativePathBaseUrl).host;
|
|
228
247
|
const isPreview = process.env.VERCEL_TARGET_ENV === "preview";
|
|
229
|
-
if (isSSGBuild &&
|
|
248
|
+
if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {
|
|
230
249
|
let skeletonComponent;
|
|
231
250
|
if (options.rsc) {
|
|
232
251
|
const { createElement } = await import("react");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n buildMetadata,\n type RawMetadataAttrs,\n type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n rsc: RSC | RSC[] | string | null,\n serverUrl: URL,\n): Promise<React.ReactNode> {\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n const { createFromReadableStream } = await importRSCClientEdge();\n return 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: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n}\n\nfunction buildSkeletonResponse(\n serverUrl: URL,\n metadata: RemoteComponentMetadata,\n skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: getSkeletonMessage(),\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: getSkeletonHtml(serverUrl.href),\n remoteShared: {},\n };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n fragment: DefaultTreeAdapterMap['documentFragment'],\n serverUrl: URL,\n remoteName: string | undefined,\n) {\n const scriptSrcSet = new Set<string>();\n const scriptTextSet = new Set<string>();\n const scripts: ScriptDescriptor[] = [];\n\n const linkKeySet = new Set<string>();\n const links: LinkDescriptor[] = [];\n\n const hydrationData: string[] = [];\n const htmlChunks = new Set<string>();\n\n let metadata: RemoteComponentMetadata | undefined;\n let nextData: NextData | undefined;\n let remoteShared: Record<string, string> = {};\n let hasRSC = false;\n let hasShared = false;\n let error: RemoteComponentsError | undefined;\n\n const rawRscChunks: string[] = [];\n\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(attrs: RawMetadataAttrs) {\n const incoming = buildMetadata(attrs, serverUrl);\n // Skip multiple component detection for Pages Router (__next) since\n // it only supports one remote component per page\n if (\n !remoteName &&\n metadata &&\n metadata.id !== incoming.id &&\n incoming.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n metadata = incoming;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n const textContent =\n typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n if (textContent) {\n if (!scriptTextSet.has(textContent)) {\n scriptTextSet.add(textContent);\n scripts.push({ src: '', textContent });\n }\n } else if (!scriptSrcSet.has(clientSrc)) {\n scriptSrcSet.add(clientSrc);\n scripts.push({ src: clientSrc });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n if (!linkKeySet.has(linkKey)) {\n linkKeySet.add(linkKey);\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n rawRscChunks.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n },\n onHTML(chunk) {\n if (!htmlChunks.has(chunk)) {\n htmlChunks.add(chunk);\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 hydrationData.push(...rawRscChunks);\n\n if (error) {\n throw error;\n }\n\n if (metadata) {\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.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 !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n }\n\n const resolvedShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n return {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared: resolvedShared,\n html: Array.from(htmlChunks).join(''),\n };\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n } = {},\n): Promise<FetchRemoteComponentResponse> {\n const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = {\n next: {\n tags,\n },\n };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'Check if you can open it in the browser.',\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. 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 const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n const {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared,\n html,\n } = visitFragment(fragment, serverUrl, remoteName);\n\n if (!metadata) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // If the remote component is part of a microfrontend, the src provided\n // will be relative.\n const isSSRRelativePathBase =\n serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: {\n __html: getSkeletonHtml(serverUrl.href),\n },\n });\n }\n\n return buildSkeletonResponse(\n serverUrl,\n buildMetadata({}, serverUrl),\n skeletonComponent,\n );\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n const name = remoteName || metadata.name;\n const component = options.rsc\n ? await buildRscComponent(rsc, serverUrl)\n : undefined;\n\n return {\n name,\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport {\n DEPLOYMENT_URL,\n getSSRRelativePathBaseUrl,\n PRODUCTION_URL,\n} from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n buildMetadata,\n type RawMetadataAttrs,\n type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { importRSCClientEdge } from '#internal/runtime/rsc-imports';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n rsc: RSC | RSC[] | string | null,\n serverUrl: URL,\n): Promise<React.ReactNode> {\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n const { createFromReadableStream } = await importRSCClientEdge();\n return 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: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n}\n\nfunction buildSkeletonResponse(\n serverUrl: URL,\n metadata: RemoteComponentMetadata,\n skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: getSkeletonMessage(),\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: getSkeletonHtml(serverUrl.href),\n remoteShared: {},\n };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n fragment: DefaultTreeAdapterMap['documentFragment'],\n serverUrl: URL,\n remoteName: string | undefined,\n) {\n const scriptSrcSet = new Set<string>();\n const scriptTextSet = new Set<string>();\n const scripts: ScriptDescriptor[] = [];\n\n const linkKeySet = new Set<string>();\n const links: LinkDescriptor[] = [];\n\n const hydrationData: string[] = [];\n const htmlChunks = new Set<string>();\n\n let metadata: RemoteComponentMetadata | undefined;\n let nextData: NextData | undefined;\n let remoteShared: Record<string, string> = {};\n let hasRSC = false;\n let hasShared = false;\n let error: RemoteComponentsError | undefined;\n\n const rawRscChunks: string[] = [];\n\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(attrs: RawMetadataAttrs) {\n const incoming = buildMetadata(attrs, serverUrl);\n // Skip multiple component detection for Pages Router (__next) since\n // it only supports one remote component per page\n if (\n !remoteName &&\n metadata &&\n metadata.id !== incoming.id &&\n incoming.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n metadata = incoming;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n const textContent =\n typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n if (textContent) {\n if (!scriptTextSet.has(textContent)) {\n scriptTextSet.add(textContent);\n scripts.push({ src: '', textContent });\n }\n } else if (!scriptSrcSet.has(clientSrc)) {\n scriptSrcSet.add(clientSrc);\n scripts.push({ src: clientSrc });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n if (!linkKeySet.has(linkKey)) {\n linkKeySet.add(linkKey);\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n rawRscChunks.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n },\n onHTML(chunk) {\n if (!htmlChunks.has(chunk)) {\n htmlChunks.add(chunk);\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 hydrationData.push(...rawRscChunks);\n\n if (error) {\n throw error;\n }\n\n if (metadata) {\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.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 !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n }\n\n const resolvedShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n return {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared: resolvedShared,\n html: Array.from(htmlChunks).join(''),\n };\n}\n\ninterface Options {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n}\n\nasync function fetchWithTags(\n src: string | URL,\n relativePathBaseUrl: string,\n options: Options,\n) {\n const serverUrl = new URL(src, relativePathBaseUrl);\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = { next: { tags } };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n return {\n res,\n serverUrl,\n // If the remote component is part of a microfrontend, the src provided will be relative.\n isMfeRelativeSrc: serverUrl.host === new URL(relativePathBaseUrl).host,\n };\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: Options = {},\n): Promise<FetchRemoteComponentResponse> {\n let { res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n src,\n getSSRRelativePathBaseUrl(),\n options,\n );\n\n const maybeFirstMfeProductionDeployment =\n isMfeRelativeSrc && serverUrl.host === PRODUCTION_URL;\n\n // When deploying a microfrontend with remote components to production for the first time, the fetch with the\n // production URL will fail if the production URL is not already an MFE alias. The URL becomes an MFE alias\n // on the first MFE deployment. For this fetch, use the deployment URL which is an MFE alias.\n if (\n res.status === 404 &&\n maybeFirstMfeProductionDeployment &&\n DEPLOYMENT_URL\n ) {\n ({ res, isMfeRelativeSrc, serverUrl } = await fetchWithTags(\n src,\n `https://${DEPLOYMENT_URL}`,\n options,\n ));\n }\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n maybeFirstMfeProductionDeployment\n ? `If this is the first production build of a microfrontends setup, try redeploying once the remote is deployed to production. Once deployed, this error will not re-occur, and ISR revalidation will happen automatically for remote components once they deploy. https://remote-components-docs.vercel.sh/docs/concepts/isr-deployment`\n : `Check if you can open it in the browser.`,\n );\n }\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\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 const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n const {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared,\n html,\n } = visitFragment(fragment, serverUrl, remoteName);\n\n if (!metadata) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n // For app router previews, the host and remote build at the same time, to allow this, render a skeleton\n // in the host if the remote is not found, which will revalidate when the remote deploys, or give a helpful error in the UI\n if (isSSGBuild && isMfeRelativeSrc && isPreview && options.appRouter) {\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: {\n __html: getSkeletonHtml(serverUrl.href),\n },\n });\n }\n\n return buildSkeletonResponse(\n serverUrl,\n buildMetadata({}, serverUrl),\n skeletonComponent,\n );\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n const name = remoteName || metadata.name;\n const component = options.rsc\n ? await buildRscComponent(rsc, serverUrl)\n : undefined;\n\n return {\n name,\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -18,23 +18,30 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var get_ssr_relative_path_base_url_exports = {};
|
|
20
20
|
__export(get_ssr_relative_path_base_url_exports, {
|
|
21
|
+
DEPLOYMENT_URL: () => DEPLOYMENT_URL,
|
|
22
|
+
PRODUCTION_URL: () => PRODUCTION_URL,
|
|
21
23
|
getSSRRelativePathBaseUrl: () => getSSRRelativePathBaseUrl
|
|
22
24
|
});
|
|
23
25
|
module.exports = __toCommonJS(get_ssr_relative_path_base_url_exports);
|
|
26
|
+
const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;
|
|
27
|
+
const BRANCH_URL = process.env.VERCEL_BRANCH_URL;
|
|
28
|
+
const DEPLOYMENT_URL = process.env.VERCEL_URL;
|
|
24
29
|
function getSSRRelativePathBaseUrl() {
|
|
25
|
-
if (process.env.VERCEL_TARGET_ENV === "production" &&
|
|
26
|
-
return `https://${
|
|
30
|
+
if (process.env.VERCEL_TARGET_ENV === "production" && PRODUCTION_URL) {
|
|
31
|
+
return `https://${PRODUCTION_URL}`;
|
|
27
32
|
}
|
|
28
|
-
if (
|
|
29
|
-
return `https://${
|
|
33
|
+
if (BRANCH_URL) {
|
|
34
|
+
return `https://${BRANCH_URL}`;
|
|
30
35
|
}
|
|
31
|
-
if (
|
|
32
|
-
return `https://${
|
|
36
|
+
if (DEPLOYMENT_URL) {
|
|
37
|
+
return `https://${DEPLOYMENT_URL}`;
|
|
33
38
|
}
|
|
34
39
|
return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;
|
|
35
40
|
}
|
|
36
41
|
// Annotate the CommonJS export names for ESM import in node:
|
|
37
42
|
0 && (module.exports = {
|
|
43
|
+
DEPLOYMENT_URL,
|
|
44
|
+
PRODUCTION_URL,
|
|
38
45
|
getSSRRelativePathBaseUrl
|
|
39
46
|
});
|
|
40
47
|
//# sourceMappingURL=get-ssr-relative-path-base-url.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n // Uses the most up to date version of production. Note that the production branch URL does not account\n // for deployments from non main branches being manually promoted to production.\n // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n if (
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["export const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;\nconst BRANCH_URL = process.env.VERCEL_BRANCH_URL;\nexport const DEPLOYMENT_URL = process.env.VERCEL_URL;\n\n/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n // Uses the most up to date version of production. Note that the production branch URL does not account\n // for deployments from non main branches being manually promoted to production.\n // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n if (process.env.VERCEL_TARGET_ENV === 'production' && PRODUCTION_URL) {\n return `https://${PRODUCTION_URL}`;\n }\n\n // Uses the most up to date version of the remote component for the branch.\n // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n if (BRANCH_URL) {\n return `https://${BRANCH_URL}`;\n }\n\n // If there is no branch, use the vercel deployment URL.\n if (DEPLOYMENT_URL) {\n return `https://${DEPLOYMENT_URL}`;\n }\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"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB,QAAQ,IAAI;AAC1C,MAAM,aAAa,QAAQ,IAAI;AACxB,MAAM,iBAAiB,QAAQ,IAAI;AAYnC,SAAS,4BAAoC;AAIlD,MAAI,QAAQ,IAAI,sBAAsB,gBAAgB,gBAAgB;AACpE,WAAO,WAAW;AAAA,EACpB;AAIA,MAAI,YAAY;AACd,WAAO,WAAW;AAAA,EACpB;AAGA,MAAI,gBAAgB;AAClB,WAAO,WAAW;AAAA,EACpB;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
declare const PRODUCTION_URL: string | undefined;
|
|
2
|
+
declare const DEPLOYMENT_URL: string | undefined;
|
|
1
3
|
/**
|
|
2
4
|
* When fetching a remote component using a relative path with SSR, a base URL is required.
|
|
3
5
|
* This is not used on the client.
|
|
@@ -10,4 +12,4 @@
|
|
|
10
12
|
*/
|
|
11
13
|
declare function getSSRRelativePathBaseUrl(): string;
|
|
12
14
|
|
|
13
|
-
export { getSSRRelativePathBaseUrl };
|
|
15
|
+
export { DEPLOYMENT_URL, PRODUCTION_URL, getSSRRelativePathBaseUrl };
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
+
const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;
|
|
2
|
+
const BRANCH_URL = process.env.VERCEL_BRANCH_URL;
|
|
3
|
+
const DEPLOYMENT_URL = process.env.VERCEL_URL;
|
|
1
4
|
function getSSRRelativePathBaseUrl() {
|
|
2
|
-
if (process.env.VERCEL_TARGET_ENV === "production" &&
|
|
3
|
-
return `https://${
|
|
5
|
+
if (process.env.VERCEL_TARGET_ENV === "production" && PRODUCTION_URL) {
|
|
6
|
+
return `https://${PRODUCTION_URL}`;
|
|
4
7
|
}
|
|
5
|
-
if (
|
|
6
|
-
return `https://${
|
|
8
|
+
if (BRANCH_URL) {
|
|
9
|
+
return `https://${BRANCH_URL}`;
|
|
7
10
|
}
|
|
8
|
-
if (
|
|
9
|
-
return `https://${
|
|
11
|
+
if (DEPLOYMENT_URL) {
|
|
12
|
+
return `https://${DEPLOYMENT_URL}`;
|
|
10
13
|
}
|
|
11
14
|
return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;
|
|
12
15
|
}
|
|
13
16
|
export {
|
|
17
|
+
DEPLOYMENT_URL,
|
|
18
|
+
PRODUCTION_URL,
|
|
14
19
|
getSSRRelativePathBaseUrl
|
|
15
20
|
};
|
|
16
21
|
//# sourceMappingURL=get-ssr-relative-path-base-url.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n // Uses the most up to date version of production. Note that the production branch URL does not account\n // for deployments from non main branches being manually promoted to production.\n // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n if (
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["export const PRODUCTION_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL;\nconst BRANCH_URL = process.env.VERCEL_BRANCH_URL;\nexport const DEPLOYMENT_URL = process.env.VERCEL_URL;\n\n/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n // Uses the most up to date version of production. Note that the production branch URL does not account\n // for deployments from non main branches being manually promoted to production.\n // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n if (process.env.VERCEL_TARGET_ENV === 'production' && PRODUCTION_URL) {\n return `https://${PRODUCTION_URL}`;\n }\n\n // Uses the most up to date version of the remote component for the branch.\n // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n if (BRANCH_URL) {\n return `https://${BRANCH_URL}`;\n }\n\n // If there is no branch, use the vercel deployment URL.\n if (DEPLOYMENT_URL) {\n return `https://${DEPLOYMENT_URL}`;\n }\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"],"mappings":"AAAO,MAAM,iBAAiB,QAAQ,IAAI;AAC1C,MAAM,aAAa,QAAQ,IAAI;AACxB,MAAM,iBAAiB,QAAQ,IAAI;AAYnC,SAAS,4BAAoC;AAIlD,MAAI,QAAQ,IAAI,sBAAsB,gBAAgB,gBAAgB;AACpE,WAAO,WAAW;AAAA,EACpB;AAIA,MAAI,YAAY;AACd,WAAO,WAAW;AAAA,EACpB;AAGA,MAAI,gBAAgB;AAClB,WAAO,WAAW;AAAA,EACpB;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}
|
|
@@ -112,7 +112,7 @@ async function handleTurbopackChunk(code, scope, url) {
|
|
|
112
112
|
).replace(
|
|
113
113
|
/TURBOPACK_NEXT_CHUNK_URLS/g,
|
|
114
114
|
`TURBOPACK_NEXT_CHUNK_URLS_${globalKey}`
|
|
115
|
-
).replace(
|
|
115
|
+
).replace(/TURBOPACK_CHUNK_LISTS/g, `TURBOPACK_CHUNK_LISTS_${globalKey}`).replace(
|
|
116
116
|
/TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
|
|
117
117
|
`TURBOPACK_CHUNK_UPDATE_LISTENERS_${globalKey}`
|
|
118
118
|
).replace(/__next_require__/g, `__${globalKey}_next_require__`).replace(
|