Misc updates

.eslintrc.js

@@ -1,17 +1,26 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ['react-app', 'plugin:prettier/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['prettier', '@typescript-eslint'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:prettier/recommended',
+  ],
   settings: {
     react: {
       version: 'detect',
     },
   },
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
   rules: {
     '@typescript-eslint/no-unused-vars': [
       'warn',
-      {
-        args: 'after-used',
-        ignoreRestSiblings: true,
-      },
+      { argsIgnorePattern: '^_', ignoreRestSiblings: true },
     ],
   },
 }

package.json

@@ -55,66 +55,58 @@
     "singleQuote": true,
     "trailingComma": "all"
   },
-  "dependencies": {
-    "jest-environment-jsdom": "^29.6.1",
-    "regenerator-runtime": "^0.13.9",
-    "tslib": "^2.3.1"
-  },
   "peerDependencies": {
     "@jbrowse/core": "^1.5.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-react": "^7.10.4",
-    "@emotion/react": "^11.10.4",
-    "@jbrowse/cli": "^2.6.1",
-    "@jbrowse/core": "^2.6.1",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@emotion/react": "^11.11.3",
+    "@jbrowse/cli": "^2.10.2",
+    "@jbrowse/core": "^2.10.2",
     "@jbrowse/development-tools": "^2.1.1",
-    "@mui/material": "^5.10.5",
-    "@mui/system": "^5.10.5",
-    "@mui/x-data-grid": "^6.9.2",
-    "@schemastore/package": "^0.0.9",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/node": "^16.11.13",
-    "@types/react": "^17.0.0",
-    "@types/testing-library__jest-dom": "^5.14.2",
-    "@types/testing-library__react": "^10.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
-    "babel-eslint": "^10.0.0",
-    "chalk": "^4.1.2",
+    "@mui/material": "^5.15.10",
+    "@mui/system": "^5.15.9",
+    "@mui/x-data-grid": "^6.19.5",
+    "@schemastore/package": "^0.0.10",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "cross-var": "^1.1.0",
-    "cypress": "^12.8.1",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.20.3",
+    "cypress": "^13.6.6",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^29.6.1",
-    "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
-    "mobx-state-tree": "5.1.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mobx": "^6.12.0",
+    "mobx-react": "^9.1.0",
+    "mobx-state-tree": "5.4.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.12.0",
     "rxjs": "^7.8.1",
-    "serve": "^14.2.0",
+    "serve": "^14.2.1",
     "shx": "^0.3.3",
-    "start-server-and-test": "^2.0.0",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.3.0",
-    "tss-react": "^4.8.6",
-    "typescript": "^5.1.6"
+    "start-server-and-test": "^2.0.3",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "tss-react": "^4.9.4",
+    "typescript": "^5.3.3"
   },
   "private": true
 }

src/HelloView/stateModel.ts

@@ -6,9 +6,14 @@ const stateModel = types
     id: ElementId,
     type: types.literal('HelloView'),
   })
-  .actions(() => ({
+  .volatile(() => ({
+    width: undefined as number | undefined,
+  }))
+  .actions((self) => ({
     // unused but required by your view
-    setWidth() {},
+    setWidth(arg: number) {
+      self.width = arg
+    },
   }))
 
 export default stateModel

src/index.ts

@@ -10,7 +10,8 @@ import {
 
 export default class TemplatePlugin extends Plugin {
   name = 'TemplatePlugin'
-  version = version
+
+  version = version as string
 
   install(pluginManager: PluginManager) {
     pluginManager.addViewType(() => {