eslint-plugin-lit 1.9.0 → 1.10.0

package/docs/rules/no-classfield-shadowing.md

@@ -0,0 +1,34 @@
+# Disallows class fields with same name as static properties
+
+Class fields set with same names as static properties will not trigger updates as expected. They will overwrite
+accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.
+
+## Rule Details
+
+This rule disallows class fields with same name as static properties.
+
+The following patterns are considered warnings:
+
+```ts
+class MyEl extends LitElement {
+  foo;
+
+  static properties = {
+    foo: {}
+  }
+}
+```
+
+The following patterns are not warnings:
+
+```ts
+class MyEl extends LitElement {
+  static properties = {
+    foo: {}
+  }
+}
+```
+
+## When Not To Use It
+
+If you don't care about class fields with same name as static properties.

package/lib/configs/all.d.ts

@@ -0,0 +1,27 @@
+declare const config: {
+    plugins: string[];
+    rules: {
+        'lit/attribute-value-entities': string;
+        'lit/binding-positions': string;
+        'lit/lifecycle-super': string;
+        'lit/no-duplicate-template-bindings': string;
+        'lit/no-invalid-escape-sequences': string;
+        'lit/no-invalid-html': string;
+        'lit/no-legacy-imports': string;
+        'lit/no-legacy-template-syntax': string;
+        'lit/no-native-attributes': string;
+        'lit/no-private-properties': string;
+        'lit/no-property-change-update': string;
+        'lit/no-template-arrow': string;
+        'lit/no-template-bind': string;
+        'lit/no-template-map': string;
+        'lit/no-this-assign-in-render': string;
+        'lit/no-useless-template-literals': string;
+        'lit/no-value-attribute': string;
+        'lit/prefer-nothing': string;
+        'lit/prefer-static-styles': string;
+        'lit/quoted-expressions': string;
+        'lit/value-after-constraints': string;
+    };
+};
+export default config;

package/lib/configs/all.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config = {
+    plugins: ['lit'],
+    rules: {
+        'lit/attribute-value-entities': 'error',
+        'lit/binding-positions': 'error',
+        'lit/lifecycle-super': 'error',
+        'lit/no-duplicate-template-bindings': 'error',
+        'lit/no-invalid-escape-sequences': 'error',
+        'lit/no-invalid-html': 'error',
+        'lit/no-legacy-imports': 'error',
+        'lit/no-legacy-template-syntax': 'error',
+        'lit/no-native-attributes': 'error',
+        'lit/no-private-properties': 'error',
+        'lit/no-property-change-update': 'error',
+        'lit/no-template-arrow': 'error',
+        'lit/no-template-bind': 'error',
+        'lit/no-template-map': 'error',
+        'lit/no-this-assign-in-render': 'error',
+        'lit/no-useless-template-literals': 'error',
+        'lit/no-value-attribute': 'error',
+        'lit/prefer-nothing': 'error',
+        'lit/prefer-static-styles': 'error',
+        'lit/quoted-expressions': 'error',
+        'lit/value-after-constraints': 'error'
+    }
+};
+exports.default = config;

package/lib/configs/recommended.d.ts

@@ -0,0 +1,12 @@
+declare const config: {
+    plugins: string[];
+    rules: {
+        'lit/attribute-value-entities': string;
+        'lit/binding-positions': string;
+        'lit/no-duplicate-template-bindings': string;
+        'lit/no-invalid-html': string;
+        'lit/no-legacy-template-syntax': string;
+        'lit/no-property-change-update': string;
+    };
+};
+export default config;

package/lib/configs/recommended.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config = {
+    plugins: ['lit'],
+    rules: {
+        'lit/attribute-value-entities': 'error',
+        'lit/binding-positions': 'error',
+        'lit/no-duplicate-template-bindings': 'error',
+        'lit/no-invalid-html': 'error',
+        'lit/no-legacy-template-syntax': 'error',
+        'lit/no-property-change-update': 'error'
+    }
+};
+exports.default = config;

