plugin.js

/* eslint-disable import/no-extraneous-dependencies */
const merge = require('deepmerge');
const Promise = require('bluebird');
const Chunk = require('webpack/lib/Chunk');
const SVGCompiler = require('svg-baker');
const spriteFactory = require('svg-baker/lib/sprite-factory');
const Sprite = require('svg-baker/lib/sprite');
const { NAMESPACE } = require('./config');
const {
  MappedList,
  replaceInModuleSource,
  replaceSpritePlaceholder,
  getWebpackVersion,
  getMatchedRule
} = require('./utils');

const webpackVersion = parseInt(getWebpackVersion(), 10);

const defaultConfig = {
  plainSprite: false,
  spriteAttrs: {}
};

class SVGSpritePlugin {
  constructor(cfg = {}) {
    const config = merge.all([defaultConfig, cfg]);
    this.config = config;

    const spriteFactoryOptions = {
      attrs: config.spriteAttrs
    };

    if (config.plainSprite) {
      spriteFactoryOptions.styles = false;
      spriteFactoryOptions.usages = false;
    }

    this.factory = ({ symbols }) => {
      const opts = merge.all([spriteFactoryOptions, { symbols }]);
      return spriteFactory(opts);
    };

    this.svgCompiler = new SVGCompiler();
    this.rules = {};
  }

  /**
   * This need to find plugin from loader context
   */
  // eslint-disable-next-line class-methods-use-this
  get NAMESPACE() {
    return NAMESPACE;
  }

  getReplacements() {
    const isPlainSprite = this.config.plainSprite === true;
    const replacements = this.map.groupItemsBySymbolFile((acc, item) => {
      acc[item.resource] = isPlainSprite ? item.url : item.useUrl;
    });
    return replacements;
  }

  // TODO optimize MappedList instantiation in each hook
  apply(compiler) {
    this.rules = getMatchedRule(compiler);

    if (compiler.hooks) {
      compiler.hooks
        .thisCompilation
        .tap(NAMESPACE, (compilation) => {
          compilation.hooks
            .normalModuleLoader
            .tap(NAMESPACE, loaderContext => loaderContext[NAMESPACE] = this);

          compilation.hooks
            .afterOptimizeChunks
            .tap(NAMESPACE, () => this.afterOptimizeChunks(compilation));

          compilation.hooks
            .optimizeExtractedChunks
            .tap(NAMESPACE, chunks => this.optimizeExtractedChunks(chunks));

          compilation.hooks
            .additionalAssets
            .tapPromise(NAMESPACE, () => {
              return this.additionalAssets(compilation);
            });
        });

      compiler.hooks
        .compilation
        .tap(NAMESPACE, (compilation) => {
          if (compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration) {
            compilation.hooks
              .htmlWebpackPluginBeforeHtmlGeneration
              .tapAsync(NAMESPACE, (htmlPluginData, callback) => {
                htmlPluginData.assets.sprites = this.beforeHtmlGeneration(compilation);

                callback(null, htmlPluginData);
              });
          }

          if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
            compilation.hooks
              .htmlWebpackPluginBeforeHtmlProcessing
              .tapAsync(NAMESPACE, (htmlPluginData, callback) => {
                htmlPluginData.html = this.beforeHtmlProcessing(htmlPluginData);

                callback(null, htmlPluginData);
              });
          }
        });
    } else {
      // Handle only main compilation
      compiler.plugin('this-compilation', (compilation) => {
        // Share svgCompiler with loader
        compilation.plugin('normal-module-loader', (loaderContext) => {
          loaderContext[NAMESPACE] = this;
        });

        // Replace placeholders with real URL to symbol (in modules processed by svg-sprite-loader)
        compilation.plugin('after-optimize-chunks', () => this.afterOptimizeChunks(compilation));

        // Hook into extract-text-webpack-plugin to replace placeholders with real URL to symbol
        compilation.plugin('optimize-extracted-chunks', chunks => this.optimizeExtractedChunks(chunks));

        // Hook into html-webpack-plugin to add `sprites` variable into template context
        compilation.plugin('html-webpack-plugin-before-html-generation', (htmlPluginData, done) => {
          htmlPluginData.assets.sprites = this.beforeHtmlGeneration(compilation);

          done(null, htmlPluginData);
        });

        // Hook into html-webpack-plugin to replace placeholders with real URL to symbol
        compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, done) => {
          htmlPluginData.html = this.beforeHtmlProcessing(htmlPluginData);
          done(null, htmlPluginData);
        });

        // Create sprite chunk
        compilation.plugin('additional-assets', (done) => {
          return this.additionalAssets(compilation)
            .then(() => {
              done();
              return true;
            })
            .catch(e => done(e));
        });
      });
    }
  }

  additionalAssets(compilation) {
    const itemsBySprite = this.map.groupItemsBySpriteFilename();
    const filenames = Object.keys(itemsBySprite);

    return Promise.map(filenames, (filename) => {
      const spriteSymbols = itemsBySprite[filename].map(item => item.symbol);

      return Sprite.create({
        symbols: spriteSymbols,
        factory: this.factory
      })
        .then((sprite) => {
          const content = sprite.render();
          const chunkName = filename.replace(/\.svg$/, '');
          const chunk = new Chunk(chunkName);
          chunk.ids = [];
          chunk.files.push(filename);
          const filenamePrefix = this.rules.publicPath
            ? this.rules.publicPath.replace(/^\//, '')
            : '';

          compilation.assets[`${filenamePrefix}${filename}`] = {
            source() { return content; },
            size() { return content.length; }
          };

          compilation.chunks.push(chunk);
        });
    });
  }

  afterOptimizeChunks(compilation) {
    const { symbols } = this.svgCompiler;
    this.map = new MappedList(symbols, compilation);
    const replacements = this.getReplacements();
    this.map.items.forEach(item => replaceInModuleSource(item.module, replacements));
  }

  optimizeExtractedChunks(chunks) {
    const replacements = this.getReplacements();

    chunks.forEach((chunk) => {
      let modules;

      switch (webpackVersion) {
        case 4:
          modules = Array.from(chunk.modulesIterable);
          break;
        case 3:
          modules = chunk.mapModules();
          break;
        default:
          ({ modules } = chunk);
          break;
      }

      modules
      // dirty hack to identify modules extracted by extract-text-webpack-plugin
      // TODO refactor
        .filter(module => '_originalModule' in module)
        .forEach(module => replaceInModuleSource(module, replacements));
    });
  }

  beforeHtmlGeneration(compilation) {
    const itemsBySprite = this.map.groupItemsBySpriteFilename();
    const filenamePrefix = this.rules.publicPath
            ? this.rules.publicPath.replace(/^\//, '')
            : '';
    const sprites = Object.keys(itemsBySprite).reduce((acc, filename) => {
      acc[filenamePrefix + filename] = compilation.assets[filenamePrefix + filename].source();
      return acc;
    }, {});

    return sprites;
  }

  beforeHtmlProcessing(htmlPluginData) {
    const replacements = this.getReplacements();
    return replaceSpritePlaceholder(htmlPluginData.html, replacements);
  }
}

module.exports = SVGSpritePlugin;