Add an experimental "Import Bundle" mode to Metro

Reviewed By: rickhanlonii Differential Revision: D15943150 fbshipit-source-id: 9dd961a5583b94223a073105d11ccf16e18843fa
facebook · Jun 25, 2019 · 72329d0 · 72329d0
1 parent affd060
commit 72329d0
Show file tree

Hide file tree

Showing 21 changed files with 200 additions and 66 deletions.
diff --git a/packages/metro-config/src/__tests__/__snapshots__/loadConfig-test.js.snap b/packages/metro-config/src/__tests__/__snapshots__/loadConfig-test.js.snap
@@ -90,6 +90,7 @@ Object {
     "dynamicDepsInPackages": "throwAtRuntime",
     "enableBabelRCLookup": true,
     "enableBabelRuntime": true,
+    "experimentalImportBundleSupport": false,
     "getTransformOptions": [Function],
     "minifierConfig": Object {
       "compress": Object {
@@ -217,6 +218,7 @@ Object {
     "dynamicDepsInPackages": "throwAtRuntime",
     "enableBabelRCLookup": true,
     "enableBabelRuntime": true,
+    "experimentalImportBundleSupport": false,
     "getTransformOptions": [Function],
     "minifierConfig": Object {
       "compress": Object {

diff --git a/packages/metro-config/src/configTypes.flow.js b/packages/metro-config/src/configTypes.flow.js
@@ -139,6 +139,7 @@ type TransformerConfigT = {|
   transformVariants: TransformVariants,
   workerPath: string,
   publicPath: string,
+  experimentalImportBundleSupport: boolean,
 |};
 
 export type VisualizerConfigT = {|

diff --git a/packages/metro-config/src/convertConfig.js b/packages/metro-config/src/convertConfig.js
@@ -134,6 +134,7 @@ async function convertOldToNew({
       dynamicDepsInPackages,
       enableBabelRCLookup: getEnableBabelRCLookup(),
       enableBabelRuntime: true,
+      experimentalImportBundleSupport: false,
       getTransformOptions,
       minifierConfig: defaultConfig.transformer.minifierConfig,
       minifierPath: minifierPath || defaultConfig.transformer.minifierPath,

diff --git a/packages/metro-config/src/defaults/index.js b/packages/metro-config/src/defaults/index.js
@@ -72,6 +72,7 @@ const getDefaultValues = (projectRoot: ?string): ConfigT => ({
     dynamicDepsInPackages: 'throwAtRuntime',
     enableBabelRCLookup: true,
     enableBabelRuntime: true,
+    experimentalImportBundleSupport: false,
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/packages/metro-visualizer/src/middleware/graph-api/testGraph.js b/packages/metro-visualizer/src/middleware/graph-api/testGraph.js
@@ -152,6 +152,7 @@ const dummyMetroGraph: Graph<> = {
     ],
   ]),
   entryPoints: ['foo'],
+  importBundleNames: new Set(),
 };
 
 module.exports = dummyMetroGraph;
diff --git a/packages/metro/src/DeltaBundler/DeltaCalculator.js b/packages/metro/src/DeltaBundler/DeltaCalculator.js
@@ -49,6 +49,7 @@ class DeltaCalculator<T> extends EventEmitter {
     this._graph = {
       dependencies: new Map(),
       entryPoints,
+      importBundleNames: new Set(),
     };
 
     this._dependencyGraph
@@ -70,6 +71,7 @@ class DeltaCalculator<T> extends EventEmitter {
     this._graph = {
       dependencies: new Map(),
       entryPoints: this._graph.entryPoints,
+      importBundleNames: new Set(),
     };
     this._modifiedFiles = new Set();
     this._deletedFiles = new Set();

diff --git a/packages/metro/src/DeltaBundler/Serializers/__tests__/baseJSBundle-test.js b/packages/metro/src/DeltaBundler/Serializers/__tests__/baseJSBundle-test.js
@@ -62,6 +62,7 @@ it('should generate a very simple bundle', () => {
           ['/root/bar', barModule],
         ]),
         entryPoints: ['foo'],
+        importBundleNames: new Set(),
       },
       {
         processModuleFilter: () => true,
@@ -75,22 +76,22 @@ it('should generate a very simple bundle', () => {
       },
     ),
   ).toMatchInlineSnapshot(`
-Object {
-  "modules": Array [
-    Array [
-      "foo",
-      "__d(function() {/* code for foo */},\\"foo\\",[\\"bar\\"],\\"foo\\");",
-    ],
-    Array [
-      "bar",
-      "__d(function() {/* code for bar */},\\"bar\\",[],\\"bar\\");",
-    ],
-  ],
-  "post": "require(\\"foo\\");
-//# sourceMappingURL=http://localhost/bundle.map",
-  "pre": "__d(function() {/* code for polyfill */});",
-}
-`);
+    Object {
+      "modules": Array [
+        Array [
+          "foo",
+          "__d(function() {/* code for foo */},\\"foo\\",[\\"bar\\"],\\"foo\\");",
+        ],
+        Array [
+          "bar",
+          "__d(function() {/* code for bar */},\\"bar\\",[],\\"bar\\");",
+        ],
+      ],
+      "post": "require(\\"foo\\");
+    //# sourceMappingURL=http://localhost/bundle.map",
+      "pre": "__d(function() {/* code for polyfill */});",
+    }
+  `);
 });
 
 it('should add runBeforeMainModule statements if found in the graph', () => {
@@ -104,6 +105,7 @@ it('should add runBeforeMainModule statements if found in the graph', () => {
           ['/root/bar', barModule],
         ]),
         entryPoints: ['/root/foo'],
+        importBundleNames: new Set(),
       },
       {
         processModuleFilter: () => true,
@@ -117,10 +119,10 @@ it('should add runBeforeMainModule statements if found in the graph', () => {
       },
     ).post,
   ).toMatchInlineSnapshot(`
-"require(\\"bar\\");
-require(\\"foo\\");
-//# sourceMappingURL=http://localhost/bundle.map"
-`);
+    "require(\\"bar\\");
+    require(\\"foo\\");
+    //# sourceMappingURL=http://localhost/bundle.map"
+  `);
 });
 
 it('should handle numeric module ids', () => {
@@ -134,6 +136,7 @@ it('should handle numeric module ids', () => {
           ['/root/bar', barModule],
         ]),
         entryPoints: ['/root/foo'],
+        importBundleNames: new Set(),
       },
       {
         processModuleFilter: () => true,
@@ -147,17 +150,17 @@ it('should handle numeric module ids', () => {
       },
     ).modules,
   ).toMatchInlineSnapshot(`
-Array [
-  Array [
-    0,
-    "__d(function() {/* code for foo */},0,[1],\\"foo\\");",
-  ],
-  Array [
-    1,
-    "__d(function() {/* code for bar */},1,[],\\"bar\\");",
-  ],
-]
-`);
+    Array [
+      Array [
+        0,
+        "__d(function() {/* code for foo */},0,[1],\\"foo\\");",
+      ],
+      Array [
+        1,
+        "__d(function() {/* code for bar */},1,[],\\"bar\\");",
+      ],
+    ]
+  `);
 });
 
 it('outputs custom runModule statements', () => {
@@ -171,6 +174,7 @@ it('outputs custom runModule statements', () => {
           ['/root/bar', barModule],
         ]),
         entryPoints: ['/root/foo'],
+        importBundleNames: new Set(),
       },
       {
         processModuleFilter: () => true,
@@ -184,9 +188,9 @@ it('outputs custom runModule statements', () => {
       },
     ).post,
   ).toMatchInlineSnapshot(`
-"export default require(\\"bar\\").default;
-export default require(\\"foo\\").default;"
-`);
+    "export default require(\\"bar\\").default;
+    export default require(\\"foo\\").default;"
+  `);
 });
 
 it('should add an inline source map to a very simple bundle', () => {
@@ -199,6 +203,7 @@ it('should add an inline source map to a very simple bundle', () => {
         ['/root/bar', barModule],
       ]),
       entryPoints: ['foo'],
+      importBundleNames: new Set(),
     },
     {
       processModuleFilter: () => true,
@@ -241,6 +246,7 @@ it('does not add polyfills when `modulesOnly` is used', () => {
           ['/root/bar', barModule],
         ]),
         entryPoints: ['foo'],
+        importBundleNames: new Set(),
       },
       {
         processModuleFilter: () => true,
@@ -255,20 +261,65 @@ it('does not add polyfills when `modulesOnly` is used', () => {
       },
     ),
   ).toMatchInlineSnapshot(`
-Object {
-  "modules": Array [
-    Array [
-      "foo",
-      "__d(function() {/* code for foo */},\\"foo\\",[\\"bar\\"],\\"foo\\");",
-    ],
-    Array [
-      "bar",
-      "__d(function() {/* code for bar */},\\"bar\\",[],\\"bar\\");",
-    ],
-  ],
-  "post": "require(\\"foo\\");
-//# sourceMappingURL=http://localhost/bundle.map",
-  "pre": "",
-}
-`);
+    Object {
+      "modules": Array [
+        Array [
+          "foo",
+          "__d(function() {/* code for foo */},\\"foo\\",[\\"bar\\"],\\"foo\\");",
+        ],
+        Array [
+          "bar",
+          "__d(function() {/* code for bar */},\\"bar\\",[],\\"bar\\");",
+        ],
+      ],
+      "post": "require(\\"foo\\");
+    //# sourceMappingURL=http://localhost/bundle.map",
+      "pre": "",
+    }
+  `);
+});
+
+it('adds lazy imports at the end of a bundle', () => {
+  expect(
+    baseJSBundle(
+      '/root/foo',
+      [polyfill],
+      {
+        dependencies: new Map([
+          ['/root/foo', fooModule],
+          ['/root/bar', barModule],
+        ]),
+        entryPoints: ['foo'],
+        importBundleNames: new Set(['/path/to/async/module.js']),
+      },
+      {
+        asyncRequireModulePath: '/asyncRequire.js',
+        processModuleFilter: () => true,
+        createModuleId: filePath => path.basename(filePath),
+        dev: true,
+        getRunModuleStatement,
+        projectRoot: '/root',
+        runBeforeMainModule: [],
+        runModule: true,
+        sourceMapUrl: 'http://localhost/bundle.map',
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    Object {
+      "modules": Array [
+        Array [
+          "foo",
+          "__d(function() {/* code for foo */},\\"foo\\",[\\"bar\\"],\\"foo\\");",
+        ],
+        Array [
+          "bar",
+          "__d(function() {/* code for bar */},\\"bar\\",[],\\"bar\\");",
+        ],
+      ],
+      "post": "(function(){var $$=require(\\"asyncRequire.js\\");$$.addImportBundleNames({\\"module.js\\":\\"../path/to/async/module.bundle\\"})})();
+    require(\\"foo\\");
+    //# sourceMappingURL=http://localhost/bundle.map",
+      "pre": "__d(function() {/* code for polyfill */});",
+    }
+  `);
 });
diff --git a/packages/metro/src/DeltaBundler/Serializers/__tests__/deltaJSBundle-test.js b/packages/metro/src/DeltaBundler/Serializers/__tests__/deltaJSBundle-test.js
@@ -38,6 +38,7 @@ const graph = {
     createModule('bar', []),
   ]),
   entryPoints: ['/root/entrypoint.js'],
+  importBundleNames: new Set(),
 };
 
 const options = {

diff --git a/packages/metro/src/DeltaBundler/Serializers/__tests__/getRamBundleInfo-test.js b/packages/metro/src/DeltaBundler/Serializers/__tests__/getRamBundleInfo-test.js
@@ -39,6 +39,7 @@ const graph = {
     createModule('bar', []),
     createModule('qux', []),
   ]),
