fix: update dashboard packages, fix build on Node.js 18

dashboard/package.json

@@ -10,46 +10,45 @@
     "watch-build": "rimraf dist && NODE_ENV=development webpack --config webpack.config.js --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
+    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.7.2",
+    "@babel/preset-typescript": "^7.22.5",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^9.1.2",
-    "cross-env": "^5.2.0",
+    "cross-env": "^7.0.3",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.8.1",
     "cssnano": "^4.1.10",
-    "dotenv-webpack": "^1.7.0",
+    "dotenv-webpack": "^8.0.1",
-    "file-loader": "^4.2.0",
+    "file-loader": "^6.2.0",
-    "html-loader": "^0.5.5",
+    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^4.0.0-beta.8",
+    "html-webpack-plugin": "^5.5.3",
-    "postcss-import": "^12.0.1",
+    "postcss-import": "^15.1.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^7.3.3",
-    "postcss-nesting": "^7.0.1",
+    "postcss-nesting": "^11.3.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "^8.5.1",
-    "source-map-loader": "^0.2.4",
+    "source-map-loader": "^4.0.1",
     "tailwindcss": "^1.9.6",
-    "ts-loader": "^6.2.0",
+    "ts-loader": "^9.4.3",
-    "typescript": "^4.1.3",
+    "vue-loader": "^15.10.1",
-    "vue-loader": "^15.7.1",
+    "vue-style-loader": "^4.1.3",
-    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.7.14",
-    "vue-template-compiler": "^2.6.10",
+    "webpack": "^5.88.0",
-    "webpack": "^4.41.0",
+    "webpack-cli": "^5.1.4",
-    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^4.15.1",
-    "webpack-dev-server": "^3.8.2",
+    "webpack-merge": "^5.9.0"
-    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "highlight.js": "^9.15.10",
+    "@highlightjs/vue-plugin": "^1.0.2",
+    "highlight.js": "^11.8.0",
     "humanize-duration": "^3.27.0",
-    "js-yaml": "^3.13.1",
+    "js-yaml": "^4.1.0",
-    "marked": "^0.7.0",
+    "marked": "^5.1.0",
-    "modern-css-reset": "^1.0.4",
+    "modern-css-reset": "^1.4.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
-    "vue": "^2.6.10",
+    "vue": "^2.7.14",
-    "vue-highlightjs": "git://github.com/Dragory/vue-highlightjs.git#pass-hljs-instance",
     "vue-material-design-icons": "^4.1.0",
-    "vue-router": "^3.0.6",
+    "vue-router": "^3.6.5",
-    "vue2-ace-editor": "0.0.14",
+    "vue2-ace-editor": "^0.0.15",
-    "vuex": "^3.1.1"
+    "vuex": "^3.6.2"
   },
   "browserslist": [
     "last 2 Chrome versions"

dashboard/src/components/docs/MarkdownBlock.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import marked from "marked";
+  import { marked } from "marked";
   import hljs from "highlight.js";
 
   export default {

dashboard/src/init-vue.ts

@@ -2,10 +2,10 @@ import "./style/app.pcss";
 
 import Vue from "vue";
 
-import hljs from "highlight.js/lib/highlight.js";
+import VueHighlightJS from "@highlightjs/vue-plugin";
+import hljs from "highlight.js/lib/core";
 import hljsYaml from "highlight.js/lib/languages/yaml.js";
-import "highlight.js/styles/ocean.css";
+import "highlight.js/styles/base16/ocean.css";
-import VueHighlightJS from "vue-highlightjs";
 
 import { router } from "./routes";
 import { RootStore } from "./store";

dashboard/tailwind.config.js

@@ -21,4 +21,8 @@ module.exports = {
   },
   variants: {},
   plugins: [],
+  purge: ["./src/**/*.{html,vue}"],
+  future: {
+    purgeLayersByDefault: true,
+  },
 };

dashboard/webpack.config.js

@@ -1,8 +1,8 @@
 const path = require("path");
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const { VueLoaderPlugin } = require("vue-loader");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const DotenvPlugin = require("dotenv-webpack");
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const webpack = require("webpack");
 
 const targetDir = path.normalize(path.join(__dirname, "dist"));
@@ -28,10 +28,28 @@ const pathAliases = Object.entries(tsconfig.compilerOptions.paths || []).reduce(
   return aliases;
 }, {});
 
+const postcssPlugins = [
+  require("postcss-import")({
+    resolve(id, base, options) {
+      // Since WebStorm doesn't resolve imports from node_modules without a tilde (~) prefix,
+      // strip the tilde here to get the best of both worlds (webstorm support + postcss-import support)
+      if (id[0] === "~") id = id.slice(1);
+      // Call the original resolver after stripping the tilde
+      return require("postcss-import/lib/resolve-id")(id, base, options);
+    },
+  }),
+  require("postcss-nesting")(),
+  require("tailwindcss")(),
+];
+
+if (process.env.NODE_ENV === "production") {
+  postcssPlugins.push(require("postcss-preset-env")(), require("cssnano")());
+}
+
 let config = {
   entry: "./src/main.ts",
   output: {
-    filename: "[name].[hash].js",
+    filename: "[name].[fullhash].js",
     path: targetDir,
     publicPath: "/",
   },
@@ -86,27 +104,9 @@ let config = {
           {
             loader: "postcss-loader",
             options: {
-              ident: "postcss",
+              // ident: "postcss",
-              plugins: (loader) => {
+              postcssOptions: {
-                const plugins = [
+                plugins: postcssPlugins,
-                  require("postcss-import")({
-                    resolve(id, base, options) {
-                      // Since WebStorm doesn't resolve imports from node_modules without a tilde (~) prefix,
-                      // strip the tilde here to get the best of both worlds (webstorm support + postcss-import support)
-                      if (id[0] === "~") id = id.slice(1);
-                      // Call the original resolver after stripping the tilde
-                      return require("postcss-import/lib/resolve-id")(id, base, options);
-                    },
-                  }),
-                  require("postcss-nesting")(),
-                  require("tailwindcss")(),
-                ];
-
-                if (process.env.NODE_ENV === "production") {
-                  plugins.push(require("postcss-preset-env")(), require("cssnano")());
-                }
-
-                return plugins;
               },
             },
           },
@@ -131,12 +131,9 @@ let config = {
           {
             loader: "html-loader",
             options: {
-              root: path.resolve(__dirname, "src"),
+              esModule: false,
-              attrs: ["img:src", "link:href"],
               ...(process.env.NODE_ENV === "production" && {
                 minimize: true,
-                removeComments: true,
-                collapseWhitespace: true,
               }),
             },
           },
@@ -160,6 +157,7 @@ let config = {
   resolve: {
     extensions: [".ts", ".tsx", ".js", ".mjs", ".vue"],
     alias: pathAliases,
+    roots: [path.resolve(__dirname, "src")],
   },
 };