@atlaspack/reporter-dev-server 2.14.5-canary.49 → 2.14.5-canary.490

package/src/{Server.js → Server.ts}

@@ -1,5 +1,4 @@
-// @flow
-
+// @ts-expect-error TS2307
 import type {DevServerOptions, Request, Response} from './types.js.flow';
 import type {
   BuildSuccessEvent,
@@ -51,15 +50,19 @@ const SLASH_REGEX = /\//g;
 export const SOURCES_ENDPOINT = '/__parcel_source_root';
 const EDITOR_ENDPOINT = '/__parcel_launch_editor';
 const TEMPLATE_404 = fs.readFileSync(
-  path.join(__dirname, 'templates/404.html'),
+  path.join(__dirname, '..', 'templates/404.html'),
   'utf8',
 );
 
 const TEMPLATE_500 = fs.readFileSync(
-  path.join(__dirname, 'templates/500.html'),
+  path.join(__dirname, '..', 'templates/500.html'),
   'utf8',
 );
-type NextFunction = (req: Request, res: Response, next?: (any) => any) => any;
+type NextFunction = (
+  req: Request,
+  res: Response,
+  next?: (arg1?: any) => any,
+) => any;
 
 export default class Server {
   pending: boolean;
@@ -68,21 +71,24 @@ export default class Server {
   options: DevServerOptions;
   rootPath: string;
   bundleGraph: BundleGraph<PackagedBundle> | null;
-  requestBundle: ?(bundle: PackagedBundle) => Promise<BuildSuccessEvent>;
-  errors: Array<{|
-    message: string,
-    stack: ?string,
-    frames: Array<FormattedCodeFrame>,
-    hints: Array<string>,
-    documentation: string,
-  |}> | null;
-  stopServer: ?() => Promise<void>;
+  requestBundle:
+    | ((bundle: PackagedBundle) => Promise<BuildSuccessEvent>)
+    | null
+    | undefined;
+  errors: Array<{
+    message: string;
+    stack: string | null | undefined;
+    frames: Array<FormattedCodeFrame>;
+    hints: Array<string>;
+    documentation: string;
+  }> | null;
+  stopServer: (() => Promise<void>) | null | undefined;
 
   constructor(options: DevServerOptions) {
     this.options = options;
     try {
       this.rootPath = new URL(options.publicUrl).pathname;
-    } catch (e) {
+    } catch (e: any) {
       this.rootPath = options.publicUrl;
     }
     this.pending = true;
@@ -135,7 +141,7 @@ export default class Server {
     );
   }
 
-  respond(req: Request, res: Response): mixed {
+  respond(req: Request, res: Response): unknown {
     if (this.middleware.some((handler) => handler(req, res))) return;
     let {pathname, search} = url.parse(req.originalUrl || req.url);
     if (pathname == null) {
@@ -281,7 +287,7 @@ export default class Server {
       invariant(this.requestBundle != null);
       try {
         await this.requestBundle(bundle);
-      } catch (err) {
+      } catch (err: any) {
         this.send500(req, res);
         return;
       }
@@ -296,7 +302,7 @@ export default class Server {
     req: Request,
     res: Response,
     next: NextFunction,
-  ): Promise<void> | Promise<mixed> {
+  ): Promise<undefined> | Promise<unknown> {
     return this.serve(
       this.options.outputFS,
       this.options.distDir,
@@ -312,7 +318,7 @@ export default class Server {
     req: Request,
     res: Response,
     next: NextFunction,
-  ): Promise<mixed> {
+  ): Promise<unknown> {
     if (req.method !== 'GET' && req.method !== 'HEAD') {
       // method not allowed
       res.statusCode = 405;
@@ -325,7 +331,7 @@ export default class Server {
     try {
       var filePath = url.parse(req.url).pathname || '';
       filePath = decodeURIComponent(filePath);
-    } catch (err) {
+    } catch (err: any) {
       return this.sendError(res, 400);
     }
 
@@ -343,7 +349,7 @@ export default class Server {
 
     try {
       var stat = await fs.stat(filePath);
-    } catch (err) {
+    } catch (err: any) {
       if (err.code === 'ENOENT') {
         return next(req, res);
       }
@@ -370,9 +376,13 @@ export default class Server {
         cleanUrls: false,
       },
       {
+        // @ts-expect-error TS7006
         lstat: (path) => fs.stat(path),
+        // @ts-expect-error TS7006
         realpath: (path) => fs.realpath(path),
+        // @ts-expect-error TS7006
         createReadStream: (path, options) => fs.createReadStream(path, options),
+        // @ts-expect-error TS7006
         readdir: (path) => fs.readdir(path),
       },
     );
@@ -388,7 +398,7 @@ export default class Server {
     res.end(TEMPLATE_404);
   }
 
-  send500(req: Request, res: Response): void | Response {
+  send500(req: Request, res: Response): undefined | Response {
     res.setHeader('Content-Type', 'text/html; charset=utf-8');
     res.writeHead(500);
 
@@ -452,6 +462,7 @@ export default class Server {
       }
       for (const [context, options] of Object.entries(cfg)) {
         // each key is interpreted as context, and value as middleware options
+        // @ts-expect-error TS2345
         app.use(createProxyMiddleware(context, options));
       }
     } else {
@@ -459,10 +470,7 @@ export default class Server {
         configFilePath,
         fileInRoot,
       );
-      if (
-        // $FlowFixMe
-        Object.prototype.toString.call(cfg) === '[object Module]'
-      ) {
+      if (Object.prototype.toString.call(cfg) === '[object Module]') {
         cfg = cfg.default;
       }
 
@@ -520,20 +528,26 @@ export default class Server {
     this.stopServer = stop;
 
     server.listen(this.options.port, this.options.host);
-    return new Promise((resolve, reject) => {
-      server.once('error', (err) => {
-        this.options.logger.error(
-          ({
+    // @ts-expect-error TS2322
+    return new Promise(
+      (
+        resolve: (result: Promise<Server> | Server) => void,
+        reject: (error?: any) => void,
+      ) => {
+        server.once('error', (err) => {
+          this.options.logger.error({
+            // @ts-expect-error TS2345
             message: serverErrors(err, this.options.port),
-          }: Diagnostic),
-        );
-        reject(err);
-      });
+          } as Diagnostic);
+          reject(err);
+        });
 
-      server.once('listening', () => {
-        resolve(server);
-      });
-    });
+        server.once('listening', () => {
+          // @ts-expect-error TS2345
+          resolve(server);
+        });
+      },
+    );
   }
 
   async stop(): Promise<void> {

package/src/ServerDataProvider.ts

@@ -0,0 +1,34 @@
+/**
+ * API the dev-server requires from the main application.
+ *
+ * This interface is used to provide data to the dev-server from the main application.
+ * It is used to get the list of HTML bundles and to request a bundle to be rebuilt.
+ */
+export interface ServerDataProvider {
+  /**
+   * Return relative file paths for every HTML bundle in the current build output.
+   *
+   * The returned paths are relative to the distribution directory on disk and
+   * can therefore be used as HTTP request targets by the dev-server.
+   *
+   * @returns List of `.html` bundle paths. If no bundle graph is available yet,
+   *          an empty array should be returned.
+   */
+  getHTMLBundleFilePaths(): string[];
+
+  /**
+   * Attempt to (re)build the bundle that corresponds to the given request path.
+   *
+   * If a bundle matching `requestedPath` exists and a request handler has been
+   * provided, the implementation should trigger a rebuild and resolve the
+   * promise with "requested". Otherwise the promise must resolve with
+   * "not-found".
+   *
+   * @param requestedPath Path (relative to the distribution directory) that
+   *                      identifies the bundle file requested by the browser.
+   * @returns A promise that resolves to:
+   *          - "requested" when the build has been successfully triggered, or
+   *          - "not-found" when the bundle cannot be handled by the provider.
+   */
+  requestBundle(requestedPath: string): Promise<'requested' | 'not-found'>;
+}

package/src/{ServerReporter.js → ServerReporter.ts}

@@ -1,12 +1,10 @@
-// @flow
-
 import {Reporter} from '@atlaspack/plugin';
 import HMRServer from './HMRServer';
 import Server from './Server';
 
 let servers: Map<number, Server> = new Map();
 let hmrServers: Map<number, HMRServer> = new Map();
-export default (new Reporter({
+export default new Reporter({
   async report({event, options, logger}) {
     let {serveOptions, hmrOptions} = options;
     let server = serveOptions ? servers.get(serveOptions.port) : undefined;
@@ -47,6 +45,7 @@ export default (new Reporter({
               port: serveOptions.port,
               host: hmrOptions.host,
               devServer,
+              // @ts-expect-error TS7006
               addMiddleware: (handler) => {
                 server?.middleware.push(handler);
               },
@@ -93,7 +92,6 @@ export default (new Reporter({
         }
         if (hmrOptions && hmrServer) {
           await hmrServer.stop();
-          // $FlowFixMe[prop-missing]
           hmrServers.delete(hmrServer.wss.options.port);
         }
         break;
@@ -140,4 +138,4 @@ export default (new Reporter({
         break;
     }
   },
-}): Reporter);
+}) as Reporter;

package/src/StaticServerDataProvider.ts

@@ -0,0 +1,72 @@
+import type {
+  BundleGraph,
+  PackagedBundle,
+  BuildSuccessEvent,
+} from '@atlaspack/types';
+import path from 'path';
+
+import {ServerDataProvider} from './ServerDataProvider';
+
+/**
+ * An implementation of ServerDataProvider provides data from a direct `bundleGraph`
+ * and `requestBundle` function.
+ */
+export class StaticServerDataProvider implements ServerDataProvider {
+  private distDir: string;
+
+  private bundleGraph: BundleGraph<PackagedBundle> | null = null;
+
+  private requestBundleFn:
+    | ((bundle: PackagedBundle) => Promise<BuildSuccessEvent>)
+    | null = null;
+
+  constructor(distDir: string) {
+    this.distDir = distDir;
+  }
+
+  getHTMLBundleFilePaths(): string[] {
+    return (
+      this.bundleGraph
+        ?.getBundles()
+        .filter((b) => path.posix.extname(b.name) === '.html')
+        .map((b) => path.relative(this.distDir, b.filePath)) ?? []
+    );
+  }
+
+  async requestBundle(
+    requestedPath: string,
+  ): Promise<'requested' | 'not-found'> {
+    const bundle = this.bundleGraph?.getBundles().find((b) => {
+      const relativePath = path.relative(this.distDir, b.filePath);
+      return relativePath === requestedPath;
+    });
+
+    if (!bundle) {
+      return 'not-found';
+    }
+
+    if (!this.requestBundleFn) {
+      return 'not-found';
+    }
+
+    await this.requestBundleFn(bundle);
+
+    return 'requested';
+  }
+
+  /**
+   * Update the provider with the latest bundle graph and request function.
+   *
+   * This should be called after every successful build so that subsequent requests operate on fresh data.
+   *
+   * @param bundleGraph The most recent bundle graph representing the output of a build.
+   * @param requestBundleFn Function that will be called to (re)build a specific bundle on demand.
+   */
+  update(
+    bundleGraph: BundleGraph<PackagedBundle>,
+    requestBundleFn: (bundle: PackagedBundle) => Promise<BuildSuccessEvent>,
+  ) {
+    this.bundleGraph = bundleGraph;
+    this.requestBundleFn = requestBundleFn;
+  }
+}

package/src/launch-editor.d.ts

@@ -0,0 +1,4 @@
+declare module 'launch-editor' {
+  function launchEditor(filePath: string): void;
+  export default launchEditor;
+}

package/src/{serverErrors.js → serverErrors.ts}

@@ -1,19 +1,20 @@
-// @flow
-export type ServerError = Error & {|
-  code: string,
-|};
+export type ServerError = Error & {
+  code: string;
+};
 
 const serverErrorList = {
   EACCES: "You don't have access to bind the server to port {port}.",
   EADDRINUSE: 'There is already a process listening on port {port}.',
-};
+} as const;
 
 export default function serverErrors(err: ServerError, port: number): string {
   let desc = `Error: ${
     err.code
   } occurred while setting up server on port ${port.toString()}.`;
 
+  // @ts-expect-error TS7053
   if (serverErrorList[err.code]) {
+    // @ts-expect-error TS7053
     desc = serverErrorList[err.code].replace(/{port}/g, port);
   }
 

package/src/types.ts

@@ -0,0 +1,46 @@
+import type {
+  ServerOptions,
+  PluginLogger,
+  HMROptions,
+  HTTPSOptions,
+  FilePath,
+  PackageManager,
+} from '@atlaspack/types';
+import type {FileSystem} from '@atlaspack/fs';
+import type {HTTPServer} from '@atlaspack/utils';
+import {IncomingMessage, ServerResponse} from 'http';
+
+interface HTTPRequest extends IncomingMessage {
+  originalUrl?: string;
+}
+
+export type Request = HTTPRequest;
+export type Response = ServerResponse;
+
+export type DevServerOptions = ServerOptions & {
+  projectRoot: string;
+  publicUrl: string;
+  cacheDir: string;
+  inputFS: FileSystem;
+  outputFS: FileSystem;
+  logger: PluginLogger;
+  hmrOptions?: HMROptions | null | undefined;
+  packageManager: PackageManager;
+};
+
+// TODO: Figure out if there is a node.js type that could be imported with a complete ServerError
+export type ServerError = Error & {
+  code: string;
+};
+
+export type HMRServerOptions = {
+  devServer?: HTTPServer;
+  addMiddleware?: (handler: (req: Request, res: Response) => boolean) => void;
+  port: number;
+  host?: string | null | undefined;
+  logger: PluginLogger;
+  https?: HTTPSOptions | boolean;
+  cacheDir: FilePath;
+  inputFS: FileSystem;
+  outputFS: FileSystem;
+};

package/{src/templates → templates}/404.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package/{src/templates → templates}/500.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package/test/StaticServerDataProvider.test.ts

@@ -0,0 +1,131 @@
+import assert from 'assert';
+import sinon from 'sinon';
+import path from 'path';
+
+import {StaticServerDataProvider} from '../src/StaticServerDataProvider';
+
+type MockBundle = {
+  name: string;
+  filePath: string;
+};
+
+describe('StaticServerDataProvider', () => {
+  describe('getHTMLBundleFilePaths', () => {
+    it('returns an empty array when no bundleGraph is set', () => {
+      const provider = new StaticServerDataProvider('/dist');
+      assert.deepStrictEqual(provider.getHTMLBundleFilePaths(), []);
+    });
+
+    it('filters only .html bundles and returns relative paths', () => {
+      const distDir = path.resolve('/project/dist');
+      const provider = new StaticServerDataProvider(distDir);
+
+      const bundles: MockBundle[] = [
+        {
+          name: 'index.html',
+          filePath: path.join(distDir, 'index.html'),
+        },
+        {
+          name: 'app.js',
+          filePath: path.join(distDir, 'app.js'),
+        },
+        {
+          name: 'about/index.html',
+          filePath: path.join(distDir, 'about', 'index.html'),
+        },
+      ];
+
+      const bundleGraphMock = {
+        getBundles: () => bundles,
+      } as any;
+
+      // We don't care about requestBundleFn for this test, provide a noop.
+      provider.update(bundleGraphMock, () => Promise.resolve({} as any));
+
+      const htmlPaths = provider.getHTMLBundleFilePaths().sort();
+      assert.deepStrictEqual(htmlPaths, ['about/index.html', 'index.html']);
+    });
+  });
+
+  describe('requestBundle', () => {
+    it('returns "not-found" when no bundleGraph is set', async () => {
+      const provider = new StaticServerDataProvider('/dist');
+      const result = await provider.requestBundle('index.html');
+      assert.strictEqual(result, 'not-found');
+    });
+
+    it('returns "not-found" when the bundle is not present in the graph', async () => {
+      const distDir = '/dist';
+      const bundles: MockBundle[] = [
+        {name: 'index.html', filePath: path.join(distDir, 'index.html')},
+      ];
+      const bundleGraphMock = {
+        getBundles: () => bundles,
+      } as any;
+
+      const provider = new StaticServerDataProvider(distDir);
+      provider.update(bundleGraphMock, () => Promise.resolve({} as any));
+
+      const result = await provider.requestBundle('missing.html');
+      assert.strictEqual(result, 'not-found');
+    });
+
+    it('returns "not-found" when requestBundleFn is not set', async () => {
+      const distDir = '/dist';
+      const bundles: MockBundle[] = [
+        {name: 'index.html', filePath: path.join(distDir, 'index.html')},
+      ];
+      const provider = new StaticServerDataProvider(distDir);
+      // Directly assign bundleGraph without a requestBundleFn
+      (provider as any).bundleGraph = {getBundles: () => bundles} as any;
+
+      const result = await provider.requestBundle('index.html');
+      assert.strictEqual(result, 'not-found');
+    });
+
+    it('calls requestBundleFn and returns "requested" for a matching bundle', async () => {
+      const distDir = '/dist';
+      const bundles: MockBundle[] = [
+        {name: 'index.html', filePath: path.join(distDir, 'index.html')},
+      ];
+      const bundleGraphMock = {
+        getBundles: () => bundles,
+      } as any;
+
+      const requestBundleFn = sinon.stub().resolves();
+
+      const provider = new StaticServerDataProvider(distDir);
+      provider.update(bundleGraphMock, requestBundleFn);
+
+      const result = await provider.requestBundle('index.html');
+
+      assert.strictEqual(result, 'requested');
+      sinon.assert.calledOnce(requestBundleFn);
+      sinon.assert.calledWithExactly(requestBundleFn, bundles[0]);
+    });
+
+    it('handles nested bundle paths correctly', async () => {
+      const distDir = '/dist';
+      const bundles: MockBundle[] = [
+        {
+          name: 'nested/index.html',
+          filePath: path.join(distDir, 'nested', 'index.html'),
+        },
+      ];
+      const bundleGraphMock = {
+        getBundles: () => bundles,
+      } as any;
+
+      const requestBundleFn = sinon.stub().resolves();
+
+      const provider = new StaticServerDataProvider(distDir);
+      provider.update(bundleGraphMock, requestBundleFn);
+
+      const result = await provider.requestBundle('nested/index.html');
+
+      assert.strictEqual(result, 'requested');
+      sinon.assert.calledOnce(requestBundleFn);
+      sinon.assert.calledWithExactly(requestBundleFn, bundles[0]);
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../core/plugin/tsconfig.json"
+    },
+    {
+      "path": "../../core/types/tsconfig.json"
+    },
+    {
+      "path": "../../core/utils/tsconfig.json"
+    }
+  ]
+}