Extract ProjectRouteMap, refactor path<-->URL mappings in Server (react#1707)

Summary:

Extracts a `ProjectRouteMap` class from `Server`, centralising the `[metro-watchFolders]` and `[metro-project]` virtual prefix resolution previously spread across `_resolveWatchFolderPrefix`, `_sourceRequestRoutingMap`, and `_getModuleSourceUrl`.

`ProjectRouteMap` provides:
- `filePathOfUrlDecodedPathname`: resolves `[metro-project]/...` and `[metro-watchFolders]/N/...` prefixed pathnames to absolute file paths. Returns null for non-prefixed paths or invalid indices.
- `urlPathnameOfFilePath`: maps an absolute file path to the corresponding prefixed URL pathname.

Server now delegates to `ProjectRouteMap` from `_resolveRelativePath`, `_getEntryPointAbsolutePath`, `_getModuleSourceUrl`, and source file serving.

No behavioural change is intended here, but this does incidentally fix a Windows bug that was affecting the original implementation.

Changelog:

* **[Fix]:** Fix `/[metro-project]/` and `/[metro-watchFolders]/` bundle serving on Windows.

Reviewed By: huntie

Differential Revision: D104223068

Author: motiz88

packages/metro/src/Server.js

@@ -58,6 +58,7 @@ import formatBundlingError from './lib/formatBundlingError';
 import getGraphId from './lib/getGraphId';
 import parseBundleOptionsFromBundleRequestUrl from './lib/parseBundleOptionsFromBundleRequestUrl';
 import parseJsonBody from './lib/parseJsonBody';
+import ProjectRouteMap from './lib/ProjectRouteMap';
 import splitBundleOptions from './lib/splitBundleOptions';
 import * as transformHelpers from './lib/transformHelpers';
 import {UnableToResolveError} from './node-haste/DependencyGraph/ModuleResolution';
@@ -149,9 +150,7 @@ export default class Server {
   _reporter: Reporter;
   _serverOptions: ServerOptions | void;
   _allowedSuffixesForSourceRequests: ReadonlyArray<string>;
-  _sourceRequestRoutingMap: ReadonlyArray<
-    [pathnamePrefix: string, normalizedRootDir: string],
-  >;
+  _routeMap: ProjectRouteMap;
   _fetchTimings: Array<FetchTiming>;
   _activeFetchCount: number;
 
@@ -178,13 +177,7 @@ export default class Server {
         ].map(ext => '.' + ext),
       ),
     ];
-    this._sourceRequestRoutingMap = [
-      ['/[metro-project]/', path.resolve(this._config.projectRoot)],
-      ...this._config.watchFolders.map((watchFolder, index) => [
-        `/[metro-watchFolders]/${index}/`,
-        path.resolve(watchFolder),
-      ]),
-    ];
+    this._routeMap = new ProjectRouteMap(config);
     this._isEnded = false;
     this._fetchTimings = [];
     this._activeFetchCount = 0;
