adds eslint rules from cms/forms/deploy/workflow, run and fix.

Author: nathanwoulfe

src/Umbraco.Cms.Integrations.Search.Algolia/Client/.eslintrc.json

@@ -0,0 +1,87 @@
+{
+	"ignorePatterns": ["vite.*.ts", "src/generated/**", "devops/**"],
+	"root": true,
+	"plugins": ["eslint-plugin-local-rules"],
+	"parserOptions": {
+		"ecmaVersion": "latest"
+	},
+	"env": {
+		"es6": true
+	},
+	"overrides": [
+		{
+			"files": ["**/*.ts"],
+			"extends": [
+				"eslint:recommended",
+				"plugin:import/recommended",
+				"plugin:import/typescript",
+				"plugin:@typescript-eslint/eslint-recommended",
+				"plugin:@typescript-eslint/recommended",
+				"plugin:wc/recommended",
+				"plugin:lit/recommended",
+				"plugin:lit-a11y/recommended",
+				"prettier"
+			],
+			"parser": "@typescript-eslint/parser",
+			"parserOptions": {
+				"project": "./tsconfig.json",
+				"tsconfigRootDir": "./",
+				"ecmaVersion": "latest",
+				"sourceType": "module"
+			},
+			"env": {
+				"browser": true,
+				"es2021": true
+			},
+			"rules": {
+				"no-var": "error",
+				"import/no-unresolved": "off",
+				"import/order": "warn",
+				"import/no-duplicates": ["warn", {"prefer-inline": true}],
+				"local-rules/bad-type-import": "error",
+				"local-rules/no-direct-api-import": "warn",
+				"local-rules/prefer-import-aliases": "error",
+				"local-rules/enforce-element-suffix-on-element-class-name": "error",
+				"local-rules/prefer-static-styles-last": "warn",
+				"local-rules/ensure-relative-import-use-js-extension": "error",
+				"@typescript-eslint/no-non-null-assertion": "off",
+				"@typescript-eslint/no-explicit-any": "warn",
+				"@typescript-eslint/no-unused-vars": "warn",
+                "@typescript-eslint/consistent-type-exports": "error",
+                "@typescript-eslint/consistent-type-imports": "error"
+			},
+			"settings": {
+				"import/parsers": {
+					"@typescript-eslint/parser": [".ts"]
+				},
+				"import/resolver": {
+					"typescript": {
+						"alwaysTryTypes": true,
+						"project": "./tsconfig.json"
+					}
+				}
+			}
+		},
+		{
+			"files": ["**/*.js"],
+			"extends": ["eslint:recommended", "plugin:import/recommended", "prettier"],
+			"env": {
+				"node": true,
+				"browser": true,
+				"es6": true
+			},
+			"parserOptions": {
+				"sourceType": "module",
+				"ecmaVersion": "latest"
+			},
+			"settings": {
+				"import/resolver": {
+					"node": {
+						"extensions": [".js"],
+						"moduleDirectory": ["node_modules"]
+					}
+				}
+			}
+		}
+	]
+}

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/bad-type-import.cjs

