bpmn-js-bpmnlint/dist/index.esm.js

import { assign, groupBy, reduce } from 'min-dash';
import { domify, query, remove } from 'min-dom';

/**
 * Traverse a moddle tree, depth first from top to bottom
 * and call the passed visitor fn.
 *
 * @param {ModdleElement} element
 * @param {Function} fn
 */
var traverse = function traverse(element, fn) {
  fn(element);

  var descriptor = element.$descriptor;

  if (descriptor.isGeneric) {
    return;
  }

  var containedProperties = descriptor.properties.filter(p => {
    return !p.isAttr && !p.isReference && p.type !== 'String';
  });

  containedProperties.forEach(p => {
    if (p.name in element) {
      const propertyValue = element[p.name];

      if (p.isMany) {
        propertyValue.forEach(child => {
          traverse(child, fn);
        });
      } else {
        traverse(propertyValue, fn);
      }
    }
  });
};

class Reporter {
  constructor({ moddleRoot, rule }) {
    this.rule = rule;
    this.moddleRoot = moddleRoot;
    this.messages = [];
    this.report = this.report.bind(this);
  }

  report(id, message) {
    this.messages.push({ id, message });
  }
}

var testRule = function testRule({ moddleRoot, rule }) {
  const reporter = new Reporter({ rule, moddleRoot });
  traverse(moddleRoot, node => rule.check(node, reporter));
  return reporter.messages;
};

const categoryMap = {
  0: 'off',
  1: 'warn',
  2: 'error'
};


function Linter(options = {}) {

  const {
    config,
    resolver
  } = options;

  if (typeof resolver === 'undefined') {
    throw new Error('must provide <options.resolver>');
  }

  this.config = config;
  this.resolver = resolver;

  this.cachedRules = {};
  this.cachedConfigs = {};
}


var linter = Linter;

/**
 * Applies a rule on the moddleRoot and adds reports to the finalReport
 *
 * @param {ModdleElement} moddleRoot
 *
 * @param {Object} ruleDefinition.name
 * @param {Object} ruleDefinition.config
 * @param {Object} ruleDefinition.category
 * @param {Rule} ruleDefinition.rule
 *
 * @return {Array<ValidationErrors>} rule reports
 */
Linter.prototype.applyRule = function applyRule(moddleRoot, ruleDefinition) {

  const {
    config,
    rule,
    category,
    name
  } = ruleDefinition;

  try {

    const reports = testRule({
      moddleRoot,
      rule,
      config
    });

    return reports.map(function(report) {
      return {
        ...report,
        category
      };
    });
  } catch (e) {
    console.error('rule <' + name + '> failed with error: ', e);

    return [
      {
        message: 'Rule error: ' + e.message,
        category: 'error'
      }
    ];
  }

};


Linter.prototype.resolveRule = function(name) {

  const {
    pkg,
    ruleName
  } = this.parseRuleName(name);

  const id = `${pkg}-${ruleName}`;

  const rule = this.cachedRules[id];

  if (rule) {
    return Promise.resolve(rule);
  }

  return Promise.resolve(this.resolver.resolveRule(pkg, ruleName)).then((ruleFactory) => {

    if (!ruleFactory) {
      throw new Error(`unknown rule <${name}>`);
    }

    const rule = this.cachedRules[id] = ruleFactory();

    return rule;
  });
};

Linter.prototype.resolveConfig = function(name) {

  const {
    pkg,
    configName
  } = this.parseConfigName(name);

  const id = `${pkg}-${configName}`;

  const config = this.cachedConfigs[id];

  if (config) {
    return Promise.resolve(config);
  }

  return Promise.resolve(this.resolver.resolveConfig(pkg, configName)).then((config) => {

    if (!config) {
      throw new Error(`unknown config <${name}>`);
    }

    const actualConfig = this.cachedConfigs[id] = normalizeConfig(config, pkg);

    return actualConfig;
  });
};

/**
 * Take a linter config and return list of resolved rules.
 *
 * @param {Object} config
 *
 * @return {Array<RuleDefinition>}
 */