@@ -260,8 +253,7 @@ export default class Server {
       sourceMapUrl: serializerOptions.sourceMapUrl,
       sourceUrl: serializerOptions.sourceUrl,
       inlineSourceMap: serializerOptions.inlineSourceMap,
-      serverRoot:
-        this._config.server.unstable_serverRoot ?? this._config.projectRoot,
+      serverRoot: this._routeMap.serverRootDir,
       shouldAddToIgnoreList: (module: Module<>) =>
         this._shouldAddModuleToIgnoreList(module),
       getSourceUrl: (module: Module<>) =>
@@ -365,6 +357,8 @@ export default class Server {
       transformOptions,
     } = splitBundleOptions(options);
 
+    const entryPoint = this._getEntryPointAbsolutePath(entryFile);
+
     const {prepend, graph} = await this._bundler.buildGraph(
       entryFile,
       transformOptions,
@@ -376,8 +370,6 @@ export default class Server {
       },
     );
 
-    const entryPoint = this._getEntryPointAbsolutePath(entryFile);
-
     return await getRamBundleInfo(entryPoint, prepend, graph, {
       asyncRequireModulePath: await this._resolveRelativePath(
         this._config.transformer.asyncRequireModulePath,
@@ -406,8 +398,7 @@ export default class Server {
       sourceMapUrl: serializerOptions.sourceMapUrl,
       sourceUrl: serializerOptions.sourceUrl,
       inlineSourceMap: serializerOptions.inlineSourceMap,
-      serverRoot:
-        this._config.server.unstable_serverRoot ?? this._config.projectRoot,
+      serverRoot: this._routeMap.serverRootDir,
       shouldAddToIgnoreList: (module: Module<>) =>
         this._shouldAddModuleToIgnoreList(module),
       getSourceUrl: (module: Module<>) =>
@@ -440,7 +431,7 @@ export default class Server {
       processModuleFilter: this._config.serializer.processModuleFilter,
       assetPlugins: this._config.transformer.assetPlugins,
       platform,
-      projectRoot: this._getServerRootDir(),
+      projectRoot: this._routeMap.serverRootDir,
       publicPath: this._config.transformer.publicPath,
     });
   }
@@ -700,52 +691,38 @@ export default class Server {
     } else if (pathname === '/symbolicate') {
       await this._symbolicate(req, res);
     } else {
-      let handled = false;
-      for (const [pathnamePrefix, normalizedRootDir] of this
-        ._sourceRequestRoutingMap) {
-        if (filePathname.startsWith(pathnamePrefix)) {
-          const relativeFilePathname = filePathname.substr(
-            pathnamePrefix.length,
-          );
-          await this._processSourceRequest(
-            relativeFilePathname,
-            normalizedRootDir,
-            res,
-          );
-          handled = true;
-          break;
-        }
-      }
-      if (!handled) {
+      const sourceFilePath =
+        this._routeMap.filePathOfUrlDecodedPathname(filePathname);
+      if (sourceFilePath != null) {
+        await this._processSourceRequest(sourceFilePath, res);
+      } else {
         next();
       }
     }
   }
 
   async _processSourceRequest(
-    relativeFilePathname: string,
-    rootDir: string,
+    filePath: string,
     res: ServerResponse,
   ): Promise<void> {
     if (
       !this._allowedSuffixesForSourceRequests.some(suffix =>
-        relativeFilePathname.endsWith(suffix),
+        filePath.endsWith(suffix),
       )
     ) {
       res.writeHead(404);
       res.end();
       return;
     }
     const depGraph = await this._bundler.getBundler().getDependencyGraph();
-    const filePath = path.join(rootDir, relativeFilePathname);
     try {
       await depGraph.getOrComputeSha1(filePath);
     } catch {
       res.writeHead(404);
       res.end();
       return;
     }
-    const mimeType = mime.lookup(path.basename(relativeFilePathname));
+    const mimeType = mime.lookup(path.basename(filePath));
     res.setHeader('Content-Type', mimeType);
     const stream = fs.createReadStream(filePath);
     stream.pipe(res);
@@ -1150,8 +1127,7 @@ export default class Server {
           sourceMapUrl: serializerOptions.sourceMapUrl,
           sourceUrl: serializerOptions.sourceUrl,
           inlineSourceMap: serializerOptions.inlineSourceMap,
-          serverRoot:
-            this._config.server.unstable_serverRoot ?? this._config.projectRoot,
+          serverRoot: this._routeMap.serverRootDir,
           shouldAddToIgnoreList: (module: Module<>) =>
             this._shouldAddModuleToIgnoreList(module),
           getSourceUrl: (module: Module<>) =>
@@ -1622,33 +1598,6 @@ export default class Server {
     );
   }
 
-  _resolveWatchFolderPrefix(
-    filePath: string,
-  ): {rootDir: string, filePath: string} | null {
-    const watchFolderMatch = filePath.match(
-      /^\.\/\[metro-watchFolders\]\/(\d+)\/(.*)/,
-    );
-    if (watchFolderMatch != null) {
-      const index = parseInt(watchFolderMatch[1], 10);
-      const watchFolder = this._config.watchFolders[index];
-      if (watchFolder != null) {
-        return {
-          rootDir: path.resolve(watchFolder),
-          filePath:
-            '.' + path.sep + watchFolderMatch[2].split('/').join(path.sep),
-        };
-      }
-    }
-    const projectMatch = filePath.match(/^\.\/\[metro-project\]\/(.*)/);
-    if (projectMatch != null) {
-      return {
-        rootDir: path.resolve(this._config.projectRoot),
-        filePath: '.' + path.sep + projectMatch[1].split('/').join(path.sep),
-      };
-    }
-    return null;
-  }
-
   async _resolveRelativePath(
     filePath: string,
     {
@@ -1666,14 +1615,17 @@ export default class Server {
       transformOptions.platform,
       resolverOptions,
     );
-    const resolved = this._resolveWatchFolderPrefix(filePath);
-    const rootDir =
-      resolved != null
-        ? resolved.rootDir
-        : relativeTo === 'server'
-          ? this._getServerRootDir()
-          : this._config.projectRoot;
-    const resolvedFilePath = resolved != null ? resolved.filePath : filePath;
+    let rootDir;
+    let resolvedFilePath;
+    if (relativeTo === 'project') {
+      rootDir = this._config.projectRoot;
+      resolvedFilePath = filePath;
+    } else {
+      const absolutePath =
+        this._routeMap.filePathOfUrlDecodedPathname(filePath);
+      rootDir = absolutePath != null ? '/' : this._routeMap.serverRootDir;
+      resolvedFilePath = absolutePath ?? filePath;
+    }
     return resolutionFn(`${rootDir}/.`, {
       name: resolvedFilePath,
       data: {
@@ -1737,16 +1689,11 @@ export default class Server {
     sourcePaths: SourcePathsMode.Absolute,
   };
 
-  _getServerRootDir(): string {
-    return this._config.server.unstable_serverRoot ?? this._config.projectRoot;
-  }
-
   _getEntryPointAbsolutePath(entryFile: string): string {
-    const resolved = this._resolveWatchFolderPrefix(entryFile);
-    if (resolved != null) {
-      return path.resolve(resolved.rootDir, resolved.filePath);
-    }
-    return path.resolve(this._getServerRootDir(), entryFile);
+    return (
+      this._routeMap.filePathOfUrlDecodedPathname(entryFile) ??
+      path.resolve(this._routeMap.serverRootDir, entryFile)
+    );
   }
 
   // Wait for the server to finish initializing.
@@ -1771,29 +1718,7 @@ export default class Server {
   _getModuleSourceUrl(module: Module<>, mode: SourcePathsMode): string {
     switch (mode) {
       case SourcePathsMode.ServerUrl:
-        for (const [pathnamePrefix, normalizedRootDir] of this
-          ._sourceRequestRoutingMap) {
-          if (module.path.startsWith(normalizedRootDir + path.sep)) {
-            const relativePath = module.path.slice(
-              normalizedRootDir.length + 1,
-            );
-            const relativePathPosix = relativePath
-              .split(path.sep)
-              .map(segment => encodeURIComponent(segment))
-              .join('/');
-            return pathnamePrefix + relativePathPosix;
-          }
-        }
-        // Ordinarily all files should match one of the roots above. If they
-        // don't, try to preserve useful information, even if fetching the path
-        // from Metro might fail.
-        const modulePathPosix = module.path
-          .split(path.sep)
-          .map(segment => encodeURIComponent(segment))
-          .join('/');
-        return modulePathPosix.startsWith('/')
-          ? modulePathPosix
-          : '/' + modulePathPosix;
+        return this._routeMap.urlPathnameOfFilePath(module.path);
       case SourcePathsMode.Absolute:
         return module.path;
     }

packages/metro/src/integration_tests/__tests__/server-test.js

@@ -122,75 +122,61 @@ describe('Metro development server serves bundles via HTTP', () => {
     );
   });
 
-  // TODO(T000000): Fix virtual-prefix URL resolution on Windows.
-  // path.sep differences cause entry point resolution to fail.
-  (process.platform === 'win32' ? test.skip : test)(
-    'should serve bundles with [metro-watchFolders] entry point',
-    async () => {
-      expect(
-        await downloadAndExec(
-          '/[metro-watchFolders]/1/metro/src/integration_tests/basic_bundle/TestBundle.bundle?platform=ios&dev=true&minify=false',
-        ),
-      ).toBeDefined();
-    },
-  );
+  test('should serve bundles with [metro-watchFolders] entry point', async () => {
+    expect(
+      await downloadAndExec(
+        '/[metro-watchFolders]/1/metro/src/integration_tests/basic_bundle/TestBundle.bundle?platform=ios&dev=true&minify=false',
+      ),
+    ).toBeDefined();
+  });
 
-  (process.platform === 'win32' ? test.skip : test)(
-    'should serve bundles with [metro-project] entry point',
-    async () => {
-      expect(
-        await downloadAndExec(
-          '/[metro-project]/TestBundle.bundle?platform=ios&dev=true&minify=false',
-        ),
-      ).toBeDefined();
-    },
-  );
+  test('should serve bundles with [metro-project] entry point', async () => {
+    expect(
+      await downloadAndExec(
+        '/[metro-project]/TestBundle.bundle?platform=ios&dev=true&minify=false',
+      ),
+    ).toBeDefined();
+  });
 
-  (process.platform === 'win32' ? test.skip : test)(
-    '[metro-project] source map resolves same modules as non-prefixed',
-    async () => {
-      const directResponse = await fetchAndClose(
-        'http://localhost:' +
-          httpServer.address().port +
-          '/TestBundle.map?platform=ios&dev=true&minify=false',
-      );
-      const prefixedResponse = await fetchAndClose(
-        'http://localhost:' +
-          httpServer.address().port +
-          '/[metro-project]/TestBundle.map?platform=ios&dev=true&minify=false',
-      );
-      expect(directResponse.ok).toBe(true);
-      expect(prefixedResponse.ok).toBe(true);
-      const directMap = await directResponse.json();
-      const prefixedMap = await prefixedResponse.json();
-      expect([...prefixedMap.sources].sort()).toEqual(
-        [...directMap.sources].sort(),
-      );
-    },
-  );
+  test('[metro-project] source map resolves same modules as non-prefixed', async () => {
+    const directResponse = await fetchAndClose(
+      'http://localhost:' +
+        httpServer.address().port +
+        '/TestBundle.map?platform=ios&dev=true&minify=false',
+    );
+    const prefixedResponse = await fetchAndClose(
+      'http://localhost:' +
+        httpServer.address().port +
+        '/[metro-project]/TestBundle.map?platform=ios&dev=true&minify=false',
+    );
+    expect(directResponse.ok).toBe(true);
+    expect(prefixedResponse.ok).toBe(true);
+    const directMap = await directResponse.json();
+    const prefixedMap = await prefixedResponse.json();
+    expect([...prefixedMap.sources].sort()).toEqual(
+      [...directMap.sources].sort(),
+    );
+  });
 
-  (process.platform === 'win32' ? test.skip : test)(
-    '[metro-watchFolders] source map resolves same modules as non-prefixed',
-    async () => {
-      const directResponse = await fetchAndClose(
-        'http://localhost:' +
-          httpServer.address().port +
-          '/TestBundle.map?platform=ios&dev=true&minify=false',
-      );
-      const watchFolderResponse = await fetchAndClose(
-        'http://localhost:' +
-          httpServer.address().port +
-          '/[metro-watchFolders]/1/metro/src/integration_tests/basic_bundle/TestBundle.map?platform=ios&dev=true&minify=false',
-      );
-      expect(directResponse.ok).toBe(true);
-      expect(watchFolderResponse.ok).toBe(true);
-      const directMap = await directResponse.json();
-      const watchFolderMap = await watchFolderResponse.json();
-      expect([...watchFolderMap.sources].sort()).toEqual(
-        [...directMap.sources].sort(),
-      );
-    },
-  );
+  test('[metro-watchFolders] source map resolves same modules as non-prefixed', async () => {
+    const directResponse = await fetchAndClose(
+      'http://localhost:' +
+        httpServer.address().port +
+        '/TestBundle.map?platform=ios&dev=true&minify=false',
+    );
+    const watchFolderResponse = await fetchAndClose(
+      'http://localhost:' +
+        httpServer.address().port +
+        '/[metro-watchFolders]/1/metro/src/integration_tests/basic_bundle/TestBundle.map?platform=ios&dev=true&minify=false',
+    );
+    expect(directResponse.ok).toBe(true);
+    expect(watchFolderResponse.ok).toBe(true);
+    const directMap = await directResponse.json();
+    const watchFolderMap = await watchFolderResponse.json();
+    expect([...watchFolderMap.sources].sort()).toEqual(
+      [...directMap.sources].sort(),
+    );
+  });
 
   test('responds with 404 for [metro-watchFolders] with out-of-bounds index', async () => {
     const response = await fetchAndClose(