wrec 0.40.0 → 0.40.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/scripts/lint.js

@@ -167,7 +167,12 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
     if (!metadata.classMethods.has(codeNode.text)) {
       uniquePush(
         findings.invalidEventHandlers,
-        `"${codeNode.text}" is not a defined instance method`
+        metadata.location
+          ? {
+            location: metadata.location,
+            message: `"${codeNode.text}" is not a defined instance method`
+          }
+          : `"${codeNode.text}" is not a defined instance method`
       );
     }
   }
@@ -180,9 +185,15 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
       if (!symbol) {
         const name = node.name.text;
         if (isCallCallee(node)) {
-          uniquePush(findings.undefinedMethods, name);
+          uniquePush(
+            findings.undefinedMethods,
+            metadata.location ? {location: metadata.location, message: name} : name
+          );
         } else {
-          uniquePush(findings.undefinedProperties, name);
+          uniquePush(
+            findings.undefinedProperties,
+            metadata.location ? {location: metadata.location, message: name} : name
+          );
         }
       }
     }
@@ -193,7 +204,12 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
         if (!metadata.contextKeys.has(callee.text)) {
           const symbol = checker.getSymbolAtLocation(callee);
           if (!symbol || requiresContextFunction(symbol, metadata.sourceFile)) {
-            uniquePush(findings.undefinedContextFunctions, callee.text);
+            uniquePush(
+              findings.undefinedContextFunctions,
+              metadata.location
+                ? {location: metadata.location, message: callee.text}
+                : callee.text
+            );
           }
         }
       } else if (
@@ -202,7 +218,14 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
       ) {
         const ownerType = checker.getTypeAtLocation(callee.expression);
         const symbol = ownerType.getProperty(callee.name.text);
-        if (!symbol) uniquePush(findings.undefinedMethods, callee.name.text);
+        if (!symbol) {
+          uniquePush(
+            findings.undefinedMethods,
+            metadata.location
+              ? {location: metadata.location, message: callee.name.text}
+              : callee.name.text
+          );
+        }
       }
 
       const signature =
@@ -229,6 +252,7 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
             findings.extraArguments.push({
               argument: toUserFacingExpression(argument.getText()),
               argumentIndex: parameters.length + index + 1,
+              location: metadata.location ?? null,
               methodName: toUserFacingExpression(callee.getText()),
               parameterCount: parameters.length
             });
