Refactors for linting and typescripting (#74)

.eslintrc.js

@@ -1,17 +1,43 @@
 module.exports = {
-  extends: ['react-app', 'plugin:prettier/recommended'],
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+  ],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
   settings: {
     react: {
       version: 'detect',
     },
   },
   rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/no-unsafe-member-access': 0,
+    '@typescript-eslint/no-unsafe-argument': 0,
+    '@typescript-eslint/no-unsafe-assignment': 0,
+    '@typescript-eslint/no-unsafe-return': 0,
+    '@typescript-eslint/no-unsafe-call': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/require-await': 0,
     '@typescript-eslint/no-unused-vars': [
       'warn',
-      {
-        args: 'after-used',
-        ignoreRestSiblings: true,
-      },
+      { argsIgnorePattern: '^_', ignoreRestSiblings: true },
     ],
   },
 }

.github/workflows/main.yml

@@ -4,14 +4,14 @@ on: push
 
 jobs:
   test:
-    name: Test on node 14.x and ubuntu-latest
+    name: Test on node 20.x and ubuntu-latest
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 20.x
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - name: Get latest JBrowse

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

jest.setup.ts

@@ -1 +1,16 @@
 import '@testing-library/jest-dom'
+//setupTests.tsx
+const nodeCrypto = require('crypto')
+// @ts-expect-error
+window.crypto = {
+  getRandomValues: function (buffer) {
+    return nodeCrypto.randomFillSync(buffer)
+  },
+}
+const { TextEncoder, TextDecoder } = require('web-encoding')
+if (!global.TextEncoder) {
+  global.TextEncoder = TextEncoder
+}
+if (!global.TextDecoder) {
+  global.TextDecoder = TextDecoder
+}

package.json

@@ -43,6 +43,7 @@
     "start:server": "serve --cors --listen $npm_package_config_port .",
     "prebuild": "npm-run-all clean",
     "build": "rollup --config",
+    "postbuild": "cp distconfig.json dist/config.json",
     "browse": "npm-run-all jbrowse:*",
     "jbrowse:configure": "shx cp jbrowse_config.json .jbrowse/config.json",
     "jbrowse:serve": "cross-var serve --listen $npm_package_config_browse_port .jbrowse",
@@ -52,29 +53,20 @@
     "cypress:open": "cross-var cypress open --config baseUrl=http://localhost:$npm_package_config_browse_port",
     "lint": "eslint --ext .js,.ts,.jsx,.tsx src/",
     "prepublishOnly": "npm-run-all test",
-    "prepare": "npm-run-all build",
+    "prepack": "npm-run-all build",
     "postversion": "git push --follow-tags"
   },
   "jbrowse-plugin": {
     "name": "GDC"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "all"
-  },
   "dependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^5.0.1",
-    "local-cors-proxy": "^1.1.0",
     "pako": "^2.0.3",
-    "react-dropzone": "^11.3.2",
-    "regenerator-runtime": "^0.13.9",
-    "tslib": "^2.3.1",
-    "uuid": "^7.0.1"
+    "react-dropzone": "^14.2.3",
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.3"
+    "@jbrowse/core": "^2.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -83,60 +75,55 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@gmod/bgzf-filehandle": "^1.4.0",
-    "@jbrowse/cli": "^1.5.1",
+    "@jbrowse/cli": "^2.9.0",
     "@jbrowse/core": "^2.1.5",
-    "@jbrowse/development-tools": "^1.5.3",
-    "@jbrowse/plugin-data-management": "^2.1.5",
-    "@jbrowse/plugin-linear-genome-view": "^1.0.0",
-    "@material-ui/core": "^4.12.4",
+    "@jbrowse/development-tools": "^2.1.1",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^4.0.1",
-    "@schemastore/package": "^0.0.6",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.11.13",
-    "@types/pako": "^1.0.1",
-    "@types/react": "^17.0.0",
-    "@types/testing-library__jest-dom": "^5.14.2",
+    "@mui/x-data-grid": "^6.0.1",
+    "@schemastore/package": "^0.0.10",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.3",
+    "@types/pako": "^2.0.3",
+    "@types/react": "^18.2.42",
     "@types/testing-library__react": "^10.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "babel-eslint": "^10.0.0",
     "browserslist": "^4.16.6",
