@bleedingdev/modern-js-app-tools 3.2.0-ultramodern.66 → 3.2.0-ultramodern.68
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.
|
@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
|
|
|
2
2
|
const MODERN_WORKER_MANIFEST = p_workerManifest;
|
|
3
3
|
const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
|
|
4
4
|
const workerModulePromises = new Map();
|
|
5
|
+
const remoteJsonPromises = new Map();
|
|
5
6
|
const CORS_HEADERS = {
|
|
6
7
|
'access-control-allow-headers': '*',
|
|
7
8
|
'access-control-allow-methods': 'GET, HEAD, OPTIONS',
|
|
@@ -140,19 +141,113 @@ function collectRouteCssAssets(route, routeManifest) {
|
|
|
140
141
|
...assets
|
|
141
142
|
];
|
|
142
143
|
}
|
|
144
|
+
function collectRenderedFederatedExposes(html) {
|
|
145
|
+
const renderedExposes = [];
|
|
146
|
+
const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
|
|
147
|
+
const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
|
|
148
|
+
for (const [tag] of html.matchAll(tagPattern)){
|
|
149
|
+
const attributes = {};
|
|
150
|
+
for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
|
|
151
|
+
const boundaryId = attributes['data-modern-boundary-id'];
|
|
152
|
+
const expose = attributes['data-modern-mf-expose'];
|
|
153
|
+
if (boundaryId && expose) renderedExposes.push({
|
|
154
|
+
boundaryId,
|
|
155
|
+
expose
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
return renderedExposes;
|
|
159
|
+
}
|
|
160
|
+
function getRemoteManifestUrl(remote, request) {
|
|
161
|
+
const entry = remote?.entry;
|
|
162
|
+
if ('string' != typeof entry || 0 === entry.length) return;
|
|
163
|
+
return new URL(entry, request.url).toString();
|
|
164
|
+
}
|
|
165
|
+
async function fetchRemoteJson(jsonUrl) {
|
|
166
|
+
if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>{
|
|
167
|
+
if (!response.ok) {
|
|
168
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
169
|
+
return {};
|
|
170
|
+
}
|
|
171
|
+
return response.json().catch(()=>{
|
|
172
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
173
|
+
return {};
|
|
174
|
+
});
|
|
175
|
+
}).catch(()=>{
|
|
176
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
177
|
+
return {};
|
|
178
|
+
}));
|
|
179
|
+
return remoteJsonPromises.get(jsonUrl);
|
|
180
|
+
}
|
|
181
|
+
function findRemoteExpose(remoteManifest, exposePath) {
|
|
182
|
+
const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
|
|
183
|
+
const normalizedExpose = exposePath.replace(/^\.\//u, '');
|
|
184
|
+
return exposes.find((expose)=>{
|
|
185
|
+
if (!expose || 'object' != typeof expose) return false;
|
|
186
|
+
return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
function collectCssAssetEntries(assets) {
|
|
190
|
+
const cssAssets = assets?.css;
|
|
191
|
+
return [
|
|
192
|
+
...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
|
|
193
|
+
...Array.isArray(cssAssets?.async) ? cssAssets.async : []
|
|
194
|
+
].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
|
|
195
|
+
}
|
|
196
|
+
function collectRouteManifestCssAssets(routeManifest) {
|
|
197
|
+
const routeAssets = routeManifest?.routeAssets || {};
|
|
198
|
+
const assets = new Set();
|
|
199
|
+
for (const routeAsset of Object.values(routeAssets)){
|
|
200
|
+
const cssAssets = [
|
|
201
|
+
...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
|
|
202
|
+
...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
|
|
203
|
+
];
|
|
204
|
+
for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
|
|
205
|
+
}
|
|
206
|
+
return [
|
|
207
|
+
...assets
|
|
208
|
+
];
|
|
209
|
+
}
|
|
210
|
+
async function collectRenderedRemoteCssHrefs(html, request, env) {
|
|
211
|
+
const renderedExposes = collectRenderedFederatedExposes(html);
|
|
212
|
+
if (0 === renderedExposes.length) return [];
|
|
213
|
+
const hostManifest = await readAssetJson('mf-manifest.json', request, env);
|
|
214
|
+
const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
|
|
215
|
+
const remoteByBoundary = new Map();
|
|
216
|
+
const hrefs = new Set();
|
|
217
|
+
for (const remote of remotes){
|
|
218
|
+
if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
|
|
219
|
+
if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
|
|
220
|
+
}
|
|
221
|
+
await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
|
|
222
|
+
const remote = remoteByBoundary.get(boundaryId);
|
|
223
|
+
const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
|
|
224
|
+
if (!manifestUrl) return;
|
|
225
|
+
const remoteManifest = await fetchRemoteJson(manifestUrl);
|
|
226
|
+
const remoteExpose = findRemoteExpose(remoteManifest, expose);
|
|
227
|
+
const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
|
|
228
|
+
const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
|
|
229
|
+
for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
|
|
230
|
+
for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
|
|
231
|
+
}));
|
|
232
|
+
return [
|
|
233
|
+
...hrefs
|
|
234
|
+
];
|
|
235
|
+
}
|
|
143
236
|
function escapeAttribute(value) {
|
|
144
237
|
return String(value).replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
145
238
|
}
|
|
146
|
-
async function withRouteCssLinks(response, route, routeManifest, request) {
|
|
239
|
+
async function withRouteCssLinks(response, route, routeManifest, request, env) {
|
|
147
240
|
const contentType = response.headers.get('content-type') || '';
|
|
148
241
|
if (!contentType.includes('text/html')) return response;
|
|
149
|
-
const cssAssets = collectRouteCssAssets(route, routeManifest);
|
|
150
|
-
if (0 === cssAssets.length) return response;
|
|
151
242
|
const html = await response.text();
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
243
|
+
const cssHrefs = [
|
|
244
|
+
...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
|
|
245
|
+
...await collectRenderedRemoteCssHrefs(html, request, env)
|
|
246
|
+
];
|
|
247
|
+
if (0 === cssHrefs.length) return response;
|
|
248
|
+
const links = [
|
|
249
|
+
...new Set(cssHrefs)
|
|
250
|
+
].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
|
|
156
251
|
if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
|
|
157
252
|
return new Response(html.replace('</head>', `${links.join('')}</head>`), {
|
|
158
253
|
headers: response.headers,
|
|
@@ -219,7 +314,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
|
|
|
219
314
|
const requestHandler = await getRequestHandler(workerModule);
|
|
220
315
|
if ('function' == typeof requestHandler) {
|
|
221
316
|
const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
|
|
222
|
-
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
|
|
317
|
+
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
|
|
223
318
|
}
|
|
224
319
|
return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
|
|
225
320
|
status: 500,
|
|
@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
|
|
|
2
2
|
const MODERN_WORKER_MANIFEST = p_workerManifest;
|
|
3
3
|
const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
|
|
4
4
|
const workerModulePromises = new Map();
|
|
5
|
+
const remoteJsonPromises = new Map();
|
|
5
6
|
const CORS_HEADERS = {
|
|
6
7
|
'access-control-allow-headers': '*',
|
|
7
8
|
'access-control-allow-methods': 'GET, HEAD, OPTIONS',
|
|
@@ -140,19 +141,113 @@ function collectRouteCssAssets(route, routeManifest) {
|
|
|
140
141
|
...assets
|
|
141
142
|
];
|
|
142
143
|
}
|
|
144
|
+
function collectRenderedFederatedExposes(html) {
|
|
145
|
+
const renderedExposes = [];
|
|
146
|
+
const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
|
|
147
|
+
const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
|
|
148
|
+
for (const [tag] of html.matchAll(tagPattern)){
|
|
149
|
+
const attributes = {};
|
|
150
|
+
for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
|
|
151
|
+
const boundaryId = attributes['data-modern-boundary-id'];
|
|
152
|
+
const expose = attributes['data-modern-mf-expose'];
|
|
153
|
+
if (boundaryId && expose) renderedExposes.push({
|
|
154
|
+
boundaryId,
|
|
155
|
+
expose
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
return renderedExposes;
|
|
159
|
+
}
|
|
160
|
+
function getRemoteManifestUrl(remote, request) {
|
|
161
|
+
const entry = remote?.entry;
|
|
162
|
+
if ('string' != typeof entry || 0 === entry.length) return;
|
|
163
|
+
return new URL(entry, request.url).toString();
|
|
164
|
+
}
|
|
165
|
+
async function fetchRemoteJson(jsonUrl) {
|
|
166
|
+
if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>{
|
|
167
|
+
if (!response.ok) {
|
|
168
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
169
|
+
return {};
|
|
170
|
+
}
|
|
171
|
+
return response.json().catch(()=>{
|
|
172
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
173
|
+
return {};
|
|
174
|
+
});
|
|
175
|
+
}).catch(()=>{
|
|
176
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
177
|
+
return {};
|
|
178
|
+
}));
|
|
179
|
+
return remoteJsonPromises.get(jsonUrl);
|
|
180
|
+
}
|
|
181
|
+
function findRemoteExpose(remoteManifest, exposePath) {
|
|
182
|
+
const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
|
|
183
|
+
const normalizedExpose = exposePath.replace(/^\.\//u, '');
|
|
184
|
+
return exposes.find((expose)=>{
|
|
185
|
+
if (!expose || 'object' != typeof expose) return false;
|
|
186
|
+
return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
function collectCssAssetEntries(assets) {
|
|
190
|
+
const cssAssets = assets?.css;
|
|
191
|
+
return [
|
|
192
|
+
...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
|
|
193
|
+
...Array.isArray(cssAssets?.async) ? cssAssets.async : []
|
|
194
|
+
].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
|
|
195
|
+
}
|
|
196
|
+
function collectRouteManifestCssAssets(routeManifest) {
|
|
197
|
+
const routeAssets = routeManifest?.routeAssets || {};
|
|
198
|
+
const assets = new Set();
|
|
199
|
+
for (const routeAsset of Object.values(routeAssets)){
|
|
200
|
+
const cssAssets = [
|
|
201
|
+
...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
|
|
202
|
+
...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
|
|
203
|
+
];
|
|
204
|
+
for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
|
|
205
|
+
}
|
|
206
|
+
return [
|
|
207
|
+
...assets
|
|
208
|
+
];
|
|
209
|
+
}
|
|
210
|
+
async function collectRenderedRemoteCssHrefs(html, request, env) {
|
|
211
|
+
const renderedExposes = collectRenderedFederatedExposes(html);
|
|
212
|
+
if (0 === renderedExposes.length) return [];
|
|
213
|
+
const hostManifest = await readAssetJson('mf-manifest.json', request, env);
|
|
214
|
+
const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
|
|
215
|
+
const remoteByBoundary = new Map();
|
|
216
|
+
const hrefs = new Set();
|
|
217
|
+
for (const remote of remotes){
|
|
218
|
+
if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
|
|
219
|
+
if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
|
|
220
|
+
}
|
|
221
|
+
await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
|
|
222
|
+
const remote = remoteByBoundary.get(boundaryId);
|
|
223
|
+
const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
|
|
224
|
+
if (!manifestUrl) return;
|
|
225
|
+
const remoteManifest = await fetchRemoteJson(manifestUrl);
|
|
226
|
+
const remoteExpose = findRemoteExpose(remoteManifest, expose);
|
|
227
|
+
const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
|
|
228
|
+
const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
|
|
229
|
+
for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
|
|
230
|
+
for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
|
|
231
|
+
}));
|
|
232
|
+
return [
|
|
233
|
+
...hrefs
|
|
234
|
+
];
|
|
235
|
+
}
|
|
143
236
|
function escapeAttribute(value) {
|
|
144
237
|
return String(value).replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
145
238
|
}
|
|
146
|
-
async function withRouteCssLinks(response, route, routeManifest, request) {
|
|
239
|
+
async function withRouteCssLinks(response, route, routeManifest, request, env) {
|
|
147
240
|
const contentType = response.headers.get('content-type') || '';
|
|
148
241
|
if (!contentType.includes('text/html')) return response;
|
|
149
|
-
const cssAssets = collectRouteCssAssets(route, routeManifest);
|
|
150
|
-
if (0 === cssAssets.length) return response;
|
|
151
242
|
const html = await response.text();
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
243
|
+
const cssHrefs = [
|
|
244
|
+
...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
|
|
245
|
+
...await collectRenderedRemoteCssHrefs(html, request, env)
|
|
246
|
+
];
|
|
247
|
+
if (0 === cssHrefs.length) return response;
|
|
248
|
+
const links = [
|
|
249
|
+
...new Set(cssHrefs)
|
|
250
|
+
].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
|
|
156
251
|
if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
|
|
157
252
|
return new Response(html.replace('</head>', `${links.join('')}</head>`), {
|
|
158
253
|
headers: response.headers,
|
|
@@ -219,7 +314,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
|
|
|
219
314
|
const requestHandler = await getRequestHandler(workerModule);
|
|
220
315
|
if ('function' == typeof requestHandler) {
|
|
221
316
|
const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
|
|
222
|
-
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
|
|
317
|
+
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
|
|
223
318
|
}
|
|
224
319
|
return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
|
|
225
320
|
status: 500,
|
|
@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
|
|
|
2
2
|
const MODERN_WORKER_MANIFEST = p_workerManifest;
|
|
3
3
|
const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
|
|
4
4
|
const workerModulePromises = new Map();
|
|
5
|
+
const remoteJsonPromises = new Map();
|
|
5
6
|
const CORS_HEADERS = {
|
|
6
7
|
'access-control-allow-headers': '*',
|
|
7
8
|
'access-control-allow-methods': 'GET, HEAD, OPTIONS',
|
|
@@ -140,19 +141,113 @@ function collectRouteCssAssets(route, routeManifest) {
|
|
|
140
141
|
...assets
|
|
141
142
|
];
|
|
142
143
|
}
|
|
144
|
+
function collectRenderedFederatedExposes(html) {
|
|
145
|
+
const renderedExposes = [];
|
|
146
|
+
const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
|
|
147
|
+
const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
|
|
148
|
+
for (const [tag] of html.matchAll(tagPattern)){
|
|
149
|
+
const attributes = {};
|
|
150
|
+
for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
|
|
151
|
+
const boundaryId = attributes['data-modern-boundary-id'];
|
|
152
|
+
const expose = attributes['data-modern-mf-expose'];
|
|
153
|
+
if (boundaryId && expose) renderedExposes.push({
|
|
154
|
+
boundaryId,
|
|
155
|
+
expose
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
return renderedExposes;
|
|
159
|
+
}
|
|
160
|
+
function getRemoteManifestUrl(remote, request) {
|
|
161
|
+
const entry = remote?.entry;
|
|
162
|
+
if ('string' != typeof entry || 0 === entry.length) return;
|
|
163
|
+
return new URL(entry, request.url).toString();
|
|
164
|
+
}
|
|
165
|
+
async function fetchRemoteJson(jsonUrl) {
|
|
166
|
+
if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>{
|
|
167
|
+
if (!response.ok) {
|
|
168
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
169
|
+
return {};
|
|
170
|
+
}
|
|
171
|
+
return response.json().catch(()=>{
|
|
172
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
173
|
+
return {};
|
|
174
|
+
});
|
|
175
|
+
}).catch(()=>{
|
|
176
|
+
remoteJsonPromises.delete(jsonUrl);
|
|
177
|
+
return {};
|
|
178
|
+
}));
|
|
179
|
+
return remoteJsonPromises.get(jsonUrl);
|
|
180
|
+
}
|
|
181
|
+
function findRemoteExpose(remoteManifest, exposePath) {
|
|
182
|
+
const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
|
|
183
|
+
const normalizedExpose = exposePath.replace(/^\.\//u, '');
|
|
184
|
+
return exposes.find((expose)=>{
|
|
185
|
+
if (!expose || 'object' != typeof expose) return false;
|
|
186
|
+
return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
function collectCssAssetEntries(assets) {
|
|
190
|
+
const cssAssets = assets?.css;
|
|
191
|
+
return [
|
|
192
|
+
...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
|
|
193
|
+
...Array.isArray(cssAssets?.async) ? cssAssets.async : []
|
|
194
|
+
].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
|
|
195
|
+
}
|
|
196
|
+
function collectRouteManifestCssAssets(routeManifest) {
|
|
197
|
+
const routeAssets = routeManifest?.routeAssets || {};
|
|
198
|
+
const assets = new Set();
|
|
199
|
+
for (const routeAsset of Object.values(routeAssets)){
|
|
200
|
+
const cssAssets = [
|
|
201
|
+
...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
|
|
202
|
+
...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
|
|
203
|
+
];
|
|
204
|
+
for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
|
|
205
|
+
}
|
|
206
|
+
return [
|
|
207
|
+
...assets
|
|
208
|
+
];
|
|
209
|
+
}
|
|
210
|
+
async function collectRenderedRemoteCssHrefs(html, request, env) {
|
|
211
|
+
const renderedExposes = collectRenderedFederatedExposes(html);
|
|
212
|
+
if (0 === renderedExposes.length) return [];
|
|
213
|
+
const hostManifest = await readAssetJson('mf-manifest.json', request, env);
|
|
214
|
+
const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
|
|
215
|
+
const remoteByBoundary = new Map();
|
|
216
|
+
const hrefs = new Set();
|
|
217
|
+
for (const remote of remotes){
|
|
218
|
+
if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
|
|
219
|
+
if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
|
|
220
|
+
}
|
|
221
|
+
await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
|
|
222
|
+
const remote = remoteByBoundary.get(boundaryId);
|
|
223
|
+
const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
|
|
224
|
+
if (!manifestUrl) return;
|
|
225
|
+
const remoteManifest = await fetchRemoteJson(manifestUrl);
|
|
226
|
+
const remoteExpose = findRemoteExpose(remoteManifest, expose);
|
|
227
|
+
const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
|
|
228
|
+
const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
|
|
229
|
+
for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
|
|
230
|
+
for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
|
|
231
|
+
}));
|
|
232
|
+
return [
|
|
233
|
+
...hrefs
|
|
234
|
+
];
|
|
235
|
+
}
|
|
143
236
|
function escapeAttribute(value) {
|
|
144
237
|
return String(value).replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
145
238
|
}
|
|
146
|
-
async function withRouteCssLinks(response, route, routeManifest, request) {
|
|
239
|
+
async function withRouteCssLinks(response, route, routeManifest, request, env) {
|
|
147
240
|
const contentType = response.headers.get('content-type') || '';
|
|
148
241
|
if (!contentType.includes('text/html')) return response;
|
|
149
|
-
const cssAssets = collectRouteCssAssets(route, routeManifest);
|
|
150
|
-
if (0 === cssAssets.length) return response;
|
|
151
242
|
const html = await response.text();
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
243
|
+
const cssHrefs = [
|
|
244
|
+
...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
|
|
245
|
+
...await collectRenderedRemoteCssHrefs(html, request, env)
|
|
246
|
+
];
|
|
247
|
+
if (0 === cssHrefs.length) return response;
|
|
248
|
+
const links = [
|
|
249
|
+
...new Set(cssHrefs)
|
|
250
|
+
].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
|
|
156
251
|
if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
|
|
157
252
|
return new Response(html.replace('</head>', `${links.join('')}</head>`), {
|
|
158
253
|
headers: response.headers,
|
|
@@ -219,7 +314,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
|
|
|
219
314
|
const requestHandler = await getRequestHandler(workerModule);
|
|
220
315
|
if ('function' == typeof requestHandler) {
|
|
221
316
|
const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
|
|
222
|
-
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
|
|
317
|
+
return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
|
|
223
318
|
}
|
|
224
319
|
return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
|
|
225
320
|
status: 500,
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"modern",
|
|
18
18
|
"modern.js"
|
|
19
19
|
],
|
|
20
|
-
"version": "3.2.0-ultramodern.
|
|
20
|
+
"version": "3.2.0-ultramodern.68",
|
|
21
21
|
"types": "./dist/types/index.d.ts",
|
|
22
22
|
"main": "./dist/cjs/index.js",
|
|
23
23
|
"exports": {
|
|
@@ -99,16 +99,16 @@
|
|
|
99
99
|
"ndepe": "^0.1.13",
|
|
100
100
|
"pkg-types": "^2.3.1",
|
|
101
101
|
"std-env": "4.1.0",
|
|
102
|
-
"@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.
|
|
103
|
-
"@modern-js/
|
|
104
|
-
"@modern-js/
|
|
105
|
-
"@modern-js/server
|
|
106
|
-
"@modern-js/
|
|
107
|
-
"@modern-js/server": "npm:@bleedingdev/modern-js-server@3.2.0-ultramodern.
|
|
108
|
-
"@modern-js/
|
|
109
|
-
"@modern-js/
|
|
110
|
-
"@modern-js/
|
|
111
|
-
"@modern-js/
|
|
102
|
+
"@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.68",
|
|
103
|
+
"@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.68",
|
|
104
|
+
"@modern-js/builder": "npm:@bleedingdev/modern-js-builder@3.2.0-ultramodern.68",
|
|
105
|
+
"@modern-js/server": "npm:@bleedingdev/modern-js-server@3.2.0-ultramodern.68",
|
|
106
|
+
"@modern-js/prod-server": "npm:@bleedingdev/modern-js-prod-server@3.2.0-ultramodern.68",
|
|
107
|
+
"@modern-js/server-utils": "npm:@bleedingdev/modern-js-server-utils@3.2.0-ultramodern.68",
|
|
108
|
+
"@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.68",
|
|
109
|
+
"@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.68",
|
|
110
|
+
"@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.68",
|
|
111
|
+
"@modern-js/server-core": "npm:@bleedingdev/modern-js-server-core@3.2.0-ultramodern.68"
|
|
112
112
|
},
|
|
113
113
|
"devDependencies": {
|
|
114
114
|
"@rslib/core": "0.21.5",
|