Migrate to Webpack 5, updated linting and libs (#127)

* Migrate to Webpack 5, update Babel, ESLint, and testing libraries. Applied Prettier for consistent formatting. Prepared for future tooling.

* removes unused loaders

* fix: electron webpack polyfills

---------

Co-authored-by: Tyler Williams <tyler@coolsoftware.dev>

.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": ["es2015", "stage-1", "react"],
-  "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-runtime"],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.eslintrc

@@ -1,6 +1,34 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier", "prettier/react"],
+  "parser": "@babel/eslint-parser",
+  "env": {
+    "browser": true, // Enables browser global variables like window and document
+    "node": true, // Enables Node.js global variables and Node.js scoping
+    "es6": true, // Enables ES6 global variables like Set, Map, etc.
+    "commonjs": true, // CommonJS global variables and CommonJS scoping (useful for require)
+    "jquery": false, // Set to true if you're using jQuery
+    "jest": true // Enables Jest global variables for testing
+  },
+  "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }]
+      ],
+      "presets": [
+        "@babel/preset-react"
+      ]
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "prettier"
+  ],
   "rules": {
     "no-param-reassign": "off",
     "no-unused-vars": "off",
@@ -20,7 +48,11 @@
     "react/destructuring-assignment": "off",
     "react/static-property-placement": "off",
     "react/sort-comp": "off",
-    "react/no-deprecated": "off"
+    "react/no-deprecated": "off",
+    "prettier/prettier": "error",
+    "import/no-unresolved": "off",
+    "react/display-name": "off",
+    "no-console": "off"
   },
   "globals": {
     "__DEBUG_CONNECTION__": false,
@@ -35,5 +67,10 @@
     "after": false,
     "it": false,
     "expect": false
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
-}
+}

.github/workflows/mobx-devtools-mst-publish.yml

@@ -2,8 +2,8 @@ name: Publish mobx-devtools-mst
 
 on:
   push:
-    paths: [ "packages/mobx-devtools-mst/**", ".github/**" ]
-    branches: [ "master" ]
+    paths: ['packages/mobx-devtools-mst/**', '.github/**']
+    branches: ['master']
 
 jobs:
   publish-npm:
@@ -28,4 +28,3 @@ jobs:
           npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-

.github/workflows/test.yml

@@ -2,9 +2,9 @@ name: Test
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request_target:
-    branches: [ "master" ]
+    branches: ['master']
 
 jobs:
   test:

CHANGELOG.md

@@ -1,128 +1,182 @@
 # Changelog
 
 ## [0.9.27] - 2020-10-30
