eslint-plugin-lit 2.2.1 → 2.3.1

package/README.md

@@ -105,6 +105,7 @@ If you want more fine-grained configuration, you can instead add a snippet like
 - [lit/no-useless-template-literals](docs/rules/no-useless-template-literals.md)
 - [lit/no-value-attribute](docs/rules/no-value-attribute.md)
 - [lit/prefer-nothing](docs/rules/prefer-nothing.md)
+- [lit/prefer-query-decorators](docs/rules/prefer-query-decorators.md)
 - [lit/quoted-expressions](docs/rules/quoted-expressions.md)
 - [lit/value-after-constraints](docs/rules/value-after-constraints.md)
 

package/docs/rules/prefer-query-decorators.md

@@ -0,0 +1,86 @@
+# Requires use of query decorators instead of manual DOM queries (prefer-query-decorators)
+
+Manually calling `this.shadowRoot.querySelector()` or `this.renderRoot.querySelector()` inside a
+LitElement is verbose and error-prone. The `@query`, `@queryAll`, `@queryAssignedElements`, and
+`@queryAssignedNodes` decorators are the idiomatic Lit way to access elements in the shadow DOM.
+
+## Rule Details
+
+This rule requires use of query decorators instead of manually querying the render root.
+
+The following patterns are considered warnings:
+
+```ts
+class Foo extends LitElement {
+  get myEl() {
+    return this.shadowRoot.querySelector('.my-el');
+  }
+
+  get myEls() {
+    return this.renderRoot.querySelectorAll('.my-el');
+  }
+
+  get assignedItems() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
+
+  get assignedItemNodes() {
+    return this.renderRoot.querySelector('slot').assignedNodes();
+  }
+}
+```
+
+The following patterns are not warnings:
+
+```ts
+class Foo extends LitElement {
+  @query('.my-el') myEl;
+
+  @queryAll('.my-el') myEls;
+
+  @queryAssignedElements({slot: 'items'}) assignedItems;
+
+  @queryAssignedNodes({slot: 'items'}) assignedItemNodes;
+}
+```
+
+## Options
+
+The rule accepts an optional configuration object with boolean flags to selectively disable
+individual checks. All flags default to `true`.
+
+```json
+{
+  "lit/prefer-query-decorators": [
+    "error",
+    {
+      "querySelector": true,
+      "querySelectorAll": true,
+      "assignedElements": true,
+      "assignedNodes": true
+    }
+  ]
+}
+```
+
+### querySelector
+
+When `false`, disables the check for `this.shadowRoot.querySelector()` /
+`this.renderRoot.querySelector()`.
+
+### querySelectorAll
+
+When `false`, disables the check for `this.shadowRoot.querySelectorAll()` /
+`this.renderRoot.querySelectorAll()`.
+
+### assignedElements
+
+When `false`, disables the check for chained `.assignedElements()` calls.
+
+### assignedNodes
+
+When `false`, disables the check for chained `.assignedNodes()` calls.
+
+## When Not To Use It
+
+If you prefer to query the shadow DOM manually, or your project does not use Lit decorators.

package/lib/configs/all.js

