@discourse/lint-configs 2.0.1 → 2.2.0

package/eslint-rules/deprecated-lookups.mjs

@@ -0,0 +1,58 @@
+const replacements = {
+  "store:main": "service:store",
+  "search-service:main": "service:search",
+  "key-value-store:main": "service:key-value-store",
+  "pm-topic-tracking-state:main": "service:pm-topic-tracking-state",
+  "message-bus:main": "service:message-bus",
+  "site-settings:main": "service:site-settings",
+  "capabilities:main": "service:capabilities",
+  "current-user:main": "service:current-user",
+  "site:main": "service:site",
+  "topic-tracking-state:main": "service:topic-tracking-state",
+  "controller:composer": "service:composer",
+};
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "replace deprecated resolver 'lookup' calls and modifyClass arguments with modern equivalents",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const calleeName =
+          node.callee.type === "MemberExpression"
+            ? node.callee.property.name
+            : null;
+        const isLookupCall = calleeName === "lookup";
+        const isModifyClassCall =
+          calleeName === "modifyClass" || calleeName === "modifyClassStatic";
+
+        if ((isLookupCall || isModifyClassCall) && node.arguments.length > 0) {
+          const firstArg = node.arguments[0];
+          if (firstArg.type === "Literal") {
+            const argValue = firstArg.value;
+            const replacement = replacements[argValue];
+
+            if (replacement) {
+              context.report({
+                node: firstArg,
+                message: `Use '${replacement}' instead of '${argValue}'`,
+                fix(fixer) {
+                  return fixer.replaceText(firstArg, `"${replacement}"`);
+                },
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};

package/eslint-rules/i18n-import-location.mjs

@@ -0,0 +1,64 @@
+import { fixImport } from "./utils/fix-import.mjs";
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "disallow imports from 'i18n' and replace with 'discourse-i18n'",
+      category: "Best Practices",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value.toLowerCase() === "i18n") {
+          context.report({
+            node,
+            message:
+              "Import from 'i18n' is not allowed. Use 'discourse-i18n' instead.",
+            fix(fixer) {
+              return fixer.replaceText(node.source, "'discourse-i18n'");
+            },
+          });
+        }
+
+        if (
+          node.source.value.toLowerCase() === "discourse-common/helpers/i18n"
+        ) {
+          context.report({
+            node,
+            message:
+              "Import from 'discourse-common/helpers/i18n' is not allowed. Use 'discourse-i18n' instead.",
+            fix(fixer) {
+              const existingImport = context
+                .getSourceCode()
+                .ast.body.find(
+                  (n) =>
+                    n.type === "ImportDeclaration" &&
+                    n.source.value === "discourse-i18n"
+                );
+
+              if (existingImport) {
+                return [
+                  fixer.remove(node),
+                  fixImport(fixer, existingImport, {
+                    namedImportsToAdd: ["i18n"],
+                  }),
+                ];
+              } else {
+                return fixer.replaceText(
+                  node,
+                  `import { i18n } from 'discourse-i18n';`
+                );
+              }
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/eslint-rules/i18n-t.mjs

@@ -0,0 +1,91 @@
+import { fixImport } from "./utils/fix-import.mjs";
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Use i18n(...) instead of 'I18n.t(...)'.",
+      category: "Best Practices",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    let alreadyFixedImport = false;
+
+    return {
+      MemberExpression(node) {
+        const isI18nT =
+          node.object.name === "I18n" && node.property.name === "t";
+        if (!isI18nT) {
+          return;
+        }
+
+        let scope = sourceCode.getScope(node);
+        let variable;
+        while (scope && !variable) {
+          variable = scope.variables.find((v) => v.name === "I18n");
+          scope = scope.upper;
+        }
+
+        if (!variable) {
+          return;
+        }
+
+        const i18nDefaultImport = variable.defs.find(
+          (d) =>
+            d.type === "ImportBinding" &&
+            d.node.type === "ImportDefaultSpecifier" &&
+            d.node.parent.source.value === "discourse-i18n"
+        );
+
+        if (!i18nDefaultImport) {
+          // I18n imported from elsewhere... weird!
+          return;
+        }
+
+        context.report({
+          node,
+          message: "Use 'i18n(...)' instead of 'I18n.t(...)'.",
+          fix(fixer) {
+            const fixes = [];
+
+            // Replace I18n.t with i18n
+            fixes.push(fixer.replaceText(node, `i18n`));
+
+            if (!alreadyFixedImport) {
+              const importDeclaration = i18nDefaultImport.node.parent;
+              const i18nSpecifier = importDeclaration.specifiers.find(
+                (specifier) =>
+                  specifier.type === "ImportSpecifier" &&
+                  specifier.imported.name === "i18n"
+              );
+
+              // Check if I18n is used elsewhere
+              const shouldRemoveDefaultImport = !variable.references.some(
+                (ref) =>
+                  ref.identifier.parent.type !== "MemberExpression" ||
+                  ref.identifier.parent.property.name !== "t"
+              );
+
+              if (!i18nSpecifier || shouldRemoveDefaultImport) {
+                fixes.push(
+                  fixImport(fixer, importDeclaration, {
+                    defaultImport: !shouldRemoveDefaultImport,
+                    namedImportsToAdd: ["i18n"],
+                  })
+                );
+              }
+
+              alreadyFixedImport = true;
+            }
+
+            return fixes;
+          },
+        });
+      },
+    };
+  },
+};

package/eslint-rules/no-simple-queryselector.mjs

@@ -0,0 +1,46 @@
+// no-queryselector-body-html.mjs
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        'disallow document.querySelector("body") and document.querySelector("html")',
+      category: "Best Practices",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const { callee, arguments: args } = node;
+
+        if (
+          callee.type === "MemberExpression" &&
+          callee.object.name === "document" &&
+          callee.property.name === "querySelector" &&
+          args.length === 1 &&
+          args[0].type === "Literal"
+        ) {
+          if (args[0].value === "body") {
+            context.report({
+              node,
+              message:
+                'Avoid using document.querySelector("body"). Use document.body instead.',
+              fix: (fixer) => fixer.replaceText(node, "document.body"),
+            });
+          } else if (args[0].value === "html") {
+            context.report({
+              node,
+              message:
+                'Avoid using document.querySelector("html"). Use document.documentElement instead.',
+              fix: (fixer) =>
+                fixer.replaceText(node, "document.documentElement"),
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/eslint-rules/service-inject-import.mjs

@@ -0,0 +1,36 @@
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Convert 'inject as service' to 'service'",
+      category: "Best Practices",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === "@ember/service") {
+          node.specifiers.forEach((specifier) => {
+            if (
+              specifier.type === "ImportSpecifier" &&
+              specifier.imported.name === "inject" &&
+              specifier.local.name === "service"
+            ) {
+              context.report({
+                node: specifier,
+                message:
+                  "Use direct 'service' import instead of 'inject as service'.",
+                fix(fixer) {
+                  return fixer.replaceText(specifier, "service");
+                },
+              });
+            }
+          });
+        }
+      },
+    };
+  },
+};

package/eslint-rules/utils/fix-import.mjs

@@ -0,0 +1,69 @@
+/**
+ * Fix an import declaration
+ *
+ * @param {ASTNode} importDeclarationNode - The AST node representing the import declaration.
+ * @param {Object} options - Options for modifying the import statement.
+ * @param {undefined|false|string} options.defaultImport - Undefined to leave default import unchanged. False to remove it. String to set it to the given name, if it doesn't already exist.
+ * @param {string[]} options.namedImportsToAdd - Named imports to add to the import statement.
+ * @param {string[]} options.namedImportsToRemove - Named imports to remove from the import statement.
+ */
+export function fixImport(
+  fixer,
+  importDeclarationNode,
+  { defaultImport, namedImportsToAdd = [], namedImportsToRemove = [] }
+) {
+  const existingSpecifiers = importDeclarationNode.specifiers;
+  const existingDefaultImport = existingSpecifiers.find(
+    (specifier) => specifier.type === "ImportDefaultSpecifier"
+  );
+
+  // Map existing named imports to their local names
+  const existingNamedImports = existingSpecifiers
+    .filter((specifier) => specifier.type === "ImportSpecifier")
+    .reduce((acc, specifier) => {
+      acc[specifier.imported.name] = specifier.local.name;
+      return acc;
+    }, {});
+
+  // Determine final default import
+  let finalDefaultImport;
+  if (defaultImport === undefined) {
+    finalDefaultImport = existingDefaultImport
+      ? existingDefaultImport.local.name
+      : null;
+  } else if (defaultImport) {
+    finalDefaultImport = existingDefaultImport
+      ? existingDefaultImport.local.name
+      : defaultImport;
+  } else {
+    finalDefaultImport = null;
+  }
+
+  // Determine final named imports, preserving aliases
+  const finalNamedImports = Array.from(
+    new Set([
+      ...Object.entries(existingNamedImports)
+        .filter(([imported]) => !namedImportsToRemove.includes(imported))
+        .map(([imported, local]) =>
+          imported === local ? imported : `${imported} as ${local}`
+        ),
+      ...namedImportsToAdd,
+    ])
+  );
+
+  // Construct the new import statement
+  let newImportStatement = "import ";
+  if (finalDefaultImport) {
+    newImportStatement += `${finalDefaultImport}`;
+    if (finalNamedImports.length > 0) {
+      newImportStatement += ", ";
+    }
+  }
+  if (finalNamedImports.length > 0) {
+    newImportStatement += `{ ${finalNamedImports.join(", ")} }`;
+  }
+  newImportStatement += ` from "${importDeclarationNode.source.value}";`;
+
+  // Replace the entire import declaration
+  return fixer.replaceText(importDeclarationNode, newImportStatement);
+}

package/eslint.mjs

@@ -1,5 +1,6 @@
 import BabelParser from "@babel/eslint-parser";
 import js from "@eslint/js";
+import stylisticJs from "@stylistic/eslint-plugin-js";
 import EmberESLintParser from "ember-eslint-parser";
 import DecoratorPosition from "eslint-plugin-decorator-position";
 import EmberPlugin from "eslint-plugin-ember";
@@ -9,6 +10,11 @@ import QUnitRecommended from "eslint-plugin-qunit/configs/recommended";
 import SimpleImportSort from "eslint-plugin-simple-import-sort";
 import SortClassMembers from "eslint-plugin-sort-class-members";
 import globals from "globals";
+import deprecatedLookups from "./eslint-rules/deprecated-lookups.mjs";
+import i18nImport from "./eslint-rules/i18n-import-location.mjs";
+import i18nT from "./eslint-rules/i18n-t.mjs";
+import noSimpleQueryselector from "./eslint-rules/no-simple-queryselector.mjs";
+import serviceInjectImport from "./eslint-rules/service-inject-import.mjs";
 
 // Copied from "ember-template-imports/lib/utils"
 const TEMPLATE_TAG_PLACEHOLDER = "__GLIMMER_TEMPLATE";
@@ -80,11 +86,21 @@ export default [
       },
     },
     plugins: {
+      "@stylistic/js": stylisticJs,
       ember: EmberPlugin,
       "sort-class-members": SortClassMembers,
       "decorator-position": DecoratorPosition,
       "simple-import-sort": SimpleImportSort,
       qunit: QUnitPlugin,
+      discourse: {
+        rules: {
+          "i18n-import-location": i18nImport,
+          "i18n-t": i18nT,
+          "service-inject-import": serviceInjectImport,
+          "no-simple-queryselector": noSimpleQueryselector,
+          "deprecated-lookups": deprecatedLookups,
+        },
+      },
     },
     rules: {
       "block-scoped-var": "error",
@@ -133,6 +149,16 @@ export default [
       "no-duplicate-imports": "error",
       "object-shorthand": ["error", "properties"],
       "no-dupe-class-members": "error",
+      "@stylistic/js/lines-between-class-members": [
+        "error",
+        {
+          enforce: [
+            { blankLine: "always", prev: "*", next: "method" },
+            { blankLine: "always", prev: "method", next: "*" },
+          ],
+        },
+        { exceptAfterSingleLine: true },
+      ],
       "ember/no-classic-components": "off",
       "ember/no-component-lifecycle-hooks": "off",
       "ember/require-tagless-components": "off",
@@ -186,6 +212,8 @@ export default [
             "[properties]",
             "[private-properties]",
             "constructor",
+            "init",
+            "willDestroy",
             "[everything-else]",
             "[template-tag]",
           ],
@@ -249,6 +277,13 @@ export default [
           ],
         },
       ],
+      // TODO: enable by default once this commit is available widely
+      // https://github.com/discourse/discourse/commit/d606ac3d8e
+      // "discourse/i18n-import-location": ["error"],
+      // "discourse/i18n-t": ["error"],
+      "discourse/service-inject-import": ["error"],
+      "discourse/no-simple-queryselector": ["error"],
+      "discourse/deprecated-lookups": ["error"],
     },
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourse/lint-configs",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Shareable lint configs for Discourse core, plugins, and themes",
   "author": "Discourse",
   "license": "MIT",
@@ -21,7 +21,8 @@
     },
     "./template-lint": {
       "require": "./template-lint.config.cjs"
-    }
+    },
+    "./template-lint-rules": "./template-lint-rules/index.mjs"
   },
   "scripts": {
     "lint": "eslint --no-error-on-unmatched-pattern **/*.cjs */**.mjs **/*.js && pnpm prettier --check .",
@@ -31,6 +32,7 @@
     "@babel/core": "^7.25.8",
     "@babel/eslint-parser": "^7.25.8",
     "@babel/plugin-proposal-decorators": "^7.25.7",
+    "@stylistic/eslint-plugin-js": "^2.11.0",
     "ember-template-lint": "^6.0.0",
     "eslint": "^9.14.0",
     "eslint-plugin-decorator-position": "^6.0.0",

package/template-lint-rules/index.mjs

@@ -0,0 +1,13 @@
+import NoAtClass from "./no-at-class.mjs";
+import NoImplicitThis from "./no-implicit-this.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,
+  },
+};

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,174 @@
+// 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.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   extends: ["recommended", "stylistic"],
+  plugins: ["@discourse/lint-configs/template-lint-rules"],
   rules: {
     // Intentionally disabled default rules
     "no-autofocus-attribute": false,
@@ -42,5 +43,23 @@ module.exports = {
     "eol-last": false,
     quotes: false,
     "self-closing-void-elements": false,
+
+    // Discourse custom
+    "discourse/no-at-class": true,
+    "discourse/no-implicit-this": {
+      allow: [
+        "hide-application-footer",
+        "hide-application-sidebar",
+        "loading-spinner",
+      ],
+    },
   },
+  overrides: [
+    {
+      files: ["**/*.gjs", "**/*.gts"],
+      rules: {
+        "discourse/no-implicit-this": false,
+      },
+    },
+  ],
 };