@atlaspack/reporter-dev-server 2.14.22 → 2.14.24

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaspack/reporter-dev-server
 
+## 2.14.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @atlaspack/utils@2.18.1
+  - @atlaspack/plugin@2.14.24
+  - @atlaspack/types@2.15.14
+
+## 2.14.23
+
+### Patch Changes
+
+- Updated dependencies [[`23d561e`](https://github.com/atlassian-labs/atlaspack/commit/23d561e51e68b0c38fd1ff4e4fb173e5e7b01cf2)]:
+  - @atlaspack/utils@2.18.0
+  - @atlaspack/types@2.15.13
+  - @atlaspack/plugin@2.14.23
+
 ## 2.14.22
 
 ### Patch Changes

package/lib/Server.js

@@ -88,16 +88,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // @ts-expect-error TS2307
 
-// @ts-expect-error TS7016
-
-// @ts-expect-error TS7016
-
-// @ts-expect-error TS7016
-
-// @ts-expect-error TS7016
-
-// @ts-expect-error TS7016
-
 function setHeaders(res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET, HEAD, PUT, PATCH, POST, DELETE');
@@ -425,13 +415,10 @@ class Server {
       }
     };
     const app = (0, _connect().default)();
-    // @ts-expect-error TS7006
     app.use((req, res, next) => {
       setHeaders(res);
       next();
     });
-
-    // @ts-expect-error TS7006
     app.use((req, res, next) => {
       if (req.url === '/__parcel_healthcheck') {
         res.statusCode = 200;

package/lib/ServerDataProvider.js

@@ -0,0 +1 @@
+"use strict";

package/lib/StaticServerDataProvider.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StaticServerDataProvider = void 0;
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * An implementation of ServerDataProvider provides data from a direct `bundleGraph`
+ * and `requestBundle` function.
+ */
+class StaticServerDataProvider {
+  bundleGraph = null;
+  requestBundleFn = null;
+  constructor(distDir) {
+    this.distDir = distDir;
+  }
+  getHTMLBundleFilePaths() {
+    var _this$bundleGraph;
+    return ((_this$bundleGraph = this.bundleGraph) === null || _this$bundleGraph === void 0 ? void 0 : _this$bundleGraph.getBundles().filter(b => _path().default.posix.extname(b.name) === '.html').map(b => _path().default.relative(this.distDir, b.filePath))) ?? [];
+  }
+  async requestBundle(requestedPath) {
+    var _this$bundleGraph2;
+    const bundle = (_this$bundleGraph2 = this.bundleGraph) === null || _this$bundleGraph2 === void 0 ? void 0 : _this$bundleGraph2.getBundles().find(b => {
+      const relativePath = _path().default.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, requestBundleFn) {
+    this.bundleGraph = bundleGraph;
+    this.requestBundleFn = requestBundleFn;
+  }
+}
+exports.StaticServerDataProvider = StaticServerDataProvider;

package/lib/launch-editor.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/types/ServerDataProvider.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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/lib/types/StaticServerDataProvider.d.ts

@@ -0,0 +1,23 @@
+import type { BundleGraph, PackagedBundle, BuildSuccessEvent } from '@atlaspack/types';
+import { ServerDataProvider } from './ServerDataProvider';
+/**
+ * An implementation of ServerDataProvider provides data from a direct `bundleGraph`
+ * and `requestBundle` function.
+ */
+export declare class StaticServerDataProvider implements ServerDataProvider {
+    private distDir;
+    private bundleGraph;
+    private requestBundleFn;
+    constructor(distDir: string);
+    getHTMLBundleFilePaths(): string[];
+    requestBundle(requestedPath: string): Promise<'requested' | 'not-found'>;
+    /**
+     * 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>): void;
+}

package/lib/types/types.d.ts

@@ -0,0 +1,34 @@
+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;
+};
+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;
+};
+export {};

package/lib/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/reporter-dev-server",
-  "version": "2.14.22",
+  "version": "2.14.24",
   "description": "Blazing fast, zero configuration web application bundler",
   "license": "(MIT OR Apache-2.0)",
   "type": "commonjs",
@@ -13,7 +13,7 @@
   },
   "main": "./lib/ServerReporter.js",
   "source": "./src/ServerReporter.ts",
-  "types": "./lib/ServerReporter.d.ts",
+  "types": "./lib/types/ServerReporter.d.ts",
   "engines": {
     "node": ">= 16.0.0"
   },
@@ -26,9 +26,9 @@
     }
   },
   "dependencies": {
-    "@atlaspack/plugin": "2.14.22",
-    "@atlaspack/utils": "2.17.4",
-    "@atlaspack/types": "2.15.12",
+    "@atlaspack/plugin": "2.14.24",
+    "@atlaspack/utils": "2.18.1",
+    "@atlaspack/types": "2.15.14",
     "connect": "^3.7.0",
     "ejs": "^3.1.6",
     "fresh": "^0.5.2",
@@ -40,9 +40,14 @@
     "ws": "^7.0.0"
   },
   "devDependencies": {
-    "@atlaspack/babel-preset": "2.14.2"
+    "@atlaspack/babel-preset": "2.14.2",
+    "@types/connect": "^3.4.38",
+    "@types/ejs": "^3.1.5",
+    "@types/fresh": "^0.5.3",
+    "@types/serve-handler": "^6.1.4"
   },
   "scripts": {
-    "check-ts": "tsc --emitDeclarationOnly --rootDir src"
+    "check-ts": "tsc --emitDeclarationOnly --rootDir src",
+    "build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
   }
-}
+}

package/src/Server.ts

@@ -24,17 +24,12 @@ import {
 } from '@atlaspack/utils';
 import serverErrors from './serverErrors';
 import fs from 'fs';
-// @ts-expect-error TS7016
 import ejs from 'ejs';
-// @ts-expect-error TS7016
 import connect from 'connect';
-// @ts-expect-error TS7016
 import serveHandler from 'serve-handler';
 import {createProxyMiddleware} from 'http-proxy-middleware';
 import {URL, URLSearchParams} from 'url';
-// @ts-expect-error TS7016
 import launchEditor from 'launch-editor';
-// @ts-expect-error TS7016
 import fresh from 'fresh';
 
 export function setHeaders(res: Response) {
@@ -504,13 +499,11 @@ export default class Server {
     };
 
     const app = connect();
-    // @ts-expect-error TS7006
     app.use((req, res, next) => {
       setHeaders(res);
       next();
     });
 
-    // @ts-expect-error TS7006
     app.use((req, res, next) => {
       if (req.url === '/__parcel_healthcheck') {
         res.statusCode = 200;

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/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/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/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]);
+    });
+  });
+});