refactor(devtools): devtools as a plugin

diff --git a/src/devtools.ts b/src/devtools.ts
index f96244bbfa28a55827c074994d03e2b9276da543..e49401ccaa955a6d42f1b7ab59c8fccca332e986 100644 (file)
--- 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 b529b3a53758b58ea5605bf81c155fa8e0250ef3..feeffce37123d0f797b61ff6f4c4578cec3b17e3 100644 (file)
--- 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 5284c6ef3434e67454ae0d0670774a1c3c33fc57..01ce2436f9ca5029905b3f4f41131cff4e74a1a2 100644 (file)
--- 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
     }