feat: migrate to Vue 3 (rebase vue3 onto master and fix rendering)

.eslintrc.json

@@ -47,7 +47,7 @@
   },
   "parser": "vue-eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 2017,
+    "ecmaVersion": 2021,
     "sourceType": "module"
   },
   "env": {
@@ -61,25 +61,10 @@
   },
   "overrides": [
     {
-      "files": [".*\\.vue$"],
-      "parserOptions": {
-          "parser": "vue-eslint-parser"
-      }
-    },
-    {
-      "files": [".*\\.js$"],
-      "parserOptions": {
-          "parser": "babel-eslint"
-      }
-    },
-    {
-      "files": [".*\\.ts$"],
+      "files": ["*.ts", "*.tsx"],
       "parserOptions": {
           "parser": "@typescript-eslint/parser"
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
+      },
       "rules": {
         "@typescript-eslint/explicit-module-boundary-types": ["off"]
       }

babel.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
+  presets: ['@babel/preset-env'],
   plugins: ['lodash', '@babel/plugin-proposal-nullish-coalescing-operator'],
   comments: false,
 };

jest.config.cjs

@@ -2,19 +2,27 @@
 // File names that end with .test.js will be run in the jsdom testEnvironment
 // File names that end with .test.node.js will be run in the node testEnvironment
 
+// Match @vitejs/plugin-vue: compile pug with the html doctype so that valueless
+// attributes (e.g. `template(#header)`, `v-else`) aren't expanded to `attr="attr"`.
+const vueJestGlobals = { 'vue-jest': { pug: { doctype: 'html' } } };
+
 module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{js,ts}'],
   projects: [
     {
       displayName: 'jsdom',
       testEnvironment: 'jsdom',
+      globals: vueJestGlobals,
+      testEnvironmentOptions: {
+        customExportConditions: ['node', 'node-addons'],
+      },
       transform: {
         '^.+\\.js$': 'babel-jest',
         '^.+\\.ts$': 'ts-jest',
-        '^.+\\.vue$': '@vue/vue2-jest',
+        '^.+\\.vue$': '@vue/vue3-jest',
       },
-      transformIgnorePatterns: ['/node_modules/(?!(vue-awesome)/)'],
+      transformIgnorePatterns: ['/node_modules/(?!(@ckpack/vue-color)/)'],
       testMatch: ['**/test/**/*.test.js?(x)'],
       moduleNameMapper: {
         '^~/(.+)$': '<rootDir>/src/$1',
@@ -27,13 +35,14 @@ module.exports = {
       displayName: 'node',
       preset: 'ts-jest',
       testEnvironment: 'node',
+      globals: vueJestGlobals,
       testMatch: ['**/test/**/*.test.node.{js,ts}?(x)'],
       transform: {
         '^.+\\.js$': 'babel-jest',
         '^.+\\.ts$': 'ts-jest',
-        '^.+\\.vue$': '@vue/vue2-jest',
+        '^.+\\.vue$': '@vue/vue3-jest',
       },
-      transformIgnorePatterns: ['/node_modules/(?!(vue-awesome)/)'],
+      transformIgnorePatterns: ['/node_modules/(?!(@ckpack/vue-color)/)'],
       moduleNameMapper: {
         '^~/(.+)$': '<rootDir>/src/$1',
         '^d3$': '<rootDir>/node_modules/d3/dist/d3.min',