Merge branch 'master' of https://github.com/feathersjs-ecosystem/feathers-vuex into find-copies

Author: fratzinger

docs/3.0-major-release.md

@@ -16,6 +16,33 @@ Version 3.0 of Feathers-Vuex is the Vue Composition API release!  There were qui
 
 And now it has become the best way to perform queries with Feathers-Vuex.  To find out how to take advantage of the new functionality in your apps, read the [Feather-Vuex Composition API docs](./composition-api.md).
 
+## New `extend` option for `makeServicePlugin` <Badge text="3.9.0+" />
+
+The `makeServicePlugin` now supports an `extend` method that allows customizing the store and gives access to the actual Vuex `store` object, as shown in this example:
+
+```js
+import { makeServicePlugin } from ‘feathers-vuex’
+import { feathersClient } from ‘./feathers-client.js’
+
+class Todo { /* truncated */ }
+
+export default makeServicePlugin({
+  Model: Todo,
+  service: feathersClient.service(‘todos’),
+  extend({ store, module }) {
+    // Listen to other parts of the store
+    store.watch(/* truncated */)
+
+    return {
+      state: {},
+      getters: {},
+      mutations: {},
+      actions: {}
+    }
+  }
+})
+```
+
 ## Partial data on patch <Badge text="3.9.0+" />
 As of version 3.9.0, you can provide an object as `params.data`, and Feathers-Vuex will use `params.data` as the patch data.  This change was made to the service-module, itself, so it will work for `patch` across all of feathers-vuex.  Here's an example of patching with partial data:
 

docs/service-plugin.md

@@ -733,7 +733,36 @@ The `find` getter queries data from the local store using the same Feathers quer
 
 ## Customizing a Service's Default Store
 
