From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 7 May 2021 13:24:23 +0000 (+0200)
Subject: refactor(devtools): devtools as a plugin
X-Git-Tag: v2.0.0-alpha.17~45
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=8675f30efdd7090ab3c5a8472a094dd62d319a25;p=thirdparty%2Fvuejs%2Fpinia.git

refactor(devtools): devtools as a plugin
---

diff --git a/src/devtools.ts b/src/devtools.ts
index f96244bb..e49401cc 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -4,6 +4,7 @@ import {
   setupDevtoolsPlugin,
 } from '@vue/devtools-api'
 import { App } from 'vue'
+import { PiniaPluginContext } from './rootStore'
 import { GenericStore, GettersTree, StateTree } from './types'
 
 function formatDisplay(display: string) {
@@ -189,3 +190,10 @@ function formatStoreForInspectorState(
 
   return fields
 }
+
+/**
+ * pinia.use(devtoolsPlugin)
+ */
+export function devtoolsPlugin({ app, store }: PiniaPluginContext) {
+  addDevtools(app, store)
+}
diff --git a/src/rootStore.ts b/src/rootStore.ts
index b529b3a5..feeffce3 100644
--- a/src/rootStore.ts
+++ b/src/rootStore.ts
@@ -1,4 +1,5 @@
 import { App, InjectionKey, Plugin, Ref, ref, warn } from 'vue'
+import { devtoolsPlugin } from './devtools'
 import { IS_CLIENT } from './env'
 import {
   StateTree,
@@ -60,23 +61,6 @@ export const storesMap = new WeakMap<
   >
 >()
 
-/**
- * Expose the client-side application instance used for devtools
- */
-let clientAppPromise: Promise<App> | undefined
-let resolveApp: ((app: App) => void) | undefined
-export const setClientApp = (app: App) => {
-  if (resolveApp) {
-    resolveApp(app)
-  } else {
-    // setClientApp might be called before getClientApp
-    clientAppPromise = Promise.resolve(app)
-  }
-}
-export const getClientApp = () =>
-  clientAppPromise ||
-  (clientAppPromise = new Promise((resolve) => (resolveApp = resolve)))
-
 /**
  * Context argument passed to Pinia plugins.
  */
@@ -197,7 +181,6 @@ export function createPinia(): Pinia {
       // TODO: write test
       // only set the app on client for devtools
       if (__BROWSER__ && IS_CLIENT) {
-        setClientApp(app)
         // this allows calling useStore() outside of a component setup after
         // installing pinia's plugin
         setActivePinia(pinia)
@@ -221,5 +204,9 @@ export function createPinia(): Pinia {
     state,
   }
 
+  if (IS_CLIENT && __BROWSER__ && __DEV__) {
+    pinia.use(devtoolsPlugin)
+  }
+
   return pinia
 }
diff --git a/src/store.ts b/src/store.ts
index 5284c6ef..01ce2436 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -29,11 +29,9 @@ import {
   getActivePinia,
   setActivePinia,
   storesMap,
-  getClientApp,
   piniaSymbol,
   Pinia,
 } from './rootStore'
-import { addDevtools } from './devtools'
 import { IS_CLIENT } from './env'
 
 function innerPatch<T extends StateTree>(
@@ -326,14 +324,6 @@ export function defineStore<
         provide(storeAndDescriptor[2], store)
       }
 
-      if (
-        IS_CLIENT &&
-        __BROWSER__ &&
-        __DEV__ /*|| __FEATURE_PROD_DEVTOOLS__*/
-      ) {
-        getClientApp().then((app) => addDevtools(app, store))
-      }
-
       return store
     }