astroturf/utils/loaders.js

"use strict";

exports.__esModule = true;
exports.buildDependencyError = buildDependencyError;
exports.collectStyles = collectStyles;
exports.replaceStyleTemplates = replaceStyleTemplates;
exports.resolveOptions = resolveOptions;

var _codeFrame = require("@babel/code-frame");

var _fastLevenshtein = _interopRequireDefault(require("fast-levenshtein"));

var _sortBy = _interopRequireDefault(require("lodash/sortBy"));

var _magicString = _interopRequireDefault(require("magic-string"));

var _picocolors = _interopRequireDefault(require("picocolors"));

var _config = _interopRequireDefault(require("../config"));

var _traverse = _interopRequireDefault(require("../traverse"));

var _createFilename = require("./createFilename");

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

class AstroturfLoaderError extends Error {
  constructor(errorOrMessage, codeFrame) {
    super();
    this.name = 'AstroturfLoaderError';

    if (typeof errorOrMessage !== 'string') {
      this.error = errorOrMessage;

      if (errorOrMessage.name === 'CssSyntaxError') {
        this.handleCssError(errorOrMessage);
      } else {
        this.handleBabelError(errorOrMessage);
      }
    } else {
      this.message = errorOrMessage;
      Error.captureStackTrace(this, AstroturfLoaderError);
    }

    if (codeFrame) this.message += `\n\n${codeFrame}\n`;
  }

  handleBabelError(error) {
    this.message = error.message;

    try {
      this.stack = error.stack.replace(/^(.*?):/, `${this.name}:`);
    } catch (e) {
      Error.captureStackTrace(this, AstroturfLoaderError);
    }
  }

  handleCssError(error) {
    const {
      line,
      column,
      reason,
      plugin,
      file
    } = error;
    this.message = `${this.name}\n\n`;

    if (typeof line !== 'undefined') {
      this.message += `(${line}:${column}) `;
    }

    this.message += plugin ? `${plugin}: ` : '';
    this.message += file ? `${file} ` : '<css input> ';
    this.message += `${reason}`;
    const code = error.showSourceCode();

    if (code) {
      this.message += `\n\n${code}\n`;
    } // @ts-ignore


    this.stack = false;
  }

}

function buildDependencyError(content, {
  type,
  identifier,
  request
}, styles, resource, loc) {
  let idents = styles.map(s => s.identifier);
  let closest;
  let minDistance = 2;
  idents.forEach(ident => {
    const d = _fastLevenshtein.default.get(ident, identifier);

    if (d < minDistance) {
      minDistance = d;
      closest = ident;
    }
  });
  const isDefaultImport = type === 'ImportDefaultSpecifier';

  if (!closest && isDefaultImport) {
    closest = idents.find(ident => ident === (0, _createFilename.getNameFromFile)(resource));
  }

  if (closest) idents = idents.filter(ident => ident !== closest);
  const identMsg = idents.map(s => _picocolors.default.yellow(s)).join(', ');
  const alternative = isDefaultImport ? `Instead try: ${_picocolors.default.yellow(`import ${closest} from '${request}';`)}` : `Did you mean to import as ${_picocolors.default.yellow(closest)} instead?`;
  return new AstroturfLoaderError( // eslint-disable-next-line prefer-template
  `Could not find a style associated with the interpolated value. ` + `Styles should use the same name used by the intended component or class set in the imported file.\n\n` + (0, _codeFrame.codeFrameColumns)(content, {
    start: loc.start
  }, {
    highlightCode: true,
    message: !isDefaultImport ? `(Imported as ${_picocolors.default.bold(identifier)})` : ''
  }) + `\n\n${closest ? `${alternative}\n\nAlso available: ${identMsg}` : `Available: ${identMsg}`}`);
}

function collectStyles(src, filename, resolveDependency, opts) {
  // maybe eventually return the ast directly if babel-loader supports it
  try {
    const {
      metadata
    } = (0, _traverse.default)(src, filename, { ...opts,
      resolveDependency,
      writeFiles: false,
      generateInterpolations: true
    });
    return metadata.astroturf;
  } catch (err) {
    throw new AstroturfLoaderError(err);
  }
}

function replaceStyleTemplates(loaderContext, filename, src, locations // content: Map<string, string>,
) {
  locations = (0, _sortBy.default)(locations, i => i.start || 0);
  const magic = new _magicString.default(src);
  locations.forEach(({
    start = 0,
    end = 0,
    code = ''
  }) => {
    if (code.endsWith(';')) code = code.slice(0, -1); // remove trailing semicolon

    if (start === end) {
      magic.appendLeft(start, code);
    } else {
      magic.overwrite(start, end, code);
    }
  });
  return {
    code: magic.toString(),
    map: loaderContext.sourceMap ? magic.generateMap({
      includeContent: true,
      source: filename
    }) : null
  };
}

async function resolveOptions(loaderContext) {
  const loaderOpts = loaderContext.getOptions() || {};

  if (loaderOpts.config === false) {
    return loaderOpts;
  }

  const result = await (typeof loaderOpts.config === 'string' ? _config.default.load(loaderOpts.config) : _config.default.search(loaderContext.resourcePath));
  return (result == null ? void 0 : result.config) || loaderOpts;
}