package/lib/rules/attribute-value-entities.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows unencoded HTML entities in attribute values
+ * @author James Garbutt <https://github.com/43081j>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/attribute-value-entities.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * @fileoverview Disallows unencoded HTML entities in attribute values
+ * @author James Garbutt <https://github.com/43081j>
+ */
+const template_analyzer_1 = require("../template-analyzer");
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Disallows unencoded HTML entities in attribute values',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/attribute-value-entities.md'
+        },
+        schema: [],
+        messages: {
+            unencoded: 'Attribute values may not contain unencoded HTML ' +
+                'entities, e.g. use `&gt;` instead of `>`',
+            doubleQuotes: 'Attributes delimited by double quotes may not contain ' +
+                'unencoded double quotes (e.g. `attr="bad"quote"`)',
+            singleQuotes: 'Attributes delimited by single quotes may not contain ' +
+                "unencoded single quotes (e.g. `attr='bad'quote'`)"
+        }
+    },
+    create(context) {
+        const source = context.getSourceCode();
+        const disallowedPattern = /([<>]|&(?!(#\d+|[a-z]+);))/;
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            TaggedTemplateExpression: (node) => {
+                if (node.type === 'TaggedTemplateExpression' &&
+                    node.tag.type === 'Identifier' &&
+                    node.tag.name === 'html') {
+                    const analyzer = template_analyzer_1.TemplateAnalyzer.create(node);
+                    analyzer.traverse({
+                        enterElement: (element) => {
+                            var _a, _b, _c, _d;
+                            // eslint-disable-next-line guard-for-in
+                            for (const attr in element.attribs) {
+                                const loc = analyzer.getLocationForAttribute(element, attr, source);
+                                const rawValue = analyzer.getRawAttributeValue(element, attr);
+                                if (!loc || !(rawValue === null || rawValue === void 0 ? void 0 : rawValue.value)) {
+                                    continue;
+                                }
+                                if (disallowedPattern.test(rawValue.value)) {
+                                    context.report({
+                                        loc: loc,
+                                        messageId: 'unencoded'
+                                    });
+                                }
+                                else if (((_a = rawValue.quotedValue) === null || _a === void 0 ? void 0 : _a.startsWith('"')) &&
+                                    ((_b = rawValue.value) === null || _b === void 0 ? void 0 : _b.includes('"'))) {
+                                    context.report({
+                                        loc: loc,
+                                        messageId: 'doubleQuotes'
+                                    });
+                                }
+                                else if (((_c = rawValue.quotedValue) === null || _c === void 0 ? void 0 : _c.startsWith("'")) &&
+                                    ((_d = rawValue.value) === null || _d === void 0 ? void 0 : _d.includes("'"))) {
+                                    context.report({
+                                        loc: loc,
+                                        messageId: 'singleQuotes'
+                                    });
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/ban-attributes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows a set of attributes from being used in templates
+ * @author James Garbutt <https://github.com/43081j>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/ban-attributes.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * @fileoverview Disallows a set of attributes from being used in templates
+ * @author James Garbutt <https://github.com/43081j>
+ */
+const template_analyzer_1 = require("../template-analyzer");
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Disallows a set of attributes from being used in templates',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/ban-attributes.md'
+        },
+        schema: {
+            type: 'array',
+            items: {
+                type: 'string'
+            },
+            uniqueItems: true
+        },
+        messages: {
+            denied: 'The attribute "{{ attr }}" is not allowed in templates'
+        }
+    },
+    create(context) {
+        const source = context.getSourceCode();
+        const userDisallowedAttributes = context.options;
+        const disallowedAttributes = userDisallowedAttributes.map((attr) => attr.toLowerCase());
+        return {
+            TaggedTemplateExpression: (node) => {
+                if (node.type === 'TaggedTemplateExpression' &&
+                    node.tag.type === 'Identifier' &&
+                    node.tag.name === 'html') {
+                    const analyzer = template_analyzer_1.TemplateAnalyzer.create(node);
+                    analyzer.traverse({
+                        enterElement: (element) => {
+                            // eslint-disable-next-line guard-for-in
+                            for (const attr in element.attribs) {
+                                let attrNormalised = attr.toLowerCase();
+                                if (attrNormalised.startsWith('?')) {
+                                    attrNormalised = attrNormalised.slice(1);
+                                }
+                                if (disallowedAttributes.includes(attrNormalised)) {
+                                    const loc = analyzer.getLocationForAttribute(element, attr, source);
+                                    if (loc) {
+                                        context.report({
+                                            loc: loc,
+                                            messageId: 'denied',
+                                            data: { attr: attrNormalised }
+                                        });
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/binding-positions.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows invalid binding positions in templates
+ * @author James Garbutt <https://github.com/43081j>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/binding-positions.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * @fileoverview Disallows invalid binding positions in templates
+ * @author James Garbutt <https://github.com/43081j>
+ */
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Disallows invalid binding positions in templates',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/binding-positions.md'
+        },
+        schema: [],
+        messages: {
+            noBindingTagName: 'Bindings cannot be used in place of tag names.',
+            noBindingAttributeName: 'Bindings cannot be used in place of attribute names.',
+            noBindingSelfClosingTag: 'Bindings at the end of a self-closing tag must be' +
+                ' followed by a space or quoted',
+            noBindingHTMLComment: 'Bindings cannot be used inside HTML comments.'
+        }
+    },
+    create(context) {
+        // variables should be defined here
+        const tagPattern = /<\/?$/;
+        const attrPattern = /^=/;
+        const selfClosingPattern = /^\/>/;
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        /**
+         * Determines if a given TemplateElement is contained within
+         * a HTML comment.
+         *
+         * @param {ESTree.TemplateElement=} expr Expression to test
+         * @return {boolean}
+         */
+        function isInsideComment(expr) {
+            return (expr !== undefined &&
+                expr.value.raw.lastIndexOf('<!--') > expr.value.raw.lastIndexOf('-->'));
+        }
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            TaggedTemplateExpression: (node) => {
+                if (node.type === 'TaggedTemplateExpression' &&
+                    node.tag.type === 'Identifier' &&
+                    node.tag.name === 'html') {
+                    for (let i = 0; i < node.quasi.expressions.length; i++) {
+                        const expr = node.quasi.expressions[i];
+                        const prev = node.quasi.quasis[i];
+                        const next = node.quasi.quasis[i + 1];
+                        if (tagPattern.test(prev.value.raw)) {
+                            context.report({
+                                node: expr,
+                                messageId: 'noBindingTagName'
+                            });
+                        }
+                        else if (next && attrPattern.test(next.value.raw)) {
+                            context.report({
+                                node: expr,
+                                messageId: 'noBindingAttributeName'
+                            });
+                        }
+                        else if (next && selfClosingPattern.test(next.value.raw)) {
+                            context.report({
+                                node: expr,
+                                messageId: 'noBindingSelfClosingTag'
+                            });
+                        }
+                        else if (isInsideComment(prev)) {
+                            context.report({
+                                node: expr,
+                                messageId: 'noBindingHTMLComment'
+                            });
+                        }
+                    }
+                }
+            }
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/lifecycle-super.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Enforces calling `super` in lifecycle methods
+ * @author James Garbutt <https://github.com/43081j>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/lifecycle-super.js

@@ -0,0 +1,118 @@
+"use strict";
+/**
+ * @fileoverview Enforces calling `super` in lifecycle methods
+ * @author James Garbutt <https://github.com/43081j>
+ */
+const methodNames = ['connectedCallback', 'disconnectedCallback', 'update'];
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Enforces calling `super` in lifecycle methods',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/lifecycle-super.md'
+        },
+        schema: [],
+        messages: {
+            callSuper: 'You must call `super.{{method}}` to avoid interrupting ' +
+                'the lit rendering lifecycle'
+        }
+    },
+    create(context) {
+        // variables should be defined here
+        let inElement = false;
+        let currentMethod = null;
+        let superSeen = false;
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        /**
+         * Class entered
+         *
+         * @param {ESTree.Class} node Node entered
+         * @return {void}
+         */
+        function classEnter(node) {
+            if (!node.superClass ||
+                node.superClass.type !== 'Identifier' ||
+                node.superClass.name !== 'LitElement') {
+                return;
+            }
+            inElement = true;
+        }
+        /**
+         * Class exited
+         *
+         * @return {void}
+         */
+        function classExit() {
+            inElement = false;
+        }
+        /**
+         * Method entered
+         *
+         * @param {ESTree.MethodDefinition} node Node entered
+         * @return {void}
+         */
+        function methodEnter(node) {
+            if (!inElement ||
+                node.static === true ||
+                node.kind !== 'method' ||
+                node.key.type !== 'Identifier' ||
+                !methodNames.includes(node.key.name)) {
+                return;
+            }
+            currentMethod = node.key.name;
+        }
+        /**
+         * Method exited
+         *
+         * @param {ESTree.MethodDefinition} node Node entered
+         * @return {void}
+         */
+        function methodExit(node) {
+            if (currentMethod !== null && !superSeen) {
+                context.report({
+                    node,
+                    messageId: 'callSuper',
+                    data: {
+                        method: currentMethod
+                    }
+                });
+            }
+            currentMethod = null;
+            superSeen = false;
+        }
+        /**
+         * Call expression entered
+         * @param {ESTree.CallExpression} node Node entered
+         * @return {void}
+         */
+        function callExpressionEnter(node) {
+            if (currentMethod === null) {
+                return;
+            }
+            if (node.callee.type === 'MemberExpression' &&
+                node.callee.object.type === 'Super' &&
+                node.callee.property.type === 'Identifier' &&
+                node.callee.property.name === currentMethod) {
+                superSeen = true;
+            }
+        }
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            ClassExpression: (node) => classEnter(node),
+            ClassDeclaration: (node) => classEnter(node),
+            'ClassExpression:exit': classExit,
+            'ClassDeclaration:exit': classExit,
+            MethodDefinition: (node) => methodEnter(node),
+            'MethodDefinition:exit': methodExit,
+            CallExpression: (node) => callExpressionEnter(node)
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/no-classfield-shadowing.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows properties shadowed as class fields
+ * @author Michel Langeveld <https://github.com/michellangeveld>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/no-classfield-shadowing.js

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * @fileoverview Disallows properties shadowed as class fields
+ * @author Michel Langeveld <https://github.com/michellangeveld>
+ */
+const util_1 = require("../util");
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Disallows properties shadowed as class fields',
+            recommended: true,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/no-classfield-shadowing.md'
+        },
+        schema: [],
+        messages: {
+            noClassfieldShadowing: 'The {{ prop }} property is a class field which has the same name as ' +
+                'static property which could have unintended side-effects.'
+        }
+    },
+    create(context) {
+        return {
+            ClassDeclaration: (node) => {
+                if ((0, util_1.isLitClass)(node)) {
+                    const propertyMap = (0, util_1.getPropertyMap)(node);
+                    const classMembers = (0, util_1.getClassFields)(node);
+                    for (const [prop, { key }] of propertyMap.entries()) {
+                        if (classMembers.has(prop)) {
+                            context.report({
+                                node: key,
+                                messageId: 'noClassfieldShadowing',
+                                data: { prop }
+                            });
+                        }
+                    }
+                }
+            }
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/no-duplicate-template-bindings.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows duplicate names in template bindings
+ * @author James Garbutt <https://github.com/43081j>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;