+  importBundleNames: new Set(),
 };
 
 const pre = [createModule('pre', [], 'js/script')[1]];

diff --git a/packages/metro/src/DeltaBundler/Serializers/baseJSBundle.js b/packages/metro/src/DeltaBundler/Serializers/baseJSBundle.js
@@ -53,14 +53,21 @@ function baseJSBundle(
   );
 
   const postCode = processModules(
-    getAppendScripts(entryPoint, [...preModules, ...modules], {
-      createModuleId: options.createModuleId,
-      getRunModuleStatement: options.getRunModuleStatement,
-      runBeforeMainModule: options.runBeforeMainModule,
-      runModule: options.runModule,
-      sourceMapUrl: options.sourceMapUrl,
-      inlineSourceMap: options.inlineSourceMap,
-    }),
+    getAppendScripts(
+      entryPoint,
+      [...preModules, ...modules],
+      graph.importBundleNames,
+      {
+        asyncRequireModulePath: options.asyncRequireModulePath,
+        createModuleId: options.createModuleId,
+        getRunModuleStatement: options.getRunModuleStatement,
+        inlineSourceMap: options.inlineSourceMap,
+        projectRoot: options.projectRoot,
+        runBeforeMainModule: options.runBeforeMainModule,
+        runModule: options.runModule,
+        sourceMapUrl: options.sourceMapUrl,
+      },
+    ),
     processModulesOptions,
   )
     .map(([_, code]) => code)

diff --git a/packages/metro/src/DeltaBundler/Serializers/deltaJSBundle.js b/packages/metro/src/DeltaBundler/Serializers/deltaJSBundle.js
@@ -54,6 +54,7 @@ function deltaJSBundle(
     const appendScripts = getAppendScripts(
       entryPoint,
       [...pre, ...modules],
+      graph.importBundleNames,
       options,
     );
 

diff --git a/packages/metro/src/DeltaBundler/Serializers/getRamBundleInfo.js b/packages/metro/src/DeltaBundler/Serializers/getRamBundleInfo.js
@@ -50,7 +50,9 @@ async function getRamBundleInfo(
     ...pre,
     ...graph.dependencies.values(),
   ];
-  modules = modules.concat(getAppendScripts(entryPoint, modules, options));
+  modules = modules.concat(
+    getAppendScripts(entryPoint, modules, graph.importBundleNames, options),
+  );
 
   modules.forEach((module: Module<>) => options.createModuleId(module.path));