OLD | NEW |
1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 /// Logic to validate that developers are correctly using Polymer constructs. | 5 /// Logic to validate that developers are correctly using Polymer constructs. |
6 /// This is mainly used to produce warnings for feedback in the editor. | 6 /// This is mainly used to produce warnings for feedback in the editor. |
7 library polymer.src.build.linter; | 7 library polymer.src.build.linter; |
8 | 8 |
9 import 'dart:async'; | 9 import 'dart:async'; |
10 | 10 |
(...skipping 19 matching lines...) Expand all Loading... |
30 | 30 |
31 Future apply(Transform transform) { | 31 Future apply(Transform transform) { |
32 var seen = new Set<AssetId>(); | 32 var seen = new Set<AssetId>(); |
33 var primary = transform.primaryInput; | 33 var primary = transform.primaryInput; |
34 var id = primary.id; | 34 var id = primary.id; |
35 transform.addOutput(primary); // this phase is analysis only | 35 transform.addOutput(primary); // this phase is analysis only |
36 seen.add(id); | 36 seen.add(id); |
37 return readPrimaryAsHtml(transform).then((document) { | 37 return readPrimaryAsHtml(transform).then((document) { |
38 return _collectElements(document, id, transform, seen).then((elements) { | 38 return _collectElements(document, id, transform, seen).then((elements) { |
39 bool isEntrypoint = options.isHtmlEntryPoint(id); | 39 bool isEntrypoint = options.isHtmlEntryPoint(id); |
40 new _LinterVisitor(transform.logger, elements, isEntrypoint) | 40 new _LinterVisitor(id, transform.logger, elements, isEntrypoint) |
41 .run(document); | 41 .run(document); |
42 }); | 42 }); |
43 }); | 43 }); |
44 } | 44 } |
45 | 45 |
46 /// Collect into [elements] any data about each polymer-element defined in | 46 /// Collect into [elements] any data about each polymer-element defined in |
47 /// [document] or any of it's imports, unless they have already been [seen]. | 47 /// [document] or any of it's imports, unless they have already been [seen]. |
48 /// Elements are added in the order they appear, transitive imports are added | 48 /// Elements are added in the order they appear, transitive imports are added |
49 /// first. | 49 /// first. |
50 Future<Map<String, _ElementSummary>> _collectElements( | 50 Future<Map<String, _ElementSummary>> _collectElements( |
51 Document document, AssetId sourceId, Transform transform, | 51 Document document, AssetId sourceId, Transform transform, |
52 Set<AssetId> seen, [Map<String, _ElementSummary> elements]) { | 52 Set<AssetId> seen, [Map<String, _ElementSummary> elements]) { |
53 if (elements == null) elements = <String, _ElementSummary>{}; | 53 if (elements == null) elements = <String, _ElementSummary>{}; |
54 return _getImportedIds(document, sourceId, transform) | 54 return _getImportedIds(document, sourceId, transform) |
55 // Note: the import order is relevant, so we visit in that order. | 55 // Note: the import order is relevant, so we visit in that order. |
56 .then((ids) => Future.forEach(ids, | 56 .then((ids) => Future.forEach(ids, |
57 (id) => _readAndCollectElements(id, transform, seen, elements))) | 57 (id) => _readAndCollectElements(id, transform, seen, elements))) |
58 .then((_) => _addElements(document, transform.logger, elements)) | 58 .then((_) { |
| 59 if (sourceId.package == 'polymer' && |
| 60 sourceId.path == 'lib/src/js/polymer/polymer.html' && |
| 61 elements['polymer-element'] == null) { |
| 62 elements['polymer-element'] = |
| 63 new _ElementSummary('polymer-element', null, null); |
| 64 } |
| 65 return _addElements(document, transform.logger, elements); |
| 66 }) |
59 .then((_) => elements); | 67 .then((_) => elements); |
60 } | 68 } |
61 | 69 |
62 Future _readAndCollectElements(AssetId id, Transform transform, | 70 Future _readAndCollectElements(AssetId id, Transform transform, |
63 Set<AssetId> seen, Map<String, _ElementSummary> elements) { | 71 Set<AssetId> seen, Map<String, _ElementSummary> elements) { |
64 if (id == null || seen.contains(id)) return new Future.value(null); | 72 if (id == null || seen.contains(id)) return new Future.value(null); |
65 seen.add(id); | 73 seen.add(id); |
66 return readAsHtml(id, transform).then( | 74 return readAsHtml(id, transform, showWarnings: false).then( |
67 (doc) => _collectElements(doc, id, transform, seen, elements)); | 75 (doc) => _collectElements(doc, id, transform, seen, elements)); |
68 } | 76 } |
69 | 77 |
70 Future<List<AssetId>> _getImportedIds( | 78 Future<List<AssetId>> _getImportedIds( |
71 Document document, AssetId sourceId, Transform transform) { | 79 Document document, AssetId sourceId, Transform transform) { |
72 var importIds = []; | 80 var importIds = []; |
73 var logger = transform.logger; | 81 var logger = transform.logger; |
74 for (var tag in document.querySelectorAll('link')) { | 82 for (var tag in document.querySelectorAll('link')) { |
75 if (tag.attributes['rel'] != 'import') continue; | 83 if (tag.attributes['rel'] != 'import') continue; |
76 var href = tag.attributes['href']; | 84 var href = tag.attributes['href']; |
77 var span = tag.sourceSpan; | 85 var span = tag.sourceSpan; |
78 var id = uriToAssetId(sourceId, href, logger, span); | 86 var id = uriToAssetId(sourceId, href, logger, span); |
79 if (id == null) continue; | 87 if (id == null) continue; |
80 importIds.add(assetExists(id, transform).then((exists) { | 88 importIds.add(assetExists(id, transform).then((exists) { |
81 if (exists) return id; | 89 if (exists) return id; |
82 if (sourceId == transform.primaryInput.id) { | 90 if (sourceId == transform.primaryInput.id) { |
83 logger.error('couldn\'t find imported asset "${id.path}" in package ' | 91 logger.warning('couldn\'t find imported asset "${id.path}" in package' |
84 '"${id.package}".', span: span); | 92 ' "${id.package}".', span: span); |
85 } | 93 } |
86 })); | 94 })); |
87 } | 95 } |
88 return Future.wait(importIds); | 96 return Future.wait(importIds); |
89 } | 97 } |
90 | 98 |
91 void _addElements(Document document, TransformLogger logger, | 99 void _addElements(Document document, TransformLogger logger, |
92 Map<String, _ElementSummary> elements) { | 100 Map<String, _ElementSummary> elements) { |
93 for (var tag in document.querySelectorAll('polymer-element')) { | 101 for (var tag in document.querySelectorAll('polymer-element')) { |
94 var name = tag.attributes['name']; | 102 var name = tag.attributes['name']; |
95 if (name == null) continue; | 103 if (name == null) continue; |
96 var extendsTag = tag.attributes['extends']; | 104 var extendsTag = tag.attributes['extends']; |
97 var span = tag.sourceSpan; | 105 var span = tag.sourceSpan; |
98 var existing = elements[name]; | 106 var existing = elements[name]; |
99 if (existing != null) { | 107 if (existing != null) { |
100 | 108 |
101 // Report warning only once. | 109 // Report warning only once. |
102 if (existing.hasConflict) continue; | 110 if (existing.hasConflict) continue; |
103 existing.hasConflict = true; | 111 existing.hasConflict = true; |
104 logger.warning('duplicate definition for custom tag "$name".', | 112 logger.warning('duplicate definition for custom tag "$name".', |
105 span: existing.span); | 113 span: existing.span); |
106 logger.warning('duplicate definition for custom tag "$name" ' | 114 logger.warning('duplicate definition for custom tag "$name" ' |
107 ' (second definition).', span: span); | 115 ' (second definition).', span: span); |
108 continue; | 116 continue; |
109 } | 117 } |
110 | 118 |
111 elements[name] = new _ElementSummary(name, extendsTag, tag.sourceSpan); | 119 elements[name] = new _ElementSummary(name, extendsTag, tag.sourceSpan); |
112 } | 120 } |
113 } | 121 } |
114 } | 122 } |
115 | 123 |
116 | 124 |
117 /// Information needed about other polymer-element tags in order to validate | 125 /// Information needed about other polymer-element tags in order to validate |
118 /// how they are used and extended. | 126 /// how they are used and extended. |
119 /// | 127 /// |
120 /// Note: these are only created for polymer-element, because pure custom | 128 /// Note: these are only created for polymer-element, because pure custom |
121 /// elements don't have a declarative form. | 129 /// elements don't have a declarative form. |
122 class _ElementSummary { | 130 class _ElementSummary { |
123 final String tagName; | 131 final String tagName; |
124 final String extendsTag; | 132 final String extendsTag; |
125 final Span span; | 133 final Span span; |
126 | 134 |
127 _ElementSummary extendsType; | 135 _ElementSummary extendsType; |
128 bool hasConflict = false; | 136 bool hasConflict = false; |
129 | 137 |
130 String get baseExtendsTag => extendsType == null | 138 String get baseExtendsTag { |
131 ? extendsTag : extendsType.baseExtendsTag; | 139 if (extendsType != null) return extendsType.baseExtendsTag; |
| 140 if (extendsTag != null && !extendsTag.contains('-')) return extendsTag; |
| 141 return null; |
| 142 } |
132 | 143 |
133 _ElementSummary(this.tagName, this.extendsTag, this.span); | 144 _ElementSummary(this.tagName, this.extendsTag, this.span); |
134 | 145 |
135 String toString() => "($tagName <: $extendsTag)"; | 146 String toString() => "($tagName <: $extendsTag)"; |
136 } | 147 } |
137 | 148 |
138 class _LinterVisitor extends TreeVisitor { | 149 class _LinterVisitor extends TreeVisitor { |
139 TransformLogger _logger; | 150 TransformLogger _logger; |
| 151 AssetId _sourceId; |
140 bool _inPolymerElement = false; | 152 bool _inPolymerElement = false; |
141 bool _dartTagSeen = false; | 153 bool _dartTagSeen = false; |
142 bool _polymerHtmlSeen = false; | 154 bool _polymerHtmlSeen = false; |
143 bool _polymerExperimentalHtmlSeen = false; | 155 bool _polymerExperimentalHtmlSeen = false; |
144 bool _isEntrypoint; | 156 bool _isEntrypoint; |
145 Map<String, _ElementSummary> _elements; | 157 Map<String, _ElementSummary> _elements; |
146 | 158 |
147 _LinterVisitor(this._logger, this._elements, this._isEntrypoint) { | 159 _LinterVisitor( |
| 160 this._sourceId, this._logger, this._elements, this._isEntrypoint) { |
148 // We normalize the map, so each element has a direct reference to any | 161 // We normalize the map, so each element has a direct reference to any |
149 // element it extends from. | 162 // element it extends from. |
150 for (var tag in _elements.values) { | 163 for (var tag in _elements.values) { |
151 var extendsTag = tag.extendsTag; | 164 var extendsTag = tag.extendsTag; |
152 if (extendsTag == null) continue; | 165 if (extendsTag == null) continue; |
153 tag.extendsType = _elements[extendsTag]; | 166 tag.extendsType = _elements[extendsTag]; |
154 } | 167 } |
155 } | 168 } |
156 | 169 |
157 void visitElement(Element node) { | 170 void visitElement(Element node) { |
158 switch (node.localName) { | 171 switch (node.localName) { |
159 case 'link': _validateLinkElement(node); break; | 172 case 'link': _validateLinkElement(node); break; |
160 case 'element': _validateElementElement(node); break; | 173 case 'element': _validateElementElement(node); break; |
161 case 'polymer-element': _validatePolymerElement(node); break; | 174 case 'polymer-element': _validatePolymerElement(node); break; |
162 case 'script': _validateScriptElement(node); break; | 175 case 'script': _validateScriptElement(node); break; |
163 default: | 176 default: |
164 _validateNormalElement(node); | 177 _validateNormalElement(node); |
165 super.visitElement(node); | 178 super.visitElement(node); |
166 break; | 179 break; |
167 } | 180 } |
168 } | 181 } |
169 | 182 |
170 void run(Document doc) { | 183 void run(Document doc) { |
171 visit(doc); | 184 visit(doc); |
172 | 185 |
173 if (_isEntrypoint && !_polymerHtmlSeen && !_polymerExperimentalHtmlSeen) { | |
174 _logger.warning(USE_POLYMER_HTML, span: doc.body.sourceSpan); | |
175 } | |
176 | |
177 if (_isEntrypoint && !_dartTagSeen && !_polymerExperimentalHtmlSeen) { | 186 if (_isEntrypoint && !_dartTagSeen && !_polymerExperimentalHtmlSeen) { |
178 _logger.warning(USE_INIT_DART, span: doc.body.sourceSpan); | 187 _logger.warning(USE_INIT_DART, span: doc.body.sourceSpan); |
179 } | 188 } |
180 } | 189 } |
181 | 190 |
182 /// Produce warnings for invalid link-rel tags. | 191 /// Produce warnings for invalid link-rel tags. |
183 void _validateLinkElement(Element node) { | 192 void _validateLinkElement(Element node) { |
184 var rel = node.attributes['rel']; | 193 var rel = node.attributes['rel']; |
185 if (rel != 'import' && rel != 'stylesheet') return; | 194 if (rel != 'import' && rel != 'stylesheet') return; |
186 | 195 |
187 if (rel == 'import' && _dartTagSeen) { | 196 if (rel == 'import' && _dartTagSeen) { |
188 _logger.warning("Move HTML imports above your Dart script tag.", | 197 _logger.warning("Move HTML imports above your Dart script tag.", |
189 span: node.sourceSpan); | 198 span: node.sourceSpan); |
190 } | 199 } |
191 | 200 |
192 var href = node.attributes['href']; | 201 var href = node.attributes['href']; |
193 if (href == null || href == '') { | 202 if (href == null || href == '') { |
194 _logger.warning('link rel="$rel" missing href.', span: node.sourceSpan); | 203 _logger.warning('link rel="$rel" missing href.', span: node.sourceSpan); |
195 return; | 204 return; |
196 } | 205 } |
197 | 206 |
198 if (href == 'packages/polymer/polymer.html') { | 207 if (rel != 'import') return; |
199 _polymerHtmlSeen = true; | 208 |
200 } else if (href == POLYMER_EXPERIMENTAL_HTML) { | 209 if (_inPolymerElement) { |
| 210 _logger.error(NO_IMPORT_WITHIN_ELEMENT, span: node.sourceSpan); |
| 211 return; |
| 212 } |
| 213 |
| 214 if (href == POLYMER_EXPERIMENTAL_HTML) { |
201 _polymerExperimentalHtmlSeen = true; | 215 _polymerExperimentalHtmlSeen = true; |
202 } | 216 } |
203 // TODO(sigmund): warn also if href can't be resolved. | 217 // TODO(sigmund): warn also if href can't be resolved. |
204 } | 218 } |
205 | 219 |
206 /// Produce warnings if using `<element>` instead of `<polymer-element>`. | 220 /// Produce warnings if using `<element>` instead of `<polymer-element>`. |
207 void _validateElementElement(Element node) { | 221 void _validateElementElement(Element node) { |
208 _logger.warning('<element> elements are not supported, use' | 222 _logger.warning('<element> elements are not supported, use' |
209 ' <polymer-element> instead', span: node.sourceSpan); | 223 ' <polymer-element> instead', span: node.sourceSpan); |
210 } | 224 } |
211 | 225 |
212 /// Produce warnings if using `<polymer-element>` in the wrong place or if the | 226 /// Produce warnings if using `<polymer-element>` in the wrong place or if the |
213 /// definition is not complete. | 227 /// definition is not complete. |
214 void _validatePolymerElement(Element node) { | 228 void _validatePolymerElement(Element node) { |
| 229 if (!_elements.containsKey('polymer-element')) { |
| 230 _logger.warning(usePolymerHtmlMessageFrom(_sourceId), |
| 231 span: node.sourceSpan); |
| 232 } |
| 233 |
215 if (_inPolymerElement) { | 234 if (_inPolymerElement) { |
216 _logger.error('Nested polymer element definitions are not allowed.', | 235 _logger.error('Nested polymer element definitions are not allowed.', |
217 span: node.sourceSpan); | 236 span: node.sourceSpan); |
218 return; | 237 return; |
219 } | 238 } |
220 | 239 |
221 var tagName = node.attributes['name']; | 240 var tagName = node.attributes['name']; |
222 var extendsTag = node.attributes['extends']; | 241 var extendsTag = node.attributes['extends']; |
223 | 242 |
224 if (tagName == null) { | 243 if (tagName == null) { |
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
359 _logger.warning('PolymerElement no longer recognizes attribute names with
' | 378 _logger.warning('PolymerElement no longer recognizes attribute names with
' |
360 'dashes such as "$name". Use "$newName" or "${newName.toLowerCase()}"
' | 379 'dashes such as "$name". Use "$newName" or "${newName.toLowerCase()}"
' |
361 'instead (both forms are equivalent in HTML).', span: span); | 380 'instead (both forms are equivalent in HTML).', span: span); |
362 return false; | 381 return false; |
363 } | 382 } |
364 return true; | 383 return true; |
365 } | 384 } |
366 | 385 |
367 /// Validate event handlers are used correctly. | 386 /// Validate event handlers are used correctly. |
368 void _validateEventHandler(Element node, String name, String value) { | 387 void _validateEventHandler(Element node, String name, String value) { |
369 if (!name.startsWith('on-')) { | 388 if (!name.startsWith('on-')) return; |
370 // TODO(sigmund): technically these are valid attribtues in HTML, so we | |
371 // might want to remove this warning, or only produce it if the value | |
372 // looks like a binding. | |
373 _logger.warning('Event handler "$name" will be interpreted as an inline' | |
374 ' JavaScript event handler. Use the form ' | |
375 'on-event-name="{{handlerName}}" if you want a Dart handler ' | |
376 'that will automatically update the UI based on model changes.', | |
377 span: node.attributeSpans[name]); | |
378 return; | |
379 } | |
380 | 389 |
381 if (!_inPolymerElement) { | 390 if (!_inPolymerElement) { |
382 _logger.warning('Inline event handlers are only supported inside ' | 391 _logger.warning('Inline event handlers are only supported inside ' |
383 'declarations of <polymer-element>.', | 392 'declarations of <polymer-element>.', |
384 span: node.attributeSpans[name]); | 393 span: node.attributeSpans[name]); |
385 return; | 394 return; |
386 } | 395 } |
387 | 396 |
388 | 397 |
389 // Valid bindings have {{ }}, don't look like method calls foo(bar), and are | 398 // Valid bindings have {{ }}, don't look like method calls foo(bar), and are |
390 // non empty. | 399 // non empty. |
391 if (!value.startsWith("{{") || !value.endsWith("}}") || value.contains('(') | 400 if (!value.startsWith("{{") || !value.endsWith("}}") || value.contains('(') |
392 || value.substring(2, value.length - 2).trim() == '') { | 401 || value.substring(2, value.length - 2).trim() == '') { |
393 _logger.warning('Invalid event handler body "$value". Declare a method ' | 402 _logger.warning('Invalid event handler body "$value". Declare a method ' |
394 'in your custom element "void handlerName(event, detail, target)" ' | 403 'in your custom element "void handlerName(event, detail, target)" ' |
395 'and use the form $name="{{handlerName}}".', | 404 'and use the form $name="{{handlerName}}".', |
396 span: node.attributeSpans[name]); | 405 span: node.attributeSpans[name]); |
397 } | 406 } |
398 } | 407 } |
399 } | 408 } |
400 | 409 |
401 const String ONLY_ONE_TAG = | 410 const String ONLY_ONE_TAG = |
402 'Only one "application/dart" script tag per document is allowed.'; | 411 'Only one "application/dart" script tag per document is allowed.'; |
403 | 412 |
404 const String USE_POLYMER_HTML = | 413 String usePolymerHtmlMessageFrom(AssetId id) { |
405 'Besides the initPolymer invocation, to run a polymer application you need ' | 414 var segments = id.path.split('/'); |
406 'to include the following HTML import: ' | 415 var upDirCount = 0; |
407 '<link rel="import" href="packages/polymer/polymer.html">. This will ' | 416 if (segments[0] == 'lib') { |
408 'include the common polymer logic needed to boostrap your application.'; | 417 // lib/foo.html => ../../packages/ |
| 418 upDirCount = segments.length; |
| 419 } else if (segments.length > 2) { |
| 420 // web/a/foo.html => ../packages/ |
| 421 upDirCount = segments.length - 2; |
| 422 } |
| 423 return usePolymerHtmlMessage(upDirCount); |
| 424 } |
| 425 |
| 426 String usePolymerHtmlMessage(int upDirCount) { |
| 427 var reachOutPrefix = '../' * upDirCount; |
| 428 return 'Missing definition for <polymer-element>, please add the following ' |
| 429 'HTML import at the top of this file: <link rel="import" ' |
| 430 'href="${reachOutPrefix}packages/polymer/polymer.html">.'; |
| 431 } |
| 432 |
| 433 const String NO_IMPORT_WITHIN_ELEMENT = 'Polymer.dart\'s implementation of ' |
| 434 'HTML imports are not supported within polymer element definitions, yet. ' |
| 435 'Please move the import out of this <polymer-element>.'; |
409 | 436 |
410 const String USE_INIT_DART = | 437 const String USE_INIT_DART = |
411 'To run a polymer application, you need to call "initPolymer". You can ' | 438 'To run a polymer application, you need to call "initPolymer". You can ' |
412 'either include a generic script tag that does this for you:' | 439 'either include a generic script tag that does this for you:' |
413 '\'<script type="application/dart">export "package:polymer/init.dart";' | 440 '\'<script type="application/dart">export "package:polymer/init.dart";' |
414 '</script>\' or add your own script tag and call that function. ' | 441 '</script>\' or add your own script tag and call that function. ' |
415 'Make sure the script tag is placed after all HTML imports.'; | 442 'Make sure the script tag is placed after all HTML imports.'; |
416 | 443 |
417 const String NO_DART_SCRIPT_AND_EXPERIMENTAL = | 444 const String NO_DART_SCRIPT_AND_EXPERIMENTAL = |
418 'The experimental bootstrap feature doesn\'t support script tags on ' | 445 'The experimental bootstrap feature doesn\'t support script tags on ' |
419 'the main document (for now).'; | 446 'the main document (for now).'; |
OLD | NEW |