feat(devtools): work with stores added before app.use (#444)

* feat: Stores add to devtools before app.use(pinia)
* fix(view): Remove watcher from getClientApp
* fix(view): must resolve the original promise

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

diff --git a/src/rootStore.ts b/src/rootStore.ts
index c3b601f22dd1f3fd5e050d3de48b1c2b616ca43b..7838cf8448ecdeb1d2195f713adcaa79290a49ba 100644 (file)
--- a/src/rootStore.ts
+++ b/src/rootStore.ts
@@ -61,11 +61,14 @@ export const storesMap = new WeakMap<
 >()
 
 /**
- * Client-side application instance used for devtools
+ * Expose the client-side application instance used for devtools
  */
-export let clientApp: App | undefined /*#__PURE__*/
-export const setClientApp = (app: App) => (clientApp = app)
-export const getClientApp = () => clientApp
+let clientAppPromise: Promise<App> | undefined
+let resolveApp: ((app: App) => void) | undefined
+export const setClientApp = (app: App) => resolveApp && resolveApp(app)
+export const getClientApp = () =>
+  clientAppPromise ||
+  (clientAppPromise = new Promise((resolve) => (resolveApp = resolve)))
 
 /**
  * Context argument passed to Pinia plugins.

diff --git a/src/store.ts b/src/store.ts
index cf806947e659e7e4df66001c75f2ab7d4b91879a..64bff32bd3f3d0d0ac41a3f01be9c02e91bb4165 100644 (file)
--- a/src/store.ts
+++ b/src/store.ts
@@ -274,9 +274,6 @@ function buildStoreToUse<
   return store
 }
 
-// only warn the dev once
-let isDevWarned: boolean | undefined
-
 /**
  * Creates a `useStore` function that retrieves the store instance
  * @param options - options to define the store
@@ -334,20 +331,7 @@ export function defineStore<
         __BROWSER__ &&
         __DEV__ /*|| __FEATURE_PROD_DEVTOOLS__*/
       ) {
-        const app = getClientApp()
-        /* istanbul ignore else */
-        if (app) {
-          addDevtools(app, store)
-        } else if (!isDevWarned && !__TEST__) {
-          isDevWarned = true
-          console.warn(
-            `[🍍]: store was instantiated before calling\n` +
-              `app.use(pinia)\n` +
-              `Make sure to install pinia's plugin by using createPinia:\n` +
-              `https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
-              `It will enable devtools and overall a better developer experience.`
-          )
-        }
+        getClientApp().then((app) => addDevtools(app, store))
       }
 
       return store