build: update packages & node 18 support (#862)

* build: update packages

* build: support node 18

* build: drop worker-loader

Author: 2xAA

package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.4",
     "animated-gif-detector": "^1.2.0",
-    "animejs": "3.2.0",
+    "animejs": "3.2.1",
     "canvas-text-wrapper": "github:cyberj/canvas-text-wrapper#master",
     "color": "^3.1.2",
     "dotenv": "^8.2.0",
@@ -64,22 +64,23 @@
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.0.0-beta.3",
     "webpack": "^4.43.0",
-    "webpack-2": "npm:webpack@2.7.0"
+    "webpack-3": "npm:webpack@3.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@playwright/test": "^1.31.2",
     "@semantic-release/git": "^9.0.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/runtime-dom": "^3.2.47",
     "babel-eslint": "^10.0.3",
+    "babel-loader": "^9.1.2",
     "core-js": "^3.19.1",
-    "electron": "^23.1.2",
+    "electron": "25.1.1",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.2.2",
     "electron-playwright-helpers": "^1.5.3",
@@ -92,11 +93,10 @@
     "playwright-core": "^1.31.2",
     "sass-loader": "^7.3.1",
     "text-loader": "0.0.1",
-    "vue-cli-plugin-electron-builder": "^2.0.0",
+    "vue-cli-plugin-electron-builder": "3.0.0-alpha.4",
     "vue-template-babel-compiler": "^2.0.0",
     "vue-template-compiler": "^2.7.14",
-    "vuex-localstorage": "^1.0.0",
-    "worker-loader": "^2.0.0"
+    "vuex-localstorage": "^1.0.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/application/index.js

@@ -4,7 +4,6 @@ import { ipcRenderer } from "electron";
 import { app } from "@electron/remote";
 import { createWebcodecVideo } from "./createWebcodecVideo";
 
-import Worker from "worker-loader!./worker/index.worker.js";
 import {
   setupMedia,
   enumerateDevices,
@@ -58,7 +57,9 @@ class ModV {
     this.ready = new Promise(resolve => {
       resolver = resolve;
     });
-    this.$worker = new Worker();
+    this.$worker = new Worker(
+      new URL("./worker/index.worker.js", import.meta.url)
+    );
     this.$asyncWorker = new PromiseWorker(this.$worker);
 
     this.$worker.postMessage({
@@ -277,7 +278,7 @@ class ModV {
       meyda: { features: featuresToGet }
     } = this.store.state;
 
-    const features = this.meyda.get(featuresToGet);
+    const features = this.meyda?.get(featuresToGet);
 
     if (features) {
       this.updateBeatDetektor(delta, features);

src/application/sample-modules/Line.js

@@ -59,8 +59,14 @@ export default {
   },
 
   data: {
-    vector: [[0, 0], [0, 0]],
-    velocity: [[1, 1], [1, 1]],
+    vector: [
+      [0, 0],
+      [0, 0]
+    ],
+    velocity: [
+      [1, 1],
+      [1, 1]
+    ],
     history: []
   },
 

src/application/worker/loop.js

@@ -202,6 +202,7 @@ function loop(delta, features, fftOutput) {
       const module = active[group.modules[j]];
 
       if (
+        !module ||
         !module.meta.enabled ||
         module.meta.alpha < 0.001 ||
         module.$status.length

src/media-manager/read-handlers/isf.js

@@ -1,7 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 const util = require("util");
-const webpack = require("webpack-2");
+const webpack = require("webpack-3");
 
 const readFile = util.promisify(fs.readFile);
 const writeFile = util.promisify(fs.writeFile);

src/media-manager/read-handlers/module.js

@@ -1,5 +1,5 @@
 const recursiveDeps = require("recursive-deps");
-const webpack = require("webpack-2");
+const webpack = require("webpack-3");
 const path = require("path");
 const npm = require("npm");
 const fs = require("fs");

vue.config.js

@@ -36,10 +36,8 @@ module.exports = {
       ]
     },
 
-    serve: {
-      hot: true,
-      // hotOnly: true,
-      contentBase: "./"
+    devServer: {
+      hot: true
     },
 
     node: {
@@ -68,7 +66,7 @@ module.exports = {
         "stream-to-blob",
         "grandiose",
         "npm",
-        "webpack-2",
+        "webpack-3",
         "font-list"
       ],