Merge pull request #963 from Aukevanoost/issues/916

nf(fix): Add support for external package.json wildcards

Author: Aukevanoost

apps/mfe2/federation.config.js

@@ -4,6 +4,7 @@ const {
 } = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
+  name: 'mfe2',
   shared: {
     ...shareAll({
       singleton: true,

apps/playground/federation.config.js

@@ -4,6 +4,7 @@ const {
 } = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
+  name: 'playground-shell',
   shared: {
     ...shareAll({
       singleton: true,

libs/native-federation-core/src/lib/config/share-utils.ts

@@ -232,6 +232,7 @@ function readConfiguredSecondaries(
   );
 
   const result = {} as Record<string, SharedConfig>;
+  const discoveredFiles = new Set<string>();
 
   for (const key of keys) {
     const secondaryName = path.join(parent, key).replace(/\\/g, '/');
@@ -265,6 +266,10 @@ function readConfiguredSecondaries(
       parent,
       secondaryName,
       entry,
+      { discovered: discoveredFiles, skip: exclude },
+    );
+    items.forEach((e) =>
+      discoveredFiles.add(typeof e === 'string' ? e : e.value),
     );
 
     for (const item of items) {
@@ -294,14 +299,29 @@ function resolveSecondaries(
   parent: string,
   secondaryName: string,
   entry: string,
+  excludes: { discovered: Set<string>; skip: string[] },
 ): Array<string | KeyValuePair> {
   let items: Array<string | KeyValuePair> = [];
   if (key.includes('*')) {
     const expanded = resolveWildcardKeys(key, entry, libPath);
-    items = expanded.map((e) => ({
-      key: path.join(parent, e.key),
-      value: path.join(libPath, e.value),
-    }));
+    items = expanded
+      .map((e) => ({
+        key: path.join(parent, e.key),
+        value: path.join(libPath, e.value),
+      }))
+      .filter((i) => {
+        if (
+          excludes.skip.some((e) =>
+            e.endsWith('*') ? i.key.startsWith(e.slice(0, -1)) : e === i.key,
+          )
+        ) {
+          return false;
+        }
+        if (excludes.discovered.has(i.value)) {
+          return false;
+        }
+        return true;
+      });
   } else {
     items = [secondaryName];
   }

libs/native-federation-core/src/lib/utils/package-info.ts

@@ -176,25 +176,42 @@ export function _getPackageInfo(
     return null;
   }
 
-  let relSecondaryPath = path.relative(mainPkgName, packageName);
-  if (!relSecondaryPath) {
-    relSecondaryPath = '.';
-  } else {
-    relSecondaryPath = './' + relSecondaryPath.replace(/\\/g, '/');
-  }
+  const pathToSecondary = path.relative(mainPkgName, packageName);
+  const relSecondaryPath = !pathToSecondary
+    ? '.'
+    : './' + pathToSecondary.replace(/\\/g, '/');
+
+  let secondaryEntryPoint = mainPkgJson?.exports?.[relSecondaryPath];
 
-  let cand = mainPkgJson?.exports?.[relSecondaryPath];
+  // wildcard
+  if (!secondaryEntryPoint) {
+    const wildcardEntry = Object.keys(mainPkgJson?.exports ?? []).find((e) =>
+      e.startsWith('./*'),
+    );
+    if (wildcardEntry) {
+      secondaryEntryPoint = mainPkgJson?.exports?.[wildcardEntry];
+      if (typeof secondaryEntryPoint === 'string')
+        secondaryEntryPoint = secondaryEntryPoint.replace('*', pathToSecondary);
+      if (typeof secondaryEntryPoint === 'object')
+        Object.keys(secondaryEntryPoint).forEach(function (key) {
+          secondaryEntryPoint[key] = secondaryEntryPoint[key].replace(
+            '*',
+            pathToSecondary,
+          );
+        });
+    }
+  }
 
-  if (typeof cand === 'string') {
+  if (typeof secondaryEntryPoint === 'string') {
     return {
-      entryPoint: path.join(mainPkgPath, cand),
+      entryPoint: path.join(mainPkgPath, secondaryEntryPoint),
       packageName,
       version,
       esm,
     };
   }
 
-  cand = mainPkgJson?.exports?.[relSecondaryPath]?.import;
+  let cand = secondaryEntryPoint?.import;
 
   if (typeof cand === 'object') {
     if (cand.module) {
@@ -229,7 +246,7 @@ export function _getPackageInfo(
     };
   }
 
-  cand = mainPkgJson?.exports?.[relSecondaryPath]?.module;
+  cand = secondaryEntryPoint?.module;
 
   if (typeof cand === 'object') {
     if (cand.module) {
@@ -252,7 +269,7 @@ export function _getPackageInfo(
     };
   }
 
-  cand = mainPkgJson?.exports?.[relSecondaryPath]?.default;
+  cand = secondaryEntryPoint?.default;
   if (cand) {
     if (typeof cand === 'object') {
       if (cand.module) {

libs/native-federation-core/src/lib/utils/resolve-wildcard-keys.ts

@@ -9,14 +9,19 @@ function escapeRegex(str: string) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
+// Convert package.json exports pattern to glob pattern
+// * in exports means "one segment", but for glob we need ** for deep matching
+// Src: https://hirok.io/posts/package-json-exports#exposing-all-package-files
+function convertExportsToGlob(pattern: string) {
+  return pattern.replace(/(?<!\*)\*(?!\*)/g, '**');
+}
+
 function compilePattern(pattern: string) {
   const tokens = pattern.split(/(\*\*|\*)/);
   const regexParts = [];
 
   for (const token of tokens) {
     if (token === '*') {
-      regexParts.push('([^/]+)');
-    } else if (token === '**') {
       regexParts.push('(.*)');
     } else {
       regexParts.push(escapeRegex(token));
@@ -26,12 +31,12 @@ function compilePattern(pattern: string) {
   return new RegExp(`^${regexParts.join('')}$`);
 }
 
-function applyWildcards(template: string, wildcardValues: string[]) {
+function withoutWildcard(template: string, wildcardValues: string[]) {
   const tokens = template.split(/(\*\*|\*)/);
   let result = '';
   let i = 0;
   for (const token of tokens) {
-    if (token === '*' || token === '**') {
+    if (token === '*') {
       result += wildcardValues[i++];
     } else {
       result += token;
@@ -46,28 +51,29 @@ export function resolveWildcardKeys(
   cwd: string,
 ): KeyValuePair[] {
   const normalizedPattern = valuePattern.replace(/^\.?\/+/, '');
+
+  const globPattern = convertExportsToGlob(normalizedPattern);
+
   const regex = compilePattern(normalizedPattern);
 
-  const files = fg.sync(valuePattern, {
+  const files = fg.sync(globPattern, {
     cwd,
     onlyFiles: true,
+    deep: Infinity,
   });
 
   const keys: KeyValuePair[] = [];
 
   for (const file of files) {
     const relPath = file.replace(/\\/g, '/').replace(/^\.\//, '');
 
-    const match = relPath.match(regex);
-    if (!match) {
-      continue;
-    }
-
-    const wildcards = match.slice(1);
-    const key = applyWildcards(keyPattern, wildcards);
+    const wildcards = relPath.match(regex);
+    if (!wildcards) continue;
 
-    // Change this:
-    keys.push({ key, value: relPath });
+    keys.push({
+      key: withoutWildcard(keyPattern, wildcards.slice(1)),
+      value: relPath,
+    });
   }
 
   return keys;

libs/native-federation/README.md

@@ -175,6 +175,7 @@ The host configuration (`projects/shell/federation.config.js`) looks like what y
 const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
+  name: 'my-host',
   shared: {
     ...shareAll({
       singleton: true,

libs/native-federation/src/schematics/init/files/federation.config.js__tmpl__

@@ -1,9 +1,10 @@
 const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
 
 module.exports = withNativeFederation({
-<% if (type === 'remote') { %>
   name: '<%=project%>',
 
+<% if (type === 'remote') { %>
+
   exposes: {
     './Component': './<%=appComponentPath%>',
   },