chore(docs): minor docs updates (closes bootstrap-vue#3262) (bootstrap-vue#3263)

tmorehouse · jacobmllr95 · commit e2ef9f68358c · 2019-05-10T09:45:46.000+02:00
* chore(docs): minor docs updates

* Update README.md

* Update warn.js

* add warn to $bvToast when not accessing through `this.$bvToast`

* Update bv-modal.js

* Update bv-toast.js

* Update bv-toast.js

* Update bv-modal.js
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
@@ -880,6 +880,11 @@ Example Confirm Message boxes
   method to generate VNodes. This can also be done for the modal title (by passing VNodes to the
   `title` option), OK button text (via the `okTitle` option), and the CANCEL button text (via the
   `cancelTitle` option).
+- The `this.$bvModal` injection is only available when using the full BootstrapVue plugin or the
+  Modal plugin. It is not available if importing just the `b-modal` component.
+- A new `$bvModal` injection (mixin) is created for each Vue virtual machine (i.e. each instantiated
+  component), and is not usable via direct access to the `Vue.prototype`, as it needs access to the
+  instance's `this` and `$root` contexts.
 
 ## Listening to modal changes via \$root events
 
diff --git a/src/components/modal/helpers/bv-modal.js b/src/components/modal/helpers/bv-modal.js
@@ -15,11 +15,12 @@ import {
   defineProperties,
   readonlyDescriptor
 } from '../../../utils/object'
-import { warnNotClient, warnNoPromiseSupport } from '../../../utils/warn'
+import { warn, warnNotClient, warnNoPromiseSupport } from '../../../utils/warn'
 
 // --- Constants ---
 
 const PROP_NAME = '$bvModal'
+const PROP_NAME_PRIV = '_bv__modal'
 
 // Base modal props that are allowed
 // Some may be ignored or overridden on some message boxes
@@ -269,7 +270,7 @@ const install = _Vue => {
     beforeCreate() {
       // Because we need access to `$root` for `$emits`, and VM for parenting,
       // we have to create a fresh instance of `BvModal` for each VM
-      this._bv__modal = new BvModal(this)
+      this[PROP_NAME_PRIV] = new BvModal(this)
     }
   })
 
@@ -278,7 +279,11 @@ const install = _Vue => {
   if (!_Vue.prototype.hasOwnProperty(PROP_NAME)) {
     defineProperty(_Vue.prototype, PROP_NAME, {
       get() {
-        return this._bv__modal
+        /* istanbul ignore next */
+        if (!this || !this[PROP_NAME_PRIV]) {
+          warn(`'${PROP_NAME}' must be accessed from a Vue instance 'this' context`)
+        }
+        return this[PROP_NAME_PRIV]
       }
     })
   }
diff --git a/src/components/toast/README.md b/src/components/toast/README.md
@@ -72,8 +72,8 @@ BootstrapVue uses [PortalVue](https://portal-vue.linusb.org/) to transport toast
 
 ## Toasts on demand
 
-Generate a dynamic toast from anywhere in your app via the `this.$bvToast` Vue instance injection,
-without the need to place a [`<b-toast>`](#b-toast-component) component in your app.
+Generate a dynamic toast from anywhere in your app via the `this.$bvToast` Vue component _instance_
+injection, without the need to place a [`<b-toast>`](#b-toast-component) component in your app.
 
 Use the `this.$bvToast.toast()` method to generate on demand toasts. The method accepts two
 arguments:
@@ -120,9 +120,13 @@ exception of `static`, and `visible`) in <samp>camelCase</samp> name format inst
 Once a toast which was generated using `this.$bvToast.toast()` has been hidden, it will
 automatically be destroyed and removed from the document.
 
-**Note:** The `this.$bvToast` injection is only available when useing the full `BootstrapVue`
-plugin or the `Toast` plugin. It is not available if importing just the `b-toast` or `b-toaster`
-components.
+**Notes:**
+
+- The `this.$bvToast` injection is only available when using the full `BootstrapVue` plugin or the
+  `Toast` plugin. It is not available if importing just the `b-toast` or `b-toaster` components.
+- A new `$bvToast` injection (mixin) is created for each Vue virtual machine (i.e. each instantiated
+  component), and is not usable via direct access to the `Vue.prototype`, as it needs access to the
+  instance's `this` and `$root` contexts.
 
 ## Options
 
diff --git a/src/components/toast/helpers/bv-toast.js b/src/components/toast/helpers/bv-toast.js
@@ -15,12 +15,13 @@ import {
   omit,
   readonlyDescriptor
 } from '../../../utils/object'
-import { warnNotClient } from '../../../utils/warn'
+import { warn, warnNotClient } from '../../../utils/warn'
 import BToast, { props as toastProps } from '../toast'
 
 // --- Constants ---
 
 const PROP_NAME = '$bvToast'
+const PROP_NAME_PRIV = '_bv__toast'
 
 // Base toast props that are allowed
 // Some may be ignored or overridden on some message boxes
@@ -194,7 +195,7 @@ const install = _Vue => {
     beforeCreate() {
       // Because we need access to `$root` for `$emits`, and VM for parenting,
       // we have to create a fresh instance of `BvToast` for each VM
-      this._bv__toast = new BvToast(this)
+      this[PROP_NAME_PRIV] = new BvToast(this)
     }
   })
 
@@ -203,7 +204,11 @@ const install = _Vue => {
   if (!_Vue.prototype.hasOwnProperty(PROP_NAME)) {
     defineProperty(_Vue.prototype, PROP_NAME, {
       get() {
-        return this._bv__toast
+        /* istanbul ignore next */
+        if (!this || !this[PROP_NAME_PRIV]) {
+          warn(`'${PROP_NAME}' must be accessed from a Vue instance 'this' context`)
+        }
+        return this[PROP_NAME_PRIV]
       }
     })
   }
diff --git a/src/utils/warn.js b/src/utils/warn.js
@@ -4,7 +4,7 @@ import { isBrowser, hasPromiseSupport, hasMutationObserverSupport, getNoWarn } f
  * Log a warning message to the console with BootstrapVue formatting
  * @param {string} message
  */
-const warn = message => /* istanbul ignore next */ {
+export const warn = message => /* istanbul ignore next */ {
   if (!getNoWarn()) {
     console.warn(`[BootstrapVue warn]: ${message}`)
   }

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { isBrowser, hasPromiseSupport, hasMutationObserverSupport, getNoWarn } f`
`4`	`4`	`* Log a warning message to the console with BootstrapVue formatting`
`5`	`5`	`* @param {string} message`
`6`	`6`	`*/`
`7`		`-const warn = message => /* istanbul ignore next */ {`
	`7`	`+export const warn = message => /* istanbul ignore next */ {`
`8`	`8`	`if (!getNoWarn()) {`
`9`	`9`	console.warn(`[BootstrapVue warn]: ${message}`)
`10`	`10`	`}`