diff --git a/eslint/src/rules/4/deprecated.media-rule-list-parse.ts b/eslint/src/rules/4/deprecated.media-rule-list-parse.ts index 2dc15e368..cc4ba6ac0 100644 --- a/eslint/src/rules/4/deprecated.media-rule-list-parse.ts +++ b/eslint/src/rules/4/deprecated.media-rule-list-parse.ts @@ -8,11 +8,12 @@ import type {ESLintReplacementMethodCfg} from '../../core/deprecated-class-metho const AVAILABLE_SINCE = '5.0.0-beta.24'; const isActual = lte(ESL_PACKAGE_VERSION, AVAILABLE_SINCE); +const isTest = process.env.NODE_ENV === 'test'; /** * Rule for deprecated 'parse' method of {@link ESLMediaRuleList} */ -export default isActual ? +export default isActual || isTest ? buildRule({ className: 'ESLMediaRuleList', deprecatedMethod: 'parse', diff --git a/src/modules/esl-media-query/README.md b/src/modules/esl-media-query/README.md index 1f990f131..e724d87dc 100644 --- a/src/modules/esl-media-query/README.md +++ b/src/modules/esl-media-query/README.md @@ -204,20 +204,22 @@ ESLMediaRuleList.parse('1 | @XS => 2', String); // the same as sample above ESLMediaRuleList.parse('1 | @XS => 2', Number); // first query from the sample above that store numeric values ESLMediaRuleList.parse('@XS => {option: 1} | @+SM => {option: 2}', ESLMediaRuleList.OBJECT_PARSER); // second query from the sample above with an object payloads ESLMediaRuleList.parse('@XS => {option: 1} | @+SM => {option: 2}', evaluate); // the same as the sample above +ESLMediaRuleList.parse('1|2|3|4|5', '@xs|@sm|@md|@lg|@xl') // parses tuple payloads // Tupple parsing ESLMediaRuleList.parseTuple('@xs|@sm|@md|@lg|@xl', '1|2|3|4|5') // String payload example ESLMediaRuleList.parseTuple('@xs|@sm|@md|@lg|@xl', '1|2|3|4|5', Number) // Numeric payload sample ``` -**Note**: Method `ESLMediaRuleList.parse` is deprecated, and will be reintroduced in ESL v5.0.0 with a different signature. For now use `ESLMediaRuleList.parseTuple` or `ESLMediaRuleList.parseQuery` instead. #### ESLMediaRuleList API -- `ESLMediaRuleList.parse(ruleset: string)` - parse media ruleset defined with classic syntax mentioned in section above. -Rules separated by `|` symbol, query and value separated by `=>` for each rule, query is optional. +- `ESLMediaRuleList.parseTuple(queries: string, values: string)` - parse media ruleset from tuple of queries and values, all separated via `|` symbol. -- `ESLMediaRuleList.parseTuple(queries: string, values: string)` - parse media ruleset from tuple of -queries and values, all separated via `|` symbol +- `ESLMediaRuleList.parseQuery(ruleset: string)` - parse media ruleset defined with syntax, where query and value are a single argument separated by `=>` for each rule. + +- `ESLMediaRuleList.parse(values: string, queries: string)` - parse media ruleset defined with tuple syntax, where query and value are separate arguments. + +- `ESLMediaRuleList.parse(ruleset: string)` - parse media ruleset defined with same syntax as `ESLMediaRuleList.parseQuery`. - `ESLMediaRuleList.prototype.rules` - array of rules that defines `ESLMediaRuleList` object - `ESLMediaRuleList.prototype.active` - array of active (matched) rules diff --git a/src/modules/esl-media-query/core/esl-media-rule-list.ts b/src/modules/esl-media-query/core/esl-media-rule-list.ts index 1831102f1..9880b6a8a 100644 --- a/src/modules/esl-media-query/core/esl-media-rule-list.ts +++ b/src/modules/esl-media-query/core/esl-media-rule-list.ts @@ -35,9 +35,7 @@ export class ESLMediaRuleList extends SyntheticEventTarget { public static OBJECT_PARSER = (val: string): U | undefined => evaluate(val); /** - * @deprecated Method will be reintroduced in v5.0.0 with a different signature. For now use ESLMediaRuleList.parseQuery instead - * - * Creates `ESLMediaRuleList` from string query representation + * Creates {@link ESLMediaRuleList} from string query representation * Expect serialized {@link ESLMediaRule}s separated by '|' * Uses exact strings as rule list values * @@ -45,9 +43,7 @@ export class ESLMediaRuleList extends SyntheticEventTarget { */ public static parse(query: string): ESLMediaRuleList; /** - * @deprecated Method will be reintroduced in v5.0.0 with a different signature. For now use ESLMediaRuleList.parseQuery instead - * - * Creates `ESLMediaRuleList` from string query representation. + * Creates {@link ESLMediaRuleList} from string query representation. * Expect serialized {@link ESLMediaRule}s separated by '|' * * @param query - query string @@ -55,26 +51,22 @@ export class ESLMediaRuleList extends SyntheticEventTarget { */ public static parse(query: string, parser: RulePayloadParser): ESLMediaRuleList; /** - * @deprecated Method will be reintroduced in v5.0.0 with a different signature. For now use ESLMediaRuleList.parseTuple instead - - * Creates `ESLMediaRuleList` from two strings with conditions and values sequences + * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * - * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) + * @param mask - media conditions tuple string (uses '|' as separator) * * @example * ```ts * ESLMediaRuleList.parse('@XS|@SM|@MD|@LG|@XL', '1|2|3|4|5') * ``` */ - public static parse(mask: string, values: string): ESLMediaRuleList; + public static parse(values: string, mask: string): ESLMediaRuleList; /** - * @deprecated Method will be reintroduced in v5.0.0 with a different signature. For now use ESLMediaRuleList.parseTuple instead - * - * Creates `ESLMediaRuleList` from two strings with conditions and values sequences + * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * - * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) + * @param mask - media conditions tuple string (uses '|' as separator) * @param parser - value parser function * * @example @@ -82,17 +74,17 @@ export class ESLMediaRuleList extends SyntheticEventTarget { * ESLMediaRuleList.parseTuple('@XS|@SM|@MD|@LG|@XL', '1|2|3|4|5', Number) * ``` */ - public static parse(mask: string, values: string, parser: RulePayloadParser): ESLMediaRuleList; + public static parse(values: string, mask: string, parser: RulePayloadParser): ESLMediaRuleList; public static parse(query: string, ...common: (string | RulePayloadParser)[]): ESLMediaRuleList { const parser: RulePayloadParser = typeof common[common.length - 1] === 'function' ? common.pop() as any : String; - const value = common.pop(); - return typeof value === 'string' ? - ESLMediaRuleList.parseTuple(query, value, parser) : + const mask = common.pop(); + return typeof mask === 'string' ? + ESLMediaRuleList.parseTuple(mask, query, parser) : ESLMediaRuleList.parseQuery(query, parser); } /** - * Creates `ESLMediaRuleList` from string query representation + * Creates {@link ESLMediaRuleList} from string query representation * Uses exact strings as rule list values * @param query - query string */ @@ -111,7 +103,7 @@ export class ESLMediaRuleList extends SyntheticEventTarget { } /** - * Creates `ESLMediaRuleList` from two strings with conditions and values sequences + * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) @@ -123,7 +115,7 @@ export class ESLMediaRuleList extends SyntheticEventTarget { */ public static parseTuple(mask: string, values: string): ESLMediaRuleList; /** - * Creates `ESLMediaRuleList` from two strings with conditions and values sequences + * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) diff --git a/src/modules/esl-media-query/test/esl-media-rule-list.test.ts b/src/modules/esl-media-query/test/esl-media-rule-list.test.ts index cce13af4d..37bbb20a5 100644 --- a/src/modules/esl-media-query/test/esl-media-rule-list.test.ts +++ b/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.parseQuery('1 | @sm => 2 | @md => 3'); + const mrl = ESLMediaRuleList.parse('1 | @sm => 2 | @md => 3'); expect(mrl.rules.length).toBe(3); mockSmMatchMedia.matches = false; @@ -57,7 +57,7 @@ describe('ESLMediaRuleList', () => { }); test('Extended media case parsed correctly: "1 | @sm or @md => 2"', () => { - const mrl = ESLMediaRuleList.parseQuery('1 | @sm or @md => 2'); + const mrl = ESLMediaRuleList.parse('1 | @sm or @md => 2'); const listener = jest.fn(); expect(mrl.rules.length).toBe(2); @@ -112,7 +112,7 @@ describe('ESLMediaRuleList', () => { describe('Basic cases:', () => { test('Single value parsed to the single "all" rule', () => { - const mrl = ESLMediaRuleList.parseQuery('123'); + const mrl = ESLMediaRuleList.parse('123'); expect(mrl.rules.length).toBe(1); expect(mrl.active.length).toBeGreaterThan(0); expect(mrl.value).toBe('123'); @@ -120,12 +120,12 @@ describe('ESLMediaRuleList', () => { }); test('Single rule with media query "@sm => 1"', () => { - const mrl = ESLMediaRuleList.parseQuery('@sm => 1'); + const mrl = ESLMediaRuleList.parse('@sm => 1'); expect(mrl.rules.length).toBe(1); }); test('Single rule "@sm => 1" response to the matcher correctly', () => { - const mrl = ESLMediaRuleList.parseQuery('@sm => 1'); + const mrl = ESLMediaRuleList.parse('@sm => 1'); mockSmMatchMedia.matches = false; expect(mrl.value).toBe(undefined); @@ -178,4 +178,34 @@ describe('ESLMediaRuleList', () => { expect(() => ESLMediaRuleList.parseTuple('@xs', '1|2|3')).toThrowError(); }); }); + + describe('Adaptive cases parsing', () => { + test('Should throw error if arrow syntax provided instead of tuple\'s mask', () => { + try { + ESLMediaRuleList.parse('(min-width: 100px) => 123', '3|4'); + } catch (e) { + expect(e.toString()).toBe('Error: Value doesn\'t correspond to mask'); + } + }); + + test('Handle tuple with equal mask/value pair as regular', () => { + const mask = '@sm|@md|@lg'; + const values = '1|2|3'; + const mrl = ESLMediaRuleList.parse(values, mask); + expect(mrl.toString()).toBe(ESLMediaRuleList.parseTuple(mask, values).toString()); + expect(mrl.toString()).toBe( + '(min-width: 768px) and (max-width: 991px) => 1|(min-width: 992px) and (max-width: 1199px) => 2|(min-width: 1200px) and (max-width: 1599px) => 3'); + }); + + + test.each([ + [['1'], 'all => 1'], + [['0 | (min-width: 100px) => 1 | (min-width: 200px) => 2'], 'all => 0|(min-width: 100px) => 1|(min-width: 200px) => 2'], + [['0 | 1', '@+xs | @+sm'], '(min-width: 1px) => 0|(min-width: 768px) => 1'], + [['1|2|3', 'all|@sm|@md'], 'all => 1|(min-width: 768px) and (max-width: 991px) => 2|(min-width: 992px) and (max-width: 1199px) => 3'], + [['1 | @+sm => 2 | @+md => 3'], 'all => 1|(min-width: 768px) => 2|(min-width: 992px) => 3'], + ])('Should correctly parse "%s" with media condition "%s"', (params: any[], canonical: string) => { + expect(ESLMediaRuleList.parse.apply(null, params).toString()).toBe(canonical); + }); + }); });