Port of github.com/polymer/polymer.

pkg/polymer/lib/src/build/linter.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 /**
  * Logic to validate that developers are correctly using Polymer constructs.
  * This is mainly used to produce warnings for feedback in the editor.
  */
 library polymer.src.build.linter;
 
 import 'dart:io';
 import 'dart:async';
 import 'dart:mirrors';
 import 'dart:convert' show JSON;
 
 import 'package:barback/barback.dart';
 import 'package:html5lib/dom.dart';
 import 'package:html5lib/dom_parsing.dart';
+import 'package:source_maps/span.dart';
 
 import 'common.dart';
+import 'utils.dart';
 
 typedef String MessageFormatter(String kind, String message, Span span);
 
 /**
  * A linter that checks for common Polymer errors and produces warnings to
  * show on the editor or the command line. Leaves sources unchanged, but creates
  * a new asset containing all the warnings.
  */
 class Linter extends Transformer with PolymerTransformer {
   final TransformOptions options;
@@ skipping 153 matching lines @@
     output.write(span.getLocationMessage(message,
           useColors: useColors,
           color: levelColor));
   }
   return output.toString();
 }
 
 /**
  * Information needed about other polymer-element tags in order to validate
  * how they are used and extended.
+ *
+ * Note: these are only created for polymer-element, because pure custom
+ * elements don't have a declarative form.
  */
 class _ElementSummary {
   final String tagName;
   final String extendsTag;
   final Span span;
 
   _ElementSummary extendsType;
   bool hasConflict = false;
 
   String get baseExtendsTag => extendsType == null
@@ skipping 73 matching lines @@
           'at least one dash and can\'t be any of the following names: '
           '${_invalidTagNames.keys.join(", ")}.',
           node.sourceSpan);
     }
 
     if (_elements[extendsTag] == null && _isCustomTag(extendsTag)) {
       _logger.warning('custom element with name "$extendsTag" not found.',
           node.sourceSpan);
     }
 
+    var attrs = node.attributes['attributes'];
+    if (attrs != null) {
+      var attrsSpan = node.attributeSpans['attributes'];
+
+      // names='a b c' or names='a,b,c'
+      // record each name for publishing
+      for (var attr in attrs.split(attrs.contains(',') ? ',' : ' ')) {
+        // remove excess ws
+        attr = attr.trim();
+        if (!_validateCustomAttributeName(attr, attrsSpan)) break;
+      }
+    }
+
     var oldValue = _inPolymerElement;
     _inPolymerElement = true;
     super.visitElement(node);
     _inPolymerElement = oldValue;
   }
 
   /**
    * Produces warnings for malformed script tags. In html5 leaving off type= is
    * fine, but it defaults to text/javascript. Because this might be a common
    * error, we warn about it when  src file ends in .dart, but the type is
@@ skipping 65 matching lines @@
     } else {
       // <button is="fancy-button">
       customTagName = node.attributes['is'];
       hasIsAttribute = true;
     }
 
     if (customTagName == null || customTagName == 'polymer-element') return;
 
     var info = _elements[customTagName];
     if (info == null) {
-      _logger.warning('definition for custom element with tag name '
+      // TODO(jmesserly): this warning is wrong if someone is using raw custom
+      // elements. Is there another way we can handle this warning that won't
+      // generate false positives?
+      _logger.warning('definition for Polymer element with tag name '
           '"$customTagName" not found.', node.sourceSpan);
       return;
-    } 
+    }
 
     var baseTag = info.baseExtendsTag;
     if (baseTag != null && !hasIsAttribute) {
       _logger.warning(
           'custom element "$customTagName" extends from "$baseTag", but '
           'this tag will not include the default properties of "$baseTag". '
           'To fix this, either write this tag as <$baseTag '
           'is="$customTagName"> or remove the "extends" attribute from '
           'the custom element declaration.', node.sourceSpan);
       return;
     }
-    
+
     if (hasIsAttribute && baseTag == null) {
       _logger.warning(
           'custom element "$customTagName" doesn\'t declare any type '
           'extensions. To fix this, either rewrite this tag as '
           '<$customTagName> or add \'extends="$nodeTag"\' to '
           'the custom element declaration.', node.sourceSpan);
       return;
     }
-    
+
     if (hasIsAttribute && baseTag != nodeTag) {
       _logger.warning(
           'custom element "$customTagName" extends from "$baseTag". '
           'Did you mean to write <$baseTag is="$customTagName">?',
           node.sourceSpan);
     }
   }
 
+  /**
+   * Validate an attribute on a custom-element. Returns true if valid.
+   */
+  bool _validateCustomAttributeName(String name, FileSpan span) {
+    if (name.contains('-')) {
+      var newName = toCamelCase(name);
+      _logger.warning('PolymerElement no longer recognizes attribute names with '
+          'dashes such as "$name". Use "$newName" or "${newName.toLowerCase()}" '
+          'instead (both forms are equivalent in HTML).', span);
+      return false;
+    }
+    return true;
+  }
+
   /** Validate event handlers are used correctly. */
   void _validateEventHandler(Element node, String name, String value) {
     if (!name.startsWith('on-')) {
       _logger.warning('Event handler "$name" will be interpreted as an inline'
           ' JavaScript event handler. Use the form '
           'on-event-name="handlerName" if you want a Dart handler '
           'that will automatically update the UI based on model changes.',
-          node.sourceSpan);
+          node.attributeSpans[name]);
       return;
     }
 
     if (!_inPolymerElement) {
       _logger.warning('Inline event handlers are only supported inside '
-          'declarations of <polymer-element>.', node.sourceSpan);
+          'declarations of <polymer-element>.', node.attributeSpans[name]);
+    }
+
+    var eventName = name.substring('on-'.length);
+    if (eventName.contains('-')) {
+      var newEvent = toCamelCase(eventName);
+      _logger.warning('Invalid event name "$name". After the "on-" the event '
+          'name should not use dashes. For example use "on-$newEvent" or '
+          '"on-${newEvent.toLowerCase()}" (both forms are equivalent in HTML).',
+          node.attributeSpans[name]);
     }
 
     if (value.contains('.') || value.contains('(')) {
       _logger.warning('Invalid event handler body "$value". Declare a method '
           'in your custom element "void handlerName(event, detail, target)" '
           'and use the form $name="handlerName".',
-          node.sourceSpan);
+          node.attributeSpans[name]);
     }
   }
 }
 
 
 // These names have meaning in SVG or MathML, so they aren't allowed as custom
 // tags.
 var _invalidTagNames = const {
   'annotation-xml': '',
   'color-profile': '',
@@ skipping 10 matching lines @@
  * <https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html#dfn-custom-element-name>
  */
 bool _isCustomTag(String name) {
   if (name == null || !name.contains('-')) return false;
   return !_invalidTagNames.containsKey(name);
 }
 
 final String _RED_COLOR = '\u001b[31m';
 final String _MAGENTA_COLOR = '\u001b[35m';
 final String _NO_COLOR = '\u001b[0m';