tslint-react/rules/jsxAlignmentRule.js

/**
 * @license
 * Copyright 2016 Palantir Technologies, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Lint = require("tslint");
var Rule = (function (_super) {
    __extends(Rule, _super);
    function Rule() {
        return _super.apply(this, arguments) || this;
    }
    Rule.prototype.apply = function (sourceFile) {
        var walker = new JsxAlignmentWalker(sourceFile, this.getOptions());
        return this.applyWithWalker(walker);
    };
    return Rule;
}(Lint.Rules.AbstractRule));
Rule.ATTR_LINE_FAILURE = "JSX attributes must be on a line below the opening tag";
Rule.ATTR_INDENT_FAILURE = "JSX attributes must be indented further than the opening tag statement";
Rule.ATTR_ALIGN_FAILURE = "JSX attributes must be on their own line and vertically aligned";
Rule.TAG_CLOSE_FAILURE = "Tag closing must be on its own line and aligned with opening of tag";
Rule.CLOSING_TAG_FAILURE = "Closing tag must be on its own line and aligned with opening tag";
exports.Rule = Rule;
var leadingWhitespaceRegex = /[ \t]/;
var JsxAlignmentWalker = (function (_super) {
    __extends(JsxAlignmentWalker, _super);
    function JsxAlignmentWalker() {
        var _this = _super.apply(this, arguments) || this;
        _this.getCharacter = function (node) { return _this.getLineAndCharacter(node).character; };
        _this.getLine = function (node) { return _this.getLineAndCharacter(node).line; };
        return _this;
    }
    JsxAlignmentWalker.prototype.visitJsxElement = function (node) {
        if (this.isMultiline(node.openingElement)) {
            var startLocation = this.getLineAndCharacter(node);
            var closeLocation = this.getSourceFile().getLineAndCharacterOfPosition(node.openingElement.getEnd() - ">".length);
            this.checkElement(startLocation, node.openingElement.attributes, closeLocation, node.closingElement);
        }
        _super.prototype.visitJsxElement.call(this, node);
    };
    JsxAlignmentWalker.prototype.visitJsxSelfClosingElement = function (node) {
        if (this.isMultiline(node)) {
            var startLocation = this.getLineAndCharacter(node);
            var closeLocation = this.getSourceFile().getLineAndCharacterOfPosition(node.getEnd() - "/>".length);
            this.checkElement(startLocation, node.attributes, closeLocation);
        }
        _super.prototype.visitJsxSelfClosingElement.call(this, node);
    };
    JsxAlignmentWalker.prototype.checkElement = function (elementOpen, attributes, elementClose, closingTag) {
        if (attributes == null || attributes.length === 0) {
            return;
        }
        // in a line like "const element = <Foo",
        // we want the initial indent to be the start of "const" instead of the start of "<Foo"
        var initialIndent = this.getFirstNonWhitespaceCharacter(elementOpen.line);
        var firstAttr = attributes[0];
        var firstAttrCharacter = this.getCharacter(firstAttr);
        // ensure that first attribute is not on the same line as the start of the tag
        if (this.getLine(firstAttr) === elementOpen.line) {
            this.reportFailure(firstAttr, Rule.ATTR_LINE_FAILURE);
        }
        var lastSeenLine = -1;
        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
            var attr = attributes_1[_i];
            var character = this.getCharacter(attr);
            // ensure each attribute is indented further than the start of the tag
            if (character <= initialIndent) {
                this.reportFailure(attr, Rule.ATTR_INDENT_FAILURE);
            }
            // ensure each attribute is indented equally
            if (attr !== firstAttr && character !== firstAttrCharacter) {
                this.reportFailure(attr, Rule.ATTR_ALIGN_FAILURE);
            }
            lastSeenLine = this.getLine(attr);
        }
        // ensure that the closing token of the tag with attributes is on its own line
        // and that it is indented the same as the opening
        if (lastSeenLine === elementClose.line || elementClose.character !== initialIndent) {
            this.addFailure(this.createFailure(this.getSourceFile().getPositionOfLineAndCharacter(elementClose.line, elementClose.character), 1, Rule.TAG_CLOSE_FAILURE));
        }
        // ensure closing tag is on its own line and aligned with the opening tag
        if (closingTag != null) {
            var closingTagLocation = this.getLineAndCharacter(closingTag);
            if (closingTagLocation.line <= elementClose.line || closingTagLocation.character !== initialIndent) {
                this.reportFailure(closingTag, Rule.CLOSING_TAG_FAILURE);
            }
        }
    };
    JsxAlignmentWalker.prototype.getFirstNonWhitespaceCharacter = function (line) {
        var lineStart = this.getSourceFile().getLineStarts()[line];
        var source = this.getSourceFile().getFullText();
        var width = 0;
        while (lineStart + width < source.length && leadingWhitespaceRegex.test(source.charAt(lineStart + width))) {
            width++;
        }
        return width;
    };
    JsxAlignmentWalker.prototype.isMultiline = function (node) {
        var startLine = this.getLine(node);
        var endLine = this.getSourceFile().getLineAndCharacterOfPosition(node.getEnd()).line;
        return startLine !== endLine;
    };
    JsxAlignmentWalker.prototype.getLineAndCharacter = function (node) {
        var sourceFile = this.getSourceFile();
        return sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile));
    };
    JsxAlignmentWalker.prototype.reportFailure = function (node, message) {
        this.addFailure(this.createFailure(node.getStart(), node.getWidth(), message));
    };
    return JsxAlignmentWalker;
}(Lint.RuleWalker));