🔨 Refactor: upgrade vue2 -> vue3

src/renderer/utils/ConfirmButtonMixin.ts

@@ -1,26 +0,0 @@
-import { Component, Vue } from 'vue-property-decorator'
-import { IConfig } from 'picgo'
-@Component
-export default class extends Vue {
-  defaultPicBed = 'smms'
-  async created () {
-    const config = await this.getConfig<IConfig>()
-    if (config) {
-      this.defaultPicBed = config?.picBed?.uploader || config?.picBed?.current || 'smms'
-    }
-  }
-
-  setDefaultPicBed (type: string) {
-    this.saveConfig({
-      'picBed.current': type,
-      'picBed.uploader': type
-    })
-    this.defaultPicBed = type
-    const successNotification = new Notification(this.$T('SETTINGS_DEFAULT_PICBED'), {
-      body: this.$T('TIPS_SET_SUCCEED')
-    })
-    successNotification.onclick = () => {
-      return true
-    }
-  }
-}

src/renderer/utils/bus.ts

@@ -1,2 +1,20 @@
-import Vue from 'vue'
-export default new Vue()
+import mitt from 'mitt'
+import {
+  SHOW_INPUT_BOX,
+  SHOW_INPUT_BOX_RESPONSE,
+  FORCE_UPDATE
+} from '~/universal/events/constants'
+
+type IEvent ={
+  [SHOW_INPUT_BOX_RESPONSE]: string
+  [SHOW_INPUT_BOX]: {
+    value: string
+    title: string
+    placeholder: string
+  },
+  [FORCE_UPDATE]: void
+}
+
+const emitter = mitt<IEvent>()
+
+export default emitter

src/renderer/utils/common.ts

@@ -1,3 +1,5 @@
+import { isReactive, isRef, toRaw, unref } from 'vue'
+
 const isDevelopment = process.env.NODE_ENV !== 'production'
 /* eslint-disable camelcase */
 export const handleTalkingDataEvent = (data: ITalkingDataOptions) => {
@@ -16,3 +18,36 @@ export const trimValues = (obj: IStringKeyMap) => {
   })
   return newObj
 }
+
+/**
+ * get raw data from reactive or ref
+ */
+export const getRawData = (args: any) => {
+  if (Array.isArray(args)) {
+    const data = args.map((item: any) => {
+      if (isRef(item)) {
+        return unref(item)
+      }
+      if (isReactive(item)) {
+        return toRaw(item)
+      }
+      return item
+    })
+    return data
+  }
+  if (typeof args === 'object') {
+    const data = {} as IStringKeyMap
+    Object.keys(args).forEach(key => {
+      const item = args[key]
+      if (isRef(item)) {
+        data[key] = unref(item)
+      } else if (isReactive(item)) {
+        data[key] = toRaw(item)
+      } else {
+        data[key] = getRawData(item)
+      }
+    })
+    return data
+  }
+  return args
+}

src/renderer/utils/dataSender.ts

@@ -0,0 +1,55 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG, RPC_ACTIONS } from '#/events/constants'
+import { uuid } from 'uuidv4'
+import { IRPCActionType } from '~/universal/types/enum'
+import { getRawData } from './common'
+
+export function saveConfig (_config: IObj | string, value?: any) {
+  let config
+  if (typeof _config === 'string') {
+    config = {
+      [_config]: value
+    }
+  } else {
+    config = getRawData(_config)
+  }
+  ipcRenderer.send(PICGO_SAVE_CONFIG, config)
+}
+
+export function getConfig<T> (key?: string): Promise<T | undefined> {
+  return new Promise((resolve) => {
+    const callbackId = uuid()
+    const callback = (event: IpcRendererEvent, config: T | undefined, returnCallbackId: string) => {
+      if (returnCallbackId === callbackId) {
+        resolve(config)
+        ipcRenderer.removeListener(PICGO_GET_CONFIG, callback)
+      }
+    }
+    ipcRenderer.on(PICGO_GET_CONFIG, callback)
+    ipcRenderer.send(PICGO_GET_CONFIG, key, callbackId)
+  })
+}
+
+/**
+   * trigger RPC action
+   * TODO: create an isolate rpc handler
+   */
+export function triggerRPC<T> (action: IRPCActionType, ...args: any[]): Promise<T | null> {
+  return new Promise((resolve) => {
+    const callbackId = uuid()
+    const callback = (event: IpcRendererEvent, data: T | null, returnActionType: IRPCActionType, returnCallbackId: string) => {
+      if (returnCallbackId === callbackId && returnActionType === action) {
+        resolve(data)
+        ipcRenderer.removeListener(RPC_ACTIONS, callback)
+      }
+    }
+    const data = getRawData(args)
+    ipcRenderer.on(RPC_ACTIONS, callback)
+    ipcRenderer.send(RPC_ACTIONS, action, data, callbackId)
+  })
+}
+
+export function sendToMain (channel: string, ...args: any[]) {
+  const data = getRawData(args)
+  ipcRenderer.send(channel, ...data)
+}

src/renderer/utils/db.ts

@@ -10,6 +10,7 @@ import {
   PICGO_REMOVE_BY_ID_DB
 } from '#/events/constants'
 import { IGalleryDB } from '#/types/extra-vue'
