Merge pull request #65 from bendemboski/HtmlCommentsRule

Implement html-comments rule

Author: rwjblue

README.md

@@ -111,6 +111,31 @@ The following values are valid configuration:
   * "tab" -- To indicate tab style indentation (1 char)
 
 
+#### html-comments
+
+Html comments in your templates will get compiled and rendered into the DOM at runtime. Instead you can annotate your templates using Handlebars comments, which will be stripped out when the template is compiled and have no effect at runtime.
+
+This rule forbids the following:
+
+``` hbs
+<!-- comment goes here -->
+```
+
+but allows the following:
+
+```hbs
+{{!-- comment goes here --}}
+```
+
+Html comments containing linting instructions such as:
+
+```hbs
+<!-- template-lint bare-strings=false -->
+```
+
+are of course allowed (and since the linter strips them during processing, they will not get compiled and rendered into the DOM regardless of this rule).
+
+
 #### triple-curlies
 
 Usage of triple curly braces to allow raw HTML to be injected into the DOM is large vector for exploits of your application (especially when the raw HTML is user controllable ). Instead of using `{{{foo}}}`, you should use appropriate helpers or computed properties that return a `SafeString` (via `Ember.String.htmlSafe` generally) and ensure that user supplied data is properly escaped.

blueprints/ember-cli-template-lint/files/.template-lintrc.js

@@ -4,5 +4,6 @@
 module.exports = {
   'bare-strings': ['(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}'],
   'block-indentation': 2,
+  'html-comments': true,
   'triple-curlies': true
 };

ext/plugins/index.js

@@ -3,5 +3,6 @@
 module.exports = {
   'bare-strings': require('./lint-bare-strings'),
   'block-indentation': require('./lint-block-indentation'),
+  'html-comments': require('./lint-html-comments'),
   'triple-curlies': require('./lint-triple-curlies')
 };

ext/plugins/lint-html-comments.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var calculateLocationDisplay = require('../helpers/calculate-location-display');
+var buildPlugin = require('./base');
+
+module.exports = function(addonContext) {
+  var LogHtmlComments = buildPlugin(addonContext, 'html-comments');
+
+  LogHtmlComments.prototype.parseConfig = function(config) {
+    var configType = typeof config;
+
+    var errorMessage = 'The html-comments rule accepts one of the following values.\n ' +
+          '  * boolean - `true` to enable / `false` to disable\n' +
+          '\nYou specified `' + JSON.stringify(config) + '`';
+
+    switch (configType) {
+    case 'boolean':
+      return config;
+    case 'undefined':
+      return false;
+    default:
+      throw new Error(errorMessage);
+    }
+  };
+
+  LogHtmlComments.prototype.detect = function(node) {
+    return node.type === 'CommentStatement';
+  };
+
+  LogHtmlComments.prototype.process = function(node) {
+    var location = calculateLocationDisplay(this.options.moduleName, node.loc && node.loc.start);
+    this.log('Html comment detected `<!--' + node.value + '-->` at ' + location +
+      '. Use Handlebars comment instead `{{!--' + node.value +'--}}`');
+  };
+
+  return LogHtmlComments;
+};

node-tests/unit/plugins/lint-html-comments-test.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var generateRuleTests = require('../../helpers/rule-test-harness');
+
+generateRuleTests({
+  name: 'html-comments',
+
+  config: true,
+
+  good: [
+    '{{!-- comment here --}}',
+    '{{!--comment here--}}',
+    '<!-- template-lint bare-strings=false -->'
+  ],
+
+  bad: [
+    {
+      template: '<!-- comment here -->',
+      message: 'Html comment detected `<!-- comment here -->` at (\'layout.hbs\'). ' +
+        'Use Handlebars comment instead `{{!-- comment here --}}`'
+    },
+    {
+      template: '<!--comment here-->',
+      message: 'Html comment detected `<!--comment here-->` at (\'layout.hbs\'). ' +
+        'Use Handlebars comment instead `{{!--comment here--}}`'
+    }
+  ]
+});