Upgrade to MUI v5, mobx-state-tree v5, mobx-react v6, mobx-react v7

.eslintrc.json

@@ -48,11 +48,11 @@
     "monorepo/no-internal-import": "off",
     "prettier/prettier": "warn",
     "react/no-danger": "warn",
+    "react/prop-types": "off",
     "react/destructuring-assignment": "error",
     "react/no-unused-prop-types": "error",
     "react/no-unused-state": "error",
     "react/prefer-stateless-function": "error",
-    "react/prop-types": "error",
     "spaced-comment": [
       "error",
       "always",

.github/workflows/push.yml

@@ -39,14 +39,14 @@ jobs:
           cd website/
           yarn build
   buildwholerepo:
-    name: Build whole repo on node 14 and ubuntu-latest
+    name: Build whole repo on node 16 and ubuntu-latest
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14
+      - name: Use Node.js 16
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Install deps (with cache)
         uses: bahmutov/npm-install@v1
       - name: Build codebase

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+node scripts/pre-commit.js

component_test/README.md

@@ -10,6 +10,7 @@ machine, try:
 ```
 yarn build # running build from root of the repo copies files to component_test/packed
 cd component_test
+rm -f yarn.lock
 rm -rf node_modules
 yarn cache clean
 yarn

component_test/cypress/integration/basic.spec.ts

@@ -7,7 +7,7 @@ describe('JBrowse embedded view', () => {
     cy.visit('/')
     // eslint-disable-next-line testing-library/await-async-query,testing-library/prefer-screen-queries
     cy.findByTestId('Blockset-pileup').findByTestId(
-      'prerendered_canvas_{GRCh38}10:29,838,733..29,838,818-0',
+      'prerendered_canvas_{GRCh38}10:29,838,733..29,838,818-0_done',
       { timeout: 10000 },
     )
   })

component_test/package.json

@@ -16,8 +16,8 @@
     "@types/react-dom": "^17.0.15",
     "cypress": "^9.2.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-scripts": "^5.0.1",
     "serve": "^13.0.2",
     "start-server-and-test": "^1.14.0",

component_test/src/App.tsx

@@ -77,7 +77,7 @@ function View() {
       assembly,
       tracks,
       location: '10:29,838,655..29,838,737',
-      onChange: patch => {
+      onChange: (patch: unknown) => {
         setPatches(previous => previous + JSON.stringify(patch) + '\n')
       },
       defaultSession,

config/jest/console.js

@@ -14,8 +14,31 @@ jest.spyOn(console, 'error').mockImplementation((...args) => {
   if (String(args[0]).includes('volvox.2bit_404')) {
     return undefined
   }
+
   if (String(args).includes('popupState')) {
     return undefined
   }
+
+  if (String(args).includes('hydrateRoot')) {
+    return undefined
+  }
+
+  if (
+    String(args).includes('A suspended resource finished loading inside a test')
+  ) {
+    return undefined
+  }
+
+  if (String(args).includes('was not wrapped in act')) {
+    return undefined
+  }
+  if (
+    String(args).includes(
+      'attempting to unmount was rendered by another copy of React',
+    )
+  ) {
+    return undefined
+  }
+
   return originalError.call(console, ...args)
 })

config/jest/cssTransform.js

@@ -3,7 +3,7 @@
 
 module.exports = {
   process() {
-    return 'module.exports = {};'
+    return { code: 'module.exports = {};' }
   },
   getCacheKey() {
     // The output is always the same.

config/jest/fileTransform.js

@@ -10,7 +10,8 @@ module.exports = {
     const assetFilename = JSON.stringify(path.basename(filename))
 
     if (filename.match(/\.svg$/)) {
-      return `module.exports = {
+      return {
+        code: `module.exports = {
         __esModule: true,
         default: ${assetFilename},
         ReactComponent: (props) => ({
@@ -22,9 +23,10 @@ module.exports = {
             children: ${assetFilename}
           })
         }),
-      };`
+      };`,
+      }
     }
 
-    return `module.exports = ${assetFilename};`
+    return { code: `module.exports = ${assetFilename};` }
   },
 }

config/jest/textEncoder.js

@@ -0,0 +1,7 @@
+import { TextEncoder, TextDecoder } from 'web-encoding'
+if (!global.TextEncoder) {
+  global.TextEncoder = TextEncoder
+}
+if (!global.TextDecoder) {
+  global.TextDecoder = TextDecoder
+}

demos/jbrowse-react-circular-genome-view-vanillajs/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

demos/jbrowse-react-linear-genome-view-vanillajs/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

jest.config.js

@@ -27,12 +27,13 @@ module.exports = {
   ],
   coveragePathIgnorePatterns: ['!*.d.ts', 'makeWorkerInstance.ts'],
   setupFiles: [
+    '<rootDir>/config/jest/textEncoder.js',
     '<rootDir>/config/jest/createRange.js',
     '<rootDir>/config/jest/fetchMock.js',
     '<rootDir>/config/jest/console.js',
     '<rootDir>/config/jest/crypto.js',
     'jest-localstorage-mock',
   ],
-  testURL: 'http://localhost',
+  testEnvironmentOptions: { url: 'http://localhost' },
   testEnvironment: 'jsdom',
 }

package.json

@@ -20,12 +20,8 @@
     "pretest-ci": "cd products/jbrowse-react-linear-genome-view;yarn build;cd ../../",
     "test-ci": "cross-env NODE_OPTIONS='--max-old-space-size=7000' jest --ci --coverage && jest --env node --testMatch '**/*testmod.js'",
     "built-test-ci": "jest --ci integration.test.js",
-    "test": "jest"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "node scripts/pre-commit.js"
-    }
+    "test": "jest",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
@@ -37,7 +33,10 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.12.2",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.0.0",
     "@oclif/dev-cli": "^1.26.9",
     "@oclif/test": "^1.2.7",
     "@storybook/addon-actions": "^6.5.0",
@@ -48,7 +47,7 @@
     "@storybook/manager-webpack5": "^6.5.0",
     "@storybook/react": "^6.5.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.3.0",
     "@types/base64-js": "^1.2.5",
     "@types/buffer-crc32": "^0.2.0",
     "@types/cli-progress": "^3.9.2",
@@ -76,15 +75,15 @@
     "@types/node": "^14.14.0",
     "@types/node-fetch": "^2.5.7",
     "@types/normalize-wheel": "^1.0.0",
-    "@types/object.fromentries": "^2.0.0",
+    "@types/object.fromentries": "^2.0.1",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/pako": "^1.0.1",
     "@types/pluralize": "^0.0.29",
     "@types/range-parser": "^1.2.3",
     "@types/rbush": "^3.0.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.4",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/rimraf": "^3.0.2",
     "@types/set-value": "^2.0.0",
@@ -97,13 +96,13 @@
     "babel-loader": "^8.2.5",
     "canvas": "^2.9.1",
     "chai": "^4.3.4",
-    "concurrently": "^6.4.0",
+    "concurrently": "^7.2.1",
     "core-js": "^3.19.3",
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.1",
-    "dependency-graph": "^0.9.0",
-    "electron": "18.2.4",
-    "electron-builder": "^22.14.5",
+    "dependency-graph": "^0.11.0",
+    "electron": "19.0.4",
+    "electron-builder": "^23.0.3",
     "electron-mock-ipc": "^0.3.8",
     "electron-notarize": "^1.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -114,18 +113,19 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-tsdoc": "^0.2.4",
     "file-loader": "^6.2.0",
-    "find-yarn-workspace-root": "^1.2.1",
+    "find-yarn-workspace-root": "^2.0.0",
     "get-yarn-workspaces": "^1.0.2",
-    "husky": "^4.2.5",
-    "jest": "^27.0.0",
+    "husky": "^8.0.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "jest-image-snapshot": "^4.5.1",
+    "jest-image-snapshot": "^5.1.0",
     "jest-localstorage-mock": "^2.4.3",
-    "lerna": "^4.0.0",
+    "lerna": "^5.1.2",
     "lerna-changelog": "^2.2.0",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "nock": "^13.2.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "npm-run-all": "^4.1.5",
@@ -136,7 +136,7 @@
     "rimraf": "^3.0.2",
     "rxjs": "^6.0.0",
     "semver": "^7.3.4",
-    "ts-loader": "^8.0.0",
+    "ts-loader": "^9.3.0",
     "ts-node": "^10.4.0",
     "tslib": "^2.0.1",
     "typescript": "^4.7.0",
@@ -146,9 +146,5 @@
     "webpack-dev-server": "^4.7.3"
   },
   "version": "0.0.0",
-  "dependencies": {},
-  "resolutions": {
-    "@types/react": "^17.0.0",
-    "webpack": "5.70.0"
-  }
+  "dependencies": {}
 }

packages/__mocks__/@testing-library/react.js

@@ -1,15 +1,11 @@
-import { StylesProvider } from '@material-ui/core/styles'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react'
 
 const react = jest.requireActual('@testing-library/react')
-const generateClassName = (rule, styleSheet) =>
-  `${styleSheet.options.classNamePrefix}-${rule.key}`
 const render = args => {
   return react.render(
-    <StylesProvider generateClassName={generateClassName}>
-      {args}
-    </StylesProvider>,
+    <ThemeProvider theme={createTheme()}>{args}</ThemeProvider>,
   )
 }