refactor: initial pinia implementation

src/renderer/App.vue

@@ -26,9 +26,11 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-import { mapActions, mapGetters } from 'vuex';
+import { mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { Menu, getCurrentWindow } from '@electron/remote';
+import { useApplicationStore } from '@/stores/application';
 import TheSettingBar from '@/components/TheSettingBar';
 
 export default {
@@ -44,16 +46,30 @@ export default {
       TheScratchpad: defineAsyncComponent(() => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad')),
       BaseTextEditor: defineAsyncComponent(() => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor'))
    },
+   setup () {
+      const applicationStore = useApplicationStore();
+      const {
+         isLoading,
+         isSettingModal,
+         isScratchpad
+      } = storeToRefs(applicationStore);
+
+      const { checkVersionUpdate } = applicationStore;
+
+      return {
+         applicationStore,
+         isLoading,
+         isSettingModal,
+         isScratchpad,
+         checkVersionUpdate
+      };
+   },
    computed: {
       ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         isLoading: 'application/isLoading',
-         isSettingModal: 'application/isSettingModal',
-         isScratchpad: 'application/isScratchpad',
          connections: 'connections/getConnections',
          applicationTheme: 'settings/getApplicationTheme',
          disableBlur: 'settings/getDisableBlur',
-         isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
+         selectedWorkspace: 'workspaces/getSelected'
       })
    },
    mounted () {
@@ -96,12 +112,6 @@ export default {
             node = node.parentNode;
          }
       });
-   },
-   methods: {
-      ...mapActions({
-         showNewConnModal: 'application/showNewConnModal',
-         checkVersionUpdate: 'application/checkVersionUpdate'
-      })
    }
 };
 </script>

src/renderer/components/BaseTextEditor.vue

