Setup eslint (ThatOpen#74)

* 🔧 added eslint in viewer folder

* 🚨 linted all files in viewer

* 👷 added github action to lint viewer/src

Author: GP4cK

.github/workflows/eslint_check.yml

@@ -0,0 +1,24 @@
+name: ESLint check
+
+on: [pull_request]
+jobs:
+  eslint:
+    name: runner / eslint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Use Node.js 14
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+          registry-url: https://npm.pkg.github.com
+          scope: "@novade"
+      - uses: actions/checkout@v2
+
+      # only install dependencies in viewer folder
+      - run: cd viewer && yarn
+      - name: eslint
+        uses: reviewdog/action-eslint@v1
+        with:
+          reporter: github-pr-review
+          workdir: "viewer"
+          eslint_flags: "src/ --ext .js,.ts"

viewer/.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb-base',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
+  rules: {
+    'lines-between-class-members': 'off',
+    'eol-last': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        ts: 'never',
+      },
+    ],
+    'import/prefer-default-export': 'off',
+    'no-plusplus': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};

viewer/package.json

@@ -33,7 +33,12 @@
   "devDependencies": {
     "@types/node": "^14.14.31",
     "@types/three": "^0.127.1",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
     "cpy-cli": "^3.1.1",
+    "eslint": "^7.28.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.23.4",
     "typescript": "^4.2.4"
   }
 }

viewer/src/IO/dropbox.ts

@@ -12,22 +12,21 @@ type dbChooserResponse = {
 };
 
 export class DropboxAPI extends Component {
-
   constructor(viewer: Viewer) {
     super(viewer);
     this.initializeAPI();
   }
 
   loadDropboxIfc() {
-    //@ts-ignore
+    // @ts-ignore
     Dropbox.choose(this.chooserOptions);
   }
 
   private onDBChooserSuccess = async (files: dbChooserResponse[]) => {
     const rawResponse = await fetch(files[0].link);
     const result = await rawResponse.text();
-    const ifcBlob = new Blob([result], {type: 'text/plain'});
-    const ifcFile = new File([ifcBlob], "ifcFile");
+    const ifcBlob = new Blob([result], { type: 'text/plain' });
+    const ifcFile = new File([ifcBlob], 'ifcFile');
     this.viewer.loadIfc(ifcFile);
   }
 
@@ -37,15 +36,15 @@ export class DropboxAPI extends Component {
     linkType: 'direct',
     multiselect: false,
     extensions: ['.ifc'],
-    folderselect: false
+    folderselect: false,
   };
 
   private onDBChooserCancel(files: dbChooserResponse[]) {
     console.log('Canceled!');
   }
 
   private initializeAPI() {
-    var script = document.createElement('script');
+    const script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'https://www.dropbox.com/static/api/2/dropins.js';
     script.id = 'dropboxjs';

viewer/src/IO/index.ts

@@ -1 +1 @@
-export * from "./dropbox"
+export * from './dropbox';

viewer/src/components/axes.ts

@@ -1,16 +1,15 @@
 import * as THREE from 'three';
-import {Viewer} from '../core';
-import { Component } from "./component";
+import { Viewer } from '../core';
+import { Component } from './component';
 
 export class Axes extends Component {
-
     axes: THREE.AxesHelper;
 
-    constructor(viewer: Viewer, size?: number){
-        super(viewer);
-        this.axes = new THREE.AxesHelper(size);
-        (this.axes.material as THREE.Material).depthTest = false;
-        this.axes.renderOrder = 2;
-        viewer.scene.add(this.axes);
+    constructor(viewer: Viewer, size?: number) {
+      super(viewer);
+      this.axes = new THREE.AxesHelper(size);
+      (this.axes.material as THREE.Material).depthTest = false;
+      this.axes.renderOrder = 2;
+      viewer.scene.add(this.axes);
     }
 }

viewer/src/components/component.ts

@@ -1,13 +1,12 @@
-import {Viewer} from '../core';
+import { Viewer } from '../core';
 
 export abstract class Component {
-
     viewer: Viewer;
 
-    protected constructor(viewer: Viewer){
-        viewer.addComponent(this);
-        this.viewer = viewer;
+    protected constructor(viewer: Viewer) {
+      viewer.addComponent(this);
+      this.viewer = viewer;
     }
 
-    update(_delta: number) { };
+    update(_delta: number) { }
 }

viewer/src/components/grid.ts

@@ -1,16 +1,15 @@
 import * as THREE from 'three';
-import { Component } from "./component";
-import {Viewer} from '../core';
+import { Component } from './component';
+import { Viewer } from '../core';
 
 export class Grid extends Component {
-
     grid: THREE.GridHelper;
 
-    constructor(viewer: Viewer, size?: number, divisions?: number, colorCenterLine?: THREE.Color, colorGrid?: THREE.Color){
-        super(viewer);
-        this.grid = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid);
-        (this.grid.material as THREE.Material).depthTest = false;
-        this.grid.renderOrder = 0;
-        viewer.scene.add(this.grid);
+    constructor(viewer: Viewer, size?: number, divisions?: number, colorCenterLine?: THREE.Color, colorGrid?: THREE.Color) {
+      super(viewer);
+      this.grid = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid);
+      (this.grid.material as THREE.Material).depthTest = false;
+      this.grid.renderOrder = 0;
+      viewer.scene.add(this.grid);
     }
 }

viewer/src/components/index.ts

@@ -1,3 +1,3 @@
-export * from "./component";
-export * from "./axes";
-export * from "./grid";
+export * from './component';
+export * from './axes';
+export * from './grid';

viewer/src/components/raycaster.ts

@@ -11,17 +11,17 @@ export class IFCRaycaster {
     this.canvas = renderer.domElement;
     this.ifcModels = ifcModels;
     this.raycaster = new THREE.Raycaster();
-    //@ts-ignore
+    // @ts-ignore
     this.raycaster.firstHitOnly = true;
   }
 
   castRay(event: any, onHit: (event: any, item: THREE.Intersection) => any ) {
     const mouse = new THREE.Vector2();
     const canvasBounds = this.canvas.getBoundingClientRect();
     mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.right - canvasBounds.left)) * 2 - 1;
-    mouse.y = -((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1; 
+    mouse.y = -((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1;
     this.raycaster.setFromCamera(mouse, this.camera);
     const result = this.raycaster.intersectObjects(this.ifcModels);
-    if(result.length > 0) return onHit(event, result[0]);
+    if (result.length > 0) return onHit(event, result[0]);
   }
 }