Breaking: Keep the file extension in async bundle paths

docs/ModuleAPI.md

@@ -57,7 +57,7 @@ In React Native projects that use `@react-native/babel-preset`, `import` and `ex
 1. Enable [lazy bundling](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0605-lazy-bundling.md) by adding `&lazy=true` to the initial HTTP bundle URL your framework requests from Metro.
 2. At runtime, `import()` calls a framework-defined function to [fetch and evaluate](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0605-lazy-bundling.md#__loadbundleasync-in-metro) the split bundle. Your framework **must** implement this function if it uses the `lazy=true` parameter, or runtime errors will occur.
 
-   For example, if the initial bundle URL is `/index.bundle?platform=ios&dev=true&lazy=true`, then `import('./src/Settings')` calls `global.__loadBundleAsync('/src/Settings.bundle?platform=ios&dev=true&lazy=true&modulesOnly=true&runModule=false')` before evaluating the module.
+   For example, if the initial bundle URL is `/index.bundle?platform=ios&dev=true&lazy=true`, then `import('./src/Settings')`, resolving to `src/Settings.js`, calls `global.__loadBundleAsync('/src/Settings.js.bundle?platform=ios&dev=true&lazy=true&modulesOnly=true&runModule=false')` before evaluating the module.
 
 :::
 

packages/metro/src/DeltaBundler/Serializers/__tests__/baseJSBundleWithLazyModuleDefinition-test.js

@@ -208,6 +208,62 @@ test('modulesOnly omits the eager polyfills but keeps the segment', () => {
   expect(code).toContain('case 0:');
 });
 
+test('async paths carry the platform of the bundle', () => {
+  const lazyFooModule: Module<> = {
+    ...fooModule,
+    dependencies: new Map([
+      [
+        './bar',
+        {
+          absolutePath: '/root/bar.ios.js',
+          data: {
+            data: {
+              asyncType: 'async',
+              isESMImport: false,
+              locs: [],
+              key: './bar',
+            },
+            name: './bar',
+          },
+        },
+      ],
+    ]),
+  };
+  const {code} = baseJSBundleWithLazyModuleDefinition(
+    '/root/foo',
+    [],
+    {
+      dependencies: new Map([['/root/foo', lazyFooModule]]),
+      entryPoints: new Set(['/root/foo']),
+      transformOptions: {...transformOptions, platform: 'ios'},
+    },
+    {
+      asyncRequireModulePath: '',
+      createModuleId: (filePath: string) => (filePath === '/root/foo' ? 0 : 1),
+      dev: true,
+      getRunModuleStatement: (moduleId: number | string) =>
+        `require(${JSON.stringify(moduleId)});`,
+      globalPrefix: '',
+      includeAsyncPaths: true,
+      inlineSourceMap: false,
+      modulesOnly: false,
+      processModuleFilter: () => true,
+      projectRoot: '/root',
+      reservedString: '_$$_METRO_',
+      runBeforeMainModule: [],
+      runModule: true,
+      serverRoot: '/root',
+      shouldAddToIgnoreList: () => false,
+      sourceMapUrl: 'http://localhost/bundle.map',
+      sourceUrl: 'http://localhost/foo.ios.bundle?lazy=true',
+      getSourceUrl: null,
+    },
+  );
+  expect(code).toContain(
+    '"paths":{"1":"/bar.ios.js.bundle?lazy=true&platform=ios&modulesOnly=true&runModule=false"}',
+  );
+});
+
 test('prefixes the segment definer with the global prefix', () => {
   const {code} = serialize('app1');
 

packages/metro/src/DeltaBundler/Serializers/__tests__/hmrJSBundle-test.js

@@ -14,7 +14,9 @@
 import type {Module, ReadOnlyGraph, TransformInputOptions} from '../../types';
 
 import CountingSet from '../../../lib/CountingSet';
+import parseBundleOptionsFromBundleRequestUrl from '../../../lib/parseBundleOptionsFromBundleRequestUrl';
 import hmrJSBundle from '../hmrJSBundle';
+import * as jscSafeUrl from 'jsc-safe-url';
 
 const fooModule: Module<> = {
   path: '/root/foo',
@@ -124,12 +126,12 @@ Object {
       "module": Array [
         1,
         "__d(function() {/* code for foo */},1,[0],\\"foo\\",{});
-//# sourceMappingURL=http://localhost/foo.map
-//# sourceURL=http://localhost/foo.bundle
+//# sourceMappingURL=http://localhost/foo.map?platform=web
+//# sourceURL=http://localhost/foo.bundle//&platform=web
 ",
       ],
-      "sourceMappingURL": "http://localhost/foo.map",
-      "sourceURL": "http://localhost/foo.bundle",
+      "sourceMappingURL": "http://localhost/foo.map?platform=web",
+      "sourceURL": "http://localhost/foo.bundle//&platform=web",
     },
   ],
   "deleted": Array [],
@@ -138,12 +140,12 @@ Object {
       "module": Array [
         0,
         "__d(function() {/* code for bar */},0,null,\\"bar\\",{});
-//# sourceMappingURL=http://localhost/bar.map
-//# sourceURL=http://localhost/bar.bundle
+//# sourceMappingURL=http://localhost/bar.map?platform=web
+//# sourceURL=http://localhost/bar.bundle//&platform=web
 ",
       ],
-      "sourceMappingURL": "http://localhost/bar.map",
-      "sourceURL": "http://localhost/bar.bundle",
+      "sourceMappingURL": "http://localhost/bar.map?platform=web",
+      "sourceURL": "http://localhost/bar.bundle//&platform=web",
     },
   ],
 }
@@ -173,12 +175,12 @@ Object {
       "module": Array [
         2,
         "__d(function() {/* code for ascii file with non ascii characters: %30.бундл.Øಚ😁AA */},2,null,\\"%30.бундл.Øಚ😁AA/src/?/foo=bar/#.js\\",{});
-//# sourceMappingURL=http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.map
-//# sourceURL=http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.bundle
+//# sourceMappingURL=http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.js.map?platform=web
+//# sourceURL=http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.js.bundle//&platform=web
 ",
       ],
-      "sourceMappingURL": "http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.map",
-      "sourceURL": "http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.bundle",
+      "sourceMappingURL": "http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.js.map?platform=web",
+      "sourceURL": "http://localhost/%2530.%D0%B1%D1%83%D0%BD%D0%B4%D0%BB.%C3%98%E0%B2%9A%F0%9F%98%81AA/src/%3F/foo%3Dbar/%23.js.bundle//&platform=web",
     },
   ],
 }
@@ -207,10 +209,90 @@ test('gives a virtual module anchored at a real file URLs distinct from that fil
   expect(
     added.map(({sourceURL, sourceMappingURL}) => [sourceURL, sourceMappingURL]),
   ).toEqual([
-    ['http://localhost/foo.bundle', 'http://localhost/foo.map'],
     [
-      'http://localhost/foo.bundle//&virtual=true',
-      'http://localhost/foo.map?virtual=true',
+      'http://localhost/foo.bundle//&platform=web',
+      'http://localhost/foo.map?platform=web',
+    ],
+    [
+      'http://localhost/foo.bundle//&platform=web&virtual=true',
+      'http://localhost/foo.map?platform=web&virtual=true',
     ],
   ]);
 });
+
+test('module URLs resolve back to the exact file and platform', () => {
+  const cjsModule: Module<> = {
+    ...barModule,
+    path: '/root/dual.ios.cjs',
+    inverseDependencies: new CountingSet(),
+  };
+  const {added} = hmrJSBundle(
+    {
+      added: new Map([['/root/dual.ios.cjs', cjsModule]]),
+      modified: new Map(),
+      deleted: new Set(),
+      reset: false,
+    },
+    {
+      entryPoints: new Set(['/root/dual.ios.cjs']),
+      dependencies: new Map([['/root/dual.ios.cjs', cjsModule]]),
+      transformOptions: {...transformOptions, platform: 'ios'},
+    },
+    {...options, clientUrl: new URL('http://localhost/index.ios.bundle')},
+  );
+  // The server must find `dual.ios.cjs`, not a sibling such as `dual.js`
+  // found through `sourceExts`, and build it for the same platform.
+  for (const url of [added[0].sourceURL, added[0].sourceMappingURL]) {
+    expect(
+      parseBundleOptionsFromBundleRequestUrl(
+        jscSafeUrl.toNormalUrl(url),
+        new Set(['ios']),
+      ),
+    ).toMatchObject({entryFile: './dual.ios.cjs', platform: 'ios'});
+  }
+});
+
+test('async paths in updated modules carry the platform of the bundle', () => {
+  const lazyModule: Module<> = {
+    ...fooModule,
+    path: '/root/lazy.ios.js',
+    dependencies: new Map([
+      [
+        './chunk',
+        {
+          absolutePath: '/root/chunk.ios.js',
+          data: {
+            data: {
+              asyncType: 'async',
+              isESMImport: false,
+              locs: [],
+              key: './chunk',
+            },
+            name: './chunk',
+          },
+        },
+      ],
+    ]),
+  };
+  const {added} = hmrJSBundle(
+    {
+      added: new Map([['/root/lazy.ios.js', lazyModule]]),
+      modified: new Map(),
+      deleted: new Set(),
+      reset: false,
+    },
+    {
+      entryPoints: new Set(['/root/lazy.ios.js']),
+      dependencies: new Map([['/root/lazy.ios.js', lazyModule]]),
+      transformOptions: {...transformOptions, platform: 'ios'},
+    },
+    {
+      ...options,
+      clientUrl: new URL('http://localhost/index.ios.bundle?lazy=true'),
+      includeAsyncPaths: true,
+    },
+  );
+  expect(added[0].module[1]).toContain(
+    '"paths":{"0":"/chunk.ios.js.bundle?lazy=true&platform=ios&modulesOnly=true&runModule=false"}',
+  );
+});

packages/metro/src/DeltaBundler/Serializers/baseJSBundle.js

@@ -35,6 +35,7 @@ export default function baseJSBundle(
     createModuleId: options.createModuleId,
     dev: options.dev,
     includeAsyncPaths: options.includeAsyncPaths,
+    platform: graph.transformOptions.platform,
     projectRoot: options.projectRoot,
     serverRoot: options.serverRoot,
     sourceUrl: options.sourceUrl,

packages/metro/src/DeltaBundler/Serializers/baseJSBundleWithLazyModuleDefinition.js

@@ -64,6 +64,7 @@ export default function baseJSBundleWithLazyModuleDefinition(
     createModuleId: options.createModuleId,
     dev: options.dev,
     includeAsyncPaths: options.includeAsyncPaths,
+    platform: graph.transformOptions.platform,
     projectRoot: options.projectRoot,
     serverRoot: options.serverRoot,
     sourceUrl: options.sourceUrl,

packages/metro/src/DeltaBundler/Serializers/helpers/__tests__/js-test.js

@@ -13,6 +13,7 @@ import type {Dependency} from '../../../types';
 
 import {createPathNormalizer} from '../../../__tests__/test-utils';
 import CountingSet from '../../../../lib/CountingSet';
+import parseBundleOptionsFromBundleRequestUrl from '../../../../lib/parseBundleOptionsFromBundleRequestUrl';
 import {inlineModuleIdReferences, wrapModule} from '../js';
 import {wrap as raw} from 'jest-snapshot-serializer-raw';
 import createModuleIdFactory from 'metro-config/private/defaults/createModuleIdFactory';
@@ -152,7 +153,7 @@ describe('wrapModule()', () => {
         }),
       ),
     ).toMatchInlineSnapshot(
-      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/../bar.bundle?param1=true&param2=1234&modulesOnly=true&runModule=false"}});`,
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/../bar.js.bundle?param1=true&param2=1234&modulesOnly=true&runModule=false"}});`,
     );
   });
 
