Client code refactoring (cvat-ai#7208)

.eslintrc.js → .eslintrc.cjs

@@ -1,4 +1,5 @@
 // Copyright (C) 2018-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -14,9 +15,10 @@ module.exports = {
         parser: '@typescript-eslint/parser',
     },
     ignorePatterns: [
-        '.eslintrc.js',
+        '.eslintrc.cjs',
         'lint-staged.config.js',
         'site/themes/**',
+        'webpack.config.cjs',
     ],
     plugins: ['@typescript-eslint', 'security', 'no-unsanitized', 'import'],
     extends: [
@@ -53,6 +55,10 @@ module.exports = {
         'import/order': ['error', {'groups': ['builtin', 'external', 'internal']}],
         'import/prefer-default-export': 0, // works incorrect with interfaces
 
+        'react/jsx-indent-props': 0, // new rule, breaks current styling
+        'react/jsx-indent': 0, // new rule, conflicts with eslint@typescript-eslint/indent eslint@indent, breaks current styling
+        'function-paren-newline': 0, // new rule, breaks current styling
+        '@typescript-eslint/default-param-last': 0, // does not really work with redux reducers
         '@typescript-eslint/ban-ts-comment': 0,
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/indent': ['error', 4],

.vscode/launch.json

@@ -519,7 +519,7 @@
             "program": "${workspaceFolder}/node_modules/.bin/jest",
             "args": [
                 "--config",
-                "${workspaceFolder}/cvat-core/jest.config.js"
+                "${workspaceFolder}/cvat-core/jest.config.cjs"
             ],
             "console": "integratedTerminal",
             "internalConsoleOptions": "neverOpen",

cvat-canvas/.eslintrc.js → cvat-canvas/.eslintrc.cjs

@@ -7,7 +7,7 @@ const { join } = require('path');
 
 module.exports = {
     ignorePatterns: [
-        '.eslintrc.js',
+        '.eslintrc.cjs',
         'webpack.config.js',
         'node_modules/**',
         'dist/**',

cvat-canvas/package.json

@@ -1,16 +1,17 @@
 {
   "name": "cvat-canvas",
   "version": "2.19.0",
+  "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {
-    "build": "tsc && webpack --config ./webpack.config.js"
+    "build": "tsc && webpack --config ./webpack.config.cjs"
   },
   "author": "CVAT.ai",
   "license": "MIT",
   "browserslist": [
     "Chrome >= 63",
-    "Firefox > 58",
+    "Firefox > 102",
     "not IE 11",
     "> 2%"
   ],

cvat-canvas/src/typescript/canvasView.ts

@@ -108,7 +108,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 },
             }),
         );
-    }
+    };
 
     private onError = (exception: unknown, domain?: string): void => {
         this.canvas.dispatchEvent(
@@ -122,7 +122,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 },
             }),
         );
-    }
+    };
 
     private stateIsLocked(state: any): boolean {
         const { configuration } = this.controller;
@@ -267,7 +267,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 enabled: false,
             });
         }
-    }
+    };
 
     private onDrawDone = (
         data: any | null,
@@ -337,7 +337,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             // when draw stops from inside canvas (for example if use predefined number of points)
             this.controller.draw({ enabled: false });
         }
