chore: use pinia for status store

.github/workflows/deploy_develop.yml

@@ -40,7 +40,7 @@ jobs:
           yarn run lint
 
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v6
         with:
           start: yarn dev
           wait-on: 'http://localhost:5173'

package.json

@@ -34,6 +34,7 @@
     "howler": "^2.1.3",
     "keypress.js": "^2.1.5",
     "lodash": "4.17.21",
+    "pinia": "^2.2.4",
     "v-tooltip": "^2.1.3",
     "vue": "2",
     "vue-i18n": "^8.10.0",

src/api.js

@@ -1,14 +1,16 @@
 import axios from 'axios';
 import store from './store';
+import { useStatusStore } from './store/status';
 
 import { backend_compile_url } from './store/modules/constants';
 
 let compile_status = undefined;
 let baking = 'Baking';
 
 function statusError(message) {
-  store.commit('status/append', message);
-  store.dispatch('status/scrollToEnd');
+  const statusStore = useStatusStore();
+  statusStore.append(message);
+  statusStore.scrollToEnd();
 }
 
 function compileLayout(_keyboard, _keymapName, _layout) {
@@ -24,22 +26,20 @@ function compileLayout(_keyboard, _keymapName, _layout) {
     })
   );
   console.log(request);
-  if (store.getters['status/empty']) {
-    store.commit('status/append', '\n');
+  const statusStore = useStatusStore();
+  if (statusStore.empty) {
+    statusStore.append('\n');
   }
-  store.commit(
-    'status/append',
-    `* Sending ${_keyboard}:${_keymapName} with ${_layout}`
-  );
+  statusStore.append(`* Sending ${_keyboard}:${_keymapName} with ${_layout}`);
   axios
     .post(backend_compile_url, request)
     .then((resp) => {
       const { status, data } = resp;
       if (status === 200) {
         store.commit('app/setShowSpinner', true);
         if (data.enqueued) {
-          store.commit('status/append', `\n* Received job_id: ${data.job_id}`);
-          store.dispatch('status/scrollToEnd');
+          statusStore.append(`\n* Received job_id: ${data.job_id}`);
+          statusStore.scrollToEnd();
           store.commit('app/setJobID', data.job_id);
           check_status();
         }
@@ -80,6 +80,7 @@ function disableOtherButtons() {
 function check_status() {
   const url = `${backend_compile_url}/${store.state.app.jobID}`;
   const start = performance.now();
+  const statusStore = useStatusStore();
   axios
     .get(url)
     .then((resp) => {
@@ -95,8 +96,7 @@ function check_status() {
         switch (data.status) {
           case 'finished':
             store.commit('app/setSpinnerMsg', 'Done!');
-            store.commit(
-              'status/append',
+            statusStore.append(
               `\n* Finished:\n${data.result.output.replace(/\[.*m/gi, '')}`
             );
             store.commit(
@@ -118,13 +118,13 @@ function check_status() {
           case 'queued':
             store.commit('app/setSpinnerMsg', 'Waiting for Oven');
             msg = compile_status === 'queued' ? ' .' : '\n* Queueing';
-            store.commit('status/append', msg);
+            statusStore.append(msg);
             setTimeout(check_status, pollInterval);
             break;
           case 'running':
             store.commit('app/setSpinnerMsg', baking);
             msg = compile_status === 'running' ? ' .' : '\n* Running';
-            store.commit('status/append', msg);
+            statusStore.append(msg);
             setTimeout(check_status, pollInterval);
             break;
           case 'unknown':
@@ -145,7 +145,7 @@ function check_status() {
             enableCompileButton();
         }
       }
-      store.dispatch('status/scrollToEnd');
+      statusStore.scrollToEnd();
       compile_status = data.status;
     })
     .catch((err) => {

src/components/ControllerBottom.vue

@@ -121,6 +121,7 @@
 <script>
 import Vue from 'vue';
 import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
+import * as pinia from 'pinia';
 import first from 'lodash/first';
 import isUndefined from 'lodash/isUndefined';
 import { clearKeymapTemplate } from '@/common.js';
@@ -135,6 +136,8 @@ const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 import remap from '@/remap';
 
+import { useStatusStore } from '../store/status';
+
 const encoding = 'data:application/json;charset=utf-8,';
 
 export default {
@@ -211,15 +214,18 @@ export default {
     ]),
     ...mapMutations('keymap', ['setLoadingKeymapPromise', 'setDirty', 'clear']),
     ...mapMutations('keymap', { clearKeymap: 'clear' }),
-    ...mapMutations('status', ['deferredMessage', 'append']),
-    ...mapMutations('status', { clearStatus: 'clear' }),
     ...mapActions('app', [
       'changeKeyboard',
       'loadKeymapFromUrl',
       'loadLayouts'
     ]),
-    ...mapActions('status', ['viewReadme']),
     ...mapActions('keymap', ['load_converted_keymap']),
+    ...pinia.mapActions(useStatusStore, [
+      'viewReadme',
+      'deferredMessage',
+      'append',
+      'clearStatus'
+    ]),
     async importUrlkeymap() {
       try {
         const data = await this.loadKeymapFromUrl(this.urlImport);

src/components/ControllerTop.vue

@@ -92,6 +92,7 @@
 <script>
 import Vue from 'vue';
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import * as pinia from 'pinia';
 
 import first from 'lodash/first';
 import random from 'lodash/random';
@@ -107,6 +108,8 @@ import { clearKeymapTemplate } from '@/common';
 import VueRouter from 'vue-router';
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
+import { useStatusStore } from '../store/status';
+
 export default {
   name: 'ControllerTop',
   data: () => {
@@ -241,6 +244,12 @@ export default {
       'setFavoriteKeyboard'
     ]),
     ...mapActions('keymap', ['initTemplates', 'load_converted_keymap']),
+    ...pinia.mapActions(useStatusStore, [
+      'append',
+      'deferredMessage',
+      'clearStatus',
+      'viewReadme'
+    ]),
     /**
      * loadDefault keymap. Attempts to load the keymap data from
      * a predefined known file path.
@@ -282,8 +291,8 @@ export default {
               // This is a dirty hack so that the status message appears both after pressing load default
               // and switching keyboards. This entire flow needs redesigning as it was written
               // when I had a poor understanding of vue observability.
-              store.commit('status/append', msg);
-              store.commit('status/deferredMessage', msg);
+              this.append(msg);
+              this.deferredMessage(msg);
             }
           });
           return promise;
@@ -369,7 +378,7 @@ export default {
       }
     },
     postUpdateKeyboard() {
-      this.$store.commit('status/clear');
+      this.clearStatus();
       this.$router
         .replace({
           path: `/${this.keyboard}/${this.layout}`
@@ -383,7 +392,7 @@ export default {
           }
           throw failure;
         });
-      this.$store.dispatch('status/viewReadme', this.keyboard);
+      this.viewReadme(this.keyboard);
     },
     /**
      * updateLayout - switch the layout for this keyboard

src/components/StatusPanel.vue

@@ -26,13 +26,16 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapMutations, mapState } from 'vuex';
+import { mapState } from 'vuex';
+import * as pinia from 'pinia';
+import { useStatusStore } from '../store/status';
+
 export default {
   name: 'status-panel',
   watch: {
     message(newV, oldV) {
       if (this.scrollToLatest && newV !== oldV) {
-        this.scrollToEnd();
+        this.scrollViewportToEnd();
         this.doneScroll();
       }
     },
@@ -43,8 +46,8 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('status', ['doneScroll']),
-    scrollToEnd() {
+    ...pinia.mapActions(useStatusStore, ['doneScroll']),
+    scrollViewportToEnd() {
       let terminal = this.$refs.terminal;
       this.$nextTick(() => {
         terminal.scrollTop = terminal.scrollHeight;
@@ -60,7 +63,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('status', ['message', 'scrollToLatest']),
+    ...pinia.mapState(useStatusStore, ['message', 'scrollToLatest']),
     ...mapState('app', ['compileDisabled']),
     terminalClasses() {
       const classes = [];

src/electron.js

@@ -1,17 +1,19 @@
 import store from './store';
+import { useStatusStore } from './store/status';
 
 export default {
   init() {
     //We use the Bridge as a way to share functions between electron and vue
+    const statusStore = useStatusStore();
     if (window.Bridge) {
       store.commit('app/enableElectron');
       window.Bridge.statusAppendNoLF = (txt) => {
-        store.commit('status/append', `${txt}`);
-        store.dispatch('status/scrollToEnd');
+        statusStore.append(`${txt}`);
+        statusStore.scrollToEnd();
       };
       window.Bridge.statusAppend = (txt) => {
-        store.commit('status/append', `\n${txt}`);
-        store.dispatch('status/scrollToEnd');
+        statusStore.append(`\n${txt}`);
+        statusStore.scrollToEnd();
       };
     }
   }

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import store from './store';
+import store, { pinia } from './store';
 import StatusBar from '@/components/StatusBar.vue';
 import BrowserWarn from '@/components/BrowserWarn.vue';
 import Veil from '@/components/Veil.vue';
@@ -116,13 +116,15 @@ store.$i18n = i18n._vm;
 new Vue({
   router,
   store,
+  pinia,
   i18n,
   render: (h) => h(App)
 }).$mount('#app');
 
 new Vue({
-  i18n,
   store,
+  pinia,
+  i18n,
   render: (h) => h(StatusBar)
 }).$mount('#status-app');
 

src/store/index.js

@@ -1,17 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 import app from './modules/app';
-import status from './modules/status';
 import keymap from './modules/keymap';
 import keycodes from './modules/keycodes';
 import tester from './modules/tester';
 
 Vue.use(Vuex);
+Vue.use(PiniaVuePlugin);
+
+export const pinia = createPinia();
 
 export default new Vuex.Store({
   modules: {
     app,
-    status,
     keymap,
     keycodes,
     tester