anypack-plugin-serve 0.1.0-beta.1 → 0.1.0

package/lib/index.js

@@ -25,6 +25,9 @@ const { validate } = require('./validate');
 const defaults = {
   // leave `client` undefined
   // client: null,
+  client: {
+    retry: true,
+  },
   compress: null,
   headers: null,
   historyFallback: false,
@@ -46,7 +49,8 @@ const defaults = {
 const key = 'anypack-plugin-serve';
 const nanoid = customAlphabet('1234567890abcdef', 7);
 
-let instance = null;
+let activeInstanceId = null;
+let activeLog = null;
 
 class AnypackPluginServe extends EventEmitter {
   constructor(opts = {}) {
@@ -65,16 +69,18 @@ class AnypackPluginServe extends EventEmitter {
     // of the plugin to be tested within the same context. If you find this, use this at your own
     // peril.
     /* istanbul ignore if */
-    if (!opts.allowMany && instance) {
-      instance.log.error(
+    if (!opts.allowMany && activeInstanceId !== null) {
+      activeLog.error(
         'Duplicate instances created. Only the first instance of this plugin will be active.',
       );
       return;
     }
 
-    instance = this;
+    const instanceId = Symbol();
+    this._instanceId = instanceId;
+    activeInstanceId = instanceId;
 
-    const options = Object.assign({}, defaults, opts);
+    const options = { ...defaults, ...opts };
 
     if (options.compress === true) {
       options.compress = {};
@@ -107,6 +113,7 @@ class AnypackPluginServe extends EventEmitter {
     }
 
     this.log = getLogger(options.log || {});
+    activeLog = this.log;
     this.options = options;
     this.compilers = [];
     this.state = {};
@@ -117,7 +124,7 @@ class AnypackPluginServe extends EventEmitter {
 
     // only allow once instance of the plugin to run for a build
     /* istanbul ignore if */
-    if (instance !== this) {
+    if (activeInstanceId !== this._instanceId) {
       return;
     }
 
@@ -125,13 +132,9 @@ class AnypackPluginServe extends EventEmitter {
   }
 
   attach() {
-    const self = this;
-    const result = {
-      apply(compiler) {
-        return self.hook(compiler);
-      },
+    return {
+      apply: (compiler) => this.hook(compiler),
     };
-    return result;
   }
 
   // #138. handle emitted events that don't have a listener registered so they can be sent via WebSocket
@@ -151,7 +154,8 @@ class AnypackPluginServe extends EventEmitter {
   }
 
   hook(compiler) {
-    const { done, invalid, watchClose, watchRun } = compiler.hooks;
+    const { done, invalid, watchClose, watchRun, beforeCompile } =
+      compiler.hooks;
 
     if (!compiler.wpsId) {
       compiler.wpsId = nanoid();
@@ -199,6 +203,7 @@ class AnypackPluginServe extends EventEmitter {
 
     // we do this emit because webpack caches and optimizes the hooks, so there's no way to detach
     // a listener/hook.
+    beforeCompile.tap(key, () => this.emit('build', compiler.name, compiler));
     done.tap(key, (stats) => this.emit('done', stats, compiler));
     invalid.tap(key, (filePath) => this.emit('invalid', filePath, compiler));
     watchClose.tap(key, () => this.emit('close', compiler));
@@ -234,7 +239,7 @@ class AnypackPluginServe extends EventEmitter {
         wpsId: compiler.wpsId,
       };
 
-      const defineObject = Object.assign({}, this.options, compilerData);
+      const defineObject = { ...this.options, ...compilerData };
       const defineData = { ʎɐɹɔosǝʌɹǝs: JSON.stringify(defineObject) };
       const definePlugin = new compiler.webpack.DefinePlugin(defineData);
 

package/lib/middleware.js

@@ -126,11 +126,11 @@ const getBuiltins = (app, options) => {
     }
   };
 
-  const statik = (root, opts = { dev: true }) => {
-    const paths = [].concat(root || options.static);
+  const statik = (root, opts) => {
+    const paths = [root || options.static].flat();
     staticPaths = paths;
     for (const path of paths) {
-      app.use(sirv(path, opts));
+      app.use(sirv(path, opts ?? { dev: true }));
     }
   };
 

package/lib/plugins/hmr.js

@@ -27,15 +27,15 @@ const init = function init(compiler, log) {
   );
 
   /* istanbul ignore else */
-  if (!hasHMRPlugin) {
-    addPlugin(compiler);
-  } else {
+  if (hasHMRPlugin) {
     log.error(
       'anypack-plugin-serve adds HotModuleReplacementPlugin automatically. Please remove it from your config.',
     );
     throw new PluginExistsError(
       'HotModuleReplacementPlugin exists in the specified configuration.',
     );
+  } else {
+    addPlugin(compiler);
   }
 };
 

package/lib/plugins/ramdisk.js

@@ -29,8 +29,9 @@ const readPkgName = () => {
   try {
     const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
     return pkg.name;
-  } catch (_error) {
+  } catch (error) {
     // istanbul ignore next
+    console.warn(`Could not read package name: ${error.message}`);
     return null;
   }
 };

package/lib/plugins/ramdisk_lib.js

@@ -102,18 +102,17 @@ function run(command, ...args) {
 
 class Ramdisk {
   constructor(opts = {}) {
-    const partialOpts = Object.assign({}, defaults, opts);
-    const options = Object.assign({}, partialOpts, {
+    const partialOpts = { ...defaults, ...opts };
+    const options = {
+      ...partialOpts,
       blocks: partialOpts.bytes / partialOpts.blockSize,
-    });
+    };
 
     this.options = options;
 
     this.commands = getCommands();
     this.options.diskPath = this.commands?.root(this.options);
 
-    // const options = Object.assign({}, opts, { root: commands.root });
-
     this.init();
   }
 

package/lib/routes.js

@@ -11,60 +11,65 @@
 const { unstyle } = require('ansi-colors');
 const stringify = require('json-stringify-safe');
 
-const prep = (data) => stringify(data);
-
-const statsOptions = {
-  all: false,
-  cached: true,
-  children: true,
-  hash: true,
-  modules: true,
-  timings: true,
-  exclude: ['node_modules', 'bower_components', 'components'],
-};
+function registerEvent(ee, socket, event, handler) {
+  ee.on(event, handler);
+
+  socket.on('close', () => {
+    ee.removeListener(event, handler);
+  });
+}
 
 const setupRoutes = function setupRoutes() {
   const { app, options } = this;
-  const events = ['build', 'done', 'invalid', 'progress'];
+
+  let buildDone = false;
+  this.on('build', () => {
+    buildDone = false;
+  });
+  this.on('done', () => {
+    buildDone = true;
+  });
+
   const connect = async (req, _res) => {
     if (req.ws) {
       const socket = await req.ws();
-      const send = (data) => {
+      let lastHash = null;
+      const send = (action, data) => {
         if (socket.readyState !== 1) {
           return;
         }
-        socket.send(data);
+        socket.send(stringify({ action, data }));
       };
 
-      socket.build = (compilerName = '<unknown>', { wpsId }) => {
-        send(prep({ action: 'build', data: { compilerName, wpsId } }));
-      };
+      registerEvent(this, socket, 'build', (compilerName, { wpsId }) => {
+        send('build', { compilerName: compilerName ?? '<unknown>', wpsId });
+      });
 
-      socket.done = (stats, { wpsId }) => {
+      registerEvent(this, socket, 'done', (stats, { wpsId }) => {
         const { hash } = stats;
 
-        if (socket.lastHash === hash) {
+        if (lastHash === hash) {
           return;
         }
 
-        send(prep({ action: 'done', data: { hash, wpsId } }));
+        send('done', { hash, wpsId });
 
-        socket.lastHash = hash;
+        lastHash = hash;
 
-        const { errors = [], warnings = [] } = stats.toJson(statsOptions);
+        if (stats.hasErrors() || stats.hasWarnings()) {
+          const renderedStats = stats.toJson('errors-warnings');
+          const { errors = [], warnings = [] } = renderedStats;
 
-        if (errors.length || warnings.length) {
-          send(
-            prep({
-              action: 'problems',
-              data: {
-                errors: errors.slice(0).map((e) => unstyle(e)),
-                hash,
-                warnings: warnings.slice(0).map((e) => unstyle(e)),
-                wpsId,
-              },
-            }),
-          );
+          send('problems', {
+            hash,
+            wpsId,
+            errors: errors
+              .slice(0)
+              .map((e) => ({ ...e, message: unstyle(e.message) })),
+            warnings: warnings
+              .slice(0)
+              .map((e) => ({ ...e, message: unstyle(e.message) })),
+          });
 
           if (errors.length) {
             return;
@@ -73,41 +78,31 @@ const setupRoutes = function setupRoutes() {
 
         if (options.hmr || options.liveReload) {
           const action = options.liveReload ? 'reload' : 'replace';
-          send(prep({ action, data: { hash, wpsId } }));
+          send(action, { hash, wpsId });
         }
-      };
+      });
 
-      socket.invalid = (filePath = '<unknown>', compiler) => {
+      registerEvent(this, socket, 'invalid', (filePath, compiler) => {
+        const path = filePath ?? '<unknown>';
         const context =
           compiler.context || compiler.options.context || process.cwd();
-        const fileName = filePath?.replace?.(context, '') || filePath;
+        const fileName = path?.replace?.(context, '') || path;
         const { wpsId } = compiler;
 
-        send(prep({ action: 'invalid', data: { fileName, wpsId } }));
-      };
-
-      socket.progress = (data) => {
-        send(prep({ action: 'progress', data }));
-      };
-
-      for (const event of events) {
-        this.on(event, socket[event]);
+        send('invalid', { fileName, wpsId });
+      });
 
-        socket.on('close', () => {
-          this.removeListener(event, socket[event]);
-        });
-      }
+      registerEvent(this, socket, 'progress', (data) => {
+        send('progress', data);
+      });
 
       // #138. handle emitted events that don't have a listener registered, and forward the message
       // onto the client via the socket
-      const unhandled = ({ eventName, data }) =>
-        send(prep({ action: eventName, data }));
-      this.on('unhandled', unhandled);
-      socket.on('close', () => {
-        this.off('unhandled', unhandled);
+      registerEvent(this, socket, 'unhandled', ({ eventName, data }) => {
+        send(eventName, data);
       });
 
-      send(prep({ action: 'connected' }));
+      send('connected', { buildDone });
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anypack-plugin-serve",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0",
   "description": "A Development Server in a Webpack Plugin",
   "license": "MPL-2.0",
   "repository": "onigoetz/anypack-plugin-serve",
@@ -33,6 +33,7 @@
   "dependencies": {
     "@polka/compression": "^1.0.0-next.25",
     "ansi-colors": "^4.1.3",
+    "anypack-overlay": "0.1.0",
     "connect-history-api-fallback": "^2.0.0",
     "empathic": "^2.0.0",
     "http-proxy-middleware": "^3.0.5",
@@ -47,14 +48,15 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.11",
-    "@rstest/core": "^0.7.7",
-    "@rstest/coverage-istanbul": "^0.1.4",
+    "@biomejs/biome": "2.4.10",
+    "@rstest/core": "^0.9.0",
+    "@rstest/coverage-istanbul": "^0.3.0",
     "del-cli": "7.0.0",
     "get-port": "^7.1.0",
     "node-fetch": "^3.3.2",
     "puppeteer": "^24.34.0",
     "random-js": "^2.1.0",
+    "rstest-sonar-reporter": "1.0.0",
     "webpack": "^5.0.0",
     "webpack-nano": "^1.0.0"
   },
@@ -66,4 +68,4 @@
     "server",
     "webpack"
   ]
-}
+}

package/lib/client/client.js

@@ -1,114 +0,0 @@
-/*
-  Copyright © 2018 Andrew Powell
-
-  This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-  The above copyright notice and this permission notice shall be
-  included in all copies or substantial portions of this Source Code Form.
-*/
-const run = (buildHash, options) => {
-  const { address, client = {}, hmr, progress, secure, status } = options;
-
-  options.firstInstance = !window.anypackPluginServe;
-
-  window.anypackPluginServe = window.anypackPluginServe || {
-    compilers: {},
-  };
-  window.anypackPluginServe.silent = !!client.silent;
-
-  const { ClientSocket } = require('./ClientSocket.js');
-  const { replace } = require('./hmr.js');
-  const { error, info, warn } = require('./log.js')();
-
-  const protocol = secure ? 'wss' : 'ws';
-  const socket = new ClientSocket(
-    client,
-    `${client.protocol || protocol}://${client.address || address}/wps`,
-  );
-
-  const { compilerName } = options;
-
-  window.anypackPluginServe.compilers[compilerName] = {};
-
-  // prevents ECONNRESET errors on the server
-  window.addEventListener('beforeunload', () => socket.close());
-
-  socket.addEventListener('message', (message) => {
-    const { action, data = {} } = JSON.parse(message.data);
-    const { errors, hash = '<?>', warnings } = data || {};
-    const shortHash = hash.slice(0, 7);
-    const identifier = options.compilerName
-      ? `(Compiler: ${options.compilerName}) `
-      : '';
-    const compiler = window.anypackPluginServe.compilers[compilerName];
-    const { wpsId } = data;
-
-    switch (action) {
-      case 'build':
-        compiler.done = false;
-        break;
-      case 'connected':
-        info(`WebSocket connected ${identifier}`);
-        break;
-      case 'done':
-        compiler.done = true;
-        break;
-      case 'problems':
-        if (data.errors.length) {
-          error(`${identifier}Build ${shortHash} produced errors:\n`, errors);
-        }
-        if (data.warnings.length) {
-          warn(
-            `${identifier}Build ${shortHash} produced warnings:\n`,
-            warnings,
-          );
-        }
-        break;
-      case 'reload':
-        window.location.reload();
-        break;
-      case 'replace':
-        // actions with a wpsId in tow indicate actions that should only be executed when the wpsId sent
-        // matches the wpsId set in options. this is how we can identify multiple compilers in the
-        // client.
-        if (wpsId && wpsId === options.wpsId) {
-          replace(buildHash, hash, hmr === 'refresh-on-failure');
-        }
-        break;
-      default:
-    }
-  });
-
-  if (options.firstInstance) {
-    if (progress === 'minimal') {
-      const { init } = require('./overlays/progress-minimal.js');
-      init(options, socket);
-    } else if (progress) {
-      const { init } = require('./overlays/progress.js');
-      init(options, socket);
-    }
-
-    if (status) {
-      const { init } = require('./overlays/status.js');
-      init(options, socket);
-    }
-
-    if (module.hot) {
-      info('Hot Module Replacement is active');
-
-      if (options.liveReload) {
-        info('Live Reload taking precedence over Hot Module Replacement');
-      }
-    } else {
-      warn('Hot Module Replacement is inactive');
-    }
-
-    if (!module.hot && options.liveReload) {
-      info('Live Reload is active');
-    }
-  }
-};
-
-module.exports = { run };

package/lib/client/overlays/progress-minimal.js

@@ -1,118 +0,0 @@
-/*
-  Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
-
-  This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-  The above copyright notice and this permission notice shall be
-  included in all copies or substantial portions of this Source Code Form.
-*/
-const { addCss, addHtml } = require('./util.js');
-
-const ns = 'wps-progress-minimal';
-const html = `
-<div id="${ns}" class="${ns}-hidden">
-  <div id="${ns}-bar"></div>
-</div>
-`;
-const css = `
-#${ns} {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 4px;
-  width: 100vw;
-  z-index: 2147483645;
-}
-
-#${ns}-bar {
-  width: 0%;
-  height: 4px;
-  background-color: rgb(186, 223, 172);
-}
-
-@keyframes ${ns}-fade {
-	0% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0;
-	}
-}
-
-.${ns}-disappear {
-  animation: ${ns}-fade .3s;
-  animation-fill-mode: forwards;
-  animation-delay: .5s;
-}
-
-.${ns}-hidden {
-  display: none;
-}
-`;
-
-let hideOnPageVisible = false;
-
-const update = (percent) => {
-  const bar = document.querySelector(`#${ns}-bar`);
-  bar.style.width = `${percent}%`;
-};
-
-const reset = (wrapper) => {
-  wrapper.classList.add(`${ns}-disappear`);
-};
-
-const init = (options, socket) => {
-  if (options.firstInstance) {
-    document.addEventListener('DOMContentLoaded', () => {
-      addCss(css);
-      addHtml(html);
-
-      const wrapper = document.querySelector(`#${ns}`);
-      wrapper.addEventListener('animationend', () => {
-        update(0);
-        wrapper.classList.add(`${ns}-hidden`);
-      });
-    });
-
-    document.addEventListener('visibilitychange', () => {
-      if (!document.hidden && hideOnPageVisible) {
-        const wrapper = document.querySelector(`#${ns}`);
-        reset(wrapper);
-        hideOnPageVisible = false;
-      }
-    });
-  }
-
-  socket.addEventListener('message', (message) => {
-    const { action, data } = JSON.parse(message.data);
-
-    if (action !== 'progress') {
-      return;
-    }
-
-    const percent = Math.floor(data.percent * 100);
-    const wrapper = document.querySelector(`#${ns}`);
-
-    if (wrapper) {
-      wrapper.classList.remove(`${ns}-hidden`, `${ns}-disappear`);
-    }
-
-    if (data.percent === 1) {
-      if (document.hidden) {
-        hideOnPageVisible = true;
-      } else {
-        reset(wrapper);
-      }
-    } else {
-      hideOnPageVisible = false;
-    }
-
-    update(percent);
-  });
-};
-
-module.exports = {
-  init,
-};