Merge branch 'master' into count

Author: marshallswain

.vscode/settings.json

@@ -15,5 +15,8 @@
     "activityBar.background": "#2B3011",
     "titleBar.activeBackground": "#3C4418",
     "titleBar.activeForeground": "#FAFBF4"
-  }
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.arrowParens": "avoid",
+  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
 }

docs/composition-api.md

@@ -105,7 +105,7 @@ interface UseFindOptions {
   fetchParams?: Params | Ref<Params>
   queryWhen?: Ref<Function>
   qid?: string
-  lazy?: boolean
+  immediate?: boolean
 }
 ```
 
@@ -123,7 +123,7 @@ And here's a look at each individual property:
   - Explicitly returning `null` will prevent an API request from being made.
 - `queryWhen` must be a `computed` property which returns a `boolean`. It provides a logical separation for preventing API requests *outside* of the `params`.
 - `qid` allows you to specify a query identifier (used in the pagination data in the store).  This can also be set dynamically by returning a `qid` in the params.
-- `lazy`, which is `false` by default, determines if the internal `watch` should fire immediately.  Set `lazy: true` and the query will not fire immediately.  It will only fire on subsequent changes to the params.
+- `immediate`, which is `true` by default, determines if the internal `watch` should fire immediately.  Set `immediate: false` and the query will not fire immediately.  It will only fire on subsequent changes to the params.
 
 ### Returned Attributes
 
@@ -208,7 +208,7 @@ If you have already used the `makeFindMixin`, the `useFind` composition function
 
 1. `useFind` is more TypeScript friendly. Since the mixins depended on adding dynamic attribute names that wouldn't overlap, TypeScript tooling and autocomplete weren't very effective.  The attributes returned from `useFind` are always consistent.
 1. Instead of providing a service name, you provide a service Model from the `$FeathersVuex` Vue plugin.
-1. The default behavior of `useFind` is to immediately query the API server. The `makeFindMixin`, by default, would wait until the watcher noticed the change.  This is to match the default behavior of `watch` in the Vue Composition API.  You can pass `{ lazy: true }` in the `useFind` options, which will be passed directly to the internal `watch` on the params.
+1. The default behavior of `useFind` is to immediately query the API server. The `makeFindMixin`, by default, would wait until the watcher noticed the change.  This is to match the default behavior of `watch` in the Vue Composition API.  You can pass `{ immediate: false }` in the `useFind` options, which will be passed directly to the internal `watch` on the params.
 
 Note that with the Vue Options API (aka the only way to write components in Vue 2.0) the models are found in `this.$FeathersVuex`.  With the Vue Composition API, this object is now at `context.root.$FeathersVuex`.
 
@@ -268,7 +268,7 @@ interface UseGetOptions {
   params?: Params | Ref<Params>
   queryWhen?: Ref<Function>
   local?: boolean
-  lazy?: boolean
+  immediate?: boolean
 }
 ```
 
@@ -281,7 +281,7 @@ And here's a look at each individual property:
 - `params` is a FeathersJS Params object OR a Composition API `ref` (or `computed`, since they return a `ref` instance) which returns a Params object.
   - Unlike the `useFind` utility, `useGet` does not currently have built-in debouncing.
 - `queryWhen` must be a `computed` property which returns a `boolean`. It provides a logical separation for preventing API requests apart from `null` in the `id`.