-    }
+    };
 
     private onEditStart = (state?: any): void => {
         this.canvas.style.cursor = 'crosshair';
@@ -411,7 +411,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.controller.merge({ enabled: false });
         this.mode = Mode.IDLE;
-    }
+    };
 
     private onSplitDone = (object?: any, duration?: number): void => {
         if (object && typeof duration !== 'undefined') {
@@ -437,7 +437,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.controller.split({ enabled: false });
         this.mode = Mode.IDLE;
-    }
+    };
 
     private onSelectDone = (objects?: any[], duration?: number): void => {
         if (objects && typeof duration !== 'undefined') {
@@ -503,7 +503,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
 
         this.mode = Mode.IDLE;
-    }
+    };
 
     private onSliceDone = (state?: any, results?: number[][], duration?: number): void => {
         if (state && results && typeof duration !== 'undefined') {
@@ -527,7 +527,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.controller.slice({ enabled: false });
         this.mode = Mode.IDLE;
-    }
+    };
 
     private onRegionSelected = (points?: number[]): void => {
         if (points) {
@@ -551,7 +551,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.controller.selectRegion(false);
         this.mode = Mode.IDLE;
-    }
+    };
 
     private onFindObject = (e: MouseEvent): void => {
         if (e.button === 0) {
@@ -570,7 +570,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.canvas.dispatchEvent(event);
             e.preventDefault();
         }
-    }
+    };
 
     private onFocusRegion = (x: number, y: number, width: number, height: number): void => {
         // First of all, compute and apply scale
@@ -616,7 +616,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.controller.geometry = dragged;
         this.geometry = dragged;
         this.moveCanvas();
-    }
+    };
 
     private moveCanvas(): void {
         for (const obj of [this.background, this.grid, this.bitmap]) {

cvat-canvas/src/typescript/sliceHandler.ts

@@ -294,6 +294,7 @@ export class SliceHandlerImpl implements SliceHandler {
                 const d2 = Math.sqrt((p2[0] - p[0]) ** 2 + (p2[1] - p[1]) ** 2);
 
                 if (d2 > d1) {
+                    // @ts-ignore error TS2551 (need to update typescript up to 5.2)
                     contour2.push(...otherPoints.toReversed().flat());
                 } else {
                     contour2.push(...otherPoints.flat());
@@ -311,6 +312,7 @@ export class SliceHandlerImpl implements SliceHandler {
                     ...firstSegmentPoint, // first intersection
                     // intermediate points (reversed if intersections order was swopped)
                     ...(firstSegmentIdx === firstIntersectedSegmentIdx ?
+                        // @ts-ignore error TS2551 (need to update typescript up to 5.2)
                         intermediatePoints : intermediatePoints.toReversed()
                     ).flat(),
                     // second intersection
@@ -324,6 +326,7 @@ export class SliceHandlerImpl implements SliceHandler {
                     ...firstSegmentPoint, // first intersection
                     // intermediate points (reversed if intersections order was swopped)
                     ...(firstSegmentIdx === firstIntersectedSegmentIdx ?
+                        // @ts-ignore error TS2551 (need to update typescript up to 5.2)
                         intermediatePoints : intermediatePoints.toReversed()
                     ).flat(),
                     ...secondSegmentPoint,
@@ -356,6 +359,7 @@ export class SliceHandlerImpl implements SliceHandler {
                 drawOverOffscreenCanvas(context, shape as any as SVGImageElement);
                 applyOffscreenCanvasMask(context, polygon1);
                 const firstShape = zipChannels(context.getImageData(0, 0, width, height).data);
+                // @ts-ignore error TS2339 https://github.com/microsoft/TypeScript/issues/55162
                 context.reset();
                 drawOverOffscreenCanvas(context, shape as any as SVGImageElement);
                 applyOffscreenCanvasMask(context, polygon2);

cvat-canvas/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

cvat-canvas/webpack.config.js → cvat-canvas/webpack.config.cjs

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 

cvat-canvas3d/.eslintrc.js → cvat-canvas3d/.eslintrc.cjs

@@ -1,4 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -8,7 +9,7 @@ module.exports = {
         tsconfigRootDir: __dirname,
     },
     ignorePatterns: [
-        '.eslintrc.js',
+        '.eslintrc.cjs',
         'webpack.config.js',
         'node_modules/**',
         'dist/**',

cvat-canvas3d/package.json

@@ -1,16 +1,17 @@
 {
   "name": "cvat-canvas3d",
   "version": "0.0.10",
+  "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas3D library",
   "main": "src/canvas3d.ts",
   "scripts": {
-    "build": "tsc && webpack --config ./webpack.config.js"
+    "build": "tsc && webpack --config ./webpack.config.cjs"
   },
   "author": "CVAT.ai",
   "license": "MIT",
   "browserslist": [
     "Chrome >= 63",
-    "Firefox > 58",
+    "Firefox > 102",
     "not IE 11",
     "> 2%"
   ],

cvat-canvas3d/src/typescript/canvas3dView.ts

@@ -745,7 +745,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         if (![Mode.DRAG_CANVAS, Mode.IDLE].includes(this.mode)) return;
         this.isPerspectiveBeingDragged = true;
         this.enablePerspectiveDragging();
-    }
+    };
 
     private startAction(view: any, event: MouseEvent): void {
         const { clientID } = this.model.data.activeElement;

cvat-canvas3d/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

cvat-canvas3d/webpack.config.js → cvat-canvas3d/webpack.config.cjs

@@ -1,4 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 

cvat-core/.eslintrc.js → cvat-core/.eslintrc.cjs

@@ -1,16 +1,16 @@
 // Copyright (C) 2018-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 module.exports = {
     ignorePatterns: [
-        '.eslintrc.js',
-        'webpack.config.js',
-        'jest.config.js',
-        'src/3rdparty/**',
+        '.eslintrc.cjs',
+        'webpack.config.cjs',
+        'jest.config.cjs',
         'node_modules/**',
         'dist/**',
-        'tests/**/*.js',
+        'tests/**/*.cjs',
     ],
     parserOptions: {
         project: './tsconfig.json',

cvat-core/README.md

@@ -18,7 +18,7 @@ If you make changes in this package, please do following:
 - Dependencies installation
 
 ```bash
-yarn ci --frozen-lockfile
+yarn install --frozen-lockfile
 ```
 
 - Building the module from sources in the `dist` directory:

cvat-core/babel.config.json

@@ -0,0 +1,16 @@
+{
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": "current"
+          }
+        }
+      ],
+      "@babel/preset-typescript"
+    ],
+    "plugins": [
+        "babel-plugin-transform-import-meta"
+    ]
+}

cvat-core/jest.config.js → cvat-core/jest.config.cjs

@@ -1,24 +1,17 @@
 // Copyright (C) 2019-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 const { defaults } = require('jest-config');
 
 module.exports = {
     testEnvironment: 'jsdom',
-    preset: 'ts-jest',
     coverageDirectory: 'reports/coverage',
     coverageReporters: ['json', ['lcov', { projectRoot: '../' }]],
     moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
     reporters: ['default', ['jest-junit', { outputDirectory: 'reports/junit' }]],
-    testMatch: ['**/tests/**/*.js'],
+    testMatch: ['**/tests/**/*.cjs'],
     testPathIgnorePatterns: ['/node_modules/', '/tests/mocks/*'],
     automock: false,
-    transform: {
-        '^.+\\.ts?$': [
-          'ts-jest',
-          { tsconfig: './tsconfig.json', diagnostics: false, },
-        ],
-    },
-
 };

cvat-core/package.json

@@ -1,28 +1,31 @@
 {
   "name": "cvat-core",
-  "version": "12.1.1",
+  "version": "12.2.0",
+  "type": "module",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "src/api.ts",
   "scripts": {
     "build": "webpack",
-    "test": "jest --config=jest.config.js --coverage",
+    "test": "jest --config=jest.config.cjs --coverage",
     "type-check": "tsc --noEmit",
     "type-check:watch": "yarn run type-check --watch"
   },
   "author": "CVAT.ai",
   "license": "MIT",
   "browserslist": [
     "Chrome >= 63",
-    "Firefox > 58",
+    "Firefox > 102",
     "not IE 11",
     "> 2%"
   ],
   "devDependencies": {
+    "@babel/preset-typescript": "^7.23.3",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "jest": "^29.5.0",
     "jest-config": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-junit": "^6.4.0",
-    "ts-jest": "^29.1.0"
+    "jest-junit": "^6.4.0"
   },
   "dependencies": {
     "@types/lodash": "^4.14.191",