+import { getRawData } from './common'
 export class GalleryDB implements IGalleryDB {
   async get<T> (filter?: IFilter): Promise<IGetResult<T>> {
     const res = await this.msgHandler<IGetResult<T>>(PICGO_GET_DB, filter)
@@ -50,8 +51,9 @@ export class GalleryDB implements IGalleryDB {
           ipcRenderer.removeListener(method, callback)
         }
       }
+      const data = getRawData(args)
       ipcRenderer.on(method, callback)
-      ipcRenderer.send(method, ...args, callbackId)
+      ipcRenderer.send(method, ...data, callbackId)
     })
   }
 }

src/renderer/utils/mainMixin.ts

@@ -1,63 +1,20 @@
-import { Component, Vue } from 'vue-property-decorator'
-import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG, FORCE_UPDATE, RPC_ACTIONS } from '#/events/constants'
-import { uuid } from 'uuidv4'
-import { IRPCActionType } from '~/universal/types/enum'
-@Component
-export default class extends Vue {
+import { ComponentOptions, getCurrentInstance } from 'vue'
+import { FORCE_UPDATE, GET_PICBEDS } from '~/universal/events/constants'
+import bus from '~/renderer/utils/bus'
+import { ipcRenderer } from 'electron'
+export const mainMixin: ComponentOptions = {
   created () {
-    this.$bus.$on(FORCE_UPDATE, () => {
-      this.$forceUpdate()
+    bus.on(FORCE_UPDATE, () => {
+      getCurrentInstance()?.proxy?.$forceUpdate()
     })
-  }
+  },
 
-  // support string key + value or object config
-  saveConfig (config: IObj | string, value?: any) {
-    if (typeof config === 'string') {
-      config = {
-        [config]: value
-      }
+  methods: {
+    forceUpdate () {
+      bus.emit(FORCE_UPDATE)
+    },
+    getPicBeds () {
+      ipcRenderer.send(GET_PICBEDS)
     }
-    ipcRenderer.send(PICGO_SAVE_CONFIG, config)
-  }
-
-  getConfig<T> (key?: string): Promise<T | undefined> {
-    return new Promise((resolve) => {
-      const callbackId = uuid()
-      const callback = (event: IpcRendererEvent, config: T | undefined, returnCallbackId: string) => {
-        if (returnCallbackId === callbackId) {
-          resolve(config)
-          ipcRenderer.removeListener(PICGO_GET_CONFIG, callback)
-        }
-      }
-      ipcRenderer.on(PICGO_GET_CONFIG, callback)
-      ipcRenderer.send(PICGO_GET_CONFIG, key, callbackId)
-    })
-  }
-
-  /**
-   * trigger RPC action
-   * TODO: create an isolate rpc handler
-   */
-  triggerRPC<T> (action: IRPCActionType, ...args: any[]): Promise<T | null> {
-    return new Promise((resolve) => {
-      const callbackId = uuid()
-      const callback = (event: IpcRendererEvent, data: T | null, returnActionType: IRPCActionType, returnCallbackId: string) => {
-        if (returnCallbackId === callbackId && returnActionType === action) {
-          resolve(data)
-          ipcRenderer.removeListener(RPC_ACTIONS, callback)
-        }
-      }
-      ipcRenderer.on(RPC_ACTIONS, callback)
-      ipcRenderer.send(RPC_ACTIONS, action, args, callbackId)
-    })
-  }
-
-  forceUpdate () {
-    this.$bus.$emit(FORCE_UPDATE)
-  }
-
-  sendToMain (channel: string, ...args: any[]) {
-    ipcRenderer.send(channel, ...args)
   }
 }

src/renderer/utils/mixin.ts

@@ -1,26 +1,27 @@
-import { Component, Vue } from 'vue-property-decorator'
-@Component
-export default class extends Vue {
+import { ComponentOptions } from 'vue'
+export const dragMixin: ComponentOptions = {
   mounted () {
     this.disableDragEvent()
-  }
+  },
 
-  disableDragEvent () {
-    window.addEventListener('dragenter', this.disableDrag, false)
-    window.addEventListener('dragover', this.disableDrag)
-    window.addEventListener('drop', this.disableDrag)
-  }
+  methods: {
+    disableDragEvent () {
+      window.addEventListener('dragenter', this.disableDrag, false)
+      window.addEventListener('dragover', this.disableDrag)
+      window.addEventListener('drop', this.disableDrag)
+    },
 
-  disableDrag (e: DragEvent) {
-    const dropzone = document.getElementById('upload-area')
-    if (dropzone === null || !dropzone.contains(<Node>e.target)) {
-      e.preventDefault()
-      e.dataTransfer!.effectAllowed = 'none'
-      e.dataTransfer!.dropEffect = 'none'
+    disableDrag (e: DragEvent) {
+      const dropzone = document.getElementById('upload-area')
+      if (dropzone === null || !dropzone.contains(<Node>e.target)) {
+        e.preventDefault()
+        e.dataTransfer!.effectAllowed = 'none'
+        e.dataTransfer!.dropEffect = 'none'
+      }
     }
-  }
+  },
 
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('dragenter', this.disableDrag, false)
     window.removeEventListener('dragover', this.disableDrag)
     window.removeEventListener('drop', this.disableDrag)