@ethlete/eslint-plugin 1.0.0-next.29 → 1.0.0-next.30

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.0-next.30
+
+### Minor Changes
+
+- Add `ethlete/no-native-title`, off in `recommendedTemplate` until projects opt in: it reports a native `title` attribute (`title="…"`, `[title]`, `[attr.title]`) on HTML elements, because the SDK tooltip replaces it. Components with a dash in their name keep their own `title` input.
+- Add the opt-in `no-silent-catch-error` rule, which flags a `catchError` handler that ignores the error and returns `of()`, `EMPTY` or `NEVER`.
+
 ## 1.0.0-next.29
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/eslint-plugin",
-  "version": "1.0.0-next.29",
+  "version": "1.0.0-next.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/index.js

@@ -57,9 +57,11 @@ const preferStaticBooleanProperties = require('./rules/prefer-static-boolean-pro
 const noImpureTopLevelProvider = require('./rules/no-impure-top-level-provider');
 const noLegacyPrepareWithoutInjector = require('./rules/no-legacy-prepare-without-injector');
 const requireFormSubmit = require('./rules/require-form-submit');
+const noNativeTitle = require('./rules/no-native-title');
 const noCdkImport = require('./rules/no-cdk-import');
 const noLegacyQueryImport = require('./rules/no-legacy-query-import');
 const noAsyncAwait = require('./rules/no-async-await');
+const noSilentCatchError = require('./rules/no-silent-catch-error');
 const noEnum = require('./rules/no-enum');
 const consistentTypeDefinitions = require('./rules/consistent-type-definitions');
 const takeUntilDestroyedLast = require('./rules/take-until-destroyed-last');
@@ -130,9 +132,11 @@ const plugin = {
     'prefer-static-boolean-properties': preferStaticBooleanProperties,
     'no-impure-top-level-provider': noImpureTopLevelProvider,
     'require-form-submit': requireFormSubmit,
+    'no-native-title': noNativeTitle,
     'no-cdk-import': noCdkImport,
     'no-legacy-query-import': noLegacyQueryImport,
     'no-async-await': noAsyncAwait,
+    'no-silent-catch-error': noSilentCatchError,
     'no-enum': noEnum,
     'consistent-type-definitions': consistentTypeDefinitions,
   },

package/src/rules/no-native-title.js

@@ -0,0 +1,60 @@
+// @ts-check
+'use strict';
+
+/**
+ * Flags a native `title` attribute on an HTML element - it renders the browser tooltip, which the SDK tooltip replaces.
+ *
+ *   <button title="Save">           ✘
+ *   <button [title]="label()">      ✘
+ *   <button [attr.title]="label()"> ✘
+ *
+ * An element with a dash in its name is a component or custom element; its `title` input or attribute
+ * is its own API, so only `[attr.title]` is reported there.
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noNativeTitle = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow the native `title` attribute in Angular templates; use the SDK tooltip.',
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      nativeTitle:
+        'A native `title` shows the browser tooltip. Use the SDK tooltip (`etTooltip` from `@ethlete/components`) instead.',
+    },
+  },
+  create(context) {
+    const parserServices = /** @type {any} */ (context.sourceCode.parserServices);
+
+    if (!parserServices?.convertNodeSourceSpanToLoc) return {};
+
+    /** @param {any} node */
+    const report = (node) =>
+      context.report({
+        loc: parserServices.convertNodeSourceSpanToLoc(node.sourceSpan),
+        messageId: 'nativeTitle',
+      });
+
+    return {
+      /** @param {any} node */
+      Element(node) {
+        const isCustom = node.name.includes('-');
+
+        for (const attribute of node.attributes ?? []) {
+          if (attribute.name === 'title' && !isCustom) report(attribute);
+        }
+
+        for (const input of node.inputs ?? []) {
+          if (input.name !== 'title') continue;
+          const isAttrBinding = input.keySpan?.toString() === 'attr.title';
+          if (isAttrBinding || !isCustom) report(input);
+        }
+      },
+    };
+  },
+};
+
+module.exports = noNativeTitle;

package/src/rules/no-silent-catch-error.js

@@ -0,0 +1,105 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallow an RxJS catchError whose handler ignores the error and returns of(...), EMPTY or NEVER.
+ *
+ * BAD:
+ *   source$.pipe(catchError(() => of(null)));
+ *
+ * GOOD:
+ *   source$.pipe(catchError((error) => { this.error.set(error); return of(null); }));
+ */
+
+const SWALLOWING_CONSTANTS = new Set(['EMPTY', 'NEVER']);
+
+const isSwallowingValue = (node) => {
+  if (!node) return false;
+
+  if (node.type === 'Identifier') return SWALLOWING_CONSTANTS.has(node.name);
+
+  return node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'of';
+};
+
+const collectReturnedValues = (fn) => {
+  if (fn.body.type !== 'BlockStatement') return [fn.body];
+
+  const values = [];
+
+  const visit = (node) => {
+    if (!node || typeof node.type !== 'string') return;
+
+    if (
+      node.type === 'FunctionDeclaration' ||
+      node.type === 'FunctionExpression' ||
+      node.type === 'ArrowFunctionExpression'
+    ) {
+      return;
+    }
+
+    if (node.type === 'ReturnStatement') {
+      values.push(node.argument);
+      return;
+    }
+
+    for (const key of Object.keys(node)) {
+      if (key === 'parent') continue;
+
+      const child = node[key];
+
+      if (Array.isArray(child)) child.forEach(visit);
+      else if (child && typeof child.type === 'string') visit(child);
+    }
+  };
+
+  fn.body.body.forEach(visit);
+
+  return values;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noSilentCatchError = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow a catchError handler that ignores the error and swallows it with of(), EMPTY or NEVER.',
+      recommended: false,
+    },
+    messages: {
+      silentCatchError:
+        'The error disappears silently. Use it (log it, store it in a signal, rethrow it) or disable this rule with a reason.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    const ignoresError = (fn) => {
+      const [param] = fn.params;
+
+      if (!param) return true;
+      if (param.type !== 'Identifier') return false;
+
+      const variable = sourceCode.getDeclaredVariables(fn).find((v) => v.name === param.name);
+
+      return !variable || variable.references.length === 0;
+    };
+
+    return {
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || node.callee.name !== 'catchError') return;
+
+        const [handler] = node.arguments;
+
+        if (!handler || (handler.type !== 'ArrowFunctionExpression' && handler.type !== 'FunctionExpression')) return;
+        if (!ignoresError(handler)) return;
+
+        if (collectReturnedValues(handler).some(isSwallowingValue)) {
+          context.report({ node: handler, messageId: 'silentCatchError' });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noSilentCatchError;