@bleedingdev/modern-js-app-tools 3.2.0-ultramodern.66 → 3.2.0-ultramodern.67

package/dist/cjs/plugins/deploy/platforms/templates/cloudflare-entry.mjs

@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
 const MODERN_WORKER_MANIFEST = p_workerManifest;
 const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
 const workerModulePromises = new Map();
+const remoteJsonPromises = new Map();
 const CORS_HEADERS = {
     'access-control-allow-headers': '*',
     'access-control-allow-methods': 'GET, HEAD, OPTIONS',
@@ -140,19 +141,101 @@ function collectRouteCssAssets(route, routeManifest) {
         ...assets
     ];
 }
+function collectRenderedFederatedExposes(html) {
+    const renderedExposes = [];
+    const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
+    const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
+    for (const [tag] of html.matchAll(tagPattern)){
+        const attributes = {};
+        for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
+        const boundaryId = attributes['data-modern-boundary-id'];
+        const expose = attributes['data-modern-mf-expose'];
+        if (boundaryId && expose) renderedExposes.push({
+            boundaryId,
+            expose
+        });
+    }
+    return renderedExposes;
+}
+function getRemoteManifestUrl(remote, request) {
+    const entry = remote?.entry;
+    if ('string' != typeof entry || 0 === entry.length) return;
+    return new URL(entry, request.url).toString();
+}
+async function fetchRemoteJson(jsonUrl) {
+    if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>response.ok ? response.json() : {}).catch(()=>({})));
+    return remoteJsonPromises.get(jsonUrl);
+}
+function findRemoteExpose(remoteManifest, exposePath) {
+    const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
+    const normalizedExpose = exposePath.replace(/^\.\//u, '');
+    return exposes.find((expose)=>{
+        if (!expose || 'object' != typeof expose) return false;
+        return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
+    });
+}
+function collectCssAssetEntries(assets) {
+    const cssAssets = assets?.css;
+    return [
+        ...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
+        ...Array.isArray(cssAssets?.async) ? cssAssets.async : []
+    ].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
+}
+function collectRouteManifestCssAssets(routeManifest) {
+    const routeAssets = routeManifest?.routeAssets || {};
+    const assets = new Set();
+    for (const routeAsset of Object.values(routeAssets)){
+        const cssAssets = [
+            ...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
+            ...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
+        ];
+        for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
+    }
+    return [
+        ...assets
+    ];
+}
+async function collectRenderedRemoteCssHrefs(html, request, env) {
+    const renderedExposes = collectRenderedFederatedExposes(html);
+    if (0 === renderedExposes.length) return [];
+    const hostManifest = await readAssetJson('mf-manifest.json', request, env);
+    const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
+    const remoteByBoundary = new Map();
+    const hrefs = new Set();
+    for (const remote of remotes){
+        if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
+        if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
+    }
+    await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
+        const remote = remoteByBoundary.get(boundaryId);
+        const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
+        if (!manifestUrl) return;
+        const remoteManifest = await fetchRemoteJson(manifestUrl);
+        const remoteExpose = findRemoteExpose(remoteManifest, expose);
+        const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
+        const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
+        for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
+        for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
+    }));
+    return [
+        ...hrefs
+    ];
+}
 function escapeAttribute(value) {
     return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
-async function withRouteCssLinks(response, route, routeManifest, request) {
+async function withRouteCssLinks(response, route, routeManifest, request, env) {
     const contentType = response.headers.get('content-type') || '';
     if (!contentType.includes('text/html')) return response;
-    const cssAssets = collectRouteCssAssets(route, routeManifest);
-    if (0 === cssAssets.length) return response;
     const html = await response.text();
-    const links = cssAssets.filter((asset)=>!html.includes(asset)).map((asset)=>{
-        const href = new URL(asset, request.url).toString();
-        return `<link rel="stylesheet" href="${escapeAttribute(href)}">`;
-    });
+    const cssHrefs = [
+        ...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
+        ...await collectRenderedRemoteCssHrefs(html, request, env)
+    ];
+    if (0 === cssHrefs.length) return response;
+    const links = [
+        ...new Set(cssHrefs)
+    ].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
     if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
     return new Response(html.replace('</head>', `${links.join('')}</head>`), {
         headers: response.headers,
@@ -219,7 +302,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
     const requestHandler = await getRequestHandler(workerModule);
     if ('function' == typeof requestHandler) {
         const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
-        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
+        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
     }
     return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
         status: 500,

package/dist/esm/plugins/deploy/platforms/templates/cloudflare-entry.mjs

@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
 const MODERN_WORKER_MANIFEST = p_workerManifest;
 const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
 const workerModulePromises = new Map();
+const remoteJsonPromises = new Map();
 const CORS_HEADERS = {
     'access-control-allow-headers': '*',
     'access-control-allow-methods': 'GET, HEAD, OPTIONS',
@@ -140,19 +141,101 @@ function collectRouteCssAssets(route, routeManifest) {
         ...assets
     ];
 }
+function collectRenderedFederatedExposes(html) {
+    const renderedExposes = [];
+    const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
+    const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
+    for (const [tag] of html.matchAll(tagPattern)){
+        const attributes = {};
+        for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
+        const boundaryId = attributes['data-modern-boundary-id'];
+        const expose = attributes['data-modern-mf-expose'];
+        if (boundaryId && expose) renderedExposes.push({
+            boundaryId,
+            expose
+        });
+    }
+    return renderedExposes;
+}
+function getRemoteManifestUrl(remote, request) {
+    const entry = remote?.entry;
+    if ('string' != typeof entry || 0 === entry.length) return;
+    return new URL(entry, request.url).toString();
+}
+async function fetchRemoteJson(jsonUrl) {
+    if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>response.ok ? response.json() : {}).catch(()=>({})));
+    return remoteJsonPromises.get(jsonUrl);
+}
+function findRemoteExpose(remoteManifest, exposePath) {
+    const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
+    const normalizedExpose = exposePath.replace(/^\.\//u, '');
+    return exposes.find((expose)=>{
+        if (!expose || 'object' != typeof expose) return false;
+        return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
+    });
+}
+function collectCssAssetEntries(assets) {
+    const cssAssets = assets?.css;
+    return [
+        ...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
+        ...Array.isArray(cssAssets?.async) ? cssAssets.async : []
+    ].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
+}
+function collectRouteManifestCssAssets(routeManifest) {
+    const routeAssets = routeManifest?.routeAssets || {};
+    const assets = new Set();
+    for (const routeAsset of Object.values(routeAssets)){
+        const cssAssets = [
+            ...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
+            ...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
+        ];
+        for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
+    }
+    return [
+        ...assets
+    ];
+}
+async function collectRenderedRemoteCssHrefs(html, request, env) {
+    const renderedExposes = collectRenderedFederatedExposes(html);
+    if (0 === renderedExposes.length) return [];
+    const hostManifest = await readAssetJson('mf-manifest.json', request, env);
+    const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
+    const remoteByBoundary = new Map();
+    const hrefs = new Set();
+    for (const remote of remotes){
+        if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
+        if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
+    }
+    await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
+        const remote = remoteByBoundary.get(boundaryId);
+        const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
+        if (!manifestUrl) return;
+        const remoteManifest = await fetchRemoteJson(manifestUrl);
+        const remoteExpose = findRemoteExpose(remoteManifest, expose);
+        const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
+        const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
+        for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
+        for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
+    }));
+    return [
+        ...hrefs
+    ];
+}
 function escapeAttribute(value) {
     return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
-async function withRouteCssLinks(response, route, routeManifest, request) {
+async function withRouteCssLinks(response, route, routeManifest, request, env) {
     const contentType = response.headers.get('content-type') || '';
     if (!contentType.includes('text/html')) return response;
-    const cssAssets = collectRouteCssAssets(route, routeManifest);
-    if (0 === cssAssets.length) return response;
     const html = await response.text();
-    const links = cssAssets.filter((asset)=>!html.includes(asset)).map((asset)=>{
-        const href = new URL(asset, request.url).toString();
-        return `<link rel="stylesheet" href="${escapeAttribute(href)}">`;
-    });
+    const cssHrefs = [
+        ...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
+        ...await collectRenderedRemoteCssHrefs(html, request, env)
+    ];
+    if (0 === cssHrefs.length) return response;
+    const links = [
+        ...new Set(cssHrefs)
+    ].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
     if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
     return new Response(html.replace('</head>', `${links.join('')}</head>`), {
         headers: response.headers,
@@ -219,7 +302,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
     const requestHandler = await getRequestHandler(workerModule);
     if ('function' == typeof requestHandler) {
         const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
-        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
+        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
     }
     return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
         status: 500,

package/dist/esm-node/plugins/deploy/platforms/templates/cloudflare-entry.mjs

@@ -2,6 +2,7 @@ const ASSETS_BINDING = 'ASSETS';
 const MODERN_WORKER_MANIFEST = p_workerManifest;
 const WORKER_MODULE_LOADERS = p_workerModuleLoaders;
 const workerModulePromises = new Map();
+const remoteJsonPromises = new Map();
 const CORS_HEADERS = {
     'access-control-allow-headers': '*',
     'access-control-allow-methods': 'GET, HEAD, OPTIONS',
@@ -140,19 +141,101 @@ function collectRouteCssAssets(route, routeManifest) {
         ...assets
     ];
 }
+function collectRenderedFederatedExposes(html) {
+    const renderedExposes = [];
+    const tagPattern = /<[^>]*data-modern-(?:boundary-id|mf-expose)=["'][^"']+["'][^>]*>/g;
+    const attributePattern = /\s(data-modern-(?:boundary-id|mf-expose))=["']([^"']+)["']/g;
+    for (const [tag] of html.matchAll(tagPattern)){
+        const attributes = {};
+        for (const [, name, value] of tag.matchAll(attributePattern))attributes[name] = value;
+        const boundaryId = attributes['data-modern-boundary-id'];
+        const expose = attributes['data-modern-mf-expose'];
+        if (boundaryId && expose) renderedExposes.push({
+            boundaryId,
+            expose
+        });
+    }
+    return renderedExposes;
+}
+function getRemoteManifestUrl(remote, request) {
+    const entry = remote?.entry;
+    if ('string' != typeof entry || 0 === entry.length) return;
+    return new URL(entry, request.url).toString();
+}
+async function fetchRemoteJson(jsonUrl) {
+    if (!remoteJsonPromises.has(jsonUrl)) remoteJsonPromises.set(jsonUrl, fetch(jsonUrl).then((response)=>response.ok ? response.json() : {}).catch(()=>({})));
+    return remoteJsonPromises.get(jsonUrl);
+}
+function findRemoteExpose(remoteManifest, exposePath) {
+    const exposes = Array.isArray(remoteManifest?.exposes) ? remoteManifest.exposes : [];
+    const normalizedExpose = exposePath.replace(/^\.\//u, '');
+    return exposes.find((expose)=>{
+        if (!expose || 'object' != typeof expose) return false;
+        return expose.path === exposePath || expose.path === `./${normalizedExpose}` || expose.name === normalizedExpose;
+    });
+}
+function collectCssAssetEntries(assets) {
+    const cssAssets = assets?.css;
+    return [
+        ...Array.isArray(cssAssets?.sync) ? cssAssets.sync : [],
+        ...Array.isArray(cssAssets?.async) ? cssAssets.async : []
+    ].filter((asset)=>'string' == typeof asset && asset.endsWith('.css'));
+}
+function collectRouteManifestCssAssets(routeManifest) {
+    const routeAssets = routeManifest?.routeAssets || {};
+    const assets = new Set();
+    for (const routeAsset of Object.values(routeAssets)){
+        const cssAssets = [
+            ...Array.isArray(routeAsset?.referenceCssAssets) ? routeAsset.referenceCssAssets : [],
+            ...Array.isArray(routeAsset?.assets) ? routeAsset.assets : []
+        ];
+        for (const asset of cssAssets)if ('string' == typeof asset && asset.endsWith('.css')) assets.add(asset);
+    }
+    return [
+        ...assets
+    ];
+}
+async function collectRenderedRemoteCssHrefs(html, request, env) {
+    const renderedExposes = collectRenderedFederatedExposes(html);
+    if (0 === renderedExposes.length) return [];
+    const hostManifest = await readAssetJson('mf-manifest.json', request, env);
+    const remotes = Array.isArray(hostManifest?.remotes) ? hostManifest.remotes : [];
+    const remoteByBoundary = new Map();
+    const hrefs = new Set();
+    for (const remote of remotes){
+        if ('string' == typeof remote?.alias) remoteByBoundary.set(remote.alias, remote);
+        if ('string' == typeof remote?.federationContainerName) remoteByBoundary.set(remote.federationContainerName, remote);
+    }
+    await Promise.all(renderedExposes.map(async ({ boundaryId, expose })=>{
+        const remote = remoteByBoundary.get(boundaryId);
+        const manifestUrl = remote ? getRemoteManifestUrl(remote, request) : void 0;
+        if (!manifestUrl) return;
+        const remoteManifest = await fetchRemoteJson(manifestUrl);
+        const remoteExpose = findRemoteExpose(remoteManifest, expose);
+        const publicPath = 'string' == typeof remoteManifest?.metaData?.publicPath ? remoteManifest.metaData.publicPath : manifestUrl;
+        const remoteRouteManifest = await fetchRemoteJson(new URL('routes-manifest.json', publicPath).toString());
+        for (const asset of collectCssAssetEntries(remoteExpose?.assets))hrefs.add(new URL(asset, publicPath).toString());
+        for (const asset of collectRouteManifestCssAssets(remoteRouteManifest))hrefs.add(new URL(asset, publicPath).toString());
+    }));
+    return [
+        ...hrefs
+    ];
+}
 function escapeAttribute(value) {
     return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
-async function withRouteCssLinks(response, route, routeManifest, request) {
+async function withRouteCssLinks(response, route, routeManifest, request, env) {
     const contentType = response.headers.get('content-type') || '';
     if (!contentType.includes('text/html')) return response;
-    const cssAssets = collectRouteCssAssets(route, routeManifest);
-    if (0 === cssAssets.length) return response;
     const html = await response.text();
-    const links = cssAssets.filter((asset)=>!html.includes(asset)).map((asset)=>{
-        const href = new URL(asset, request.url).toString();
-        return `<link rel="stylesheet" href="${escapeAttribute(href)}">`;
-    });
+    const cssHrefs = [
+        ...collectRouteCssAssets(route, routeManifest).map((asset)=>new URL(asset, request.url).toString()),
+        ...await collectRenderedRemoteCssHrefs(html, request, env)
+    ];
+    if (0 === cssHrefs.length) return response;
+    const links = [
+        ...new Set(cssHrefs)
+    ].filter((href)=>!html.includes(href)).map((href)=>`<link rel="stylesheet" href="${escapeAttribute(href)}">`);
     if (0 === links.length || !html.includes('</head>')) return new Response(html, response);
     return new Response(html.replace('</head>', `${links.join('')}</head>`), {
         headers: response.headers,
@@ -219,7 +302,7 @@ async function dispatchRouteWorker(route, request, env, ctx) {
     const requestHandler = await getRequestHandler(workerModule);
     if ('function' == typeof requestHandler) {
         const requestHandlerOptions = await getRequestHandlerOptions(route, request, env);
-        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request);
+        return withRouteCssLinks(await requestHandler(request, requestHandlerOptions), route, requestHandlerOptions.resource.routeManifest, request, env);
     }
     return new Response(`Worker bundle has no fetch or requestHandler export: ${workerPath}`, {
         status: 500,

package/package.json

@@ -17,7 +17,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.2.0-ultramodern.66",
+  "version": "3.2.0-ultramodern.67",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
   "exports": {
@@ -99,16 +99,16 @@
     "ndepe": "^0.1.13",
     "pkg-types": "^2.3.1",
     "std-env": "4.1.0",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.66",
-    "@modern-js/builder": "npm:@bleedingdev/modern-js-builder@3.2.0-ultramodern.66",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.66",
-    "@modern-js/server-core": "npm:@bleedingdev/modern-js-server-core@3.2.0-ultramodern.66",
-    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.66",
-    "@modern-js/server": "npm:@bleedingdev/modern-js-server@3.2.0-ultramodern.66",
-    "@modern-js/server-utils": "npm:@bleedingdev/modern-js-server-utils@3.2.0-ultramodern.66",
-    "@modern-js/prod-server": "npm:@bleedingdev/modern-js-prod-server@3.2.0-ultramodern.66",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.66",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.66"
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.67",
+    "@modern-js/builder": "npm:@bleedingdev/modern-js-builder@3.2.0-ultramodern.67",
+    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.67",
+    "@modern-js/prod-server": "npm:@bleedingdev/modern-js-prod-server@3.2.0-ultramodern.67",
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.67",
+    "@modern-js/server": "npm:@bleedingdev/modern-js-server@3.2.0-ultramodern.67",
+    "@modern-js/server-core": "npm:@bleedingdev/modern-js-server-core@3.2.0-ultramodern.67",
+    "@modern-js/server-utils": "npm:@bleedingdev/modern-js-server-utils@3.2.0-ultramodern.67",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.67",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.67"
   },
   "devDependencies": {
     "@rslib/core": "0.21.5",