For danielroe#266: Add support of (un)registering global dynamic modules support

Author: drodichkin

packages/nuxt-typed-vuex/src/index.ts

@@ -24,4 +24,5 @@ const nuxtTypedVuex: Module = function nuxtTypedVuex() {
 
 ;(nuxtTypedVuex as any).meta = { name, version }
 
+export * from './types/accessorRegisterModule'
 export default nuxtTypedVuex

packages/nuxt-typed-vuex/src/types/accessorRegisterModule.ts

@@ -0,0 +1,26 @@
+import type {Module} from "vuex";
+
+type AccessorRegisterModule = (path: string | [string, ...string[]], module: Module<any, any>) => void
+
+declare module '@nuxt/types' {
+  interface NuxtAppOptions {
+    $accessorRegisterModule: AccessorRegisterModule;
+  }
+
+  interface Context {
+    $accessorRegisterModule: AccessorRegisterModule;
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $accessorRegisterModule: AccessorRegisterModule;
+  }
+}
+
+declare module 'vuex/types/index' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Store<S> {
+    $accessorRegisterModule: AccessorRegisterModule;
+  }
+}

packages/nuxt-typed-vuex/template/plugin.js

@@ -1,9 +1,13 @@
-import { getAccessorFromStore } from 'typed-vuex'
+import { getAccessorFromStore, registerModule } from 'typed-vuex'
 
 import { createStore } from '<%= options.store %>'
 
 const storeAccessor = getAccessorFromStore(createStore())
 
 export default async ({ store }, inject) => {
-  inject('accessor', storeAccessor(store))
+  const accessor = storeAccessor(store)
+  inject('accessor', accessor)
+  inject('accessorRegisterModule', (path, module) => {
+    registerModule(path, store, accessor, module)
+  })
 }

packages/typed-vuex/src/accessor.ts

@@ -1,15 +1,13 @@
-import { Store, GetterTree, MutationTree, ActionTree } from 'vuex'
-import { NuxtStoreInput, MergedStoreType, BlankStore } from './types/store'
-import { State, StateType } from './types/state'
-import { NuxtModules } from './types/modules'
+import {ActionTree, GetterTree, Module, MutationTree, Store} from 'vuex'
+import {BlankStore, MergedStoreType, NuxtStoreInput} from './types/store'
+import {State, StateType} from './types/state'
+import {NuxtModules} from './types/modules'
 
-export const getAccessorType = <
-  T extends State,
+export const getAccessorType = <T extends State,
   G extends GetterTree<StateType<T>, any>,
   M extends MutationTree<StateType<T>>,
   A extends ActionTree<StateType<T>, any>,
-  S extends NuxtModules
->(
+  S extends NuxtModules>(
   store: Partial<NuxtStoreInput<T, G, M, A, S>>
 ) => {
   return (undefined as any) as MergedStoreType<typeof store & BlankStore>
@@ -65,13 +63,11 @@ const createAccessor = <T extends State, G, M, A, S extends NuxtModules>(
   return accessor
 }
 
-export const useAccessor = <
-  T extends State,
+export const useAccessor = <T extends State,
   G extends GetterTree<StateType<T>, any>,
   M extends MutationTree<StateType<T>>,
   A extends ActionTree<StateType<T>, any>,
-  S extends NuxtModules
->(
+  S extends NuxtModules>(
   store: Store<any>,
   input: Partial<NuxtStoreInput<T, G, M, A, S>>,
   namespace?: string
@@ -97,3 +93,56 @@ export const getAccessorFromStore = (pattern: any) => {
   return (store: Store<any>) =>
     useAccessor(store, pattern._modules.root._rawModule)
 }
+
+export const registerModule = (
+  path: string | [string, ...string[]],
+  store: Store<any>,
+  accessor: MergedStoreType<Partial<NuxtStoreInput<any, any, any, any, any>> & BlankStore, string>,
+  module: Module<any, any>
+) => {
+  module.namespaced = true
+
+  if (module.modules) module.modules = Object.entries(module.modules).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: {
+      ...value,
+      namespaced: true,
+    }
+  }), {}) as typeof module['modules']
+
+  let preserveState = false
+  if (typeof path === 'string') preserveState = !!store.state[path]
+  else {
+    let target = store.state
+    for (const key of path) {
+      if (!target) break
+      target = target[key]
+    }
+    preserveState = !!target
+  }
+
+  const paths = typeof path === 'string' ? [path] : path
+
+  let target = accessor;
+  paths.forEach((part, index) => {
+    if (index === paths.length - 1) {
+      if (!target) throw new Error(`Could not find parent module for ${paths[index - 1] || paths[index]}`);
+
+      store.registerModule(path as string, module as Module<any, any>, {
+        preserveState,
+      })
+      target[part] = useAccessor(store, module, paths.join('/'));
+    } else {
+      target = target[part];
+    }
+  })
+}
+
+export const unregisterModule = (
+  path: string | [string, ...string[]],
+  store: Store<any>,
+  accessor: MergedStoreType<Partial<NuxtStoreInput<any, any, any, any, any>> & BlankStore, string>
+) => {
+  store.unregisterModule(path as string)
+  delete accessor[path[path.length - 1]]
+}

packages/typed-vuex/src/index.ts

@@ -3,5 +3,5 @@ export * from './types/actions'
 export * from './types/getters'
 export * from './types/mutations'
 export * from './types/utils'
-export { useAccessor, getAccessorType, getAccessorFromStore } from './accessor'
+export { useAccessor, getAccessorType, getAccessorFromStore, registerModule, unregisterModule } from './accessor'
 export { createMapper } from './utils'

packages/typed-vuex/src/types/modules.ts

@@ -1,7 +1,9 @@
 import { NuxtStore, MergedStoreType, BlankStore } from './store'
 
-export type NuxtModules = Record<string, Partial<NuxtStore>>
+export type NuxtModules = Record<string, Partial<NuxtStore & {dynamic: boolean}>>
+
+type TransformedModule<T extends NuxtModules, P extends keyof T, O = string> = MergedStoreType<T[P] & BlankStore, O>
 
 export type ModuleTransformer<T, O = string> = T extends NuxtModules
-  ? { [P in keyof T]: MergedStoreType<T[P] & BlankStore, O> }
+  ? { [P in keyof T]: T[P]['dynamic'] extends boolean ? undefined | TransformedModule<T, P, O> : TransformedModule<T, P, O> }
   : {}

packages/typed-vuex/src/types/store.ts

@@ -26,12 +26,16 @@ export interface NuxtStore {
   modules: NuxtModules
 }
 
+export interface ExtendedNuxtStore extends NuxtStore {
+  dynamic: boolean;
+}
+
 export interface NuxtStoreInput<
   T extends State,
   G,
   M,
   A,
-  S extends { [key: string]: Partial<NuxtStore> }
+  S extends { [key: string]: Partial<ExtendedNuxtStore> }
 > {
   namespaced?: boolean
   state: T