@discourse/lint-configs 2.46.0 → 3.0.0

package/README.md

@@ -33,9 +33,3 @@ export default {
   extends: ["@discourse/lint-configs/stylelint"],
 };
 ```
-
-### .template-lintrc.cjs
-
-```js
-module.exports = require("@discourse/lint-configs/template-lint");
-```

package/eslint-rules/no-at-class.mjs

@@ -0,0 +1,46 @@
+const AFFECTED_COMPONENTS = new Set([
+  "DButton",
+  "DModal",
+  "TableHeaderToggle",
+  "Textarea",
+  "TextArea",
+]);
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow `@class` on Discourse components that own their root element.",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      noAtClass: "Use `class` instead of `@class` for {{tag}}.",
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (!AFFECTED_COMPONENTS.has(node.tag) || !node.attributes) {
+          return;
+        }
+        for (const attribute of node.attributes) {
+          if (attribute.name !== "@class") {
+            continue;
+          }
+          context.report({
+            node: attribute,
+            messageId: "noAtClass",
+            data: { tag: node.tag },
+            fix(fixer) {
+              const [start] = attribute.range;
+              return fixer.replaceTextRange([start, start + 1], "");
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/eslint-rules/no-template-lint-directives.mjs

@@ -0,0 +1,103 @@
+const DIRECTIVE_COMMENT =
+  /^(?<open>\{\{!(?:--)?)\s*template-lint-(?<action>disable|enable)(?<rules>\s+[^]*?)?\s*(?:--)?\}\}$/;
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Convert `{{! template-lint-disable }}` comments to `{{! eslint-disable }}` equivalents.",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      convert: "Use `eslint-{{action}}` instead of `template-lint-{{action}}`.",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+    // Glimmer parks comments that appear inside an element's opening tag
+    // (between attributes) on `element.comments`, not in the children. We
+    // collect them so the Program:exit pass can lift a converted directive
+    // to before its enclosing element — ESLint scopes line-based directives
+    // from where they appear, and the violation typically lives on the
+    // element's start line, not on the in-attribute line.
+    const elementByCommentStart = new Map();
+
+    return {
+      GlimmerElementNode(node) {
+        for (const c of node.comments || []) {
+          if (c.range) {
+            elementByCommentStart.set(c.range[0], node);
+          }
+        }
+      },
+
+      "Program:exit"() {
+        for (const comment of sourceCode.getAllComments()) {
+          const raw = sourceCode.text.slice(...comment.range);
+          const converted = convertComment(raw);
+          if (!converted) {
+            continue;
+          }
+          const enclosingElement = elementByCommentStart.get(comment.range[0]);
+          context.report({
+            node: comment,
+            messageId: "convert",
+            data: { action: converted.action },
+            fix: (fixer) =>
+              enclosingElement
+                ? liftBeforeElement(
+                    fixer,
+                    comment,
+                    converted.newComment,
+                    enclosingElement,
+                    sourceCode
+                  )
+                : fixer.replaceTextRange(comment.range, converted.newComment),
+          });
+        }
+      },
+    };
+  },
+};
+
+function convertComment(rawComment) {
+  const match = rawComment.match(DIRECTIVE_COMMENT);
+  if (!match) {
+    return null;
+  }
+  const { open, action, rules: rulesPart } = match.groups;
+  // ESLint directives use comma-separated rule names; template-lint uses
+  // whitespace. Prefix each with `ember/template-` to land in the namespace
+  // where the ports live.
+  const rules = (rulesPart || "")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((r) => `ember/template-${r}`)
+    .join(", ");
+  const body = rules ? `eslint-${action} ${rules}` : `eslint-${action}`;
+  // Emit symmetric markers regardless of what the source did.
+  const close = open.length === 5 ? "--}}" : "}}";
+  return {
+    action,
+    newComment: `${open} ${body} ${close}`,
+  };
+}
+
+// Strip the in-attribute comment line entirely (leading indent through
+// trailing newline) and re-emit the converted directive on its own line at
+// the element's indent, just above the element.
+function liftBeforeElement(fixer, comment, newComment, element, sourceCode) {
+  const text = sourceCode.text;
+  const lineStart = comment.range[0] - comment.loc.start.column;
+  const lineEnd =
+    text[comment.range[1]] === "\n" ? comment.range[1] + 1 : comment.range[1];
+  const indent = " ".repeat(element.loc.start.column);
+  return [
+    fixer.removeRange([lineStart, lineEnd]),
+    fixer.insertTextBeforeRange(element.range, `${newComment}\n${indent}`),
+  ];
+}

package/eslint-rules/plugin-outlet-lazy-hash.mjs

@@ -0,0 +1,43 @@
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Require `{{lazyHash}}` instead of `{{hash}}` for `@outletArgs` on `<PluginOutlet>`.",
+    },
+    schema: [],
+    messages: {
+      useLazyHash:
+        "Use {{lazyHash}} instead of {{hash}} for @outletArgs in <PluginOutlet>.",
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (node.tag !== "PluginOutlet" || !node.attributes) {
+          return;
+        }
+        const outletArgsAttr = node.attributes.find(
+          (attr) => attr.name === "@outletArgs"
+        );
+        if (!outletArgsAttr || !outletArgsAttr.value) {
+          return;
+        }
+        const value = outletArgsAttr.value;
+        if (
+          value.type === "GlimmerMustacheStatement" &&
+          value.path?.type === "GlimmerPathExpression" &&
+          value.path.head?.type === "VarHead" &&
+          value.path.head.name === "hash" &&
+          !value.path.tail?.length
+        ) {
+          context.report({
+            node: value,
+            messageId: "useLazyHash",
+          });
+        }
+      },
+    };
+  },
+};

package/eslint-rules/template-tag-no-self-this.mjs

@@ -1,3 +1,21 @@
+const THIS_BINDING_TYPES = new Set([
+  "ClassDeclaration",
+  "ClassExpression",
+  "FunctionDeclaration",
+  "FunctionExpression",
+]);
+
+function findThisBindingAncestor(target) {
+  let current = target.parent;
+  while (current) {
+    if (THIS_BINDING_TYPES.has(current.type)) {
+      return current;
+    }
+    current = current.parent;
+  }
+  return null;
+}
+
 export default {
   meta: {
     type: "suggestion",
@@ -24,16 +42,15 @@ export default {
           (ref) => ref.identifier.parent !== node
         );
 
+        const declarationThisBinding = findThisBindingAncestor(node);
+
         const referencedOnlyInAdjacentTemplateTag = references.every((ref) => {
           if (ref.identifier.type !== "VarHead") {
             return false;
           }
-
-          const hasSameVariableScope =
-            context.sourceCode.getScope(ref.identifier).variableScope ===
-            context.sourceCode.getScope(node).variableScope;
-
-          return hasSameVariableScope;
+          return (
+            findThisBindingAncestor(ref.identifier) === declarationThisBinding
+          );
         });
 
         if (referencedOnlyInAdjacentTemplateTag) {

package/eslint.mjs

@@ -1,9 +1,9 @@
 import BabelParser from "@babel/eslint-parser";
 import js from "@eslint/js";
-import EmberESLintParser from "ember-eslint-parser";
 import DecoratorPosition from "eslint-plugin-decorator-position";
 import EmberPlugin from "eslint-plugin-ember";
 import EmberRecommended from "eslint-plugin-ember/configs/recommended";
+import EmberTemplateLintMigration from "eslint-plugin-ember/configs/template-lint-migration";
 import ImportPlugin from "eslint-plugin-import";
 import QUnitPlugin from "eslint-plugin-qunit";
 import QUnitRecommended from "eslint-plugin-qunit/configs/recommended";
@@ -23,15 +23,18 @@ import lineBeforeDefaultExport from "./eslint-rules/line-before-default-export.m
 import linesBetweenClassMembers from "./eslint-rules/lines-between-class-members.mjs";
 import migrateTrackedBuiltInsToEmberCollections from "./eslint-rules/migrate-tracked-built-ins-to-ember-collections.mjs";
 import movedPackagesImportPaths from "./eslint-rules/moved-packages-import-paths.mjs";
+import noAtClass from "./eslint-rules/no-at-class.mjs";
 import noComputedMacros from "./eslint-rules/no-computed-macros.mjs";
 import noCurlyComponents from "./eslint-rules/no-curly-components.mjs";
 import noDiscourseComputed from "./eslint-rules/no-discourse-computed.mjs";
 import noOnclick from "./eslint-rules/no-onclick.mjs";
 import noRouteTemplate from "./eslint-rules/no-route-template.mjs";
 import noSimpleQuerySelector from "./eslint-rules/no-simple-query-selector.mjs";
+import noTemplateLintDirectives from "./eslint-rules/no-template-lint-directives.mjs";
 import noUnnecessaryTracked from "./eslint-rules/no-unnecessary-tracked.mjs";
 import noUnusedServices from "./eslint-rules/no-unused-services.mjs";
 import pluginApiNoVersion from "./eslint-rules/plugin-api-no-version.mjs";
+import pluginOutletLazyHash from "./eslint-rules/plugin-outlet-lazy-hash.mjs";
 import serviceInjectImport from "./eslint-rules/service-inject-import.mjs";
 import templateTagNoSelfThis from "./eslint-rules/template-tag-no-self-this.mjs";
 import testFilenameSuffix from "./eslint-rules/test-filename-suffix.mjs";
@@ -50,14 +53,25 @@ export default [
   js.configs.recommended,
   QUnitRecommended,
   ...EmberRecommended,
+  ...EmberTemplateLintMigration,
   {
     ignores: ["assets/vendor/**/*", "public/**/*"],
   },
+  {
+    // Scope the Babel parser to non-template JS so it doesn't clobber the
+    // ember-eslint-parser that the upstream `base` config sets up for
+    // .gjs/.gts files. The parserOptions live in the main block below so
+    // they also flow through to ember-eslint-parser, which delegates the JS
+    // portion of gjs/gts to @babel/eslint-parser internally.
+    files: ["**/*.{js,mjs,cjs}"],
+    languageOptions: {
+      parser: BabelParser,
+    },
+  },
   {
     languageOptions: {
       ecmaVersion: 2022,
       sourceType: "module",
-      parser: BabelParser,
       parserOptions: {
         useBabel: true,
         requireConfigFile: false,
@@ -66,7 +80,6 @@ export default [
           plugins: [[decoratorsPluginPath, { legacy: true }]],
         },
       },
-
       globals: {
         ...globals.browser,
         ...globals.node,
@@ -155,6 +168,9 @@ export default [
           "migrate-tracked-built-ins-to-ember-collections":
             migrateTrackedBuiltInsToEmberCollections,
           "ui-kit-imports": uiKitImports,
+          "no-at-class": noAtClass,
+          "plugin-outlet-lazy-hash": pluginOutletLazyHash,
+          "no-template-lint-directives": noTemplateLintDirectives,
         },
       },
     },
@@ -223,6 +239,39 @@ export default [
       "ember/no-unnecessary-service-injection-argument": "error",
       "ember/no-replace-test-comments": "error",
       "ember/route-path-style": "error",
+
+      // Intentionally disabled template rules
+      "ember/template-no-autofocus-attribute": "off",
+      "ember/template-no-positive-tabindex": "off",
+      "ember/template-require-mandatory-role-attributes": "off",
+      "ember/template-require-media-caption": "off",
+      "ember/template-builtin-component-arguments": "off",
+      "ember/template-no-builtin-form-components": "off",
+      "ember/template-no-unknown-arguments-for-builtin-components": "off",
+
+      // Pending default template rules
+      "ember/template-link-href-attributes": "off",
+      "ember/template-no-at-ember-render-modifiers": "off",
+      "ember/template-no-curly-component-invocation": "off",
+      "ember/template-no-duplicate-landmark-elements": "off",
+      "ember/template-no-inline-styles": "off",
+      "ember/template-no-link-to-tagname": "off",
+      "ember/template-no-passed-in-event-handlers": "off",
+      "ember/template-no-route-action": "off",
+      "ember/template-require-input-label": "off",
+      "ember/template-require-presentational-children": "off",
+      "ember/template-require-valid-alt-text": "off",
+
+      // Non-default rules
+      "ember/template-no-chained-this": "error",
+      "ember/template-require-strict-mode": "error",
+
+      // From `ember-template-lint`'s old `stylistic` preset
+      "ember/template-linebreak-style": "error",
+      "ember/template-no-multiple-empty-lines": "error",
+      "ember/template-no-trailing-spaces": "error",
+      "ember/template-no-unnecessary-concat": "error",
+
       "qunit/no-loose-assertions": "error",
       "qunit/no-identical-names": "off", // the rule doesn't consider that tests might be in different `acceptance` modules
       "sort-class-members/sort-class-members": [
@@ -323,12 +372,9 @@ export default [
       "discourse/no-unnecessary-tracked": ["warn"],
       "discourse/migrate-tracked-built-ins-to-ember-collections": ["error"],
       "discourse/ui-kit-imports": ["error"],
-    },
-  },
-  {
-    files: ["**/*.gjs", "**/*.gts"],
-    languageOptions: {
-      parser: EmberESLintParser,
+      "discourse/no-at-class": ["error"],
+      "discourse/plugin-outlet-lazy-hash": ["error"],
+      "discourse/no-template-lint-directives": ["error"],
     },
   },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourse/lint-configs",
-  "version": "2.46.0",
+  "version": "3.0.0",
   "description": "Shareable lint configs for Discourse core, plugins, and themes",
   "author": "Discourse",
   "license": "MIT",
@@ -22,22 +22,16 @@
     "./prettier": {
       "require": "./.prettierrc.cjs"
     },
-    "./stylelint": "./stylelint.mjs",
-    "./template-lint": {
-      "require": "./template-lint.config.cjs"
-    },
-    "./template-lint-rules": "./template-lint-rules/index.mjs"
+    "./stylelint": "./stylelint.mjs"
   },
   "dependencies": {
     "@babel/core": "^7.29.0",
     "@babel/eslint-parser": "^7.28.6",
     "@babel/plugin-proposal-decorators": "^7.29.0",
     "@eslint/js": "^9.39.2",
-    "ember-eslint-parser": "^0.5.13",
-    "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",
     "eslint-plugin-decorator-position": "^6.0.0",
-    "eslint-plugin-ember": "^12.7.5",
+    "eslint-plugin-ember": "^13.2.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-qunit": "^8.2.6",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -52,7 +46,6 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "ember-template-lint": "7.9.3",
     "eslint": "9.39.2",
     "prettier": "3.8.1",
     "stylelint": "17.5.0"

package/template-lint-rules/index.mjs

@@ -1,15 +0,0 @@
-import NoAtClass from "./no-at-class.mjs";
-import NoImplicitThis from "./no-implicit-this.mjs";
-import PluginOutletLazyHash from "./plugin-outlet-lazy-hash.mjs";
-
-export default {
-  // Name of plugin
-  name: "discourse",
-
-  // Define rules for this plugin. Each path should map to a plugin rule
-  rules: {
-    "discourse/no-at-class": NoAtClass,
-    "discourse/no-implicit-this": NoImplicitThis,
-    "discourse/plugin-outlet-lazy-hash": PluginOutletLazyHash,
-  },
-};

package/template-lint-rules/no-at-class.mjs

@@ -1,33 +0,0 @@
-import { Rule } from "ember-template-lint";
-
-const AFFECTED_COMPONENTS = [
-  "DButton",
-  "DModal",
-  "TableHeaderToggle",
-  "Textarea",
-  "TextArea",
-];
-
-export default class NoAtClass extends Rule {
-  visitor() {
-    return {
-      ElementNode(node) {
-        if (AFFECTED_COMPONENTS.includes(node.tag) && node.attributes) {
-          node.attributes.forEach((attribute) => {
-            if (attribute.name === "@class") {
-              if (this.mode === "fix") {
-                attribute.name = "class";
-              } else {
-                this.log({
-                  message: `Use 'class' instead of '@class' for ${node.tag}.`,
-                  node,
-                  isFixable: true,
-                });
-              }
-            }
-          });
-        }
-      },
-    };
-  }
-}

package/template-lint-rules/no-implicit-this.mjs

@@ -1,174 +0,0 @@
-// Adapted from https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-implicit-this.md
-// With the addition of autofix
-
-import { Rule } from "ember-template-lint";
-
-function createErrorMessage(ruleName, lines, config) {
-  return [
-    `The ${ruleName} rule accepts one of the following values.`,
-    lines,
-    `You specified \`${JSON.stringify(config)}\``,
-  ].join("\n");
-}
-
-function message(original) {
-  return (
-    `Ambiguous path '${original}' is not allowed. ` +
-    `Use '@${original}' if it is a named argument ` +
-    `or 'this.${original}' if it is a property on 'this'. ` +
-    "If it is a helper or component that has no arguments, " +
-    "you must either convert it to an angle bracket invocation " +
-    "or manually add it to the 'no-implicit-this' rule configuration, e.g. " +
-    `'no-implicit-this': { allow: ['${original}'] }.`
-  );
-}
-
-function isString(value) {
-  return typeof value === "string";
-}
-
-function isRegExp(value) {
-  return value instanceof RegExp;
-}
-
-function allowedFormat(value) {
-  return isString(value) || isRegExp(value);
-}
-
-// Allow Ember's builtin argless syntaxes
-export const ARGLESS_BUILTIN_HELPERS = [
-  "array",
-  "concat",
-  "debugger",
-  "has-block",
-  "hasBlock",
-  "has-block-params",
-  "hasBlockParams",
-  "hash",
-  "input",
-  "log",
-  "outlet",
-  "query-params",
-  "textarea",
-  "yield",
-  "unique-id",
-];
-
-// arg'less Components / Helpers in default ember-cli blueprint
-const ARGLESS_DEFAULT_BLUEPRINT = [
-  "welcome-page",
-  /* from app/index.html and tests/index.html */
-  "rootURL",
-];
-
-export default class NoImplicitThis extends Rule {
-  parseConfig(config) {
-    if (config === false || config === undefined || this.isStrictMode) {
-      return false;
-    }
-
-    switch (typeof config) {
-      case "undefined": {
-        return false;
-      }
-
-      case "boolean": {
-        if (config) {
-          return {
-            allow: [...ARGLESS_BUILTIN_HELPERS, ...ARGLESS_DEFAULT_BLUEPRINT],
-          };
-        } else {
-          return false;
-        }
-      }
-
-      case "object": {
-        if (Array.isArray(config.allow) && config.allow.every(allowedFormat)) {
-          return {
-            allow: [
-              ...ARGLESS_BUILTIN_HELPERS,
-              ...ARGLESS_DEFAULT_BLUEPRINT,
-              ...config.allow,
-            ],
-          };
-        }
-        break;
-      }
-    }
-
-    let errorMessage = createErrorMessage(
-      this.ruleName,
-      [
-        "  * boolean - `true` to enable / `false` to disable",
-        "  * object -- An object with the following keys:",
-        "    * `allow` -- An array of component / helper names for that may be called without arguments",
-      ],
-      config
-    );
-
-    throw new Error(errorMessage);
-  }
-
-  // The way this visitor works is a bit sketchy. We need to lint the PathExpressions
-  // in the callee position differently those in an argument position.
-  //
-  // Unfortunately, the current visitor API doesn't give us a good way to differentiate
-  // these two cases. Instead, we rely on the fact that the _first_ PathExpression that
-  // we enter after entering a MustacheStatement/BlockStatement/... will be the callee
-  // and we track this using a flag called `nextPathIsCallee`.
-  visitor() {
-    let nextPathIsCallee = false;
-
-    return {
-      PathExpression(path) {
-        if (nextPathIsCallee) {
-          // All paths are valid callees so there's nothing to check.
-        } else {
-          let valid =
-            path.data ||
-            path.this ||
-            this.isLocal(path) ||
-            this.config.allow.some((item) => {
-              return isRegExp(item)
-                ? item.test(path.original)
-                : item === path.original;
-            });
-
-          if (!valid) {
-            if (this.mode === "fix") {
-              path.original = `this.${path.original}`;
-            } else {
-              this.log({
-                message: message(path.original),
-                node: path,
-                isFixable: true,
-              });
-            }
-          }
-        }
-
-        nextPathIsCallee = false;
-      },
-
-      SubExpression() {
-        nextPathIsCallee = true;
-      },
-
-      ElementModifierStatement() {
-        nextPathIsCallee = true;
-      },
-
-      MustacheStatement(node) {
-        let isCall = node.params.length > 0 || node.hash.pairs.length > 0;
-
-        nextPathIsCallee = isCall;
-      },
-
-      BlockStatement: {
-        enter() {
-          nextPathIsCallee = true;
-        },
-      },
-    };
-  }
-}

