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.

Changelog: Internal

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/lib/ProjectRouteMap.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ConfigT} from 'metro-config';
+
+import path from 'path';
+
+// Matches /[metro-watchFolders]/<index>/... and /[metro-project]/...
+// Applied after normalizing ./ and bare paths to start with /.
+const EXPLICIT_ROUTE_RE =
+  /^\/(?:\[metro-watchFolders\]\/(\d+)|\[metro-project\])\/(.*)/s;
+
+/**
+ * Immutable bidirectional map between URL pathnames and filesystem paths,
+ * encoding the `[metro-project]` and `[metro-watchFolders]` virtual prefix
+ * conventions.
+ */
+export default class ProjectRouteMap {
+  +serverRootDir: string;
+  +_projectRootDirPrefix: string;
+  +_watchFolderDirPrefixes: ReadonlyArray<string>;
+  +_filePathRoutes: ReadonlyArray<{
+    rootDirPrefix: string,
+    pathnamePrefix: string,
+  }>;
+
+  constructor(config: ConfigT) {
+    this.serverRootDir =
+      config.server.unstable_serverRoot ?? config.projectRoot;
+    this._projectRootDirPrefix = path.normalize(config.projectRoot + path.sep);
+    this._watchFolderDirPrefixes = config.watchFolders.map(wf =>
+      path.normalize(wf + path.sep),
+    );
+    this._filePathRoutes = [
+      {
+        rootDirPrefix: this._projectRootDirPrefix,
+        pathnamePrefix: '/[metro-project]/',
+      },
+      ...this._watchFolderDirPrefixes.map((wfDir, i) => ({
+        rootDirPrefix: wfDir,
+        pathnamePrefix: `/[metro-watchFolders]/${i}/`,
+      })),
+    ];
+  }
+
+  /**
+   * Decode a URL pathname and resolve it to an absolute filesystem path.
+   */
+  filePathOfUrlPathname(pathname: string): string | null {
+    const decoded = pathname
+      .split('/')
+      .map(segment => decodeURIComponent(segment))
+      .join('/');
+
+    return this.filePathOfUrlDecodedPathname(decoded);
+  }
+
+  /**
+   * Convert a URL pathname or entry-file path to an absolute filesystem path.
+   *
+   * Accepts both URL-style (`/[metro-watchFolders]/1/foo`) and entry-file-style
+   * (`./[metro-watchFolders]/1/foo`) prefixes.
+   *
+   * Returns `null` when the pathname does not match a known virtual prefix,
+   * or for out-of-bounds watchFolder indices.
+   */
+  filePathOfUrlDecodedPathname(pathname: string): string | null {
+    let normalized = pathname;
+    if (normalized.startsWith('./')) {
+      normalized = '/' + normalized.slice(2);
+    } else if (!normalized.startsWith('/')) {
+      normalized = '/' + normalized;
+    }
+
+    const match = EXPLICIT_ROUTE_RE.exec(normalized);
+    if (match != null) {
+      const watchFolderIndexStr = match[1];
+      const rest = match[2];
+      let rootDirPrefix;
+      if (watchFolderIndexStr != null) {
+        const index = parseInt(watchFolderIndexStr, 10);
+        if (index >= this._watchFolderDirPrefixes.length) {
+          return null;
+        }
+        rootDirPrefix = this._watchFolderDirPrefixes[index];
+      } else {
+        rootDirPrefix = this._projectRootDirPrefix;
+      }
+      return path.join(rootDirPrefix, rest.split('/').join(path.sep));
+    }
+
+    return null;
+  }
+
+  /**
+   * Convert an absolute filesystem path to a URL pathname using the first
+   * matching virtual prefix.
+   *
+   * Falls back to the absolute path (as a POSIX-style URL) when the file is
+   * not under any configured route.
+   */
+  urlPathnameOfFilePath(filePath: string): string {
+    for (const {rootDirPrefix, pathnamePrefix} of this._filePathRoutes) {
+      if (filePath.startsWith(rootDirPrefix)) {
+        return (
+          pathnamePrefix +
+          filePath
+            .slice(rootDirPrefix.length)
+            .split(path.sep)
+            .map(segment => encodeURIComponent(segment))
+            .join('/')
+        );
+      }
+    }
+    const pathPosix = filePath
+      .split(path.sep)
+      .map(segment => encodeURIComponent(segment))
+      .join('/');
+    return pathPosix.startsWith('/') ? pathPosix : '/' + pathPosix;
+  }
+}