@@ -257,6 +281,7 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
             findings.incompatibleArguments.push({
               argument: toUserFacingExpression(argument.getText()),
               argumentType: checker.typeToString(argumentType),
+              location: metadata.location ?? null,
               methodName: toUserFacingExpression(callee.getText()),
               parameterName: parameterSymbol.getName(),
               parameterType: checker.typeToString(parameterType)
@@ -276,6 +301,7 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
       if (!isNumericLikeType(leftType)) {
         findings.typeErrors.push({
           expression: toUserFacingExpression(node.getText()),
+          location: metadata.location ?? null,
           message:
             `left operand "${toUserFacingExpression(node.left.getText())}" ` +
             `has type ${checker.typeToString(leftType)}, ` +
@@ -286,6 +312,7 @@ function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
       if (!isNumericLikeType(rightType)) {
         findings.typeErrors.push({
           expression: toUserFacingExpression(node.getText()),
+          location: metadata.location ?? null,
           message:
             `right operand "${toUserFacingExpression(node.right.getText())}" ` +
             `has type ${checker.typeToString(rightType)}, ` +
@@ -515,8 +542,14 @@ function collectUseStateMapErrors(classNode, supportedProps, findings) {
           const componentProp = property.initializer.text;
           if (!supportedProps.has(componentProp)) {
             findings.invalidUseStateMaps.push(
-              `useState maps state property "${statePath}" to ` +
-                `missing component property "${componentProp}"`
+              {
+                location: node
+                  .getSourceFile()
+                  .getLineAndCharacterOfPosition(property.getStart()),
+                message:
+                  `useState maps state property "${statePath}" to ` +
+                  `missing component property "${componentProp}"`
+              }
             );
           }
         }
@@ -591,6 +624,7 @@ function createProgram(filePath, sourceText) {
 function extractProperties(sourceFile, checker, classNode) {
   const duplicateProperties = [];
   let formAssociated = false;
+  const propertyLocations = new Map();
   const propertyEntries = [];
   const reservedProperties = [];
   const supportedProps = new Map();
@@ -635,22 +669,41 @@ function extractProperties(sourceFile, checker, classNode) {
       if (!propName || !ts.isObjectLiteralExpression(property.initializer)) {
         continue;
       }
+      const propertyLocation = sourceFile.getLineAndCharacterOfPosition(
+        property.name.getStart(sourceFile)
+      );
 
       if (
         supportedProps.has(propName) &&
-        !duplicateProperties.includes(propName)
+        !duplicateProperties.some(
+          finding => getLocatedFindingMessage(finding).startsWith(`"${propName}" `)
+        )
       ) {
-        duplicateProperties.push(propName);
+        duplicateProperties.push({
+          location: propertyLocation,
+          message:
+            `"${propName}" first declared at ` +
+            `${formatLocation(propertyLocations.get(propName))}, ` +
+            `duplicated at ${formatLocation(propertyLocation)}`
+        });
       }
       if (
         RESERVED_PROPERTY_NAMES.has(propName) &&
-        !reservedProperties.includes(propName)
+        !reservedProperties.some(
+          finding => getLocatedFindingMessage(finding) === propName
+        )
       ) {
-        reservedProperties.push(propName);
+        reservedProperties.push({
+          location: propertyLocation,
+          message: propName
+        });
+      }
+      if (!propertyLocations.has(propName)) {
+        propertyLocations.set(propName, propertyLocation);
       }
 
       const config = property.initializer;
-      propertyEntries.push({config, propName});
+      propertyEntries.push({config, propName, property});
       const typeProp = getObjectProperty(config, 'type');
       const computedProp = getObjectProperty(config, 'computed');
 
@@ -738,20 +791,30 @@ function extractTemplateExpressions(
     }
 
     const rendered = getTemplateLiteralText(template);
+    const resolveLocation = createTemplateLocationResolver(
+      member.getSourceFile(),
+      template
+    );
 
     if (tag === 'css') {
       CSS_PROPERTY_RE.lastIndex = 0;
       while (true) {
         const match = CSS_PROPERTY_RE.exec(rendered);
         if (!match) break;
-        const value = match[2]?.trim();
+        const rawValue = match[2] ?? '';
+        const value = rawValue.trim();
         if (value && REFS_TEST_RE.test(value)) {
+          const valueOffsetInMatch = match[0].lastIndexOf(rawValue);
+          const leadingWhitespace = rawValue.length - rawValue.trimStart().length;
+          const valueLocation = resolveLocation(
+            match.index + valueOffsetInMatch + leadingWhitespace
+          );
           expressions.push({
             context: 'instance',
             eventHandler: false,
             kind: 'css',
             text: value,
-            location: null
+            location: valueLocation
           });
         }
       }
@@ -765,7 +828,8 @@ function extractTemplateExpressions(
       findings,
       componentPropertyMaps,
       supportedProps,
-      new Set()
+      new Set(),
+      resolveLocation
     );
   }
 
@@ -826,12 +890,91 @@ function findWrecFiles(rootDir, onMatch) {
   walk(rootDir);
 }
 
+// Converts an offset within rendered template text to a source location.
+function createTemplateLocationResolver(sourceFile, template) {
+  const segments = [];
+
+  if (ts.isNoSubstitutionTemplateLiteral(template)) {
+    segments.push({
+      renderedEnd: template.text.length,
+      renderedStart: 0,
+      sourceStart: template.getStart(sourceFile) + 1
+    });
+  } else {
+    let renderedStart = 0;
+    const headText = template.head.text;
+    segments.push({
+      renderedEnd: headText.length,
+      renderedStart,
+      sourceStart: template.head.getStart(sourceFile) + 1
+    });
+    renderedStart += headText.length;
+
+    template.templateSpans.forEach((span, index) => {
+      renderedStart += `${PLACEHOLDER_PREFIX}${index}`.length;
+      segments.push({
+        renderedEnd: renderedStart + span.literal.text.length,
+        renderedStart,
+        sourceStart: span.literal.getStart(sourceFile) + 1
+      });
+      renderedStart += span.literal.text.length;
+    });
+  }
+
+  return offset => {
+    const segment =
+      segments.find(
+        candidate =>
+          offset >= candidate.renderedStart && offset <= candidate.renderedEnd
+      ) ?? segments[segments.length - 1];
+    if (!segment) return null;
+
+    const sourceOffset =
+      segment.sourceStart + Math.max(0, offset - segment.renderedStart);
+    return sourceFile.getLineAndCharacterOfPosition(sourceOffset);
+  };
+}
+
 // Formats an optional source location as line and column text.
 function formatLocation(location) {
   if (!location) return '';
   return `:${location.line + 1}:${location.character + 1}`;
 }
 
+// Gets the source location for the start of a parsed HTML node.
+function getHtmlNodeLocation(node, resolveLocation) {
+  const [start] = node.range ?? [];
+  return Number.isInteger(start) && start >= 0 ? resolveLocation(start) : null;
+}
+
+// Gets the source location for a specific HTML attribute within a parsed node.
+function getHtmlAttributeLocation(node, attrName, resolveLocation) {
+  const [start] = node.range ?? [];
+  const tagName = getHtmlTagName(node);
+  if (!Number.isInteger(start) || start < 0 || !tagName) return null;
+
+  const attrsOffset = node.rawAttrs.indexOf(attrName);
+  if (attrsOffset < 0) return getHtmlNodeLocation(node, resolveLocation);
+
+  return resolveLocation(start + 1 + tagName.length + 1 + attrsOffset);
+}
+
+// Formats a lint finding that may optionally include a source location.
+function formatMaybeLocatedFinding(finding) {
+  if (typeof finding === 'string') return finding;
+  return `${formatLocation(finding.location)} ${finding.message}`.trim();
+}
+
+// Gets the message text from a lint finding that may include a location.
+function getLocatedFindingMessage(finding) {
+  return typeof finding === 'string' ? finding : finding.message;
+}
+
+// Compares lint findings that may optionally include source locations.
+function compareLocatedFindings(a, b) {
+  return getLocatedFindingMessage(a).localeCompare(getLocatedFindingMessage(b));
+}
+
 // Formats the collected lint findings into the command-line report output.
 function formatReport(
   filePath,
@@ -904,14 +1047,19 @@ function formatReport(
 
   if (findings.duplicateProperties.length > 0) {
     lines.push('duplicate properties:');
-    findings.duplicateProperties.forEach(name => lines.push(`  ${name}`));
+    findings.duplicateProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.extraArguments.length > 0) {
     lines.push('extra arguments:');
     findings.extraArguments.forEach(finding => {
+      const locationPrefix = finding.location
+        ? `${formatLocation(finding.location)} `
+        : '';
       lines.push(
-        `  ${finding.methodName}: argument ${finding.argumentIndex} ` +
+        `  ${locationPrefix}${finding.methodName}: argument ${finding.argumentIndex} ` +
           `"${finding.argument}" exceeds the ` +
           `${finding.parameterCount}-parameter signature`
       );
@@ -921,8 +1069,11 @@ function formatReport(
   if (findings.incompatibleArguments.length > 0) {
     lines.push('incompatible arguments:');
     findings.incompatibleArguments.forEach(finding => {
+      const locationPrefix = finding.location
+        ? `${formatLocation(finding.location)} `
+        : '';
       lines.push(
-        `  ${finding.methodName}: argument "${finding.argument}" ` +
+        `  ${locationPrefix}${finding.methodName}: argument "${finding.argument}" ` +
           `has type ${finding.argumentType}, but parameter ` +
           `"${finding.parameterName}" expects ${finding.parameterType}`
       );
@@ -931,143 +1082,158 @@ function formatReport(
 
   if (findings.incompatibleDeclareTypes.length > 0) {
     lines.push('incompatible declare types:');
-    findings.incompatibleDeclareTypes.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.incompatibleDeclareTypes.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidCheckedBindings.length > 0) {
     lines.push('invalid checked bindings:');
-    findings.invalidCheckedBindings.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidCheckedBindings.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidComputedProperties.length > 0) {
     lines.push('invalid computed properties:');
-    findings.invalidComputedProperties.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidComputedProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidDefaultValues.length > 0) {
     lines.push('invalid default values:');
-    findings.invalidDefaultValues.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidDefaultValues.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidEventHandlers.length > 0) {
     lines.push('invalid event handler references:');
-    findings.invalidEventHandlers.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidEventHandlers.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidFormAssocValues.length > 0) {
     lines.push('invalid form-assoc values:');
-    findings.invalidFormAssocValues.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidFormAssocValues.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidHtmlNesting.length > 0) {
     lines.push('invalid html nesting:');
-    findings.invalidHtmlNesting.forEach(message => lines.push(`  ${message}`));
+    findings.invalidHtmlNesting.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.invalidRefAttributes.length > 0) {
     lines.push('invalid ref attributes:');
-    findings.invalidRefAttributes.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidRefAttributes.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidTypeProperties.length > 0) {
     lines.push('invalid type properties:');
-    findings.invalidTypeProperties.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidTypeProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidUsedByReferences.length > 0) {
     lines.push('invalid usedBy references:');
-    findings.invalidUsedByReferences.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidUsedByReferences.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidUseStateMaps.length > 0) {
     lines.push('invalid useState map entries:');
-    findings.invalidUseStateMaps.forEach(message => lines.push(`  ${message}`));
+    findings.invalidUseStateMaps.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.invalidValueBindings.length > 0) {
     lines.push('invalid value bindings:');
-    findings.invalidValueBindings.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidValueBindings.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.invalidValuesConfigurations.length > 0) {
     lines.push('invalid values configurations:');
-    findings.invalidValuesConfigurations.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.invalidValuesConfigurations.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.missingRequiredMembers.length > 0) {
     lines.push('missing required members:');
-    findings.missingRequiredMembers.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.missingRequiredMembers.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.missingTypeProperties.length > 0) {
     lines.push('missing type properties:');
-    findings.missingTypeProperties.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.missingTypeProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.reservedProperties.length > 0) {
     lines.push('reserved property names:');
-    findings.reservedProperties.forEach(name => lines.push(`  ${name}`));
+    findings.reservedProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.typeErrors.length > 0) {
     lines.push('type errors:');
     findings.typeErrors.forEach(finding => {
-      lines.push(`  ${finding.expression}: ${finding.message}`);
+      const locationPrefix = finding.location
+        ? `${formatLocation(finding.location)} `
+        : '';
+      lines.push(`  ${locationPrefix}${finding.expression}: ${finding.message}`);
     });
   }
 
   if (findings.undefinedContextFunctions.length > 0) {
     lines.push('undefined context functions:');
-    findings.undefinedContextFunctions.forEach(name => lines.push(`  ${name}`));
+    findings.undefinedContextFunctions.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.undefinedMethods.length > 0) {
     lines.push('undefined methods:');
-    findings.undefinedMethods.forEach(name => lines.push(`  ${name}`));
+    findings.undefinedMethods.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.undefinedProperties.length > 0) {
     lines.push('undefined properties:');
-    findings.undefinedProperties.forEach(name => lines.push(`  ${name}`));
+    findings.undefinedProperties.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
+    );
   }
 
   if (findings.unsupportedEventNames.length > 0) {
     lines.push('unsupported event names:');
-    findings.unsupportedEventNames.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.unsupportedEventNames.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
   if (findings.unsupportedHtmlAttributes.length > 0) {
     lines.push('unsupported html attributes:');
-    findings.unsupportedHtmlAttributes.forEach(message =>
-      lines.push(`  ${message}`)
+    findings.unsupportedHtmlAttributes.forEach(finding =>
+      lines.push(`  ${formatMaybeLocatedFinding(finding)}`)
     );
   }
 
@@ -1557,14 +1723,32 @@ export function lintSource(filePath, sourceText, options = {}) {
   }));
 
   if (allMethods.has('formAssociatedCallback') && !formAssociated) {
+    const callbackMember = classNode.members.find(
+      member =>
+        ts.isMethodDeclaration(member) &&
+        getMemberName(member) === 'formAssociatedCallback'
+    );
     findings.missingRequiredMembers.push(
-      'formAssociatedCallback is defined, but static formAssociated is not true'
+      {
+        location: callbackMember
+          ? callbackMember
+            .getSourceFile()
+            .getLineAndCharacterOfPosition(
+              callbackMember.name.getStart(callbackMember.getSourceFile())
+            )
+          : null,
+        message:
+          'formAssociatedCallback is defined, but static formAssociated is not true'
+      }
     );
   }
   if (!hasStaticHtmlDefinition(classNode)) {
-    findings.missingRequiredMembers.push(
-      'static html property must be defined'
-    );
+    findings.missingRequiredMembers.push({
+      location: sourceFile.getLineAndCharacterOfPosition(
+        classNode.name?.getStart(sourceFile) ?? classNode.getStart(sourceFile)
+      ),
+      message: 'static html property must be defined'
+    });
   }
 
   const augmentedSource = buildAugmentedSource(
@@ -1606,7 +1790,12 @@ export function lintSource(filePath, sourceText, options = {}) {
     ) {
       uniquePush(
         findings.invalidEventHandlers,
-        `"${expr.text}" is not a defined instance method`
+        expr.location
+          ? {
+            location: expr.location,
+            message: `"${expr.text}" is not a defined instance method`
+          }
+          : `"${expr.text}" is not a defined instance method`
       );
     }
   });
@@ -1618,11 +1807,12 @@ export function lintSource(filePath, sourceText, options = {}) {
       contextKeys: new Set(contextKeys),
       checkContextCalls: allCodeItems[index]?.checkContextCalls ?? true,
       eventHandler: allCodeItems[index]?.eventHandler ?? false,
+      location: allCodeItems[index]?.location ?? null,
       sourceFile: augmentedSourceFile
     });
   });
 
-  findings.duplicateProperties.sort();
+  findings.duplicateProperties.sort(compareLocatedFindings);
   findings.extraArguments.sort(
     (a, b) =>
       a.methodName.localeCompare(b.methodName) ||
@@ -1633,28 +1823,28 @@ export function lintSource(filePath, sourceText, options = {}) {
       a.methodName.localeCompare(b.methodName) ||
       a.parameterName.localeCompare(b.parameterName)
   );
-  findings.incompatibleDeclareTypes.sort();
-  findings.invalidCheckedBindings.sort();
-  findings.invalidComputedProperties.sort();
-  findings.invalidDefaultValues.sort();
-  findings.invalidEventHandlers.sort();
-  findings.invalidFormAssocValues.sort();
-  findings.invalidHtmlNesting.sort();
-  findings.invalidRefAttributes.sort();
-  findings.invalidTypeProperties.sort();
-  findings.invalidUsedByReferences.sort();
-  findings.invalidUseStateMaps.sort();
-  findings.invalidValueBindings.sort();
-  findings.invalidValuesConfigurations.sort();
-  findings.missingRequiredMembers.sort();
-  findings.missingTypeProperties.sort();
-  findings.reservedProperties.sort();
+  findings.incompatibleDeclareTypes.sort(compareLocatedFindings);
+  findings.invalidCheckedBindings.sort(compareLocatedFindings);
+  findings.invalidComputedProperties.sort(compareLocatedFindings);
+  findings.invalidDefaultValues.sort(compareLocatedFindings);
+  findings.invalidEventHandlers.sort(compareLocatedFindings);
+  findings.invalidFormAssocValues.sort(compareLocatedFindings);
+  findings.invalidHtmlNesting.sort(compareLocatedFindings);
+  findings.invalidRefAttributes.sort(compareLocatedFindings);
+  findings.invalidTypeProperties.sort(compareLocatedFindings);
+  findings.invalidUsedByReferences.sort(compareLocatedFindings);
+  findings.invalidUseStateMaps.sort(compareLocatedFindings);
+  findings.invalidValueBindings.sort(compareLocatedFindings);
+  findings.invalidValuesConfigurations.sort(compareLocatedFindings);
+  findings.missingRequiredMembers.sort(compareLocatedFindings);
+  findings.missingTypeProperties.sort(compareLocatedFindings);
+  findings.reservedProperties.sort(compareLocatedFindings);
   findings.typeErrors.sort((a, b) => a.expression.localeCompare(b.expression));
-  findings.undefinedContextFunctions.sort();
-  findings.undefinedMethods.sort();
-  findings.undefinedProperties.sort();
-  findings.unsupportedEventNames.sort();
-  findings.unsupportedHtmlAttributes.sort();
+  findings.undefinedContextFunctions.sort(compareLocatedFindings);
+  findings.undefinedMethods.sort(compareLocatedFindings);
+  findings.undefinedProperties.sort(compareLocatedFindings);
+  findings.unsupportedEventNames.sort(compareLocatedFindings);
+  findings.unsupportedHtmlAttributes.sort(compareLocatedFindings);
 
   return formatReport(
     filePath,
@@ -1831,7 +2021,12 @@ function typeNodeFromConstructorExpression(expression) {
 
 // Pushes a value into an array only if it is not already present.
 function uniquePush(array, value) {
-  if (!array.includes(value)) array.push(value);
+  const valueText = getLocatedFindingMessage(value);
+  if (
+    !array.some(existing => getLocatedFindingMessage(existing) === valueText)
+  ) {
+    array.push(value);
+  }
 }
 
 // Validates checked bindings for checkbox and radio input elements.
@@ -1840,7 +2035,8 @@ function validateCheckedBinding(
   attrName,
   attrValue,
   findings,
-  supportedProps
+  supportedProps,
+  resolveLocation
 ) {
   if (getHtmlTagName(node) !== 'input') return;
 
@@ -1862,8 +2058,12 @@ function validateCheckedBinding(
   const expectedTypeName = getPropertyConfigTypeName(expectedType);
 
   findings.invalidCheckedBindings.push(
-    `input type="${inputType}" attribute "${attrName}" refers to ` +
-      `property "${propName}" whose type is not ${expectedTypeName}`
+    {
+      location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+      message:
+        `input type="${inputType}" attribute "${attrName}" refers to ` +
+        `property "${propName}" whose type is not ${expectedTypeName}`
+    }
   );
 }
 
@@ -1873,7 +2073,8 @@ function validateValueBinding(
   attrName,
   attrValue,
   findings,
-  supportedProps
+  supportedProps,
+  resolveLocation
 ) {
   const [baseAttrName] = attrName.split(':');
   if (baseAttrName !== 'value') return;
@@ -1890,8 +2091,12 @@ function validateValueBinding(
   }
 
   findings.invalidValueBindings.push(
-    `${getHtmlTagName(node)} attribute "${attrName}" refers to property ` +
-      `"${propName}" whose type is not String or Number`
+    {
+      location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+      message:
+        `${getHtmlTagName(node)} attribute "${attrName}" refers to property ` +
+        `"${propName}" whose type is not String or Number`
+    }
   );
 }
 
@@ -1901,7 +2106,8 @@ function validateComputedProperty(
   computedText,
   supportedProps,
   classMethods,
-  findings
+  findings,
+  location
 ) {
   for (const match of computedText.matchAll(THIS_REF_RE)) {
     const referencedName = match[1];
@@ -1910,8 +2116,12 @@ function validateComputedProperty(
       !classMethods.has(referencedName)
     ) {
       findings.invalidComputedProperties.push(
-        `property "${propName}" computed references ` +
-          `missing property "${referencedName}"`
+        {
+          location,
+          message:
+            `property "${propName}" computed references ` +
+            `missing property "${referencedName}"`
+        }
       );
     }
   }
@@ -1920,15 +2130,23 @@ function validateComputedProperty(
     const methodName = match[1];
     if (!classMethods.has(methodName)) {
       findings.invalidComputedProperties.push(
-        `property "${propName}" computed calls ` +
-          `non-method instance member "${methodName}"`
+        {
+          location,
+          message:
+            `property "${propName}" computed calls ` +
+            `non-method instance member "${methodName}"`
+        }
       );
     }
   }
 }
 
 // Validates that computed properties do not form dependency cycles.
-function validateComputedPropertyCycles(computedDependencies, findings) {
+function validateComputedPropertyCycles(
+  computedDependencies,
+  computedLocations,
+  findings
+) {
   const computedNames = [...computedDependencies.keys()].sort();
   const dependencyCountMap = new Map();
   const dependentsMap = new Map();
@@ -1967,8 +2185,17 @@ function validateComputedPropertyCycles(computedDependencies, findings) {
   const cycleNames = computedNames.filter(
     computedName => dependencyCountMap.get(computedName) > 0
   );
+  const cycleLocation = cycleNames
+    .map(name => computedLocations.get(name))
+    .filter(Boolean)
+    .sort(
+      (a, b) => a.line - b.line || a.character - b.character
+    )[0];
   findings.invalidComputedProperties.push(
-    `computed properties form a cycle: ${cycleNames.join(', ')}`
+    {
+      location: cycleLocation ?? null,
+      message: `computed properties form a cycle: ${cycleNames.join(', ')}`
+    }
   );
 }
 
@@ -2044,7 +2271,13 @@ function validateFilePath(filePath) {
 }
 
 // Validates the syntax of a form-assoc attribute value.
-function validateFormAssocAttribute(attrName, attrValue, findings) {
+function validateFormAssocAttribute(
+  node,
+  attrName,
+  attrValue,
+  findings,
+  resolveLocation
+) {
   if (attrName !== 'form-assoc') return;
 
   const pairs = attrValue.split(',');
@@ -2055,8 +2288,12 @@ function validateFormAssocAttribute(attrName, attrValue, findings) {
       .map(part => part.trim());
     if (!trimmed || rest.length > 0 || !propName || !fieldName) {
       findings.invalidFormAssocValues.push(
-        `form-assoc="${attrValue}" is invalid; expected ` +
-          '"property:field" or a comma-separated list of them'
+        {
+          location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+          message:
+            `form-assoc="${attrValue}" is invalid; expected ` +
+            '"property:field" or a comma-separated list of them'
+        }
       );
       return;
     }
@@ -2069,7 +2306,8 @@ function validateFormAssocPropertyMappings(
   attrName,
   attrValue,
   findings,
-  componentPropertyMaps
+  componentPropertyMaps,
+  resolveLocation
 ) {
   if (attrName !== 'form-assoc') return;
   const tagName = (node.rawTagName || node.tagName || '').toLowerCase();
@@ -2082,15 +2320,19 @@ function validateFormAssocPropertyMappings(
     if (!propName) continue;
     if (!supportedProps.has(propName)) {
       findings.invalidFormAssocValues.push(
-        `form-assoc="${attrValue}" refers to ` +
-          `missing component property "${propName}"`
+        {
+          location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+          message:
+            `form-assoc="${attrValue}" refers to ` +
+            `missing component property "${propName}"`
+        }
       );
     }
   }
 }
 
 // Validates that an HTML attribute is supported for the current element.
-function validateHtmlAttribute(node, attrName, findings) {
+function validateHtmlAttribute(node, attrName, findings, resolveLocation) {
   if (attrName.startsWith('aria-') || attrName.startsWith('data-')) return;
   if (attrName.startsWith('on')) return;
   if (attrName === 'form-assoc') return;
@@ -2107,12 +2349,15 @@ function validateHtmlAttribute(node, attrName, findings) {
   if (supported.has(baseAttrName)) return;
 
   findings.unsupportedHtmlAttributes.push(
-    `${tagName} attribute "${attrName}" is not supported`
+    {
+      location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+      message: `${tagName} attribute "${attrName}" is not supported`
+    }
   );
 }
 
 // Validates required parent-child relationships for supported HTML tags.
-function validateHtmlNesting(node, findings) {
+function validateHtmlNesting(node, findings, resolveLocation) {
   const tagName = getHtmlTagName(node);
   if (!tagName || tagName.includes('-')) return;
 
@@ -2127,9 +2372,13 @@ function validateHtmlNesting(node, findings) {
       ? `<${parentTagName}>`
       : 'the document root';
     findings.invalidHtmlNesting.push(
-      `<${tagName}> must be nested inside ${[...allowedParents]
-        .map(name => `<${name}>`)
-        .join(' or ')}, but parent is ${parentDescription}`
+      {
+        location: getHtmlNodeLocation(node, resolveLocation),
+        message:
+          `<${tagName}> must be nested inside ${[...allowedParents]
+            .map(name => `<${name}>`)
+            .join(' or ')}, but parent is ${parentDescription}`
+      }
     );
   }
 
@@ -2143,7 +2392,10 @@ function validateHtmlNesting(node, findings) {
     if (allowedChildren.has(childTagName)) continue;
 
     findings.invalidHtmlNesting.push(
-      `<${childTagName}> is not allowed directly inside <${tagName}>`
+      {
+        location: getHtmlNodeLocation(child, resolveLocation),
+        message: `<${childTagName}> is not allowed directly inside <${tagName}>`
+      }
     );
   }
 }
@@ -2160,6 +2412,7 @@ function validatePropertyConfigs(
   findings
 ) {
   const computedDependencies = new Map();
+  const computedLocations = new Map();
   const computedPropNames = new Set();
 
   for (const {config, propName} of propertyEntries) {
@@ -2170,11 +2423,17 @@ function validatePropertyConfigs(
       (ts.isStringLiteral(computedProp.initializer) ||
         ts.isNoSubstitutionTemplateLiteral(computedProp.initializer))
     ) {
+      computedLocations.set(
+        propName,
+        sourceFile.getLineAndCharacterOfPosition(
+          computedProp.initializer.getStart(sourceFile)
+        )
+      );
       computedPropNames.add(propName);
     }
   }
 
-  for (const {config, propName} of propertyEntries) {
+  for (const {config, propName, property} of propertyEntries) {
     const computedProp = getObjectProperty(config, 'computed');
     const declaredTypeNode = declaredPropertyTypes.get(propName);
     const typeProp = getObjectProperty(config, 'type');
@@ -2182,6 +2441,9 @@ function validatePropertyConfigs(
     const valueProp = getObjectProperty(config, 'value');
     const valuesProp = getObjectProperty(config, 'values');
     const valuesConfigError = getValuesConfigurationError(valuesProp);
+    const propertyLocation = sourceFile.getLineAndCharacterOfPosition(
+      property.name.getStart(sourceFile)
+    );
 
     const typeExpression =
       typeProp && ts.isPropertyAssignment(typeProp)
@@ -2190,7 +2452,10 @@ function validatePropertyConfigs(
 
     if (!typeExpression) {
       findings.missingTypeProperties.push(
-        `property "${propName}" does not specify a type`
+        {
+          location: propertyLocation,
+          message: `property "${propName}" does not specify a type`
+        }
       );
     } else if (
       SUPPORTED_PROPERTY_TYPE_NAMES.has(
@@ -2198,16 +2463,24 @@ function validatePropertyConfigs(
       )
     ) {
       findings.invalidTypeProperties.push(
-        `property "${propName}" type cannot use generic syntax like ` +
-          `"${typeExpression.getText(sourceFile).trim()}"; use ` +
-          `"${getPropertyTypeGenericBaseName(sourceFile, typeExpression)}" instead`
+        {
+          location: propertyLocation,
+          message:
+            `property "${propName}" type cannot use generic syntax like ` +
+            `"${typeExpression.getText(sourceFile).trim()}"; use ` +
+            `"${getPropertyTypeGenericBaseName(sourceFile, typeExpression)}" instead`
+        }
       );
     } else if (
       !SUPPORTED_PROPERTY_TYPE_NAMES.has(typeExpressionKind(typeExpression))
     ) {
       findings.invalidTypeProperties.push(
-        `property "${propName}" type must be one of ` +
-          'Boolean, Number, String, Object, Array, or HTMLElement'
+        {
+          location: propertyLocation,
+          message:
+            `property "${propName}" type must be one of ` +
+            'Boolean, Number, String, Object, Array, or HTMLElement'
+        }
       );
     } else if (declaredTypeNode) {
       if (
@@ -2218,10 +2491,14 @@ function validatePropertyConfigs(
         )
       ) {
         findings.incompatibleDeclareTypes.push(
-          `property "${propName}" declare type ` +
-            `"${getPropertyTypeTextFromNode(sourceFile, declaredTypeNode)}" ` +
-            `is not compatible with static properties type ` +
-            `"${getPropertyConfigTypeName(typeExpressionKind(typeExpression))}"`
+          {
+            location: propertyLocation,
+            message:
+              `property "${propName}" declare type ` +
+              `"${getPropertyTypeTextFromNode(sourceFile, declaredTypeNode)}" ` +
+              `is not compatible with static properties type ` +
+              `"${getPropertyConfigTypeName(typeExpressionKind(typeExpression))}"`
+          }
         );
       }
     }
@@ -2235,16 +2512,24 @@ function validatePropertyConfigs(
             const getterName = getGetterName(methodName);
             if (getterNames.has(getterName)) continue;
             findings.invalidUsedByReferences.push(
-              `property "${propName}" usedBy references ` +
-                `missing getter "${getterName}"`
+              {
+                location: propertyLocation,
+                message:
+                  `property "${propName}" usedBy references ` +
+                  `missing getter "${getterName}"`
+              }
             );
             continue;
           }
 
           if (!classMethods.has(methodName)) {
             findings.invalidUsedByReferences.push(
-              `property "${propName}" usedBy references ` +
-                `missing method "${methodName}"`
+              {
+                location: propertyLocation,
+                message:
+                  `property "${propName}" usedBy references ` +
+                  `missing method "${methodName}"`
+              }
             );
           }
         }
@@ -2269,13 +2554,17 @@ function validatePropertyConfigs(
         computedProp.initializer.text,
         supportedProps,
         classMethods,
-        findings
+        findings,
+        computedLocations.get(propName) ?? propertyLocation
       );
     }
 
     if (valuesConfigError) {
       findings.invalidValuesConfigurations.push(
-        `property "${propName}" ${valuesConfigError}`
+        {
+          location: propertyLocation,
+          message: `property "${propName}" ${valuesConfigError}`
+        }
       );
     }
 
@@ -2283,7 +2572,10 @@ function validatePropertyConfigs(
     if (values) {
       if (typeExpressionKind(typeExpression) !== 'String') {
         findings.invalidValuesConfigurations.push(
-          `property "${propName}" uses values, but its type is not String`
+          {
+            location: propertyLocation,
+            message: `property "${propName}" uses values, but its type is not String`
+          }
         );
       }
 
@@ -2295,8 +2587,12 @@ function validatePropertyConfigs(
         !values.includes(valueProp.initializer.text)
       ) {
         findings.invalidDefaultValues.push(
-          `property "${propName}" default value ` +
-            `"${valueProp.initializer.text}" is not in values`
+          {
+            location: propertyLocation,
+            message:
+              `property "${propName}" default value ` +
+              `"${valueProp.initializer.text}" is not in values`
+          }
         );
       }
     }
@@ -2309,15 +2605,23 @@ function validatePropertyConfigs(
       );
       if (mismatch) {
         findings.invalidDefaultValues.push(
-          `property "${propName}" default value ` +
-            `has type ${mismatch.valueTypeName}, ` +
-            `but declared type is ${mismatch.typeName}`
+          {
+            location: propertyLocation,
+            message:
+              `property "${propName}" default value ` +
+              `has type ${mismatch.valueTypeName}, ` +
+              `but declared type is ${mismatch.typeName}`
+          }
         );
       }
     }
   }
 
-  validateComputedPropertyCycles(computedDependencies, findings);
+  validateComputedPropertyCycles(
+    computedDependencies,
+    computedLocations,
+    findings
+  );
 }
 
 // Validates that a ref attribute targets a unique HTMLElement property.
@@ -2325,7 +2629,8 @@ function validateRefAttribute(
   attrValue,
   supportedProps,
   findings,
-  seenRefProps
+  seenRefProps,
+  location
 ) {
   if (!attrValue) return;
 
@@ -2335,23 +2640,34 @@ function validateRefAttribute(
   const propInfo = supportedProps.get(propName);
   if (!propInfo) {
     findings.invalidRefAttributes.push(
-      `ref="${attrValue}" refers to missing property "${propName}"`
+      {
+        location,
+        message: `ref="${attrValue}" refers to missing property "${propName}"`
+      }
     );
     return;
   }
 
   if (propInfo.typeText !== 'HTMLElement') {
     findings.invalidRefAttributes.push(
-      `ref="${attrValue}" refers to property "${propName}" ` +
-        'whose type is not HTMLElement'
+      {
+        location,
+        message:
+          `ref="${attrValue}" refers to property "${propName}" ` +
+          'whose type is not HTMLElement'
+      }
     );
     return;
   }
 
   if (seenRefProps.has(propName)) {
     findings.invalidRefAttributes.push(
-      `ref="${attrValue}" is a duplicate reference ` +
-        `to the property "${propName}"`
+      {
+        location,
+        message:
+          `ref="${attrValue}" is a duplicate reference ` +
+          `to the property "${propName}"`
+      }
     );
     return;
   }
@@ -2360,15 +2676,19 @@ function validateRefAttribute(
 }
 
 // Validates event names used in value-binding attributes.
-function validateValueBindingEvent(node, attrName, findings) {
+function validateValueBindingEvent(node, attrName, findings, resolveLocation) {
   const [realAttrName, eventName] = attrName.split(':');
   if (realAttrName !== 'value' || !eventName) return;
   if (SUPPORTED_EVENT_NAMES.has(eventName)) return;
 
   const tagName = node.rawTagName || node.tagName || 'element';
   findings.unsupportedEventNames.push(
-    `${tagName} attribute "${attrName}" refers to ` +
-      `an unsupported event name "${eventName}"`
+    {
+      location: getHtmlAttributeLocation(node, attrName, resolveLocation),
+      message:
+        `${tagName} attribute "${attrName}" refers to ` +
+        `an unsupported event name "${eventName}"`
+    }
   );
 }
 
@@ -2379,33 +2699,55 @@ function walkHtmlNode(
   findings,
   componentPropertyMaps,
   supportedProps,
-  seenRefProps
+  seenRefProps,
+  resolveLocation
 ) {
   if (node.nodeType === 1) {
-    validateHtmlNesting(node, findings);
+    validateHtmlNesting(node, findings, resolveLocation);
 
     for (const [attrName, attrValue] of Object.entries(node.attributes)) {
       if (!attrValue) continue;
-      validateFormAssocAttribute(attrName, attrValue, findings);
+      validateFormAssocAttribute(
+        node,
+        attrName,
+        attrValue,
+        findings,
+        resolveLocation
+      );
       validateFormAssocPropertyMappings(
         node,
         attrName,
         attrValue,
         findings,
-        componentPropertyMaps
+        componentPropertyMaps,
+        resolveLocation
       );
       validateCheckedBinding(
         node,
         attrName,
         attrValue,
         findings,
-        supportedProps
+        supportedProps,
+        resolveLocation
+      );
+      validateHtmlAttribute(node, attrName, findings, resolveLocation);
+      validateValueBinding(
+        node,
+        attrName,
+        attrValue,
+        findings,
+        supportedProps,
+        resolveLocation
       );
-      validateHtmlAttribute(node, attrName, findings);
-      validateValueBinding(node, attrName, attrValue, findings, supportedProps);
-      validateValueBindingEvent(node, attrName, findings);
+      validateValueBindingEvent(node, attrName, findings, resolveLocation);
       if (attrName === 'ref') {
-        validateRefAttribute(attrValue, supportedProps, findings, seenRefProps);
+        validateRefAttribute(
+          attrValue,
+          supportedProps,
+          findings,
+          seenRefProps,
+          getHtmlAttributeLocation(node, attrName, resolveLocation)
+        );
       }
       if (
         REFS_TEST_RE.test(attrValue) ||
@@ -2416,7 +2758,7 @@ function walkHtmlNode(
           eventHandler: attrName.startsWith('on'),
           kind: 'html',
           text: attrValue.trim(),
-          location: null
+          location: getHtmlAttributeLocation(node, attrName, resolveLocation)
         });
       }
     }
@@ -2433,7 +2775,7 @@ function walkHtmlNode(
         eventHandler: false,
         kind: 'html',
         text,
-        location: null
+        location: getHtmlNodeLocation(node, resolveLocation)
       });
     }
   }
@@ -2445,7 +2787,8 @@ function walkHtmlNode(
       findings,
       componentPropertyMaps,
       supportedProps,
-      seenRefProps
+      seenRefProps,
+      resolveLocation
     );
   }
 }