StatikLiveReloadPlugin.js

/* jshint node:true */
// Based on https://github.com/statianzo/webpack-livereload-plugin

const crypto = require('crypto');
const lr = require('tiny-lr');
const portfinder = require('portfinder');
const servers = {};

const PLUGIN_NAME = 'StatikLiveReloadPlugin';

class StatikLiveReloadPlugin {
  constructor(options = {}) {
    this.defaultPort = 35729;
    this.options = Object.assign(
      {
        protocol: '',
        port: this.defaultPort,
        hostname: '" + location.hostname + "',
        ignore: null,
        quiet: false,
        useSourceHash: false,
        useSourceSize: false,
        appendScriptTag: false,
        delay: 0,
      },
      options
    );

    // Random alphanumeric string appended to id to allow multiple instances of live reload
    this.instanceId = crypto.randomBytes(8).toString('hex');
    this.lastHash = null;
    this.lastChildHashes = [];
    this.server = null;
    this.sourceHashs = {};
    this.sourceSizes = {};
    this.webpack = null;
    this.infrastructureLogger = null;
    this.isWebpack4 = false;
  }

  apply(compiler) {
    this.webpack = compiler.webpack ? compiler.webpack : require('webpack');
    this.infrastructureLogger = compiler.getInfrastructureLogger ? compiler.getInfrastructureLogger(PLUGIN_NAME) : null;
    this.isWebpack4 = compiler.webpack ? false : typeof compiler.resolvers !== 'undefined';

    compiler.hooks.compilation.tap(PLUGIN_NAME, this._applyCompilation.bind(this));
    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, this._start.bind(this));
    compiler.hooks.afterEmit.tap(PLUGIN_NAME, this._afterEmit.bind(this));
    compiler.hooks.emit.tap(PLUGIN_NAME, this._emit.bind(this));
    compiler.hooks.failed.tap(PLUGIN_NAME, this._failed.bind(this));
  }

  /**
   * @param a1
   * @param a2
   * @returns {boolean|*}
   */
  static arraysEqual(a1, a2) {
    return a1.length === a2.length && a1.every((v, i) => v === a2[i]);
  }

  /**
   * @param str
   * @returns {string}
   */
  static generateHashCode(str) {
    const hash = crypto.createHash('sha256');
    hash.update(str);
    return hash.digest('hex');
  }

  /**
   *
   * @param compilation
   * @returns {*}
   * @private
   */
  _applyCompilation(compilation) {
    if (this.isWebpack4) {
      return compilation.mainTemplate.hooks.startup.tap(PLUGIN_NAME, this._scriptTag.bind(this));
    }

    this.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).renderRequire.tap(
      PLUGIN_NAME,
      this._scriptTag.bind(this)
    );
  }

  /**
   * @param watching
   * @param cb
   * @private
   */
  _start(watching, cb) {
    if (servers[this.options.port]) {
      this.server = servers[this.options.port];
      return cb();
    }

    const listen = (err = null, port = null) => {
      if (err) return cb(err);

      this.options.port = port || this.options.port;

      this.server = servers[this.options.port] = lr({
        ...this.options,
        errorListener: (err) => {
          this.logger.error(`Live Reload disabled: ${err.message}`);
          if (err.code !== 'EADDRINUSE') {
            this.logger.error(err.stack);
          }
          cb();
        },
      });

      this.server.listen(this.options.port, (err) => {
        if (!err && !this.options.quiet) {
          this.logger.info(`Live Reload listening on port ${this.options.port}`);
        }
        cb();
      });
    };

    if (this.options.port === 0) {
      portfinder.basePort = this.defaultPort;
      portfinder.getPort(listen);
    } else {
      listen();
    }
  }

  /**
   * @returns {boolean}
   * @private
   */
  _isRunning() {
    return !!this.server;
  }

  /**
   * @private
   * @param compilation
   */
  _afterEmit(compilation) {
    const hash = compilation.hash;
    const childHashes = (compilation.children || []).map((child) => child.hash);

    const include = Object.entries(compilation.assets).map((data) => data[0]);
    if (this._isRunning() && include.length > 0) {
      this.lastHash = hash;
      this.lastChildHashes = childHashes;
      setTimeout(() => {
        this.server.notifyClients(include);
      }, this.options.delay);
    }
  }

  /**
   * @private
   * @param compilation
   */
  _emit(compilation) {
    Object.entries(compilation.assets).forEach(this._calculateSourceHash.bind(this));
  }

  /**
   * @private
   */
  _failed() {
    this.lastHash = null;
    this.lastChildHashes = [];
    this.sourceHashs = {};
    this.sourceSizes = {};
  }

  /**
   * @returns {string}
   * @private
   */
  _autoloadJs() {
    const protocol = this.options.protocol;
    const fullProtocol = `${protocol}${protocol ? ':' : ''}`;
    return `
        // webpack-livereload-plugin
        (function() {
          if (typeof window === "undefined") { return };
          var id = "webpack-livereload-plugin-script-${this.instanceId}";
          if (document.getElementById(id)) { return; }
          var el = document.createElement("script");
          el.id = id;
          el.async = true;
          el.src = "${fullProtocol}//${this.options.hostname}:${this.options.port}/livereload.js";
          document.getElementsByTagName("head")[0].appendChild(el);
          console.log("[Live Reload] enabled");
        }());
        `;
  }

  /**
   * @param source
   * @returns {*}
   * @private
   */
  _scriptTag(source) {
    if (this.options.appendScriptTag && this._isRunning()) {
      return this._autoloadJs() + source;
    } else {
      return source;
    }
  }

  /**
   * Calculate compiled source hash
   *
   * @param data
   * @returns {void}
   * @private
   */
  _calculateSourceHash(data) {
    if (!this.options.useSourceHash) return;

    // Calculate source hash
    this.sourceHashs[data[0]] = {
      hash: this.sourceHashs[data[0]] ? this.sourceHashs[data[0]].hash : null,
      calculated: StatikLiveReloadPlugin.generateHashCode(data[1].source()),
    };
  }

  /**
   * @private
   */
  get logger() {
    if (this.infrastructureLogger) {
      return this.infrastructureLogger;
    }

    // Fallback logger webpack v3
    return {
      error: console.error,
      warn: console.log,
      info: console.log,
      log: console.log,
      debug: console.log,
      trace: console.log,
      group: console.log,
      groupEnd: console.log,
      groupCollapsed: console.log,
      status: console.log,
      clear: console.log,
      profile: console.log,
    };
  }
}

module.exports = StatikLiveReloadPlugin;