Upgrade to Vue3 with Typescript

.eslintrc

@@ -6,14 +6,15 @@
   "extends": [
     "plugin:vue/essential",
     "plugin:prettier/recommended",
-    "eslint:recommended"
+    "eslint:recommended",
+    "@vue/typescript"
   ],
   "rules": {
     "prettier/prettier": "error",
     "no-console": "warn"
   },
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "@typescript-eslint/parser"
   },
   "overrides": [
     {
@@ -26,4 +27,4 @@
       }
     }
   ]
-}
+}

dev/App.vue

@@ -19,19 +19,19 @@
           {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
         </span>
       </template>
-      <template v-slot:addTreeNodeIcon="slotProps">
+      <template v-slot:addTreeNodeIcon>
         <span class="icon">📂</span>
       </template>
-      <template v-slot:addLeafNodeIcon="slotProps">
+      <template v-slot:addLeafNodeIcon>
         <span class="icon">＋</span>
       </template>
-      <template v-slot:editNodeIcon="slotProps">
+      <template v-slot:editNodeIcon>
         <span class="icon">📃</span>
       </template>
-      <template v-slot:delNodeIcon="slotProps">
+      <template v-slot:delNodeIcon>
         <span class="icon">✂️</span>
       </template>
-      <template v-slot:leafNodeIcon="slotProps">
+      <template v-slot:leafNodeIcon>
         <span class="icon">🍃</span>
       </template>
       <template v-slot:treeNodeIcon="slotProps">
@@ -50,9 +50,11 @@
     </pre>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { VueTreeList, Tree, TreeNode } from '../src'
-export default {
+
+export default defineComponent({
   components: {
     VueTreeList
   },
@@ -137,8 +139,8 @@ export default {
 
     getNewTree() {
       var vm = this
-      function _dfs(oldNode) {
-        var newNode = {}
+      function _dfs(oldNode: TreeNode) {
+        var newNode = {} as TreeNode
 
         for (var k in oldNode) {
           if (k !== 'children' && k !== 'parent') {
@@ -158,7 +160,7 @@ export default {
       vm.newTree = _dfs(vm.data)
     }
   }
-}
+})
 </script>
 <style lang="less" rel="stylesheet/less">
 .vtl {

dev/index.js → dev/index.ts

@@ -4,6 +4,4 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-new Vue({
-  render: h => h(App)
-}).$mount('#app')
+Vue.createApp(App).mount('#app')

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   snapshotSerializers: ['jest-serializer-vue'],
   collectCoverageFrom: ['src/**/*.{js,vue}'],
   coveragePathIgnorePatterns: ['src/index.js']