+
 - Enable nodeIntegration in the standalone electron app (#92)
 - Fix Type Definition for MST package
 
 ## [0.9.26] - 2020-10-30
+
 - Remove components and performance tabs (#87)
 - Type Definition for MST package (#81)
 
 ## [0.9.23] - 2020-10-19
+
 - Final fix vertical scroll in MST package (#73)
 - Remove destroyed mst roots from UI (#48)
 
 ## [0.9.21] - 2019-3-9
+
 - mobx-devtools-mst mobx@5 support
 - filter events in Changes tab
 - Made sets inspectable (#49)
 
 ## [0.9.19] - 2018-8-31
+
 ### Fixed
+
 - Props & state not displayed when on component view (#34)
 
 ## [0.9.18] - 2018-6-16
+
 ### Added
+
 - mobx@5 support
 
 ## [0.9.17] - 2018-3-28
+
 ### Fixed
+
 - MST tab not working
 
 ### Added
+
 - Made dates inspectable (#27)
 
 ## [0.9.16] - 2018-3-25
+
 ### Fixed
+
 - Extension doesn't work (#27)
 
 ## [0.9.15] - 2018-3-24
+
 ### Added
+
 - Made maps inspectable (#27)
 
 ## [0.9.14] - 2018-3-20
+
 ### Fixed
+
 - Older MobX support (#26)
 
 ## [0.9.13] - 2018-3-18
+
 ### Added
+
 - MobX@4 support
 
 ### Fixed
+
 - Fixed background page errors that prevented connecting to frontend
 
 ### Changed
+
 - MST tab now displays snapshots instead of patches
 
 ## [0.9.12] - 2018-1-13
+
 ### Added
+
 - Actions' names in changes log (#15)
 
 ## [0.9.11] - 2017-12-6
+
 ### Fixed
+
 - Fixed problems in firefox (#14)
 
 ## [0.9.10] - 2017-11-27
+
 ### Added
+
 - Standalone app.
 
 ### Fixed
+
 - Handle groupStart & groupEnd mismatch (#10)
 
 ## [0.9.9] - 2017-11-20
+
 ### Fixed
+
 - Ability to use the extension inside electron environment
 
 ## [0.9.8] - 2017-10-30
+
 ### Fixed
+
 - Fixed mobx-devtools-mst error in node.js environment (#8)
 
 ## [0.9.7] - 2017-10-27
+
 ### Added
+
 - mobx-state-tree support.
 
 ### Fixed
+
 - Displaying deep log items
 - Handling serializing exceptions
 
 ## [0.9.6] - 2017-10-25
+
 ### Fixed
+
 - Displaying deep log items
 
 ## [0.9.5] - 2017-10-23
+
 ### Fixed
+
 - Displaying diff details for top-level changes
 
 ## [0.9.4] - 2017-10-23
+
 ### Fixed
+
 Fail gracefully if using unsupported mobx versions.
 
 ## [0.9.3] - 2017-10-21
+
 ### Fixed
+
 - Reloading on navigation.
 
 ## [0.9.2] - 2017-10-20
+
 ### Fixed
+
 - Removed unsafe-eval from manifest.json for addons.mozilla.org.
 
 ## [0.9.1] - 2017-10-20
+
 ### Fixed
+
 - Fixed main layout problems in Firefox.
 
 ## [v0.9.0] - 2017-10-20
+
 ### Added
+
 - mobx-react observervers tree viewer.
 - complex objects viewer.
 
 ### Fixed
+
 - Performance issues on heavy logging events.
 
 ### Changed
+
 - Complete redesign.
 
 ## [0.0.23] - 2017-09-26
+
 ### Fixed
+
 - Communication between backend and frontend (#2).
 
 ### Changed
+
 - Different devtool instances are not being synchronized anymore.

HACKING.md

@@ -9,13 +9,12 @@
 
 - run `npm run start-playground-plain`
 
-
 ## Chrome extension
 
 - run `npm run start:chrome`
 - Go to `chrome://extensions`, check "developer mode", and click "Load
   unpacked extension", and select directory `lib/chrome`
-  
+
 ## Firefox extension
 
 - run `npm run start:firefox`

README.md

@@ -3,49 +3,55 @@
 [![Build Status](https://travis-ci.org/mobxjs/mobx-devtools.svg?branch=master)](https://travis-ci.org/mobxjs/mobx-devtools)
 
 This repository is home for:
-* [MobX Developer Tools for **Chrome**](https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod)
-* [MobX Developer Tools for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/mobx-devtools/)
-* [Standalone app](#standalone-app) for Safari, IE etc. 
+
+- [MobX Developer Tools for **Chrome**](https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod)
+- [MobX Developer Tools for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/mobx-devtools/)
+- [Standalone app](#standalone-app) for Safari, IE etc.
 
 ![MobX DevTools](preview.gif)
 
 #### Features
 
-* Track changes in MobX observables
-* MST support (see below).
+- Track changes in MobX observables
+- MST support (see below).
 
 #### mobx-state-tree
+
 To allow inspecting MST root, do `npm install mobx-devtools-mst` and pass it to the function, exported as the default:
+
 ```js
 import makeInspectable from 'mobx-devtools-mst';
 
 const myStore = MyStore.create(/* ... */);
 
 makeInspectable(myStore);
 ```
-![MobX DevTools MST](preview-mst.png)
 
+![MobX DevTools MST](preview-mst.png)
 
 #### Standalone app
 
 Install:
+
 ```sh
 npm install --global mobx-devtools
 ```
-Start: 
+
+Start:
+
 ```sh
 mobx-devtools
 ```
 
-
 # Troubleshooting
 
 ### It doesn't work
+
 Make sure that you are using [mobx](https://www.npmjs.com/package/mobx) 3.1.15 or higher and your app does not live inside an iframe. If that doesn't help, please [create an issue](https://github.com/mobxjs/mobx-devtools/issues/new) with detail about your environment.
 
 ### Performance & Components tabs [DEPRECATED].
-Prefer use React Devtools extension for components tree and performance [discuss](https://github.com/mobxjs/mobx-devtools/issues/56#issuecomment-541896923)
 
+Prefer use React Devtools extension for components tree and performance [discuss](https://github.com/mobxjs/mobx-devtools/issues/56#issuecomment-541896923)
 
 # Hacking
 

lerna.json

@@ -1,7 +1,5 @@
 {
   "lerna": "2.4.0",
   "version": "0.9.30",
-  "packages": [
-    "packages/*"
-  ]
+  "packages": ["packages/*"]
 }