@@ -195,7 +196,7 @@ describe('wrapModule()', () => {
         }),
       ),
     ).toMatchInlineSnapshot(
-      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/bar.bundle?param1=true&modulesOnly=true&runModule=false&virtual=true"}});`,
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/bar.js.bundle?param1=true&modulesOnly=true&runModule=false&virtual=true"}});`,
     );
   });
 
@@ -217,10 +218,73 @@ describe('wrapModule()', () => {
         }),
       ),
     ).toMatchInlineSnapshot(
-      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/bar.bundle?param1=true&param2=1234&modulesOnly=true&runModule=false"}});`,
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/bar.js.bundle?param1=true&param2=1234&modulesOnly=true&runModule=false"}});`,
     );
   });
 
+  test('async dependency paths keep the resolved file extension', () => {
+    myModule.dependencies.set('bar', {
+      absolutePath: '/root/node_modules/bar/dist/index.cjs',
+      data: {
+        data: {asyncType: 'async', isESMImport: false, locs: [], key: 'bar'},
+        name: 'bar',
+      },
+    });
+    const sourceUrl = 'http://localhost/Main.bundle?platform=ios';
+    const wrapped = wrapModule(myModule, {
+      createModuleId: createModuleIdFactory(),
+      dev: false,
+      includeAsyncPaths: true,
+      projectRoot: '/root',
+      serverRoot: '/root',
+      sourceUrl,
+    });
+    expect(raw(wrapped)).toMatchInlineSnapshot(
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/node_modules/bar/dist/index.cjs.bundle?platform=ios&modulesOnly=true&runModule=false"}});`,
+    );
+
+    // The server must resolve the chunk URL back to the same file, not to a
+    // sibling such as `index.js` found through `sourceExts`.
+    const asyncPath = nullthrows(wrapped.match(/"paths":\{"1":"([^"]+)"/))[1];
+    expect(
+      parseBundleOptionsFromBundleRequestUrl(
+        'http://localhost' + asyncPath,
+        new Set(['ios']),
+      ).entryFile,
+    ).toBe('./node_modules/bar/dist/index.cjs');
+  });
+
+  test('async bundle paths carry the platform of the bundle', () => {
+    const dep = nullthrows(myModule.dependencies.get('bar'));
+    myModule.dependencies.set('bar', {
+      ...dep,
+      absolutePath: p('/root/bar.ios.js'),
+      data: {...dep.data, data: {...dep.data.data, asyncType: 'async'}},
+    });
+    const wrapped = wrapModule(myModule, {
+      createModuleId: createModuleIdFactory(),
+      dev: false,
+      includeAsyncPaths: true,
+      platform: 'ios',
+      projectRoot: p('/root'),
+      serverRoot: p('/root'),
+      sourceUrl: 'http://localhost/Main.ios.bundle?param1=true',
+    });
+    expect(raw(wrapped)).toMatchInlineSnapshot(
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/bar.ios.js.bundle?param1=true&platform=ios&modulesOnly=true&runModule=false"}});`,
+    );
+
+    // The platform can't be inferred from the chunk's file name, so it must be
+    // in the query string.
+    const asyncPath = nullthrows(wrapped.match(/"paths":\{"1":"([^"]+)"/))[1];
+    expect(
+      parseBundleOptionsFromBundleRequestUrl(
+        'http://localhost' + asyncPath,
+        new Set(['ios']),
+      ).platform,
+    ).toBe('ios');
+  });
+
   test('async bundle paths override modulesOnly and runModule', () => {
     const dep = nullthrows(myModule.dependencies.get('bar'));
     myModule.dependencies.set('bar', {
@@ -240,7 +304,7 @@ describe('wrapModule()', () => {
         }),
       ),
     ).toMatchInlineSnapshot(
-      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/../bar.bundle?modulesOnly=true&runModule=false"}});`,
+      `__d(function() { console.log("foo") },0,{"0":1,"1":2,"paths":{"1":"/../bar.js.bundle?modulesOnly=true&runModule=false"}});`,
     );
   });
 
@@ -364,7 +428,7 @@ describe('wrapModule() with inlined module ids', () => {
       `__d(function(g,r,i,a,m,e,${NAME}){r(${'1'.padEnd(
         ref(0).length,
       )});r(${'2'.padEnd(ref(1).length)})},0,` +
-        `{"paths":{"1":"/../bar.bundle?param1=true&modulesOnly=true&runModule=false"}});`,
+        `{"paths":{"1":"/../bar.js.bundle?param1=true&modulesOnly=true&runModule=false"}});`,
     );
   });