Merge pull request #12 from Workiva/link-2020/dom_attribute_diagnosti…

…c_cleanup

InvalidDomAttributeDiagnostic cleanup

over_react_analyzer_plugin/lib/src/diagnostic/dom_prop_types.dart

@@ -1,10 +1,12 @@
 import 'package:over_react_analyzer_plugin/src/diagnostic/component_usage.dart';
 import 'package:over_react_analyzer_plugin/src/fluent_interface_util.dart';
 
+/// A diagnostic that warns when an HTML attribute set on an OverReact `Dom` component builder is invalid
+/// based on the `<attribute>: [<allowed_html_elems>]` schema found within [allowedHtmlElementsForAttribute].
 class InvalidDomAttributeDiagnostic extends ComponentUsageDiagnosticContributor {
   static const code = ErrorCode(
     'over_react_invalid_dom_attribute',
-    "{}' isn't a valid HTML attribute prop for '{}'. It may only be used on: {}",
+    "'{0}' isn't a valid HTML attribute prop for '{1}'. It may only be used on: {2}",
     AnalysisErrorSeverity.WARNING,
     AnalysisErrorType.STATIC_WARNING,
   );
@@ -29,7 +31,7 @@ class InvalidDomAttributeDiagnostic extends ComponentUsageDiagnosticContributor
 
       if (!allowedElements.contains(nodeName)) {
         collector.addError(code, result.locationFor(lhs.propertyName),
-            errorMessageArgs: [propName, nodeName, allowedElements.join(',')]);
+            errorMessageArgs: [propName, 'Dom.$nodeName()', allowedElements.map((name) => 'Dom.$name()').join(',')]);
       }
     });
   }
@@ -50,6 +52,9 @@ String _camelToSpinalCase(String camel) {
       .toLowerCase();
 }
 
+/// A map keyed with HTML attributes and iterable values of the HTML element names they are allowed on.
+///
+/// > See: [InvalidDomAttributeDiagnostic]
 const allowedHtmlElementsForAttribute = {
   'accept': ['form', 'input'],
   'accept-charset': ['form'],

playground/web/dom_prop_types.dart

@@ -0,0 +1,62 @@
+import 'package:over_react/over_react.dart';
+
+part 'dom_prop_types.over_react.g.dart';
+
+main() {
+  final content = Fragment()(
+    (Dom.a()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..href = null
+      ..hrefLang = null
+      ..download = null
+      ..rel = null
+      ..target = null
+    )(),
+    (Dom.abbr()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..title = 'foo'
+    )(),
+    (Dom.address()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..title = 'foo'
+    )(),
+    (Dom.area()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..coords = 1
+      ..download = null
+      ..href = null
+      ..hrefLang = null
+      ..rel = null
+      ..shape = null
+      ..target = null
+    )(),
+    (Dom.article()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..title = 'foo'
+    )(),
+    (Dom.aside()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..title = 'foo'
+    )(),
+    (Dom.audio()
+      // This should have a lint.
+      ..size = 1
+      // These should have no lint
+      ..autoPlay = true
+      ..controls = true
+      ..muted = true
+    )(),
+  );
+}