feat(lint): deprecation rule for ESlMediaRuleList.parse

eslint/src/core/deprecated-class-method.ts

@@ -0,0 +1,62 @@
+import type * as ESTree from 'estree';
+import type {Rule} from 'eslint';
+
+const meta: Rule.RuleModule['meta'] = {
+  type: 'suggestion',
+  docs: {
+    description: 'replace deprecated class static methods with recommended ones',
+    recommended: true
+  },
+  fixable: 'code'
+};
+
+export interface ESLintDeprecationStaticMethodCfg {
+  /** Class name */
+  className: string;
+  /** Deprecated static method name */
+  deprecatedMethod: string;
+  /** Function that returns recommended method */
+  recommendedMethod: (args?: ESTree.CallExpression['arguments']) => string;
+}
+
+type StaticMethodNode = ESTree.MemberExpression & Rule.NodeParentExtension;
+
+/** Builds deprecation rule from {@link ESLintDeprecationStaticMethodCfg} object */
+export function buildRule(configs: ESLintDeprecationStaticMethodCfg | ESLintDeprecationStaticMethodCfg[]): Rule.RuleModule {
+  configs = Array.isArray(configs) ? configs : [configs];
+  const create = (context: Rule.RuleContext): Rule.RuleListener => ({
+    MemberExpression(node: StaticMethodNode): null {
+      const {object, property} = node;
+
+      if (!(object.type === 'Identifier' && property.type === 'Identifier')) return null;
+      const className = object.name;
+      const methodName = property.name;
+
+      for (const cfg of configs) {
+        if (!(className === cfg.className && methodName === cfg.deprecatedMethod)) continue;
+        const {parent} = node;
+        const {type} = parent;
+        if (type === 'ExpressionStatement' || type === 'VariableDeclarator') {
+          context.report({
+            node,
+            message: `[ESL Lint]: Deprecated static method ${cfg.className}.${cfg.deprecatedMethod}, 
+use ${cfg.className}'s ${cfg.recommendedMethod()} methods instead`.replace(/\n|\r/g, ''),
+          });
+        }
+
+        if (type === 'CallExpression') {
+          const args = parent.arguments;
+          const recommendedMethod = cfg.recommendedMethod(args);
+
+          context.report({
+            node,
+            message: `[ESL Lint]: Deprecated static method ${cfg.className}.${cfg.deprecatedMethod}, use ${cfg.className}.${recommendedMethod} instead`,
+            fix: (fixer) => fixer.replaceText(property, recommendedMethod)
+          });
+        }
+      }
+      return null;
+    }
+  });
+  return {meta, create};
+}

eslint/src/rules/4/all.rules.ts

@@ -6,13 +6,16 @@ import deprecatedToggleableActionParams from './deprecated.toggleable-action-par
 
 import deprecatedBaseDecoratorsPath from './deprecated.base-decorators-path';
 
+import deprecatedMediaRuleListParse from './deprecated.media-rule-list-parse';
+
 export default {
   // Aliases
   'deprecated-4/generate-uid': deprecatedGenerateUid,
   'deprecated-4/deep-compare': deprecatedDeepCompare,
   'deprecated-4/event-utils': deprecatedEventUtils,
   'deprecated-4/traversing-query': deprecatedTraversingQuery,
   'deprecated-4/toggleable-action-params': deprecatedToggleableActionParams,
+  'deprecated-4/media-rule-list.parse': deprecatedMediaRuleListParse,
   // Paths
   'deprecated-4/base-decorators-path': deprecatedBaseDecoratorsPath
 };

eslint/src/rules/4/deprecated.media-rule-list-parse.ts

@@ -0,0 +1,15 @@
+import {buildRule} from '../../core/deprecated-class-method';
+
+/**
+ * Rule for deprecated 'parse' method of {@link ESLMediaRuleList}
+ */
+export default buildRule([
+  {
+    className: 'ESLMediaRuleList',
+    deprecatedMethod: 'parse',
+    recommendedMethod: (args): string => {
+      if (!args) return 'parseQuery or parseTuple';
+      return args.length === 1 || (args[1]?.type !== 'Literal' && args[1]?.type !== 'TemplateLiteral') ? 'parseQuery' : 'parseTuple';
+    }
+  }
+]);

eslint/test/deprecated-class-method.test.ts

