switch to Vue 3 in ui

src/main.rs

@@ -94,7 +94,7 @@ fn main() -> Result<()> {
     .bind(&bind)?
     .run();
 
-    if open_result.new {
+    if open_result.new || true {
         info!("The vault has been just created, running initial update...");
         actix::spawn(filesystem::reimport_directory(db_pool, vault_path));
     }

ui/.eslintignore

@@ -1 +0,0 @@
-**/*.config.js

ui/.eslintrc.js

@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:vue/essential",
-    "@vue/typescript/recommended"
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
-};

ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "upend",
+  "name": "upend-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,15 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@shoelace-style/shoelace": "^2.0.0-beta.16",
+    "@shoelace-style/shoelace": "^2.0.0-beta.19",
     "core-js": "^3.6.5",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
-    "sass-loader": "^10.0.1",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.2",
-    "vue-router": "^3.2.0"
+    "sass-loader": "^10.0.2",
+    "vue": "^3.0.0-0",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",
@@ -26,15 +24,10 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/compiler-sfc": "^3.0.0-0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "typescript": "~3.9.3",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^7.0.0-0",
+    "typescript": "~3.9.3"
   }
 }

ui/src/main.ts

@@ -1,42 +1,39 @@
-import Vue from "vue";
+import * as Vue from "vue";
+import {DirectiveBinding} from "vue";
 import App from "./App.vue";
 import router from "./router";
-import {
-  defineCustomElements,
-  setAssetPath,
-  SlInput
-} from "@shoelace-style/shoelace";
-import { VNode } from "vue/types/umd";
-import { DirectiveBinding } from "vue/types/options";
+import {defineCustomElements, setAssetPath, SlInput,} from "@shoelace-style/shoelace";
 
 // TODO: Remove when UI settles!
 defineCustomElements();
 setAssetPath(`${window.location.origin}/${process.env.VUE_APP_ASSET_PATH}/`);
 
-Vue.directive("sl-model", {
-  inserted: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
-    element.addEventListener("slInput", event => {
-      const slElement = event?.srcElement as
-        | typeof SlInput.prototype
-        | undefined;
-      const value = slElement?.value;
-      if (value) {
-        vnode.context?.$set(vnode.context, binding.expression, value);
-      }
-    });
-  },
-  update: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
-    const slElement = element as typeof SlInput.prototype | undefined;
-    if (slElement) {
-      slElement.value = vnode.context?.$data[binding.expression];
-    }
-  }
+// @ts-ignore
+const app = Vue.createApp(App);
+app.use(router);
+app.mount("#app");
+
+app.config.isCustomElement = (tag: string) => Boolean(tag.match(/^sl-/));
+
+
+app.directive("sl-model", {
+    beforeMount: (element: Element, binding: DirectiveBinding<string>) => {
+        element.addEventListener("slInput", (event) => {
+            const slElement = event?.target as
+              | typeof SlInput.prototype
+              | undefined;
+            const value = slElement?.value;
+            if (value && binding.instance) {
+                (binding.instance.$data as { [key: string]: unknown })[binding.arg as string] = value;
+                console.log(binding);
+                console.log(binding.instance.$data);
+            }
+        });
+    },
+    updated: (element: Element, binding: DirectiveBinding<string>) => {
+        const slElement = element as typeof SlInput.prototype | undefined;
+        if (slElement) {
+            slElement.value = (binding.instance?.$data as { [key: string]: unknown })[binding.arg as string] as string;
+        }
+    },
 });
-
-Vue.config.ignoredElements = [/^sl-/];
-Vue.config.productionTip = false;
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount("#app");

ui/src/router/index.ts

@@ -1,10 +1,7 @@
-import Vue from 'vue'
-import VueRouter, { RouteConfig } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
 
-Vue.use(VueRouter)
-
-const routes: Array<RouteConfig> = [
+const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
@@ -20,7 +17,8 @@ const routes: Array<RouteConfig> = [
   }
 ]
 
-const router = new VueRouter({
+const router = createRouter({
+  history: createWebHashHistory(),
   routes
 })
 

ui/src/shims-tsx.d.ts

@@ -1,13 +0,0 @@
-import Vue, { VNode } from 'vue'
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-}

ui/src/shims-vue.d.ts

@@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
 }

ui/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <sl-input placeholder="Search" v-sl-model="searchQuery">
+    <sl-input placeholder="Search" v-sl-model:searchQuery>
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
     <ul>
@@ -10,19 +10,23 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import {defineComponent} from "vue";
 
-@Component
-export default class Home extends Vue {
-  private searchQuery = "";
-  private results = [];
-
-  @Watch("searchQuery")
-  private async onSearchQueryChange() {
-    const response = await fetch(
-      `/api/lookup?${new URLSearchParams({ query: this.searchQuery })}`
-    );
-    this.results = await response.json();
+export default defineComponent({
+  name: "Home",
+  data: () => {
+    return {
+      searchQuery: "",
+      results: []
+    };
+  },
+  watch: {
+    async searchQuery() {
+      const response = await fetch(
+          `/api/lookup?${new URLSearchParams({query: this.searchQuery})}`
+      );
+      this.results = await response.json();
+    }
   }
-}
+});
 </script>

ui/tsconfig.json

@@ -6,7 +6,6 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,

ui/vue.config.js

@@ -2,6 +2,7 @@ const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
+  lintOnSave: false,
   chainWebpack: config => {
     config.plugin("copy-icons").use(CopyPlugin, [
       [