@@ -0,0 +1,31 @@
+  /** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ensures the use of the `import type` operator from the `src/core/models/index.ts` file.',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  create: function (context) {
+    return {
+      ImportDeclaration: function (node) {
+        if (
+          node.source.parent.importKind !== 'type' &&
+          (node.source.value.endsWith('/models') || node.source.value === 'router-slot/model')
+        ) {
+          const sourceCode = context.getSourceCode();
+          const nodeSource = sourceCode.getText(node);
+          context.report({
+            node,
+            message: 'Use `import type` instead of `import`.',
+            fix: (fixer) => fixer.replaceText(node, nodeSource.replace('import', 'import type')),
+          });
+        }
+      },
+    };
+  },
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/enforce-element-suffix-on-element-class-name.cjs

@@ -0,0 +1,31 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description: 'Enforce Element class name to end with "Element".',
+			category: 'Naming',
+			recommended: true,
+		},
+		schema: [],
+	},
+	create: function (context) {
+		return {
+			ClassDeclaration(node) {
+				// check if the class extends HTMLElement, LitElement, or UmbLitElement
+				const isExtendingElement =
+					node.superClass && ['HTMLElement', 'LitElement', 'UmbLitElement'].includes(node.superClass.name);
+				// check if the class name ends with 'Element'
+				const isClassNameValid = node.id.name.endsWith('Element');
+
+				if (isExtendingElement && !isClassNameValid) {
+					context.report({
+						node,
+						message: "Element class name should end with 'Element'.",
+						// There us no fixer on purpose because it's not safe to rename the class. We want to do that trough the refactoring tool.
+					});
+				}
+			},
+		};
+	},
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/ensure-relative-import-use-js-extension.cjs

@@ -0,0 +1,91 @@
+/** @type {import('eslint').Rule.RuleModule}*/
+module.exports = {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'Ensures relative imports use the ".js" file extension.',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		fixable: 'code',
+		schema: [],
+	},
+	create: (context) => {
+		function correctImport(value) {
+			if (value === '.') {
+				return './index.js';
+			}
+
+			if (
+				value &&
+				value.startsWith('.') &&
+				!value.endsWith('.js') &&
+				!value.endsWith('.css') &&
+				!value.endsWith('.json') &&
+				!value.endsWith('.svg') &&
+				!value.endsWith('.jpg') &&
+				!value.endsWith('.png')
+			) {
+				return (value.endsWith('/') ? value + 'index' : value) + '.js';
+			}
+
+			return null;
+		}
+
+		return {
+			ImportDeclaration: (node) => {
+				const { source } = node;
+				const { value } = source;
+
+				const fixedValue = correctImport(value);
+				if (fixedValue) {
+					context.report({
+						node,
+						message: 'Relative imports should use the ".js" file extension.',
+						fix: (fixer) => fixer.replaceText(source, `'${fixedValue}'`),
+					});
+				}
+			},
+			ImportExpression: (node) => {
+				const { source } = node;
+				const { value } = source;
+
+				const fixedSource = correctImport(value);
+				if (fixedSource) {
+					context.report({
+						node: source,
+						message: 'Relative imports should use the ".js" file extension.',
+						fix: (fixer) => fixer.replaceText(source, `'${fixedSource}'`),
+					});
+				}
+			},
+			ExportAllDeclaration: (node) => {
+				const { source } = node;
+				const { value } = source;
+
+				const fixedSource = correctImport(value);
+				if (fixedSource) {
+					context.report({
+						node: source,
+						message: 'Relative exports should use the ".js" file extension.',
+						fix: (fixer) => fixer.replaceText(source, `'${fixedSource}'`),
+					});
+				}
+			},
+			ExportNamedDeclaration: (node) => {
+				const { source } = node;
+				if (!source) return;
+				const { value } = source;
+
+				const fixedSource = correctImport(value);
+				if (fixedSource) {
+					context.report({
+						node: source,
+						message: 'Relative exports should use the ".js" file extension.',
+						fix: (fixer) => fixer.replaceText(source, `'${fixedSource}'`),
+					});
+				}
+			},
+		};
+	},
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/no-direct-api-import.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+	meta: {
+		docs: {
+			description:
+				'Ensures that any API resources from the `@umbraco-cms/backoffice/backend-api` module are not used directly. Instead you should use the `tryExecuteAndNotify` function from the `@umbraco-cms/backoffice/resources` module.',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		fixable: 'code',
+		schema: [],
+	},
+	create: function (context) {
+		return {
+			// If methods called on *Resource classes are not already wrapped with `await tryExecuteAndNotify()`, then we should suggest to wrap them.
+			CallExpression: function (node) {
+				if (
+					node.callee.type === 'MemberExpression' &&
+					node.callee.object.type === 'Identifier' &&
+					node.callee.object.name.endsWith('Resource') &&
+					node.callee.property.type === 'Identifier' &&
+					node.callee.property.name !== 'constructor'
+				) {
+					const hasTryExecuteAndNotify =
+						node.parent &&
+						node.parent.callee &&
+						(node.parent.callee.name === 'tryExecute' || node.parent.callee.name === 'tryExecuteAndNotify');
+					if (!hasTryExecuteAndNotify) {
+						context.report({
+							node,
+							message: 'Wrap this call with `tryExecuteAndNotify()`. Make sure to `await` the result.',
+							fix: (fixer) => [
+								fixer.insertTextBefore(node, 'tryExecuteAndNotify(this, '),
+								fixer.insertTextAfter(node, ')'),
+							],
+						});
+					}
+				}
+			},
+		};
+	},
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/prefer-import-aliases.cjs

@@ -0,0 +1,26 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Ensures that the application does not rely on file system paths for imports. Instead, use import aliases or relative imports. This also solves a problem where GitHub fails on the test runner step.',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		schema: [],
+	},
+	create: function (context) {
+		return {
+			ImportDeclaration: function (node) {
+				if (node.source.value.startsWith('src/')) {
+					context.report({
+						node,
+						message:
+							'Prefer using import aliases or relative imports instead of absolute imports. Example: `import { MyComponent } from "src/components/MyComponent";` should be `import { MyComponent } from "@components/MyComponent";`',
+					});
+				}
+			},
+		};
+	},
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/devops/eslint/rules/prefer-static-styles-last.cjs

