eslint-plugin-ember-template-lint 0.1.0 → 0.2.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/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.2.0",
   "description": "Provide linting for ember template",
   "keywords": [
     "eslint",
@@ -45,6 +45,6 @@
   },
   "license": "ISC",
   "files": [
-    "lib/rules/*.js"
+    "lib/**/*.js"
   ]
 }