Merge pull request #2581 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-unbalanced-curlies

Extract rule: template-no-unbalanced-curlies

Author: NullVoxPopuli

README.md

@@ -406,6 +406,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | :------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :- | :- | :- |
 | [template-no-extra-mut-helper-argument](docs/rules/template-no-extra-mut-helper-argument.md) | disallow passing more than one argument to the mut helper |    |    |    |
 | [template-no-jsx-attributes](docs/rules/template-no-jsx-attributes.md)                       | disallow JSX-style camelCase attributes                   |    | 🔧 |    |
+| [template-no-unbalanced-curlies](docs/rules/template-no-unbalanced-curlies.md)               | disallow unbalanced mustache curlies                      |    |    |    |
 
 ### Routes
 

docs/rules/template-no-unbalanced-curlies.md

@@ -0,0 +1,59 @@
+# ember/template-no-unbalanced-curlies
+
+<!-- end auto-generated rule header -->
+
+Normally, the compiler will find stray curlies and throw a syntax error. However, it won't be able to catch every case.
+
+For example, these are all syntax errors:
+
+```gjs
+<template>
+  {{ x }
+  {{ x }}}
+  {{{ x }
+  {{{ x }}
+</template>
+```
+
+Whereas these are not:
+
+```gjs
+<template>
+  { x }}
+  { x }
+  }
+  }}
+  }}}
+  }}}}... (any number of closing curlies past one)
+</template>
+```
+
+This rule focuses on closing double `}}` and triple `}}}` curlies with no matching opening curlies.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  foo}}
+  {foo}}
+  foo}}}
+  {foo}}}
+</template>
+```
+
+## Migration
+
+If you have curlies in your code that you wish to show verbatim, but are flagged by this rule, you can formulate them as a handlebars expression:
+
+```gjs
+<template>
+  <p>This is a closing double curly: {{ '}}' }}</p>
+  <p>This is a closing triple curly: {{ '}}}' }}</p>
+</template>
+```
+
+## References
+
+- [Handlebars docs/expressions](https://handlebarsjs.com/guide/expressions.html)

lib/rules/template-no-unbalanced-curlies.js

@@ -0,0 +1,81 @@
+const hbsParser = require('ember-eslint-parser/hbs');
+
+const SUSPECT_CHARS = '}}';
+const reLines = /(.*?(?:\r\n?|\n|$))/gm;
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow unbalanced mustache curlies',
+      category: 'Possible Errors',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-unbalanced-curlies.md',
+      templateMode: 'both',
+    },
+    schema: [],
+    messages: {
+      noUnbalancedCurlies: 'Unbalanced curlies detected',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-unbalanced-curlies.js',
+      docs: 'docs/rule/no-unbalanced-curlies.md',
+      tests: 'test/unit/rules/no-unbalanced-curlies-test.js',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    return {
+      GlimmerTextNode(node) {
+        const chars = node.chars;
+
+        if (!chars.includes(SUSPECT_CHARS)) {
+          return;
+        }
+
+        let isMustache = false;
+
+        try {
+          const ast = hbsParser.parseForESLint(chars).ast;
+          const body = ast.body?.[0]?.body ?? ast.body ?? [];
+          isMustache = body.length > 0 && body[0].type === 'GlimmerMustacheStatement';
+        } catch {
+          // Not a valid standalone mustache; continue checking for stray closing curlies.
+        }
+
+        if (isMustache) {
+          return;
+        }
+
+        let lineNum = node.loc.start.line;
+        let colNum = node.loc.start.column;
+        const source = sourceCode.getText(node);
+        const lines = chars.match(reLines) || [];
+
+        for (const line of lines) {
+          const suspectIndex = line.indexOf(SUSPECT_CHARS);
+
+          if (suspectIndex !== -1) {
+            const length = line.slice(suspectIndex).startsWith('}}}') ? 3 : 2;
+
+            context.report({
+              node,
+              messageId: 'noUnbalancedCurlies',
+              loc: {
+                start: { line: lineNum, column: colNum + suspectIndex },
+                end: { line: lineNum, column: colNum + suspectIndex + length },
+              },
+              source,
+            });
+          }
+
+          lineNum++;
+          colNum = 1;
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-unbalanced-curlies.js

@@ -0,0 +1,101 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-unbalanced-curlies');
+const RuleTester = require('eslint').RuleTester;
+
+const validHbs = [
+  '{foo}',
+  '{{foo}}',
+  '{{{foo}}}',
+  `{{{foo
+}}}`,
+  '\\{{foo}}',
+  '\\{{foo}}\\{{foo}}',
+  '\\{{foo}}{{foo}}',
+  `\\{{foo
+}}`,
+];
+
+const invalidHbs = [
+  {
+    code: 'foo}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: '{foo}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: 'foo}}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: '{foo}}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: `{foo
+}}}`,
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: `{foo
+}}}
+bar`,
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: '{foo\r\nbar\r\n\r\nbaz}}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+  {
+    code: '{foo\rbar\r\rbaz}}}',
+    output: null,
+    errors: [{ message: 'Unbalanced curlies detected' }],
+  },
+];
+
+function wrapTemplate(entry) {
+  if (typeof entry === 'string') {
+    return `<template>${entry}</template>`;
+  }
+
+  return {
+    ...entry,
+    code: `<template>${entry.code}</template>`,
+    output: entry.output ? `<template>${entry.output}</template>` : entry.output,
+    errors: entry.errors.map(() => ({ messageId: 'noUnbalancedCurlies' })),
+  };
+}
+
+const gjsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+gjsRuleTester.run('template-no-unbalanced-curlies', rule, {
+  valid: validHbs.map(wrapTemplate),
+  invalid: invalidHbs.map(wrapTemplate),
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-unbalanced-curlies', rule, {
+  valid: validHbs,
+  invalid: invalidHbs,
+});