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>

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.

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