-    "chalk": "^4.1.2",
+    "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "cross-var": "^1.1.0",
-    "cypress": "^6.2.1",
-    "eslint": "^7.5.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "cypress": "^13.6.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^27.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "local-cors-proxy": "^1.1.0",
+    "mobx": "^6.12.0",
+    "mobx-react": "^9.1.0",
+    "mobx-state-tree": "5.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "prop-types": "^15.0.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-dropzone": "^11.3.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
-    "rxjs": "^6.0.0",
-    "serve": "^11.3.2",
+    "prettier": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.6.1",
+    "rxjs": "^7.8.1",
+    "serve": "^14.2.1",
     "shx": "^0.3.3",
-    "start-server-and-test": "^1.11.7",
-    "ts-jest": "^27.1.1",
+    "start-server-and-test": "^2.0.3",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.3.0",
-    "tss-react": "^3.0.0",
-    "typescript": "^4.1.3"
+    "tss-react": "^4.9.3",
+    "typescript": "^5.3.2",
+    "web-encoding": "^1.1.5"
   }
 }

src/GDCAdapter/GDCAdapter.test.ts

@@ -3,6 +3,7 @@ import GDCAdapter from './GDCAdapter'
 import configSchema from './configSchema'
 import { gdcFilters, gdcResponse } from './test_data/gdc_test_data.js'
 import fetchMock from 'jest-fetch-mock'
+import { firstValueFrom } from 'rxjs'
 
 fetchMock.enableMocks()
 
@@ -26,6 +27,6 @@ test('adapter can fetch features from the gdc', async () => {
   const names = await adapter.getRefNames()
   expect(names).toMatchSnapshot()
 
-  const featuresArray = await features.pipe(toArray()).toPromise()
+  const featuresArray = await firstValueFrom(features.pipe(toArray()))
   expect(featuresArray.slice(0, 3)).toMatchSnapshot()
 })

src/GDCAdapter/__snapshots__/GDCAdapter.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`adapter can fetch features from the gdc 1`] = `
-Array [
+[
   "chr1",
   "chr10",
   "chr11",
@@ -30,10 +30,10 @@ Array [
 `;
 
 exports[`adapter can fetch features from the gdc 2`] = `
-Array [
-  Object {
+[
+  {
     "chromosome": "chr3",
-    "consequence": Object {},
+    "consequence": {},
     "cosmicId": null,
     "end": 124908333,
     "endPosition": 124908333,
@@ -53,9 +53,9 @@ Array [
     "type": "Simple Somatic Mutation",
     "uniqueId": "fe913ae3-e63e-585c-84cf-f47fcf51b639",
   },
-  Object {
+  {
     "chromosome": "chr3",
-    "consequence": Object {},
+    "consequence": {},
     "cosmicId": null,
     "end": 124908160,
     "endPosition": 124908160,
@@ -75,9 +75,9 @@ Array [
     "type": "Simple Somatic Mutation",
     "uniqueId": "68e512b9-511f-58e3-8f41-137c6c0291af",
   },
-  Object {
+  {
     "chromosome": "chr3",
-    "consequence": Object {},
+    "consequence": {},
     "cosmicId": null,
     "end": 124908195,
     "endPosition": 124908195,

src/GDCFeatureWidget/GDCFeatureWidget.test.js

@@ -17,9 +17,12 @@ describe('GDCTrack widget', () => {
       configuration: ConfigurationSchema('test', {}),
       widget: stateModelFactory(pluginManager),
     })
-    const model = Session.create({
-      widget: { type: 'GDCFeatureWidget' },
-    })
+    const model = Session.create(
+      {
+        widget: { type: 'GDCFeatureWidget' },
+      },
+      { pluginManager },
+    )
 
     model.widget.setFeatureData({
       uniqueId: '0208efeb-f1e8-57e4-8447-299c5f050380',
@@ -84,9 +87,12 @@ describe('GDCTrack widget', () => {
       configuration: ConfigurationSchema('test', {}),
       widget: stateModelFactory(pluginManager),
     })
-    const model = Session.create({
-      widget: { type: 'GDCFeatureWidget' },
-    })
+    const model = Session.create(
+      {
+        widget: { type: 'GDCFeatureWidget' },
+      },
+      { pluginManager },
+    )
 
     model.widget.setFeatureData({
       uniqueId: 'ENSG00000134121',