-- `lazy`, which is `true` by default, determines if the internal `watch` should fire immediately.  By default a single query will be performed, independent of the watchers.  Set `lazy: false` and the watchers on the `id` and `params` will fire immediately (currently this will cause duplicate queries to be performed, so it's not recommended).
+- `immediate`, which is `true` by default, determines if the internal `watch` should fire immediately.  Set `immediate: false` and the query will not fire immediately.  It will only fire on subsequent changes to the `id` or `params`.
 
 ### Returned Attributes
 
@@ -779,6 +779,21 @@ export default new Router({
 
 Now, the `Post.vue` file only requires to have a `prop` named `id`.  Vue Router will pass the params from the route as props to the component.  See the [first useGet example](#useget) for a component that would work with the above route.  The vue-router documentation has more information about [Passing Props to Route Components](https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components)
 
+### Composing with Model types
+
+Both `useGet` and `useFind` have an optional type parameter for the Model type which is used as the type for the returned item(s).
+
+```ts
+// Destructure Model class from global models object
+const { User } = Vue.$FeathersVuex.api
+
+// use useGet with User Model
+useGet<typeof User.prototype>(/* ... */)
+
+// use useFind with User Model
+useFind<typeof User.prototype>(/* ... */)
+```
+
 ## Conventions for Development
 
 ### Params are Computed

docs/feathers-vuex-forms.md

@@ -458,7 +458,7 @@ export default {
     // Optionally make the event handler async.
     async save({ event, clone, prop, data }) {
       const user = clone.commit()
-      return user.patch(data)
+      return user.patch({ data })
     }
   }
 }
@@ -497,14 +497,14 @@ myCallback({ event, clone, prop, data }) {
 - `event {Event}`: the event which triggered the `handler` function in the slot scope.
 - `clone {clone}`: the cloned version of the `item` instance that was provided as a prop.
 - `prop {String}`: the name of the `prop` that is being edited (will always match the `prop` prop.)
-- `data {Object}`: An object containing the changes that were made to the object. Useful for calling `.patch(data)` on the original instance.
+- `data {Object}`: An object containing the changes that were made to the object. Useful for calling `.patch({ data })` on the original instance.
 
 This callback needs to be customized to fit your business logic.  You might patch the changes right away, as shown in this example callback function.
 
 ```js
 async save({ event, clone, prop, data }) {
   const user = clone.commit()
-  return user.patch(data)
+  return user.patch({ data })
 }
 ```
 
@@ -550,7 +550,7 @@ export default {
     // The callback can be async
     async save({ event, clone, prop, data }) {
       const user = clone.commit()
-      return user.patch(data)
+      return user.patch({ data })
     }
   }
 }
@@ -593,7 +593,7 @@ export default {
     // The callback can be async
     async save({ event, clone, prop, data }) {
       const user = clone.commit()
-      return user.patch(data)
+      return user.patch({ data })
     }
   }
 }
@@ -640,7 +640,7 @@ export default {
     // The original, non-debounced save function
     async function save({ event, clone, prop, data }) {
       const user = clone.commit()
-      return user.patch(data)
+      return user.patch({ data })
     }
     // The debounced wrapper around the save function
     const debouncedSave = _debounce(save, 100)

docs/getting-started.md

@@ -245,7 +245,7 @@ const requireModule = require.context(
   // Whether to look in subfolders
   false,
   // Only include .js files (prevents duplicate imports`)
-  /.js$/
+  /\.js$/
 )
 const servicePlugins = requireModule
   .keys()

docs/model-classes.md

@@ -51,6 +51,77 @@ User.instanceDefaults = function() {
 }
 ```
 
+### BaseModel typing
+
+BaseModel typing gives helpful IDE autocomplete and errors when using Model classes.
+
+Since Feathers-Vuex doesn't know what your data looks like, you will need to help define your underlying model data's interface.
+
+By default, Model classes are `string` indexable with value of type `any`. This isn't super helpful...
+
+```ts
+// Just like before, we define our class as an extension of BaseModel
+class User extends BaseModel { /* ... */ }
+
+// Augment the User Model interface
+interface User {
+  email: string
+  password: string
+}
+```
+
+Now, whenever we access a `User` model, all fields defined in the interface will be available in IDE auto-complete/intellisense along with the model methods/props.
+
+If you already have a User interface defined under a different name, just define a new interface with the same name as your Model class like so
+
+```ts
+// if our User interface already exists as UserRecord
+interface User extends UserRecord {}
+```
+
+To further enhance typing, you can augment FeathersVuex types to aid development in other parts of your app. It's important to note the differences in the following example if you do or do not setup a `serverAlias`.
+
+```ts
+// src/store/user.store.ts
+import { ServiceState } from 'feathers-vuex'
+
+class User extends BaseModel { /* ... */ }
+interface User { /* ... */ }
+const servicePath = 'users'
+
+declare module "feathers-vuex" {
+  interface FeathersVuexStoreState {
+    [servicePath]: ServiceState<User>
+  }
+
+  // Only if you setup FeathersVuex without a serverAlias!!
+  interface FeathersVuexGlobalModels {
+    User: typeof User
+  }
+}
+
+// Only if you setup FeathersVuex with a serverAlias!!
+declare module "src/store" {
+  interface MyApiModels {
+    User: typeof User
+  }
+}
+```
+
+If you have setup a `serverAlias`, you need to add the following to `src/store/index.ts`.
+
+```ts
+// src/store/index.ts
+export interface MyApiModels { /* Let each service augment this interface */ }
+declare module "feathers-vuex" {
+  interface FeathersVuexGlobalModels {
+    'my-api-name': MyApiModels
+  }
+}
+```
+
+Replace `my-api-name` with the `serverAlias` you used when setting up FeathersVuex.
+
 ## Model attributes
 
 The following attributes are available on each model: