remote-components 0.3.5 → 0.3.7
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/app-63L5THIQ.js +12 -0
- package/dist/app-63L5THIQ.js.map +1 -0
- package/dist/app-A5QE7XRH.cjs +12 -0
- package/dist/app-A5QE7XRH.cjs.map +1 -0
- package/dist/chunk-52BJ7VFA.js +202 -0
- package/dist/chunk-52BJ7VFA.js.map +1 -0
- package/dist/chunk-AWWWK2ZY.cjs +670 -0
- package/dist/chunk-AWWWK2ZY.cjs.map +1 -0
- package/dist/chunk-CTUJSWCM.js +215 -0
- package/dist/chunk-CTUJSWCM.js.map +1 -0
- package/dist/chunk-D5GNZB6O.js +61 -0
- package/dist/chunk-D5GNZB6O.js.map +1 -0
- package/dist/chunk-ENYGL5CO.js +11 -0
- package/dist/chunk-ENYGL5CO.js.map +1 -0
- package/dist/chunk-GAXJTFBV.js +20 -0
- package/dist/chunk-GAXJTFBV.js.map +1 -0
- package/dist/chunk-GBFUPMMI.js +670 -0
- package/dist/chunk-GBFUPMMI.js.map +1 -0
- package/dist/chunk-I47KE3EC.cjs +703 -0
- package/dist/chunk-I47KE3EC.cjs.map +1 -0
- package/dist/chunk-KE7QPAQ4.cjs +21 -0
- package/dist/chunk-KE7QPAQ4.cjs.map +1 -0
- package/dist/chunk-LCXO7BUY.cjs +57 -0
- package/dist/chunk-LCXO7BUY.cjs.map +1 -0
- package/dist/chunk-LQ7VQ74E.js +155 -0
- package/dist/chunk-LQ7VQ74E.js.map +1 -0
- package/dist/chunk-N5VQR2PW.cjs +215 -0
- package/dist/chunk-N5VQR2PW.cjs.map +1 -0
- package/dist/chunk-NZAB7REE.js +703 -0
- package/dist/chunk-NZAB7REE.js.map +1 -0
- package/dist/chunk-QKB74MLO.js +709 -0
- package/dist/chunk-QKB74MLO.js.map +1 -0
- package/dist/chunk-RJW3EZJP.cjs +709 -0
- package/dist/chunk-RJW3EZJP.cjs.map +1 -0
- package/dist/chunk-RUWR74XQ.cjs +152 -0
- package/dist/chunk-RUWR74XQ.cjs.map +1 -0
- package/dist/chunk-S2A4TFLS.js +152 -0
- package/dist/chunk-S2A4TFLS.js.map +1 -0
- package/dist/chunk-SHFJ5OQA.cjs +11 -0
- package/dist/chunk-SHFJ5OQA.cjs.map +1 -0
- package/dist/chunk-SJM7AAGU.js +358 -0
- package/dist/chunk-SJM7AAGU.js.map +1 -0
- package/dist/chunk-SZFCBE54.js +57 -0
- package/dist/chunk-SZFCBE54.js.map +1 -0
- package/dist/chunk-T64P7BAG.cjs +202 -0
- package/dist/chunk-T64P7BAG.cjs.map +1 -0
- package/dist/chunk-TCFLEBQM.cjs +20 -0
- package/dist/chunk-TCFLEBQM.cjs.map +1 -0
- package/dist/chunk-TZT7DLO5.cjs +155 -0
- package/dist/chunk-TZT7DLO5.cjs.map +1 -0
- package/dist/chunk-X6W464D6.cjs +358 -0
- package/dist/chunk-X6W464D6.cjs.map +1 -0
- package/dist/chunk-X6YKUJKH.js +21 -0
- package/dist/chunk-X6YKUJKH.js.map +1 -0
- package/dist/chunk-Z2SLBFQL.cjs +61 -0
- package/dist/chunk-Z2SLBFQL.cjs.map +1 -0
- package/dist/config/nextjs.cjs +74 -355
- package/dist/config/nextjs.cjs.map +1 -1
- package/dist/config/nextjs.js +25 -271
- package/dist/config/nextjs.js.map +1 -1
- package/dist/config/webpack.cjs +12 -240
- package/dist/config/webpack.cjs.map +1 -1
- package/dist/config/webpack.js +6 -207
- package/dist/config/webpack.js.map +1 -1
- package/dist/host/html.cjs +128 -2494
- package/dist/host/html.cjs.map +1 -1
- package/dist/host/html.js +45 -2382
- package/dist/host/html.js.map +1 -1
- package/dist/host/nextjs/app/client-only.cjs +53 -2939
- package/dist/host/nextjs/app/client-only.cjs.map +1 -1
- package/dist/host/nextjs/app/client-only.js +31 -2894
- package/dist/host/nextjs/app/client-only.js.map +1 -1
- package/dist/host/proxy/client.cjs +8 -38
- package/dist/host/proxy/client.cjs.map +1 -1
- package/dist/host/proxy/client.js +4 -7
- package/dist/host/proxy/client.js.map +1 -1
- package/dist/host/proxy.cjs +19 -56
- package/dist/host/proxy.cjs.map +1 -1
- package/dist/host/proxy.js +8 -20
- package/dist/host/proxy.js.map +1 -1
- package/dist/host/react.cjs +17 -2870
- package/dist/host/react.cjs.map +1 -1
- package/dist/host/react.js +13 -2837
- package/dist/host/react.js.map +1 -1
- package/dist/internal/config/webpack/next-client-pages-loader.cjs +27 -15
- package/dist/internal/config/webpack/next-client-pages-loader.cjs.map +1 -1
- package/dist/internal/config/webpack/next-client-pages-loader.d.ts +3 -5
- package/dist/internal/config/webpack/next-client-pages-loader.js +27 -15
- package/dist/internal/config/webpack/next-client-pages-loader.js.map +1 -1
- package/dist/internal/host/nextjs/app-client.d.ts +1 -1
- package/dist/internal/host/react/context.d.ts +2 -2
- package/dist/internal/host/server/fetch-remote-component.cjs +1 -18
- package/dist/internal/host/server/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.js +1 -18
- package/dist/internal/host/server/fetch-remote-component.js.map +1 -1
- package/dist/internal/host/shared/pipeline.d.ts +2 -2
- package/dist/internal/runtime/loaders/component-loader.cjs +5 -2
- package/dist/internal/runtime/loaders/component-loader.cjs.map +1 -1
- package/dist/internal/runtime/loaders/component-loader.d.ts +2 -2
- package/dist/internal/runtime/loaders/component-loader.js +5 -2
- package/dist/internal/runtime/loaders/component-loader.js.map +1 -1
- package/dist/internal/runtime/loaders/static-loader.d.ts +2 -1
- package/dist/internal/runtime/namespace.cjs +1 -0
- package/dist/internal/runtime/namespace.cjs.map +1 -1
- package/dist/internal/runtime/namespace.d.ts +2 -1
- package/dist/internal/runtime/namespace.js +1 -0
- package/dist/internal/runtime/namespace.js.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope.cjs +1 -5
- package/dist/internal/runtime/turbopack/remote-scope.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope.js +1 -5
- package/dist/internal/runtime/turbopack/remote-scope.js.map +1 -1
- package/dist/internal/runtime/types.d.ts +2 -1
- package/dist/internal/utils.cjs +1 -1
- package/dist/internal/utils.cjs.map +1 -1
- package/dist/internal/utils.d.ts +5 -5
- package/dist/internal/utils.js +1 -1
- package/dist/internal/utils.js.map +1 -1
- package/dist/remote/html.cjs +15 -314
- package/dist/remote/html.cjs.map +1 -1
- package/dist/remote/html.js +7 -305
- package/dist/remote/html.js.map +1 -1
- package/dist/remote/middleware.cjs +16 -41
- package/dist/remote/middleware.cjs.map +1 -1
- package/dist/script-D5AD7HLV.cjs +26 -0
- package/dist/script-D5AD7HLV.cjs.map +1 -0
- package/dist/script-VPOI7ARP.js +26 -0
- package/dist/script-VPOI7ARP.js.map +1 -0
- package/dist/{server-handoff-ce13bebc.d.ts → server-handoff-8c89b856.d.ts} +2 -2
- package/dist/static-loader-OHSAUD62.js +11 -0
- package/dist/static-loader-OHSAUD62.js.map +1 -0
- package/dist/static-loader-UDIXK5MV.cjs +11 -0
- package/dist/static-loader-UDIXK5MV.cjs.map +1 -0
- package/dist/turbopack-5LW6V6IT.js +55 -0
- package/dist/turbopack-5LW6V6IT.js.map +1 -0
- package/dist/turbopack-KRKECGY2.cjs +55 -0
- package/dist/turbopack-KRKECGY2.cjs.map +1 -0
- package/dist/{types-59251814.d.ts → types-8b0edd78.d.ts} +7 -0
- package/dist/webpack-NPZNXRNL.js +92 -0
- package/dist/webpack-NPZNXRNL.js.map +1 -0
- package/dist/webpack-TTZDARNY.cjs +92 -0
- package/dist/webpack-TTZDARNY.cjs.map +1 -0
- package/package.json +9 -2
|
@@ -1,399 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
// src/host/defaults/shared.ts
|
|
24
|
-
var shared;
|
|
25
|
-
var init_shared = __esm({
|
|
26
|
-
"src/host/defaults/shared.ts"() {
|
|
27
|
-
"use strict";
|
|
28
|
-
init_constants();
|
|
29
|
-
shared = {
|
|
30
|
-
__remote_components_missing_shared__: () => Promise.reject(new Error(MISSING_SHARED_MODULES_MESSAGE))
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// src/host/defaults/app.ts
|
|
36
|
-
var app_exports = {};
|
|
37
|
-
__export(app_exports, {
|
|
38
|
-
shared: () => shared
|
|
39
|
-
});
|
|
40
|
-
var init_app = __esm({
|
|
41
|
-
"src/host/defaults/app.ts"() {
|
|
42
|
-
"use strict";
|
|
43
|
-
init_shared();
|
|
44
|
-
}
|
|
45
|
-
});
|
|
2
|
+
import {
|
|
3
|
+
ConsumeRemoteComponent
|
|
4
|
+
} from "../../../chunk-GBFUPMMI.js";
|
|
5
|
+
import {
|
|
6
|
+
bindResolveClientUrl
|
|
7
|
+
} from "../../../chunk-NZAB7REE.js";
|
|
8
|
+
import "../../../chunk-SZFCBE54.js";
|
|
9
|
+
import "../../../chunk-QKB74MLO.js";
|
|
10
|
+
import "../../../chunk-52BJ7VFA.js";
|
|
11
|
+
import "../../../chunk-LQ7VQ74E.js";
|
|
12
|
+
import {
|
|
13
|
+
createRemoteImageLoader,
|
|
14
|
+
getScope
|
|
15
|
+
} from "../../../chunk-SJM7AAGU.js";
|
|
16
|
+
import "../../../chunk-D5GNZB6O.js";
|
|
17
|
+
import {
|
|
18
|
+
logWarn
|
|
19
|
+
} from "../../../chunk-S2A4TFLS.js";
|
|
20
|
+
import "../../../chunk-GAXJTFBV.js";
|
|
21
|
+
import "../../../chunk-X6YKUJKH.js";
|
|
22
|
+
import "../../../chunk-ENYGL5CO.js";
|
|
46
23
|
|
|
47
24
|
// src/host/nextjs/app-client-only.tsx
|
|
48
|
-
import { useMemo
|
|
25
|
+
import { useMemo } from "react";
|
|
49
26
|
|
|
50
27
|
// src/host/nextjs/image-shared.ts
|
|
51
28
|
import { createElement, forwardRef } from "react";
|
|
52
|
-
|
|
53
|
-
// src/utils/index.ts
|
|
54
|
-
function escapeString(str) {
|
|
55
|
-
return str.replace(/[^a-z0-9]/g, "_");
|
|
56
|
-
}
|
|
57
|
-
function computeScopedName(name, options) {
|
|
58
|
-
return options.isCrossOrigin ? `${name}_${escapeString(options.remoteHost.toLowerCase())}` : name;
|
|
59
|
-
}
|
|
60
|
-
var attrToProp = {
|
|
61
|
-
fetchpriority: "fetchPriority",
|
|
62
|
-
crossorigin: "crossOrigin",
|
|
63
|
-
imagesrcset: "imageSrcSet",
|
|
64
|
-
imagesizes: "imageSizes",
|
|
65
|
-
srcset: "srcSet"
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
// src/runtime/constants.ts
|
|
69
|
-
var DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
|
|
70
|
-
var DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
|
|
71
|
-
var DEFAULT_ROUTE = "/";
|
|
72
|
-
var RUNTIME_WEBPACK = "webpack";
|
|
73
|
-
var RUNTIME_TURBOPACK = "turbopack";
|
|
74
|
-
var RUNTIME_SCRIPT = "script";
|
|
75
|
-
function getBundleKey(bundle) {
|
|
76
|
-
return escapeString(bundle);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// src/runtime/namespace.ts
|
|
80
|
-
var SHADOW_ROOT_PREFIX = "__remote_components_shadowroot_";
|
|
81
|
-
var LEGACY_ALIASES = [
|
|
82
|
-
{ global: "__remote_component_scopes__", prop: "scopes" },
|
|
83
|
-
{
|
|
84
|
-
global: "__remote_components_turbopack_chunk_loader_promise__",
|
|
85
|
-
prop: "chunkCache"
|
|
86
|
-
},
|
|
87
|
-
{ global: "__remote_script_entrypoint_mount__", prop: "mountFns" },
|
|
88
|
-
{ global: "__remote_script_entrypoint_unmount__", prop: "unmountFns" },
|
|
89
|
-
{ global: "__remote_bundle_url__", prop: "bundleUrls" },
|
|
90
|
-
{ global: "__rc_module_registry__", prop: "moduleRegistry" },
|
|
91
|
-
{
|
|
92
|
-
global: "__remote_component_host_shared_modules__",
|
|
93
|
-
prop: "hostSharedModules"
|
|
94
|
-
},
|
|
95
|
-
{ global: "__remote_next_css__", prop: "cssCache" }
|
|
96
|
-
];
|
|
97
|
-
function getNamespace() {
|
|
98
|
-
const g = globalThis;
|
|
99
|
-
const existing = g.__remote_components__;
|
|
100
|
-
if (existing) {
|
|
101
|
-
return existing;
|
|
102
|
-
}
|
|
103
|
-
const ns = {
|
|
104
|
-
scopes: /* @__PURE__ */ new Map(),
|
|
105
|
-
chunkCache: {},
|
|
106
|
-
mountFns: {},
|
|
107
|
-
unmountFns: {},
|
|
108
|
-
bundleUrls: {},
|
|
109
|
-
moduleRegistry: {},
|
|
110
|
-
dispatcherRuntime: void 0,
|
|
111
|
-
hostSharedModules: {},
|
|
112
|
-
cssCache: {},
|
|
113
|
-
shadowRoots: {}
|
|
114
|
-
};
|
|
115
|
-
const nsRecord = ns;
|
|
116
|
-
for (const { global, prop } of LEGACY_ALIASES) {
|
|
117
|
-
const legacyValue = g[global];
|
|
118
|
-
if (legacyValue != null) {
|
|
119
|
-
nsRecord[prop] = legacyValue;
|
|
120
|
-
}
|
|
121
|
-
g[global] = ns[prop];
|
|
122
|
-
}
|
|
123
|
-
const gRecord = g;
|
|
124
|
-
for (const key of Object.keys(gRecord)) {
|
|
125
|
-
if (key.startsWith(SHADOW_ROOT_PREFIX)) {
|
|
126
|
-
const suffix = key.slice(SHADOW_ROOT_PREFIX.length);
|
|
127
|
-
ns.shadowRoots[suffix] = gRecord[key];
|
|
128
|
-
delete gRecord[key];
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
g.__remote_components__ = ns;
|
|
132
|
-
return ns;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// src/runtime/patterns.ts
|
|
136
|
-
var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
|
|
137
|
-
var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
|
|
138
|
-
var DOUBLE_SLASH_RE = /(?<!:)\/\//g;
|
|
139
|
-
function collapseDoubleSlashes(path) {
|
|
140
|
-
return path.replace(DOUBLE_SLASH_RE, "/");
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// src/utils/logger.ts
|
|
144
|
-
init_constants();
|
|
145
|
-
|
|
146
|
-
// src/runtime/url/protected-rc-fallback.ts
|
|
147
|
-
init_constants();
|
|
148
|
-
function isProxiedUrl(url) {
|
|
149
|
-
try {
|
|
150
|
-
return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
|
|
151
|
-
} catch {
|
|
152
|
-
return false;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
// src/utils/abort.ts
|
|
157
|
-
function isAbortError(error) {
|
|
158
|
-
if (error instanceof DOMException && error.name === "AbortError") {
|
|
159
|
-
return true;
|
|
160
|
-
}
|
|
161
|
-
if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
|
|
162
|
-
const e = error;
|
|
163
|
-
return typeof e.code === "number" || e.constructor?.name === "DOMException";
|
|
164
|
-
}
|
|
165
|
-
return false;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
// src/utils/error.ts
|
|
169
|
-
init_constants();
|
|
170
|
-
var RemoteComponentsError = class extends Error {
|
|
171
|
-
code = "REMOTE_COMPONENTS_ERROR";
|
|
172
|
-
constructor(message, options) {
|
|
173
|
-
super(message, options);
|
|
174
|
-
this.name = "RemoteComponentsError";
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
function multipleRemoteComponentsError(url) {
|
|
178
|
-
return new RemoteComponentsError(
|
|
179
|
-
`Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
|
|
183
|
-
return new RemoteComponentsError(
|
|
184
|
-
`Failed to fetch Remote Component from "${url}". ${help}`,
|
|
185
|
-
{ cause: new Error(`${status} ${statusText}`) }
|
|
186
|
-
);
|
|
187
|
-
}
|
|
188
|
-
async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
|
|
189
|
-
const isProxied = isProxiedUrl(resolvedUrl.href);
|
|
190
|
-
if (isProxied && res) {
|
|
191
|
-
const body = await res.text().catch(() => "");
|
|
192
|
-
return failedProxyFetchError(
|
|
193
|
-
originalUrl,
|
|
194
|
-
resolvedUrl.href,
|
|
195
|
-
res.status,
|
|
196
|
-
body
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
const fallback = failedToFetchRemoteComponentError(
|
|
200
|
-
originalUrl,
|
|
201
|
-
res ?? { status: 0, statusText: "No Response" }
|
|
202
|
-
);
|
|
203
|
-
if (!res)
|
|
204
|
-
return fallback;
|
|
205
|
-
try {
|
|
206
|
-
const body = await res.text();
|
|
207
|
-
const parser = new DOMParser();
|
|
208
|
-
const doc = parser.parseFromString(body, "text/html");
|
|
209
|
-
const errorTemplate = doc.querySelector(
|
|
210
|
-
"template[data-next-error-message]"
|
|
211
|
-
);
|
|
212
|
-
const errorMessage = errorTemplate?.getAttribute("data-next-error-message");
|
|
213
|
-
if (errorMessage) {
|
|
214
|
-
const error = new RemoteComponentsError(errorMessage);
|
|
215
|
-
const errorStack = errorTemplate?.getAttribute("data-next-error-stack");
|
|
216
|
-
if (errorStack) {
|
|
217
|
-
error.stack = errorStack;
|
|
218
|
-
}
|
|
219
|
-
return error;
|
|
220
|
-
}
|
|
221
|
-
} catch (parseError) {
|
|
222
|
-
if (isAbortError(parseError))
|
|
223
|
-
throw parseError;
|
|
224
|
-
}
|
|
225
|
-
return fallback;
|
|
226
|
-
}
|
|
227
|
-
function failedProxiedAssetError(kind, url, resolvedUrl) {
|
|
228
|
-
return new RemoteComponentsError(
|
|
229
|
-
`Failed to load ${kind} "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured, "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher, and the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
|
|
230
|
-
);
|
|
231
|
-
}
|
|
232
|
-
function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
|
|
233
|
-
if (status === 404) {
|
|
234
|
-
return new RemoteComponentsError(
|
|
235
|
-
`Could not proxy the request to "${originalUrl}" \u2014 the proxy endpoint "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" returned 404.
|
|
236
|
-
|
|
237
|
-
The host server needs middleware or a route that handles "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}".
|
|
238
|
-
|
|
239
|
-
Proxying requires two pieces:
|
|
240
|
-
1. resolveClientUrl={routeThroughHostProxy} on <RemoteComponent>
|
|
241
|
-
2. Middleware or a route for "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" on the host server
|
|
242
|
-
|
|
243
|
-
Docs: ${CORS_DOCS_URL}`
|
|
244
|
-
);
|
|
245
|
-
}
|
|
246
|
-
if (status === 403) {
|
|
247
|
-
const detail = responseBody ? ` ${responseBody}` : "";
|
|
248
|
-
return new RemoteComponentsError(
|
|
249
|
-
`Proxied request to "${proxyUrl}" was forbidden.${detail} See: ${CORS_DOCS_URL}`
|
|
250
|
-
);
|
|
251
|
-
}
|
|
252
|
-
return new RemoteComponentsError(
|
|
253
|
-
`Proxied request for "${originalUrl}" via "${proxyUrl}" failed with status ${status}. See: ${CORS_DOCS_URL}`
|
|
254
|
-
);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
// src/utils/logger.ts
|
|
258
|
-
var PREFIX = "remote-components";
|
|
259
|
-
var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true" || typeof process !== "undefined" && process.env.RC_DEBUG === "true";
|
|
260
|
-
function logDebug(location2, message) {
|
|
261
|
-
if (DEBUG) {
|
|
262
|
-
console.debug(`[${PREFIX}:${location2}]: ${message}`);
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
function logWarn(location2, message) {
|
|
266
|
-
console.warn(`[${PREFIX}:${location2}]: ${message}`);
|
|
267
|
-
}
|
|
268
|
-
function logError(location2, message, cause) {
|
|
269
|
-
console.error(
|
|
270
|
-
new RemoteComponentsError(`[${PREFIX}:${location2}]: ${message}`, {
|
|
271
|
-
cause
|
|
272
|
-
})
|
|
273
|
-
);
|
|
274
|
-
}
|
|
275
|
-
function warnCrossOriginFetchError(logLocation, url) {
|
|
276
|
-
try {
|
|
277
|
-
const parsed = typeof url === "string" ? new URL(url) : url;
|
|
278
|
-
if (typeof location === "undefined" || parsed.origin === location.origin) {
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
logWarn(
|
|
282
|
-
logLocation,
|
|
283
|
-
`Failed to fetch cross-origin resource "${parsed.href}". To load assets from a protected deployment, two steps are required: (1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. See: ${CORS_DOCS_URL}`
|
|
284
|
-
);
|
|
285
|
-
} catch {
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
// src/runtime/turbopack/remote-scope.ts
|
|
290
|
-
function getRegistry() {
|
|
291
|
-
return getNamespace().scopes;
|
|
292
|
-
}
|
|
293
|
-
function createScope(name, url, runtime, resolveClientUrl) {
|
|
294
|
-
const isCrossOrigin = url.origin !== location.origin;
|
|
295
|
-
const scopedName = computeScopedName(name, {
|
|
296
|
-
remoteHost: url.host,
|
|
297
|
-
isCrossOrigin
|
|
298
|
-
});
|
|
299
|
-
const globalKey = getBundleKey(scopedName);
|
|
300
|
-
return {
|
|
301
|
-
name,
|
|
302
|
-
scopedName,
|
|
303
|
-
globalKey,
|
|
304
|
-
url,
|
|
305
|
-
runtime,
|
|
306
|
-
resolveClientUrl,
|
|
307
|
-
moduleCache: {},
|
|
308
|
-
sharedModules: {},
|
|
309
|
-
moduleGlobal: {},
|
|
310
|
-
turbopackModules: []
|
|
311
|
-
};
|
|
312
|
-
}
|
|
313
|
-
function registerScope(scope) {
|
|
314
|
-
const registry = getRegistry();
|
|
315
|
-
registry.set(scope.scopedName, scope);
|
|
316
|
-
if (scope.scopedName !== scope.name) {
|
|
317
|
-
const existing = registry.get(scope.name);
|
|
318
|
-
if (existing && existing.scopedName !== scope.scopedName) {
|
|
319
|
-
logWarn(
|
|
320
|
-
"RemoteScope",
|
|
321
|
-
`Plain name "${scope.name}" already registered by scope "${existing.scopedName}" \u2014 overwriting with "${scope.scopedName}". Static hosts will only resolve the latest one.`
|
|
322
|
-
);
|
|
323
|
-
}
|
|
324
|
-
registry.set(scope.name, scope);
|
|
325
|
-
}
|
|
326
|
-
logDebug(
|
|
327
|
-
"RemoteScope",
|
|
328
|
-
`Registered scope "${scope.scopedName}" (${registry.size} total)`
|
|
329
|
-
);
|
|
330
|
-
}
|
|
331
|
-
function getScope(name) {
|
|
332
|
-
return getRegistry().get(name);
|
|
333
|
-
}
|
|
334
|
-
function formatRemoteId(scope, path) {
|
|
335
|
-
return `[${scope.scopedName}] ${path}`;
|
|
336
|
-
}
|
|
337
|
-
function parseRemoteId(id) {
|
|
338
|
-
const groups = REMOTE_COMPONENT_REGEX.exec(id)?.groups;
|
|
339
|
-
if (groups?.bundle && groups.id) {
|
|
340
|
-
return {
|
|
341
|
-
bundle: groups.bundle,
|
|
342
|
-
path: groups.id,
|
|
343
|
-
prefix: groups.prefix ?? ""
|
|
344
|
-
};
|
|
345
|
-
}
|
|
346
|
-
return { bundle: "default", path: id, prefix: "" };
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
// src/host/shared/remote-image-loader.ts
|
|
350
|
-
function createRemoteImageLoader(bundle, resolveClientUrl) {
|
|
351
|
-
const loader = Object.assign(
|
|
352
|
-
({
|
|
353
|
-
config,
|
|
354
|
-
src,
|
|
355
|
-
width,
|
|
356
|
-
quality
|
|
357
|
-
}) => {
|
|
358
|
-
const q = quality ?? 75;
|
|
359
|
-
const remoteOrigin = getScope(bundle)?.url.origin ?? "";
|
|
360
|
-
const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
|
|
361
|
-
const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
|
|
362
|
-
const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
|
|
363
|
-
return resolveClientUrl?.(url) ?? url;
|
|
364
|
-
},
|
|
365
|
-
// Signals to getImgProps that this is a default loader (not a user-defined
|
|
366
|
-
// one), enabling srcSet generation with device/image sizes from the config.
|
|
367
|
-
{ __next_img_default: true }
|
|
368
|
-
);
|
|
369
|
-
return loader;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
// src/runtime/url/resolve-client-url.ts
|
|
373
|
-
function withRemoteSrc(resolveClientUrl, remoteSrc) {
|
|
374
|
-
const remoteOrigin = parseOrigin(remoteSrc);
|
|
375
|
-
return (url) => {
|
|
376
|
-
const urlOrigin = parseOrigin(url);
|
|
377
|
-
if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
|
|
378
|
-
return void 0;
|
|
379
|
-
}
|
|
380
|
-
return resolveClientUrl(remoteSrc, url);
|
|
381
|
-
};
|
|
382
|
-
}
|
|
383
|
-
function parseOrigin(url) {
|
|
384
|
-
try {
|
|
385
|
-
return new URL(url).origin;
|
|
386
|
-
} catch {
|
|
387
|
-
return void 0;
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
// src/runtime/url/default-resolve-client-url.ts
|
|
392
|
-
function bindResolveClientUrl(prop, remoteSrc) {
|
|
393
|
-
return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
// src/host/nextjs/image-shared.ts
|
|
397
29
|
function resolveForBundle(unbound, bundle) {
|
|
398
30
|
if (!unbound)
|
|
399
31
|
return void 0;
|
|
@@ -445,8 +77,8 @@ function createImageLoaderSharedEntries({
|
|
|
445
77
|
// src/host/nextjs/shared-import.ts
|
|
446
78
|
async function tryImportShared() {
|
|
447
79
|
try {
|
|
448
|
-
const { shared
|
|
449
|
-
return
|
|
80
|
+
const { shared } = await import("../../../app-63L5THIQ.js");
|
|
81
|
+
return shared;
|
|
450
82
|
} catch {
|
|
451
83
|
return {};
|
|
452
84
|
}
|
|
@@ -455,2501 +87,6 @@ async function tryImportShared() {
|
|
|
455
87
|
// src/host/nextjs/app-client-only.tsx
|
|
456
88
|
import { RemoteComponentsContext } from "#internal/host/react/context";
|
|
457
89
|
|
|
458
|
-
// src/host/react/index.tsx
|
|
459
|
-
import {
|
|
460
|
-
startTransition,
|
|
461
|
-
useEffect,
|
|
462
|
-
useId,
|
|
463
|
-
useLayoutEffect as useLayoutEffect2,
|
|
464
|
-
useMemo as useMemo2,
|
|
465
|
-
useRef as useRef2,
|
|
466
|
-
useState as useState2
|
|
467
|
-
} from "react";
|
|
468
|
-
import { createPortal } from "react-dom";
|
|
469
|
-
import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
|
|
470
|
-
|
|
471
|
-
// src/host/server/fetch-headers.ts
|
|
472
|
-
function remoteFetchHeaders() {
|
|
473
|
-
return {
|
|
474
|
-
/**
|
|
475
|
-
* Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
|
|
476
|
-
* If the remote component uses vercel deployment protection, ensure the host and remote vercel
|
|
477
|
-
* projects share a common automation bypass secret, and the shared secret is used as the
|
|
478
|
-
* VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
|
|
479
|
-
*/
|
|
480
|
-
...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
|
|
481
|
-
"x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
|
|
482
|
-
} : {},
|
|
483
|
-
Accept: "text/html"
|
|
484
|
-
};
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
// src/host/server/fetch-with-hooks.ts
|
|
488
|
-
async function fetchWithWarning(url, init) {
|
|
489
|
-
try {
|
|
490
|
-
return await fetch(url, init);
|
|
491
|
-
} catch (error) {
|
|
492
|
-
warnCrossOriginFetchError("FetchRemoteComponent", url);
|
|
493
|
-
throw error;
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
async function fetchWithHooks(url, additionalInit, options = {}) {
|
|
497
|
-
const {
|
|
498
|
-
onRequest,
|
|
499
|
-
onResponse,
|
|
500
|
-
abortController = new AbortController()
|
|
501
|
-
} = options;
|
|
502
|
-
const signal = abortController.signal;
|
|
503
|
-
const hookOptions = {
|
|
504
|
-
signal,
|
|
505
|
-
abort: (reason) => abortController.abort(reason)
|
|
506
|
-
};
|
|
507
|
-
const init = {
|
|
508
|
-
method: "GET",
|
|
509
|
-
headers: remoteFetchHeaders(),
|
|
510
|
-
signal,
|
|
511
|
-
...additionalInit
|
|
512
|
-
};
|
|
513
|
-
const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
|
|
514
|
-
return await onResponse?.(url, res, hookOptions) ?? res;
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
// src/host/server/get-client-or-server-url.ts
|
|
518
|
-
function getClientOrServerUrl(src, serverFallback) {
|
|
519
|
-
const fallback = typeof location !== "undefined" ? location.href : serverFallback;
|
|
520
|
-
if (!src) {
|
|
521
|
-
return new URL(fallback);
|
|
522
|
-
}
|
|
523
|
-
return typeof src === "string" ? new URL(src, fallback) : src;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
// src/host/shared/lifecycle.ts
|
|
527
|
-
function makeReactEmitter(callbacks) {
|
|
528
|
-
return {
|
|
529
|
-
beforeLoad(src) {
|
|
530
|
-
callbacks.onBeforeLoad?.(src);
|
|
531
|
-
},
|
|
532
|
-
load(src) {
|
|
533
|
-
callbacks.onLoad?.(src);
|
|
534
|
-
},
|
|
535
|
-
error(error, _src) {
|
|
536
|
-
callbacks.onError?.(error);
|
|
537
|
-
},
|
|
538
|
-
change(info) {
|
|
539
|
-
callbacks.onChange?.(info);
|
|
540
|
-
}
|
|
541
|
-
};
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
// src/host/shared/polyfill.tsx
|
|
545
|
-
import { jsx } from "react/jsx-runtime";
|
|
546
|
-
function sharedPolyfills(shared2, resolveClientUrl) {
|
|
547
|
-
const hostShared = getNamespace().hostSharedModules;
|
|
548
|
-
const polyfill = {
|
|
549
|
-
"next/dist/client/components/navigation": hostShared["next/navigation"] ?? shared2?.["next/navigation"] ?? (() => Promise.resolve({
|
|
550
|
-
useRouter() {
|
|
551
|
-
return {
|
|
552
|
-
push: (routerUrl) => {
|
|
553
|
-
history.pushState({}, "", routerUrl);
|
|
554
|
-
},
|
|
555
|
-
replace: (routerUrl) => {
|
|
556
|
-
history.replaceState({}, "", routerUrl);
|
|
557
|
-
},
|
|
558
|
-
back: () => {
|
|
559
|
-
history.back();
|
|
560
|
-
}
|
|
561
|
-
};
|
|
562
|
-
},
|
|
563
|
-
usePathname() {
|
|
564
|
-
return location.pathname;
|
|
565
|
-
},
|
|
566
|
-
useParams() {
|
|
567
|
-
return {};
|
|
568
|
-
},
|
|
569
|
-
useSearchParams() {
|
|
570
|
-
return new URLSearchParams(location.search);
|
|
571
|
-
},
|
|
572
|
-
useSelectedLayoutSegment() {
|
|
573
|
-
return null;
|
|
574
|
-
},
|
|
575
|
-
useSelectedLayoutSegments() {
|
|
576
|
-
return [];
|
|
577
|
-
},
|
|
578
|
-
__esModule: true
|
|
579
|
-
})),
|
|
580
|
-
"next/dist/client/app-dir/link": hostShared["next/link"] ?? shared2?.["next/link"] ?? (() => Promise.resolve({
|
|
581
|
-
default: ({
|
|
582
|
-
scroll: _,
|
|
583
|
-
replace,
|
|
584
|
-
prefetch,
|
|
585
|
-
onNavigate,
|
|
586
|
-
children,
|
|
587
|
-
...props
|
|
588
|
-
}) => {
|
|
589
|
-
if (prefetch) {
|
|
590
|
-
logWarn(
|
|
591
|
-
"Polyfill",
|
|
592
|
-
"Next.js Link prefetch is not supported in remote components"
|
|
593
|
-
);
|
|
594
|
-
}
|
|
595
|
-
return /* @__PURE__ */ jsx(
|
|
596
|
-
"a",
|
|
597
|
-
{
|
|
598
|
-
...props,
|
|
599
|
-
href: props.href,
|
|
600
|
-
onClick: (e) => {
|
|
601
|
-
e.preventDefault();
|
|
602
|
-
let preventDefaulted = false;
|
|
603
|
-
e.preventDefault = () => {
|
|
604
|
-
preventDefaulted = true;
|
|
605
|
-
e.defaultPrevented = true;
|
|
606
|
-
};
|
|
607
|
-
if (typeof props.onClick === "function") {
|
|
608
|
-
props.onClick(e);
|
|
609
|
-
}
|
|
610
|
-
onNavigate?.(e);
|
|
611
|
-
if (preventDefaulted) {
|
|
612
|
-
return;
|
|
613
|
-
}
|
|
614
|
-
if (replace) {
|
|
615
|
-
history.replaceState({}, "", props.href);
|
|
616
|
-
} else {
|
|
617
|
-
history.pushState({}, "", props.href);
|
|
618
|
-
}
|
|
619
|
-
},
|
|
620
|
-
suppressHydrationWarning: true,
|
|
621
|
-
children: children ?? null
|
|
622
|
-
}
|
|
623
|
-
);
|
|
624
|
-
},
|
|
625
|
-
useLinkStatus() {
|
|
626
|
-
return { pending: false };
|
|
627
|
-
},
|
|
628
|
-
__esModule: true
|
|
629
|
-
})),
|
|
630
|
-
"next/dist/client/app-dir/form": hostShared["next/form"] ?? shared2?.["next/form"] ?? (() => Promise.resolve({
|
|
631
|
-
default: () => {
|
|
632
|
-
throw new Error("Next.js <Form> component not implemented");
|
|
633
|
-
},
|
|
634
|
-
__esModule: true
|
|
635
|
-
})),
|
|
636
|
-
// Instead of replacing next/image entirely, we let the real Next.js Image
|
|
637
|
-
// component load from the remote bundle and only replace its default loader.
|
|
638
|
-
// This gives us full next/image fidelity (fill, priority, srcSet, blur
|
|
639
|
-
// placeholders, error handling) while routing image optimization through the
|
|
640
|
-
// remote app's /_next/image endpoint.
|
|
641
|
-
"next/dist/shared/lib/image-loader": hostShared["next/dist/shared/lib/image-loader"] ?? shared2?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
|
|
642
|
-
default: createRemoteImageLoader(bundle, resolveClientUrl),
|
|
643
|
-
__esModule: true
|
|
644
|
-
})),
|
|
645
|
-
"next/dist/client/script": hostShared["next/script"] ?? shared2?.["next/script"] ?? (() => Promise.resolve({
|
|
646
|
-
// TODO: implement <Script> component for non-Next.js host applications
|
|
647
|
-
// do not throw an error for now
|
|
648
|
-
default: () => null,
|
|
649
|
-
__esModule: true
|
|
650
|
-
})),
|
|
651
|
-
"next/router": hostShared["next/router"] ?? shared2?.["next/router"] ?? (() => (
|
|
652
|
-
// TODO: incomplete implementation
|
|
653
|
-
Promise.resolve({
|
|
654
|
-
useRouter() {
|
|
655
|
-
return {
|
|
656
|
-
push: (routerUrl) => {
|
|
657
|
-
history.pushState({}, "", routerUrl);
|
|
658
|
-
},
|
|
659
|
-
replace: (routerUrl) => {
|
|
660
|
-
history.replaceState({}, "", routerUrl);
|
|
661
|
-
},
|
|
662
|
-
back: () => {
|
|
663
|
-
history.back();
|
|
664
|
-
}
|
|
665
|
-
};
|
|
666
|
-
},
|
|
667
|
-
__esModule: true
|
|
668
|
-
})
|
|
669
|
-
)),
|
|
670
|
-
"next/dist/build/polyfills/process": () => Promise.resolve({
|
|
671
|
-
default: {
|
|
672
|
-
env: {
|
|
673
|
-
NODE_ENV: "production"
|
|
674
|
-
}
|
|
675
|
-
},
|
|
676
|
-
__esModule: true
|
|
677
|
-
})
|
|
678
|
-
};
|
|
679
|
-
polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
|
|
680
|
-
polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
|
|
681
|
-
polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
|
|
682
|
-
polyfill["next/dist/esm/shared/lib/image-loader"] = polyfill["next/dist/shared/lib/image-loader"];
|
|
683
|
-
polyfill["next/script"] = polyfill["next/dist/client/script"];
|
|
684
|
-
return polyfill;
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
// src/host/shared/shared-module-resolver.ts
|
|
688
|
-
var CORE_REACT_PATH_MAP = {
|
|
689
|
-
react: "/react/index.js",
|
|
690
|
-
"react/jsx-dev-runtime": "/react/jsx-dev-runtime.js",
|
|
691
|
-
"react/jsx-runtime": "/react/jsx-runtime.js",
|
|
692
|
-
"react-dom": "/react-dom/index.js",
|
|
693
|
-
"react-dom/client": "/react-dom/client.js"
|
|
694
|
-
};
|
|
695
|
-
var VENDOR_SHARED = Object.fromEntries(
|
|
696
|
-
Object.entries(CORE_REACT_PATH_MAP).filter(([key]) => key !== "react-dom/client").map(([key, path]) => [key, `'${path}'`])
|
|
697
|
-
);
|
|
698
|
-
function buildCoreShared(userShared) {
|
|
699
|
-
return {
|
|
700
|
-
react: async () => (await import("react")).default,
|
|
701
|
-
"react-dom": async () => (await import("react-dom")).default,
|
|
702
|
-
"react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
|
|
703
|
-
"react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
|
|
704
|
-
"react-dom/client": async () => (await import("react-dom/client")).default,
|
|
705
|
-
...userShared
|
|
706
|
-
};
|
|
707
|
-
}
|
|
708
|
-
function buildHostShared(userShared, resolveClientUrl, options) {
|
|
709
|
-
const self = globalThis;
|
|
710
|
-
const result = {
|
|
711
|
-
...sharedPolyfills(userShared, resolveClientUrl),
|
|
712
|
-
...self.__remote_component_host_shared_modules__,
|
|
713
|
-
...userShared
|
|
714
|
-
};
|
|
715
|
-
if (options?.includeRemoteComponentShared) {
|
|
716
|
-
Object.assign(result, self.__remote_component_shared__);
|
|
717
|
-
}
|
|
718
|
-
return result;
|
|
719
|
-
}
|
|
720
|
-
async function buildWebpackResolve(hostShared, remoteShared, bundle, reactModules, callerTag = "SharedModuleResolver") {
|
|
721
|
-
const resolve = {
|
|
722
|
-
...reactModules,
|
|
723
|
-
...Object.entries(remoteShared).reduce(
|
|
724
|
-
(acc, [key, value]) => {
|
|
725
|
-
if (typeof hostShared[value] !== "undefined") {
|
|
726
|
-
acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
|
|
727
|
-
} else {
|
|
728
|
-
logDebug(
|
|
729
|
-
callerTag,
|
|
730
|
-
`Remote requests "${value}" but host doesn't provide it`
|
|
731
|
-
);
|
|
732
|
-
}
|
|
733
|
-
return acc;
|
|
734
|
-
},
|
|
735
|
-
{}
|
|
736
|
-
)
|
|
737
|
-
};
|
|
738
|
-
await Promise.all(
|
|
739
|
-
Object.entries(resolve).map(async ([key, value]) => {
|
|
740
|
-
if (typeof value === "function") {
|
|
741
|
-
resolve[key] = await value(bundle);
|
|
742
|
-
}
|
|
743
|
-
return Promise.resolve(value);
|
|
744
|
-
})
|
|
745
|
-
);
|
|
746
|
-
return resolve;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
// src/runtime/html/html-spec.ts
|
|
750
|
-
var ORIGIN_REWRITE_TAGS = [
|
|
751
|
-
"img",
|
|
752
|
-
"source",
|
|
753
|
-
"video",
|
|
754
|
-
"audio",
|
|
755
|
-
"track",
|
|
756
|
-
"iframe",
|
|
757
|
-
"embed",
|
|
758
|
-
"script",
|
|
759
|
-
"link"
|
|
760
|
-
];
|
|
761
|
-
var ID_SUFFIX_RSC = "_rsc";
|
|
762
|
-
var ID_SUFFIX_SSR = "_ssr";
|
|
763
|
-
var ID_SUFFIX_SHARED = "_shared";
|
|
764
|
-
var DATA_BUNDLE = "data-bundle";
|
|
765
|
-
var DATA_ROUTE = "data-route";
|
|
766
|
-
var DATA_RUNTIME = "data-runtime";
|
|
767
|
-
var DATA_TYPE = "data-type";
|
|
768
|
-
var DATA_SRC = "data-src";
|
|
769
|
-
var DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
|
|
770
|
-
var TAG_REMOTE_COMPONENT = "remote-component";
|
|
771
|
-
var NEXT_DATA_ID = "__NEXT_DATA__";
|
|
772
|
-
var REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
|
|
773
|
-
var NEXT_CONTAINER_ID = "__next";
|
|
774
|
-
|
|
775
|
-
// src/runtime/html/rewrite-srcset.ts
|
|
776
|
-
function rewriteSrcset(srcset, base, resolve) {
|
|
777
|
-
return srcset.split(",").map((entry) => {
|
|
778
|
-
const [url, descriptor] = entry.trim().split(/\s+/);
|
|
779
|
-
if (!url)
|
|
780
|
-
return entry;
|
|
781
|
-
const absoluteUrl = new URL(url, base).href;
|
|
782
|
-
const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;
|
|
783
|
-
return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
|
|
784
|
-
}).join(", ");
|
|
785
|
-
}
|
|
786
|
-
|
|
787
|
-
// src/runtime/html/apply-origin.ts
|
|
788
|
-
function applyOriginToNodes(doc, url, resolveClientUrl) {
|
|
789
|
-
if (url.origin !== location.origin) {
|
|
790
|
-
const nodes = doc.querySelectorAll(
|
|
791
|
-
ORIGIN_REWRITE_TAGS.map(
|
|
792
|
-
(type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
|
|
793
|
-
).join(",")
|
|
794
|
-
);
|
|
795
|
-
nodes.forEach((node) => {
|
|
796
|
-
if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
|
|
797
|
-
const absoluteSrc = new URL(node.getAttribute("src") ?? "/", url).href;
|
|
798
|
-
const isScript = node.tagName.toLowerCase() === "script";
|
|
799
|
-
node.src = isScript ? absoluteSrc : resolveClientUrl?.(absoluteSrc) ?? absoluteSrc;
|
|
800
|
-
}
|
|
801
|
-
if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
|
|
802
|
-
const absoluteHref = new URL(node.getAttribute("href") ?? "/", url).href;
|
|
803
|
-
node.setAttribute(
|
|
804
|
-
"href",
|
|
805
|
-
resolveClientUrl?.(absoluteHref) ?? absoluteHref
|
|
806
|
-
);
|
|
807
|
-
}
|
|
808
|
-
if (node.hasAttribute("srcset")) {
|
|
809
|
-
const raw = node.getAttribute("srcset");
|
|
810
|
-
if (raw) {
|
|
811
|
-
const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
|
|
812
|
-
node.setAttribute("srcset", rewriteSrcset(raw, url, resolve));
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
|
-
if (node.hasAttribute("imagesrcset")) {
|
|
816
|
-
const raw = node.getAttribute("imagesrcset");
|
|
817
|
-
if (raw) {
|
|
818
|
-
const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
|
|
819
|
-
node.setAttribute("imagesrcset", rewriteSrcset(raw, url, resolve));
|
|
820
|
-
}
|
|
821
|
-
}
|
|
822
|
-
});
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
// src/runtime/metadata.ts
|
|
827
|
-
var VALID_RUNTIMES = /* @__PURE__ */ new Set(["webpack", "turbopack", "script"]);
|
|
828
|
-
var VALID_TYPES = /* @__PURE__ */ new Set([
|
|
829
|
-
"nextjs",
|
|
830
|
-
"remote-component",
|
|
831
|
-
"unknown"
|
|
832
|
-
]);
|
|
833
|
-
function isRuntime(value) {
|
|
834
|
-
return VALID_RUNTIMES.has(value);
|
|
835
|
-
}
|
|
836
|
-
function isComponentType(value) {
|
|
837
|
-
return VALID_TYPES.has(value);
|
|
838
|
-
}
|
|
839
|
-
function toRuntime(value) {
|
|
840
|
-
return value && isRuntime(value) ? value : "webpack";
|
|
841
|
-
}
|
|
842
|
-
function toComponentType(value) {
|
|
843
|
-
return value && isComponentType(value) ? value : "unknown";
|
|
844
|
-
}
|
|
845
|
-
function buildMetadata(attrs, url) {
|
|
846
|
-
const id = attrs.id || DEFAULT_COMPONENT_NAME;
|
|
847
|
-
const bundle = attrs.bundle || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || DEFAULT_BUNDLE_NAME;
|
|
848
|
-
return {
|
|
849
|
-
name: attrs.name || id.replace(/_ssr$/, ""),
|
|
850
|
-
bundle,
|
|
851
|
-
route: attrs.route || url.pathname || DEFAULT_ROUTE,
|
|
852
|
-
runtime: toRuntime(attrs.runtime),
|
|
853
|
-
id,
|
|
854
|
-
type: toComponentType(attrs.type)
|
|
855
|
-
};
|
|
856
|
-
}
|
|
857
|
-
|
|
858
|
-
// src/runtime/html/parse-remote-html.ts
|
|
859
|
-
function validateSingleComponent(doc, name, url) {
|
|
860
|
-
if (doc.querySelectorAll(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`).length > 1 && !doc.querySelector(
|
|
861
|
-
`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`
|
|
862
|
-
) || doc.querySelectorAll(`${TAG_REMOTE_COMPONENT}:not([src])`).length > 1 && !doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]`)) {
|
|
863
|
-
throw multipleRemoteComponentsError(url);
|
|
864
|
-
}
|
|
865
|
-
}
|
|
866
|
-
function findComponentElement(doc, name) {
|
|
867
|
-
return doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`) ?? doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`) ?? doc.querySelector(`div#${NEXT_CONTAINER_ID}`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]:not([src])`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}:not([src])`);
|
|
868
|
-
}
|
|
869
|
-
function parseNextData(doc) {
|
|
870
|
-
return JSON.parse(
|
|
871
|
-
(doc.querySelector(`#${NEXT_DATA_ID}`) ?? doc.querySelector(`#${REMOTE_NEXT_DATA_ID}`))?.textContent ?? "null"
|
|
872
|
-
);
|
|
873
|
-
}
|
|
874
|
-
function resolveComponentName(component, nextData, fallbackName) {
|
|
875
|
-
const isRemoteComponent = component?.tagName.toLowerCase() === TAG_REMOTE_COMPONENT;
|
|
876
|
-
const name = component?.getAttribute("id")?.replace(new RegExp(`${ID_SUFFIX_SSR}$`), "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
|
|
877
|
-
return { name, isRemoteComponent };
|
|
878
|
-
}
|
|
879
|
-
function extractRemoteShared(doc, name, nextData) {
|
|
880
|
-
const remoteSharedEl = doc.querySelector(
|
|
881
|
-
`#${name}${ID_SUFFIX_SHARED}[${DATA_REMOTE_COMPONENTS_SHARED}]`
|
|
882
|
-
);
|
|
883
|
-
const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
|
|
884
|
-
remoteSharedEl?.remove();
|
|
885
|
-
return remoteShared;
|
|
886
|
-
}
|
|
887
|
-
function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
|
|
888
|
-
if (!component || !(rsc || nextData || isRemoteComponent)) {
|
|
889
|
-
throw new RemoteComponentsError(
|
|
890
|
-
`Remote Component not found on ${url}.${name !== DEFAULT_COMPONENT_NAME ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
|
|
891
|
-
);
|
|
892
|
-
}
|
|
893
|
-
}
|
|
894
|
-
function extractLinks(doc, component) {
|
|
895
|
-
return Array.from(doc.querySelectorAll("link[href]")).filter(
|
|
896
|
-
(link) => !component.contains(link)
|
|
897
|
-
);
|
|
898
|
-
}
|
|
899
|
-
function extractScripts(doc, component, isRemoteComponent) {
|
|
900
|
-
return Array.from(
|
|
901
|
-
(isRemoteComponent ? component : doc).querySelectorAll(
|
|
902
|
-
`script[src],script[${DATA_SRC}]`
|
|
903
|
-
)
|
|
904
|
-
);
|
|
905
|
-
}
|
|
906
|
-
function parseRemoteComponentDocument(doc, name, url) {
|
|
907
|
-
validateSingleComponent(doc, name, url.href);
|
|
908
|
-
const component = findComponentElement(doc, name);
|
|
909
|
-
const nextData = parseNextData(doc);
|
|
910
|
-
const { name: resolvedName, isRemoteComponent } = resolveComponentName(
|
|
911
|
-
component,
|
|
912
|
-
nextData,
|
|
913
|
-
name
|
|
914
|
-
);
|
|
915
|
-
const rsc = doc.querySelector(`#${resolvedName}${ID_SUFFIX_RSC}`);
|
|
916
|
-
const metadata = buildMetadata(
|
|
917
|
-
{
|
|
918
|
-
name: resolvedName,
|
|
919
|
-
bundle: component?.getAttribute(DATA_BUNDLE) || nextData?.props.__REMOTE_COMPONENT__?.bundle,
|
|
920
|
-
route: component?.getAttribute(DATA_ROUTE) ?? nextData?.page,
|
|
921
|
-
runtime: component?.getAttribute(DATA_RUNTIME) ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
|
|
922
|
-
id: component?.getAttribute("id"),
|
|
923
|
-
type: component?.getAttribute(DATA_TYPE)
|
|
924
|
-
},
|
|
925
|
-
url
|
|
926
|
-
);
|
|
927
|
-
const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
|
|
928
|
-
validateComponentFound(
|
|
929
|
-
component,
|
|
930
|
-
rsc,
|
|
931
|
-
nextData,
|
|
932
|
-
isRemoteComponent,
|
|
933
|
-
url.href,
|
|
934
|
-
resolvedName
|
|
935
|
-
);
|
|
936
|
-
const links = extractLinks(doc, component);
|
|
937
|
-
const scripts = extractScripts(doc, component, isRemoteComponent);
|
|
938
|
-
return {
|
|
939
|
-
component,
|
|
940
|
-
name: resolvedName,
|
|
941
|
-
isRemoteComponent,
|
|
942
|
-
metadata,
|
|
943
|
-
nextData,
|
|
944
|
-
rsc,
|
|
945
|
-
remoteShared,
|
|
946
|
-
links,
|
|
947
|
-
scripts
|
|
948
|
-
};
|
|
949
|
-
}
|
|
950
|
-
|
|
951
|
-
// src/runtime/loaders/component-loader.ts
|
|
952
|
-
import * as React from "react";
|
|
953
|
-
import * as JSXDevRuntime from "react/jsx-dev-runtime";
|
|
954
|
-
import * as JSXRuntime from "react/jsx-runtime";
|
|
955
|
-
import * as ReactDOM from "react-dom";
|
|
956
|
-
import * as ReactDOMClient from "react-dom/client";
|
|
957
|
-
|
|
958
|
-
// src/config/webpack/apply-shared-modules.ts
|
|
959
|
-
var DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
|
|
960
|
-
function applySharedModules(bundle, resolve) {
|
|
961
|
-
logDebug(
|
|
962
|
-
"SharedModules",
|
|
963
|
-
`applySharedModules called for bundle: "${bundle}"`
|
|
964
|
-
);
|
|
965
|
-
logDebug(
|
|
966
|
-
"SharedModules",
|
|
967
|
-
`Shared modules to resolve: ${Object.keys(resolve)}`
|
|
968
|
-
);
|
|
969
|
-
const self = globalThis;
|
|
970
|
-
const scope = getScope(bundle);
|
|
971
|
-
const webpackBundle = scope?.webpackRequire ?? self.__remote_webpack_require__?.[bundle];
|
|
972
|
-
if (webpackBundle) {
|
|
973
|
-
const modulePaths = Object.keys(
|
|
974
|
-
self.__remote_webpack_module_map__?.[bundle] ?? webpackBundle.m ?? {}
|
|
975
|
-
);
|
|
976
|
-
logDebug(
|
|
977
|
-
"SharedModules",
|
|
978
|
-
`Available module paths for bundle "${bundle}": ${modulePaths}`
|
|
979
|
-
);
|
|
980
|
-
for (const [key, value] of Object.entries(resolve)) {
|
|
981
|
-
const exactIds = modulePaths.filter((p) => p === key);
|
|
982
|
-
const ids = exactIds.length > 0 ? exactIds : modulePaths.filter((p) => p.includes(key));
|
|
983
|
-
if (ids.length === 0) {
|
|
984
|
-
logDebug(
|
|
985
|
-
"SharedModules",
|
|
986
|
-
`No matching module path found for shared module "${key}"`
|
|
987
|
-
);
|
|
988
|
-
}
|
|
989
|
-
for (const id of ids) {
|
|
990
|
-
if (webpackBundle.m) {
|
|
991
|
-
const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
|
|
992
|
-
if (resolvedId !== id) {
|
|
993
|
-
logDebug(
|
|
994
|
-
"SharedModules",
|
|
995
|
-
`Mapped module id: "${id}" -> "${resolvedId}"`
|
|
996
|
-
);
|
|
997
|
-
}
|
|
998
|
-
webpackBundle.m[resolvedId] = (module) => {
|
|
999
|
-
module.exports = value;
|
|
1000
|
-
};
|
|
1001
|
-
} else {
|
|
1002
|
-
logWarn(
|
|
1003
|
-
"SharedModules",
|
|
1004
|
-
`webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
|
|
1005
|
-
);
|
|
1006
|
-
}
|
|
1007
|
-
}
|
|
1008
|
-
}
|
|
1009
|
-
} else {
|
|
1010
|
-
logWarn(
|
|
1011
|
-
"SharedModules",
|
|
1012
|
-
`No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
|
|
1013
|
-
);
|
|
1014
|
-
logDebug(
|
|
1015
|
-
"SharedModules",
|
|
1016
|
-
`Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
|
|
1017
|
-
);
|
|
1018
|
-
}
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1021
|
-
// src/config/webpack/next-client-pages-loader.ts
|
|
1022
|
-
function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
|
|
1023
|
-
const self = globalThis;
|
|
1024
|
-
const nextCssOriginal = document.querySelector(
|
|
1025
|
-
`[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
|
|
1026
|
-
);
|
|
1027
|
-
if (nextCssOriginal) {
|
|
1028
|
-
nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
|
|
1029
|
-
}
|
|
1030
|
-
const nextCss = document.createElement("noscript");
|
|
1031
|
-
nextCss.id = "__next_css__DO_NOT_USE__";
|
|
1032
|
-
nextCss.setAttribute("data-bundle", bundle);
|
|
1033
|
-
nextCss.setAttribute("data-route", route);
|
|
1034
|
-
const nextCssEnd = document.createElement("noscript");
|
|
1035
|
-
nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
|
|
1036
|
-
nextCssEnd.setAttribute("data-bundle", bundle);
|
|
1037
|
-
nextCssEnd.setAttribute("data-route", route);
|
|
1038
|
-
document.head.appendChild(nextCssEnd);
|
|
1039
|
-
document.head.appendChild(nextCss);
|
|
1040
|
-
const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
|
|
1041
|
-
(key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
|
|
1042
|
-
) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
|
|
1043
|
-
(key) => key.includes("/next/dist/client/page-loader.js")
|
|
1044
|
-
) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
|
|
1045
|
-
(key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
|
|
1046
|
-
) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
|
|
1047
|
-
(key) => key.includes("/next/dist/client/page-loader.js")
|
|
1048
|
-
) ?? ""] ?? -1;
|
|
1049
|
-
const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
|
|
1050
|
-
(key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
|
|
1051
|
-
) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
|
|
1052
|
-
(key) => key.includes("/next/dist/client/page-loader.js")
|
|
1053
|
-
) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
|
|
1054
|
-
(key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
|
|
1055
|
-
) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
|
|
1056
|
-
(key) => key.includes("/next/dist/client/page-loader.js")
|
|
1057
|
-
) ?? ""] ?? -1;
|
|
1058
|
-
if (!(componentLoaderChunk && appLoaderChunk)) {
|
|
1059
|
-
throw new RemoteComponentsError(
|
|
1060
|
-
`Next.js client pages loader not found in bundle "${bundle}".`
|
|
1061
|
-
);
|
|
1062
|
-
}
|
|
1063
|
-
const __NEXT_P_ORIGINAL = self.__NEXT_P;
|
|
1064
|
-
const selfOriginal = self;
|
|
1065
|
-
delete selfOriginal.__NEXT_P;
|
|
1066
|
-
self.__remote_webpack_require__?.[bundle]?.(
|
|
1067
|
-
self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
|
|
1068
|
-
);
|
|
1069
|
-
if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
|
|
1070
|
-
self.__remote_webpack_require__?.[bundle]?.(
|
|
1071
|
-
self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
|
|
1072
|
-
);
|
|
1073
|
-
}
|
|
1074
|
-
if (self.__NEXT_P) {
|
|
1075
|
-
const [, componentLoader] = self.__NEXT_P[0] ?? [
|
|
1076
|
-
void 0,
|
|
1077
|
-
() => ({ default: null })
|
|
1078
|
-
];
|
|
1079
|
-
const [, appLoader] = self.__NEXT_P[2] ?? [
|
|
1080
|
-
void 0,
|
|
1081
|
-
() => ({
|
|
1082
|
-
default: null
|
|
1083
|
-
})
|
|
1084
|
-
];
|
|
1085
|
-
const { default: Component } = componentLoader();
|
|
1086
|
-
const { default: App } = appLoader();
|
|
1087
|
-
const cssCache = getNamespace().cssCache;
|
|
1088
|
-
if (!cssCache[bundle]) {
|
|
1089
|
-
const cssRE = /\.s?css$/;
|
|
1090
|
-
Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
|
|
1091
|
-
self.__remote_webpack_require__?.[bundle]?.(id);
|
|
1092
|
-
});
|
|
1093
|
-
Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
|
|
1094
|
-
const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
|
|
1095
|
-
if (id) {
|
|
1096
|
-
self.__remote_webpack_require__?.[bundle]?.(id);
|
|
1097
|
-
}
|
|
1098
|
-
});
|
|
1099
|
-
const elements = [];
|
|
1100
|
-
let node = nextCss.previousSibling;
|
|
1101
|
-
while (node && node !== nextCssEnd) {
|
|
1102
|
-
elements.push(node);
|
|
1103
|
-
node.remove();
|
|
1104
|
-
node = nextCss.previousSibling;
|
|
1105
|
-
}
|
|
1106
|
-
cssCache[bundle] = elements;
|
|
1107
|
-
}
|
|
1108
|
-
if (styleContainer) {
|
|
1109
|
-
const elements = cssCache[bundle];
|
|
1110
|
-
elements.forEach((el) => {
|
|
1111
|
-
styleContainer.appendChild(el.cloneNode(true));
|
|
1112
|
-
});
|
|
1113
|
-
} else {
|
|
1114
|
-
const elements = cssCache[bundle];
|
|
1115
|
-
elements.forEach((el) => {
|
|
1116
|
-
document.head.appendChild(el);
|
|
1117
|
-
});
|
|
1118
|
-
}
|
|
1119
|
-
delete self.__NEXT_P;
|
|
1120
|
-
self.__NEXT_P = __NEXT_P_ORIGINAL;
|
|
1121
|
-
if (nextCssOriginal) {
|
|
1122
|
-
nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
|
|
1123
|
-
}
|
|
1124
|
-
nextCss.remove();
|
|
1125
|
-
nextCssEnd.remove();
|
|
1126
|
-
return { Component, App };
|
|
1127
|
-
}
|
|
1128
|
-
return { Component: null, App: null };
|
|
1129
|
-
}
|
|
1130
|
-
|
|
1131
|
-
// src/runtime/rsc.ts
|
|
1132
|
-
import { ReadableStream } from "web-streams-polyfill";
|
|
1133
|
-
function fixPayload(payload) {
|
|
1134
|
-
if (Array.isArray(payload)) {
|
|
1135
|
-
if (payload[0] === "$") {
|
|
1136
|
-
fixPayload(payload[3]);
|
|
1137
|
-
if (payload.length === 4) {
|
|
1138
|
-
payload.push(null, null, 1);
|
|
1139
|
-
}
|
|
1140
|
-
} else {
|
|
1141
|
-
for (const item of payload) {
|
|
1142
|
-
fixPayload(item);
|
|
1143
|
-
}
|
|
1144
|
-
}
|
|
1145
|
-
} else if (typeof payload === "object" && payload !== null) {
|
|
1146
|
-
for (const key in payload) {
|
|
1147
|
-
fixPayload(payload[key]);
|
|
1148
|
-
}
|
|
1149
|
-
}
|
|
1150
|
-
}
|
|
1151
|
-
function buildRSCChunks(rscName, data) {
|
|
1152
|
-
const chunks = [];
|
|
1153
|
-
for (const chunk of data) {
|
|
1154
|
-
for (const line of chunk.split("\n")) {
|
|
1155
|
-
const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
|
|
1156
|
-
if (match?.groups?.rsc) {
|
|
1157
|
-
chunks.push(JSON.parse(`"${match.groups.rsc}"`));
|
|
1158
|
-
}
|
|
1159
|
-
}
|
|
1160
|
-
}
|
|
1161
|
-
return chunks;
|
|
1162
|
-
}
|
|
1163
|
-
function createRSCStream(rscName, data) {
|
|
1164
|
-
return new ReadableStream({
|
|
1165
|
-
type: "bytes",
|
|
1166
|
-
start(controller) {
|
|
1167
|
-
const encoder = new TextEncoder();
|
|
1168
|
-
const self = globalThis;
|
|
1169
|
-
if (data.length > 0) {
|
|
1170
|
-
const parsed = buildRSCChunks(rscName, data);
|
|
1171
|
-
if (parsed.length > 0) {
|
|
1172
|
-
self[rscName] = self[rscName] ?? [];
|
|
1173
|
-
self[rscName].push(...parsed);
|
|
1174
|
-
}
|
|
1175
|
-
}
|
|
1176
|
-
const allChunks = (self[rscName] ?? [`0:[null]
|
|
1177
|
-
`]).join("");
|
|
1178
|
-
self[rscName] = null;
|
|
1179
|
-
allChunks.split("\n").forEach((chunk) => {
|
|
1180
|
-
if (chunk.length > 0) {
|
|
1181
|
-
const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
|
|
1182
|
-
chunk
|
|
1183
|
-
)?.groups ?? {};
|
|
1184
|
-
if (payload) {
|
|
1185
|
-
const jsonPayload = JSON.parse(payload);
|
|
1186
|
-
fixPayload(jsonPayload);
|
|
1187
|
-
const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
|
|
1188
|
-
controller.enqueue(encoder.encode(`${reconstruct}
|
|
1189
|
-
`));
|
|
1190
|
-
} else {
|
|
1191
|
-
controller.enqueue(encoder.encode(`${chunk}
|
|
1192
|
-
`));
|
|
1193
|
-
}
|
|
1194
|
-
} else {
|
|
1195
|
-
controller.enqueue(encoder.encode(`${chunk}
|
|
1196
|
-
`));
|
|
1197
|
-
}
|
|
1198
|
-
});
|
|
1199
|
-
controller.close();
|
|
1200
|
-
}
|
|
1201
|
-
});
|
|
1202
|
-
}
|
|
1203
|
-
|
|
1204
|
-
// src/runtime/rsc-imports.ts
|
|
1205
|
-
async function importRSCClientBrowser() {
|
|
1206
|
-
try {
|
|
1207
|
-
return await import("next/dist/compiled/react-server-dom-webpack/client.browser");
|
|
1208
|
-
} catch {
|
|
1209
|
-
const mod = await import("react-server-dom-webpack/client.browser");
|
|
1210
|
-
return mod.default ?? mod;
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
// src/runtime/turbopack/patterns.ts
|
|
1215
|
-
var MODULE_ID_PATTERN = '"[^"]+"|[0-9]+';
|
|
1216
|
-
function stripQuotes(value) {
|
|
1217
|
-
if (value.startsWith('"') && value.endsWith('"')) {
|
|
1218
|
-
return value.slice(1, -1);
|
|
1219
|
-
}
|
|
1220
|
-
return value;
|
|
1221
|
-
}
|
|
1222
|
-
function extractGroup(re, input, group) {
|
|
1223
|
-
const raw = re.exec(input)?.groups?.[group];
|
|
1224
|
-
return raw ? stripQuotes(raw) : void 0;
|
|
1225
|
-
}
|
|
1226
|
-
var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
|
|
1227
|
-
var REMOTE_SHARED_ASSIGNMENT_RE = new RegExp(
|
|
1228
|
-
`\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
|
|
1229
|
-
);
|
|
1230
|
-
var ASYNC_MODULE_LOADER_RE = new RegExp(
|
|
1231
|
-
`(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
|
|
1232
|
-
);
|
|
1233
|
-
var ASYNC_MODULE_CALLBACK_RE = new RegExp(
|
|
1234
|
-
`(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
|
|
1235
|
-
);
|
|
1236
|
-
var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
|
|
1237
|
-
|
|
1238
|
-
// src/runtime/turbopack/chunk-loader.ts
|
|
1239
|
-
function loadChunkWithScope(scope, chunkId) {
|
|
1240
|
-
logDebug(
|
|
1241
|
-
"ChunkLoader",
|
|
1242
|
-
`loadChunkWithScope: "${chunkId}" (scope: "${scope.scopedName}")`
|
|
1243
|
-
);
|
|
1244
|
-
const self = globalThis;
|
|
1245
|
-
const ns = getNamespace();
|
|
1246
|
-
const { bundle, path, prefix } = parseRemoteId(chunkId);
|
|
1247
|
-
const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : scope.runtime;
|
|
1248
|
-
if (remoteRuntime === RUNTIME_WEBPACK) {
|
|
1249
|
-
return Promise.resolve(void 0);
|
|
1250
|
-
}
|
|
1251
|
-
const rawPath = path ? collapseDoubleSlashes(`${prefix}${path}`) : "/";
|
|
1252
|
-
const url = new URL(rawPath, scope.url).href;
|
|
1253
|
-
if (url.endsWith(".css")) {
|
|
1254
|
-
return;
|
|
1255
|
-
}
|
|
1256
|
-
if (ns.chunkCache[url]) {
|
|
1257
|
-
logDebug("ChunkLoader", `Cache hit for "${chunkId}" (url="${url}")`);
|
|
1258
|
-
return ns.chunkCache[url];
|
|
1259
|
-
}
|
|
1260
|
-
const resolvedUrl = scope.resolveClientUrl?.(url) ?? url;
|
|
1261
|
-
if (resolvedUrl !== url) {
|
|
1262
|
-
logDebug("ChunkLoader", `Proxied chunk URL: "${url}" \u2192 "${resolvedUrl}"`);
|
|
1263
|
-
}
|
|
1264
|
-
ns.chunkCache[url] = new Promise((resolve, reject) => {
|
|
1265
|
-
fetch(resolvedUrl).then((res) => res.text()).then((code) => {
|
|
1266
|
-
const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
|
|
1267
|
-
if (hasTurbopack) {
|
|
1268
|
-
return handleTurbopackChunk(code, scope, url);
|
|
1269
|
-
}
|
|
1270
|
-
}).then(resolve).catch((error) => {
|
|
1271
|
-
const isProxied = isProxiedUrl(resolvedUrl);
|
|
1272
|
-
if (isProxied) {
|
|
1273
|
-
reject(failedProxiedAssetError("chunk", url, resolvedUrl));
|
|
1274
|
-
} else {
|
|
1275
|
-
warnCrossOriginFetchError("ChunkLoader", url);
|
|
1276
|
-
reject(error);
|
|
1277
|
-
}
|
|
1278
|
-
});
|
|
1279
|
-
});
|
|
1280
|
-
return ns.chunkCache[url];
|
|
1281
|
-
}
|
|
1282
|
-
function createChunkDispatcher() {
|
|
1283
|
-
return function __chunk_dispatcher__(chunkId, scriptBundle) {
|
|
1284
|
-
logDebug("ChunkDispatcher", `Dispatching chunk: "${chunkId}"`);
|
|
1285
|
-
const { bundle } = parseRemoteId(chunkId);
|
|
1286
|
-
const bundleName = bundle || scriptBundle || "default";
|
|
1287
|
-
const scope = getScope(bundleName);
|
|
1288
|
-
logDebug(
|
|
1289
|
-
"ChunkDispatcher",
|
|
1290
|
-
`Scope resolution: bundle="${bundleName}", scope=${scope?.scopedName ?? "null"}`
|
|
1291
|
-
);
|
|
1292
|
-
if (!scope) {
|
|
1293
|
-
logWarn("ChunkDispatcher", `No scope found for bundle "${bundleName}"`);
|
|
1294
|
-
return Promise.resolve(void 0);
|
|
1295
|
-
}
|
|
1296
|
-
return loadChunkWithScope(scope, chunkId);
|
|
1297
|
-
};
|
|
1298
|
-
}
|
|
1299
|
-
async function handleTurbopackChunk(code, scope, url) {
|
|
1300
|
-
if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
|
|
1301
|
-
const preloadLinks = document.querySelectorAll(
|
|
1302
|
-
`link[rel="preload"][href="${new URL(url).pathname}"]`
|
|
1303
|
-
);
|
|
1304
|
-
preloadLinks.forEach((preloadLink) => preloadLink.remove());
|
|
1305
|
-
return;
|
|
1306
|
-
}
|
|
1307
|
-
const self = globalThis;
|
|
1308
|
-
const { globalKey } = scope;
|
|
1309
|
-
const transformedCode = code.replace(
|
|
1310
|
-
/globalThis\[\s*["']TURBOPACK["']\s*\]/g,
|
|
1311
|
-
`globalThis["TURBOPACK_${globalKey}"]`
|
|
1312
|
-
).replace(
|
|
1313
|
-
/self\[\s*["']TURBOPACK["']\s*\]/g,
|
|
1314
|
-
`self["TURBOPACK_${globalKey}"]`
|
|
1315
|
-
).replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${globalKey}`).replace(/self\.TURBOPACK(?!_)/g, `self.TURBOPACK_${globalKey}`).replace(
|
|
1316
|
-
/TURBOPACK_WORKER_LOCATION/g,
|
|
1317
|
-
`TURBOPACK_WORKER_LOCATION_${globalKey}`
|
|
1318
|
-
).replace(
|
|
1319
|
-
/TURBOPACK_NEXT_CHUNK_URLS/g,
|
|
1320
|
-
`TURBOPACK_NEXT_CHUNK_URLS_${globalKey}`
|
|
1321
|
-
).replace(
|
|
1322
|
-
/TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
|
|
1323
|
-
`TURBOPACK_CHUNK_UPDATE_LISTENERS_${globalKey}`
|
|
1324
|
-
).replace(/__next_require__/g, `__${globalKey}_next_require__`).replace(
|
|
1325
|
-
/\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
|
|
1326
|
-
`//# sourceMappingURL=${new URL(".", new URL(url, scope.url)).href}$1$2.js.map`
|
|
1327
|
-
);
|
|
1328
|
-
if (!self[`TURBOPACK_${globalKey}`]) {
|
|
1329
|
-
const wrapPush = (target) => {
|
|
1330
|
-
const originalPush = target.push;
|
|
1331
|
-
if (typeof originalPush !== "function")
|
|
1332
|
-
return target;
|
|
1333
|
-
target.push = (...items) => {
|
|
1334
|
-
for (const item of items) {
|
|
1335
|
-
if (Array.isArray(item)) {
|
|
1336
|
-
for (const entry of item) {
|
|
1337
|
-
scope.turbopackModules.push(entry);
|
|
1338
|
-
}
|
|
1339
|
-
} else {
|
|
1340
|
-
scope.turbopackModules.push(item);
|
|
1341
|
-
}
|
|
1342
|
-
}
|
|
1343
|
-
return originalPush.apply(target, items);
|
|
1344
|
-
};
|
|
1345
|
-
return target;
|
|
1346
|
-
};
|
|
1347
|
-
const globalProp = `TURBOPACK_${globalKey}`;
|
|
1348
|
-
let currentValue = wrapPush([]);
|
|
1349
|
-
Object.defineProperty(self, globalProp, {
|
|
1350
|
-
get() {
|
|
1351
|
-
return currentValue;
|
|
1352
|
-
},
|
|
1353
|
-
set(newValue) {
|
|
1354
|
-
if (newValue && typeof newValue === "object") {
|
|
1355
|
-
wrapPush(newValue);
|
|
1356
|
-
}
|
|
1357
|
-
currentValue = newValue;
|
|
1358
|
-
},
|
|
1359
|
-
configurable: true,
|
|
1360
|
-
enumerable: true
|
|
1361
|
-
});
|
|
1362
|
-
}
|
|
1363
|
-
await new Promise((scriptResolve, scriptReject) => {
|
|
1364
|
-
const blob = new Blob([transformedCode], {
|
|
1365
|
-
type: "application/javascript; charset=UTF-8"
|
|
1366
|
-
});
|
|
1367
|
-
const scriptUrl = URL.createObjectURL(blob);
|
|
1368
|
-
const script = document.createElement("script");
|
|
1369
|
-
script.setAttribute("data-turbopack-src", url);
|
|
1370
|
-
script.src = scriptUrl;
|
|
1371
|
-
script.async = true;
|
|
1372
|
-
script.onload = () => {
|
|
1373
|
-
URL.revokeObjectURL(scriptUrl);
|
|
1374
|
-
scriptResolve(void 0);
|
|
1375
|
-
script.remove();
|
|
1376
|
-
};
|
|
1377
|
-
script.onerror = () => {
|
|
1378
|
-
URL.revokeObjectURL(scriptUrl);
|
|
1379
|
-
scriptReject(
|
|
1380
|
-
new RemoteComponentsError(
|
|
1381
|
-
`Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
|
|
1382
|
-
)
|
|
1383
|
-
);
|
|
1384
|
-
script.remove();
|
|
1385
|
-
};
|
|
1386
|
-
document.head.appendChild(script);
|
|
1387
|
-
});
|
|
1388
|
-
const chunkLists = self[`TURBOPACK_${globalKey}_CHUNK_LISTS`];
|
|
1389
|
-
const loadChunkPromises = [];
|
|
1390
|
-
while (chunkLists?.length) {
|
|
1391
|
-
const { chunks } = chunkLists.shift() ?? { chunks: [] };
|
|
1392
|
-
if (chunks.length > 0) {
|
|
1393
|
-
for (const id of chunks) {
|
|
1394
|
-
const baseUrl = url.slice(0, url.indexOf("/_next"));
|
|
1395
|
-
const chunkLoadResult = loadChunkWithScope(
|
|
1396
|
-
scope,
|
|
1397
|
-
formatRemoteId(scope, `${baseUrl}/_next/${id}`)
|
|
1398
|
-
);
|
|
1399
|
-
if (chunkLoadResult) {
|
|
1400
|
-
loadChunkPromises.push(chunkLoadResult);
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1403
|
-
}
|
|
1404
|
-
}
|
|
1405
|
-
if (loadChunkPromises.length > 0) {
|
|
1406
|
-
await Promise.all(loadChunkPromises);
|
|
1407
|
-
}
|
|
1408
|
-
}
|
|
1409
|
-
|
|
1410
|
-
// src/runtime/turbopack/shared-modules.ts
|
|
1411
|
-
var DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
|
|
1412
|
-
function getTurbopackModules(scope) {
|
|
1413
|
-
if (scope.turbopackModules.length > 0) {
|
|
1414
|
-
return scope.turbopackModules;
|
|
1415
|
-
}
|
|
1416
|
-
const self = globalThis;
|
|
1417
|
-
const raw = self[`TURBOPACK_${scope.globalKey}`];
|
|
1418
|
-
if (!raw)
|
|
1419
|
-
return void 0;
|
|
1420
|
-
if (Array.isArray(raw)) {
|
|
1421
|
-
return raw.flat();
|
|
1422
|
-
}
|
|
1423
|
-
return Object.entries(raw).flat();
|
|
1424
|
-
}
|
|
1425
|
-
async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}) {
|
|
1426
|
-
const allModules = getTurbopackModules(scope);
|
|
1427
|
-
logDebug(
|
|
1428
|
-
"SharedModules",
|
|
1429
|
-
`initializeSharedModules: scope="${scope.scopedName}", allModules=${allModules ? allModules.length : "null"}, hostShared=[${Object.keys(hostShared).join(", ")}], remoteShared=${JSON.stringify(remoteShared)}`
|
|
1430
|
-
);
|
|
1431
|
-
let sharedModuleInitializer = null;
|
|
1432
|
-
if (allModules) {
|
|
1433
|
-
const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
|
|
1434
|
-
if (typeof idOrFunc !== "function") {
|
|
1435
|
-
return false;
|
|
1436
|
-
}
|
|
1437
|
-
const funcCode = idOrFunc.toString();
|
|
1438
|
-
return REMOTE_SHARED_MARKER_RE.test(funcCode);
|
|
1439
|
-
});
|
|
1440
|
-
if (sharedModuleInitializerIndex > 0) {
|
|
1441
|
-
const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
|
|
1442
|
-
const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
|
|
1443
|
-
const sharedModuleId = extractGroup(
|
|
1444
|
-
REMOTE_SHARED_ASSIGNMENT_RE,
|
|
1445
|
-
sharedModuleInitializerCode,
|
|
1446
|
-
"sharedModuleId"
|
|
1447
|
-
);
|
|
1448
|
-
if (sharedModuleId) {
|
|
1449
|
-
const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
|
|
1450
|
-
scope,
|
|
1451
|
-
sharedModuleId,
|
|
1452
|
-
formatRemoteId(scope, String(sharedModuleInitializerId))
|
|
1453
|
-
);
|
|
1454
|
-
sharedModuleInitializer = sharedModuleInitializerInstance;
|
|
1455
|
-
}
|
|
1456
|
-
}
|
|
1457
|
-
if (sharedModuleInitializer) {
|
|
1458
|
-
const { shared: shared2 } = await sharedModuleInitializer;
|
|
1459
|
-
const sharedModuleIds = extractSharedModuleIds(shared2, scope);
|
|
1460
|
-
logDebug(
|
|
1461
|
-
"SharedModules",
|
|
1462
|
-
`Resolved shared modules for scope="${scope.scopedName}": ${JSON.stringify(sharedModuleIds)}`
|
|
1463
|
-
);
|
|
1464
|
-
return Promise.all(
|
|
1465
|
-
Object.entries(sharedModuleIds).map(async ([id, module]) => {
|
|
1466
|
-
if (hostShared[module]) {
|
|
1467
|
-
scope.sharedModules[id] = await hostShared[module](scope.name);
|
|
1468
|
-
} else {
|
|
1469
|
-
logError(
|
|
1470
|
-
"SharedModules",
|
|
1471
|
-
`Host shared module "${module}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
|
|
1472
|
-
);
|
|
1473
|
-
}
|
|
1474
|
-
})
|
|
1475
|
-
);
|
|
1476
|
-
}
|
|
1477
|
-
logWarn(
|
|
1478
|
-
"SharedModules",
|
|
1479
|
-
`No shared module initializer found in bundle for scope="${scope.scopedName}" \u2014 falling back to remoteShared mapping`
|
|
1480
|
-
);
|
|
1481
|
-
} else {
|
|
1482
|
-
logWarn(
|
|
1483
|
-
"SharedModules",
|
|
1484
|
-
`No TURBOPACK modules found for scope="${scope.scopedName}" (TURBOPACK_${scope.globalKey} is empty)`
|
|
1485
|
-
);
|
|
1486
|
-
}
|
|
1487
|
-
return Promise.all(
|
|
1488
|
-
Object.entries(remoteShared).map(async ([id, module]) => {
|
|
1489
|
-
if (hostShared[module]) {
|
|
1490
|
-
const normalizedId = id.replace("[app-ssr]", "[app-client]");
|
|
1491
|
-
scope.sharedModules[normalizedId] = await hostShared[module](
|
|
1492
|
-
scope.name
|
|
1493
|
-
);
|
|
1494
|
-
} else {
|
|
1495
|
-
logError(
|
|
1496
|
-
"SharedModules",
|
|
1497
|
-
`Shared module "${module}" not found for "${scope.name}". ${DEDUPLICATION_WARNING}`
|
|
1498
|
-
);
|
|
1499
|
-
}
|
|
1500
|
-
})
|
|
1501
|
-
);
|
|
1502
|
-
}
|
|
1503
|
-
function extractSharedModuleIds(shared2, scope) {
|
|
1504
|
-
return Object.entries(shared2).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
|
|
1505
|
-
const asyncSharedModuleId = extractGroup(
|
|
1506
|
-
ASYNC_MODULE_LOADER_RE,
|
|
1507
|
-
value.toString(),
|
|
1508
|
-
"asyncSharedModuleId"
|
|
1509
|
-
);
|
|
1510
|
-
if (asyncSharedModuleId) {
|
|
1511
|
-
const asyncSharedModule = findModuleInit(
|
|
1512
|
-
getTurbopackModules(scope),
|
|
1513
|
-
asyncSharedModuleId
|
|
1514
|
-
);
|
|
1515
|
-
if (asyncSharedModule) {
|
|
1516
|
-
const sharedModuleId = extractGroup(
|
|
1517
|
-
ASYNC_MODULE_CALLBACK_RE,
|
|
1518
|
-
asyncSharedModule.toString(),
|
|
1519
|
-
"sharedModuleId"
|
|
1520
|
-
);
|
|
1521
|
-
acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
|
|
1522
|
-
"__remote_shared_module_",
|
|
1523
|
-
""
|
|
1524
|
-
);
|
|
1525
|
-
}
|
|
1526
|
-
}
|
|
1527
|
-
return acc;
|
|
1528
|
-
}, {});
|
|
1529
|
-
}
|
|
1530
|
-
function getSharedModule(scope, id) {
|
|
1531
|
-
const idStr = String(id);
|
|
1532
|
-
if (scope.sharedModules[idStr] !== void 0) {
|
|
1533
|
-
return scope.sharedModules[idStr];
|
|
1534
|
-
}
|
|
1535
|
-
for (const [key, value] of Object.entries(scope.sharedModules)) {
|
|
1536
|
-
if (typeof value !== "undefined" && idStr !== key && idStr.endsWith(key)) {
|
|
1537
|
-
return value;
|
|
1538
|
-
}
|
|
1539
|
-
}
|
|
1540
|
-
return null;
|
|
1541
|
-
}
|
|
1542
|
-
|
|
1543
|
-
// src/runtime/turbopack/module.ts
|
|
1544
|
-
function requireModule(scope, moduleId, fullId) {
|
|
1545
|
-
const idStr = String(moduleId);
|
|
1546
|
-
if (scope.moduleCache[idStr])
|
|
1547
|
-
return scope.moduleCache[idStr];
|
|
1548
|
-
const sharedModule = getSharedModule(scope, moduleId);
|
|
1549
|
-
if (sharedModule)
|
|
1550
|
-
return sharedModule;
|
|
1551
|
-
return handleTurbopackModule(
|
|
1552
|
-
scope,
|
|
1553
|
-
idStr,
|
|
1554
|
-
fullId ?? formatRemoteId(scope, idStr)
|
|
1555
|
-
);
|
|
1556
|
-
}
|
|
1557
|
-
function handleTurbopackModule(scope, moduleId, id) {
|
|
1558
|
-
if (scope.moduleCache[moduleId]) {
|
|
1559
|
-
return scope.moduleCache[moduleId];
|
|
1560
|
-
}
|
|
1561
|
-
const modules = getTurbopackModules(scope);
|
|
1562
|
-
if (!modules) {
|
|
1563
|
-
logError(
|
|
1564
|
-
"TurbopackModule",
|
|
1565
|
-
`TURBOPACK_${scope.globalKey} is undefined (scope: "${scope.scopedName}")`
|
|
1566
|
-
);
|
|
1567
|
-
}
|
|
1568
|
-
const moduleInit = findModuleInit(modules, moduleId);
|
|
1569
|
-
const exports = {};
|
|
1570
|
-
const moduleExports = { exports };
|
|
1571
|
-
if (typeof moduleInit !== "function") {
|
|
1572
|
-
throw new Error(
|
|
1573
|
-
`Module ${id} not found in bundle ${scope.name} with id ${moduleId}`
|
|
1574
|
-
);
|
|
1575
|
-
}
|
|
1576
|
-
scope.moduleCache[moduleId] = moduleExports.exports;
|
|
1577
|
-
moduleInit(
|
|
1578
|
-
createTurbopackContext(
|
|
1579
|
-
scope,
|
|
1580
|
-
exports,
|
|
1581
|
-
moduleExports,
|
|
1582
|
-
modules,
|
|
1583
|
-
moduleInit,
|
|
1584
|
-
id
|
|
1585
|
-
),
|
|
1586
|
-
moduleExports,
|
|
1587
|
-
exports
|
|
1588
|
-
);
|
|
1589
|
-
if (scope.moduleCache[moduleId] !== moduleExports.exports) {
|
|
1590
|
-
scope.moduleCache[moduleId] = moduleExports.exports;
|
|
1591
|
-
}
|
|
1592
|
-
return moduleExports.exports;
|
|
1593
|
-
}
|
|
1594
|
-
function findModuleInit(modules, moduleId) {
|
|
1595
|
-
if (!modules || typeof modules !== "object")
|
|
1596
|
-
return;
|
|
1597
|
-
if (!Array.isArray(modules)) {
|
|
1598
|
-
const key = moduleId in modules ? moduleId : Object.keys(modules).find((k) => k.startsWith(moduleId));
|
|
1599
|
-
return key !== void 0 ? modules[key] : void 0;
|
|
1600
|
-
}
|
|
1601
|
-
const flat = modules.flat();
|
|
1602
|
-
let idx = flat.findIndex((e) => String(e) === String(moduleId));
|
|
1603
|
-
if (idx < 0) {
|
|
1604
|
-
idx = flat.findIndex(
|
|
1605
|
-
(e) => typeof e === "string" && e.startsWith(moduleId)
|
|
1606
|
-
);
|
|
1607
|
-
}
|
|
1608
|
-
if (idx >= 0) {
|
|
1609
|
-
return flat.slice(idx + 1).find((e) => typeof e === "function");
|
|
1610
|
-
}
|
|
1611
|
-
for (const entry of flat) {
|
|
1612
|
-
if (!entry || typeof entry !== "object")
|
|
1613
|
-
continue;
|
|
1614
|
-
const obj = entry;
|
|
1615
|
-
if (moduleId in obj)
|
|
1616
|
-
return obj[moduleId];
|
|
1617
|
-
const prefixKey = Object.keys(obj).find((k) => k.startsWith(moduleId));
|
|
1618
|
-
if (prefixKey)
|
|
1619
|
-
return obj[prefixKey];
|
|
1620
|
-
}
|
|
1621
|
-
return void 0;
|
|
1622
|
-
}
|
|
1623
|
-
function createTurbopackContext(scope, exports, moduleExports, modules, moduleInit, id) {
|
|
1624
|
-
const scopedRequire = (moduleId) => requireModule(scope, moduleId, formatRemoteId(scope, String(moduleId)));
|
|
1625
|
-
return {
|
|
1626
|
-
// HMR not implemented for Remote Components
|
|
1627
|
-
k: {
|
|
1628
|
-
register() {
|
|
1629
|
-
},
|
|
1630
|
-
registerExports() {
|
|
1631
|
-
},
|
|
1632
|
-
signature() {
|
|
1633
|
-
return (fn) => fn;
|
|
1634
|
-
}
|
|
1635
|
-
},
|
|
1636
|
-
// ESM exports setup
|
|
1637
|
-
s(bindings, esmId) {
|
|
1638
|
-
let mod = exports;
|
|
1639
|
-
if (typeof esmId === "string" || typeof esmId === "number") {
|
|
1640
|
-
if (!scope.moduleCache[esmId]) {
|
|
1641
|
-
scope.moduleCache[esmId] = {};
|
|
1642
|
-
}
|
|
1643
|
-
mod = scope.moduleCache[esmId];
|
|
1644
|
-
}
|
|
1645
|
-
Object.defineProperty(mod, "__esModule", { value: true });
|
|
1646
|
-
if (Array.isArray(bindings)) {
|
|
1647
|
-
let i = 0;
|
|
1648
|
-
while (i < bindings.length) {
|
|
1649
|
-
const propName = bindings[i++];
|
|
1650
|
-
const tagOrFunc = bindings[i++];
|
|
1651
|
-
if (typeof tagOrFunc === "number") {
|
|
1652
|
-
Object.defineProperty(mod, propName, {
|
|
1653
|
-
value: bindings[i++],
|
|
1654
|
-
enumerable: true,
|
|
1655
|
-
writable: false
|
|
1656
|
-
});
|
|
1657
|
-
} else {
|
|
1658
|
-
const getterFn = tagOrFunc;
|
|
1659
|
-
if (typeof bindings[i] === "function") {
|
|
1660
|
-
const setterFn = bindings[i++];
|
|
1661
|
-
Object.defineProperty(mod, propName, {
|
|
1662
|
-
get: getterFn,
|
|
1663
|
-
set: setterFn,
|
|
1664
|
-
enumerable: true
|
|
1665
|
-
});
|
|
1666
|
-
} else {
|
|
1667
|
-
Object.defineProperty(mod, propName, {
|
|
1668
|
-
get: getterFn,
|
|
1669
|
-
enumerable: true
|
|
1670
|
-
});
|
|
1671
|
-
}
|
|
1672
|
-
}
|
|
1673
|
-
}
|
|
1674
|
-
}
|
|
1675
|
-
},
|
|
1676
|
-
// import — resolves directly via scope, no global dispatch
|
|
1677
|
-
i(importId) {
|
|
1678
|
-
let mod;
|
|
1679
|
-
if (typeof importId === "string") {
|
|
1680
|
-
const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
|
|
1681
|
-
importId
|
|
1682
|
-
)?.groups ?? {};
|
|
1683
|
-
const normalizedId = importId.replace(
|
|
1684
|
-
/\s+<export(?<specifier>.*)>$/,
|
|
1685
|
-
""
|
|
1686
|
-
);
|
|
1687
|
-
mod = scopedRequire(normalizedId);
|
|
1688
|
-
if (mod && exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
|
|
1689
|
-
if (exportSource === "*") {
|
|
1690
|
-
mod[exportName] = mod;
|
|
1691
|
-
} else {
|
|
1692
|
-
mod[exportName] = mod[exportSource];
|
|
1693
|
-
}
|
|
1694
|
-
}
|
|
1695
|
-
} else {
|
|
1696
|
-
mod = scopedRequire(importId);
|
|
1697
|
-
}
|
|
1698
|
-
if (typeof mod !== "object" || mod === null) {
|
|
1699
|
-
mod = { default: mod };
|
|
1700
|
-
} else if (!("default" in mod) && // ES module namespace objects have a null prototype, so calling
|
|
1701
|
-
// mod.toString() directly throws. Use Object.prototype.toString
|
|
1702
|
-
// to safely detect them.
|
|
1703
|
-
Object.prototype.toString.call(mod) !== "[object Module]") {
|
|
1704
|
-
try {
|
|
1705
|
-
mod.default = mod;
|
|
1706
|
-
} catch {
|
|
1707
|
-
}
|
|
1708
|
-
}
|
|
1709
|
-
return mod;
|
|
1710
|
-
},
|
|
1711
|
-
// require — resolves directly via scope
|
|
1712
|
-
r(requireId) {
|
|
1713
|
-
return scopedRequire(requireId);
|
|
1714
|
-
},
|
|
1715
|
-
// value exports
|
|
1716
|
-
v(value) {
|
|
1717
|
-
if (typeof value === "function") {
|
|
1718
|
-
exports.default = value((vid) => scopedRequire(vid));
|
|
1719
|
-
} else {
|
|
1720
|
-
moduleExports.exports = value;
|
|
1721
|
-
}
|
|
1722
|
-
},
|
|
1723
|
-
// async module initializer
|
|
1724
|
-
async a(mod) {
|
|
1725
|
-
let result;
|
|
1726
|
-
await mod(
|
|
1727
|
-
() => {
|
|
1728
|
-
},
|
|
1729
|
-
(value) => result = value
|
|
1730
|
-
);
|
|
1731
|
-
exports.default = result;
|
|
1732
|
-
},
|
|
1733
|
-
// async module loader — resolves directly via scope
|
|
1734
|
-
async A(Aid) {
|
|
1735
|
-
const mod = scopedRequire(Aid);
|
|
1736
|
-
return mod.default((parentId) => scopedRequire(parentId));
|
|
1737
|
-
},
|
|
1738
|
-
// dynamic import tracking — no-op for remote components
|
|
1739
|
-
j() {
|
|
1740
|
-
},
|
|
1741
|
-
// chunk loader — loads directly via scope, no global dispatch
|
|
1742
|
-
l(url) {
|
|
1743
|
-
const flatModules = Array.isArray(modules) ? modules : [];
|
|
1744
|
-
const moduleInitIndex = flatModules.indexOf(moduleInit);
|
|
1745
|
-
if (moduleInitIndex !== -1) {
|
|
1746
|
-
const scriptIndex = flatModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
|
|
1747
|
-
if (scriptIndex !== -1) {
|
|
1748
|
-
const script = flatModules[scriptIndex];
|
|
1749
|
-
const scriptSrc = script.getAttribute("data-turbopack-src") || "";
|
|
1750
|
-
const nextIndex = scriptSrc.indexOf("/_next");
|
|
1751
|
-
const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
|
|
1752
|
-
const chunkUrl = `${baseUrl}/_next/${url}`;
|
|
1753
|
-
return loadChunkWithScope(scope, formatRemoteId(scope, chunkUrl));
|
|
1754
|
-
}
|
|
1755
|
-
}
|
|
1756
|
-
throw new Error(
|
|
1757
|
-
`Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
|
|
1758
|
-
);
|
|
1759
|
-
},
|
|
1760
|
-
// globalThis substitute shared across all modules in this scope
|
|
1761
|
-
g: scope.moduleGlobal,
|
|
1762
|
-
m: moduleExports,
|
|
1763
|
-
e: exports
|
|
1764
|
-
};
|
|
1765
|
-
}
|
|
1766
|
-
|
|
1767
|
-
// src/runtime/turbopack/remote-scope-setup.ts
|
|
1768
|
-
async function setupRemoteScope(runtime, scripts = [], url = new URL(location.href), bundle, resolveClientUrl) {
|
|
1769
|
-
const self = globalThis;
|
|
1770
|
-
const ns = getNamespace();
|
|
1771
|
-
const bundleName = bundle ?? "default";
|
|
1772
|
-
const existingScope = getScope(bundleName);
|
|
1773
|
-
if (existingScope && existingScope.url.origin === url.origin) {
|
|
1774
|
-
logDebug(
|
|
1775
|
-
"WebpackRuntime",
|
|
1776
|
-
`Reusing scope "${existingScope.scopedName}" (turbopackModules=${existingScope.turbopackModules.length})`
|
|
1777
|
-
);
|
|
1778
|
-
existingScope.resolveClientUrl = resolveClientUrl;
|
|
1779
|
-
if (runtime === RUNTIME_TURBOPACK) {
|
|
1780
|
-
await Promise.allSettled(
|
|
1781
|
-
scripts.map(
|
|
1782
|
-
(script) => script.src ? loadChunkWithScope(existingScope, script.src) : Promise.resolve(void 0)
|
|
1783
|
-
)
|
|
1784
|
-
);
|
|
1785
|
-
}
|
|
1786
|
-
return existingScope;
|
|
1787
|
-
}
|
|
1788
|
-
const scope = createScope(bundleName, url, runtime, resolveClientUrl);
|
|
1789
|
-
registerScope(scope);
|
|
1790
|
-
if (runtime === RUNTIME_WEBPACK && self.__remote_webpack_require__?.[bundleName]) {
|
|
1791
|
-
scope.webpackRequire = self.__remote_webpack_require__[bundleName];
|
|
1792
|
-
}
|
|
1793
|
-
ns.bundleUrls[bundleName] = url;
|
|
1794
|
-
if (scope.scopedName !== bundleName) {
|
|
1795
|
-
ns.bundleUrls[scope.scopedName] = url;
|
|
1796
|
-
}
|
|
1797
|
-
self.__webpack_get_script_filename__ = () => null;
|
|
1798
|
-
const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || ns.dispatcherRuntime !== "turbopack";
|
|
1799
|
-
if (willCreateDispatchers) {
|
|
1800
|
-
if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
|
|
1801
|
-
self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
|
|
1802
|
-
self.__original_webpack_require__ = self.__webpack_require__;
|
|
1803
|
-
}
|
|
1804
|
-
self.__webpack_chunk_load__ = createChunkDispatcher();
|
|
1805
|
-
self.__webpack_require__ = createModuleDispatcher(runtime);
|
|
1806
|
-
ns.dispatcherRuntime = runtime;
|
|
1807
|
-
self.__webpack_require_type__ = runtime;
|
|
1808
|
-
if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
|
|
1809
|
-
self.__remote_webpack_require__[bundleName] = self.__webpack_require__;
|
|
1810
|
-
self.__remote_webpack_require__[bundleName].type = "turbopack";
|
|
1811
|
-
}
|
|
1812
|
-
}
|
|
1813
|
-
if (self.__remote_webpack_require__?.[bundleName] && scope.scopedName !== bundleName) {
|
|
1814
|
-
self.__remote_webpack_require__[scope.scopedName] = self.__remote_webpack_require__[bundleName];
|
|
1815
|
-
}
|
|
1816
|
-
if (runtime === RUNTIME_TURBOPACK) {
|
|
1817
|
-
const results = await Promise.allSettled(
|
|
1818
|
-
scripts.map((script) => {
|
|
1819
|
-
if (script.src) {
|
|
1820
|
-
return loadChunkWithScope(scope, script.src);
|
|
1821
|
-
}
|
|
1822
|
-
return Promise.resolve(void 0);
|
|
1823
|
-
})
|
|
1824
|
-
);
|
|
1825
|
-
for (const result of results) {
|
|
1826
|
-
if (result.status === "rejected") {
|
|
1827
|
-
logWarn(
|
|
1828
|
-
"WebpackRuntime",
|
|
1829
|
-
`Initial chunk load failed: ${String(result.reason)}`
|
|
1830
|
-
);
|
|
1831
|
-
}
|
|
1832
|
-
}
|
|
1833
|
-
}
|
|
1834
|
-
return scope;
|
|
1835
|
-
}
|
|
1836
|
-
function createModuleDispatcher(runtime) {
|
|
1837
|
-
return (id) => {
|
|
1838
|
-
const self = globalThis;
|
|
1839
|
-
const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
|
|
1840
|
-
bundle: "default",
|
|
1841
|
-
id
|
|
1842
|
-
};
|
|
1843
|
-
const bundleName = bundle ?? "default";
|
|
1844
|
-
const remoteRuntime = self.__remote_webpack_require__?.[bundleName] ? self.__remote_webpack_require__[bundleName]?.type || "webpack" : runtime;
|
|
1845
|
-
logDebug(
|
|
1846
|
-
"ModuleDispatcher",
|
|
1847
|
-
`Resolving "${id}" (bundle: "${bundleName}", runtime: "${remoteRuntime}")`
|
|
1848
|
-
);
|
|
1849
|
-
try {
|
|
1850
|
-
if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
|
|
1851
|
-
const scope2 = getScope(bundle);
|
|
1852
|
-
if (scope2?.webpackRequire)
|
|
1853
|
-
return scope2.webpackRequire(moduleId);
|
|
1854
|
-
return self.__remote_webpack_require__?.[bundle]?.(moduleId);
|
|
1855
|
-
}
|
|
1856
|
-
const scope = getScope(bundleName);
|
|
1857
|
-
if (scope) {
|
|
1858
|
-
return requireModule(scope, moduleId ?? id, id);
|
|
1859
|
-
}
|
|
1860
|
-
throw new Error(
|
|
1861
|
-
`Module "${id}" not found \u2014 no scope for bundle "${bundleName}".`
|
|
1862
|
-
);
|
|
1863
|
-
} catch (requireError) {
|
|
1864
|
-
logWarn(
|
|
1865
|
-
"ModuleDispatcher",
|
|
1866
|
-
`Module require failed: ${String(requireError)}`
|
|
1867
|
-
);
|
|
1868
|
-
if (typeof self.__original_webpack_require__ !== "function") {
|
|
1869
|
-
throw new RemoteComponentsError(
|
|
1870
|
-
`Module "${id}" not found in remote component bundle "${bundleName}".`,
|
|
1871
|
-
{
|
|
1872
|
-
cause: requireError instanceof Error ? requireError : void 0
|
|
1873
|
-
}
|
|
1874
|
-
);
|
|
1875
|
-
}
|
|
1876
|
-
try {
|
|
1877
|
-
logDebug(
|
|
1878
|
-
"ModuleDispatcher",
|
|
1879
|
-
"Falling back to original webpack require"
|
|
1880
|
-
);
|
|
1881
|
-
return self.__original_webpack_require__(id);
|
|
1882
|
-
} catch (originalError) {
|
|
1883
|
-
throw new RemoteComponentsError(
|
|
1884
|
-
`Module "${id}" not found in remote component bundle "${bundleName}".`,
|
|
1885
|
-
{ cause: originalError instanceof Error ? originalError : void 0 }
|
|
1886
|
-
);
|
|
1887
|
-
}
|
|
1888
|
-
}
|
|
1889
|
-
};
|
|
1890
|
-
}
|
|
1891
|
-
|
|
1892
|
-
// src/runtime/loaders/script-loader.ts
|
|
1893
|
-
async function loadScripts(scripts, resolveClientUrl) {
|
|
1894
|
-
await Promise.all(
|
|
1895
|
-
scripts.map((script) => {
|
|
1896
|
-
return new Promise((resolve, reject) => {
|
|
1897
|
-
const newSrc = new URL(
|
|
1898
|
-
// remove the remote component bundle name identifier from the script src
|
|
1899
|
-
script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
|
|
1900
|
-
location.origin
|
|
1901
|
-
).href;
|
|
1902
|
-
const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
|
|
1903
|
-
const alreadyLoaded = Array.from(
|
|
1904
|
-
document.querySelectorAll("script[src]")
|
|
1905
|
-
).some((s) => s.src === resolvedSrc);
|
|
1906
|
-
if (alreadyLoaded) {
|
|
1907
|
-
resolve();
|
|
1908
|
-
return;
|
|
1909
|
-
}
|
|
1910
|
-
const newScript = document.createElement("script");
|
|
1911
|
-
newScript.onload = () => resolve();
|
|
1912
|
-
newScript.onerror = () => {
|
|
1913
|
-
const isProxied = isProxiedUrl(resolvedSrc);
|
|
1914
|
-
if (isProxied) {
|
|
1915
|
-
reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
|
|
1916
|
-
} else {
|
|
1917
|
-
warnCrossOriginFetchError("ScriptLoader", newSrc);
|
|
1918
|
-
reject(
|
|
1919
|
-
new RemoteComponentsError(
|
|
1920
|
-
`Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
|
|
1921
|
-
)
|
|
1922
|
-
);
|
|
1923
|
-
}
|
|
1924
|
-
};
|
|
1925
|
-
newScript.src = resolvedSrc;
|
|
1926
|
-
newScript.async = true;
|
|
1927
|
-
document.head.appendChild(newScript);
|
|
1928
|
-
});
|
|
1929
|
-
})
|
|
1930
|
-
);
|
|
1931
|
-
}
|
|
1932
|
-
|
|
1933
|
-
// src/runtime/loaders/component-loader.ts
|
|
1934
|
-
async function loadRemoteComponent({
|
|
1935
|
-
url,
|
|
1936
|
-
name,
|
|
1937
|
-
rscName,
|
|
1938
|
-
bundle,
|
|
1939
|
-
route = "/",
|
|
1940
|
-
runtime = "webpack",
|
|
1941
|
-
data,
|
|
1942
|
-
nextData,
|
|
1943
|
-
scripts = [],
|
|
1944
|
-
shared: shared2 = Promise.resolve({}),
|
|
1945
|
-
remoteShared = {},
|
|
1946
|
-
container,
|
|
1947
|
-
resolveClientUrl
|
|
1948
|
-
}) {
|
|
1949
|
-
try {
|
|
1950
|
-
if (runtime === "webpack") {
|
|
1951
|
-
const self = globalThis;
|
|
1952
|
-
if (!self.__DISABLE_WEBPACK_EXEC__) {
|
|
1953
|
-
self.__DISABLE_WEBPACK_EXEC__ = {};
|
|
1954
|
-
}
|
|
1955
|
-
self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
|
|
1956
|
-
await loadScripts(scripts, resolveClientUrl);
|
|
1957
|
-
}
|
|
1958
|
-
const hostShared = await shared2;
|
|
1959
|
-
logDebug(
|
|
1960
|
-
"ComponentLoader",
|
|
1961
|
-
`loadRemoteComponent: bundle="${bundle}", name="${name}"`
|
|
1962
|
-
);
|
|
1963
|
-
logDebug(
|
|
1964
|
-
"ComponentLoader",
|
|
1965
|
-
`Host shared modules available: ${Object.keys(hostShared)}`
|
|
1966
|
-
);
|
|
1967
|
-
logDebug(
|
|
1968
|
-
"ComponentLoader",
|
|
1969
|
-
`Remote shared modules requested: ${JSON.stringify(remoteShared)}`
|
|
1970
|
-
);
|
|
1971
|
-
const scope = await setupRemoteScope(
|
|
1972
|
-
runtime,
|
|
1973
|
-
scripts,
|
|
1974
|
-
url,
|
|
1975
|
-
bundle,
|
|
1976
|
-
resolveClientUrl
|
|
1977
|
-
);
|
|
1978
|
-
if (runtime === "turbopack") {
|
|
1979
|
-
await initializeSharedModules(
|
|
1980
|
-
scope,
|
|
1981
|
-
buildCoreShared(hostShared),
|
|
1982
|
-
remoteShared
|
|
1983
|
-
);
|
|
1984
|
-
}
|
|
1985
|
-
if (bundle) {
|
|
1986
|
-
const resolve = await buildWebpackResolve(
|
|
1987
|
-
hostShared,
|
|
1988
|
-
remoteShared,
|
|
1989
|
-
bundle,
|
|
1990
|
-
{
|
|
1991
|
-
"/react/index.js": React,
|
|
1992
|
-
"/react/jsx-dev-runtime.js": JSXDevRuntime,
|
|
1993
|
-
"/react/jsx-runtime.js": JSXRuntime,
|
|
1994
|
-
"/react-dom/index.js": ReactDOM,
|
|
1995
|
-
"/react-dom/client.js": ReactDOMClient
|
|
1996
|
-
},
|
|
1997
|
-
"ComponentLoader"
|
|
1998
|
-
);
|
|
1999
|
-
applySharedModules(bundle, resolve);
|
|
2000
|
-
} else {
|
|
2001
|
-
logWarn(
|
|
2002
|
-
"ComponentLoader",
|
|
2003
|
-
"No bundle specified, skipping shared module setup"
|
|
2004
|
-
);
|
|
2005
|
-
}
|
|
2006
|
-
if (data.length > 0) {
|
|
2007
|
-
return await loadRSCComponent(rscName ?? name, data);
|
|
2008
|
-
} else if (nextData) {
|
|
2009
|
-
return loadNextPagesComponent(bundle, route, nextData, name, container);
|
|
2010
|
-
}
|
|
2011
|
-
return loadRSCComponent(rscName ?? name, [`0:[null]
|
|
2012
|
-
`]);
|
|
2013
|
-
} catch (error) {
|
|
2014
|
-
return {
|
|
2015
|
-
component: null,
|
|
2016
|
-
error: new RemoteComponentsError(
|
|
2017
|
-
`Failed to load remote component "${name}".`,
|
|
2018
|
-
{
|
|
2019
|
-
cause: error instanceof Error ? error : new Error(String(error))
|
|
2020
|
-
}
|
|
2021
|
-
)
|
|
2022
|
-
};
|
|
2023
|
-
}
|
|
2024
|
-
}
|
|
2025
|
-
async function loadRSCComponent(rscName, data) {
|
|
2026
|
-
const { createFromReadableStream } = await importRSCClientBrowser();
|
|
2027
|
-
if (typeof createFromReadableStream !== "function") {
|
|
2028
|
-
throw new RemoteComponentsError(
|
|
2029
|
-
'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
|
|
2030
|
-
);
|
|
2031
|
-
}
|
|
2032
|
-
const stream = createRSCStream(rscName, data);
|
|
2033
|
-
const component = createFromReadableStream(stream);
|
|
2034
|
-
return { component };
|
|
2035
|
-
}
|
|
2036
|
-
function loadNextPagesComponent(bundle, route, nextData, name, container) {
|
|
2037
|
-
const { Component, App } = nextClientPagesLoader(bundle, route, container);
|
|
2038
|
-
if (!Component) {
|
|
2039
|
-
throw new RemoteComponentsError(
|
|
2040
|
-
`Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
|
|
2041
|
-
);
|
|
2042
|
-
}
|
|
2043
|
-
const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
|
|
2044
|
-
return { component };
|
|
2045
|
-
}
|
|
2046
|
-
|
|
2047
|
-
// src/runtime/loaders/static-loader.ts
|
|
2048
|
-
async function importViaCallback(absoluteSrc, resolveClientUrl) {
|
|
2049
|
-
const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
|
|
2050
|
-
const fetchUrl = new URL(resolvedUrl, location.href).href;
|
|
2051
|
-
const response = await fetch(fetchUrl);
|
|
2052
|
-
if (!response.ok)
|
|
2053
|
-
throw new Error(`Proxied fetch failed: ${response.status}`);
|
|
2054
|
-
const content = (await response.text()).replace(/import\.meta\.url/g, JSON.stringify(absoluteSrc)).replace(
|
|
2055
|
-
/\b(from|import)\s*(["'])(\.\.?\/[^"']+)\2/g,
|
|
2056
|
-
(_, keyword, quote, relativePath) => {
|
|
2057
|
-
const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;
|
|
2058
|
-
const resolvedImportUrl = new URL(
|
|
2059
|
-
resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
|
|
2060
|
-
location.href
|
|
2061
|
-
).href;
|
|
2062
|
-
return `${keyword} ${quote}${resolvedImportUrl}${quote}`;
|
|
2063
|
-
}
|
|
2064
|
-
);
|
|
2065
|
-
const moduleBlobUrl = URL.createObjectURL(
|
|
2066
|
-
new Blob([content], { type: "text/javascript" })
|
|
2067
|
-
);
|
|
2068
|
-
const wrapperContent = [
|
|
2069
|
-
`import*as m from${JSON.stringify(moduleBlobUrl)};`,
|
|
2070
|
-
`globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,
|
|
2071
|
-
`globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`
|
|
2072
|
-
].join("");
|
|
2073
|
-
const wrapperBlobUrl = URL.createObjectURL(
|
|
2074
|
-
new Blob([wrapperContent], { type: "text/javascript" })
|
|
2075
|
-
);
|
|
2076
|
-
const scriptEl = document.createElement("script");
|
|
2077
|
-
scriptEl.type = "module";
|
|
2078
|
-
scriptEl.src = wrapperBlobUrl;
|
|
2079
|
-
try {
|
|
2080
|
-
await new Promise((resolve, reject) => {
|
|
2081
|
-
scriptEl.onload = () => resolve();
|
|
2082
|
-
scriptEl.onerror = () => reject(new Error(`Failed to load module for ${absoluteSrc}`));
|
|
2083
|
-
document.head.appendChild(scriptEl);
|
|
2084
|
-
});
|
|
2085
|
-
} finally {
|
|
2086
|
-
scriptEl.remove();
|
|
2087
|
-
URL.revokeObjectURL(moduleBlobUrl);
|
|
2088
|
-
URL.revokeObjectURL(wrapperBlobUrl);
|
|
2089
|
-
}
|
|
2090
|
-
const registry = getNamespace().moduleRegistry;
|
|
2091
|
-
const mod = registry[absoluteSrc] ?? {};
|
|
2092
|
-
delete registry[absoluteSrc];
|
|
2093
|
-
return mod;
|
|
2094
|
-
}
|
|
2095
|
-
async function importDirectly(absoluteSrc) {
|
|
2096
|
-
try {
|
|
2097
|
-
return await import(
|
|
2098
|
-
/* @vite-ignore */
|
|
2099
|
-
/* webpackIgnore: true */
|
|
2100
|
-
absoluteSrc
|
|
2101
|
-
);
|
|
2102
|
-
} catch (importError) {
|
|
2103
|
-
if (!absoluteSrc.startsWith("blob:")) {
|
|
2104
|
-
warnCrossOriginFetchError("StaticLoader", absoluteSrc);
|
|
2105
|
-
}
|
|
2106
|
-
throw importError;
|
|
2107
|
-
}
|
|
2108
|
-
}
|
|
2109
|
-
function resolveScriptSrc(script, url) {
|
|
2110
|
-
const rawSrc = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
|
|
2111
|
-
if (!rawSrc && script.textContent) {
|
|
2112
|
-
return URL.createObjectURL(
|
|
2113
|
-
new Blob(
|
|
2114
|
-
[script.textContent.replace(/import\.meta\.url/g, JSON.stringify(url))],
|
|
2115
|
-
{ type: "text/javascript" }
|
|
2116
|
-
)
|
|
2117
|
-
);
|
|
2118
|
-
}
|
|
2119
|
-
return rawSrc;
|
|
2120
|
-
}
|
|
2121
|
-
async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
|
|
2122
|
-
const ns = getNamespace();
|
|
2123
|
-
if (ns.mountFns[url.href]) {
|
|
2124
|
-
ns.mountFns[url.href] = /* @__PURE__ */ new Set();
|
|
2125
|
-
}
|
|
2126
|
-
if (ns.unmountFns[url.href]) {
|
|
2127
|
-
ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
|
|
2128
|
-
}
|
|
2129
|
-
const mountUnmountSets = await Promise.all(
|
|
2130
|
-
scripts.map(async (script) => {
|
|
2131
|
-
try {
|
|
2132
|
-
const src = resolveScriptSrc(script, url);
|
|
2133
|
-
const absoluteSrc = new URL(src, url).href;
|
|
2134
|
-
const mod = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
|
|
2135
|
-
if (src.startsWith("blob:")) {
|
|
2136
|
-
URL.revokeObjectURL(src);
|
|
2137
|
-
}
|
|
2138
|
-
if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
|
|
2139
|
-
if (!ns.mountFns[url.href]) {
|
|
2140
|
-
ns.mountFns[url.href] = /* @__PURE__ */ new Set();
|
|
2141
|
-
}
|
|
2142
|
-
ns.mountFns[url.href]?.add(
|
|
2143
|
-
mod.mount || mod.default?.mount || (() => {
|
|
2144
|
-
})
|
|
2145
|
-
);
|
|
2146
|
-
}
|
|
2147
|
-
if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
|
|
2148
|
-
if (!ns.unmountFns[url.href]) {
|
|
2149
|
-
ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
|
|
2150
|
-
}
|
|
2151
|
-
ns.unmountFns[url.href]?.add(
|
|
2152
|
-
mod.unmount || mod.default?.unmount || (() => {
|
|
2153
|
-
})
|
|
2154
|
-
);
|
|
2155
|
-
}
|
|
2156
|
-
return {
|
|
2157
|
-
mount: mod.mount || mod.default?.mount,
|
|
2158
|
-
unmount: mod.unmount || mod.default?.unmount
|
|
2159
|
-
};
|
|
2160
|
-
} catch (e) {
|
|
2161
|
-
logError(
|
|
2162
|
-
"StaticLoader",
|
|
2163
|
-
`Error loading remote component script from "${script.src || url.href}".`,
|
|
2164
|
-
e
|
|
2165
|
-
);
|
|
2166
|
-
return {
|
|
2167
|
-
mount: void 0,
|
|
2168
|
-
unmount: void 0
|
|
2169
|
-
};
|
|
2170
|
-
}
|
|
2171
|
-
})
|
|
2172
|
-
);
|
|
2173
|
-
return mountUnmountSets.reduce(
|
|
2174
|
-
(acc, { mount, unmount }) => {
|
|
2175
|
-
if (typeof mount === "function") {
|
|
2176
|
-
acc.mount.add(mount);
|
|
2177
|
-
}
|
|
2178
|
-
if (typeof unmount === "function") {
|
|
2179
|
-
acc.unmount.add(unmount);
|
|
2180
|
-
}
|
|
2181
|
-
return acc;
|
|
2182
|
-
},
|
|
2183
|
-
{
|
|
2184
|
-
mount: /* @__PURE__ */ new Set(),
|
|
2185
|
-
unmount: /* @__PURE__ */ new Set()
|
|
2186
|
-
}
|
|
2187
|
-
);
|
|
2188
|
-
}
|
|
2189
|
-
|
|
2190
|
-
// src/host/shared/pipeline.ts
|
|
2191
|
-
function preparePipeline(input) {
|
|
2192
|
-
const parser = new DOMParser();
|
|
2193
|
-
const doc = parser.parseFromString(input.html, "text/html");
|
|
2194
|
-
const parsed = parseRemoteComponentDocument(doc, input.name, input.url);
|
|
2195
|
-
const remoteShared = input.remoteShared ?? parsed.remoteShared;
|
|
2196
|
-
if ("__remote_components_missing_shared__" in remoteShared) {
|
|
2197
|
-
throw new RemoteComponentsError(
|
|
2198
|
-
remoteShared.__remote_components_missing_shared__
|
|
2199
|
-
);
|
|
2200
|
-
}
|
|
2201
|
-
applyOriginToNodes(doc, input.url, input.resolveClientUrl);
|
|
2202
|
-
const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
|
|
2203
|
-
return { doc, parsed, scriptDescriptors };
|
|
2204
|
-
}
|
|
2205
|
-
async function loadPrepared(input) {
|
|
2206
|
-
const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
|
|
2207
|
-
const { doc, parsed, scriptDescriptors } = prepared;
|
|
2208
|
-
if (signal.aborted) {
|
|
2209
|
-
return { status: "aborted" };
|
|
2210
|
-
}
|
|
2211
|
-
const userShared = await input.shared;
|
|
2212
|
-
if (signal.aborted) {
|
|
2213
|
-
return { status: "aborted" };
|
|
2214
|
-
}
|
|
2215
|
-
if (parsed.isRemoteComponent) {
|
|
2216
|
-
return loadStaticPath({
|
|
2217
|
-
parsed,
|
|
2218
|
-
doc,
|
|
2219
|
-
url,
|
|
2220
|
-
resolveClientUrl
|
|
2221
|
-
});
|
|
2222
|
-
}
|
|
2223
|
-
return loadDynamicPath({
|
|
2224
|
-
parsed,
|
|
2225
|
-
doc,
|
|
2226
|
-
url,
|
|
2227
|
-
scriptDescriptors,
|
|
2228
|
-
shared: userShared,
|
|
2229
|
-
resolveClientUrl,
|
|
2230
|
-
container,
|
|
2231
|
-
rscName
|
|
2232
|
-
});
|
|
2233
|
-
}
|
|
2234
|
-
function buildScriptDescriptors(scripts, url) {
|
|
2235
|
-
return scripts.map((script) => {
|
|
2236
|
-
const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
|
|
2237
|
-
const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
|
|
2238
|
-
prefix: void 0,
|
|
2239
|
-
id: scriptSrc
|
|
2240
|
-
};
|
|
2241
|
-
return {
|
|
2242
|
-
src: new URL(collapseDoubleSlashes(`${prefix ?? ""}${path}`), url).href
|
|
2243
|
-
};
|
|
2244
|
-
});
|
|
2245
|
-
}
|
|
2246
|
-
async function loadStaticPath(input) {
|
|
2247
|
-
const { parsed, doc, url, resolveClientUrl } = input;
|
|
2248
|
-
const scripts = Array.from(
|
|
2249
|
-
parsed.component.querySelectorAll("script")
|
|
2250
|
-
);
|
|
2251
|
-
const { mount, unmount } = await loadStaticRemoteComponent(
|
|
2252
|
-
scripts,
|
|
2253
|
-
url,
|
|
2254
|
-
resolveClientUrl
|
|
2255
|
-
);
|
|
2256
|
-
return {
|
|
2257
|
-
status: "static",
|
|
2258
|
-
mount,
|
|
2259
|
-
unmount,
|
|
2260
|
-
metadata: parsed.metadata,
|
|
2261
|
-
parsed,
|
|
2262
|
-
doc
|
|
2263
|
-
};
|
|
2264
|
-
}
|
|
2265
|
-
async function loadDynamicPath(input) {
|
|
2266
|
-
const {
|
|
2267
|
-
parsed,
|
|
2268
|
-
doc,
|
|
2269
|
-
url,
|
|
2270
|
-
scriptDescriptors,
|
|
2271
|
-
shared: shared2,
|
|
2272
|
-
resolveClientUrl,
|
|
2273
|
-
container
|
|
2274
|
-
} = input;
|
|
2275
|
-
const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}` : void 0);
|
|
2276
|
-
const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
|
|
2277
|
-
const result = await loadRemoteComponent({
|
|
2278
|
-
url,
|
|
2279
|
-
name: parsed.name,
|
|
2280
|
-
rscName,
|
|
2281
|
-
bundle: parsed.metadata.bundle,
|
|
2282
|
-
route: parsed.metadata.route,
|
|
2283
|
-
runtime: parsed.metadata.runtime,
|
|
2284
|
-
data: rscData,
|
|
2285
|
-
nextData: parsed.nextData,
|
|
2286
|
-
scripts: scriptDescriptors,
|
|
2287
|
-
shared: buildHostShared(shared2, resolveClientUrl),
|
|
2288
|
-
remoteShared: parsed.remoteShared,
|
|
2289
|
-
container,
|
|
2290
|
-
resolveClientUrl
|
|
2291
|
-
});
|
|
2292
|
-
if (result.error) {
|
|
2293
|
-
return { status: "error", error: result.error };
|
|
2294
|
-
}
|
|
2295
|
-
return {
|
|
2296
|
-
status: "loaded",
|
|
2297
|
-
component: result.component,
|
|
2298
|
-
metadata: parsed.metadata,
|
|
2299
|
-
parsed,
|
|
2300
|
-
doc
|
|
2301
|
-
};
|
|
2302
|
-
}
|
|
2303
|
-
|
|
2304
|
-
// src/host/shared/state.ts
|
|
2305
|
-
function createHostState() {
|
|
2306
|
-
return {
|
|
2307
|
-
stage: "idle",
|
|
2308
|
-
prevSrc: void 0,
|
|
2309
|
-
prevUrl: void 0,
|
|
2310
|
-
prevName: void 0,
|
|
2311
|
-
prevIsRemoteComponent: false,
|
|
2312
|
-
abortController: void 0
|
|
2313
|
-
};
|
|
2314
|
-
}
|
|
2315
|
-
|
|
2316
|
-
// src/host/utils/resolve-name-from-src.ts
|
|
2317
|
-
function resolveNameFromSrc(src, defaultName) {
|
|
2318
|
-
if (!src) {
|
|
2319
|
-
return defaultName;
|
|
2320
|
-
}
|
|
2321
|
-
const hash = typeof src === "string" ? src : src.hash;
|
|
2322
|
-
const hashIndex = hash.indexOf("#");
|
|
2323
|
-
if (hashIndex < 0) {
|
|
2324
|
-
return defaultName;
|
|
2325
|
-
}
|
|
2326
|
-
const name = hash.slice(hashIndex + 1);
|
|
2327
|
-
return name || defaultName;
|
|
2328
|
-
}
|
|
2329
|
-
|
|
2330
|
-
// src/runtime/html/set-attributes-from-props.ts
|
|
2331
|
-
var DOMAttributeNames = {
|
|
2332
|
-
acceptCharset: "accept-charset",
|
|
2333
|
-
className: "class",
|
|
2334
|
-
htmlFor: "for",
|
|
2335
|
-
httpEquiv: "http-equiv",
|
|
2336
|
-
noModule: "noModule"
|
|
2337
|
-
};
|
|
2338
|
-
var ignoreProps = [
|
|
2339
|
-
"onLoad",
|
|
2340
|
-
"onReady",
|
|
2341
|
-
"dangerouslySetInnerHTML",
|
|
2342
|
-
"children",
|
|
2343
|
-
"onError",
|
|
2344
|
-
"strategy",
|
|
2345
|
-
"stylesheets"
|
|
2346
|
-
];
|
|
2347
|
-
function isBooleanScriptAttribute(attr) {
|
|
2348
|
-
return ["async", "defer", "noModule"].includes(attr);
|
|
2349
|
-
}
|
|
2350
|
-
function setAttributesFromProps(el, props) {
|
|
2351
|
-
for (const [p, value] of Object.entries(props)) {
|
|
2352
|
-
if (!Object.hasOwn(props, p))
|
|
2353
|
-
continue;
|
|
2354
|
-
if (ignoreProps.includes(p))
|
|
2355
|
-
continue;
|
|
2356
|
-
if (value === void 0) {
|
|
2357
|
-
continue;
|
|
2358
|
-
}
|
|
2359
|
-
const attr = DOMAttributeNames[p] || p.toLowerCase();
|
|
2360
|
-
if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
|
|
2361
|
-
el[attr] = Boolean(value);
|
|
2362
|
-
} else {
|
|
2363
|
-
el.setAttribute(attr, String(value));
|
|
2364
|
-
}
|
|
2365
|
-
if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
|
|
2366
|
-
el.setAttribute(attr, "");
|
|
2367
|
-
el.removeAttribute(attr);
|
|
2368
|
-
}
|
|
2369
|
-
}
|
|
2370
|
-
}
|
|
2371
|
-
|
|
2372
|
-
// src/host/react/hooks/use-resolve-client-url.ts
|
|
2373
|
-
import { useMemo } from "react";
|
|
2374
|
-
import { useRemoteComponentsContext } from "#internal/host/react/context";
|
|
2375
|
-
function useResolveClientUrl(prop, urlHref) {
|
|
2376
|
-
const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
|
|
2377
|
-
const raw = prop ?? contextValue;
|
|
2378
|
-
return useMemo(() => bindResolveClientUrl(raw, urlHref), [raw, urlHref]);
|
|
2379
|
-
}
|
|
2380
|
-
|
|
2381
|
-
// src/host/react/hooks/use-shadow-root.ts
|
|
2382
|
-
import { useLayoutEffect, useRef, useState } from "react";
|
|
2383
|
-
function useShadowRoot({
|
|
2384
|
-
isolate,
|
|
2385
|
-
mode,
|
|
2386
|
-
keySuffix
|
|
2387
|
-
}) {
|
|
2388
|
-
const shadowRootContainerRef = useRef(null);
|
|
2389
|
-
const [shadowRoot, setShadowRoot] = useState(() => {
|
|
2390
|
-
const shadowRoots = getNamespace().shadowRoots;
|
|
2391
|
-
const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
|
|
2392
|
-
`[data-remote-component-id="shadowroot_${keySuffix}"]`
|
|
2393
|
-
)?.shadowRoot ?? shadowRoots[keySuffix] ?? null : null;
|
|
2394
|
-
shadowRoots[keySuffix] = null;
|
|
2395
|
-
return ssrShadowRoot;
|
|
2396
|
-
});
|
|
2397
|
-
useLayoutEffect(() => {
|
|
2398
|
-
const shadowRoots = getNamespace().shadowRoots;
|
|
2399
|
-
if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
|
|
2400
|
-
let shadowRootElement = null;
|
|
2401
|
-
const element = document.querySelector(
|
|
2402
|
-
`[data-remote-component-id="shadowroot_${keySuffix}"]`
|
|
2403
|
-
);
|
|
2404
|
-
shadowRootElement = shadowRoots[keySuffix] ?? element?.shadowRoot ?? null;
|
|
2405
|
-
if (!shadowRootElement && element) {
|
|
2406
|
-
try {
|
|
2407
|
-
shadowRootElement = element.attachShadow({ mode });
|
|
2408
|
-
shadowRoots[keySuffix] = shadowRootElement;
|
|
2409
|
-
} catch {
|
|
2410
|
-
}
|
|
2411
|
-
}
|
|
2412
|
-
if (shadowRootElement) {
|
|
2413
|
-
shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
|
|
2414
|
-
node.remove();
|
|
2415
|
-
});
|
|
2416
|
-
setShadowRoot(shadowRootElement);
|
|
2417
|
-
}
|
|
2418
|
-
} else if (isolate === false && shadowRoot) {
|
|
2419
|
-
shadowRoots[keySuffix] = null;
|
|
2420
|
-
setShadowRoot(null);
|
|
2421
|
-
}
|
|
2422
|
-
}, [isolate, shadowRoot, mode, keySuffix]);
|
|
2423
|
-
return { shadowRoot, shadowRootContainerRef };
|
|
2424
|
-
}
|
|
2425
|
-
|
|
2426
|
-
// src/host/react/utils/extract-remote-html.ts
|
|
2427
|
-
var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
|
|
2428
|
-
function getRemoteComponentHtml(html) {
|
|
2429
|
-
if (typeof document === "undefined")
|
|
2430
|
-
return html;
|
|
2431
|
-
const parser = new DOMParser();
|
|
2432
|
-
const temp = parser.parseFromString(html, "text/html");
|
|
2433
|
-
const ssrRemoteComponentContainer = temp.querySelector(
|
|
2434
|
-
'div[id^="__REMOTE_COMPONENT"]'
|
|
2435
|
-
);
|
|
2436
|
-
if (ssrRemoteComponentContainer) {
|
|
2437
|
-
return ssrRemoteComponentContainer.innerHTML;
|
|
2438
|
-
}
|
|
2439
|
-
const remoteComponentContainer = temp.querySelectorAll(
|
|
2440
|
-
`div[data-bundle][data-route][data-runtime][id^="${DEFAULT_COMPONENT_NAME}"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
|
|
2441
|
-
);
|
|
2442
|
-
if (remoteComponentContainer.length > 0) {
|
|
2443
|
-
return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
|
|
2444
|
-
}
|
|
2445
|
-
return "";
|
|
2446
|
-
}
|
|
2447
|
-
|
|
2448
|
-
// src/host/react/index.tsx
|
|
2449
|
-
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
2450
|
-
import { createElement as createElement3 } from "react";
|
|
2451
|
-
function ConsumeRemoteComponent({
|
|
2452
|
-
src,
|
|
2453
|
-
isolate,
|
|
2454
|
-
mode = "open",
|
|
2455
|
-
reset,
|
|
2456
|
-
credentials: credentialsProp,
|
|
2457
|
-
name: nameProp = DEFAULT_COMPONENT_NAME,
|
|
2458
|
-
shared: sharedProp,
|
|
2459
|
-
children,
|
|
2460
|
-
onBeforeLoad,
|
|
2461
|
-
onLoad,
|
|
2462
|
-
onError,
|
|
2463
|
-
onChange,
|
|
2464
|
-
onRequest,
|
|
2465
|
-
onResponse,
|
|
2466
|
-
resolveClientUrl: resolveClientUrlProp
|
|
2467
|
-
}) {
|
|
2468
|
-
const instanceId = useId();
|
|
2469
|
-
const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
|
|
2470
|
-
const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
|
|
2471
|
-
const shared2 = sharedProp ?? contextShared ?? {};
|
|
2472
|
-
const emitter = useMemo2(
|
|
2473
|
-
() => makeReactEmitter({ onBeforeLoad, onLoad, onError, onChange }),
|
|
2474
|
-
[onBeforeLoad, onLoad, onError, onChange]
|
|
2475
|
-
);
|
|
2476
|
-
const name = useMemo2(
|
|
2477
|
-
() => resolveNameFromSrc(src, nameProp),
|
|
2478
|
-
[src, nameProp]
|
|
2479
|
-
);
|
|
2480
|
-
const [data, setData] = useState2(
|
|
2481
|
-
null
|
|
2482
|
-
);
|
|
2483
|
-
const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
|
|
2484
|
-
const resolveClientUrl = useResolveClientUrl(resolveClientUrlProp, url.href);
|
|
2485
|
-
const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
|
|
2486
|
-
const keySuffix = `${escapeString(id)}_${escapeString(
|
|
2487
|
-
data?.name ?? name
|
|
2488
|
-
)}_${escapeString(instanceId)}`;
|
|
2489
|
-
const [remoteComponent, setRemoteComponent] = useState2(null);
|
|
2490
|
-
const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
|
|
2491
|
-
isolate,
|
|
2492
|
-
mode,
|
|
2493
|
-
keySuffix
|
|
2494
|
-
});
|
|
2495
|
-
const htmlRef = useRef2(
|
|
2496
|
-
typeof document !== "undefined" ? document.querySelector(
|
|
2497
|
-
`[data-remote-component-id="shadowroot_${keySuffix}"]`
|
|
2498
|
-
)?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
|
|
2499
|
-
);
|
|
2500
|
-
const endTemplateRef = useRef2(null);
|
|
2501
|
-
const childrenRef = useRef2(
|
|
2502
|
-
typeof document !== "undefined" ? (() => {
|
|
2503
|
-
let el = document.querySelector(`template[id="${name}_start"]`);
|
|
2504
|
-
const elements = [];
|
|
2505
|
-
while (el && el.id !== `${name}_end`) {
|
|
2506
|
-
if (el.id !== `${name}_start` && !el.getAttribute("data-remote-component")) {
|
|
2507
|
-
elements.push(el);
|
|
2508
|
-
}
|
|
2509
|
-
el = el.nextElementSibling;
|
|
2510
|
-
}
|
|
2511
|
-
return elements;
|
|
2512
|
-
})() : []
|
|
2513
|
-
);
|
|
2514
|
-
const hostStateRef = useRef2(createHostState());
|
|
2515
|
-
const componentHydrationHtml = useRef2(null);
|
|
2516
|
-
const prevRemoteComponentContainerRef = useRef2(null);
|
|
2517
|
-
const unmountRef = useRef2(null);
|
|
2518
|
-
useLayoutEffect2(() => {
|
|
2519
|
-
return () => {
|
|
2520
|
-
delete getNamespace().shadowRoots[keySuffix];
|
|
2521
|
-
};
|
|
2522
|
-
}, [keySuffix]);
|
|
2523
|
-
useLayoutEffect2(() => {
|
|
2524
|
-
if (childrenRef.current.length > 0 && remoteComponent) {
|
|
2525
|
-
childrenRef.current.forEach((el) => {
|
|
2526
|
-
el.remove();
|
|
2527
|
-
});
|
|
2528
|
-
childrenRef.current = [];
|
|
2529
|
-
}
|
|
2530
|
-
}, [remoteComponent]);
|
|
2531
|
-
useLayoutEffect2(() => {
|
|
2532
|
-
if (shadowRoot && remoteComponent) {
|
|
2533
|
-
const resetStyles = shadowRoot.querySelectorAll(
|
|
2534
|
-
"style[data-remote-components-reset]"
|
|
2535
|
-
);
|
|
2536
|
-
if (resetStyles.length > 1) {
|
|
2537
|
-
resetStyles.forEach((style, index) => {
|
|
2538
|
-
if (index > 0 && style.getAttribute("data-remote-components-reset") !== "react") {
|
|
2539
|
-
style.remove();
|
|
2540
|
-
}
|
|
2541
|
-
});
|
|
2542
|
-
}
|
|
2543
|
-
htmlRef.current = null;
|
|
2544
|
-
let el = shadowRoot.childNodes[0] ?? null;
|
|
2545
|
-
while (el && (!("id" in el) || el.id !== `${name}_start`)) {
|
|
2546
|
-
const nextEl = el.nextSibling;
|
|
2547
|
-
if (el.nodeName !== "LINK" && el.nodeName !== "STYLE") {
|
|
2548
|
-
el.parentNode?.removeChild(el);
|
|
2549
|
-
}
|
|
2550
|
-
el = nextEl;
|
|
2551
|
-
}
|
|
2552
|
-
}
|
|
2553
|
-
}, [shadowRoot, remoteComponent, name]);
|
|
2554
|
-
useEffect(() => {
|
|
2555
|
-
if (src && src !== hostStateRef.current.prevSrc) {
|
|
2556
|
-
const previousSrc = hostStateRef.current.prevSrc;
|
|
2557
|
-
const previousName = hostStateRef.current.prevName;
|
|
2558
|
-
hostStateRef.current.prevSrc = src;
|
|
2559
|
-
if (previousSrc !== null) {
|
|
2560
|
-
htmlRef.current = null;
|
|
2561
|
-
}
|
|
2562
|
-
hostStateRef.current.abortController?.abort();
|
|
2563
|
-
hostStateRef.current.abortController = new AbortController();
|
|
2564
|
-
const { signal } = hostStateRef.current.abortController;
|
|
2565
|
-
emitter.beforeLoad(src);
|
|
2566
|
-
hostStateRef.current.stage = "loading";
|
|
2567
|
-
startTransition(async () => {
|
|
2568
|
-
try {
|
|
2569
|
-
let html = getRemoteComponentHtml(
|
|
2570
|
-
htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
|
|
2571
|
-
);
|
|
2572
|
-
if (!html && src) {
|
|
2573
|
-
const fetchInit = {
|
|
2574
|
-
credentials
|
|
2575
|
-
};
|
|
2576
|
-
const resolvedUrl = new URL(
|
|
2577
|
-
resolveClientUrl?.(url.href) ?? url.href,
|
|
2578
|
-
location.href
|
|
2579
|
-
);
|
|
2580
|
-
const res = await fetchWithHooks(resolvedUrl, fetchInit, {
|
|
2581
|
-
onRequest,
|
|
2582
|
-
onResponse,
|
|
2583
|
-
abortController: hostStateRef.current.abortController
|
|
2584
|
-
});
|
|
2585
|
-
if (!res || !res.ok) {
|
|
2586
|
-
throw await errorFromFailedFetch(url.href, resolvedUrl, res);
|
|
2587
|
-
}
|
|
2588
|
-
const remoteHtml = await res.text();
|
|
2589
|
-
if (signal.aborted)
|
|
2590
|
-
return;
|
|
2591
|
-
htmlRef.current = remoteHtml;
|
|
2592
|
-
html = getRemoteComponentHtml(remoteHtml);
|
|
2593
|
-
}
|
|
2594
|
-
if (signal.aborted)
|
|
2595
|
-
return;
|
|
2596
|
-
const userShared = await shared2;
|
|
2597
|
-
if (signal.aborted)
|
|
2598
|
-
return;
|
|
2599
|
-
const prepared = preparePipeline({
|
|
2600
|
-
html,
|
|
2601
|
-
name,
|
|
2602
|
-
url,
|
|
2603
|
-
shared: userShared,
|
|
2604
|
-
resolveClientUrl
|
|
2605
|
-
});
|
|
2606
|
-
const { doc, parsed } = prepared;
|
|
2607
|
-
const {
|
|
2608
|
-
component,
|
|
2609
|
-
name: remoteName,
|
|
2610
|
-
isRemoteComponent,
|
|
2611
|
-
metadata,
|
|
2612
|
-
rsc,
|
|
2613
|
-
remoteShared,
|
|
2614
|
-
links: linkElements
|
|
2615
|
-
} = parsed;
|
|
2616
|
-
if (hostStateRef.current.prevIsRemoteComponent) {
|
|
2617
|
-
if (shadowRoot) {
|
|
2618
|
-
shadowRoot.innerHTML = "";
|
|
2619
|
-
}
|
|
2620
|
-
const prevUrl = hostStateRef.current.prevUrl;
|
|
2621
|
-
if (prevUrl && getNamespace().unmountFns[prevUrl.href]) {
|
|
2622
|
-
const unmountPromises = Promise.all(
|
|
2623
|
-
Array.from(unmountRef.current ?? []).map(
|
|
2624
|
-
async (unmount) => unmount(
|
|
2625
|
-
shadowRoot ?? prevRemoteComponentContainerRef.current
|
|
2626
|
-
)
|
|
2627
|
-
)
|
|
2628
|
-
);
|
|
2629
|
-
unmountRef.current = null;
|
|
2630
|
-
await unmountPromises;
|
|
2631
|
-
}
|
|
2632
|
-
}
|
|
2633
|
-
hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
|
|
2634
|
-
hostStateRef.current.prevUrl = url;
|
|
2635
|
-
hostStateRef.current.prevName = remoteName;
|
|
2636
|
-
const links = linkElements.map((link) => ({
|
|
2637
|
-
href: new URL(link.getAttribute("href") ?? link.href, url).href,
|
|
2638
|
-
...link.getAttributeNames().reduce((acc, key) => {
|
|
2639
|
-
if (key !== "href") {
|
|
2640
|
-
acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
|
|
2641
|
-
}
|
|
2642
|
-
return acc;
|
|
2643
|
-
}, {})
|
|
2644
|
-
}));
|
|
2645
|
-
const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
|
|
2646
|
-
"script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
|
|
2647
|
-
);
|
|
2648
|
-
if (!isRemoteComponent) {
|
|
2649
|
-
const self = globalThis;
|
|
2650
|
-
const prevNextScripts = self.__next_s;
|
|
2651
|
-
const nextScripts = [];
|
|
2652
|
-
self.__next_s = nextScripts;
|
|
2653
|
-
await Promise.all(
|
|
2654
|
-
Array.from(inlineScripts).filter(
|
|
2655
|
-
(script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
|
|
2656
|
-
"data-remote-components-shared"
|
|
2657
|
-
) === "string")
|
|
2658
|
-
).map((script) => {
|
|
2659
|
-
return new Promise((resolve) => {
|
|
2660
|
-
if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
|
|
2661
|
-
if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
|
|
2662
|
-
const newScript = document.createElement("script");
|
|
2663
|
-
const blob = new Blob([script.textContent], {
|
|
2664
|
-
type: "application/javascript"
|
|
2665
|
-
});
|
|
2666
|
-
const blobUrl = URL.createObjectURL(blob);
|
|
2667
|
-
newScript.onload = () => {
|
|
2668
|
-
resolve(void 0);
|
|
2669
|
-
URL.revokeObjectURL(blobUrl);
|
|
2670
|
-
newScript.remove();
|
|
2671
|
-
};
|
|
2672
|
-
newScript.onerror = () => {
|
|
2673
|
-
URL.revokeObjectURL(blobUrl);
|
|
2674
|
-
newScript.remove();
|
|
2675
|
-
resolve(void 0);
|
|
2676
|
-
};
|
|
2677
|
-
newScript.src = blobUrl;
|
|
2678
|
-
document.body.appendChild(newScript);
|
|
2679
|
-
} else {
|
|
2680
|
-
resolve(void 0);
|
|
2681
|
-
document.body.appendChild(script);
|
|
2682
|
-
}
|
|
2683
|
-
} else {
|
|
2684
|
-
resolve(void 0);
|
|
2685
|
-
}
|
|
2686
|
-
});
|
|
2687
|
-
})
|
|
2688
|
-
);
|
|
2689
|
-
nextScripts.forEach(([scriptSrc, props]) => {
|
|
2690
|
-
const script = document.createElement("script");
|
|
2691
|
-
if (scriptSrc) {
|
|
2692
|
-
script.src = scriptSrc;
|
|
2693
|
-
}
|
|
2694
|
-
if (typeof props.children === "string") {
|
|
2695
|
-
script.textContent = props.children;
|
|
2696
|
-
}
|
|
2697
|
-
setAttributesFromProps(script, props);
|
|
2698
|
-
document.head.appendChild(script);
|
|
2699
|
-
});
|
|
2700
|
-
self.__next_s = prevNextScripts;
|
|
2701
|
-
}
|
|
2702
|
-
const rscName = rsc ? `__remote_component_rsc_${escapeString(id)}_${escapeString(
|
|
2703
|
-
remoteName
|
|
2704
|
-
)}` : void 0;
|
|
2705
|
-
if (rsc) {
|
|
2706
|
-
rsc.textContent = rsc.textContent?.replace(
|
|
2707
|
-
new RegExp(`self\\["${remoteName}"\\]`, "g"),
|
|
2708
|
-
`self["${rscName}"]`
|
|
2709
|
-
) ?? "";
|
|
2710
|
-
document.body.appendChild(rsc);
|
|
2711
|
-
}
|
|
2712
|
-
const newData = {
|
|
2713
|
-
...metadata,
|
|
2714
|
-
links,
|
|
2715
|
-
remoteShared,
|
|
2716
|
-
src: typeof src === "string" ? src : src.href,
|
|
2717
|
-
serverUrl: url.href,
|
|
2718
|
-
data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
|
|
2719
|
-
};
|
|
2720
|
-
componentHydrationHtml.current = `${Array.from(
|
|
2721
|
-
doc.querySelectorAll("link,style")
|
|
2722
|
-
).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
|
|
2723
|
-
if (isRemoteComponent) {
|
|
2724
|
-
if (previousSrc !== void 0) {
|
|
2725
|
-
emitter.change({
|
|
2726
|
-
previousSrc: previousSrc ?? null,
|
|
2727
|
-
nextSrc: src,
|
|
2728
|
-
previousName,
|
|
2729
|
-
nextName: remoteName
|
|
2730
|
-
});
|
|
2731
|
-
}
|
|
2732
|
-
setData(newData);
|
|
2733
|
-
if (shadowRoot) {
|
|
2734
|
-
const shadowRootHtml = reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>${component.innerHTML}` : component.innerHTML;
|
|
2735
|
-
shadowRoot.innerHTML = shadowRootHtml;
|
|
2736
|
-
htmlRef.current = null;
|
|
2737
|
-
setRemoteComponent(null);
|
|
2738
|
-
const { mount, unmount } = await loadStaticRemoteComponent(
|
|
2739
|
-
Array.from(shadowRoot.querySelectorAll("script")),
|
|
2740
|
-
url,
|
|
2741
|
-
resolveClientUrl
|
|
2742
|
-
);
|
|
2743
|
-
unmountRef.current = unmount;
|
|
2744
|
-
await Promise.all(
|
|
2745
|
-
Array.from(mount).map((mountFn) => mountFn(shadowRoot))
|
|
2746
|
-
);
|
|
2747
|
-
emitter.load(src);
|
|
2748
|
-
} else if (isolate === false) {
|
|
2749
|
-
setRemoteComponent(
|
|
2750
|
-
// TODO: remove wrapper div by converting HTML to RSC or React tree
|
|
2751
|
-
/* @__PURE__ */ jsx2(
|
|
2752
|
-
"div",
|
|
2753
|
-
{
|
|
2754
|
-
dangerouslySetInnerHTML: { __html: component.innerHTML },
|
|
2755
|
-
ref: prevRemoteComponentContainerRef
|
|
2756
|
-
}
|
|
2757
|
-
)
|
|
2758
|
-
);
|
|
2759
|
-
htmlRef.current = null;
|
|
2760
|
-
const { mount, unmount } = await loadStaticRemoteComponent(
|
|
2761
|
-
Array.from(component.querySelectorAll("script")),
|
|
2762
|
-
url,
|
|
2763
|
-
resolveClientUrl
|
|
2764
|
-
);
|
|
2765
|
-
unmountRef.current = unmount;
|
|
2766
|
-
await Promise.all(
|
|
2767
|
-
Array.from(mount).map(
|
|
2768
|
-
(mountFn) => mountFn(prevRemoteComponentContainerRef.current)
|
|
2769
|
-
)
|
|
2770
|
-
);
|
|
2771
|
-
emitter.load(src);
|
|
2772
|
-
}
|
|
2773
|
-
hostStateRef.current.stage = "loaded";
|
|
2774
|
-
} else {
|
|
2775
|
-
const result = await loadPrepared({
|
|
2776
|
-
prepared,
|
|
2777
|
-
url,
|
|
2778
|
-
signal,
|
|
2779
|
-
shared: userShared,
|
|
2780
|
-
resolveClientUrl,
|
|
2781
|
-
container: shadowRoot,
|
|
2782
|
-
rscName
|
|
2783
|
-
});
|
|
2784
|
-
if (rsc) {
|
|
2785
|
-
rsc.remove();
|
|
2786
|
-
}
|
|
2787
|
-
setData(newData);
|
|
2788
|
-
if (previousSrc !== void 0) {
|
|
2789
|
-
emitter.change({
|
|
2790
|
-
previousSrc: previousSrc ?? null,
|
|
2791
|
-
nextSrc: src,
|
|
2792
|
-
previousName,
|
|
2793
|
-
nextName: remoteName
|
|
2794
|
-
});
|
|
2795
|
-
}
|
|
2796
|
-
if (result.status === "aborted") {
|
|
2797
|
-
return;
|
|
2798
|
-
}
|
|
2799
|
-
if (result.status === "error") {
|
|
2800
|
-
hostStateRef.current.stage = "error";
|
|
2801
|
-
setRemoteComponent(result.error);
|
|
2802
|
-
emitter.error(result.error);
|
|
2803
|
-
} else if (result.status === "loaded") {
|
|
2804
|
-
hostStateRef.current.stage = "loaded";
|
|
2805
|
-
setRemoteComponent(result.component);
|
|
2806
|
-
emitter.load(src);
|
|
2807
|
-
}
|
|
2808
|
-
}
|
|
2809
|
-
} catch (error) {
|
|
2810
|
-
if (isAbortError(error)) {
|
|
2811
|
-
hostStateRef.current.stage = "idle";
|
|
2812
|
-
return;
|
|
2813
|
-
}
|
|
2814
|
-
hostStateRef.current.stage = "error";
|
|
2815
|
-
setRemoteComponent(error);
|
|
2816
|
-
emitter.error(error);
|
|
2817
|
-
}
|
|
2818
|
-
});
|
|
2819
|
-
}
|
|
2820
|
-
}, [
|
|
2821
|
-
url,
|
|
2822
|
-
src,
|
|
2823
|
-
isolate,
|
|
2824
|
-
credentials,
|
|
2825
|
-
name,
|
|
2826
|
-
shared2,
|
|
2827
|
-
shadowRoot,
|
|
2828
|
-
reset,
|
|
2829
|
-
id,
|
|
2830
|
-
emitter.beforeLoad,
|
|
2831
|
-
emitter.load,
|
|
2832
|
-
emitter.error,
|
|
2833
|
-
emitter.change,
|
|
2834
|
-
onRequest,
|
|
2835
|
-
onResponse,
|
|
2836
|
-
resolveClientUrl
|
|
2837
|
-
]);
|
|
2838
|
-
if (remoteComponent instanceof Error) {
|
|
2839
|
-
throw remoteComponent;
|
|
2840
|
-
}
|
|
2841
|
-
const metadataJson = /* @__PURE__ */ jsx2("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
|
|
2842
|
-
name: data?.name || name,
|
|
2843
|
-
bundle: data?.bundle || "default",
|
|
2844
|
-
route: data?.route || DEFAULT_ROUTE,
|
|
2845
|
-
runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
|
|
2846
|
-
}) });
|
|
2847
|
-
const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
|
|
2848
|
-
const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement3(
|
|
2849
|
-
"link",
|
|
2850
|
-
{
|
|
2851
|
-
...link,
|
|
2852
|
-
href: new URL(link.href, url).href,
|
|
2853
|
-
key: JSON.stringify(link)
|
|
2854
|
-
}
|
|
2855
|
-
)) || null;
|
|
2856
|
-
const componentToRender = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2857
|
-
resetStyle,
|
|
2858
|
-
linksToRender,
|
|
2859
|
-
remoteComponent ?? children
|
|
2860
|
-
] });
|
|
2861
|
-
if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
|
|
2862
|
-
shadowRoot.innerHTML = componentHydrationHtml.current;
|
|
2863
|
-
componentHydrationHtml.current = null;
|
|
2864
|
-
if (hostStateRef.current.prevIsRemoteComponent) {
|
|
2865
|
-
loadStaticRemoteComponent(
|
|
2866
|
-
Array.from(shadowRoot.querySelectorAll("script")),
|
|
2867
|
-
url,
|
|
2868
|
-
resolveClientUrl
|
|
2869
|
-
).then(({ mount }) => {
|
|
2870
|
-
return Promise.all(
|
|
2871
|
-
Array.from(mount).map((mountFn) => mountFn(shadowRoot))
|
|
2872
|
-
);
|
|
2873
|
-
}).then(() => {
|
|
2874
|
-
if (src) {
|
|
2875
|
-
emitter.load(src);
|
|
2876
|
-
}
|
|
2877
|
-
}).catch((e) => {
|
|
2878
|
-
const error = new RemoteComponentsError(
|
|
2879
|
-
`Error mounting remote component from "${url.href}"`,
|
|
2880
|
-
{
|
|
2881
|
-
cause: e
|
|
2882
|
-
}
|
|
2883
|
-
);
|
|
2884
|
-
setRemoteComponent(error);
|
|
2885
|
-
emitter.error(error);
|
|
2886
|
-
});
|
|
2887
|
-
}
|
|
2888
|
-
}
|
|
2889
|
-
if (isolate !== false) {
|
|
2890
|
-
const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");
|
|
2891
|
-
if (shadowRemoteComponentHtml) {
|
|
2892
|
-
shadowRemoteComponentHtml.remove();
|
|
2893
|
-
}
|
|
2894
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2895
|
-
metadataJson,
|
|
2896
|
-
/* @__PURE__ */ jsxs(
|
|
2897
|
-
"div",
|
|
2898
|
-
{
|
|
2899
|
-
"data-remote-component-id": `shadowroot_${keySuffix}`,
|
|
2900
|
-
id: `shadowroot_${data?.name ?? name}`,
|
|
2901
|
-
ref: shadowRootContainerRef,
|
|
2902
|
-
children: [
|
|
2903
|
-
typeof document === "undefined" ? (
|
|
2904
|
-
// eslint-disable-next-line react/no-unknown-property
|
|
2905
|
-
/* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
|
|
2906
|
-
typeof document === "undefined" ? /* @__PURE__ */ jsx2(
|
|
2907
|
-
"div",
|
|
2908
|
-
{
|
|
2909
|
-
dangerouslySetInnerHTML: {
|
|
2910
|
-
__html: `<img
|
|
2911
|
-
alt="" decoding="async" style="display:none"
|
|
2912
|
-
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
|
|
2913
|
-
onload="(function(el){
|
|
2914
|
-
// Capture the shadow root during SSR hydration so the client-side
|
|
2915
|
-
// useShadowRoot hook can find it.
|
|
2916
|
-
const root = el.getRootNode();
|
|
2917
|
-
globalThis.__remote_components_shadowroot_${keySuffix}=root;
|
|
2918
|
-
el.parentElement.remove();
|
|
2919
|
-
})(this)"
|
|
2920
|
-
/>`
|
|
2921
|
-
}
|
|
2922
|
-
}
|
|
2923
|
-
) : null,
|
|
2924
|
-
resetStyle,
|
|
2925
|
-
linksToRender,
|
|
2926
|
-
children
|
|
2927
|
-
] })
|
|
2928
|
-
) : null,
|
|
2929
|
-
shadowRoot && remoteComponent ? createPortal(
|
|
2930
|
-
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2931
|
-
/* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
|
|
2932
|
-
resetStyle,
|
|
2933
|
-
linksToRender,
|
|
2934
|
-
remoteComponent,
|
|
2935
|
-
/* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
|
|
2936
|
-
] }),
|
|
2937
|
-
shadowRoot
|
|
2938
|
-
) : null
|
|
2939
|
-
]
|
|
2940
|
-
}
|
|
2941
|
-
)
|
|
2942
|
-
] });
|
|
2943
|
-
}
|
|
2944
|
-
htmlRef.current = null;
|
|
2945
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2946
|
-
/* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
|
|
2947
|
-
metadataJson,
|
|
2948
|
-
componentToRender,
|
|
2949
|
-
/* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
|
|
2950
|
-
] });
|
|
2951
|
-
}
|
|
2952
|
-
|
|
2953
90
|
// src/host/nextjs/app-compat.tsx
|
|
2954
91
|
import { usePathname, useSearchParams } from "next/navigation";
|
|
2955
92
|
var routerImpl = async () => {
|
|
@@ -3016,7 +153,7 @@ var routerImpl = async () => {
|
|
|
3016
153
|
};
|
|
3017
154
|
|
|
3018
155
|
// src/host/nextjs/app-client-only.tsx
|
|
3019
|
-
import { jsx
|
|
156
|
+
import { jsx } from "react/jsx-runtime";
|
|
3020
157
|
var sharedModules = async (userShared, resolveClientUrl) => {
|
|
3021
158
|
const [resolvedShared, resolvedUserShared] = await Promise.all([
|
|
3022
159
|
tryImportShared(),
|
|
@@ -3030,16 +167,16 @@ var sharedModules = async (userShared, resolveClientUrl) => {
|
|
|
3030
167
|
};
|
|
3031
168
|
};
|
|
3032
169
|
function RemoteComponentsClientProvider({
|
|
3033
|
-
shared
|
|
170
|
+
shared,
|
|
3034
171
|
resolveClientUrl,
|
|
3035
172
|
children,
|
|
3036
173
|
...props
|
|
3037
174
|
}) {
|
|
3038
|
-
const mergedShared =
|
|
3039
|
-
() => sharedModules(
|
|
3040
|
-
[
|
|
175
|
+
const mergedShared = useMemo(
|
|
176
|
+
() => sharedModules(shared, resolveClientUrl),
|
|
177
|
+
[shared, resolveClientUrl]
|
|
3041
178
|
);
|
|
3042
|
-
return /* @__PURE__ */
|
|
179
|
+
return /* @__PURE__ */ jsx(
|
|
3043
180
|
RemoteComponentsContext,
|
|
3044
181
|
{
|
|
3045
182
|
value: { shared: mergedShared, resolveClientUrl, ...props },
|
|
@@ -3051,7 +188,7 @@ function ConsumeRemoteComponent2(props) {
|
|
|
3051
188
|
if (typeof props.src !== "string" && !(props.src instanceof URL)) {
|
|
3052
189
|
return props.children ?? null;
|
|
3053
190
|
}
|
|
3054
|
-
return /* @__PURE__ */
|
|
191
|
+
return /* @__PURE__ */ jsx(
|
|
3055
192
|
ConsumeRemoteComponent,
|
|
3056
193
|
{
|
|
3057
194
|
...props,
|