Add vue-tsc

package.json

@@ -33,7 +33,7 @@
     "pack": "yarn run pack:main && yarn run pack:renderer",
     "pack:main": "webpack --node-env=production --mode production --progress --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "webpack --node-env=production --mode production --progress --config .electron-vue/webpack.renderer.config.js",
-    "typecheck": "tsc -p . --noEmit",
+    "typecheck": "tsc -p . --noEmit && vue-tsc --noEmit",
     "spec": "NODE_ENV=test jest -u --maxWorkers=3",
     "postinstall": "electron-builder install-app-deps",
     "thirdparty": "license-checker --production --json > thirdparty.json && node scripts/thirdparty.js"
@@ -91,6 +91,7 @@
     "element-plus": "^2.3.4",
     "emoji-mart-vue-fast": "^12.0.4",
     "i18next": "^22.4.15",
+    "i18next-vue": "^2.1.1",
     "megalodon": "6.0.3",
     "minimist": "^1.2.8",
     "mitt": "^3.0.0",
@@ -107,7 +108,6 @@
     "vue-resize": "^2.0.0-alpha.1",
     "vue-router": "^4.2.2",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue3-i18next": "^0.2.2",
     "vuex": "^4.1.0",
     "vuex-router-sync": "^6.0.0-rc.1"
   },
@@ -196,6 +196,7 @@
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^17.2.2",
     "vue-style-loader": "^4.1.3",
+    "vue-tsc": "^1.6.5",
     "webpack": "^5.82.1",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0",

