Merge pull request #2657 from jasongrout/eslint

Move to ESLint and Prettier

Author: vidartf

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/interface-name-prefix": [
+      "error", { "prefixWithI": "always" }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn", { "args": "none" }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": "off"
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"]
+}

.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Lint
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js 10.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+    - name: Get yarn cache
+      id: yarn-cache
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+    - uses: actions/cache@v1
+      with:
+        path: ${{ steps.yarn-cache.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+    - name: yarn install, build, integrity, test
+      run: |
+        yarn install --frozen-lockfile
+        yarn run build
+        yarn run integrity
+        yarn run eslint:check

.github/workflows/testjs.yml

@@ -24,9 +24,9 @@ jobs:
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-yarn-
-    - name: yarn install, build, integrity, test
+    - name: yarn install, build, test
       run: |
-        yarn install
+        yarn install --frozen-lockfile
         yarn run build
         yarn run build:examples
         yarn run integrity

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

examples/web3/package.json

@@ -10,7 +10,6 @@
     "build": "npm run clean && tsc && node scripts/copyfiles.js && webpack",
     "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo && rimraf built",
     "host": "http-server",
-    "lint": "tslint --project tslint.json --format stylish",
     "test": "npm run test:default",
     "test:default": "echo \"No test specified\""
   },
@@ -36,7 +35,6 @@
     "postcss-loader": "^3.0.0",
     "rimraf": "^2.6.1",
     "style-loader": "^1.1.2",
-    "tslint": "^5.20.1",
     "typescript": "~3.7.4",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.5"

examples/web3/src/index.ts

@@ -10,22 +10,22 @@ import {
     KernelManager, ServerConnection, KernelMessage
 } from '@jupyterlab/services';
 
-let BASEURL = prompt('Notebook BASEURL', 'http://localhost:8888');
-let WSURL = 'ws:' + BASEURL.split(':').slice(1).join(':');
+const BASEURL = prompt('Notebook BASEURL', 'http://localhost:8888');
+const WSURL = 'ws:' + BASEURL.split(':').slice(1).join(':');
 
 document.addEventListener('DOMContentLoaded', async function(event) {
 
     // Connect to the notebook webserver.
-    let connectionInfo = ServerConnection.makeSettings({
+    const connectionInfo = ServerConnection.makeSettings({
         baseUrl: BASEURL,
         wsUrl: WSURL
     });
-    let kernelManager = new KernelManager({serverSettings: connectionInfo});
-    let kernel = await kernelManager.startNew();
+    const kernelManager = new KernelManager({serverSettings: connectionInfo});
+    const kernel = await kernelManager.startNew();
 
     // Create a codemirror instance
-    let code = require('../widget_code.json').join('\n');
-    let inputarea = document.getElementsByClassName('inputarea')[0] as HTMLElement;
+    const code = require('../widget_code.json').join('\n');
+    const inputarea = document.getElementsByClassName('inputarea')[0] as HTMLElement;
     CodeMirror(inputarea, {
         value: code,
         mode: 'python',
@@ -36,18 +36,18 @@ document.addEventListener('DOMContentLoaded', async function(event) {
     });
 
     // Create the widget area and widget manager
-    let widgetarea = document.getElementsByClassName('widgetarea')[0] as HTMLElement;
-    let manager = new WidgetManager(kernel, widgetarea);
+    const widgetarea = document.getElementsByClassName('widgetarea')[0] as HTMLElement;
+    const manager = new WidgetManager(kernel, widgetarea);
 
     // Run backend code to create the widgets.  You could also create the
     // widgets in the frontend, like the other widget examples demonstrate.
-    let execution = kernel.requestExecute({ code: code });
-    execution.onIOPub = (msg) => {
+    const execution = kernel.requestExecute({ code: code });
+    execution.onIOPub = (msg): void => {
         // If we have a display message, display the widget.
         if (KernelMessage.isDisplayDataMsg(msg)) {
-            let widgetData: any = msg.content.data['application/vnd.jupyter.widget-view+json'];
+            const widgetData: any = msg.content.data['application/vnd.jupyter.widget-view+json'];
             if (widgetData !== undefined && widgetData.version_major === 2) {
-                let model = manager.get_model(widgetData.model_id);
+                const model = manager.get_model(widgetData.model_id);
                 if (model !== undefined) {
                     model.then(model => {
                         manager.display_model(msg, model);

examples/web3/src/manager.ts

@@ -20,26 +20,27 @@ class WidgetManager extends HTMLManager {
         this.el = el;
 
         kernel.registerCommTarget(this.comm_target_name, async (comm, msg) => {
-            let oldComm = new base.shims.services.Comm(comm);
+            const oldComm = new base.shims.services.Comm(comm);
             await this.handle_comm_open(oldComm, msg);
         });
     }
 
-    display_view(msg: any, view: DOMWidgetView, options: any) {
+    display_view(msg: any, view: DOMWidgetView, options: any): Promise<HTMLElement> {
         return Promise.resolve(view).then((view) => {
             pWidget.Widget.attach(view.pWidget, this.el);
             view.on('remove', function() {
                 console.log('view removed', view);
             });
-            return view;
+            // We will resolve this lie in another PR.
+            return view as any;
         });
     }
 
     /**
      * Create a comm.
      */
     async _create_comm(target_name: string, model_id: string, data?: any, metadata?: any): Promise<base.shims.services.Comm> {
-            let comm = this.kernel.createComm(target_name, model_id);
+            const comm = this.kernel.createComm(target_name, model_id);
             if (data || metadata) {
                 comm.open(data, metadata);
             }

examples/web3/tslint.json

@@ -10,13 +10,27 @@
     "build:examples": "lerna run build --scope \"@jupyter-widgets/example-*\" --include-filtered-dependencies",
     "clean": "lerna run clean",
     "integrity": "node scripts/package-integrity.js",
+    "eslint": "eslint . --fix --ignore-path .gitignore --ext .ts,.tsx",
+    "eslint:check": "eslint . --ignore-path .gitignore --ext .ts,.tsx",
     "lint": "lerna run lint",
+    "integrity2": "node buildutils/lib/integrity.js",
+    "lint2": "yarn && yarn run prettier && yarn run eslint",
+    "lint:check": "yarn run prettier:check && yarn run eslint:check",
+    "prettier": "prettier --ignore-path .gitignore --write '**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}'",
+    "prettier:check": "prettier --ignore-path .gitignore --check '**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}'",
+    "sort-package-json": "lerna exec --parallel sort-package-json && sort-package-json",
     "publish": "yarn run clean && yarn run build && lerna publish -m \"Publish npm packages\"",
     "update-dependency": "update-dependency --lerna",
     "updated": "lerna updated"
   },
   "devDependencies": {
     "@jupyterlab/buildutils": "^2.0.0-beta.2",
-    "lerna": "^3.2.1"
+    "@typescript-eslint/eslint-plugin": "^2.14.0",
+    "@typescript-eslint/parser": "^2.14.0",
+    "eslint": "^6.5.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "lerna": "^3.20.2",
+    "prettier": "^1.19.1",
+    "sort-package-json": "~1.35"
   }
 }

package.json

@@ -21,7 +21,6 @@
     "build:test": "tsc --project test && webpack --config test/webpack.conf.js",
     "clean": "npm run clean:src",
     "clean:src": "rimraf lib && rimraf tsconfig.tsbuildinfo",
-    "lint": "tslint --project tslint.json --format stylish",
     "prepublish": "npm run clean && npm run build",
     "test": "npm run test:unit",
     "test:coverage": "npm run build:test && webpack --config test/webpack-cov.conf.js && karma start test/karma-cov.conf.js",
@@ -69,7 +68,6 @@
     "rimraf": "^2.6.1",
     "sinon": "^7.3.2",
     "sinon-chai": "^3.3.0",
-    "tslint": "^5.20.1",
     "typescript": "~3.7.4",
     "webpack": "^4.41.5"
   }

packages/base/package.json

@@ -43,7 +43,7 @@ import * as utils from './utils';
 // anyone who needs to know about the change in state. The heart of the beast.
 // This *MUST* be called with the model as the `this` context.
 export
-function set(key: string|{}, val: any, options: any) {
+function set(key: string|{}, val: any, options: any): any {
     /* tslint:disable:no-invalid-this */
     if (key == null) {
         return this;
@@ -66,10 +66,10 @@ function set(key: string|{}, val: any, options: any) {
     }
 
     // Extract attributes and options.
-    let unset      = options.unset;
-    let silent     = options.silent;
-    let changes    = [];
-    let changing   = this._changing;
+    const unset      = options.unset;
+    const silent     = options.silent;
+    const changes    = [];
+    const changing   = this._changing;
     this._changing = true;
 
     if (!changing) {
@@ -78,12 +78,12 @@ function set(key: string|{}, val: any, options: any) {
         this.changed = {};
     }
 
-    let current = this.attributes;
-    let changed = this.changed;
-    let prev    = this._previousAttributes;
+    const current = this.attributes;
+    const changed = this.changed;
+    const prev    = this._previousAttributes;
 
     // For each `set` attribute, update or delete the current value.
-    for (let attr in attrs) {
+    for (const attr in attrs) {
         val = attrs[attr];
         // EDIT: the following two lines use our isEqual instead of _.isEqual
         if (!utils.isEqual(current[attr], val)) {