Linter.prototype.resolveRules = function(config) {

  return this.resolveConfiguredRules(config).then((rulesConfig) => {

    // parse rule values
    const parsedRules = Object.entries(rulesConfig).map(([ name, value ]) => {
      const {
        category,
        config
      } = this.parseRuleValue(value);

      return {
        name,
        category,
        config
      };
    });

    // filter only for enabled rules
    const enabledRules = parsedRules.filter(definition => definition.category !== 'off');

    // load enabled rules
    const loaders = enabledRules.map((definition) => {

      const {
        name
      } = definition;

      return this.resolveRule(name).then(function(rule) {
        return {
          ...definition,
          rule
        };
      });
    });

    return Promise.all(loaders);
  });
};


Linter.prototype.resolveConfiguredRules = function(config) {

  let parents = config.extends;

  if (typeof parents === 'string') {
    parents = [ parents ];
  }

  if (typeof parents === 'undefined') {
    parents = [];
  }

  return Promise.all(
    parents.map((configName) => {
      return this.resolveConfig(configName).then((config) => {
        return this.resolveConfiguredRules(config);
      });
    })
  ).then((inheritedRules) => {

    const overrideRules = normalizeConfig(config, 'bpmnlint').rules;

    const rules = [ ...inheritedRules, overrideRules ].reduce((rules, currentRules) => {
      return {
        ...rules,
        ...currentRules
      };
    }, {});

    return rules;
  });
};


/**
 * Lint the given model root, using the specified linter config.
 *
 * @param {ModdleElement} moddleRoot
 * @param {Object} [config] the bpmnlint configuration to use
 *
 * @return {Object} lint results, keyed by category names
 */
Linter.prototype.lint = function(moddleRoot, config) {

  config = config || this.config;

  // load rules
  return this.resolveRules(config).then((ruleDefinitions) => {

    const allReports = {};

    ruleDefinitions.forEach((ruleDefinition) => {

      const {
        name
      } = ruleDefinition;

      const reports = this.applyRule(moddleRoot, ruleDefinition);

      if (reports.length) {
        allReports[name] = reports;
      }
    });

    return allReports;
  });
};


Linter.prototype.parseRuleValue = function(value) {

  let category;
  let config;

  if (Array.isArray(value)) {
    category = value[0];
    config = value[1];
  } else {
    category = value;
    config = {};
  }

  // normalize rule flag to <error> and <warn> which
  // may be upper case or a number at this point
  if (typeof category === 'string') {
    category = category.toLowerCase();
  }

  category = categoryMap[category] || category;

  return {
    config,
    category
  };
};

Linter.prototype.parseRuleName = function(name) {

  const slashIdx = name.indexOf('/');

  // resolve rule as built-in, if unprefixed
  if (slashIdx === -1) {
    return {
      pkg: 'bpmnlint',
      ruleName: name
    };
  }

  const pkg = name.substring(0, slashIdx);
  const ruleName = name.substring(slashIdx + 1);

  if (pkg === 'bpmnlint') {
    return {
      pkg: 'bpmnlint',
      ruleName
    };
  } else {
    return {
      pkg: 'bpmnlint-plugin-' + pkg,
      ruleName
    };
  }
};


Linter.prototype.parseConfigName = function(name) {

  const localMatch = /^bpmnlint:(.*)$/.exec(name);

  if (localMatch) {
    return {
      pkg: 'bpmnlint',
      configName: localMatch[1]
    };
  }

  const pluginMatch = /^plugin:([^/]+)\/(.+)$/.exec(name);

  if (!pluginMatch) {
    throw new Error(`invalid config name <${ name }>`);
  }

  return {
    pkg: 'bpmnlint-plugin-' + pluginMatch[1],
    configName: pluginMatch[2]
  };
};


// helpers ///////////////////////////

/**
 * Validate and return validated config.
 *
 * @param  {Object} config
 * @param  {String} pkg
 *
 * @return {Object} validated config
 */
function normalizeConfig(config, pkg) {

  const rules = config.rules || {};

  const validatedRules = Object.keys(rules).reduce((normalizedRules, name) => {

    const value = rules[name];

    // prefix local rule definition
    if (name.indexOf('bpmnlint/') === 0) {
      name = name.substring('bpmnlint/'.length);
    }

    normalizedRules[name] = value;

    return normalizedRules;
  }, {});

  return {
    ...config,
    rules: validatedRules
  };
}

var ErrorSvg = "<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"currentColor\" d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path></svg>";

var WarningSvg = "<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\"></path></svg>";

var SuccessSvg = "<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path></svg>";

var OFFSET_TOP = -5,
    OFFSET_RIGHT = -5;

var LOW_PRIORITY = 500;

