update dependencies

Author: zendive

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "console.diff(...)",
   "description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
-  "version": "2.0",
+  "version": "2.1",
   "manifest_version": 2,
   "minimum_chrome_version": "64.0",
   "devtools_page": "src/jsdiff-devtools.html",

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "jsdiff",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "![jsdiff](./src/img/panel-icon64.png) --- Chrome devtools extension intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.",
   "private": true,
   "directories": {
     "doc": "doc"
   },
   "scripts": {
     "test": "echo \"no test\" && exit 1",
-    "dev": "webpack --progress --watch",
-    "prod": "webpack --progress -p"
+    "dev": "webpack --progress --watch --mode=development",
+    "prod": "NODE_ENV=production webpack --mode=production"
   },
   "repository": {
     "type": "git",
@@ -27,20 +27,18 @@
   },
   "homepage": "https://github.com/zendive/jsdiff#readme",
   "devDependencies": {
-    "clean-webpack-plugin": "~1.0.1",
-    "css-loader": "~2.1.0",
-    "file-loader": "^3.0.1",
-    "node-sass": "~4.14.1",
-    "sass-loader": "~7.1.0",
-    "style-loader": "~0.23.1",
-    "vue-loader": "~15.6.2",
-    "vue-template-compiler": "~2.6.6",
-    "webpack": "~4.29.0",
+    "@vue/compiler-sfc": "^3.2.31",
+    "clean-webpack-plugin": "~4.0.0",
+    "css-loader": "~6.6.0",
+    "jsondiffpatch": "~0.4.1",
+    "node-sass": "~7.0.3",
+    "sass-loader": "~12.4.0",
+    "style-loader": "~3.3.1",
+    "vue": "~3.2.31",
+    "vue-loader": "~17.0.0",
+    "webpack": "~5.77.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "~3.2.1"
+    "webpack-cli": "~4.9.2"
   },
-  "dependencies": {
-    "jsondiffpatch": "~0.4.1",
-    "vue": "~2.6.12"
-  }
+  "dependencies": {}
 }

package.json

@@ -125,15 +125,14 @@ function jsdiff_devtools_extension_api() {
   });
 
   console.log(
-    '%cJSDiff', `
+    '%c✚ console.diff(left, right);', `
       font-weight: 700;
       color: #000;
       background-color: yellow;
       padding: 2px 4px;
       border: 1px solid #bbb;
       border-radius: 4px;
-    `,
-    `console.diff(left, right); console.diffLeft(left); console.diffRight(right); console.diffPush(next);`
+    `
   );
 
   return true;

src/js/bundle/jsdiff-panel.js

@@ -1,2 +1,5 @@
-import App from './view/panel.vue';
-const app = new App({el: '#app'});
+import {createApp} from 'vue';
+import Panel from './view/panel.vue';
+
+const app = createApp(Panel);
+app.mount('#app');