Merge pull request #149 from ember-tooling/copilot/add-hbs-parser-printer

Create hbs parser integration

Author: NullVoxPopuli

README.md

@@ -1,6 +1,6 @@
 # ember-eslint-parser
 
-This is the eslint parser for ember's gjs and gts files (using `<template>`).
+This is the eslint parser for ember's gjs and gts files (using `<template>`), and also for Handlebars (`.hbs`) template files.
 
 It is meant to be used with [eslint-plugin-ember](https://github.com/ember-cli/eslint-plugin-ember), which provides nice defaults for all the different file types in ember projects.
 
@@ -31,6 +31,26 @@ It's recommended to only use _overrides_ when defining your eslint config, so us
 if we detect a typescript parser, it will also be used for all files, otherwise babel parser will be used.
 If we cannot find a typescript parser when linting gts we throw an error. 
 
+## HBS (Handlebars) support
+
+For `.hbs` template files, use the `ember-eslint-parser/hbs` parser. In ESLint's flat config format (ESLint 9+):
+
+```js
+// eslint.config.mjs
+import hbsParser from 'ember-eslint-parser/hbs';
+
+export default [
+  {
+    files: ['**/*.hbs'],
+    languageOptions: {
+      parser: hbsParser,
+    },
+  },
+];
+```
+
+> **Note:** In `.hbs` files, all locals not defined in the template are assumed to be defined at runtime. This avoids false-positive `no-undef` errors for template identifiers. This is a known limitation of the classic HBS format — use `.gjs`/`.gts` for full static analysis.
+
 ## Support
 
 eslint-plugin-ember is the primary consumer of this parser library, so SemVer _may_ not be respected for other consumers.

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "exports": {
     ".": "./src/parser/gjs-gts-parser.js",
+    "./hbs": "./src/parser/hbs-parser.js",
     "./noop": "./src/preprocessor/noop.js"
   },
   "main": "src/parser/gjs-gts-parser.js",

pnpm-lock.yaml

@@ -0,0 +1,89 @@
+const eslintScope = require('eslint-scope');
+const DocumentLines = require('../utils/document');
+const { processGlimmerTemplate, buildGlimmerVisitorKeys } = require('./transforms');
+
+/**
+ * implements https://eslint.org/docs/latest/extend/custom-parsers
+ * for Handlebars (.hbs) template files.
+ *
+ * The entire file is treated as a Glimmer template.
+ * All locals not defined in the template are assumed to be defined
+ * (no no-undef errors for template identifiers).
+ */
+
+/**
+ * @type {import('eslint').ParserModule}
+ */
+module.exports = {
+  meta: {
+    name: 'ember-eslint-parser/hbs',
+    version: '*',
+  },
+
+  parseForESLint(code, options) {
+    const filePath = (options && options.filePath) || '<hbs>';
+    const codeLines = new DocumentLines(code);
+
+    let result;
+    try {
+      result = processGlimmerTemplate({
+        templateContent: code,
+        codeLines,
+        templateRange: [0, code.length],
+      });
+    } catch (e) {
+      // Transform glimmer parse error to ESLint-compatible error
+      const loc = e.location || (e.hash && e.hash.loc);
+      if (loc && loc.start) {
+        const err = Object.assign(new SyntaxError(e.message), {
+          lineNumber: loc.start.line,
+          column: loc.start.column,
+          index: codeLines.positionToOffset(loc.start),
+          fileName: filePath,
+        });
+        throw err;
+      }
+      throw e;
+    }
+
+    const { ast: templateNode, comments } = result;
+
+    // Wrap in a synthetic Program node (required by ESLint)
+    const program = {
+      type: 'Program',
+      body: [templateNode],
+      tokens: templateNode.tokens,
+      comments,
+      range: [0, code.length],
+      start: 0,
+      end: code.length,
+      loc: {
+        start: { line: 1, column: 0 },
+        end: codeLines.offsetToPosition(code.length),
+      },
+    };
+
+    // Build visitor keys: Program + all Glimmer node types
+    const visitorKeys = { Program: ['body'], ...buildGlimmerVisitorKeys() };
+
+    // Create an empty scope manager.
+    // For HBS, all locals are assumed to be defined at runtime,
+    // so we don't track variable references (no no-undef errors).
+    const scopeManager = eslintScope.analyze(
+      {
+        type: 'Program',
+        body: [],
+        range: [0, code.length],
+        loc: program.loc,
+      },
+      { range: true }
+    );
+
+    return {
+      ast: program,
+      scopeManager,
+      visitorKeys,
+      services: {},
+    };
+  },
+};

src/parser/hbs-parser.js

@@ -0,0 +1,33 @@
+/**
+ * Debugging:
+ *   https://eslint.org/docs/latest/use/configure/debug
+ *  ----------------------------------------------------
+ *
+ *   Print a file's calculated configuration
+ *
+ *     npx eslint --print-config path/to/file.hbs
+ *
+ *   Inspecting the config
+ *
+ *     npx eslint --inspect-config
+ *
+ */
+import hbsParser from 'ember-eslint-parser/hbs';
+
+export default [
+  {
+    files: ['**/*.hbs'],
+    languageOptions: {
+      parser: hbsParser,
+    },
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: "GlimmerElementNode[name='Input']",
+          message: "Do not use <Input>; use a native <input> element instead.",
+        },
+      ],
+    },
+  },
+];

test-projects/hbs/eslint.config.mjs

@@ -0,0 +1,11 @@
+{
+  "name": "@test-project/hbs",
+  "private": true,
+  "scripts": {
+    "test:check": "eslint src --max-warnings=0 --report-unused-disable-directives"
+  },
+  "devDependencies": {
+    "ember-eslint-parser": "workspace:^",
+    "eslint": "^9.0.0"
+  }
+}

test-projects/hbs/package.json

@@ -0,0 +1,2 @@
+{{! eslint-disable-next-line no-restricted-syntax }}
+<Input @value={{this.val}} />

test-projects/hbs/src/disabled.hbs

@@ -0,0 +1,7 @@
+<h1>Hello, {{name}}!</h1>
+
+{{#let (service "router") as |router|}}
+  <nav>
+    <a href={{router.currentURL}}>Home</a>
+  </nav>
+{{/let}}