responsive-loader/lib/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = loader;
exports.raw = void 0;

var _path = _interopRequireDefault(require("path"));

var _loaderUtils = require("loader-utils");

var _schemaUtils = require("schema-utils");

var _utils = require("./utils");

var _schema = _interopRequireDefault(require("./schema.json"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const DEFAULTS = {
  outputPlaceholder: false,
  placeholderSize: 40,
  quality: 85,
  name: "[hash]-[width].[ext]",
  steps: 4,
  esModule: false,
  emitFile: true,
  rotate: 0
};
/**
 * **Responsive Loader**
 *
 * Creates multiple images from one source image, and returns a srcset
 * [Responsive Images Loader](https://github.com/dazuaz/responsive-loader)
 *
 * @method loader
 *
 * @param {Buffer} content Source
 *
 * @return {loaderCallback} loaderCallback Result
 */
// module.exports = function loader(content: Buffer) {

function loader(content) {
  const loaderCallback = this.async();
  const parsedResourceQuery = this.resourceQuery ? (0, _loaderUtils.parseQuery)(this.resourceQuery) : {}; // combine webpack options with query options

  const options = Object.assign({}, (0, _loaderUtils.getOptions)(this), parsedResourceQuery);
  (0, _schemaUtils.validate)(_schema.default, options, "Responsive Loader"); // parses options and set defaults options

  const {
    outputContext,
    outputPlaceholder,
    placeholderSize,
    quality,
    background,
    rotate,
    progressive,
    mime,
    ext,
    name,
    generatedSizes,
    esModule,
    emitFile
  } = (0, _utils.parseOptions)(this, options, DEFAULTS);
  const sizes = parsedResourceQuery.size || parsedResourceQuery.sizes || generatedSizes || options.size || options.sizes || [Number.MAX_SAFE_INTEGER];

  if (!sizes) {
    return loaderCallback(null, content);
  }

  if (!mime) {
    return loaderCallback(new Error("No mime type for file with extension " + ext + " supported"));
  }

  const createFile = ({
    data,
    width,
    height
  }) => {
    const fileName = (0, _loaderUtils.interpolateName)(this, name, {
      context: outputContext,
      content: data
    }).replace(/\[width\]/gi, width).replace(/\[height\]/gi, height);
    const {
      outputPath,
      publicPath
    } = (0, _utils.getOutputAndPublicPath)(fileName, options);

    if (emitFile) {
      this.emitFile(outputPath, data);
    }

    return {
      src: publicPath + `+${JSON.stringify(` ${width}w`)}`,
      path: publicPath,
      width: width,
      height: height
    };
  }; // Disable processing of images by this loader (useful in development)


  if (options.disable) {
    const {
      path
    } = createFile({
      data: content,
      width: "100",
      height: "100"
    });
    loaderCallback(null, `${esModule ? "export default" : "module.exports ="} {
        srcSet:${path},
        images:[{path:${path},width:100,height:100}],
        src: ${path},
        toString:function(){return ${path}}
      };`);
    return;
  }

  const adapter = options.adapter || require("./adapters/jimp"); // The config that is passed to the adapters


  const adapterOptions = Object.assign({}, options, {
    quality,
    background,
    rotate,
    progressive
  });
  const img = adapter(this.resourcePath);
  img.metadata().then(metadata => {
    let promises = [];
    const widthsToGenerate = new Set();
    (Array.isArray(sizes) ? sizes : [sizes]).forEach(size => {
      const width = Math.min(metadata.width, parseInt(size, 10)); // Only resize images if they aren't an exact copy of one already being resized...

      if (!widthsToGenerate.has(width)) {
        widthsToGenerate.add(width);
        promises.push(img.resize({
          width,
          mime,
          options: adapterOptions
        }));
      }
    });

    if (outputPlaceholder) {
      promises.push(img.resize({
        width: placeholderSize,
        options: adapterOptions,
        mime
      }));
    }

    return Promise.all(promises).then(results => outputPlaceholder ? {
      files: results.slice(0, -1).map(createFile),
      placeholder: (0, _utils.createPlaceholder)(results[results.length - 1], mime)
    } : {
      files: results.map(createFile)
    });
  }).then(({
    files,
    placeholder
  }) => {
    const srcset = files.map(f => f.src).join('+","+');
    const images = files.map(f => `{path: ${f.path},width: ${f.width},height: ${f.height}}`).join(",");
    const firstImage = files[0];
    loaderCallback(null, `${esModule ? "export default" : "module.exports ="} {
          srcSet: ${srcset},
          images:[ ${images}],
          src: ${firstImage.path},
          toString:function(){return ${firstImage.path}},
          placeholder: ${placeholder},
          width: ${firstImage.width},
          height: ${firstImage.height}
      }`);
  }).catch(err => loaderCallback(err));
}

const raw = true;
exports.raw = raw;