From e679f0e60247d905e6ede8c16c8898097ab36c5b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 10 Jul 2022 00:42:09 +0900
Subject: [PATCH] refs #3301 Rewrite App with composition API

---
 .electron-vue/webpack.renderer.config.js   |  2 +-
 src/renderer/App.vue                       | 72 ++++++++++++----------
 src/renderer/{main.js => main.ts}          |  0
 src/renderer/router/{index.js => index.ts} |  0
 4 files changed, 41 insertions(+), 33 deletions(-)
 rename src/renderer/{main.js => main.ts} (100%)
 rename src/renderer/router/{index.js => index.ts} (100%)

diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js
index b05c0a8d..b15859dc 100644
--- a/.electron-vue/webpack.renderer.config.js
+++ b/.electron-vue/webpack.renderer.config.js
@@ -13,7 +13,7 @@ const { VueLoaderPlugin } = require('vue-loader')
 
 let rendererConfig = {
   entry: {
-    renderer: path.join(__dirname, '../src/renderer/main.js')
+    renderer: path.join(__dirname, '../src/renderer/main.ts')
   },
   module: {
     rules: [
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 71238064..765ced0b 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,43 +4,51 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/App'
 
-export default {
+export default defineComponent({
   name: 'Whalebird',
-  computed: {
-    ...mapState({
-      theme: state => {
-        return {
-          '--theme-background-color': state.App.theme.background_color,
-          '--theme-selected-background-color': state.App.theme.selected_background_color,
-          '--theme-global-header-color': state.App.theme.global_header_color,
-          '--theme-side-menu-color': state.App.theme.side_menu_color,
-          '--theme-primary-color': state.App.theme.primary_color,
-          '--theme-regular-color': state.App.theme.regular_color,
-          '--theme-secondary-color': state.App.theme.secondary_color,
-          '--theme-border-color': state.App.theme.border_color,
-          '--theme-header-menu-color': state.App.theme.header_menu_color,
-          '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
-          '--theme-scrollbar-color': state.App.theme.scrollbar_color,
-          '--toot-padding': `${state.App.tootPadding}px`,
-          '--base-font-size': `${state.App.fontSize}px`,
-          '--specified-fonts': state.App.defaultFonts.join(', ')
-        }
-      }
+  setup() {
+    const space = 'App'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const theme = computed(() => ({
+      '--theme-background-color': store.state.App.theme.background_color,
+      '--theme-selected-background-color': store.state.App.theme.selected_background_color,
+      '--theme-global-header-color': store.state.App.theme.global_header_color,
+      '--theme-side-menu-color': store.state.App.theme.side_menu_color,
+      '--theme-primary-color': store.state.App.theme.primary_color,
+      '--theme-regular-color': store.state.App.theme.regular_color,
+      '--theme-secondary-color': store.state.App.theme.secondary_color,
+      '--theme-border-color': store.state.App.theme.border_color,
+      '--theme-header-menu-color': store.state.App.theme.header_menu_color,
+      '--theme-wrapper-mask-color': store.state.App.theme.wrapper_mask_color,
+      '--theme-scrollbar-color': store.state.App.theme.scrollbar_color,
+      '--toot-padding': `${store.state.App.tootPadding}px`,
+      '--base-font-size': `${store.state.App.fontSize}px`,
+      '--specified-fonts': store.state.App.defaultFonts.join(', ')
+    }))
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.WATCH_SHORTCUT_EVENTS}`)
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_PREFERENCES}`).then(conf => {
+        i18n.changeLanguage(conf.language.language)
+      })
     })
-  },
-  created() {
-    this.$store.dispatch('App/watchShortcutEvents')
-    this.$store.dispatch('App/loadPreferences').then(conf => {
-      this.$i18n.changeLanguage(conf.language.language)
+    onUnmounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.REMOVE_SHORTCUT_EVENTS}`)
     })
-  },
-  unmounted() {
-    this.$store.dispatch('App/removeShortcutsEvents')
+
+    return {
+      theme
+    }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/main.js b/src/renderer/main.ts
similarity index 100%
rename from src/renderer/main.js
rename to src/renderer/main.ts
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.ts
similarity index 100%
rename from src/renderer/router/index.js
rename to src/renderer/router/index.ts