Create a proof-of-concept for Pinia migration

.eslintrc.js

@@ -1,3 +1,6 @@
+// WebStorm fix for `~` alias not working:
+// https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000771544-ESLint-does-not-work-with-webpack-import-resolver-in-2017-3
+process.chdir(__dirname)
 module.exports = {
   root: true,
   env: {

nuxt.config.ts

@@ -147,6 +147,7 @@ const config: NuxtConfig = {
     '@nuxtjs/style-resources',
     '@nuxtjs/svg',
     '@nuxtjs/eslint-module',
+    ['@pinia/nuxt', { disableVuex: false }],
   ],
   // Load the scss variables into every component:
   // No need to import them. Since the variables will not exist in the final build,
@@ -223,6 +224,12 @@ const config: NuxtConfig = {
     // Enables use of IDE debuggers
     extend(config, ctx) {
       config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
+      // Mitigates import errors for Pinia
+      config.module?.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      })
     },
   },
   storybook: {

package.json

@@ -49,6 +49,7 @@
     "@nuxtjs/sentry": "^5.1.5",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/svg": "^0.3.0",
+    "@pinia/nuxt": "^0.1.8",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@wordpress/is-shallow-equal": "^4.3.1",
@@ -77,6 +78,7 @@
     "lodash.throttle": "^4.1.1",
     "node-html-parser": "^5.1.0",
     "nuxt": "^2.15.4",
+    "pinia": "^2.0.11",
     "postcss-focus-visible": "^6.0.3",
     "reakit-utils": "^0.15.2",
     "seeded-rand": "^2.0.1",
@@ -92,6 +94,7 @@
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/style-resources": "^1.0.0",
+    "@pinia/testing": "^0.0.9",
     "@playwright/test": "^1.16.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.2.1",
@@ -120,6 +123,7 @@
     "jest": "^26.6.3",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^11.1.1",
+    "pinia": "^2.0.11",
     "postcss": "^8.4.5",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",

src/components/VAudioTrack/VAudioTrack.vue

@@ -50,12 +50,9 @@ import {
 
 import { useActiveAudio } from '~/composables/use-active-audio'
 
-import { ACTIVE, MEDIA } from '~/constants/store-modules'
+import { MEDIA } from '~/constants/store-modules'
 
-import {
-  PAUSE_ACTIVE_MEDIA_ITEM,
-  SET_ACTIVE_MEDIA_ITEM,
-} from '~/constants/mutation-types'
+import { useActiveMediaStore } from '~/store/active-media'
 
 import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
 import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
@@ -123,6 +120,7 @@ export default defineComponent({
   },
   props: propTypes,
   setup(props, { emit }) {
+    const activeMediaStore = useActiveMediaStore()
     const store = useStore()
     const route = useRoute()
 
@@ -204,15 +202,15 @@ export default defineComponent({
     const setPlaying = () => {
       status.value = 'playing'
       activeAudio.obj.value = localAudio
-      store.commit(`${ACTIVE}/${SET_ACTIVE_MEDIA_ITEM}`, {
+      activeMediaStore.setActiveMediaItem({
         type: 'audio',
         id: props.audio.id,
       })
       updateTimeLoop()
     }
     const setPaused = () => {
       status.value = 'paused'
-      store.commit(`${ACTIVE}/${PAUSE_ACTIVE_MEDIA_ITEM}`)
+      activeMediaStore.pauseActiveMediaItem()
     }
     const setPlayed = () => (status.value = 'played')
     const setTimeWhenPaused = () => {
@@ -252,7 +250,7 @@ export default defineComponent({
       localAudio.removeEventListener('durationchange', setDuration)
 
       if (
-        route.value.params.id == props.audio.id ||
+        route.value.params.id === props.audio.id ||
         store.getters[`${MEDIA}/results`]?.items?.[props.audio.id]
       ) {
         /**
@@ -301,7 +299,7 @@ export default defineComponent({
       () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0 // seconds
     )
 
-    const message = computed(() => store.state.active.message)
+    const message = computed(() => activeMediaStore.message)
 
     /* Interface with VPlayPause */
 

src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -29,13 +29,9 @@
 </template>
 
 <script>
-import {
-  computed,
-  defineComponent,
-  ref,
-  useStore,
-  watch,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, ref, watch } from '@nuxtjs/composition-api'
+
+import { useActiveMediaStore } from '~/store/active-media'
 
 import { useActiveAudio } from '~/composables/use-active-audio'
 
@@ -107,8 +103,7 @@ export default defineComponent({
    * @param {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} props
    */
   setup(props) {
-    const store = useStore()
-
+    const activeMediaStore = useActiveMediaStore()
     const activeAudio = useActiveAudio()
 
     const status = ref('paused')
@@ -200,7 +195,7 @@ export default defineComponent({
       () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0
     ) // seconds
 
-    const message = computed(() => store.state.active.message)
+    const message = computed(() => activeMediaStore.message)
 
     /* Interface with VPlayPause */
 

src/components/VGlobalAudioSection/VGlobalAudioSection.vue

@@ -13,19 +13,15 @@
 <script>
 import { useStore, useRoute, watch, computed } from '@nuxtjs/composition-api'
 
-import { ACTIVE } from '~/constants/store-modules'
-import {
-  SET_MESSAGE,
-  EJECT_ACTIVE_MEDIA_ITEM,
-} from '~/constants/mutation-types'
-
 import { useActiveAudio } from '~/composables/use-active-audio'
+import { useActiveMediaStore } from '~/store/active-media'
 
 import closeIcon from '~/assets/icons/close-small.svg'
 
 export default {
   name: 'VGlobalAudioSection',
   setup() {
+    const activeMediaStore = useActiveMediaStore()
     const store = useStore()
     const route = useRoute()
 
@@ -34,7 +30,7 @@ export default {
     /* Active audio track */
 
     const audio = computed(() => {
-      const trackId = store.state.active.id
+      const trackId = activeMediaStore.id
       if (trackId) {
         return store.state.media.results.audio.items[trackId]
       }
@@ -60,9 +56,7 @@ export default {
           errorMsg = 'err_unsupported'
           break
       }
-      store.commit(`${ACTIVE}/${SET_MESSAGE}`, {
-        message: errorMsg,
-      })
+      activeMediaStore.setMessage({ message: errorMsg })
     }
 
     watch(
@@ -78,9 +72,7 @@ export default {
       { immediate: true }
     )
 
-    const handleClose = () => {
-      store.commit(`${ACTIVE}/${EJECT_ACTIVE_MEDIA_ITEM}`)
-    }
+    const handleClose = activeMediaStore.ejectActiveMediaItem
 
     /* Router observation */
 
@@ -91,7 +83,7 @@ export default {
         !routeNameVal.includes('audio')
       ) {
         activeAudio.obj.value?.pause()
-        store.commit(`${ACTIVE}/${EJECT_ACTIVE_MEDIA_ITEM}`)
+        activeMediaStore.ejectActiveMediaItem()
       }
     })
 

src/components/VNoticeBar/meta/NoticeBar.stories.mdx

@@ -6,7 +6,7 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import NoticeBar from '@/components/VNoticeBar/VNoticeBar'
+import NoticeBar from '~/components/VNoticeBar/VNoticeBar'
 
 <Meta title="Components/Notice bar" component={NoticeBar} />
 

src/constants/mutation-types.js

@@ -10,14 +10,8 @@ export const SET_MEDIA_ITEM = 'SET_MEDIA_ITEM'
 export const SET_MEDIA_PROVIDERS = 'SET_MEDIA_PROVIDERS'
 export const SET_PROVIDERS_FILTERS = 'SET_PROVIDERS_FILTERS'
 export const SET_MEDIA = 'SET_MEDIA'
-export const SET_EMBEDDED = 'SET_EMBEDDED'
-export const SET_REFERRED = 'SET_REFERRED'
 export const SET_SEARCH_TYPE = 'SET_SEARCH_TYPE'
 export const CLEAR_OTHER_MEDIA_TYPE_FILTERS = 'CLEAR_OTHER_MEDIA_TYPE_FILTERS'
-export const SET_ACTIVE_MEDIA_ITEM = 'SET_ACTIVE_MEDIA_ITEM'
-export const PAUSE_ACTIVE_MEDIA_ITEM = 'PAUSE_ACTIVE_MEDIA_ITEM'
-export const EJECT_ACTIVE_MEDIA_ITEM = 'EJECT_ACTIVE_MEDIA_ITEM'
-export const SET_MESSAGE = 'SET_MESSAGE'
 export const RESET_MEDIA = 'RESET_MEDIA'
 export const REPLACE_FILTERS = 'REPLACE_FILTERS'
 export const SET_QUERY = 'SET_QUERY'

src/constants/store-modules.js

@@ -1,7 +1,5 @@
 export const RELATED = 'related'
-export const ACTIVE = 'active'
 export const PROVIDER = 'provider'
-export const NAV = 'nav'
 export const USAGE_DATA = 'usage-data'
 export const SEARCH = 'search'
 export const MEDIA = 'media'

src/layouts/blank.vue

@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { defineComponent, useStore } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import iframeHeight from '~/mixins/iframe-height'
 
-import { NAV } from '~/constants/store-modules'
+import { useNav } from '~/store/nav'
 
 import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
 
@@ -22,8 +22,8 @@ export default defineComponent({
   components: { VMigrationNotice, VTranslationStatusBanner },
   mixins: [iframeHeight],
   setup() {
-    const store = useStore()
-    const isReferredFromCc = store.state[NAV].isReferredFromCc
+    const navStore = useNav()
+    const isReferredFromCc = computed(() => navStore.isReferredFromCc)
     return { isReferredFromCc }
   },
   head() {