Scheduler: Add Eslint rules according to codestyle (#30853)

Author: sjbur

packages/devextreme/eslint.config.mjs

@@ -12,6 +12,8 @@ import importPlugin from 'eslint-plugin-import';
 import globals from 'globals';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import { changeRulesToStylistic } from 'eslint-migration-utils';
+import unicorn from 'eslint-plugin-unicorn';
+import customRules from './eslint_plugins/index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -47,6 +49,8 @@ export default [
         plugins: {
             'no-only-tests': noOnlyTests,
             i18n: i18N,
+            unicorn,
+            'devextreme-custom': customRules,
         },
         settings: {
             'import/resolver': {
@@ -520,6 +524,51 @@ export default [
             '@typescript-eslint/prefer-for-of': 'warn',
         },
     },
+    // Rules for scheduler
+    {
+        files: ['js/__internal/scheduler/**/*.ts?(x)'],
+        languageOptions: {
+            parser: tsParser,
+            ecmaVersion: 5,
+            sourceType: 'script',
+            parserOptions: {
+                project: './tsconfig.json',
+                tsconfigRootDir: `${__dirname}/js/__internal`,
+            },
+        },
+        rules: {
+            'no-implicit-coercion': ['error'],
+            'no-extra-boolean-cast': 'error',
+            'unicorn/filename-case': ['error', { case: 'snakeCase' }],
+            '@typescript-eslint/naming-convention': [
+                'error',
+                {
+                    selector: ['variable', 'function', 'parameter'],
+                    format: null,
+                    leadingUnderscore: 'forbid',
+                    // allow only a single underscore identifier `_` to bypass this rule
+                    filter: {
+                        regex: '^_$',
+                        match: false,
+                    },
+                },
+                {
+                    selector: 'memberLike',
+                    format: null,
+                    leadingUnderscore: 'allow',
+                },
+            ],
+            'devextreme-custom/no-deferred': 'error',
+            'devextreme-custom/prefer-switch-true': ['error', { minBranches: 3 }],
+        },
+    },
+    // Allow Deferred in m_* scheduler files only
+    {
+        files: ['js/__internal/scheduler/**/m_*.ts?(x)'],
+        rules: {
+            'devextreme-custom/no-deferred': 'off',
+        },
+    },
     // Rules for grid controls
     {
         files: [

packages/devextreme/eslint_plugins/index.js

@@ -0,0 +1,9 @@
+const preferSwitchTrue = require('./prefer_switch_true');
+const noDeferred = require('./no_deferred');
+
+module.exports = {
+    rules: {
+        'prefer-switch-true': preferSwitchTrue,
+        'no-deferred': noDeferred,
+    },
+};

packages/devextreme/eslint_plugins/no_deferred.js

@@ -0,0 +1,47 @@
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow Deferred in favor of native Promise',
+            recommended: false,
+        },
+        messages: {
+            noDeferred: 'Use native Promise instead of Deferred.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            ImportDeclaration(node) {
+                const source = node.source && node.source.value;
+                if(typeof source !== 'string') return;
+                const specs = node.specifiers || [];
+                for(let i = 0; i < specs.length; i += 1) {
+                    const spec = specs[i];
+                    if(spec.imported && spec.imported.name === 'Deferred') {
+                        context.report({ node: spec, messageId: 'noDeferred' });
+                    }
+                }
+            },
+            Identifier(node) {
+                if(node.name === 'Deferred') {
+                    context.report({ node, messageId: 'noDeferred' });
+                }
+            },
+            NewExpression(node) {
+                // eslint-disable-next-line spellcheck/spell-checker
+                if(node.callee && node.callee.name === 'Deferred') {
+                    context.report({ node, messageId: 'noDeferred' });
+                }
+            },
+            MemberExpression(node) {
+                // e.g., $.Deferred()
+                if(node.property && node.property.type === 'Identifier' && node.property.name === 'Deferred') {
+                    context.report({ node, messageId: 'noDeferred' });
+                }
+            },
+        };
+    },
+};
+
+

packages/devextreme/eslint_plugins/prefer_switch_true.js