package/template-lint-rules/plugin-outlet-lazy-hash.mjs

@@ -1,27 +0,0 @@
-import { Rule } from "ember-template-lint";
-
-export default class PluginOutletLazyHash extends Rule {
-  visitor() {
-    return {
-      ElementNode(node) {
-        if (node.tag === "PluginOutlet") {
-          const outletArgsAttr = node.attributes.find(
-            (attr) => attr.name === "@outletArgs"
-          );
-
-          if (
-            outletArgsAttr &&
-            outletArgsAttr.value.type === "MustacheStatement" &&
-            outletArgsAttr.value.path.original === "hash"
-          ) {
-            this.log({
-              message:
-                "Use {{lazyHash}} instead of {{hash}} for @outletArgs in <PluginOutlet>.",
-              node: outletArgsAttr.value,
-            });
-          }
-        }
-      },
-    };
-  }
-}

package/template-lint.config.cjs

@@ -1,65 +0,0 @@
-module.exports = {
-  extends: ["recommended", "stylistic"],
-  plugins: ["@discourse/lint-configs/template-lint-rules"],
-  ignore: ["**/*.js"],
-  rules: {
-    // Intentionally disabled default rules
-    "no-autofocus-attribute": false,
-    "no-positive-tabindex": false,
-    "require-mandatory-role-attributes": false,
-    "require-media-caption": false,
-
-    // Pending default rules
-    "link-href-attributes": false,
-    "no-at-ember-render-modifiers": false,
-    "no-curly-component-invocation": false,
-    "no-duplicate-landmark-elements": false,
-    "no-implicit-this": false,
-    "no-inline-styles": false,
-    "no-link-to-tagname": false,
-    "no-passed-in-event-handlers": false,
-    "no-route-action": false,
-    "require-input-label": false,
-    "require-presentational-children": false,
-    "require-valid-alt-text": false,
-
-    // Non-default rules
-    "no-unnecessary-curly-parens": true,
-    "no-unnecessary-curly-strings": true,
-    "simple-modifiers": true,
-    "no-chained-this": true,
-    "require-strict-mode": true,
-
-    // Pending non-default rules
-    "attribute-order": false,
-    "inline-link-to": false,
-    "no-builtin-form-components": false,
-    "no-this-in-template-only-components": false, // emits false-positives in gjs
-
-    // GJS compatibility
-    "modifier-name-case": false,
-
-    // Prettier compatibility
-    "block-indentation": false,
-    "eol-last": false,
-    quotes: false,
-    "self-closing-void-elements": false,
-
-    // Discourse custom
-    "discourse/no-at-class": true,
-    "discourse/no-implicit-this": {
-      allow: [
-        /-/, // kebab-case, probably a component or helper
-      ],
-    },
-    "discourse/plugin-outlet-lazy-hash": true,
-  },
-  overrides: [
-    {
-      files: ["**/*.gjs", "**/*.gts"],
-      rules: {
-        "discourse/no-implicit-this": false,
-      },
-    },
-  ],
-};