revert eslint package and fix most eslint rules

playcanvas · Sep 18, 2024 · e1f0aad · e1f0aad
1 parent 4022b9c
commit e1f0aad
Show file tree

Hide file tree

Showing 10 changed files with 532 additions and 486 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     }
   },
   "devDependencies": {
-    "@playcanvas/eslint-config": "^2.0.2",
+    "@playcanvas/eslint-config": "^1.7.1",
     "@playcanvas/observer": "^1.5.1",
     "@playcanvas/pcui": "^4.4.0",
     "@rollup/plugin-alias": "^5.1.0",
@@ -68,11 +68,11 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.10.0",
+    "eslint": "^8.56.0",
     "playcanvas": "^1.74.0",
     "qrious": "^4.0.2",
     "react": "^18.3.1",

diff --git a/src/cameras/multi-camera.ts b/src/cameras/multi-camera.ts
@@ -1,4 +1,5 @@
 import { Entity, Vec2, Vec3, Ray, Plane, math } from 'playcanvas';
+
 import { BaseCamera } from './base-camera';
 
 type PointerMoveEvent = PointerEvent & {

diff --git a/src/debug-lines.ts b/src/debug-lines.ts
@@ -26,6 +26,7 @@ import {
     VertexIterator,
     WebglGraphicsDevice
 } from 'playcanvas';
+
 import { App } from './app';
 
 let debugLayerFront: Layer = null;

diff --git a/src/declaration.d.ts b/src/declaration.d.ts
@@ -0,0 +1,14 @@
+declare module '*.png' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.svg' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.scss' {
+    const value: any;
+    export default value;
+}
diff --git a/src/drop-handler.ts b/src/drop-handler.ts
@@ -73,13 +73,13 @@ const CreateDropHandler = (target: HTMLElement, dropHandler: DropHandlerFunc) =>
     target.addEventListener('dragstart', (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
-        ev.dataTransfer.effectAllowed = "all";
+        ev.dataTransfer.effectAllowed = 'all';
     }, false);
 
     target.addEventListener('dragover', (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
-        ev.dataTransfer.effectAllowed = "all";
+        ev.dataTransfer.effectAllowed = 'all';
     }, false);
 
     target.addEventListener('drop', (ev) => {

diff --git a/src/png-exporter.ts b/src/png-exporter.ts
@@ -77,7 +77,7 @@ class PngExporter {
 
     // download the data uri
     _downloadFile(filename: string, data: any) {
-        const blob = new Blob([data], { type: "octet/stream" });
+        const blob = new Blob([data], { type: 'octet/stream' });
         const url = window.URL.createObjectURL(blob);
 
         const el = document.createElement('a');

diff --git a/src/projective-skybox.ts b/src/projective-skybox.ts
@@ -2,7 +2,7 @@ import {
     shaderChunks,
     AppBase,
     Vec3
-} from "playcanvas";
+} from 'playcanvas';
 
 const projectiveSkyboxVS = (shaderChunks as any).skyboxVS.replace(' * cubeMapRotationMatrix', '');
 

diff --git a/src/viewer.ts b/src/viewer.ts
@@ -1,3 +1,4 @@
+import { Observer } from '@playcanvas/observer';
 import {
     ADDRESS_CLAMP_TO_EDGE,
     BLENDMODE_ONE,
@@ -58,24 +59,19 @@ import {
 } from 'playcanvas';
 
 import { App } from './app';
-
-import { Observer } from '@playcanvas/observer';
-import { MeshoptDecoder } from '../lib/meshopt_decoder.module.js';
-import { CreateDropHandler } from './drop-handler';
-import { MorphTargetData, File, HierarchyNode } from './types';
+import { MultiCamera } from './cameras/multi-camera';
 import { DebugLines } from './debug-lines';
+import { CreateDropHandler } from './drop-handler';
 import { Multiframe } from './multiframe';
-import { ReadDepth } from './read-depth';
-import { MultiCamera } from './cameras/multi-camera';
 import { PngExporter } from './png-exporter';
 import { ProjectiveSkybox } from './projective-skybox';
+import { ReadDepth } from './read-depth';
 import { ShadowCatcher } from './shadow-catcher';
-import { XRObjectPlacementController } from './xr-mode';
-
-// @ts-ignore
-import arModeImage from './svg/ar-mode.svg';
-// @ts-ignore
 import arCloseImage from './svg/ar-close.svg';
+import arModeImage from './svg/ar-mode.svg';
+import { File, HierarchyNode, MorphTargetData } from './types';
+import { XRObjectPlacementController } from './xr-mode';
+import { MeshoptDecoder } from '../lib/meshopt_decoder.module.js';
 
 // model filename extensions
 const modelExtensions = ['gltf', 'glb', 'vox'];
@@ -671,7 +667,7 @@ class Viewer {
                 for (let i = 0; i < names.length; ++i) {
                     const nameList = names[i];
                     for (let j = 0; j < nameList.length; ++j) {
-                        if (fn.indexOf(nameList[j] + '.') !== -1) {
+                        if (fn.indexOf(`${nameList[j]}.`) !== -1) {
                             return j;
                         }
                     }
@@ -689,7 +685,7 @@ class Viewer {
 
             // construct an asset for each cubemap face
             const faceAssets = files.map((file, index) => {
-                const faceAsset = new Asset('skybox_face' + index, 'texture', file);
+                const faceAsset = new Asset(`skybox_face${index}`, 'texture', file);
                 app.assets.add(faceAsset);
                 app.assets.load(faceAsset);
                 return faceAsset;
@@ -1030,7 +1026,7 @@ class Viewer {
 
             const processImage = function (gltfImage: any, continuation: (err: string, result: any) => void) {
                 const u: File = externalUrls.find((url) => {
-                    return url.filename === decodeURIComponent(path.normalize(gltfImage.uri || ''))
+                    return url.filename === decodeURIComponent(path.normalize(gltfImage.uri || ''));
                 });
                 if (u) {
                     const textureAsset = new Asset(u.filename, 'texture', {
@@ -1054,7 +1050,7 @@ class Viewer {
 
             const processBuffer = function (gltfBuffer: any, continuation: (err: string, result: any) => void) {
                 const u = externalUrls.find((url) => {
-                    return url.filename === decodeURIComponent(path.normalize(gltfBuffer.uri || ''))
+                    return url.filename === decodeURIComponent(path.normalize(gltfBuffer.uri || ''));
                 });
                 if (u) {
                     const bufferAsset = new Asset(u.filename, 'binary', {
@@ -1620,7 +1616,7 @@ class Viewer {
                 morphInstances[i] = morphInstance;
 
                 // mesh name line
-                const meshName = (meshInstance && meshInstance.node && meshInstance.node.name) || 'Mesh ' + i;
+                const meshName = (meshInstance && meshInstance.node && meshInstance.node.name) || `Mesh ${i}`;
                 morphs[i] = {
                     name: meshName,
                     targets: {}
@@ -1703,11 +1699,12 @@ class Viewer {
                     {
                         name: 'transition',
                         time: t.duration,
-                        nextTrack: 'track_' + (i === this.animTracks.length - 1 ? 0 : i + 1)
+                        nextTrack: `track_${i === this.animTracks.length - 1 ? 0 : i + 1}`
                     }
                 ]);
-                entity.anim.assignAnimation('track_' + i, t);
-                this.animationMap[t.name] = 'track_' + i;
+                const path = `track_${i}`;
+                entity.anim.assignAnimation(path, t);
+                this.animationMap[t.name] = path;
             });
             // if the user has selected to play all tracks in succession, then transition to the next track after a set amount of loops
             entity.anim.on('transition', (e) => {

diff --git a/src/xr-mode.ts b/src/xr-mode.ts
@@ -129,7 +129,7 @@ class XRObjectPlacementController {
         };
 
         // handle xr mode availability change
-        xr.on('available:' + XRTYPE_AR, (available: boolean) => {
+        xr.on(`available: ${XRTYPE_AR}`, (available: boolean) => {
             this.events.fire('xr:available', available);
         });