[Feature]: be able to check if HMR (hot module reload) was a success

[sibelius]

How can I check if the HMR was a success?

use case: do not live reload if the hmr worked well

I'm using this plugin to reload my backend server using rspack

const cluster = require('cluster');
const path = require('path');

const defaultOptions = {
  script: 'server.js',
  execArgv: [],
};

class ReloadServerPlugin {
  constructor({ script, execArgv = [] } = defaultOptions) {
    this.done = null;
    this.workers = [];
    this.hotReloadSucceeded = false;
    this.initialCompilationDone = false;

    cluster.setupPrimary({
      exec: path.resolve(process.cwd(), script),
      execArgv,
    });

    cluster.on('online', (worker) => {
      this.workers.push(worker);

      if (this.done) {
        this.done();
      }
    });
  }

  startServer() {
    const envs = {
      NODE_OPTIONS:
        '--enable-source-maps --no-experimental-fetch --trace-warnings --trace-deprecation',
    };

    cluster.fork(envs);
  }

  apply(compiler) {
    compiler.hooks.afterEmit.tap(
      {
        name: 'reload-server',
      },
      (compilation, callback) => {
        this.done = callback;

        // this does not work
        if (compilation.errors.length === 0) {
          this.hotReloadSucceeded = true;
        } else {
          this.hotReloadSucceeded = false;
        }

        const shouldReload =
          !this.initialCompilationDone || !this.hotReloadSucceeded;

        if (!this.initialCompilationDone) {
          this.initialCompilationDone = true;
        }

        if (!shouldReload) {
          return;
        }

        this.workers.forEach((worker) => {
          try {
            process.kill(worker.process.pid, 'SIGTERM');
          } catch (e) {
            console.warn(`Unable to kill process #${worker.process.pid}`);
          }
        });

        this.workers = [];

        this.startServer();
      },
    );

    compiler.hooks.done.tap('reload-server', (stats) => {
      if (this.hotReloadSucceeded) {
        console.log('Hot reload succeeded, server not restarted.');
      } else {
        console.log('Hot reload failed, server restarted.');
      }
    });
  }
}

how do I know if the hmr was a success or failed ?

[JSerFeng]

@LingyuCoder I'm not familiar with this, do you have any thoughts

[LingyuCoder]

I think you can try to check the assets. If .hot-update.json and .hot-update.js files are generated, the hmr was a success.

[sibelius]

What if we have more than one hot file?

[LingyuCoder]

What if we have more than one hot file?

The .hot-update.js file will be generated for each chunk. But the .hot-update.json belongs to the runtime (consisting of __webpack_modules__ and runtime modules). Therefore, if there is only one rspack/webpack runtime on the page, there will only be one .hot-update.json.

But in fact, I'm not sure how you define whether an HMR is successful. Besides generating .hot-update.js and .hot-update.json without errors during the build process, HMR also requires sending in the dev-server and receiving information on the client side, and then loading and executing the .hot-update.js in the HMR Runtime. After execution, it will trigger the redrawing of the rendering framework(such as React + React Refresh).

So if you only focus on whether the build process is successful, it can be judged through errors and assets. If you also need to pay attention to whether the subsequent dev-server and client runtime and even the rendering framework are successful, since these parts are not in rspack, it is necessary to modify the runtime code to judge.

[sibelius]

where should I modify the runtime ?

[LingyuCoder]

where should I modify the runtime ?

You can try to use compilation.hooks.runtimeModule to override runtime modules generated by rspack/webpack. But the runtimes of dev-server and refresh library(like react-refresh) are hard to be modified.

You can try to replace the dev-server runtime to your own like what rspack-dev-server does. For example, you can override the reloadApp function to send a message to your server and restart it.

And if you want to modify the refresh library, you can implement your own refresh library and add alias in development mode.