@atlaspack/reporter-dev-server 2.12.1-canary.3354

package/src/Server.js

@@ -0,0 +1,544 @@
+// @flow
+
+import type {DevServerOptions, Request, Response} from './types.js.flow';
+import type {
+  BuildSuccessEvent,
+  BundleGraph,
+  FilePath,
+  PluginOptions,
+  PackagedBundle,
+} from '@atlaspack/types';
+import type {Diagnostic} from '@atlaspack/diagnostic';
+import type {FileSystem} from '@atlaspack/fs';
+import type {HTTPServer, FormattedCodeFrame} from '@atlaspack/utils';
+
+import invariant from 'assert';
+import path from 'path';
+import url from 'url';
+import {
+  ansiHtml,
+  createHTTPServer,
+  resolveConfig,
+  readConfig,
+  prettyDiagnostic,
+  relativePath,
+} from '@atlaspack/utils';
+import serverErrors from './serverErrors';
+import fs from 'fs';
+import ejs from 'ejs';
+import connect from 'connect';
+import serveHandler from 'serve-handler';
+import {createProxyMiddleware} from 'http-proxy-middleware';
+import {URL, URLSearchParams} from 'url';
+import launchEditor from 'launch-editor';
+import fresh from 'fresh';
+
+export function setHeaders(res: Response) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader(
+    'Access-Control-Allow-Methods',
+    'GET, HEAD, PUT, PATCH, POST, DELETE',
+  );
+  res.setHeader(
+    'Access-Control-Allow-Headers',
+    'Origin, X-Requested-With, Content-Type, Accept, Content-Type',
+  );
+  res.setHeader('Cache-Control', 'max-age=0, must-revalidate');
+}
+
+const SLASH_REGEX = /\//g;
+
+export const SOURCES_ENDPOINT = '/__atlaspack_source_root';
+const EDITOR_ENDPOINT = '/__atlaspack_launch_editor';
+const TEMPLATE_404 = fs.readFileSync(
+  path.join(__dirname, 'templates/404.html'),
+  'utf8',
+);
+
+const TEMPLATE_500 = fs.readFileSync(
+  path.join(__dirname, 'templates/500.html'),
+  'utf8',
+);
+type NextFunction = (req: Request, res: Response, next?: (any) => any) => any;
+
+export default class Server {
+  pending: boolean;
+  pendingRequests: Array<[Request, Response]>;
+  middleware: Array<(req: Request, res: Response) => boolean>;
+  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>;
+
+  constructor(options: DevServerOptions) {
+    this.options = options;
+    try {
+      this.rootPath = new URL(options.publicUrl).pathname;
+    } catch (e) {
+      this.rootPath = options.publicUrl;
+    }
+    this.pending = true;
+    this.pendingRequests = [];
+    this.middleware = [];
+    this.bundleGraph = null;
+    this.requestBundle = null;
+    this.errors = null;
+  }
+
+  buildStart() {
+    this.pending = true;
+  }
+
+  buildSuccess(
+    bundleGraph: BundleGraph<PackagedBundle>,
+    requestBundle: (bundle: PackagedBundle) => Promise<BuildSuccessEvent>,
+  ) {
+    this.bundleGraph = bundleGraph;
+    this.requestBundle = requestBundle;
+    this.errors = null;
+    this.pending = false;
+
+    if (this.pendingRequests.length > 0) {
+      let pendingRequests = this.pendingRequests;
+      this.pendingRequests = [];
+      for (let [req, res] of pendingRequests) {
+        this.respond(req, res);
+      }
+    }
+  }
+
+  async buildError(options: PluginOptions, diagnostics: Array<Diagnostic>) {
+    this.pending = false;
+    this.errors = await Promise.all(
+      diagnostics.map(async d => {
+        let ansiDiagnostic = await prettyDiagnostic(d, options);
+
+        return {
+          message: ansiHtml(ansiDiagnostic.message),
+          stack: ansiDiagnostic.stack ? ansiHtml(ansiDiagnostic.stack) : null,
+          frames: ansiDiagnostic.frames.map(f => ({
+            location: f.location,
+            code: ansiHtml(f.code),
+          })),
+          hints: ansiDiagnostic.hints.map(hint => ansiHtml(hint)),
+          documentation: d.documentationURL ?? '',
+        };
+      }),
+    );
+  }
+
+  respond(req: Request, res: Response): mixed {
+    if (this.middleware.some(handler => handler(req, res))) return;
+    let {pathname, search} = url.parse(req.originalUrl || req.url);
+    if (pathname == null) {
+      pathname = '/';
+    }
+
+    if (pathname.startsWith(EDITOR_ENDPOINT) && search) {
+      let query = new URLSearchParams(search);
+      let file = query.get('file');
+      if (file) {
+        // File location might start with /__atlaspack_source_root if it came from a source map.
+        if (file.startsWith(SOURCES_ENDPOINT)) {
+          file = file.slice(SOURCES_ENDPOINT.length + 1);
+        }
+        launchEditor(file);
+      }
+      res.end();
+    } else if (this.errors) {
+      return this.send500(req, res);
+    } else if (path.extname(pathname) === '') {
+      // If the URL doesn't start with the public path, or the URL doesn't
+      // have a file extension, send the main HTML bundle.
+      return this.sendIndex(req, res);
+    } else if (pathname.startsWith(SOURCES_ENDPOINT)) {
+      req.url = pathname.slice(SOURCES_ENDPOINT.length);
+      return this.serve(
+        this.options.inputFS,
+        this.options.projectRoot,
+        req,
+        res,
+        () => this.send404(req, res),
+      );
+    } else if (pathname.startsWith(this.rootPath)) {
+      // Otherwise, serve the file from the dist folder
+      req.url =
+        this.rootPath === '/' ? pathname : pathname.slice(this.rootPath.length);
+      if (req.url[0] !== '/') {
+        req.url = '/' + req.url;
+      }
+      return this.serveBundle(req, res, () => this.sendIndex(req, res));
+    } else {
+      return this.send404(req, res);
+    }
+  }
+
+  sendIndex(req: Request, res: Response) {
+    if (this.bundleGraph) {
+      // If the main asset is an HTML file, serve it
+      let htmlBundleFilePaths = this.bundleGraph
+        .getBundles()
+        .filter(bundle => path.posix.extname(bundle.name) === '.html')
+        .map(bundle => {
+          return `/${relativePath(
+            this.options.distDir,
+            bundle.filePath,
+            false,
+          )}`;
+        });
+
+      let indexFilePath = null;
+      let {pathname: reqURL} = url.parse(req.originalUrl || req.url);
+
+      if (!reqURL) {
+        reqURL = '/';
+      }
+
+      if (htmlBundleFilePaths.length === 1) {
+        indexFilePath = htmlBundleFilePaths[0];
+      } else {
+        let bestMatch = null;
+        for (let bundle of htmlBundleFilePaths) {
+          let bundleDir = path.posix.dirname(bundle);
+          let bundleDirSubdir = bundleDir === '/' ? bundleDir : bundleDir + '/';
+          let withoutExtension = path.posix.basename(
+            bundle,
+            path.posix.extname(bundle),
+          );
+          let isIndex = withoutExtension === 'index';
+
+          let matchesIsIndex = null;
+          if (
+            isIndex &&
+            (reqURL.startsWith(bundleDirSubdir) || reqURL === bundleDir)
+          ) {
+            // bundle is /bar/index.html and (/bar or something inside of /bar/** was requested was requested)
+            matchesIsIndex = true;
+          } else if (reqURL == path.posix.join(bundleDir, withoutExtension)) {
+            // bundle is /bar/foo.html and /bar/foo was requested
+            matchesIsIndex = false;
+          }
+          if (matchesIsIndex != null) {
+            let depth = bundle.match(SLASH_REGEX)?.length ?? 0;
+            if (
+              bestMatch == null ||
+              // This one is more specific (deeper)
+              bestMatch.depth < depth ||
+              // This one is just as deep, but the bundle name matches and not just index.html
+              (bestMatch.depth === depth && bestMatch.isIndex)
+            ) {
+              bestMatch = {bundle, depth, isIndex: matchesIsIndex};
+            }
+          }
+        }
+        indexFilePath = bestMatch?.['bundle'] ?? htmlBundleFilePaths[0];
+      }
+
+      if (indexFilePath) {
+        req.url = indexFilePath;
+        this.serveBundle(req, res, () => this.send404(req, res));
+      } else {
+        this.send404(req, res);
+      }
+    } else {
+      this.send404(req, res);
+    }
+  }
+
+  async serveBundle(
+    req: Request,
+    res: Response,
+    next: NextFunction,
+  ): Promise<void> {
+    let bundleGraph = this.bundleGraph;
+    if (bundleGraph) {
+      let {pathname} = url.parse(req.url);
+      if (!pathname) {
+        this.send500(req, res);
+        return;
+      }
+
+      let requestedPath = path.normalize(pathname.slice(1));
+      let bundle = bundleGraph
+        .getBundles()
+        .find(
+          b =>
+            path.relative(this.options.distDir, b.filePath) === requestedPath,
+        );
+      if (!bundle) {
+        this.serveDist(req, res, next);
+        return;
+      }
+
+      invariant(this.requestBundle != null);
+      try {
+        await this.requestBundle(bundle);
+      } catch (err) {
+        this.send500(req, res);
+        return;
+      }
+
+      this.serveDist(req, res, next);
+    } else {
+      this.send404(req, res);
+    }
+  }
+
+  serveDist(
+    req: Request,
+    res: Response,
+    next: NextFunction,
+  ): Promise<void> | Promise<mixed> {
+    return this.serve(
+      this.options.outputFS,
+      this.options.distDir,
+      req,
+      res,
+      next,
+    );
+  }
+
+  async serve(
+    fs: FileSystem,
+    root: FilePath,
+    req: Request,
+    res: Response,
+    next: NextFunction,
+  ): Promise<mixed> {
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+      // method not allowed
+      res.statusCode = 405;
+      res.setHeader('Allow', 'GET, HEAD');
+      res.setHeader('Content-Length', '0');
+      res.end();
+      return;
+    }
+
+    try {
+      var filePath = url.parse(req.url).pathname || '';
+      filePath = decodeURIComponent(filePath);
+    } catch (err) {
+      return this.sendError(res, 400);
+    }
+
+    filePath = path.normalize('.' + path.sep + filePath);
+
+    // malicious path
+    if (filePath.includes(path.sep + '..' + path.sep)) {
+      return this.sendError(res, 403);
+    }
+
+    // join / normalize from the root dir
+    if (!path.isAbsolute(filePath)) {
+      filePath = path.normalize(path.join(root, filePath));
+    }
+
+    try {
+      var stat = await fs.stat(filePath);
+    } catch (err) {
+      if (err.code === 'ENOENT') {
+        return next(req, res);
+      }
+
+      return this.sendError(res, 500);
+    }
+
+    // Fall back to next handler if not a file
+    if (!stat || !stat.isFile()) {
+      return next(req, res);
+    }
+
+    if (fresh(req.headers, {'last-modified': stat.mtime.toUTCString()})) {
+      res.statusCode = 304;
+      res.end();
+      return;
+    }
+
+    return serveHandler(
+      req,
+      res,
+      {
+        public: root,
+        cleanUrls: false,
+      },
+      {
+        lstat: path => fs.stat(path),
+        realpath: path => fs.realpath(path),
+        createReadStream: (path, options) => fs.createReadStream(path, options),
+        readdir: path => fs.readdir(path),
+      },
+    );
+  }
+
+  sendError(res: Response, statusCode: number) {
+    res.statusCode = statusCode;
+    res.end();
+  }
+
+  send404(req: Request, res: Response) {
+    res.statusCode = 404;
+    res.end(TEMPLATE_404);
+  }
+
+  send500(req: Request, res: Response): void | Response {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.writeHead(500);
+
+    if (this.errors) {
+      return res.end(
+        ejs.render(TEMPLATE_500, {
+          errors: this.errors,
+          hmrOptions: this.options.hmrOptions,
+        }),
+      );
+    }
+  }
+
+  logAccessIfVerbose(req: Request) {
+    this.options.logger.verbose({
+      message: `Request: ${req.headers.host}${req.originalUrl || req.url}`,
+    });
+  }
+
+  /**
+   * Load proxy table from package.json and apply them.
+   */
+  async applyProxyTable(app: any): Promise<Server> {
+    // avoid skipping project root
+    const fileInRoot: string = path.join(this.options.projectRoot, 'index');
+
+    const configFilePath = await resolveConfig(
+      this.options.inputFS,
+      fileInRoot,
+      [
+        '.proxyrc.cts',
+        '.proxyrc.mts',
+        '.proxyrc.ts',
+        '.proxyrc.cjs',
+        '.proxyrc.mjs',
+        '.proxyrc.js',
+        '.proxyrc',
+        '.proxyrc.json',
+      ],
+      this.options.projectRoot,
+    );
+
+    if (!configFilePath) {
+      return this;
+    }
+
+    const filename = path.basename(configFilePath);
+
+    if (filename === '.proxyrc' || filename === '.proxyrc.json') {
+      let conf = await readConfig(this.options.inputFS, configFilePath);
+      if (!conf) {
+        return this;
+      }
+      let cfg = conf.config;
+      if (typeof cfg !== 'object') {
+        this.options.logger.warn({
+          message:
+            "Proxy table in '.proxyrc' should be of object type. Skipping...",
+        });
+        return this;
+      }
+      for (const [context, options] of Object.entries(cfg)) {
+        // each key is interpreted as context, and value as middleware options
+        app.use(createProxyMiddleware(context, options));
+      }
+    } else {
+      let cfg = await this.options.packageManager.require(
+        configFilePath,
+        fileInRoot,
+      );
+      if (
+        // $FlowFixMe
+        Object.prototype.toString.call(cfg) === '[object Module]'
+      ) {
+        cfg = cfg.default;
+      }
+
+      if (typeof cfg !== 'function') {
+        this.options.logger.warn({
+          message: `Proxy configuration file '${filename}' should export a function. Skipping...`,
+        });
+        return this;
+      }
+      cfg(app);
+    }
+
+    return this;
+  }
+
+  async start(): Promise<HTTPServer> {
+    const finalHandler = (req: Request, res: Response) => {
+      this.logAccessIfVerbose(req);
+
+      // Wait for the atlaspackInstance to finish bundling if needed
+      if (this.pending) {
+        this.pendingRequests.push([req, res]);
+      } else {
+        this.respond(req, res);
+      }
+    };
+
+    const app = connect();
+    app.use((req, res, next) => {
+      setHeaders(res);
+      next();
+    });
+
+    app.use((req, res, next) => {
+      if (req.url === '/__atlaspack_healthcheck') {
+        res.statusCode = 200;
+        res.write(`${Date.now()}`);
+        res.end();
+      } else {
+        next();
+      }
+    });
+
+    await this.applyProxyTable(app);
+    app.use(finalHandler);
+
+    let {server, stop} = await createHTTPServer({
+      cacheDir: this.options.cacheDir,
+      https: this.options.https,
+      inputFS: this.options.inputFS,
+      listener: app,
+      outputFS: this.options.outputFS,
+      host: this.options.host,
+    });
+    this.stopServer = stop;
+
+    server.listen(this.options.port, this.options.host);
+    return new Promise((resolve, reject) => {
+      server.once('error', err => {
+        this.options.logger.error(
+          ({
+            message: serverErrors(err, this.options.port),
+          }: Diagnostic),
+        );
+        reject(err);
+      });
+
+      server.once('listening', () => {
+        resolve(server);
+      });
+    });
+  }
+
+  async stop(): Promise<void> {
+    invariant(this.stopServer != null);
+    await this.stopServer();
+    this.stopServer = null;
+  }
+}

