eslint-plugin-ember-template-lint 0.1.0 → 0.5.0

package/README.md

@@ -24,14 +24,34 @@ Add `hbs` to the plugins section of your `.eslintrc` configuration file. You can
 
 ### 2. Modify your `.eslintrc.js`
 
+you can use the presets from here https://github.com/ember-template-lint/ember-template-lint#presets
+like this:
+`plugin:ember-template-lint/<preset>`
+
+to just use the `.template-lintrc.js` config file just use
+`plugin:ember-template-lint/config`
+
+to load ember-template-lint plugins in eslinrc you need to manually register them:
+```js
+require('eslint-plugin-ember-template-lint/lib/ember-teplate-lint/config').registerPlugin('ember-template-lint-plugin-prettier');
+```
+
+## IMPORTANT
+Do NOT set parser to anything in your .eslintrc.js as it will override the parser from here
+
+for typescript parser you can extend its base config, then it will work correctly
+
 ```js
 // .eslintrc.js
 // optional:
 require('eslint-plugin-ember-template-lint/lib/ember-teplate-lint/config').registerPlugin('ember-template-lint-plugin-prettier');
 
+
 module.exports = {
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/base',
+    'plugin:ember-template-lint/config',
     'plugin:ember-template-lint/recommended',
     //optional:
     'plugin:ember-template-lint/ember-template-lint-plugin-prettier:recommended'

package/lib/config/base.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+
+  plugins: ['ember-template-lint'],
+
+  rules: {},
+
+  overrides: [
+    {
+      files: ['**/*.hbs'],
+      parser: require.resolve('../parser/hbs-parser'),
+      processor: 'ember-template-lint/noop'
+    },
+    {
+      files: ['**/*.gts', '**/*.gjs'],
+      parser: require.resolve('../parser/gts-parser'),
+      processor: 'ember-template-lint/noop'
+    },
+  ],
+};

package/lib/config/index.js

@@ -0,0 +1,20 @@
+const info = require('../ember-teplate-lint/info');
+const base = require('./base');
+
+const configs = {};
+
+Object.entries(info.configs).forEach(([name, config]) => {
+  Object.entries(config.rules).forEach(([name, conf]) => {
+    if (typeof conf == 'boolean') {
+      config.rules[name] = [conf ? 'error' : 'off'];
+    }
+  });
+  configs[name] = {...base, rules: config.rules};
+});
+configs['config'] = {
+  ...base,
+  rules: info.configuredRules
+};
+
+module.exports = configs;
+

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

@@ -0,0 +1,18 @@
+const templateLintConfig = {
+  rules: {},
+  plugins: [],
+};
+
+function registerRule(name, config) {
+  templateLintConfig.rules[name] = config;
+}
+
+function registerPlugin(name) {
+  templateLintConfig.plugins.push(name);
+}
+
+module.exports = {
+  registerRule,
+  registerPlugin,
+  templateLintConfig
+};

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

@@ -0,0 +1,111 @@
+const synckit = require('synckit');
+const syncFn = synckit.createSyncFn(require.resolve('./worker'));
+const { runTemplateLint } = require('../rules/lint');
+const { registerRule, templateLintConfig } = require('../ember-teplate-lint/config');
+
+const lintWithEslintConfigs = syncFn({ config: templateLintConfig });
+const lintConfigs = syncFn();
+
+const activeRules = new Map();
+const allMessages = {};
+
+const reporter = {
+  setup(context) {
+    this.getSourceCode = context.getSourceCode;
+  },
+  report(message) {
+    message.meta = {
+      fixable: 'code'
+    };
+    allMessages[message.rule] = allMessages[message.rule] || [];
+    allMessages[message.rule].push(message);
+  }
+};
+
+class Rule {
+
+  constructor(name) {
+    this.create = this.create.bind(this);
+    this.name = name;
+    this.meta = {
+      fixable: 'code'
+    };
+  }
+  create(context) {
+    const rule = this;
+    let options = context.options;
+    if (options.length === 0) {
+      options = true;
+    }
+    registerRule(this.name, options);
+    const visitor = {
+      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);
+        }
+        activeRules.set(node, activeRules.get(node) + 1);
+      },
+      exit(node) {
+        const messages = allMessages[rule.name] || [];
+        messages.forEach(m => context.report(m));
+        activeRules.set(node, activeRules.get(node) - 1);
+        allMessages[rule.name] = [];
+      },
+    };
+    return {
+      'Program': (node) => node.isHbs && visitor.enter(node),
+      'Program:exit': (node) => node.isHbs && visitor.exit(node),
+      '__TEMPLATE__Template': visitor.enter,
+      '__TEMPLATE__Template:exit': visitor.exit,
+    };
+  }
+}
+
+function createRules(rules) {
+  const created = rules.map(r => new Rule(r));
+  const map = {};
+  created.forEach(r => {
+    map[r.name] = r;
+  });
+  return map;
+}
+
+const configs = {
+  ...lintWithEslintConfigs.configs,
+  ...lintConfigs.configs
+};
+
+const rules = [...new Set([...lintConfigs.rules, ...lintWithEslintConfigs.rules])];
+
+delete configs.recommended.overrides;
+
+Object.values(configs).forEach((config) => {
+  const rules = {};
+  Object.entries(config.rules).forEach(([rule, conf]) => {
+    rules['ember-template-lint/' + rule] = conf;
+  });
+  config.rules = rules;
+});
+
+
+const configuredRules = {};
+Object.entries(lintConfigs.configuredRules).forEach(([name, conf]) => {
+  configuredRules['ember-template-lint/' + name] = conf.config && [conf.severity];
+  if (typeof conf.config !== 'boolean') {
+    configuredRules['ember-template-lint/' + name].push(conf.config);
+  }
+});
+
+module.exports = {
+  configs: configs,
+  rules: createRules(rules),
+  configuredRules: configuredRules
+};

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

@@ -0,0 +1,12 @@
+const { runAsWorker } = require('synckit');
+
+runAsWorker(async (options) => {
+  const Lint = await import('ember-template-lint');
+  const lint = new Lint.default(options);
+  await lint.loadConfig();
+  return {
+    configs: lint.config.loadedConfigurations,
+    rules: Object.keys(lint.config.loadedRules),
+    configuredRules: lint.config.rules,
+  };
+});

package/lib/parser/gts-parser.js

@@ -0,0 +1,80 @@
+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;
+    const templateInfos = gts.parseTemplates(jsCode, options.filePath);
+    templateInfos.forEach((tpl) => {
+      const range = [tpl.start.index, tpl.end.index + tpl.end[0].length];
+      tpl.range = range;
+      const template = jsCode.slice(...range);
+      const lines = template.split('\n');
+      lines.forEach((line, i) => {
+        lines[i] = ' '.repeat(line.length);
+      });
+      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;
+      tpl.ast = ast;
+    });
+    const result = typescriptParser.parseForESLint(jsCode, options);
+    const visitorKeys = {...result.visitorKeys};
+    result.ast.tokens.forEach((token) => {
+      if (token.type === 'Template') {
+        const range = [token.range[0] - 1, token.range[1] + 1];
+        const template = templateInfos.find(t => t.range[0] >= range[0] && t.range[1] <= range[1]);
+        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);
+      }
+    });
+    typescriptEstree.simpleTraverse(result.ast, {
+      enter(node) {
+        if (node.type === 'TemplateLiteral') {
+          const range = [node.range[0] - 1, node.range[1] + 1];
+          const template = templateInfos.find(t => t.range[0] >= range[0] && t.range[1] <= range[1]);
+          if (!template) return;
+          const ast = template.ast;
+          Object.assign(node, ast);
+        }
+      }
+    });
+
+    return { ...result, visitorKeys };
+  }
+};

package/lib/parser/hbs-parser.js

@@ -0,0 +1,63 @@
+const { preprocess, traverse, Source } = require('@glimmer/syntax');
+
+class Scope {
+  type = 'global';
+  variables = [];
+  through= [];
+  set = new Map();
+  upper = null;
+  childScopes = [];
+  references = [];
+  block = null;
+}
+
+class ScopeManager {
+  globalScope = new Scope();
+  scopes = [this.globalScope];
+
+  acquire() {
+    return;
+  }
+
+  getDeclaredVariables() {
+    return [];
+  }
+}
+
+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);
+      }
+    });
+    ast.tokens = tokens;
+    ast.comments = comments;
+    const visitorKeys = {};
+    types.forEach((t) => {
+      visitorKeys[t] = [];
+    });
+    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/processor.js

@@ -0,0 +1,11 @@
+
+
+module.exports = {
+  preprocess: (text, filename) => {
+    return [{text: text, filename}];
+  },
+  postprocess: (messages) => {
+    return messages.flat();
+  },
+  supportsAutofix: true
+};

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,68 @@
 const { runAsWorker } = require('synckit');
 const { generateDifferences } = require('prettier-linter-helpers');
 
+async function _applyFixes(options, results) {
+  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));
+
+  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) {
+        const diffs = generateDifferences(templateInfo.template, code);
+        fixableIssues.filter(r => r.rule === ruleName).forEach((r, i) => {
+          r.fix = diffs[i];
+        });
+      }
+    }
+  }
+
+  return currentSource;
+}
+
 runAsWorker(async (filename, text, options) => {
   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);
   return {
     messages,
-    diff
   };
 });

package/lib/rules/lint.js

@@ -4,52 +4,57 @@ const DocumentLines = require('../utils/document');
 const { templateLintConfig } = require('../ember-teplate-lint/config');
 
 function runTemplateLint(text, filename, context, scopeVars=[], offset=0) {
+  const originalDocument = new DocumentLines(text);
   try {
+    let columnOffset = 0;
+    let lineOffset = 0;
+    if (text.startsWith('\n')) {
+      text = text.slice(1);
+      lineOffset += 1;
+    }
+    columnOffset = text.match(/\s+/)[0].length;
+    text = text.split('\n').map(l => l.replace(new RegExp(`^\\s{1,${columnOffset}}`), '')).join('\n');
+    text = text.trim();
     const syncFn = synckit.createSyncFn(require.resolve('./hbs-worker'));
     const response = syncFn(filename, text, { config: templateLintConfig });
     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;
+        if (d.insertText) {
+          d.insertText = d.insertText.replace(/\n/g, '\n' + ' '.repeat(columnOffset));
+        }
+        m.fix.range = [d.offset, d.offset + (d.deleteText?.length || 0)];
+        m.range = m.fix.range;
+        const start = document.offsetToPosition(m.fix.range[0]);
+        const end = document.offsetToPosition(m.fix.range[1]);
+        m.fix.range = [
+          originalDocument.positionToOffset({
+            line: start.line + lineOffset,
+            character: start.character + columnOffset - 1
+          }),
+          originalDocument.positionToOffset({
+            line: end.line + lineOffset,
+            character: end.character + columnOffset - 1
+          })
+        ];
+        m.fix.range = m.fix.range.map(x => offset + x);
+        m.range = m.fix.range;
+        return;
+      }
       m.range = [
-        document.positionToOffset({
-          line: m.line - 1,
-          character: m.column - 1
+        originalDocument.positionToOffset({
+          line: m.line - 1 + lineOffset,
+          character: m.column + columnOffset - 1
         }),
-        document.positionToOffset({
-          line: m.endLine - 1,
-          character: m.endColumn - 1
+        originalDocument.positionToOffset({
+          line: m.endLine - 1 + lineOffset,
+          character: m.endColumn + columnOffset - 1
         })];
-      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/lib/utils/document.js

@@ -0,0 +1,100 @@
+/**
+ * @typedef {{ line: number; character: number }} Position
+ */
+
+// Helper class to convert line/column from and to offset
+// taken and adapt from https://github.com/typed-ember/glint/blob/main/packages/core/src/language-server/util/position.ts
+class DocumentLines {
+  /**
+   * @param {string} contents
+   */
+  constructor(contents) {
+    this.lineStarts = computeLineStarts(contents);
+  }
+
+  /**
+   * @param {Position} position
+   * @return {number}
+   */
+  positionToOffset(position) {
+    const { line, character } = position;
+    return this.lineStarts[line] + character;
+  }
+
+  /**
+   *
+   * @param {number} position
+   * @return {Position}
+   */
+  offsetToPosition(position) {
+    const lineStarts = this.lineStarts;
+    let line = 0;
+    while (line + 1 < lineStarts.length && lineStarts[line + 1] <= position) {
+      line++;
+    }
+    const character = position - lineStarts[line];
+    return { line, character };
+  }
+}
+
+/**
+ * @returns {number[]}
+ * @param {string} text
+ */
+function computeLineStarts(text) {
+  const result = [];
+  let pos = 0;
+  let lineStart = 0;
+  while (pos < text.length) {
+    const ch = text.codePointAt(pos);
+    pos++;
+    switch (ch) {
+    case 13 /* carriageReturn */: {
+      if (text.codePointAt(pos) === 10 /* lineFeed */) {
+        pos++;
+      }
+    }
+    // falls through
+    case 10 /* lineFeed */: {
+      result.push(lineStart);
+      lineStart = pos;
+      break;
+    }
+    default: {
+      if (ch > 127 /* maxAsciiCharacter */ && isLineBreak(ch)) {
+        result.push(lineStart);
+        lineStart = pos;
+      }
+      break;
+    }
+    }
+  }
+  result.push(lineStart);
+  return result;
+}
+
+/* istanbul ignore next */
+/**
+ * @param {number} ch
+ * @return {boolean}
+ */
+function isLineBreak(ch) {
+  // ES5 7.3:
+  // The ECMAScript line terminator characters are listed in Table 3.
+  //     Table 3: Line Terminator Characters
+  //     Code Unit Value     Name                    Formal Name
+  //     \u000A              Line Feed               <LF>
+  //     \u000D              Carriage Return         <CR>
+  //     \u2028              Line separator          <LS>
+  //     \u2029              Paragraph separator     <PS>
+  // Only the characters in Table 3 are treated as line terminators. Other new line or line
+  // breaking characters are treated as white space but not as line terminators.
+  return (
+    ch === 10 /* lineFeed */ ||
+    ch === 13 /* carriageReturn */ ||
+    ch === 8232 /* lineSeparator */ ||
+    ch === 8233 /* paragraphSeparator */
+  );
+}
+
+module.exports = DocumentLines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-ember-template-lint",
-  "version": "0.1.0",
+  "version": "0.5.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"
@@ -45,6 +46,6 @@
   },
   "license": "ISC",
   "files": [
-    "lib/rules/*.js"
+    "lib/**/*.js"
   ]
 }