@@ -0,0 +1,46 @@
+/** @type {import('eslint').Rule.RuleModule}*/
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Enforce the "styles" property with the static modifier to be the last property of a class that ends with "Element".',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		fixable: 'code',
+		schema: [],
+	},
+	create: function (context) {
+		return {
+			ClassDeclaration(node) {
+				const className = node.id.name;
+				if (className.endsWith('Element')) {
+					const staticStylesProperty = node.body.body.find((bodyNode) => {
+						return bodyNode.type === 'PropertyDefinition' && bodyNode.key.name === 'styles' && bodyNode.static;
+					});
+					if (staticStylesProperty) {
+						const lastProperty = node.body.body[node.body.body.length - 1];
+						if (lastProperty.key.name !== staticStylesProperty.key.name) {
+							context.report({
+								node: staticStylesProperty,
+								message: 'The "styles" property should be the last property of a class declaration.',
+								data: {
+									className: className,
+								},
+								fix: function (fixer) {
+									const sourceCode = context.getSourceCode();
+									const staticStylesPropertyText = sourceCode.getText(staticStylesProperty);
+									return [
+										fixer.replaceTextRange(staticStylesProperty.range, ''),
+										fixer.insertTextAfterRange(lastProperty.range, '\n	\n	' + staticStylesPropertyText),
+									];
+								},
+							});
+						}
+					}
+				}
+			},
+		};
+	},
+};

src/Umbraco.Cms.Integrations.Search.Algolia/Client/eslint-local-rules.cjs

@@ -0,0 +1,19 @@
+"use strict";
+
+const badTypeImportRule = require("./devops/eslint/rules/bad-type-import.cjs");
+const enforceElementSuffixOnElementClassNameRule = require("./devops/eslint/rules/enforce-element-suffix-on-element-class-name.cjs");
+const ensureRelativeImportUseJsExtensionRule = require("./devops/eslint/rules/ensure-relative-import-use-js-extension.cjs");
+const noDirectApiImportRule = require("./devops/eslint/rules/no-direct-api-import.cjs");
+const preferImportAliasesRule = require("./devops/eslint/rules/prefer-import-aliases.cjs");
+const preferStaticStylesLastRule = require("./devops/eslint/rules/prefer-static-styles-last.cjs");
+
+module.exports = {
+  "bad-type-import": badTypeImportRule,
+  "enforce-element-suffix-on-element-class-name":
+    enforceElementSuffixOnElementClassNameRule,
+  "ensure-relative-import-use-js-extension":
+    ensureRelativeImportUseJsExtensionRule,
+  "no-direct-api-import": noDirectApiImportRule,
+  "prefer-import-aliases": preferImportAliasesRule,
+  "prefer-static-styles-last": preferStaticStylesLastRule,
+};