@@ -0,0 +1,51 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Prefer switch(true) over long if/else chains',
+            recommended: false,
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    minBranches: { type: 'integer', minimum: 2 },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            preferSwitchTrue: 'Prefer switch(true) over this if/else chain.',
+        },
+    },
+    create(context) {
+        const options = context.options && context.options[0] || {};
+        const minBranches = Math.max(2, options.minBranches || 3); // total conditional branches (if + else-if's)
+
+        function countChainBranches(ifNode) {
+            let branches = 1; // start with initial if
+            let current = ifNode.alternate;
+            while(current && current.type === 'IfStatement') {
+                branches += 1;
+                current = current.alternate;
+            }
+            return branches;
+        }
+
+        return {
+            IfStatement(node) {
+                // Only evaluate at the head of the chain (parent isn't an else-if)
+                const parent = node.parent;
+                const isElseIf = parent && parent.type === 'IfStatement' && parent.alternate === node;
+                if(isElseIf) return;
+
+                const branches = countChainBranches(node);
+                if(branches >= minBranches) {
+                    context.report({ node, messageId: 'preferSwitchTrue' });
+                }
+            },
+        };
+    },
+};
+
+

…heduler/__mock__/resourceManager.mock.ts …eduler/__mock__/resource_manager.mock.tspackages/devextreme/js/__internal/scheduler/__mock__/resourceManager.mock.ts renamed to packages/devextreme/js/__internal/scheduler/__mock__/resource_manager.mock.ts packages/devextreme/js/__internal/scheduler/__mock__/resourceManager.mock.ts renamed to packages/devextreme/js/__internal/scheduler/__mock__/resource_manager.mock.ts

@@ -2,7 +2,7 @@ import {
   describe, expect, it, jest,
 } from '@jest/globals';
 
-import { getResourceManagerMock } from '../__mock__/resourceManager.mock';
+import { getResourceManagerMock } from '../__mock__/resource_manager.mock';
 import SchedulerTimelineDay from '../workspaces/m_timeline_day';
 import SchedulerTimelineMonth from '../workspaces/m_timeline_month';
 import SchedulerTimelineWeek from '../workspaces/m_timeline_week';

packages/devextreme/js/__internal/scheduler/__tests__/workspace.base.test.ts

@@ -49,8 +49,8 @@ const getStylingModeFunc = (): string | undefined => (isFluent(current()) ? 'fil
 const getStartDateWithStartHour = (startDate, startDayHour) => new Date(new Date(startDate).setHours(startDayHour));
 
 const validateAppointmentFormDate = (editor, value, previousValue) => {
-  const isCurrentDateCorrect = value === null || !!value;
-  const isPreviousDateCorrect = previousValue === null || !!previousValue;
+  const isCurrentDateCorrect = value === null || Boolean(value);
+  const isPreviousDateCorrect = previousValue === null || Boolean(previousValue);
   if (!isCurrentDateCorrect && isPreviousDateCorrect) {
     editor.option('value', previousValue);
   }

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -161,7 +161,7 @@ export class AppointmentPopup {
     return {
       ...rawAppointment,
       ...rawAppointmentGroupValues,
-      repeat: !!appointment.recurrenceRule,
+      repeat: Boolean(appointment.recurrenceRule),
     };
   }
 
@@ -251,7 +251,7 @@ export class AppointmentPopup {
       const clonedAdapter = adapter
         .clone()
         .calculateDates(this.scheduler.getTimeZoneCalculator(), 'fromAppointment');
-      const shouldClearRecurrenceRule = !repeat && !!clonedAdapter.recurrenceRule;
+      const shouldClearRecurrenceRule = !repeat && Boolean(clonedAdapter.recurrenceRule);
 
       this._addMissingDSTTime(adapter, clonedAdapter);
 

packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts

@@ -260,11 +260,11 @@ export class Appointment extends DOMComponent<AppointmentProperties> {
   }
 
   _renderAllDayClass() {
-    (this.$element() as any).toggleClass(ALL_DAY_APPOINTMENT_CLASS, !!this.option('allDay'));
+    (this.$element() as any).toggleClass(ALL_DAY_APPOINTMENT_CLASS, Boolean(this.option('allDay')));
   }
 
   _renderDragSourceClass() {
-    (this.$element() as any).toggleClass(APPOINTMENT_DRAG_SOURCE_CLASS, !!this.option('isDragSource'));
+    (this.$element() as any).toggleClass(APPOINTMENT_DRAG_SOURCE_CLASS, Boolean(this.option('isDragSource')));
   }
 
   _renderRecurrenceClass() {

packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts

@@ -50,7 +50,6 @@ export const createAgendaAppointmentLayout = (formatText, config) => {
     .addClass('dx-scheduler-agenda-appointment-right-layout')
     .appendTo(result);
 
-  // eslint-disable-next-line no-unused-vars
   const marker = $('<div>')
     .addClass(APPOINTMENT_CONTENT_CLASSES.AGENDA_MARKER)
     .appendTo(leftLayoutContainer);