src/renderer/App.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/App'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
@@ -18,7 +18,7 @@ export default defineComponent({
   setup() {
     const space = 'App'
     const store = useStore()
-    const i18n = useI18next()
+    const { i18next } = useTranslation()
     const { Shift_Slash } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -43,7 +43,7 @@ export default defineComponent({
     onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.WATCH_SHORTCUT_EVENTS}`)
       store.dispatch(`${space}/${ACTION_TYPES.LOAD_PREFERENCES}`).then(conf => {
-        i18n.changeLanguage(conf.language.language)
+        i18next.changeLanguage(conf.language.language)
       })
     })
     onUnmounted(() => {

src/renderer/components/GlobalHeader.vue

@@ -30,7 +30,7 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <router-view :key="$route.params.id"></router-view>
+      <router-view :key="$route.params.id as string"></router-view>
     </el-container>
   </div>
 </template>
@@ -41,6 +41,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import { ACTION_TYPES } from '@/store/GlobalHeader'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   components: {
@@ -52,6 +53,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
+    const { t } = useTranslation()
 
     const accounts = computed(() => store.state.GlobalHeader.accounts)
     const hide = computed(() => store.state.GlobalHeader.hide)
@@ -79,7 +81,8 @@ export default defineComponent({
       accounts,
       hide,
       themeColor,
-      activeRoute
+      activeRoute,
+      $t: t
     }
   },
   methods: {}

src/renderer/components/Login/Authorize.vue

@@ -39,7 +39,7 @@
 <script lang="ts">
 import { defineComponent, ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElMessage } from 'element-plus'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { MyWindow } from '~/src/types/global'
@@ -51,7 +51,7 @@ export default defineComponent({
     const win = (window as any) as MyWindow
     const router = useRouter()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { escape } = useMagicKeys()
 
     const authorizeForm = reactive({
@@ -81,7 +81,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.authorize_error'),
+          message: t('message.authorize_error'),
           type: 'error'
         })
       } finally {
@@ -97,7 +97,8 @@ export default defineComponent({
       authorizeForm,
       submitting,
       authorizeSubmit,
-      close
+      close,
+      $t: t
     }
   }
 })

src/renderer/components/Login/LoginForm.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, reactive, ref } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
 import { domainFormat } from '@/utils/validator'
 import { detector, OAuth } from 'megalodon'
@@ -49,7 +49,7 @@ import { LocalServer } from '~/src/types/localServer'
 export default defineComponent({
   name: 'login-form',
   setup() {
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const router = useRouter()
     const win = (window as any) as MyWindow
 
@@ -67,20 +67,20 @@ export default defineComponent({
         {
           type: 'string',
           required: true,
-          message: i18n.t('validation.login.require_domain_name')
+          message: t('validation.login.require_domain_name')
         },
         {
           pattern: domainFormat,
           trigger: 'change',
-          message: i18n.t('validation.login.domain_format')
+          message: t('validation.login.domain_format')
         }
       ]
     })
 
     const login = async () => {
       const loading = ElLoading.service({
         lock: true,
-        text: i18n.t('message.loading'),
+        text: t('message.loading'),
         background: 'rgba(0, 0, 0, 0.7)'
       })
       try {
@@ -100,7 +100,7 @@ export default defineComponent({
         })
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.authorize_url_error'),
+          message: t('message.authorize_url_error'),
           type: 'error'
         })
         console.error(err)
@@ -119,15 +119,15 @@ export default defineComponent({
             sns.value = await detector(`https://${cleanDomain}`)
             domain.value = cleanDomain
             ElMessage({
-              message: i18n.t('message.domain_confirmed', {
+              message: t('message.domain_confirmed', {
                 domain: cleanDomain
               }),
               type: 'success'
             })
           } catch (err) {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.domain_doesnt_exist', {
+              message: t('message.domain_doesnt_exist', {
                 domain: form.domainName
               }),
               type: 'error'
@@ -138,7 +138,7 @@ export default defineComponent({
           return true
         } else {
           ElMessage({
-            message: i18n.t('validation.login.domain_format'),
+            message: t('validation.login.domain_format'),
             type: 'error'
           })
           return false
@@ -153,7 +153,8 @@ export default defineComponent({
       allowLogin,
       rules,
       login,
-      confirm
+      confirm,
+      $t: t
     }
   }
 })

src/renderer/components/Preferences.vue

@@ -59,6 +59,7 @@ import { defineComponent, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'preferences',
@@ -67,6 +68,7 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const { escape } = useMagicKeys()
+    const { t } = useTranslation()
 
     const primaryColor = computed(() => store.state.App.theme.primary_color)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
@@ -84,7 +86,8 @@ export default defineComponent({
       primaryColor,
       backgroundColor,
       close,
-      activeRoute
+      activeRoute,
+      $t: t
     }
   }
 })

src/renderer/components/Preferences/Account.vue

@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import { ACTION_TYPES, MUTATION_TYPES } from '@/store/Preferences/Account'
@@ -94,7 +94,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Account'
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const router = useRouter()
 
     const accounts = computed(() =>
@@ -117,7 +117,7 @@ export default defineComponent({
         await store.dispatch(`${space}/${ACTION_TYPES.LOAD_ACCOUNTS}`)
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.account_load_error'),
+          message: t('message.account_load_error'),
           type: 'error'
         })
       } finally {
@@ -133,7 +133,7 @@ export default defineComponent({
         })
         .catch(() => {
           ElMessage({
-            message: i18n.t('message.account_remove_error'),
+            message: t('message.account_remove_error'),
             type: 'error'
           })
         })
@@ -164,7 +164,8 @@ export default defineComponent({
       removeAccount,
       forward,
       backward,
-      removeAllAssociations
+      removeAllAssociations,
+      $t: t
     }
   }
 })

src/renderer/components/Preferences/Appearance.vue

@@ -57,6 +57,7 @@ import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
 import { ACTION_TYPES } from '@/store/Preferences/Appearance'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'appearance',
@@ -67,6 +68,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Appearance'
     const store = useStore()
+    const { t } = useTranslation()
 
     const nameStyles = [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username]
     const themes = [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom]
@@ -117,7 +119,8 @@ export default defineComponent({
       customizeThemeColor,
       font,
       updateFontSize,
-      updateTootPadding
+      updateTootPadding,
+      $t: t
     }
   }
 })

src/renderer/components/Preferences/Appearance/ColorPallet.vue

@@ -47,12 +47,14 @@
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Preferences/Appearance'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'color-pallet',
   setup() {
     const space = 'Preferences/Appearance'
     const store = useStore()
+    const { t } = useTranslation()
 
     const background = computed({
       get: () => store.state.Preferences.Appearance.appearance.customThemeColor.background_color,
@@ -135,7 +137,8 @@ export default defineComponent({
       secondary,
       border,
       headerMenu,
-      wrapperMask
+      wrapperMask,
+      $t: t
     }
   }
 })

src/renderer/components/Preferences/Appearance/Toot.vue

@@ -49,6 +49,7 @@ import { defineComponent, computed, toRefs } from 'vue'
 import moment from 'moment'
 import DisplayStyle from '~/src/constants/displayStyle'
 import TimeFormat from '~/src/constants/timeFormat'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'toot',
@@ -64,6 +65,7 @@ export default defineComponent({
   },
   setup(props) {
     const { displayNameStyle, timeFormat } = toRefs(props)
+    const { t } = useTranslation()
 
     const sampleIcon = 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
     const status = '<p>Sample status</p>'
@@ -105,7 +107,8 @@ export default defineComponent({
       timestamp,
       status,
       reblogsCount,
-      favouritesCount
+      favouritesCount,
+      $t: t
     }
   }
 })