@@ -0,0 +1,199 @@
+import {RuleTester} from 'eslint';
+import {buildRule} from '../src/core/deprecated-class-method';
+
+const VALID_CASES = [
+  {
+    code: `
+      ESLMediaRuleList.parseQuery('1 | 2');
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parseQuery('1 | 2', String);
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parseTuple('1 | 2', '3|4');
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parseTuple('1 | 2', '3|4', String);
+    `
+  }, {
+    code: `
+      TestClass.newMethodNoArgs();
+    `
+  }, {
+    code: `
+      TestClass.newMethodOneArg('test');
+    `
+  }, {
+    code: `
+      TestClass.newMethodMultipleArgs('test', 42);
+    `
+  }, {
+    code: `
+      TestClass.newMethodMultipleArgsNonLiteral(1, 2);
+    `
+  }, {
+    code: `
+      AnotherClass.modernMethod();
+    `
+  }, {
+    code: `
+      AnotherClass.modernMethodForManyArgs(1, 2, 3);
+    `
+  }, {
+    code: `
+      AnotherClass.modernMethod;
+    `
+  },  {
+    code: `
+      const method = AnotherClass.modernMethod;
+    `
+  }
+];
+
+const INVALID_CASES = [
+  {
+    code: `
+      const t = ESLMediaRuleList.parse;
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList\'s parseQuery or parseTuple methods instead'
+    ],
+    output: `
+      const t = ESLMediaRuleList.parse;
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse;
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList\'s parseQuery or parseTuple methods instead'
+    ],
+    output: `
+      ESLMediaRuleList.parse;
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse('1 | 2');
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList.parseQuery instead'
+    ],
+    output: `
+      ESLMediaRuleList.parseQuery('1 | 2');
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse('1 | 2', String);
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList.parseQuery instead'
+    ],
+    output: `
+      ESLMediaRuleList.parseQuery('1 | 2', String);
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse('1 | 2', '3|4');
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList.parseTuple instead'
+    ],
+    output: `
+      ESLMediaRuleList.parseTuple('1 | 2', '3|4');
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse('1 | 2', \`3|4\`);
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList.parseTuple instead'
+    ],
+    output: `
+      ESLMediaRuleList.parseTuple('1 | 2', \`3|4\`);
+    `
+  }, {
+    code: `
+      ESLMediaRuleList.parse('1 | 2', '3|4', String);
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method ESLMediaRuleList.parse, use ESLMediaRuleList.parseTuple instead'
+    ],
+    output: `
+      ESLMediaRuleList.parseTuple('1 | 2', '3|4', String);
+    `
+  }, {
+    code: `
+      TestClass.oldMethod();
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method TestClass.oldMethod, use TestClass.newMethodNoArgs instead'
+    ],
+    output: `
+      TestClass.newMethodNoArgs();
+    `
+  }, {
+    code: `
+      TestClass.oldMethod(1, () => {});
+    `,
+    errors: [{ message: '[ESL Lint]: Deprecated static method TestClass.oldMethod, use TestClass.newMethodMultipleArgsNonLiteral instead' }],
+    output: `
+      TestClass.newMethodMultipleArgsNonLiteral(1, () => {});
+    `
+  }, {
+    code: `
+      TestClass.oldMethod('test');
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method TestClass.oldMethod, use TestClass.newMethodOneArg instead'
+    ],
+    output: `
+      TestClass.newMethodOneArg('test');
+    `
+  }, {
+    code: `
+      TestClass.oldMethod('test', 42);
+    `,
+    errors: [
+      '[ESL Lint]: Deprecated static method TestClass.oldMethod, use TestClass.newMethodMultipleArgs instead'
+    ],
+    output: `
+      TestClass.newMethodMultipleArgs('test', 42);
+    `
+  }
+];
+
+describe('ESL Migration Rules: Deprecated Static Method: valid', () => {
+  const rule = buildRule([
+    {
+      className: 'ESLMediaRuleList',
+      deprecatedMethod: 'parse',
+      recommendedMethod: (args): string => {
+        if (!args) return 'parseQuery or parseTuple';
+        return args.length === 1 || (args[1]?.type !== 'Literal' && args[1]?.type !== 'TemplateLiteral') ? 'parseQuery' : 'parseTuple';
+      }
+    }, {
+      className: 'TestClass',
+      deprecatedMethod: 'oldMethod',
+      recommendedMethod: (args) => {
+        if (!args || args.length === 0) {
+          return 'newMethodNoArgs';
+        } else if (args.length === 1) {
+          return 'newMethodOneArg';
+        } else if (args.length > 1 && args[args.length - 1].type !== 'Literal' && args[args.length - 1].type !== 'TemplateLiteral') {
+          return 'newMethodMultipleArgsNonLiteral';
+        } else {
+          return 'newMethodMultipleArgs';
+        }
+      }
+    }
+  ]);
+
+  const ruleTester = new RuleTester({
+    parser: require.resolve('@typescript-eslint/parser')
+  });
+
+  ruleTester.run('deprecated-static-method', rule, {valid: VALID_CASES, invalid: INVALID_CASES});
+});

src/modules/esl-image/core/esl-image.ts

@@ -68,7 +68,7 @@ export class ESLImage extends ESLBaseElement {
     this.alt =
       this.alt || this.getAttribute('aria-label') || this.getAttribute('data-alt') || '';
     this.updateA11y();
-    this.srcRules = ESLMediaRuleList.parse(this.src);
+    this.srcRules = ESLMediaRuleList.parseQuery(this.src);
     if (this.lazyObservable) {
       this.removeAttribute('lazy-triggered');
       getIObserver().observe(this);
@@ -100,7 +100,7 @@ export class ESLImage extends ESLBaseElement {
         this.updateA11y();
         break;
       case 'data-src':
-        this.srcRules = ESLMediaRuleList.parse(newVal);
+        this.srcRules = ESLMediaRuleList.parseQuery(newVal);
         this.refresh();
         break;
       case 'data-src-base':
@@ -117,7 +117,7 @@ export class ESLImage extends ESLBaseElement {
 
   public get srcRules(): ESLMediaRuleList<string> {
     if (!this._srcRules) {
-      this.srcRules = ESLMediaRuleList.parse(this.src);
+      this.srcRules = ESLMediaRuleList.parseQuery(this.src);
     }
     return this._srcRules;
   }

src/modules/esl-media-query/test/esl-media-rule-list.test.ts

@@ -8,7 +8,7 @@ describe('ESLMediaRuleList', () => {
 
   describe('Integration cases:', () => {
     test('Basic case: "1 | @sm => 2 | @md => 3" parsed correctly', () => {
-      const mrl = ESLMediaRuleList.parse('1 | @sm => 2 | @md => 3');
+      const mrl = ESLMediaRuleList.parseQuery('1 | @sm => 2 | @md => 3');
       expect(mrl.rules.length).toBe(3);
 
       mockSmMatchMedia.matches = false;
@@ -30,7 +30,7 @@ describe('ESLMediaRuleList', () => {
     });
 
     test('Extended media case parsed correctly: "1 | @sm and @md => 2"', () => {
-      const mrl = ESLMediaRuleList.parse('1 | @sm and @md => 2');
+      const mrl = ESLMediaRuleList.parseQuery('1 | @sm and @md => 2');
       const listener = jest.fn();
 
       expect(mrl.rules.length).toBe(2);
@@ -57,7 +57,7 @@ describe('ESLMediaRuleList', () => {
     });
 
     test('Extended media case parsed correctly: "1 | @sm or @md => 2"', () => {
-      const mrl = ESLMediaRuleList.parse('1 | @sm or @md => 2');
+      const mrl = ESLMediaRuleList.parseQuery('1 | @sm or @md => 2');
       const listener = jest.fn();
 
       expect(mrl.rules.length).toBe(2);
@@ -112,20 +112,20 @@ describe('ESLMediaRuleList', () => {
 
   describe('Basic cases:', () => {
     test('Single value parsed to the single "all" rule', () => {
-      const mrl = ESLMediaRuleList.parse('123');
+      const mrl = ESLMediaRuleList.parseQuery('123');
       expect(mrl.rules.length).toBe(1);
       expect(mrl.active.length).toBeGreaterThan(0);
       expect(mrl.value).toBe('123');
       expect(mrl.activeValue).toBe('123');
     });
 
     test('Single rule with media query "@sm => 1"', () => {
-      const mrl = ESLMediaRuleList.parse('@sm => 1');
+      const mrl = ESLMediaRuleList.parseQuery('@sm => 1');
       expect(mrl.rules.length).toBe(1);
     });
 
     test('Single rule "@sm => 1" response to the matcher correctly', () => {
-      const mrl = ESLMediaRuleList.parse('@sm => 1');
+      const mrl = ESLMediaRuleList.parseQuery('@sm => 1');
 
       mockSmMatchMedia.matches = false;
       expect(mrl.value).toBe(undefined);