@discourse/lint-configs 2.20.0 → 2.22.0

package/eslint-rules/capital-components.mjs

@@ -0,0 +1,65 @@
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Component names should start with a capital letter.",
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (node.name === "template") {
+          return;
+        }
+
+        if (!node.name.match(/^[a-z]/)) {
+          return;
+        }
+
+        const moduleScope = context.sourceCode.scopeManager.scopes.find(
+          (s) => s.type === "module"
+        );
+        const variable = moduleScope.variables.find(
+          (v) => v.name === node.name
+        );
+
+        if (!variable) {
+          return;
+        }
+
+        const newVariableName = variable.name.replace(/^[a-z]/, (char) =>
+          char.toUpperCase()
+        );
+
+        const importBinding = variable.defs.find(
+          (d) =>
+            d.type === "ImportBinding" &&
+            d.node.type === "ImportDefaultSpecifier"
+        );
+
+        if (!importBinding) {
+          return;
+        }
+
+        context.report({
+          node: node.openTag,
+          message: `Component names should start with a capital letter.`,
+          fix(fixer) {
+            const fixes = [];
+
+            fixes.push(fixer.replaceText(importBinding.node, newVariableName));
+
+            variable.references.forEach((ref) => {
+              fixes.push(fixer.replaceText(ref.identifier, newVariableName));
+            });
+
+            return fixes;
+          },
+        });
+      },
+    };
+  },
+};

package/eslint-rules/no-curly-components.mjs

@@ -0,0 +1,116 @@
+import path from "path";
+
+function lintCurlyComponent(node, context) {
+  const isSimplePath =
+    node.path.type === "GlimmerPathExpression" &&
+    node.path.head.type === "VarHead" &&
+    !node.tail?.length;
+
+  if (!isSimplePath) {
+    return;
+  }
+
+  let check = node.parent;
+  while (check) {
+    if (check.type === "GlimmerAttrNode") {
+      // <Foo @bar={{baz}} />
+      return;
+    }
+    check = check.parent;
+  }
+
+  const variableName = node.path.head.name;
+
+  const moduleScope = context.sourceCode.scopeManager.scopes.find(
+    (s) => s.type === "module"
+  );
+  const variable = moduleScope.variables.find((v) => v.name === variableName);
+
+  if (!variable) {
+    return;
+  }
+
+  const importBinding = variable.defs.find(
+    (d) =>
+      d.type === "ImportBinding" && d.node.type === "ImportDefaultSpecifier"
+  );
+
+  if (!importBinding) {
+    return;
+  }
+
+  const importedModuleName = importBinding.node.parent.source.value;
+
+  // This is not perfect, but it should catch 99% of components
+  let resolvedModuleName = importedModuleName;
+  if (importedModuleName.startsWith(".")) {
+    const cwd = context.cwd;
+    const sourceDirectoryFromCwd = path.dirname(
+      path.relative(cwd, context.getFilename())
+    );
+
+    resolvedModuleName = path.join(sourceDirectoryFromCwd, importedModuleName);
+  }
+
+  if (!resolvedModuleName.includes("/components/")) {
+    return;
+  }
+
+  context.report({
+    node,
+    message: `Use angle bracket syntax for components.`,
+    fix(fixer) {
+      const fixes = [];
+
+      let argumentString = "";
+      node.hash?.pairs.forEach(({ key, value }) => {
+        let valueSource = context.sourceCode.getText(value);
+        valueSource = valueSource.replace(/^\(/, "").replace(/\)$/, "");
+        if (value.type !== "GlimmerStringLiteral") {
+          valueSource = `{{${valueSource}}}`;
+        }
+        argumentString += `@${key}=${valueSource} `;
+      });
+
+      if (node.type === "GlimmerBlockStatement") {
+        fixes.push(
+          fixer.replaceText(
+            node,
+            `<${variable.name} ${argumentString}>${context.sourceCode.getText(
+              node.program
+            )}</${variable.name}>`
+          )
+        );
+      } else if (node.type === "GlimmerMustacheStatement") {
+        fixes.push(
+          fixer.replaceText(node, `<${variable.name} ${argumentString}/>`)
+        );
+      }
+
+      return fixes;
+    },
+  });
+}
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Use angle-bracket syntax for components.",
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+
+  create(context) {
+    return {
+      GlimmerBlockStatement(node) {
+        return lintCurlyComponent(node, context);
+      },
+
+      GlimmerMustacheStatement(node) {
+        return lintCurlyComponent(node, context);
+      },
+    };
+  },
+};

package/eslint.mjs

@@ -12,6 +12,7 @@ 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 capitalComponents from "./eslint-rules/capital-components.mjs";
 import deprecatedLookups from "./eslint-rules/deprecated-lookups.mjs";
 import deprecatedPluginApis from "./eslint-rules/deprecated-plugin-apis.mjs";
 import discourseCommonImports from "./eslint-rules/discourse-common-imports.mjs";
@@ -20,6 +21,7 @@ import i18nT from "./eslint-rules/i18n-t.mjs";
 import lineAfterImports from "./eslint-rules/line-after-imports.mjs";
 import lineBeforeDefaultExport from "./eslint-rules/line-before-default-export.mjs";
 import linesBetweenClassMembers from "./eslint-rules/lines-between-class-members.mjs";
+import noCurlyComponents from "./eslint-rules/no-curly-components.mjs";
 import noSimpleQuerySelector from "./eslint-rules/no-simple-query-selector.mjs";
 import serviceInjectImport from "./eslint-rules/service-inject-import.mjs";
 import truthHelpersImports from "./eslint-rules/truth-helpers-imports.mjs";
@@ -122,6 +124,8 @@ export default [
           "deprecated-plugin-apis": deprecatedPluginApis,
           "line-after-imports": lineAfterImports,
           "line-before-default-export": lineBeforeDefaultExport,
+          "no-curly-components": noCurlyComponents,
+          "capital-components": capitalComponents,
         },
       },
     },
@@ -186,8 +190,6 @@ export default [
       "ember/avoid-leaking-state-in-ember-objects": "off",
       "ember/no-get": "off",
       "ember/no-observers": "off",
-      "ember/no-mixins": "off",
-      "ember/no-new-mixins": "off",
       "ember/no-implicit-injections": "off", // this rule is broken
       "ember/no-array-prototype-extensions": "off",
       "ember/no-at-ember-render-modifiers": "off",
@@ -296,6 +298,8 @@ export default [
       "discourse/lines-between-class-members": ["error"],
       "discourse/line-after-imports": ["error"],
       "discourse/line-before-default-export": ["error"],
+      "discourse/no-curly-components": ["error"],
+      "discourse/capital-components": ["error"],
     },
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourse/lint-configs",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "description": "Shareable lint configs for Discourse core, plugins, and themes",
   "author": "Discourse",
   "license": "MIT",