Spit out verbose warnings/errors generated by polymer

[nevir]

No description provided.

[robdodson]

• Missing outer template when trying to use a conditional or repeating template
• Trying to override a native property like title
• Placing content inside the <shadow> element (people assume this will render, it won't)
• Using <template> inside of <select>, <table>, or other parser specific elements (http://www.polymer-project.org/resources/faq.html#option-tr)
• Attempting to use automatic node finding with generated DOM
• Placing paper-input inside of form
• Missing aria-label on your elements
• Setting width or height on an element that is inline by default
• Misspelled attribute name not running changed watcher
• Doing things before polymer-ready has fired

[robdodson]

@sorvell @addyosmani @ebidel @arthurevans are there other common mistakes you see developers making that we could warn about? I'm just writing down everything that pops into my head, we can turn these into individual issues to make it easier to manage

[sachinhosmani]

I was thinking of a warning about objects getting unexpectedly shared across multiple instances of an element.

Also, I wonder how many of all these are doable.

[mckoss]

Instance of element setting an attribute that is NOT defined as a published attribute of the element (probably a typo).

[mckoss]

Optional trace log of attributes and instance properties observed change events.

[robdodson]

@mckoss also suggested we could create our own static analysis tool like jshint. That may be a better solution for these warnings instead of doing it all in the polymer extension at runtime

[mckoss]

<polymer-element> with child nodes NOT one of <template> or <script>. We had a bug where we put a <style> node as a direct child of (rather than as a child of a element). This was identical to a top-level style definition - which is definitely NOT the intention:

<polymer-element ...>
  <style>   <!-- THIS IS IN THE WRONG PLACE -->
 ...
  </style>
  <template>
  ...
  </template> 
</polymer-element>

[addyosmani]

Some more thoughts after yesterday's eng meeting:

We've explored logging hints about code smells / linting errors to developers in the past as part of the DevTools, in particular around CSS. Warnings like this are useful but need to be done in a way that they can be switched off or easily filtered otherwise we'll end up annoying users who might otherwise find the rest of our features useful. So, if we do this - let's make it opt-in by default but something you can switch off. The setting can be easily persisted in localStorage along with other DevTools settings.

[addyosmani]

We could also warn about:

• Using on-tap instead of on-click (I'm still not sure what the additional computational overhead of the former is, but am told it's better so..use it)
• Binding to native attributes that are problematic should be avoided http://www.polymer-project.org/docs/polymer/databinding-compat.html#binding-to-attributes
• Using <template> in elements like <table> and <select> won't work in all browsers (edit: Rob already listed this).

We can also provide a link to the compatibility notes for workarounds. Where possible, we should consider whether we opt for short useful messages with a link to docs vs. longer messages without links imo.

[robdodson]

Are there any examples of running an AST from the devtools to lint code?