-As shown in the example below, the service module allows you to customize its store:
+### New `extend` option for `makeServicePlugin` <Badge text="3.14.0+" />
+
+As of version `3.14.0`, the `makeServicePlugin` now supports an `extend` method that allows customizing the store and gives access to the actual Vuex `store` object, as shown in this example:
+
+```js
+import { makeServicePlugin } from ‘feathers-vuex’
+import { feathersClient } from ‘./feathers-client.js’
+
+class Todo { /* truncated */ }
+
+export default makeServicePlugin({
+  Model: Todo,
+  service: feathersClient.service(‘todos’),
+  extend({ store, module }) {
+    // Listen to other parts of the store
+    store.watch(/* truncated */)
+
+    return {
+      state: {},
+      getters: {},
+      mutations: {},
+      actions: {}
+    }
+  }
+})
+```
+
+### Deprecated options for customizing the store
+
+Before version `3.14.0`, you can customize the store using the options for `state`, `getters`, `mutations`, and `actions`, as shown below.  This method is now deprecated and will be removed from Feathers-Vuex 4.0.
 
 ```js
 // src/store/services/users.js

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "feathers-vuex",
   "description": "FeathersJS, Vue, and Nuxt for the artisan developer",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "homepage": "https:feathers-vuex.feathersjs-ecosystem.com",
   "main": "dist/",
   "module": "dist/",

package.json

@@ -3,27 +3,37 @@ eslint
 @typescript-eslint/explicit-function-return-type: 0,
 @typescript-eslint/no-explicit-any: 0
 */
+import _pick from 'lodash/pick'
+import _merge from 'lodash/merge'
 import makeDefaultState from './service-module.state'
 import makeGetters from './service-module.getters'
 import makeMutations from './service-module.mutations'
 import makeActions from './service-module.actions'
 import { Service } from '@feathersjs/feathers'
 import { MakeServicePluginOptions } from './types'
+import { Store } from 'vuex'
 
 export default function makeServiceModule(
   service: Service<any>,
-  options: MakeServicePluginOptions
+  options: MakeServicePluginOptions,
+  store: Store<any>
 ) {
-  const defaultState = makeDefaultState(options)
-  const defaultGetters = makeGetters()
-  const defaultMutations = makeMutations()
-  const defaultActions = makeActions(service)
-
-  return {
+  const defaults = {
     namespaced: true,
-    state: Object.assign({}, defaultState, options.state),
-    getters: Object.assign({}, defaultGetters, options.getters),
-    mutations: Object.assign({}, defaultMutations, options.mutations),
-    actions: Object.assign({}, defaultActions, options.actions)
+    state: makeDefaultState(options),
+    getters: makeGetters(),
+    mutations: makeMutations(),
+    actions: makeActions(service)
   }
+  const fromOptions = _pick(options, [
+    'state',
+    'getters',
+    'mutations',
+    'actions'
+  ])
+  const merged = _merge({}, defaults, fromOptions)
+  const extended = options.extend({ store, module: merged })
+  const finalModule = _merge({}, merged, extended)
+
+  return finalModule
 }

src/service-module/make-service-module.ts

@@ -3,7 +3,12 @@ eslint
 @typescript-eslint/explicit-function-return-type: 0,
 @typescript-eslint/no-explicit-any: 0
 */
-import { FeathersVuexOptions, MakeServicePluginOptions } from './types'
+import {
+  FeathersVuexOptions,
+  MakeServicePluginOptions,
+  ServicePluginExtendOptions
+} from './types'
+
 import makeServiceModule from './make-service-module'
 import { globalModels, prepareAddModel } from './global-models'
 import enableServiceEvents from './service-module.events'
@@ -13,6 +18,14 @@ import _get from 'lodash/get'
 interface ServiceOptionsDefaults {
   servicePath: string
   namespace: string
+  extend: (
+    options: ServicePluginExtendOptions
+  ) => {
+    state: any
+    getters: any
+    mutations: any
+    actions: any
+  }
   state: {}
   getters: {}
   mutations: {}
@@ -25,6 +38,7 @@ interface ServiceOptionsDefaults {
 const defaults: ServiceOptionsDefaults = {
   namespace: '', // The namespace for the Vuex module. Will generally be derived from the service.path, service.name, when available. Otherwise, it must be provided here, explicitly.
   servicePath: '',
+  extend: ({ module }) => module, // for custom plugin (replaces state, getters, mutations, and actions)
   state: {}, // for custom state
   getters: {}, // for custom getters
   mutations: {}, // for custom mutations
@@ -91,7 +105,7 @@ export default function prepareMakeServicePlugin(
     return store => {
       // (1^) Create and register the Vuex module
       options.namespace = makeNamespace(namespace, servicePath, nameStyle)
-      const module = makeServiceModule(service, options)
+      const module = makeServiceModule(service, options, store)
       // Don't preserve state if reinitialized (prevents state pollution in SSR)
       store.registerModule(options.namespace, module, { preserveState: false })
 

src/service-module/make-service-plugin.ts

@@ -107,6 +107,7 @@ export default function makeDefaultState(options: MakeServicePluginOptions) {
     'instanceDefaults',
     'setupInstance',
     'handleEvents',
+    'extend',
     'state',
     'getters',
     'mutations',

src/service-module/service-module.state.ts

@@ -37,6 +37,11 @@ export interface HandleEvents {
   removed?: Function
 }
 
+export interface ServicePluginExtendOptions {
+  store: Store<any>
+  module: any
+}
+
 export interface MakeServicePluginOptions {
   Model: any
   service: Service<any>
@@ -65,6 +70,15 @@ export interface MakeServicePluginOptions {
   instanceDefaults?: () => {}
   setupInstance?: (data: any, { models, store }) => {}
   handleEvents?: HandleEvents
+
+  extend?: (
+    options: ServicePluginExtendOptions
+  ) => {
+    state?: any
+    getters?: any
+    mutations?: any
+    actions?: any
+  }
   state?: {}
   getters?: {}
   mutations?: {}

src/service-module/types.ts

@@ -11,40 +11,50 @@ const baseUrl = 'http://localhost:3030'
 
 // These are fixtures used in the service-modulet.test.js under socket events.
 let id = 0
-mockServer.on('things::create', function (data) {
+mockServer.on('things::create', function (data, params, cb) {
   data.id = id
   id++
   mockServer.emit('things created', data)
+  cb(null, data)
 })
-mockServer.on('things::patch', function (id, data) {
+mockServer.on('things::patch', function (id, data, params, cb) {
   Object.assign(data, { id, test: true })
   mockServer.emit('things patched', data)
+  cb(null, data)
 })
-mockServer.on('things::update', function (id, data) {
+mockServer.on('things::update', function (id, data, params, cb) {
   Object.assign(data, { id, test: true })
   mockServer.emit('things updated', data)
+  cb(null, data)
 })
-mockServer.on('things::remove', function (id) {
-  mockServer.emit('things removed', { id, test: true })
+mockServer.on('things::remove', function (id, obj, cb) {
+  const response = { id, test: true }
+  mockServer.emit('things removed', response)
+  cb(null, response)
 })
 
 let idDebounce = 0
 
-mockServer.on('things-debounced::create', function (data) {
+mockServer.on('things-debounced::create', function (data, obj, cb) {
   data.id = idDebounce
   idDebounce++
   mockServer.emit('things-debounced created', data)
+  cb(null, data)
 })
-mockServer.on('things-debounced::patch', function (id, data) {
+mockServer.on('things-debounced::patch', function (id, data, params, cb) {
   Object.assign(data, { id, test: true })
   mockServer.emit('things-debounced patched', data)
+  cb(null, data)
 })
-mockServer.on('things-debounced::update', function (id, data) {
+mockServer.on('things-debounced::update', function (id, data, params, cb) {
   Object.assign(data, { id, test: true })
   mockServer.emit('things-debounced updated', data)
+  cb(null, data)
 })
-mockServer.on('things-debounced::remove', function (id) {
-  mockServer.emit('things-debounced removed', { id, test: true })
+mockServer.on('things-debounced::remove', function (id, params, cb) {
+  const response = { id, test: true }
+  mockServer.emit('things-debounced removed', response)
+  cb(null, response)
 })
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type