@@ -24,6 +24,7 @@ export const configFactory = (plugin) => ({
         'lit/no-useless-template-literals': 'error',
         'lit/no-value-attribute': 'error',
         'lit/prefer-nothing': 'error',
+        'lit/prefer-query-decorators': 'error',
         'lit/prefer-static-styles': 'error',
         'lit/quoted-expressions': 'error',
         'lit/value-after-constraints': 'error'

package/lib/configs/legacy-all.js

@@ -22,6 +22,7 @@ export const config = {
         'lit/no-useless-template-literals': 'error',
         'lit/no-value-attribute': 'error',
         'lit/prefer-nothing': 'error',
+        'lit/prefer-query-decorators': 'error',
         'lit/prefer-static-styles': 'error',
         'lit/quoted-expressions': 'error',
         'lit/value-after-constraints': 'error'

package/lib/index.d.ts

@@ -2,9 +2,9 @@ import type { Rule, ESLint } from 'eslint';
 export declare const rules: Record<string, Rule.RuleModule>;
 declare const plugin: ESLint.Plugin;
 export declare const configs: {
-    all: ESLint.ConfigData<import("eslint").Linter.RulesRecord>;
-    'flat/all': import("eslint").Linter.FlatConfig;
-    recommended: ESLint.ConfigData<import("eslint").Linter.RulesRecord>;
-    'flat/recommended': import("eslint").Linter.FlatConfig;
+    all: ESLint.ConfigData<import("@eslint/core", { with: { "resolution-mode": "require" } }).RulesConfig>;
+    'flat/all': import("eslint").Linter.FlatConfig<import("@eslint/core", { with: { "resolution-mode": "require" } }).RulesConfig>;
+    recommended: ESLint.ConfigData<import("@eslint/core", { with: { "resolution-mode": "require" } }).RulesConfig>;
+    'flat/recommended': import("eslint").Linter.FlatConfig<import("@eslint/core", { with: { "resolution-mode": "require" } }).RulesConfig>;
 };
 export default plugin;

package/lib/index.js

@@ -23,6 +23,7 @@ import { rule as ruleNoThisAssign } from './rules/no-this-assign-in-render.js';
 import { rule as ruleNoUselessTemplateLiterals } from './rules/no-useless-template-literals.js';
 import { rule as ruleNoValueAttribute } from './rules/no-value-attribute.js';
 import { rule as rulePreferNothing } from './rules/prefer-nothing.js';
+import { rule as rulePreferQueryDecorators } from './rules/prefer-query-decorators.js';
 import { rule as rulePreferStaticStyles } from './rules/prefer-static-styles.js';
 import { rule as ruleQuotedExpressions } from './rules/quoted-expressions.js';
 import { rule as ruleValueAfterConstraints } from './rules/value-after-constraints.js';
@@ -48,6 +49,7 @@ export const rules = {
     'no-useless-template-literals': ruleNoUselessTemplateLiterals,
     'no-value-attribute': ruleNoValueAttribute,
     'prefer-nothing': rulePreferNothing,
+    'prefer-query-decorators': rulePreferQueryDecorators,
     'prefer-static-styles': rulePreferStaticStyles,
     'quoted-expressions': ruleQuotedExpressions,
     'value-after-constraints': ruleValueAfterConstraints

package/lib/rules/attribute-names.js

@@ -30,7 +30,12 @@ export const rule = {
                 'name (usually snake-case)',
             casedAttributeConvention: 'Attribute should be property name written in {{convention}} ' +
                 'as "{{name}}"'
-        }
+        },
+        defaultOptions: [
+            {
+                convention: 'none'
+            }
+        ]
     },
     create(context) {
         var _a, _b;

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

@@ -41,7 +41,6 @@ export const rule = {
                     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);

package/lib/rules/ban-attributes.js

@@ -22,7 +22,8 @@ export const rule = {
         },
         messages: {
             denied: 'The attribute "{{ attr }}" is not allowed in templates'
-        }
+        },
+        defaultOptions: []
     },
     create(context) {
         const source = context.sourceCode;
@@ -36,7 +37,6 @@ export const rule = {
                     const analyzer = 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('?')) {

package/lib/rules/no-legacy-imports.js

@@ -51,7 +51,8 @@ export const rule = {
             ImportDeclaration: (node) => {
                 if (node.source.value === 'lit-element') {
                     for (const specifier of node.specifiers) {
-                        if (specifier.type === 'ImportSpecifier') {
+                        if (specifier.type === 'ImportSpecifier' &&
+                            specifier.imported.type === 'Identifier') {
                             const replacement = legacyDecorators[specifier.imported.name];
                             if (replacement) {
                                 context.report({

package/lib/rules/no-legacy-template-syntax.js

@@ -36,7 +36,6 @@ export const rule = {
                     const analyzer = TemplateAnalyzer.create(node);
                     analyzer.traverse({
                         enterElement: (element) => {
-                            // eslint-disable-next-line guard-for-in
                             for (const attr in element.attribs) {
                                 const loc = analyzer.getLocationForAttribute(element, attr, source);
                                 if (!loc) {

package/lib/rules/no-private-properties.js

@@ -20,13 +20,13 @@ export const rule = {
                     private: { type: 'string', minLength: 1, format: 'regex' },
                     protected: { type: 'string', minLength: 1, format: 'regex' }
                 },
-                additionalProperties: false,
-                minProperties: 1
+                additionalProperties: false
             }
         ],
         messages: {
             noPrivate: 'Private and protected properties should not be assigned in bindings'
-        }
+        },
+        defaultOptions: [{}]
     },
     create(context) {
         const source = context.sourceCode;
@@ -52,7 +52,6 @@ export const rule = {
                     const analyzer = TemplateAnalyzer.create(node);
                     analyzer.traverse({
                         enterElement: (element) => {
-                            // eslint-disable-next-line guard-for-in
                             for (const attr in element.attribs) {
                                 const loc = analyzer.getLocationForAttribute(element, attr, source);
                                 if (!loc) {

package/lib/rules/no-this-assign-in-render.js

@@ -74,7 +74,7 @@ export const rule = {
          * @return {void}
          */
         function assignmentFound(node) {
-            if (!inRender) {
+            if (!inRender || !node.parent) {
                 return;
             }
             context.report({

package/lib/rules/no-useless-template-literals.js

@@ -23,7 +23,7 @@ export const rule = {
     },
     create(context) {
         const source = context.sourceCode;
-        const isAttr = /^[^\.\?]/;
+        const isAttr = /^[^.?]/;
         const endsWithAttr = /=['"]?$/;
         //----------------------------------------------------------------------
         // Helpers
@@ -62,7 +62,6 @@ export const rule = {
                     }
                     analyzer.traverse({
                         enterElement: (element) => {
-                            // eslint-disable-next-line guard-for-in
                             for (const attr in element.attribs) {
                                 const loc = analyzer.getLocationForAttribute(element, attr, source);
                                 if (!loc) {

package/lib/rules/prefer-query-decorators.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @fileoverview Requires use of query decorators instead of manual DOM queries
+ * @author Kirill Karpov <https://github.com/null0rUndefined>
+ */
+import { Rule } from 'eslint';
+export declare const rule: Rule.RuleModule;

package/lib/rules/prefer-query-decorators.js

@@ -0,0 +1,229 @@
+/**
+ * @fileoverview Requires use of query decorators instead of manual DOM queries
+ * @author Kirill Karpov <https://github.com/null0rUndefined>
+ */
+import { isLitClass } from '../util.js';
+//------------------------------------------------------------------------------
+// Selectors
+//------------------------------------------------------------------------------
+const querySelectorCall = 'CallExpression' +
+    '[callee.type="MemberExpression"]' +
+    '[callee.object.type="MemberExpression"]' +
+    '[callee.object.object.type="ThisExpression"]' +
+    ':matches(' +
+    '[callee.object.property.name="shadowRoot"],' +
+    '[callee.object.property.name="renderRoot"]' +
+    ')' +
+    ':matches(' +
+    '[callee.property.name="querySelector"],' +
+    '[callee.property.name="querySelectorAll"]' +
+    ')';
+const assignedCall = 'CallExpression' +
+    '[callee.type="MemberExpression"]' +
+    ':matches(' +
+    '[callee.property.name="assignedElements"],' +
+    '[callee.property.name="assignedNodes"]' +
+    ')' +
+    '[callee.object.type="CallExpression"]' +
+    '[callee.object.callee.type="MemberExpression"]' +
+    '[callee.object.callee.object.type="MemberExpression"]' +
+    '[callee.object.callee.object.object.type="ThisExpression"]' +
+    ':matches(' +
+    '[callee.object.callee.object.property.name="shadowRoot"],' +
+    '[callee.object.callee.object.property.name="renderRoot"]' +
+    ')' +
+    '[callee.object.callee.property.name="querySelector"]';
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+const assignedMethodNames = new Set(['assignedElements', 'assignedNodes']);
+const renderRootProperties = new Set(['shadowRoot', 'renderRoot']);
+const defaultOptions = {
+    querySelector: true,
+    querySelectorAll: true,
+    assignedElements: true,
+    assignedNodes: true
+};
+const querySelectorMessageMap = new Map([
+    ['querySelector', 'querySelector'],
+    ['querySelectorAll', 'querySelectorAll']
+]);
+const assignedMessageMap = new Map([
+    ['assignedElements', 'assignedElements'],
+    ['assignedNodes', 'assignedNodes']
+]);
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+/**
+ * Determines if a call expression is the inner querySelector of a chained
+ * assignedElements/assignedNodes call, to avoid double-reporting.
+ *
+ * @param {ESTree.CallExpression & Rule.NodeParentExtension} node Call expression to test
+ * @return {boolean}
+ */
+function isChainedWithAssignedCall(node) {
+    const parent = node.parent;
+    return ((parent === null || parent === void 0 ? void 0 : parent.type) === 'MemberExpression' &&
+        parent.property.type === 'Identifier' &&
+        assignedMethodNames.has(parent.property.name));
+}
+/**
+ * Returns the method name from a member expression callee, or null if the
+ * property is not a simple identifier.
+ *
+ * @param {ESTree.MemberExpression} callee Callee to inspect
+ * @return {string|null}
+ */
+function getMethodName(callee) {
+    return callee.property.type === 'Identifier' ? callee.property.name : null;
+}
+/**
+ * Returns the render root property name (shadowRoot or renderRoot) from a
+ * callee whose object is a member expression on `this`, or null if it does
+ * not match the expected shape.
+ *
+ * @param {ESTree.MemberExpression} callee Callee to inspect
+ * @return {string|null}
+ */
+function getRenderRootName(callee) {
+    const obj = callee.object;
+    if (obj.type !== 'MemberExpression' || obj.property.type !== 'Identifier') {
+        return null;
+    }
+    const name = obj.property.name;
+    return renderRootProperties.has(name) ? name : null;
+}
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+export const rule = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Requires use of query decorators instead of manual DOM queries',
+            recommended: false,
+            url: 'https://github.com/43081j/eslint-plugin-lit/blob/master/docs/rules/prefer-query-decorators.md'
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    querySelector: { type: 'boolean' },
+                    querySelectorAll: { type: 'boolean' },
+                    assignedElements: { type: 'boolean' },
+                    assignedNodes: { type: 'boolean' }
+                },
+                additionalProperties: false
+            }
+        ],
+        messages: {
+            preferQuery: 'Use @query decorator instead of this.{{ root }}.querySelector()',
+            preferQueryAll: 'Use @queryAll decorator instead of this.{{ root }}.querySelectorAll()',
+            preferQueryAssignedElements: 'Use @queryAssignedElements decorator instead of' +
+                ' this.{{ root }}.querySelector().assignedElements()',
+            preferQueryAssignedNodes: 'Use @queryAssignedNodes decorator instead of' +
+                ' this.{{ root }}.querySelector().assignedNodes()'
+        },
+        defaultOptions: [defaultOptions]
+    },
+    create(context) {
+        const options = { ...defaultOptions, ...context.options[0] };
+        let litClassDepth = 0;
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        /**
+         * Class entered
+         *
+         * @param {ESTree.Class} node Node entered
+         * @return {void}
+         */
+        function classEnter(node) {
+            if (isLitClass(node, context)) {
+                litClassDepth++;
+            }
+        }
+        /**
+         * Class exited
+         *
+         * @param {ESTree.Class} node Node exited
+         * @return {void}
+         */
+        function classExit(node) {
+            if (isLitClass(node, context)) {
+                litClassDepth--;
+            }
+        }
+        /**
+         * querySelector or querySelectorAll call found
+         *
+         * @param {ESTree.CallExpression} node Node entered
+         * @return {void}
+         */
+        function handleQuerySelectorCall(node) {
+            if (litClassDepth === 0) {
+                return;
+            }
+            if (isChainedWithAssignedCall(node) ||
+                node.callee.type !== 'MemberExpression') {
+                return;
+            }
+            const callee = node.callee;
+            const methodName = getMethodName(callee);
+            const rootName = getRenderRootName(callee);
+            if (!methodName || !rootName) {
+                return;
+            }
+            const optionKey = querySelectorMessageMap.get(methodName);
+            if (!optionKey || !options[optionKey]) {
+                return;
+            }
+            const messageId = methodName === 'querySelector' ? 'preferQuery' : 'preferQueryAll';
+            context.report({ node, messageId, data: { root: rootName } });
+        }
+        /**
+         * assignedElements or assignedNodes call found
+         *
+         * @param {ESTree.CallExpression} node Node entered
+         * @return {void}
+         */
+        function handleAssignedCall(node) {
+            if (litClassDepth === 0 || node.callee.type !== 'MemberExpression')
+                return;
+            const callee = node.callee;
+            const methodName = getMethodName(callee);
+            if (!methodName || callee.object.type !== 'CallExpression') {
+                return;
+            }
+            const querySelectorCallExpr = callee.object;
+            if (querySelectorCallExpr.callee.type !== 'MemberExpression') {
+                return;
+            }
+            const querySelectorCallee = querySelectorCallExpr.callee;
+            const rootName = getRenderRootName(querySelectorCallee);
+            if (!rootName) {
+                return;
+            }
+            const optionKey = assignedMessageMap.get(methodName);
+            if (!optionKey || !options[optionKey]) {
+                return;
+            }
+            const messageId = methodName === 'assignedElements'
+                ? 'preferQueryAssignedElements'
+                : 'preferQueryAssignedNodes';
+            context.report({ node, messageId, data: { root: rootName } });
+        }
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            ClassExpression: (node) => classEnter(node),
+            ClassDeclaration: (node) => classEnter(node),
+            'ClassExpression:exit': (node) => classExit(node),
+            'ClassDeclaration:exit': (node) => classExit(node),
+            [querySelectorCall]: (node) => handleQuerySelectorCall(node),
+            [assignedCall]: (node) => handleAssignedCall(node)
+        };
+    }
+};

package/lib/rules/prefer-static-styles.js

@@ -22,7 +22,8 @@ export const rule = {
         messages: {
             always: 'Static styles should be used instead of inline style tags',
             never: 'Inline style tags should be used instead of static styles'
-        }
+        },
+        defaultOptions: ['always']
     },
     create(context) {
         const source = context.sourceCode;

package/lib/rules/quoted-expressions.js

@@ -23,7 +23,8 @@ export const rule = {
                 ' (e.g. `foo="${bar}"`)',
             neverQuote: 'Expressions must not be quoted inside templates ' +
                 ' (e.g. `foo="${bar}"`)'
-        }
+        },
+        defaultOptions: ['never']
     },
     create(context) {
         // variables should be defined here

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

@@ -44,7 +44,8 @@ export const rule = {
                                 return;
                             }
                             const valueName = element.attribs['.value'] ? '.value' : 'value';
-                            const attrLocs = element.sourceCodeLocation.attrs;
+                            const attrLocs = element.sourceCodeLocation
+                                .attrs;
                             const valueLoc = attrLocs[valueName];
                             const valueAttr = element.attribs[valueName];
                             if (!valueAttr ||

package/lib/template-analyzer.d.ts

@@ -1,21 +1,21 @@
 import * as ESTree from 'estree';
 import * as parse5 from 'parse5';
 import { SourceCode } from 'eslint';
-import treeAdapter from 'parse5-htmlparser2-tree-adapter';
+import { type Parse5Node, type Parse5DocumentFragment, type Parse5Element, type Parse5CommentNode, type Parse5TextNode } from './util.js';
 export interface RawAttribute {
     name: string;
     value?: string;
     quotedValue?: string;
 }
 export interface Visitor {
-    enter: (node: treeAdapter.Node, parent: treeAdapter.Node | null) => void;
-    exit: (node: treeAdapter.Node, parent: treeAdapter.Node | null) => void;
-    enterElement: (node: treeAdapter.Element, parent: treeAdapter.Node | null) => void;
-    enterDocumentFragment: (node: treeAdapter.DocumentFragment, parent: treeAdapter.Node | null) => void;
-    enterCommentNode: (node: treeAdapter.CommentNode, parent: treeAdapter.Node | null) => void;
-    enterTextNode: (node: treeAdapter.TextNode, parent: treeAdapter.Node | null) => void;
+    enter: (node: Parse5Node, parent: Parse5Node | null) => void;
+    exit: (node: Parse5Node, parent: Parse5Node | null) => void;
+    enterElement: (node: Parse5Element, parent: Parse5Node | null) => void;
+    enterDocumentFragment: (node: Parse5DocumentFragment, parent: Parse5Node | null) => void;
+    enterCommentNode: (node: Parse5CommentNode, parent: Parse5Node | null) => void;
+    enterTextNode: (node: Parse5TextNode, parent: Parse5Node | null) => void;
 }
-export interface ParseError extends parse5.Location {
+export interface ParseError extends parse5.Token.Location {
     code: string;
 }
 /**
@@ -26,7 +26,7 @@ export declare class TemplateAnalyzer {
     errors: ReadonlyArray<ParseError>;
     source: string;
     protected _node: ESTree.TaggedTemplateExpression;
-    protected _ast: treeAdapter.DocumentFragment;
+    protected _ast: Parse5DocumentFragment;
     /**
      * Create an analyzer instance for a given node
      *
@@ -43,32 +43,32 @@ export declare class TemplateAnalyzer {
     /**
      * Returns the ESTree location equivalent of a given attribute
      *
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @param {SourceCode} source Source code from ESLint
      * @return {?ESTree.SourceLocation}
      */
-    getLocationForAttribute(element: treeAdapter.Element, attr: string, source: SourceCode): ESTree.SourceLocation | null | undefined;
+    getLocationForAttribute(element: Parse5Element, attr: string, source: SourceCode): ESTree.SourceLocation | null | undefined;
     /**
      * Returns the value of the specified attribute.
      * If this is an expression, the expression will be returned. Otherwise,
      * the raw value will be returned.
      * NOTE: if an attribute has multiple expressions in its value, this will
      * return the *first* expression.
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @param {SourceCode} source Source code from ESLint
      * @return {?ESTree.Expression|string}
      */
-    getAttributeValue(element: treeAdapter.Element, attr: string, source: SourceCode): ESTree.Expression | string | null;
+    getAttributeValue(element: Parse5Element, attr: string, source: SourceCode): ESTree.Expression | string | null;
     /**
      * Returns the raw attribute source of a given attribute
      *
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @return {string}
      */
-    getRawAttributeValue(element: treeAdapter.Element, attr: string): RawAttribute | null;
+    getRawAttributeValue(element: Parse5Element, attr: string): RawAttribute | null;
     /**
      * Resolves a Parse5 location into an ESTree range
      *
@@ -76,7 +76,7 @@ export declare class TemplateAnalyzer {
      * @param {SourceCode} source ESLint source code object
      * @return {ESTree.SourceLocation}
      */
-    resolveLocation(loc: parse5.Location, source: SourceCode): ESTree.SourceLocation | null;
+    resolveLocation(loc: parse5.Token.Location, source: SourceCode): ESTree.SourceLocation | null;
     /**
      * Traverse the inner HTML tree with a given visitor
      *

package/lib/template-analyzer.js

@@ -1,5 +1,5 @@
 import * as parse5 from 'parse5';
-import treeAdapter from 'parse5-htmlparser2-tree-adapter';
+import { adapter as treeAdapter } from 'parse5-htmlparser2-tree-adapter';
 import { templateExpressionToHtml, getExpressionPlaceholder } from './util.js';
 const isRootNode = (node) => node.type === 'root';
 const analyzerCache = new WeakMap();
@@ -49,13 +49,14 @@ export class TemplateAnalyzer {
     /**
      * Returns the ESTree location equivalent of a given attribute
      *
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @param {SourceCode} source Source code from ESLint
      * @return {?ESTree.SourceLocation}
      */
     getLocationForAttribute(element, attr, source) {
-        if (!element.sourceCodeLocation || !element.sourceCodeLocation.attrs) {
+        if (!element.sourceCodeLocation ||
+            !element.sourceCodeLocation.attrs) {
             return null;
         }
         const loc = element.sourceCodeLocation.attrs[attr.toLowerCase()];
@@ -67,7 +68,7 @@ export class TemplateAnalyzer {
      * the raw value will be returned.
      * NOTE: if an attribute has multiple expressions in its value, this will
      * return the *first* expression.
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @param {SourceCode} source Source code from ESLint
      * @return {?ESTree.Expression|string}
@@ -101,11 +102,12 @@ export class TemplateAnalyzer {
     /**
      * Returns the raw attribute source of a given attribute
      *
-     * @param {treeAdapter.Element} element Element which owns this attribute
+     * @param {Parse5Element} element Element which owns this attribute
      * @param {string} attr Attribute name to retrieve
      * @return {string}
      */
     getRawAttributeValue(element, attr) {
+        var _a, _b;
         if (!element.sourceCodeLocation) {
             return null;
         }
@@ -115,7 +117,7 @@ export class TemplateAnalyzer {
             originalAttr = `${xAttribs[attr]}:${attr}`;
         }
         const loc = element.sourceCodeLocation.attrs[originalAttr];
-        const source = this.source.substring(loc.startOffset, loc.endOffset);
+        const source = this.source.substring((_a = loc === null || loc === void 0 ? void 0 : loc.startOffset) !== null && _a !== void 0 ? _a : 0, (_b = loc === null || loc === void 0 ? void 0 : loc.endOffset) !== null && _b !== void 0 ? _b : 0);
         const firstEq = source.indexOf('=');
         const left = firstEq === -1 ? source : source.substr(0, firstEq);
         const right = firstEq === -1 ? undefined : source.substr(firstEq + 1);

package/lib/util.d.ts

@@ -1,5 +1,15 @@
 import * as ESTree from 'estree';
 import { Rule } from 'eslint';
+import { type Htmlparser2TreeAdapterMap } from 'parse5-htmlparser2-tree-adapter';
+export type Parse5Node = Htmlparser2TreeAdapterMap['node'];
+export type Parse5Element = Htmlparser2TreeAdapterMap['element'];
+export type Parse5Document = Htmlparser2TreeAdapterMap['document'];
+export type Parse5DocumentFragment = Htmlparser2TreeAdapterMap['documentFragment'];
+export type Parse5CommentNode = Htmlparser2TreeAdapterMap['commentNode'];
+export type Parse5TextNode = Htmlparser2TreeAdapterMap['textNode'];
+export type AttributeLocation = NonNullable<Parse5Element['sourceCodeLocation']> & {
+    attrs: Record<string, Parse5Node['sourceCodeLocation']>;
+};
 export interface BabelDecorator extends ESTree.BaseNode {
     type: 'Decorator';
     expression: ESTree.Expression;

package/lib/util.js

@@ -241,7 +241,7 @@ export function hasLitPropertyDecorator(node) {
 export function getExpressionPlaceholder(node, quasi) {
     const i = node.quasi.quasis.indexOf(quasi);
     // Just a rough guess at if this might be an attribute binding or not
-    const possibleAttr = /\s[^\s\/>"'=]+=$/;
+    const possibleAttr = /\s[^\s/>"'=]+=$/;
     if (possibleAttr.test(quasi.value.raw)) {
         return `"{{__Q:${i}__}}"`;
     }
@@ -299,10 +299,10 @@ export function toKebabCase(camelCaseStr) {
  * @return {string[]}
  */
 export function getElementBaseClasses(context) {
-    var _a;
     const bases = new Set(['LitElement']);
-    if (Array.isArray((_a = context.settings.lit) === null || _a === void 0 ? void 0 : _a.elementBaseClasses)) {
-        const configuredBases = context.settings.lit.elementBaseClasses;
+    const settings = context.settings.lit;
+    if (Array.isArray(settings === null || settings === void 0 ? void 0 : settings.elementBaseClasses)) {
+        const configuredBases = settings.elementBaseClasses;
         for (const base of configuredBases) {
             bases.add(base);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-lit",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "type": "module",
   "description": "lit-html support for ESLint",
   "main": "lib/index.js",
@@ -41,8 +41,8 @@
     "node": ">= 18"
   },
   "dependencies": {
-    "parse5": "^6.0.1",
-    "parse5-htmlparser2-tree-adapter": "^6.0.1"
+    "parse5": "^8.0.1",
+    "parse5-htmlparser2-tree-adapter": "^8.0.1"
   },
   "peerDependencies": {
     "eslint": ">= 8"
@@ -50,24 +50,21 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",
     "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@eslint/js": "^9.39.4",
     "@types/chai": "^4.2.16",
     "@types/eslint": "^8.4.6",
     "@types/estree": "^1.0.0",
     "@types/mocha": "^10.0.0",
     "@types/node": "^20.8.8",
-    "@types/parse5": "^6.0.0",
-    "@types/parse5-htmlparser2-tree-adapter": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
     "c8": "^10.1.3",
     "chai": "^4.2.0",
-    "eslint": "^8.23.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-eslint-plugin": "^5.0.6",
+    "eslint": "^9.39.4",
+    "eslint-plugin-eslint-plugin": "^7.3.2",
     "espree": "^9.0.0",
     "mocha": "^10.0.0",
     "premove": "^4.0.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.2.2"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.1"
   }
 }