var emptyConfig = {
  resolver: {
    resolveRule: function() {
      return null;
    }
  },
  config: {}
};


function Linting(
  config, bpmnjs, canvas,
  elementRegistry, eventBus, overlays
) {

  if ('bpmnlint' in config) {
    this._linterConfig = config.bpmnlint;
  }

  if (!this._linterConfig || !this._linterConfig.config || !this._linterConfig.resolver) {

    console.warn(
      '[bpmn-js-bpmnlint] You did not configure any lint rules to use. ' +
      'Ensure you bundle and include your rules via the `linting.bpmnlint` option. ' +
      'See https://github.com/bpmn-io/bpmn-js-bpmnlint#configure-lint-rules'
    );

    this._linterConfig = emptyConfig;
  }

  this._bpmnjs = bpmnjs;
  this._canvas = canvas;
  this._elementRegistry = elementRegistry;
  this._eventBus = eventBus;
  this._overlays = overlays;

  this._issues = null;
  this._lintingActive = false;

  this._overlayIds = {};

  var self = this;

  eventBus.on('elements.changed', LOW_PRIORITY, function(e) {
    if (self.lintingActive()) {
      self.update();
    }
  });

  eventBus.on('diagram.clear', function() {
    self.clearIssues();
  });

  this._init();
}
Linting.prototype._init = function() {
  var self = this;

  var button = this._button = domify(
    '<button class="bpmn-js-bpmnlint-button inactive"></button>'
  );

  this.updateButton();

  button.addEventListener('click', function() {
    self.toggleLinting();
  });

  this._canvas.getContainer().appendChild(button);
};

Linting.prototype.lintingActive = function() {
  return this._lintingActive;
};

Linting.prototype.formatIssues = function(issues) {

  const reports = reduce(issues, function(reports, ruleReports, rule) {

    return reports.concat(ruleReports.map(function(report) {
      report.rule = rule;

      return report;
    }));

  }, []);

  return groupBy(reports, function(report) {
    return report.id;
  });
};

Linting.prototype.toggleLinting = function() {
  if (this.lintingActive()) {
    this.deactivateLinting();
  } else {
    this.activateLinting();
  }
};

Linting.prototype.activateLinting = function() {
  var self = this;

  this.setActive(true);

  this.lint()
    .then(function(issues) {
      self._issues = self.formatIssues(issues);

      self.createIssues(self._issues);

      self.updateButton();
    });
};

Linting.prototype.deactivateLinting = function() {
  this.setActive(false);

  this.clearIssues();

  this.updateButton();
};

Linting.prototype.setActive = function(active) {
  this._lintingActive = active;

  this._eventBus.fire('linting.toggle', { active: active });
};

/**
 * Update overlays. Always lint and check wether overlays need update or not.
 */
Linting.prototype.update = function() {
  var self = this;

  this.lint()
    .then(function(newIssues) {
      newIssues = self.formatIssues(newIssues);

      var remove$$1 = {},
          update = {},
          add = {};

      for (var id in self._issues) {
        if (!newIssues[id]) {
          remove$$1[id] = self._issues[id];
        }
      }

      for (var id in newIssues) {
        if (!self._issues[id]) {
          add[id] = newIssues[id];
        } else {
          if (newIssues[id] !== self._issues[id]) {
            update[id] = newIssues[id];
          }
        }
      }

      remove$$1 = assign(remove$$1, update);
      add = assign(add, update);

      self.removeProcessIssues();

      self.removeIssues(remove$$1);
      self.createIssues(add);

      self._issues = newIssues;

      self.updateButton();
    });
};

Linting.prototype.createIssues = function(issues) {
  for (var id in issues) {
    this.createElementIssues(id, issues[id]);
  }
};

/**
 * Create overlays for an elements issues.
 *
 * @param {String} elementId - Elements ID.
 * @param {Array} elementIssues - All element issues including warnings and errors.
 */
