eslint-plugin-lit 1.7.1 → 1.8.0

package/README.md

@@ -64,6 +64,7 @@ If you want more fine-grained configuration, you can instead add a snippet like
 - [lit/no-invalid-html](docs/rules/no-invalid-html.md)
 - [lit/no-legacy-imports](docs/rules/no-legacy-imports.md)
 - [lit/no-legacy-template-syntax](docs/rules/no-legacy-template-syntax.md)
+- [lit/no-native-attributes](docs/rules/no-native-attributes.md)
 - [lit/no-private-properties](docs/rules/no-private-properties.md)
 - [lit/no-property-change-update](docs/rules/no-property-change-update.md)
 - [lit/no-template-arrow](docs/rules/no-template-arrow.md)

package/docs/rules/no-native-attributes.md

@@ -0,0 +1,39 @@
+# Disallows use of native attributes as properties (no-native-attributes)
+
+Using global native attributes as lit properties can have unintended effects,
+like for example the native `title` attribute will display a tooltip on hover
+over your custom element, and and may affect the accessibility of your component
+unintentionally.
+
+## Rule Details
+
+This rule disallows using global native attributes as lit properties.
+
+The following patterns are considered warnings:
+
+```ts
+class MyEl extends LitElement {
+  static get properties() {
+    return {
+      title: { type: String },
+      role: { type: String }
+    };
+  }
+}
+```
+
+The following patterns are not warnings:
+
+```ts
+class MyEl extends LitElement {
+  static get properties() {
+    return {
+      foo: { type: String }
+    };
+  }
+}
+```
+
+## When Not To Use It
+
+If you don't care about overriding global native attributes.

package/lib/configs/all.d.ts

@@ -12,6 +12,7 @@ declare const config: {
         'lit/no-property-change-update': string;
         'lit/no-template-arrow': string;
         'lit/no-template-bind': string;
+        'lit/no-native-attributes': string;
         'lit/no-template-map': string;
         'lit/no-this-assign-in-render': string;
         'lit/no-useless-template-literals': string;

package/lib/configs/all.js

@@ -14,6 +14,7 @@ const config = {
         'lit/no-property-change-update': 'error',
         'lit/no-template-arrow': 'error',
         'lit/no-template-bind': 'error',
+        'lit/no-native-attributes': 'error',
         'lit/no-template-map': 'error',
         'lit/no-this-assign-in-render': 'error',
         'lit/no-useless-template-literals': 'error',

package/lib/index.d.ts

@@ -14,6 +14,7 @@ export declare const configs: {
             'lit/no-property-change-update': string;
             'lit/no-template-arrow': string;
             'lit/no-template-bind': string;
+            'lit/no-native-attributes': string;
             'lit/no-template-map': string;
             'lit/no-this-assign-in-render': string;
             'lit/no-useless-template-literals': string;

package/lib/rules/no-native-attributes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Disallows use of native attributes as properties
+ * @author Pascal Schilp <https://github.com/thepassle>
+ */
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export = rule;

package/lib/rules/no-native-attributes.js

@@ -0,0 +1,78 @@
+"use strict";
+/**
+ * @fileoverview Disallows use of native attributes as properties
+ * @author Pascal Schilp <https://github.com/thepassle>
+ */
+const util_1 = require("../util");
+// Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
+const NATIVE_ATTRS = [
+    'accesskey',
+    'autocapitalize',
+    'autofocus',
+    'class',
+    'contenteditable',
+    'contextmenu',
+    'dir',
+    'draggable',
+    'enterkeyhint',
+    'exportparts',
+    'hidden',
+    'id',
+    'inert',
+    'inputmode',
+    'is',
+    'itemid',
+    'itemprop',
+    'itemref',
+    'itemscope',
+    'itemtype',
+    'lang',
+    'nonce',
+    'part',
+    'role',
+    'slot',
+    'spellcheck',
+    'style',
+    'tabindex',
+    'title',
+    'translate',
+    'virtualkeyboardpolicy'
+];
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+const rule = {
+    meta: {
+        docs: {
+            description: 'Disallows use of native attributes as properties',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/no-native-attributes.md'
+        },
+        schema: [],
+        messages: {
+            noNativeAttributes: 'The {{ prop }} attribute is a native global attribute. ' +
+                'Using it as a property could have unintended side-effects.'
+        }
+    },
+    create(context) {
+        // variables should be defined here
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            'ClassExpression,ClassDeclaration': (node) => {
+                const propertyMap = (0, util_1.getPropertyMap)(node);
+                for (const [prop] of propertyMap.entries()) {
+                    if (NATIVE_ATTRS.includes(prop)) {
+                        context.report({
+                            node: node,
+                            messageId: 'noNativeAttributes',
+                            data: { prop }
+                        });
+                    }
+                }
+            }
+        };
+    }
+};
+module.exports = rule;

package/lib/rules/value-after-constraints.js

@@ -39,7 +39,9 @@ const rule = {
                     const analyzer = template_analyzer_1.TemplateAnalyzer.create(node);
                     analyzer.traverse({
                         enterElement: (element) => {
-                            if (element.tagName !== 'input' || !element.sourceCodeLocation) {
+                            var _a;
+                            if (element.tagName !== 'input' ||
+                                !((_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs)) {
                                 return;
                             }
                             const valueName = element.attribs['.value'] ? '.value' : 'value';

package/lib/util.js

@@ -51,10 +51,25 @@ exports.extractPropertyEntry = extractPropertyEntry;
  * @return {ReadonlyMap<string, ESTreeObjectExpression>}
  */
 function getPropertyMap(node) {
+    var _a;
     const result = new Map();
     const propertyDecorators = ['state', 'property', 'internalProperty'];
     const internalDecorators = ['state', 'internalProperty'];
     for (const member of node.body.body) {
+        if (member.type === 'PropertyDefinition' &&
+            member.static &&
+            member.key.type === 'Identifier' &&
+            member.key.name === 'properties' &&
+            ((_a = member.value) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+            for (const prop of member.value.properties) {
+                if (prop.type === 'Property') {
+                    const name = getIdentifierName(prop.key);
+                    if (name && prop.value.type === 'ObjectExpression') {
+                        result.set(name, extractPropertyEntry(prop.value));
+                    }
+                }
+            }
+        }
         if (member.type === 'MethodDefinition' &&
             member.static &&
             member.kind === 'get' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-lit",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "lit-html support for ESLint",
   "main": "lib/index.js",
   "files": [