babel-plugin-picture-import-replacer/lib/index.js

Babel plugin for transforming picture import into variable contains src and srcSet

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (babel) {
  var t = babel.types;


  var getSizes = function getSizes(comment) {
    return comment.replace('resolve picture', '').trim().replace(/x/g, '').split(' ');
  };

  /*
    const imagePath = './images/icon.png';
   */
  var declareImageAssignment = function declareImageAssignment(imagePath) {
    return t.variableDeclaration('const', [t.variableDeclarator(t.identifier('imagePath'), t.stringLiteral(imagePath))]);
  };

  /*
    let src2x = '';
    let src3x = '';
    let srcSet = '';
   */
  var srcSizeVariables = [t.variableDeclaration('let', [t.variableDeclarator(t.identifier('src2x'), t.stringLiteral(''))]), t.variableDeclaration('let', [t.variableDeclarator(t.identifier('src3x'), t.stringLiteral(''))]), t.variableDeclaration('let', [t.variableDeclarator(t.identifier('srcSet'), t.stringLiteral(''))])];

  /*
    const src = require(imagePath);
   */
  var srcAssignment = t.variableDeclaration('const', [t.variableDeclarator(t.identifier('src'), t.callExpression(t.identifier('require'), [t.identifier('imagePath')]))]);

  /*
    src2x = require(imagePath.replace(new RegExp("(.[a-z]+)$"), `@2x$1`));
    src3x = require(imagePath.replace(new RegExp("(.[a-z]+)$"), `@3x$1`));
   */
  var declareSrcSizeAssignments = function declareSrcSizeAssignments(sizes) {
    return sizes.map(function (size) {
      var tplElementValue = '@' + size + 'x$1';

      return t.expressionStatement(t.assignmentExpression('=', t.identifier('src' + size + 'x'), t.callExpression(t.identifier('require'), [t.callExpression(t.memberExpression(t.identifier('imagePath'), t.identifier('replace')), [t.newExpression(t.identifier('RegExp'), [t.stringLiteral('(\.[a-z]+)$')]), t.templateLiteral([t.templateElement({
        raw: tplElementValue,
        cooked: tplElementValue
      }, true)], [])])])));
    });
  };

  /*
    let srcSet = src;
   */
  var srcSetAssignment = t.expressionStatement(t.assignmentExpression('=', t.identifier('srcSet'), t.identifier('src')));

  /*
    if (src2x) srcSet += `, ${src2x}`
    if (src3x) srcSet += `, ${src3x}`
   */
  var ifStatements = [2, 3].map(function (num) {
    return t.ifStatement(t.identifier('src' + num + 'x'), t.expressionStatement(t.assignmentExpression('+=', t.identifier('srcSet'), t.templateLiteral([t.templateElement({
      raw: ', ',
      cooked: ', '
    }, false), t.templateElement({
      raw: '',
      cooked: ''
    }, true)], [t.identifier('src' + num + 'x')]))));
  });

  /*
    return { src, srcSet }
   */
  var returnStatement = t.returnStatement(t.objectExpression([t.objectProperty(t.identifier('src'), t.identifier('src'), false, true), t.objectProperty(t.identifier('srcSet'), t.identifier('srcSet'), false, true)]));

  return {
    visitor: {
      ImportDeclaration: function ImportDeclaration(path) {
        var comments = path.node.leadingComments;

        if (comments && Array.isArray(comments) && ~comments[comments.length - 1].value.indexOf('resolve picture')) {
          var imagePath = path.node.source.value;
          var sizes = getSizes(comments[comments.length - 1].value);
          var imagePathAssignment = declareImageAssignment(imagePath);
          var srcSizeAssignments = declareSrcSizeAssignments(sizes);

          path.replaceWith(t.variableDeclaration('const', [t.variableDeclarator(t.identifier('picture'), t.callExpression(t.arrowFunctionExpression([], t.blockStatement([imagePathAssignment].concat(srcSizeVariables, [srcAssignment], _toConsumableArray(srcSizeAssignments), [srcSetAssignment], _toConsumableArray(ifStatements), [returnStatement])), false), []))]));
        }
      }
    }
  };
};

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

module.exports = exports['default'];