Add dedicated HTTP handler for fetching source contents

Summary:
Changelog:
* **[Feature]:** Serve source files at `/[metro-project]/` and `/[metro-watchFolders]/{index}/`.

Creates a new set of HTTP GET endpoints for serving source and asset contents from Metro.

The endpoints are designed to provide access to all of Metro's input files that are under [`projectRoot`](https://metrobundler.dev/docs/configuration/#projectroot) and/or [`watchFolders`](https://metrobundler.dev/docs/configuration/#watchfolders). As a security measure, access is restricted to files with valid source/asset extensions, and is subject to watcher config options like [`blockList`](https://metrobundler.dev/docs/configuration/#blocklist).

In subsequent diffs, we'll change Metro's source map serializer to allow clients to opt into fetching source contents lazily through these endpoints.

Reviewed By: robhogan

Differential Revision: D56952064

fbshipit-source-id: 99821c358bf6d341e6fe9de362d4e3c1702e8523

Author: motiz88

packages/metro/src/Server.js

@@ -143,6 +143,10 @@ class Server {
   _platforms: Set<string>;
   _reporter: Reporter;
   _serverOptions: ServerOptions | void;
+  _allowedSuffixesForSourceRequests: $ReadOnlyArray<string>;
+  _sourceRequestRoutingMap: $ReadOnlyArray<
+    [pathnamePrefix: string, normalizedRootDir: string],
+  >;
 
   constructor(config: ConfigT, options?: ServerOptions) {
     this._config = config;
@@ -158,6 +162,22 @@ class Server {
     this._reporter = config.reporter;
     this._logger = Logger;
     this._platforms = new Set(this._config.resolver.platforms);
+    this._allowedSuffixesForSourceRequests = [
+      ...new Set(
+        [
+          ...this._config.resolver.sourceExts,
+          ...this._config.watcher.additionalExts,
+          ...this._config.resolver.assetExts,
+        ].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._isEnded = false;
 
     // TODO(T34760917): These two properties should eventually be instantiated
@@ -563,10 +583,69 @@ class Server {
     } else if (pathname === '/symbolicate') {
       await this._symbolicate(req, res);
     } else {
-      next();
+      let handled = false;
+      for (const [pathnamePrefix, normalizedRootDir] of this
+        ._sourceRequestRoutingMap) {
+        if (pathname.startsWith(pathnamePrefix)) {
+          await this._processSourceRequest(
+            req,
+            res,
+            pathnamePrefix,
+            normalizedRootDir,
+          );
+          handled = true;
+          break;
+        }
+      }
+      if (!handled) {
+        next();
+      }
     }
   }
 
+  async _processSourceRequest(
+    req: IncomingMessage,
+    res: ServerResponse,
+    pathnamePrefix: string,
+    rootDir: string,
+  ): Promise<void> {
+    const urlObj = url.parse(req.url, true);
+    const relativePathname = nullthrows(urlObj.pathname).substr(
+      pathnamePrefix.length,
+    );
+    if (
+      !this._allowedSuffixesForSourceRequests.some(suffix =>
+        relativePathname.endsWith(suffix),
+      )
+    ) {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+    const depGraph = await this._bundler.getBundler().getDependencyGraph();
+    const filePath = path.join(rootDir, relativePathname);
+    try {
+      depGraph.getSha1(filePath);
+    } catch {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+    const mimeType = mime.lookup(path.basename(relativePathname));
+    res.setHeader('Content-Type', mimeType);
+    const stream = fs.createReadStream(filePath);
+    stream.pipe(res);
+    stream.on('error', error => {
+      if (error.code === 'ENOENT') {
+        res.writeHead(404);
+        res.end();
+      } else {
+        res.writeHead(500);
+        res.end();
+      }
+    });
+  }
+
   _createRequestProcessor<T>({
     createStartEntry,
     createEndEntry,

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

@@ -12,7 +12,9 @@
 
 const Metro = require('../../..');
 const execBundle = require('../execBundle');
+const fs = require('fs');
 const fetch = require('node-fetch');
+const path = require('path');
 
 jest.unmock('cosmiconfig');
 
@@ -117,4 +119,81 @@ describe('Metro development server serves bundles via HTTP', () => {
     );
     expect(response.status).toBe(500);
   });
+
+  describe('dedicated endpoints for serving source files', () => {
+    test('under /[metro-project]/', async () => {
+      const response = await fetch(
+        'http://localhost:' +
+          config.server.port +
+          '/[metro-project]/TestBundle.js',
+      );
+      expect(response.status).toBe(200);
+      expect(await response.text()).toEqual(
+        await fs.promises.readFile(
+          path.join(__dirname, '../basic_bundle/TestBundle.js'),
+          'utf8',
+        ),
+      );
+    });
+
+    test('under /[metro-watchFolders]/', async () => {
+      const response = await fetch(
+        'http://localhost:' +
+          config.server.port +
+          '/[metro-watchFolders]/1/metro/src/integration_tests/basic_bundle/TestBundle.js',
+      );
+      expect(response.status).toBe(200);
+      expect(await response.text()).toEqual(
+        await fs.promises.readFile(
+          path.join(__dirname, '../basic_bundle/TestBundle.js'),
+          'utf8',
+        ),
+      );
+    });
+
+    test('under /[metro-project]/', async () => {
+      const response = await fetch(
+        'http://localhost:' +
+          config.server.port +
+          '/[metro-project]/TestBundle.js',
+      );
+      expect(response.status).toBe(200);
+      expect(await response.text()).toEqual(
+        await fs.promises.readFile(
+          path.join(__dirname, '../basic_bundle/TestBundle.js'),
+          'utf8',
+        ),
+      );
+    });
+
+    test('no access to files without source extensions', async () => {
+      const response = await fetch(
+        'http://localhost:' +
+          config.server.port +
+          '/[metro-project]/not_a_source_file.xyz',
+      );
+      expect(response.status).toBe(404);
+      expect(await response.text()).not.toContain(
+        await fs.promises.readFile(
+          path.join(__dirname, '../basic_bundle/not_a_source_file.xyz'),
+          'utf8',
+        ),
+      );
+    });
+
+    test('no access to source files excluded from the file map', async () => {
+      const response = await fetch(
+        'http://localhost:' +
+          config.server.port +
+          '/[metro-project]/excluded_from_file_map.js',
+      );
+      expect(response.status).toBe(404);
+      expect(await response.text()).not.toContain(
+        await fs.promises.readFile(
+          path.join(__dirname, '../basic_bundle/excluded_from_file_map.js'),
+          'utf8',
+        ),
+      );
+    });
+  });
 });

packages/metro/src/integration_tests/basic_bundle/excluded_from_file_map.js

@@ -0,0 +1,11 @@
+/**
+ * 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
+ */
+
+export default '/* secret */';

packages/metro/src/integration_tests/basic_bundle/not_a_source_file.xyz

@@ -0,0 +1 @@
+/* secret */

packages/metro/src/integration_tests/metro.config.js

@@ -22,6 +22,7 @@ module.exports = {
   watchFolders: [path.resolve(__dirname, '../../../')],
   server: {port: 10028},
   resolver: {
+    blockList: [/excluded_from_file_map\.js$/],
     useWatchman: false,
   },
   transformer: {