package/src/ServerReporter.js

@@ -0,0 +1,143 @@
+// @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({
+  async report({event, options, logger}) {
+    let {serveOptions, hmrOptions} = options;
+    let server = serveOptions ? servers.get(serveOptions.port) : undefined;
+    let hmrPort =
+      (hmrOptions && hmrOptions.port) || (serveOptions && serveOptions.port);
+    let hmrServer = hmrPort ? hmrServers.get(hmrPort) : undefined;
+    switch (event.type) {
+      case 'watchStart': {
+        if (serveOptions) {
+          // If there's already a server when watching has just started, something
+          // is wrong.
+          if (server) {
+            return logger.warn({
+              message: 'Trying to create the devserver but it already exists.',
+            });
+          }
+
+          let serverOptions = {
+            ...serveOptions,
+            projectRoot: options.projectRoot,
+            cacheDir: options.cacheDir,
+            // Override the target's publicUrl as that is likely meant for production.
+            // This could be configurable in the future.
+            publicUrl: serveOptions.publicUrl ?? '/',
+            inputFS: options.inputFS,
+            outputFS: options.outputFS,
+            packageManager: options.packageManager,
+            logger,
+            hmrOptions,
+          };
+
+          server = new Server(serverOptions);
+          servers.set(serveOptions.port, server);
+          const devServer = await server.start();
+
+          if (hmrOptions && hmrOptions.port === serveOptions.port) {
+            let hmrServerOptions = {
+              port: serveOptions.port,
+              host: hmrOptions.host,
+              devServer,
+              addMiddleware: handler => {
+                server?.middleware.push(handler);
+              },
+              logger,
+              https: options.serveOptions ? options.serveOptions.https : false,
+              cacheDir: options.cacheDir,
+              inputFS: options.inputFS,
+              outputFS: options.outputFS,
+            };
+            hmrServer = new HMRServer(hmrServerOptions);
+            hmrServers.set(serveOptions.port, hmrServer);
+            await hmrServer.start();
+            return;
+          }
+        }
+
+        let port = hmrOptions?.port;
+        if (typeof port === 'number') {
+          let hmrServerOptions = {
+            port,
+            host: hmrOptions?.host,
+            logger,
+            https: options.serveOptions ? options.serveOptions.https : false,
+            cacheDir: options.cacheDir,
+            inputFS: options.inputFS,
+            outputFS: options.outputFS,
+          };
+          hmrServer = new HMRServer(hmrServerOptions);
+          hmrServers.set(port, hmrServer);
+          await hmrServer.start();
+        }
+        break;
+      }
+      case 'watchEnd':
+        if (serveOptions) {
+          if (!server) {
+            return logger.warn({
+              message:
+                'Could not shutdown devserver because it does not exist.',
+            });
+          }
+          await server.stop();
+          servers.delete(server.options.port);
+        }
+        if (hmrOptions && hmrServer) {
+          await hmrServer.stop();
+          // $FlowFixMe[prop-missing]
+          hmrServers.delete(hmrServer.wss.options.port);
+        }
+        break;
+      case 'buildStart':
+        if (server) {
+          server.buildStart();
+        }
+        break;
+      case 'buildProgress':
+        if (
+          event.phase === 'bundled' &&
+          hmrServer &&
+          // Only send HMR updates before packaging if the built in dev server is used to ensure that
+          // no stale bundles are served. Otherwise emit it for 'buildSuccess'.
+          options.serveOptions !== false
+        ) {
+          await hmrServer.emitUpdate(event);
+        }
+        break;
+      case 'buildSuccess':
+        if (serveOptions) {
+          if (!server) {
+            return logger.warn({
+              message:
+                'Could not send success event to devserver because it does not exist.',
+            });
+          }
+
+          server.buildSuccess(event.bundleGraph, event.requestBundle);
+        }
+        if (hmrServer && options.serveOptions === false) {
+          await hmrServer.emitUpdate(event);
+        }
+        break;
+      case 'buildFailure':
+        // On buildFailure watchStart sometimes has not been called yet
+        // do not throw an additional warning here
+        if (server) {
+          await server.buildError(options, event.diagnostics);
+        }
+        if (hmrServer) {
+          await hmrServer.emitError(options, event.diagnostics);
+        }
+        break;
+    }
+  },
+}): Reporter);

package/src/serverErrors.js

@@ -0,0 +1,21 @@
+// @flow
+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}.',
+};
+
+export default function serverErrors(err: ServerError, port: number): string {
+  let desc = `Error: ${
+    err.code
+  } occurred while setting up server on port ${port.toString()}.`;
+
+  if (serverErrorList[err.code]) {
+    desc = serverErrorList[err.code].replace(/{port}/g, port);
+  }
+
+  return desc;
+}