eslint-plugin-ember-template-lint 0.2.0 → 0.6.0

package/lib/ember-teplate-lint/info.js

@@ -12,6 +12,7 @@ const allMessages = {};
 const reporter = {
   setup(context) {
     this.getSourceCode = context.getSourceCode;
+    this.getPhysicalFilename = context.getPhysicalFilename;
   },
   report(message) {
     message.meta = {
@@ -42,14 +43,8 @@ class Rule {
       enter(node) {
         if (!activeRules.get(node)) {
           activeRules.set(node, 0);
-          const sourceCode = context.getSourceCode();
-          const { scopeManager } = sourceCode;
-          const scopes = scopeManager.scopes.filter(x => x.block.range[0] < node.range[0] && x.block.range[1] > node.range[1]);
-          const scopeVars = scopes.map(s => s.variables.map(x => x.name)).flat();
-          const filename = context.getPhysicalFilename();
-          const start = node.range[0] || 0;
           reporter.setup(context);
-          runTemplateLint(node.contents, filename, reporter, scopeVars, start);
+          runTemplateLint(node, reporter);
         }
         activeRules.set(node, activeRules.get(node) + 1);
       },
@@ -108,4 +103,4 @@ module.exports = {
   configs: configs,
   rules: createRules(rules),
   configuredRules: configuredRules
-};
+};

package/lib/parser/gts-parser.js

@@ -1,34 +1,12 @@
-const { preprocess, traverse, Source } = require('@glimmer/syntax');
 const gts =  require('ember-template-imports');
 const typescriptParser =  require('@typescript-eslint/parser');
 const typescriptEstree = require('@typescript-eslint/typescript-estree');
 
-function visitorKeysForAst(source, ast) {
-  const tokens = [];
-  const types = new Set();
-  traverse(ast, {
-    All(node) {
-      types.add(`__TEMPLATE__${node.type}`);
-      tokens.push(node);
-    }
-  });
-  ast.tokens = tokens;
-  const visitorKeys = {};
-  types.forEach((t) => {
-    // visitorKeys[t] = ['body', 'name', 'path', 'params', 'attributes', 'hash', 'modifiers', 'comments', 'value', 'program', 'inverse', 'children']
-    visitorKeys[t] = [];
-  });
-  tokens.forEach((node) => {
-    node.type = `__TEMPLATE__${node.type}`;
-  });
-  return visitorKeys;
-}
 
 function replaceRange(s, start, end, substitute) {
   return s.substring(0, start) + substitute + s.substring(end);
 }
 
-
 module.exports = {
   parseForESLint(code, options) {
     let jsCode = code;
@@ -43,14 +21,15 @@ module.exports = {
       });
       const emptyText = '[`' + lines.join('\n').slice(4) + '`]';
       jsCode = replaceRange(jsCode, ...range, emptyText);
-      const source = new Source(tpl.contents);
-      const ast = preprocess(source, { mode: 'codemod' });
-      ast.range = [tpl.start.index + tpl.start[0].length + 1, tpl.end.index];
-      ast.contents = tpl.contents;
+      const ast = {
+        type: '__TEMPLATE__Template',
+      };
+      ast.range = range;
+      ast.contents = template;
       tpl.ast = ast;
     });
     const result = typescriptParser.parseForESLint(jsCode, options);
-    const visitorKeys = {...result.visitorKeys};
+    const visitorKeys = {...result.visitorKeys, '__TEMPLATE__Template': []};
     result.ast.tokens.forEach((token) => {
       if (token.type === 'Template') {
         const range = [token.range[0] - 1, token.range[1] + 1];
@@ -58,8 +37,6 @@ module.exports = {
         if (!template) return;
         const ast = template.ast;
         ast.loc = token.loc;
-        const source = new Source(code);
-        Object.assign(visitorKeys, visitorKeysForAst(source, ast));
         Object.assign(token, ast);
       }
     });

package/lib/parser/hbs-parser.js

@@ -1,4 +1,3 @@
-const { preprocess, traverse, Source } = require('@glimmer/syntax');
 
 class Scope {
   type = 'global';
@@ -26,25 +25,22 @@ class ScopeManager {
 
 module.exports = {
   parseForESLint(code) {
-    const source = new Source(code);
-    const ast = preprocess(source, { mode: 'codemod' });
-    const tokens = [];
     const comments = [];
-    const types = new Set();
-    types.add('Program');
-    traverse(ast, {
-      All(node) {
-        types.add(`__TEMPLATE__${node.type}`);
-        const span = source.spanFor(node.loc);
-        node.range = [span.getStart().offset, span.getEnd().offset];
-        if (node.type.toLowerCase().includes('comment')) {
-          comments.push(node);
-          return;
-        }
-        tokens.push(node);
+    const types = new Set(['Program']);
+    const ast = {};
+    ast.tokens = [ast];
+    ast.range = [0, code.length];
+    const lines = code.split('\n');
+    ast.loc = {
+      start: {
+        line: 1,
+        column: 1
+      },
+      end: {
+        line: lines.length,
+        column: lines[lines.length - 1].length
       }
-    });
-    ast.tokens = tokens;
+    };
     ast.comments = comments;
     const visitorKeys = {};
     types.forEach((t) => {
@@ -53,9 +49,6 @@ module.exports = {
     ast.type = 'Program';
     ast.isHbs = true;
     ast.contents = code;
-    tokens.slice(1).forEach((node) => {
-      node.type = `__TEMPLATE__${node.type}`;
-    });
     const scope = new ScopeManager();
     scope.globalScope.block = ast;
     return { ast, scopeManager: scope, visitorKeys };

package/lib/rules/config.js

@@ -14,7 +14,7 @@ const runTemplateLint = (text, filename, context, scopeVars=[], offset=0, option
     const diffs = response.diff;
     const document = new DocumentLines(text);
     diffs.forEach((d) => {
-      d.range = [d.offset, d.offset + d.deleteText.length];
+      d.range = [d.offset, d.offset + (d.deleteText?.length || 0)];
     });
     lintMessages.forEach((m) => {
       m.range = [

package/lib/rules/hbs-worker.js

@@ -1,21 +1,77 @@
 const { runAsWorker } = require('synckit');
 const { generateDifferences } = require('prettier-linter-helpers');
 
-runAsWorker(async (filename, text, options) => {
+async function _applyFixes(options, results, columnOffset) {
+  const { transform } = await import('ember-template-recast');
+  let currentSource = options.source;
+  let fixableIssues = results.filter((r) => r.isFixable);
+
+  // nothing to do, bail out
+  if (fixableIssues.length === 0) {
+    return currentSource;
+  }
+
+  let fileConfig = this._moduleStatusCache.getConfigForFile(options);
+
+  let ruleNames = new Set(fixableIssues.map((r) => r.rule));
+  const spaces = ' '.repeat(columnOffset);
+
+  for (let ruleName of ruleNames) {
+    let templateInfos = [{
+      template: currentSource,
+      columnOffset: 0,
+      isStrictMode: false
+    }];
+
+    for (let templateInfo of templateInfos) {
+
+      let rule = this._buildRule(ruleName, {
+        shouldFix: true,
+        filePath: options.filePath,
+        columnOffset: templateInfo.columnOffset,
+        rawSource: templateInfo.template,
+        isStrictMode: templateInfo.isStrictMode,
+        fileConfig,
+      });
+
+      let visitor = await rule.getVisitor();
+      let { code } = transform(templateInfo.template, () => visitor);
+
+      if (code !== templateInfo.template) {
+        let template = templateInfo.template;
+        if (columnOffset) {
+          template = spaces + template.split('\n').join('\n' + spaces);
+        }
+        if (columnOffset) {
+          code = spaces + code.split('\n').join('\n' + spaces);
+        }
+        const diffs = generateDifferences(template, code);
+        fixableIssues.filter(r => r.rule === ruleName).forEach((r, i) => {
+          r.fix = diffs[i];
+        });
+      }
+    }
+  }
+
+  return currentSource;
+}
+
+runAsWorker(async (filename, text, options, columnOffset=0) => {
   const Lint = await import('ember-template-lint');
   const lint = new Lint.default(options);
   process.env.emberTemplateLintFileName = filename;
   process.env.emberTemplateLintFixMode = false;
+
   const messages = await lint.verify({
-    source: text
+    source: text,
+    filePath: filename.replace('.gts', '.hbs')
   });
   process.env.emberTemplateLintFixMode = true;
-  const fixedText = (await lint.verifyAndFix({
-    source: text
-  })).output;
-  const diff = generateDifferences(text, fixedText);
+  await _applyFixes.call(lint,{
+    source: text,
+    filePath: filename.replace('.gts', '.hbs'),
+  }, messages, columnOffset);
   return {
     messages,
-    diff
   };
 });

package/lib/rules/lint.js

@@ -3,53 +3,58 @@ const synckit = require('synckit');
 const DocumentLines = require('../utils/document');
 const { templateLintConfig } = require('../ember-teplate-lint/config');
 
-function runTemplateLint(text, filename, context, scopeVars=[], offset=0) {
+function runTemplateLint(node, context) {
+  const sourceCode = context.getSourceCode();
+  const { scopeManager, text: sourceCodeText } = sourceCode;
+  const scopes = scopeManager.scopes.filter(x => x.block.range[0] < node.range[0] && x.block.range[1] > node.range[1]);
+  const scopeVars = scopes.map(s => s.variables.map(x => x.name)).flat();
+  const filename = context.getPhysicalFilename();
+  let text = node.contents;
+  const initialLine = sourceCodeText.split('\n')[node.loc.start.line-1];
+  const columnOffset = initialLine.match(/\s+/)?.[0].length || 0;
+  const offset = (node.range[0] || 0);
+  const spaces = ' '.repeat(columnOffset);
+  const originalDocument = new DocumentLines(spaces + text);
+  if (columnOffset) {
+    text = text.split('\n').map(l => l.replace(new RegExp(`^\\s{1,${columnOffset}}`), '')).join('\n');
+    text = text.trim();
+  }
+
   try {
     const syncFn = synckit.createSyncFn(require.resolve('./hbs-worker'));
-    const response = syncFn(filename, text, { config: templateLintConfig });
+    const response = syncFn(filename, text, { config: templateLintConfig }, columnOffset);
     const lintMessages = response.messages;
-    const diffs = response.diff;
-    const document = new DocumentLines(text);
-    diffs.forEach((d) => {
-      d.range = [d.offset, d.offset + d.deleteText.length];
-    });
     lintMessages.forEach((m) => {
+      if (m.fix) {
+        const d = m.fix;
+        m.fix.range = [d.offset, d.offset + (d.deleteText?.length || 0)];
+        m.range = m.fix.range;
+        const start = originalDocument.offsetToPosition(m.fix.range[0]);
+        const end = originalDocument.offsetToPosition(m.fix.range[1]);
+        m.fix.range = [
+          originalDocument.positionToOffset({
+            line: start.line,
+            character: start.character
+          }),
+          originalDocument.positionToOffset({
+            line: end.line,
+            character: end.character
+          })
+        ];
+        m.fix.range = m.fix.range.map(x => offset + x);
+      }
       m.range = [
-        document.positionToOffset({
+        originalDocument.positionToOffset({
           line: m.line - 1,
-          character: m.column - 1
+          character: m.column
         }),
-        document.positionToOffset({
+        originalDocument.positionToOffset({
           line: m.endLine - 1,
-          character: m.endColumn - 1
+          character: m.endColumn
         })];
-      const isInside = (d) => d.range[0] >= m.range[0] && d.range[1] <= m.range[1];
-      const doesContain = (d) => d.range[0] <= m.range[0] && d.range[1] >= m.range[1];
-      const idx = diffs.findIndex(d => isInside(d) || doesContain(d));
-      if (idx !== -1) {
-        const d = diffs.splice(idx, 1);
-        m.fix = d[0];
-        m.fix.range = m.fix.range.map(x => offset + x);
-      }
       m.range = m.range.map(x => offset + x);
     });
 
-    if (diffs.length) {
-      diffs.forEach((d) => {
-        const range = d.range;
-        const [start, end] = range.map(index =>
-          context.getSourceCode().getLocFromIndex(index)
-        );
-        context.report({
-          fix: (fixer) => {
-            return fixer.replaceTextRange(range, d.fix.insertText || '');
-          },
-          loc: { start, end },
-          message: 'template error',
-        });
-      });
-    }
-
     lintMessages.forEach((msg) => {
       if (msg.rule === 'no-implicit-this') {
         if (scopeVars.includes(msg.source)) {
@@ -80,4 +85,4 @@ function runTemplateLint(text, filename, context, scopeVars=[], offset=0) {
 
 module.exports = {
   runTemplateLint
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-ember-template-lint",
-  "version": "0.2.0",
+  "version": "0.6.0",
   "description": "Provide linting for ember template",
   "keywords": [
     "eslint",
@@ -17,13 +17,14 @@
   },
   "dependencies": {
     "@glimmer/syntax": "^0.84.3",
-    "typescript": "^5.0.4",
     "@typescript-eslint/parser": "^5.59.7",
     "@typescript-eslint/typescript-estree": "^5.59.7",
     "ember-template-imports": "^3.4.2",
-    "prettier-linter-helpers": "^1.0.0",
     "ember-template-lint": "^5.7.3",
-    "synckit": "^0.8.5"
+    "ember-template-recast": "^6.1.4",
+    "prettier-linter-helpers": "^1.0.0",
+    "synckit": "^0.8.5",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "ember-template-lint": "^5.7.3"