ember-svg-jar/lib/index.js

'use strict';

var fs = require('fs');
var path = require('path');
var _ = require('lodash');
var Funnel = require('broccoli-funnel');
var MergeTrees = require('broccoli-merge-trees');
var SVGOptimizer = require('broccoli-svg-optimizer');
var Symbolizer = require('broccoli-symbolizer');
var InlinePacker = require('./inline-packer');
var ViewerAssetsBuilder = require('./viewer-assets-builder');
var ViewerBuilder = require('./viewer-builder');
var validateOptions = require('./validate-options');
var defaultGenerators = require('./default-generators');

// GLOBAL_OPTIONS can be defined as both a root or strategy specific option.
var GLOBAL_OPTIONS = ['sourceDirs', 'stripPath', 'optimizer'];

var symbolsLoaderScript = fs.readFileSync(path.join(__dirname, '../symbols-loader.html'), 'utf8');

function mergeTreesIfNeeded(trees, options) {
  return trees.length === 1 ? trees[0] : new MergeTrees(trees, options);
}

function memoize(fn) {
  var cache = {};

  return function () {
    var cacheKey = JSON.stringify(arguments);
    cache[cacheKey] = cache[cacheKey] || fn.apply(this, arguments);
    return cache[cacheKey];
  };
}

module.exports = {
  name: 'ember-svg-jar',

  isDevelopingAddon: function isDevelopingAddon() {
    return false;
  },
  included: function included(app) {
    this._super.included.apply(this, arguments);

    // see: https://github.com/ember-cli/ember-cli/issues/3718
    if (typeof app.import !== 'function' && app.app) {
      // eslint-disable-next-line no-param-reassign
      app = app.app;
    }

    this.initializeOptions(app.options.svgJar, app.env);
  },
  treeForPublic: function treeForPublic() {
    var trees = [];

    if (this.options.viewer.enabled) {
      trees.push(this.getViewerTree());

      if (this.options.viewer.embed) {
        trees.push(this._super.treeForPublic.apply(this, arguments));
      }
    }

    if (this.hasSymbolStrategy()) {
      trees.push(this.getSymbolStrategyTree());
    }

    return mergeTreesIfNeeded(trees);
  },
  treeForApp: function treeForApp(appTree) {
    var trees = [appTree];

    if (this.hasInlineStrategy()) {
      trees.push(this.getInlineStrategyTree());
    }

    return mergeTreesIfNeeded(trees, { overwrite: true });
  },
  contentFor: function contentFor(type) {
    var includeLoader = this.hasSymbolStrategy() && this.optionFor('symbol', 'includeLoader');

    if (type === 'body' && includeLoader) {
      return symbolsLoaderScript.replace('{{FILE_PATH}}', this.optionFor('symbol', 'outputFile'));
    }

    return '';
  },
  initializeOptions: function initializeOptions(options, env) {
    this.options = _.merge({
      sourceDirs: ['public'],
      strategy: 'inline',
      stripPath: true,
      optimizer: {},
      persist: true,

      viewer: {
        enabled: env === 'development',
        embed: env === 'development'
      },

      inline: {
        idGen: defaultGenerators.inlineIdGen,
        copypastaGen: defaultGenerators.inlineCopypastaGen
      },

      symbol: {
        idGen: defaultGenerators.symbolIdGen,
        copypastaGen: defaultGenerators.symbolCopypastaGen,
        outputFile: '/assets/symbols.svg',
        prefix: '',
        includeLoader: true
      }
    }, options || {});

    validateOptions(this.options);
    this.options.strategy = _.castArray(this.options.strategy);
  },
  optionFor: function optionFor(strategy, optionName) {
    return _.isUndefined(this.options[strategy][optionName]) ? GLOBAL_OPTIONS.indexOf(optionName) !== -1 && this.options[optionName] : this.options[strategy][optionName];
  },
  sourceDirsFor: function sourceDirsFor(strategy) {
    return this.optionFor(strategy, 'sourceDirs').filter(function (sourceDir) {
      return fs.existsSync(sourceDir);
    });
  },


  optimizedSvgsFor: memoize(function (strategy) {
    var sourceDirs = this.sourceDirsFor(strategy);
    var svgFiles = new Funnel(mergeTreesIfNeeded(sourceDirs), {
      include: ['**/*.svg']
    });

    var svgoConfig = this.optionFor(strategy, 'optimizer');
    if (svgoConfig) {
      svgFiles = new SVGOptimizer(svgFiles, {
        svgoConfig: svgoConfig,
        persist: this.options.persist
      });
    }

    return svgFiles;
  }),

  originalSvgsFor: function originalSvgsFor(strategy) {
    var sourceDirs = this.sourceDirsFor(strategy);

    return new Funnel(mergeTreesIfNeeded(sourceDirs), {
      include: ['**/*.svg'],
      destDir: '__original__'
    });
  },
  getViewerTree: function getViewerTree() {
    var _this = this;

    var idGenOpts = {
      symbol: {
        prefix: this.optionFor('symbol', 'prefix')
      }
    };

    var viewerBuilderNodes = this.options.strategy.map(function (strategy) {
      var inputNode = new MergeTrees([_this.optimizedSvgsFor(strategy), _this.originalSvgsFor(strategy)]);

      return new ViewerAssetsBuilder(inputNode, {
        strategy: strategy,
        idGen: _this.optionFor(strategy, 'idGen'),
        idGenOpts: idGenOpts[strategy],
        copypastaGen: _this.optionFor(strategy, 'copypastaGen'),
        stripPath: _this.optionFor(strategy, 'stripPath'),
        outputFile: strategy + '.json',
        ui: _this.ui
      });
    });

    return new ViewerBuilder(mergeTreesIfNeeded(viewerBuilderNodes), {
      outputFile: 'svg-jar.json',
      hasManyStrategies: this.options.strategy.length > 1
    });
  },
  getInlineStrategyTree: function getInlineStrategyTree() {
    return new InlinePacker(this.optimizedSvgsFor('inline'), {
      idGen: this.optionFor('inline', 'idGen'),
      stripPath: this.optionFor('inline', 'stripPath'),
      outputFile: 'inline-assets.js'
    });
  },
  getSymbolStrategyTree: function getSymbolStrategyTree() {
    return new Symbolizer(this.optimizedSvgsFor('symbol'), {
      idGen: this.optionFor('symbol', 'idGen'),
      stripPath: this.optionFor('symbol', 'stripPath'),
      outputFile: this.optionFor('symbol', 'outputFile'),
      prefix: this.optionFor('symbol', 'prefix'),
      persist: this.options.persist
    });
  },
  hasInlineStrategy: function hasInlineStrategy() {
    return this.options.strategy.indexOf('inline') !== -1;
  },
  hasSymbolStrategy: function hasSymbolStrategy() {
    return this.options.strategy.indexOf('symbol') !== -1;
  }
};