Linting.prototype.createElementIssues = function(elementId, elementIssues) {

  console.log(elementId, elementIssues);

  var element = this._elementRegistry.get(elementId);

  if (!element) {
    console.log('element <' + elementId + '> not found');

    return;
  }

  var isProcess = element.type === 'bpmn:Process';

  var position = { top: OFFSET_TOP, right: OFFSET_RIGHT };

  elementIssues = groupBy(elementIssues, function(elementIssue) {
    return elementIssue.category
  });

  var errors = elementIssues.error,
      warnings = elementIssues.warn;

  var html = domify('<div class="bpmn-js-bpmnlint-issues"><div class="icons"></div></div>');

  var icons = query('.icons', html);

  var group;

  if (errors) {
    icons.appendChild(domify('<span class="icon error">' + ErrorSvg + '</span>'));

    group = this.createGroup(errors, 'error', 'Errors', ErrorSvg);

    html.appendChild(group);
  }

  if (warnings) {
    icons.appendChild(domify('<span class="icon warning">' + WarningSvg + '</span>'));

    group = this.createGroup(warnings, 'warning', 'Warnings', WarningSvg);

    html.appendChild(group);
  }

  if (isProcess) {
    this.createProcessIssues(html);
  } else {
    this._overlayIds[elementId] = this._overlays.add(element, 'bpmnlint', {
      position: position,
      html: html,
      scale: {
        min: 1,
        max: 1
      }
    });
  }

};

Linting.prototype.createGroup = function(issues, type, label, icon) {

  var group = domify(
    '<div class="group">' +
      '<div class="header ' + type + '">' + icon + label + '</div>' +
    '</div>'
  );

  issues.forEach(function(issue) {
    var collapsable = domify(
      '<div class="collapsable ' + type + '">' +
      issue.message +
      '</div>'
    );

    group.appendChild(collapsable);
  });

  return group;
};

Linting.prototype.removeIssues = function(issues) {
  var overlayId;

  for (var id in issues) {
    if (id === 'Process') {
      this.removeProcessIssues();
    } else {
      overlayId = this._overlayIds[id];

      // ignore process
      if (overlayId) {
        this._overlays.remove(overlayId);
      }
    }
  }
};

/**
 * Removes all overlays and clears cached issues.
 */
Linting.prototype.clearIssues = function() {
  var overlayId;

  for (var id in this._overlayIds) {
    overlayId = this._overlayIds[id];

    this._overlays.remove(overlayId);
  }

  this._issues = null;

  this.removeProcessIssues();
};

/**
 * Sets button state to reflect if linting is active.
 *
 * @param {String} state
 */
Linting.prototype.setButtonState = function(state, html) {
  if (state === 'success') {
    this._button.classList.add('success');
    this._button.classList.remove('error');
    this._button.classList.remove('inactive');
    this._button.classList.remove('warning');
  } else if (state === 'error') {
    this._button.classList.add('error');
    this._button.classList.remove('inactive');
    this._button.classList.remove('success');
    this._button.classList.remove('warning');
  } else if (state === 'warning') {
    this._button.classList.add('warning');
    this._button.classList.remove('error');
    this._button.classList.remove('inactive');
    this._button.classList.remove('success');
  } else if (state === 'inactive') {
    this._button.classList.add('inactive');
    this._button.classList.remove('error');
    this._button.classList.remove('success');
    this._button.classList.remove('warning');
  }

  this._button.innerHTML = html;
};

Linting.prototype.updateButton = function() {
  if (this._lintingActive) {
    var errors = 0,
        warnings = 0;

    for (var id in this._issues) {
      this._issues[id].forEach(function(issue) {
        if (issue.category === 'error') {
          errors++;
        } else if (issue.category === 'warn') {
          warnings++;
        }
      });
    }

    if (errors) {
      this.setButtonState('error', ErrorSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
    } else if (warnings) {
      this.setButtonState('warning', WarningSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
    } else {
      this.setButtonState('success', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
    }

  } else {
    this.setButtonState('inactive', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
  }

};

Linting.prototype.createProcessIssues = function(html) {
  var container = this._canvas.getContainer();

  html.classList.add('bpmn-js-bpmnlint-process-issues');

  container.appendChild(html);
};

Linting.prototype.removeProcessIssues = function() {
  var container = this._canvas.getContainer();

  var html = query('.bpmn-js-bpmnlint-process-issues', container);

  if (html) {
    remove(html);
  }
};

Linting.prototype.lint = function() {

  var definitions = this._bpmnjs.getDefinitions();

  var linter$$1 = new linter(this._linterConfig);

  return linter$$1.lint(definitions);
};

Linting.$inject = [
  'config.linting',
  'bpmnjs',
  'canvas',
  'elementRegistry',
  'eventBus',
  'overlays'
];

var index = {
  __init__: [ 'linting' ],
  linting: [ 'type', Linting ]
};

export default index;
//# sourceMappingURL=index.esm.js.map