@@ -13,6 +13,7 @@
 import * as ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
 import { mapGetters } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
 
 export default {
    name: 'BaseTextEditor',
@@ -78,7 +79,7 @@ export default {
       }
    },
    created () {
-      this.id = this._uid;
+      this.id = uidGen('E');
    },
    mounted () {
       this.editor = ace.edit(`editor-${this.id}`, {

src/renderer/components/ModalSettings.vue

@@ -320,6 +320,8 @@
 <script>
 import { shell } from 'electron';
 import { mapActions, mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useApplicationStore } from '@/stores/application';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
@@ -332,6 +334,27 @@ export default {
       ModalSettingsChangelog,
       BaseTextEditor
    },
+   setup () {
+      const applicationStore = useApplicationStore();
+      const {
+         selectedSettingTab,
+         updateStatus
+      } = storeToRefs(applicationStore);
+
+      const {
+         hideSettingModal,
+         appName,
+         appVersion
+      } = applicationStore;
+
+      return {
+         appName,
+         appVersion,
+         selectedSettingTab,
+         updateStatus,
+         closeModal: hideSettingModal
+      };
+   },
    data () {
       return {
          appAuthor: 'Fabio Di Stasio',
@@ -395,9 +418,6 @@ export default {
    },
    computed: {
       ...mapGetters({
-         appName: 'application/appName',
-         appVersion: 'application/appVersion',
-         selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
          pageSize: 'settings/getDataTabLimit',
          selectedAutoComplete: 'settings/getAutoComplete',
@@ -408,7 +428,6 @@ export default {
          applicationTheme: 'settings/getApplicationTheme',
          editorTheme: 'settings/getEditorTheme',
          editorFontSize: 'settings/getEditorFontSize',
-         updateStatus: 'application/getUpdateStatus',
          selectedWorkspace: 'workspaces/getSelected',
          getWorkspace: 'workspaces/getWorkspace'
       }),
@@ -462,7 +481,6 @@ ORDER BY
    },
    methods: {
       ...mapActions({
-         closeModal: 'application/hideSettingModal',
          changeLocale: 'settings/changeLocale',
          changePageSize: 'settings/changePageSize',
          changeRestoreTabs: 'settings/changeRestoreTabs',

src/renderer/components/ModalSettingsChangelog.vue

@@ -15,15 +15,19 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { marked } from 'marked';
 import BaseLoader from '@/components/BaseLoader';
+import { useApplicationStore } from '@/stores/application';
 
 export default {
    name: 'ModalSettingsChangelog',
    components: {
       BaseLoader
    },
+   setup () {
+      const { appVersion } = useApplicationStore();
+      return { appVersion };
+   },
    data () {
       return {
          changelog: '',
@@ -32,9 +36,6 @@ export default {
          isError: false
       };
    },
-   computed: {
-      ...mapGetters({ appVersion: 'application/appVersion' })
-   },
    created () {
       this.getChangelog();
    },

src/renderer/components/ModalSettingsUpdate.vue

@@ -53,15 +53,27 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
 import { ipcRenderer, shell } from 'electron';
+import { mapGetters, mapActions } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useApplicationStore } from '@/stores/application';
 
 export default {
    name: 'ModalSettingsUpdate',
+   setup () {
+      const applicationStore = useApplicationStore();
+      const {
+         updateStatus,
+         getDownloadProgress
+      } = storeToRefs(applicationStore);
+
+      return {
+         updateStatus,
+         downloadPercentage: getDownloadProgress
+      };
+   },
    computed: {
       ...mapGetters({
-         updateStatus: 'application/getUpdateStatus',
-         downloadPercentage: 'application/getDownloadProgress',
          allowPrerelease: 'settings/getAllowPrerelease'
       }),
       updateMessage () {

src/renderer/components/QueryEditor.vue

@@ -12,7 +12,9 @@
 import * as ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
 import '../libs/ext-language_tools';
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useApplicationStore } from '@/stores/application';
 import Tables from '@/ipc-api/Tables';
 
 export default {
@@ -27,6 +29,16 @@ export default {
       height: { type: Number, default: 200 }
    },
    emits: ['update:modelValue'],
+   setup () {
+      const applicationStore = useApplicationStore();
+      const { setBaseCompleters } = applicationStore;
+      const { baseCompleter } = storeToRefs(applicationStore);
+
+      return {
+         baseCompleter,
+         setBaseCompleters
+      };
+   },
    data () {
       return {
          editor: null,
@@ -41,8 +53,7 @@ export default {
          editorTheme: 'settings/getEditorTheme',
          editorFontSize: 'settings/getEditorFontSize',
          autoComplete: 'settings/getAutoComplete',
-         lineWrap: 'settings/getLineWrap',
-         baseCompleter: 'application/getBaseCompleter'
+         lineWrap: 'settings/getLineWrap'
       }),
       tables () {
          return this.workspace
@@ -295,9 +306,6 @@ export default {
       }, 20);
    },
    methods: {
-      ...mapActions({
-         setBaseCompleters: 'application/setBaseCompleter'
-      }),
       setCustomCompleter () {
          this.editor.completers.push({
             getCompletions: (editor, session, pos, prefix, callback) => {

src/renderer/components/TheFooter.vue

@@ -27,16 +27,26 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapGetters } from 'vuex';
+import { useApplicationStore } from '@/stores/application';
 const { shell } = require('electron');
 
 export default {
    name: 'TheFooter',
+   setup () {
+      const applicationStore = useApplicationStore();
+
+      const { appVersion, showSettingModal } = applicationStore;
+
+      return {
+         appVersion,
+         showSettingModal
+      };
+   },
    computed: {
       ...mapGetters({
          workspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         appVersion: 'application/appVersion'
+         getWorkspace: 'workspaces/getWorkspace'
       }),
       version () {
          return this.getWorkspace(this.workspace) ? this.getWorkspace(this.workspace).version : null;
@@ -48,9 +58,6 @@ export default {
       }
    },
    methods: {
-      ...mapActions({
-         showSettingModal: 'application/showSettingModal'
-      }),
       openOutside (link) {
          shell.openExternal(link);
       }

src/renderer/components/TheScratchpad.vue

@@ -30,6 +30,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { useApplicationStore } from '@/stores/application';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
 
@@ -40,6 +41,11 @@ export default {
       TextEditor
    },
    emits: ['hide'],
+   setup () {
+      const applicationStore = useApplicationStore();
+
+      return { hideScratchpad: applicationStore.hideScratchpad };
+   },
    data () {
       return {
          localNotes: '',
@@ -65,7 +71,6 @@ export default {
    },
    methods: {
       ...mapActions({
-         hideScratchpad: 'application/hideScratchpad',
          changeNotes: 'scratchpad/changeNotes'
       }),
       hideModal () {

src/renderer/components/TheSettingBar.vue

@@ -57,6 +57,8 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useApplicationStore } from '@/stores/application';
 import Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext';
 
@@ -66,6 +68,18 @@ export default {
       Draggable,
       SettingBarContext
    },
+   setup () {
+      const applicationStore = useApplicationStore();
+      const { updateStatus } = storeToRefs(applicationStore);
+      const { showSettingModal, showScratchpad } = applicationStore;
+
+      return {
+         applicationStore,
+         updateStatus,
+         showSettingModal,
+         showScratchpad
+      };
+   },
    data () {
       return {
          dragElement: null,
@@ -81,8 +95,7 @@ export default {
          getConnections: 'connections/getConnections',
          getConnectionName: 'connections/getConnectionName',
          getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected',
-         updateStatus: 'application/getUpdateStatus'
+         selectedWorkspace: 'workspaces/getSelected'
       }),
       connections: {
          get () {
@@ -99,8 +112,6 @@ export default {
    methods: {
       ...mapActions({
          updateConnections: 'connections/updateConnections',
-         showSettingModal: 'application/showSettingModal',
-         showScratchpad: 'application/showScratchpad',
          selectWorkspace: 'workspaces/selectWorkspace'
       }),
       contextMenu (event, connection) {

src/renderer/i18n/index.js

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n/dist/vue-i18n.esm-bundler';
+import { createI18n } from 'vue-i18n';
 
 const i18n = createI18n({
    fallbackLocale: 'en-US',

src/renderer/libs/ext-language_tools.js

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable no-labels */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-cond-assign */

src/renderer/store/index.js

@@ -13,8 +13,6 @@ import ipcUpdates from './plugins/ipcUpdates';
 import ipcExceptions from './plugins/ipcExceptions';
 import ipcShortcuts from './plugins/ipcShortcuts';
 
-// Vue.use(Vuex);
-
 export const store = createStore({
    strict: true,
    modules: {

src/renderer/stores/application.js

@@ -0,0 +1,63 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import Store from 'electron-store';
+const persistentStore = new Store({ name: 'settings' });
+
+export const useApplicationStore = defineStore('application', {
+   state: () => ({
+      appName: 'Antares - SQL Client',
+      appVersion: process.env.PACKAGE_VERSION || 0,
+      cachedVersion: persistentStore.get('cached_version', 0),
+      isLoading: false,
+      isNewModal: false,
+      isSettingModal: false,
+      isScratchpad: false,
+      selectedSettingTab: 'general',
+      selectedConection: {},
+      updateStatus: 'noupdate', // 'noupdate' | 'available' | 'checking' | 'nocheck' | 'downloading' | 'downloaded' | 'disabled'
+      downloadProgress: 0,
+      baseCompleter: [] // Needed to reset ace editor, due global-only ace completer
+   }),
+   getters: {
+      getBaseCompleter: state => state.baseCompleter,
+      getSelectedConnection: state => state.selectedConection,
+      getDownloadProgress: state => Number(state.downloadProgress.toFixed(1))
+   },
+   actions: {
+      checkVersionUpdate () {
+         if (this.appVersion !== this.cachedVersion) {
+            this.showSettingModal('changelog');
+            this.cachedVersion = this.appVersion;
+            persistentStore.set('cached_version', this.cachedVersion);
+         }
+      },
+      setLoadingStatus (payload) {
+         this.isLoading = payload;
+      },
+      setBaseCompleters (payload) {
+         this.baseCompleter = payload;
+      },
+      // Modals
+      showNewConnModal () {
+         this.isNewModal = true;
+      },
+      hideNewConnModal () {
+         this.isNewModal = false;
+      },
+      showSettingModal (tab) {
+         this.selectedSettingTab = tab;
+         this.isSettingModal = true;
+      },
+      hideSettingModal () {
+         this.isSettingModal = false;
+      },
+      showScratchpad () {
+         this.isScratchpad = true;
+      },
+      hideScratchpad () {
+         this.isScratchpad = false;
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useApplicationStore, import.meta.webpackHot));

webpack.renderer.config.js

@@ -14,7 +14,7 @@ const parsedContributors = contributors.reduce((acc, c) => {
 }, []).join(',');
 
 const isDevMode = process.env.NODE_ENV !== 'production';
-const whiteListedModules = ['.bin', 'vue', '@vue'];
+const whiteListedModules = ['.bin', 'vue', '@vue', 'pinia', 'vue-i18n'];
 const externals = {};
 
 fs.readdirSync('node_modules')