🚧 WIP(custom): v3.0.0 migrate to vite and esm

src/renderer/pages/RenamePage.vue

@@ -1,14 +1,27 @@
 <template>
   <div id="rename-page">
-    <el-form ref="formRef" :model="form" @submit.prevent>
+    <el-form
+      ref="formRef"
+      :model="form"
+      @submit.prevent
+    >
       <el-form-item
         :label="$T('FILE_RENAME')"
         prop="fileName"
         :rules="[{ required: true, message: 'file name is required', trigger: 'blur' }]"
       >
-        <el-input v-model="form.fileName" size="small" autofocus @keyup.enter="confirmName">
+        <el-input
+          v-model="form.fileName"
+          size="small"
+          autofocus
+          @keyup.enter="confirmName"
+        >
           <template #suffix>
-            <el-icon class="el-input__icon" style="cursor: pointer" @click="form.fileName = ''">
+            <el-icon
+              class="el-input__icon"
+              style="cursor: pointer"
+              @click="form.fileName = ''"
+            >
               <close />
             </el-icon>
           </template>
@@ -17,10 +30,19 @@
     </el-form>
     <el-row>
       <div class="pull-right">
-        <el-button round size="small" @click="cancel">
+        <el-button
+          round
+          size="small"
+          @click="cancel"
+        >
           {{ $T('CANCEL') }}
         </el-button>
-        <el-button type="primary" round size="small" @click="confirmName">
+        <el-button
+          type="primary"
+          round
+          size="small"
+          @click="confirmName"
+        >
           {{ $T('CONFIRM') }}
         </el-button>
       </div>
@@ -29,15 +51,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { FormInstance } from 'element-plus'
 import { Close } from '@element-plus/icons-vue'
-import { onBeforeUnmount, onBeforeMount, ref, reactive } from 'vue'
+import type { IpcRendererEvent } from 'electron'
+import type { FormInstance } from 'element-plus'
+import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
 
-import { useIPCOn } from '@/hooks/useIPC'
 import { T as $T } from '@/i18n/index'
-import { sendToMain } from '@/utils/common'
-
 import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME } from '#/events/constants'
 
 const id = ref<string | null>(null)
@@ -54,27 +73,27 @@ const handleFileName = (_: IpcRendererEvent, newName: string, _originName: strin
   id.value = _id
 }
 
-useIPCOn(RENAME_FILE_NAME, handleFileName)
+window.electron.ipcRendererOn(RENAME_FILE_NAME, handleFileName)
 
 onBeforeMount(() => {
-  ipcRenderer.send(GET_RENAME_FILE_NAME)
+  window.electron.sendToMain(GET_RENAME_FILE_NAME, '')
 })
 
-function confirmName() {
+function confirmName () {
   formRef.value?.validate(valid => {
     if (valid) {
-      sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.fileName)
+      window.electron.sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.fileName)
     }
   })
 }
 
-function cancel() {
+function cancel () {
   // if cancel, use origin file name
-  sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.originName)
+  window.electron.sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.originName)
 }
 
 onBeforeUnmount(() => {
-  ipcRenderer.removeAllListeners(RENAME_FILE_NAME)
+  window.electron.ipcRendererRemoveListener(RENAME_FILE_NAME, handleFileName)
 })
 </script>
 <script lang="ts">