Support lazy parameter in bundle requests (#971)

Summary:
Pull Request resolved: #971

Adds support for [lazy bundling](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0605-lazy-bundling.md) in Metro by accepting the `lazy` URL parameter in bundle requests. This replaces the old `server.experimentalImportBundleSupport` config option, which is no longer recognised.

Docs for this feature will follow in a separate commit.

Changelog:

NOTE: We may want to group together items related to lazy bundling in this release (the first one where lazy bundling will be a stable and non-experimental feature).

* **[Feature]**: Support `lazy` parameter in bundle requests. See the [lazy bundling RFC](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0605-lazy-bundling.md) for more details.
* **[Experimental]** Removed `server.experimentalImportBundleSupport` config option.

Reviewed By: huntie

Differential Revision: D43600055

fbshipit-source-id: cf5747fa25e3c4635ed2c2c0fd8ea42e7703f0d3

packages/metro-config/src/__tests__/__snapshots__/loadConfig-test.js.snap

@@ -98,7 +98,6 @@ Object {
   },
   "server": Object {
     "enhanceMiddleware": [Function],
-    "experimentalImportBundleSupport": false,
     "port": 8080,
     "rewriteRequestUrl": [Function],
     "runInspectorProxy": true,
@@ -276,7 +275,6 @@ Object {
   },
   "server": Object {
     "enhanceMiddleware": [Function],
-    "experimentalImportBundleSupport": false,
     "port": 8080,
     "rewriteRequestUrl": [Function],
     "runInspectorProxy": true,
@@ -454,7 +452,6 @@ Object {
   },
   "server": Object {
     "enhanceMiddleware": [Function],
-    "experimentalImportBundleSupport": false,
     "port": 8080,
     "rewriteRequestUrl": [Function],
     "runInspectorProxy": true,
@@ -632,7 +629,6 @@ Object {
   },
   "server": Object {
     "enhanceMiddleware": [Function],
-    "experimentalImportBundleSupport": false,
     "port": 8080,
     "rewriteRequestUrl": [Function],
     "runInspectorProxy": true,

packages/metro-config/src/configTypes.flow.js

@@ -168,7 +168,6 @@ type MetalConfigT = {
 
 type ServerConfigT = {
   enhanceMiddleware: (Middleware, Server) => Middleware,
-  experimentalImportBundleSupport: boolean,
   port: number,
   rewriteRequestUrl: string => string,
   runInspectorProxy: boolean,

packages/metro-config/src/defaults/index.js

@@ -72,7 +72,6 @@ const getDefaultValues = (projectRoot: ?string): ConfigT => ({
 
   server: {
     enhanceMiddleware: middleware => middleware,
-    experimentalImportBundleSupport: false,
     port: 8080,
     rewriteRequestUrl: url => url,
     runInspectorProxy: true,

packages/metro-config/types/configTypes.d.ts

@@ -163,7 +163,6 @@ export interface MetalConfigT {
 
 export interface ServerConfigT {
   enhanceMiddleware: (middleware: Middleware, server: Server) => Middleware;
-  experimentalImportBundleSupport: boolean;
   port: number;
   rewriteRequestUrl: (url: string) => string;
   runInspectorProxy: boolean;

packages/metro/src/DeltaBundler/Graph.js

@@ -94,7 +94,7 @@ type Delta = $ReadOnly<{
 }>;
 
 type InternalOptions<T> = $ReadOnly<{
-  experimentalImportBundleSupport: boolean,
+  lazy: boolean,
   onDependencyAdd: () => mixed,
   onDependencyAdded: () => mixed,
   resolve: Options<T>['resolve'],
@@ -106,14 +106,14 @@ function getInternalOptions<T>({
   transform,
   resolve,
   onProgress,
-  experimentalImportBundleSupport,
+  lazy,
   shallow,
 }: Options<T>): InternalOptions<T> {
   let numProcessed = 0;
   let total = 0;
 
   return {
-    experimentalImportBundleSupport,
+    lazy,
     transform,
     resolve,
     onDependencyAdd: () => onProgress && onProgress(numProcessed, ++total),
@@ -357,10 +357,7 @@ export class Graph<T = MixedOutput> {
       // Don't add a node for the module if the graph is shallow (single-module).
     } else if (dependency.data.data.asyncType === 'weak') {
       // Exclude weak dependencies from the bundle.
-    } else if (
-      options.experimentalImportBundleSupport &&
-      dependency.data.data.asyncType != null
-    ) {
+    } else if (options.lazy && dependency.data.data.asyncType != null) {
       // Don't add a node for the module if we are traversing async dependencies
       // lazily (and this is an async dependency). Instead, record it in
       // importBundleNodes.
@@ -421,10 +418,7 @@ export class Graph<T = MixedOutput> {
       return;
     }
 
-    if (
-      options.experimentalImportBundleSupport &&
-      dependency.data.data.asyncType != null
-    ) {
+    if (options.lazy && dependency.data.data.asyncType != null) {
       this._decrementImportBundleReference(dependency, parentModule);
     }
 
@@ -629,7 +623,7 @@ export class Graph<T = MixedOutput> {
     );
     invariant(
       importBundleNode.inverseDependencies.has(parentModule.path),
-      'experimentalImportBundleSupport: import bundle inverse references',
+      'lazy: import bundle inverse references',
     );
     importBundleNode.inverseDependencies.delete(parentModule.path);
     if (importBundleNode.inverseDependencies.size === 0) {
@@ -784,13 +778,12 @@ export class Graph<T = MixedOutput> {
 function dependenciesEqual(
   a: Dependency,
   b: Dependency,
-  options: $ReadOnly<{experimentalImportBundleSupport: boolean, ...}>,
+  options: $ReadOnly<{lazy: boolean, ...}>,
 ): boolean {
   return (
     a === b ||
     (a.absolutePath === b.absolutePath &&
-      (!options.experimentalImportBundleSupport ||
-        a.data.data.asyncType === b.data.data.asyncType) &&
+      (!options.lazy || a.data.data.asyncType === b.data.data.asyncType) &&
       contextParamsEqual(a.data.data.contextParams, b.data.data.contextParams))
   );
 }

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

@@ -31,7 +31,7 @@ describe('DeltaBundler', () => {
   const options = {
     unstable_allowRequireContext: false,
     unstable_enablePackageExports: false,
-    experimentalImportBundleSupport: false,
+    lazy: false,
     onProgress: null,
     resolve: (from: string, to: string) => {
       throw new Error('Never called');

packages/metro/src/DeltaBundler/__tests__/DeltaCalculator-context-test.js

@@ -39,7 +39,7 @@ describe('DeltaCalculator + require.context', () => {
   const options = {
     unstable_allowRequireContext: true,
     unstable_enablePackageExports: false,
-    experimentalImportBundleSupport: false,
+    lazy: false,
     onProgress: null,
     resolve: (from: string, to: string) => {
       throw new Error('Never called');

packages/metro/src/DeltaBundler/__tests__/DeltaCalculator-test.js

@@ -32,7 +32,7 @@ describe.each(['linux', 'win32'])('DeltaCalculator (%s)', osPlatform => {
   const options = {
     unstable_allowRequireContext: false,
     unstable_enablePackageExports: true,
-    experimentalImportBundleSupport: false,
+    lazy: false,
     onProgress: null,
     resolve: (from: string, to: string) => {
       throw new Error('Never called');

packages/metro/src/DeltaBundler/__tests__/Graph-test.js

@@ -228,10 +228,7 @@ function computeInverseDependencies(
   }
   for (const module of graph.dependencies.values()) {
     for (const dependency of module.dependencies.values()) {
-      if (
-        options.experimentalImportBundleSupport &&
-        dependency.data.data.asyncType != null
-      ) {
+      if (options.lazy && dependency.data.data.asyncType != null) {
         // Async deps aren't tracked in inverseDependencies
         continue;
       }
@@ -327,7 +324,7 @@ beforeEach(async () => {
   options = {
     unstable_allowRequireContext: false,
     unstable_enablePackageExports: false,
-    experimentalImportBundleSupport: false,
+    lazy: false,
     onProgress: null,
     resolve: (from: string, to: string) => {
       const deps = getMockDependency(from);
@@ -1411,7 +1408,7 @@ describe('edge cases', () => {
     beforeEach(() => {
       localOptions = {
         ...options,
-        experimentalImportBundleSupport: true,
+        lazy: true,
       };
     });
 

packages/metro/src/DeltaBundler/types.flow.js

@@ -130,7 +130,7 @@ export type Options<T = MixedOutput> = {
   +transform: TransformFn<T>,
   +transformOptions: TransformInputOptions,
   +onProgress: ?(numProcessed: number, total: number) => mixed,
-  +experimentalImportBundleSupport: boolean,
+  +lazy: boolean,
   +unstable_allowRequireContext: boolean,
   +unstable_enablePackageExports: boolean,
   +shallow: boolean,

packages/metro/src/HmrServer.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type IncrementalBundler, {RevisionId} from './IncrementalBundler';
+import type {GraphOptions} from './shared/types.flow';
 import type {ConfigT, RootPerfLogger} from 'metro-config';
 import type {
   HmrClientMessage,
@@ -48,6 +49,7 @@ type ClientGroup = {
   clientUrl: EntryPointURL,
   revisionId: RevisionId,
   +unlisten: () => void,
+  +graphOptions: GraphOptions,
 };
 
 function send(sendFns: Array<(string) => void>, message: HmrMessage): void {
@@ -123,8 +125,7 @@ class HmrServer<TClient: Client> {
     const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
       resolverOptions,
       shallow: graphOptions.shallow,
-      experimentalImportBundleSupport:
-        this._config.server.experimentalImportBundleSupport,
+      lazy: graphOptions.lazy,
       unstable_allowRequireContext:
         this._config.transformer.unstable_allowRequireContext,
     });
@@ -167,6 +168,7 @@ class HmrServer<TClient: Client> {
         clients: new Set([client]),
         clientUrl,
         revisionId: id,
+        graphOptions,
         unlisten: (): void => unlisten(),
       };
 
@@ -356,7 +358,7 @@ class HmrServer<TClient: Client> {
       const hmrUpdate = hmrJSBundle(delta, revision.graph, {
         clientUrl: group.clientUrl,
         createModuleId: this._createModuleId,
-        includeAsyncPaths: this._config.server.experimentalImportBundleSupport,
+        includeAsyncPaths: group.graphOptions.lazy,
         projectRoot: this._config.projectRoot,
         serverRoot:
           this._config.server.unstable_serverRoot ?? this._config.projectRoot,

packages/metro/src/IncrementalBundler.js

@@ -38,6 +38,7 @@ export type OutputGraph = Graph<>;
 type OtherOptions = $ReadOnly<{
   onProgress: $PropertyType<DeltaBundlerOptions<>, 'onProgress'>,
   shallow: boolean,
+  lazy: boolean,
 }>;
 
 export type GraphRevision = {
@@ -107,6 +108,7 @@ class IncrementalBundler {
     otherOptions?: OtherOptions = {
       onProgress: null,
       shallow: false,
+      lazy: false,
     },
   ): Promise<OutputGraph> {
     const absoluteEntryFiles = await this._getAbsoluteEntryFiles(entryFiles);
@@ -127,8 +129,7 @@ class IncrementalBundler {
       ),
       transformOptions,
       onProgress: otherOptions.onProgress,
-      experimentalImportBundleSupport:
-        this._config.server.experimentalImportBundleSupport,
+      lazy: otherOptions.lazy,
       unstable_allowRequireContext:
         this._config.transformer.unstable_allowRequireContext,
       unstable_enablePackageExports:
@@ -153,6 +154,7 @@ class IncrementalBundler {
     otherOptions?: OtherOptions = {
       onProgress: null,
       shallow: false,
+      lazy: false,
     },
   ): Promise<ReadOnlyDependencies<>> {
     const absoluteEntryFiles = await this._getAbsoluteEntryFiles(entryFiles);
@@ -175,8 +177,7 @@ class IncrementalBundler {
         ),
         transformOptions,
         onProgress: otherOptions.onProgress,
-        experimentalImportBundleSupport:
-          this._config.server.experimentalImportBundleSupport,
+        lazy: otherOptions.lazy,
         unstable_allowRequireContext:
           this._config.transformer.unstable_allowRequireContext,
         unstable_enablePackageExports:
@@ -195,6 +196,7 @@ class IncrementalBundler {
     otherOptions?: OtherOptions = {
       onProgress: null,
       shallow: false,
+      lazy: false,
     },
   ): Promise<{+graph: OutputGraph, +prepend: $ReadOnlyArray<Module<>>}> {
     const graph = await this.buildGraphForEntries(
@@ -229,6 +231,7 @@ class IncrementalBundler {
     otherOptions?: OtherOptions = {
       onProgress: null,
       shallow: false,
+      lazy: false,
     },
   ): Promise<{
     delta: DeltaResult<>,
@@ -238,8 +241,7 @@ class IncrementalBundler {
     const graphId = getGraphId(entryFile, transformOptions, {
       resolverOptions,
       shallow: otherOptions.shallow,
-      experimentalImportBundleSupport:
-        this._config.server.experimentalImportBundleSupport,
+      lazy: otherOptions.lazy,
       unstable_allowRequireContext:
         this._config.transformer.unstable_allowRequireContext,
     });