pinia - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.2

CHANGELOG.md

@@ -0,1 +1,7 @@
+# [2.0.0-alpha.2](https://github.com/posva/pinia/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2020-09-25)
+
+### Features
+
+- add devtools support ([849cb3f](https://github.com/posva/pinia/commit/849cb3f30559e312bf00625a42a7b697c68d9941))
+
 # [2.0.0-alpha.1](https://github.com/posva/pinia/compare/0.1.0-alpha.1...2.0.0-alpha.1) (2020-09-22)
@@ -2,0 +8,0 @@

dist/pinia.cjs.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
@@ -60,3 +60,273 @@ * @license MIT
 }
+/**
+ * Client-side application instance used for devtools
+ */
+let clientApp;
+const setClientApp = (app) => (clientApp = app);
+const getClientApp = () => clientApp;
+function createPinia() {
+    return {
+        install(app) {
+            setClientApp(app);
+        },
+    };
+}
+/**
+ * Registered stores
+ */
+const stores = new Set();
+function registerStore(store) {
+    stores.add(store);
+}
+const getRegisteredStores = () => stores;
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var env = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hook = exports.target = exports.isBrowser = void 0;
+exports.isBrowser = typeof navigator !== 'undefined';
+exports.target = exports.isBrowser
+    ? window
+    : typeof commonjsGlobal !== 'undefined'
+        ? commonjsGlobal
+        : {};
+exports.hook = exports.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+
+});
+
+var _const = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiHookEvents = void 0;
+var ApiHookEvents;
+(function (ApiHookEvents) {
+    ApiHookEvents["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
+})(ApiHookEvents = exports.ApiHookEvents || (exports.ApiHookEvents = {}));
+
+});
+
+var api = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var app = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var component = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var context = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var hooks = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hooks = void 0;
+var Hooks;
+(function (Hooks) {
+    Hooks["TRANSFORM_CALL"] = "transformCall";
+    Hooks["GET_APP_RECORD_NAME"] = "getAppRecordName";
+    Hooks["GET_APP_ROOT_INSTANCE"] = "getAppRootInstance";
+    Hooks["REGISTER_APPLICATION"] = "registerApplication";
+    Hooks["WALK_COMPONENT_TREE"] = "walkComponentTree";
+    Hooks["WALK_COMPONENT_PARENTS"] = "walkComponentParents";
+    Hooks["INSPECT_COMPONENT"] = "inspectComponent";
+    Hooks["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
+    Hooks["GET_COMPONENT_NAME"] = "getComponentName";
+    Hooks["GET_ELEMENT_COMPONENT"] = "getElementComponent";
+    Hooks["GET_INSPECTOR_TREE"] = "getInspectorTree";
+    Hooks["GET_INSPECTOR_STATE"] = "getInspectorState";
+})(Hooks = exports.Hooks || (exports.Hooks = {}));
+
+});
+
+var api$1 = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(api, exports);
+__exportStar(app, exports);
+__exportStar(component, exports);
+__exportStar(context, exports);
+__exportStar(hooks, exports);
+
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDevtoolsPlugin = void 0;
+
+
+__exportStar(api$1, exports);
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+    if (env.hook) {
+        env.hook.emit(_const.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+    }
+    else {
+        const list = env.target.__VUE_DEVTOOLS_PLUGINS__ = env.target.__VUE_DEVTOOLS_PLUGINS__ || [];
+        list.push({
+            pluginDescriptor,
+            setupFn
+        });
+    }
+}
+exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
+
+});
+
+function formatDisplay(display) {
+    return {
+        _custom: {
+            display,
+        },
+    };
+}
+let isAlreadyInstalled;
+function addDevtools(app, store, req) {
+    registerStore(store);
+    lib.setupDevtoolsPlugin({
+        id: 'pinia',
+        label: 'Pinia 🍍',
+        app,
+    }, (api) => {
+        api.on.inspectComponent((payload, ctx) => {
+            if (payload.instanceData) {
+                payload.instanceData.state.push({
+                    type: '🍍 ' + store.id,
+                    key: 'state',
+                    editable: false,
+                    value: store.state,
+                });
+            }
+        });
+        // watch(router.currentRoute, () => {
+        //   // @ts-ignore
+        //   api.notifyComponentUpdate()
+        // })
+        const mutationsLayerId = 'pinia:mutations';
+        const piniaInspectorId = 'pinia';
+        if (!isAlreadyInstalled) {
+            api.addTimelineLayer({
+                id: mutationsLayerId,
+                label: `Pinia 🍍`,
+                color: 0xe5df88,
+            });
+            api.addInspector({
+                id: piniaInspectorId,
+                label: 'Pinia 🍍',
+                icon: 'storage',
+                treeFilterPlaceholder: 'Search stores',
+            });
+            isAlreadyInstalled = true;
+        }
+        else {
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(piniaInspectorId);
+            api.sendInspectorState(piniaInspectorId);
+        }
+        store.subscribe((mutation, state) => {
+            // rootStore.state[store.id] = state
+            const data = {
+                store: formatDisplay(mutation.storeName),
+                type: formatDisplay(mutation.type),
+            };
+            if (mutation.payload) {
+                data.payload = mutation.payload;
+            }
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorState(piniaInspectorId);
+            api.addTimelineEvent({
+                layerId: mutationsLayerId,
+                event: {
+                    time: Date.now(),
+                    data,
+                    // TODO: remove when fixed
+                    meta: {},
+                },
+            });
+        });
+        api.on.getInspectorTree((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                payload.rootNodes = (payload.filter
+                    ? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
+                    : stores).map(formatStoreForInspectorTree);
+            }
+        });
+        api.on.getInspectorState((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                const store = stores.find((store) => store.id === payload.nodeId);
+                if (store) {
+                    payload.state = {
+                        options: formatStoreForInspectorState(store),
+                    };
+                }
+                else {
+                    __VUE_DEVTOOLS_TOAST__(`🍍 store "${payload.nodeId}" not found`, 'error');
+                }
+            }
+        });
+        // trigger an update so it can display new registered stores
+        // @ts-ignore
+        api.notifyComponentUpdate();
+        __VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
+    });
+}
+function formatStoreForInspectorTree(store) {
+    return {
+        id: store.id,
+        label: store.id,
+        tags: [],
+    };
+}
+function formatStoreForInspectorState(store) {
+    const fields = [
+        { editable: false, key: 'id', value: formatDisplay(store.id) },
+        { editable: true, key: 'state', value: store.state },
+    ];
+    return fields;
+}
+
+const IS_CLIENT = typeof window !== 'undefined';
 function innerPatch(target, patchToApply) {
@@ -192,4 +462,14 @@ // TODO: get all keys like symbols as well
             (store = buildStore(id, state, getters, actions, getInitialState(id))));
-            // TODO: client devtools when availables
-            // if (isClient) useStoreDevtools(store)
+            if (IS_CLIENT && true /*|| __FEATURE_PROD_DEVTOOLS__*/) {
+                const app = getClientApp();
+                if (app) {
+                    addDevtools(app, store);
+                }
+                else {
+                    console.warn(`[🍍]: store was instantiated before calling\n` +
+                        `app.use(pinia)\n` +
+                        `Make sure to install pinia's plugin by using createPinia:\n` +
+                        `linkto docs TODO`);
+                }
+            }
         }
@@ -200,5 +480,7 @@ return store;
 
+exports.createPinia = createPinia;
 exports.createStore = createStore;
+exports.defineStore = createStore;
 exports.getRootState = getRootState;
 exports.setActiveReq = setActiveReq;
 exports.setStateProvider = setStateProvider;

dist/pinia.cjs.prod.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
@@ -60,3 +60,273 @@ * @license MIT
 }
+/**
+ * Client-side application instance used for devtools
+ */
+let clientApp;
+const setClientApp = (app) => (clientApp = app);
+const getClientApp = () => clientApp;
+function createPinia() {
+    return {
+        install(app) {
+            setClientApp(app);
+        },
+    };
+}
+/**
+ * Registered stores
+ */
+const stores = new Set();
+function registerStore(store) {
+    stores.add(store);
+}
+const getRegisteredStores = () => stores;
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var env = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hook = exports.target = exports.isBrowser = void 0;
+exports.isBrowser = typeof navigator !== 'undefined';
+exports.target = exports.isBrowser
+    ? window
+    : typeof commonjsGlobal !== 'undefined'
+        ? commonjsGlobal
+        : {};
+exports.hook = exports.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+
+});
+
+var _const = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiHookEvents = void 0;
+var ApiHookEvents;
+(function (ApiHookEvents) {
+    ApiHookEvents["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
+})(ApiHookEvents = exports.ApiHookEvents || (exports.ApiHookEvents = {}));
+
+});
+
+var api = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var app = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var component = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var context = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var hooks = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hooks = void 0;
+var Hooks;
+(function (Hooks) {
+    Hooks["TRANSFORM_CALL"] = "transformCall";
+    Hooks["GET_APP_RECORD_NAME"] = "getAppRecordName";
+    Hooks["GET_APP_ROOT_INSTANCE"] = "getAppRootInstance";
+    Hooks["REGISTER_APPLICATION"] = "registerApplication";
+    Hooks["WALK_COMPONENT_TREE"] = "walkComponentTree";
+    Hooks["WALK_COMPONENT_PARENTS"] = "walkComponentParents";
+    Hooks["INSPECT_COMPONENT"] = "inspectComponent";
+    Hooks["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
+    Hooks["GET_COMPONENT_NAME"] = "getComponentName";
+    Hooks["GET_ELEMENT_COMPONENT"] = "getElementComponent";
+    Hooks["GET_INSPECTOR_TREE"] = "getInspectorTree";
+    Hooks["GET_INSPECTOR_STATE"] = "getInspectorState";
+})(Hooks = exports.Hooks || (exports.Hooks = {}));
+
+});
+
+var api$1 = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(api, exports);
+__exportStar(app, exports);
+__exportStar(component, exports);
+__exportStar(context, exports);
+__exportStar(hooks, exports);
+
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDevtoolsPlugin = void 0;
+
+
+__exportStar(api$1, exports);
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+    if (env.hook) {
+        env.hook.emit(_const.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+    }
+    else {
+        const list = env.target.__VUE_DEVTOOLS_PLUGINS__ = env.target.__VUE_DEVTOOLS_PLUGINS__ || [];
+        list.push({
+            pluginDescriptor,
+            setupFn
+        });
+    }
+}
+exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
+
+});
+
+function formatDisplay(display) {
+    return {
+        _custom: {
+            display,
+        },
+    };
+}
+let isAlreadyInstalled;
+function addDevtools(app, store, req) {
+    registerStore(store);
+    lib.setupDevtoolsPlugin({
+        id: 'pinia',
+        label: 'Pinia 🍍',
+        app,
+    }, (api) => {
+        api.on.inspectComponent((payload, ctx) => {
+            if (payload.instanceData) {
+                payload.instanceData.state.push({
+                    type: '🍍 ' + store.id,
+                    key: 'state',
+                    editable: false,
+                    value: store.state,
+                });
+            }
+        });
+        // watch(router.currentRoute, () => {
+        //   // @ts-ignore
+        //   api.notifyComponentUpdate()
+        // })
+        const mutationsLayerId = 'pinia:mutations';
+        const piniaInspectorId = 'pinia';
+        if (!isAlreadyInstalled) {
+            api.addTimelineLayer({
+                id: mutationsLayerId,
+                label: `Pinia 🍍`,
+                color: 0xe5df88,
+            });
+            api.addInspector({
+                id: piniaInspectorId,
+                label: 'Pinia 🍍',
+                icon: 'storage',
+                treeFilterPlaceholder: 'Search stores',
+            });
+            isAlreadyInstalled = true;
+        }
+        else {
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(piniaInspectorId);
+            api.sendInspectorState(piniaInspectorId);
+        }
+        store.subscribe((mutation, state) => {
+            // rootStore.state[store.id] = state
+            const data = {
+                store: formatDisplay(mutation.storeName),
+                type: formatDisplay(mutation.type),
+            };
+            if (mutation.payload) {
+                data.payload = mutation.payload;
+            }
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorState(piniaInspectorId);
+            api.addTimelineEvent({
+                layerId: mutationsLayerId,
+                event: {
+                    time: Date.now(),
+                    data,
+                    // TODO: remove when fixed
+                    meta: {},
+                },
+            });
+        });
+        api.on.getInspectorTree((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                payload.rootNodes = (payload.filter
+                    ? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
+                    : stores).map(formatStoreForInspectorTree);
+            }
+        });
+        api.on.getInspectorState((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                const store = stores.find((store) => store.id === payload.nodeId);
+                if (store) {
+                    payload.state = {
+                        options: formatStoreForInspectorState(store),
+                    };
+                }
+                else {
+                    __VUE_DEVTOOLS_TOAST__(`🍍 store "${payload.nodeId}" not found`, 'error');
+                }
+            }
+        });
+        // trigger an update so it can display new registered stores
+        // @ts-ignore
+        api.notifyComponentUpdate();
+        __VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
+    });
+}
+function formatStoreForInspectorTree(store) {
+    return {
+        id: store.id,
+        label: store.id,
+        tags: [],
+    };
+}
+function formatStoreForInspectorState(store) {
+    const fields = [
+        { editable: false, key: 'id', value: formatDisplay(store.id) },
+        { editable: true, key: 'state', value: store.state },
+    ];
+    return fields;
+}
+
+const IS_CLIENT = typeof window !== 'undefined';
 function innerPatch(target, patchToApply) {
@@ -192,4 +462,14 @@ // TODO: get all keys like symbols as well
             (store = buildStore(id, state, getters, actions, getInitialState(id))));
-            // TODO: client devtools when availables
-            // if (isClient) useStoreDevtools(store)
+            if (IS_CLIENT && false /*|| __FEATURE_PROD_DEVTOOLS__*/) {
+                const app = getClientApp();
+                if (app) {
+                    addDevtools(app, store);
+                }
+                else {
+                    console.warn(`[🍍]: store was instantiated before calling\n` +
+                        `app.use(pinia)\n` +
+                        `Make sure to install pinia's plugin by using createPinia:\n` +
+                        `linkto docs TODO`);
+                }
+            }
         }
@@ -200,5 +480,7 @@ return store;
 
+exports.createPinia = createPinia;
 exports.createStore = createStore;
+exports.defineStore = createStore;
 exports.getRootState = getRootState;
 exports.setActiveReq = setActiveReq;
 exports.setStateProvider = setStateProvider;

dist/pinia.d.ts

@@ -0,3 +1,8 @@
+import { App } from 'vue';
 import { Ref } from 'vue';
 
+export declare function createPinia(): {
+    install(app: App): void;
+};
+
 /**
@@ -7,3 +12,3 @@ * Creates a `useStore` function that retrieves the store instance
  */
-export declare function createStore<Id extends string, S extends StateTree, G, A>(options: {
+declare function createStore<Id extends string, S extends StateTree, G, A>(options: {
     id: Id;
@@ -14,2 +19,4 @@ state?: () => S;
 }): (reqKey?: object | undefined) => Store<Id, S, G, A>;
+export { createStore }
+export { createStore as defineStore }
 
@@ -16,0 +23,0 @@ declare type DeepPartial<T> = {

dist/pinia.esm-browser.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
@@ -56,3 +56,273 @@ * @license MIT
 }
+/**
+ * Client-side application instance used for devtools
+ */
+let clientApp;
+const setClientApp = (app) => (clientApp = app);
+const getClientApp = () => clientApp;
+function createPinia() {
+    return {
+        install(app) {
+            setClientApp(app);
+        },
+    };
+}
+/**
+ * Registered stores
+ */
+const stores = new Set();
+function registerStore(store) {
+    stores.add(store);
+}
+const getRegisteredStores = () => stores;
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var env = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hook = exports.target = exports.isBrowser = void 0;
+exports.isBrowser = typeof navigator !== 'undefined';
+exports.target = exports.isBrowser
+    ? window
+    : typeof commonjsGlobal !== 'undefined'
+        ? commonjsGlobal
+        : {};
+exports.hook = exports.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+
+});
+
+var _const = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiHookEvents = void 0;
+var ApiHookEvents;
+(function (ApiHookEvents) {
+    ApiHookEvents["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
+})(ApiHookEvents = exports.ApiHookEvents || (exports.ApiHookEvents = {}));
+
+});
+
+var api = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var app = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var component = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var context = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var hooks = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hooks = void 0;
+var Hooks;
+(function (Hooks) {
+    Hooks["TRANSFORM_CALL"] = "transformCall";
+    Hooks["GET_APP_RECORD_NAME"] = "getAppRecordName";
+    Hooks["GET_APP_ROOT_INSTANCE"] = "getAppRootInstance";
+    Hooks["REGISTER_APPLICATION"] = "registerApplication";
+    Hooks["WALK_COMPONENT_TREE"] = "walkComponentTree";
+    Hooks["WALK_COMPONENT_PARENTS"] = "walkComponentParents";
+    Hooks["INSPECT_COMPONENT"] = "inspectComponent";
+    Hooks["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
+    Hooks["GET_COMPONENT_NAME"] = "getComponentName";
+    Hooks["GET_ELEMENT_COMPONENT"] = "getElementComponent";
+    Hooks["GET_INSPECTOR_TREE"] = "getInspectorTree";
+    Hooks["GET_INSPECTOR_STATE"] = "getInspectorState";
+})(Hooks = exports.Hooks || (exports.Hooks = {}));
+
+});
+
+var api$1 = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(api, exports);
+__exportStar(app, exports);
+__exportStar(component, exports);
+__exportStar(context, exports);
+__exportStar(hooks, exports);
+
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDevtoolsPlugin = void 0;
+
+
+__exportStar(api$1, exports);
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+    if (env.hook) {
+        env.hook.emit(_const.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+    }
+    else {
+        const list = env.target.__VUE_DEVTOOLS_PLUGINS__ = env.target.__VUE_DEVTOOLS_PLUGINS__ || [];
+        list.push({
+            pluginDescriptor,
+            setupFn
+        });
+    }
+}
+exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
+
+});
+
+function formatDisplay(display) {
+    return {
+        _custom: {
+            display,
+        },
+    };
+}
+let isAlreadyInstalled;
+function addDevtools(app, store, req) {
+    registerStore(store);
+    lib.setupDevtoolsPlugin({
+        id: 'pinia',
+        label: 'Pinia 🍍',
+        app,
+    }, (api) => {
+        api.on.inspectComponent((payload, ctx) => {
+            if (payload.instanceData) {
+                payload.instanceData.state.push({
+                    type: '🍍 ' + store.id,
+                    key: 'state',
+                    editable: false,
+                    value: store.state,
+                });
+            }
+        });
+        // watch(router.currentRoute, () => {
+        //   // @ts-ignore
+        //   api.notifyComponentUpdate()
+        // })
+        const mutationsLayerId = 'pinia:mutations';
+        const piniaInspectorId = 'pinia';
+        if (!isAlreadyInstalled) {
+            api.addTimelineLayer({
+                id: mutationsLayerId,
+                label: `Pinia 🍍`,
+                color: 0xe5df88,
+            });
+            api.addInspector({
+                id: piniaInspectorId,
+                label: 'Pinia 🍍',
+                icon: 'storage',
+                treeFilterPlaceholder: 'Search stores',
+            });
+            isAlreadyInstalled = true;
+        }
+        else {
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(piniaInspectorId);
+            api.sendInspectorState(piniaInspectorId);
+        }
+        store.subscribe((mutation, state) => {
+            // rootStore.state[store.id] = state
+            const data = {
+                store: formatDisplay(mutation.storeName),
+                type: formatDisplay(mutation.type),
+            };
+            if (mutation.payload) {
+                data.payload = mutation.payload;
+            }
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorState(piniaInspectorId);
+            api.addTimelineEvent({
+                layerId: mutationsLayerId,
+                event: {
+                    time: Date.now(),
+                    data,
+                    // TODO: remove when fixed
+                    meta: {},
+                },
+            });
+        });
+        api.on.getInspectorTree((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                payload.rootNodes = (payload.filter
+                    ? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
+                    : stores).map(formatStoreForInspectorTree);
+            }
+        });
+        api.on.getInspectorState((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                const store = stores.find((store) => store.id === payload.nodeId);
+                if (store) {
+                    payload.state = {
+                        options: formatStoreForInspectorState(store),
+                    };
+                }
+                else {
+                    __VUE_DEVTOOLS_TOAST__(`🍍 store "${payload.nodeId}" not found`, 'error');
+                }
+            }
+        });
+        // trigger an update so it can display new registered stores
+        // @ts-ignore
+        api.notifyComponentUpdate();
+        __VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
+    });
+}
+function formatStoreForInspectorTree(store) {
+    return {
+        id: store.id,
+        label: store.id,
+        tags: [],
+    };
+}
+function formatStoreForInspectorState(store) {
+    const fields = [
+        { editable: false, key: 'id', value: formatDisplay(store.id) },
+        { editable: true, key: 'state', value: store.state },
+    ];
+    return fields;
+}
+
+const IS_CLIENT = typeof window !== 'undefined';
 function innerPatch(target, patchToApply) {
@@ -188,4 +458,14 @@ // TODO: get all keys like symbols as well
             (store = buildStore(id, state, getters, actions, getInitialState(id))));
-            // TODO: client devtools when availables
-            // if (isClient) useStoreDevtools(store)
+            if (IS_CLIENT && true /*|| __FEATURE_PROD_DEVTOOLS__*/) {
+                const app = getClientApp();
+                if (app) {
+                    addDevtools(app, store);
+                }
+                else {
+                    console.warn(`[🍍]: store was instantiated before calling\n` +
+                        `app.use(pinia)\n` +
+                        `Make sure to install pinia's plugin by using createPinia:\n` +
+                        `linkto docs TODO`);
+                }
+            }
         }
@@ -196,2 +476,2 @@ return store;
 
-export { createStore, getRootState, setActiveReq, setStateProvider };
+export { createPinia, createStore, createStore as defineStore, getRootState, setActiveReq, setStateProvider };

dist/pinia.esm-bundler.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
@@ -56,3 +56,273 @@ * @license MIT
 }
+/**
+ * Client-side application instance used for devtools
+ */
+let clientApp;
+const setClientApp = (app) => (clientApp = app);
+const getClientApp = () => clientApp;
+function createPinia() {
+    return {
+        install(app) {
+            setClientApp(app);
+        },
+    };
+}
+/**
+ * Registered stores
+ */
+const stores = new Set();
+function registerStore(store) {
+    stores.add(store);
+}
+const getRegisteredStores = () => stores;
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var env = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hook = exports.target = exports.isBrowser = void 0;
+exports.isBrowser = typeof navigator !== 'undefined';
+exports.target = exports.isBrowser
+    ? window
+    : typeof commonjsGlobal !== 'undefined'
+        ? commonjsGlobal
+        : {};
+exports.hook = exports.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+
+});
+
+var _const = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiHookEvents = void 0;
+var ApiHookEvents;
+(function (ApiHookEvents) {
+    ApiHookEvents["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
+})(ApiHookEvents = exports.ApiHookEvents || (exports.ApiHookEvents = {}));
+
+});
+
+var api = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var app = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var component = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var context = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+
+});
+
+var hooks = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hooks = void 0;
+var Hooks;
+(function (Hooks) {
+    Hooks["TRANSFORM_CALL"] = "transformCall";
+    Hooks["GET_APP_RECORD_NAME"] = "getAppRecordName";
+    Hooks["GET_APP_ROOT_INSTANCE"] = "getAppRootInstance";
+    Hooks["REGISTER_APPLICATION"] = "registerApplication";
+    Hooks["WALK_COMPONENT_TREE"] = "walkComponentTree";
+    Hooks["WALK_COMPONENT_PARENTS"] = "walkComponentParents";
+    Hooks["INSPECT_COMPONENT"] = "inspectComponent";
+    Hooks["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
+    Hooks["GET_COMPONENT_NAME"] = "getComponentName";
+    Hooks["GET_ELEMENT_COMPONENT"] = "getElementComponent";
+    Hooks["GET_INSPECTOR_TREE"] = "getInspectorTree";
+    Hooks["GET_INSPECTOR_STATE"] = "getInspectorState";
+})(Hooks = exports.Hooks || (exports.Hooks = {}));
+
+});
+
+var api$1 = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(api, exports);
+__exportStar(app, exports);
+__exportStar(component, exports);
+__exportStar(context, exports);
+__exportStar(hooks, exports);
+
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDevtoolsPlugin = void 0;
+
+
+__exportStar(api$1, exports);
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+    if (env.hook) {
+        env.hook.emit(_const.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+    }
+    else {
+        const list = env.target.__VUE_DEVTOOLS_PLUGINS__ = env.target.__VUE_DEVTOOLS_PLUGINS__ || [];
+        list.push({
+            pluginDescriptor,
+            setupFn
+        });
+    }
+}
+exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
+
+});
+
+function formatDisplay(display) {
+    return {
+        _custom: {
+            display,
+        },
+    };
+}
+let isAlreadyInstalled;
+function addDevtools(app, store, req) {
+    registerStore(store);
+    lib.setupDevtoolsPlugin({
+        id: 'pinia',
+        label: 'Pinia 🍍',
+        app,
+    }, (api) => {
+        api.on.inspectComponent((payload, ctx) => {
+            if (payload.instanceData) {
+                payload.instanceData.state.push({
+                    type: '🍍 ' + store.id,
+                    key: 'state',
+                    editable: false,
+                    value: store.state,
+                });
+            }
+        });
+        // watch(router.currentRoute, () => {
+        //   // @ts-ignore
+        //   api.notifyComponentUpdate()
+        // })
+        const mutationsLayerId = 'pinia:mutations';
+        const piniaInspectorId = 'pinia';
+        if (!isAlreadyInstalled) {
+            api.addTimelineLayer({
+                id: mutationsLayerId,
+                label: `Pinia 🍍`,
+                color: 0xe5df88,
+            });
+            api.addInspector({
+                id: piniaInspectorId,
+                label: 'Pinia 🍍',
+                icon: 'storage',
+                treeFilterPlaceholder: 'Search stores',
+            });
+            isAlreadyInstalled = true;
+        }
+        else {
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorTree(piniaInspectorId);
+            api.sendInspectorState(piniaInspectorId);
+        }
+        store.subscribe((mutation, state) => {
+            // rootStore.state[store.id] = state
+            const data = {
+                store: formatDisplay(mutation.storeName),
+                type: formatDisplay(mutation.type),
+            };
+            if (mutation.payload) {
+                data.payload = mutation.payload;
+            }
+            // @ts-ignore
+            api.notifyComponentUpdate();
+            api.sendInspectorState(piniaInspectorId);
+            api.addTimelineEvent({
+                layerId: mutationsLayerId,
+                event: {
+                    time: Date.now(),
+                    data,
+                    // TODO: remove when fixed
+                    meta: {},
+                },
+            });
+        });
+        api.on.getInspectorTree((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                payload.rootNodes = (payload.filter
+                    ? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
+                    : stores).map(formatStoreForInspectorTree);
+            }
+        });
+        api.on.getInspectorState((payload) => {
+            if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                const stores = Array.from(getRegisteredStores());
+                const store = stores.find((store) => store.id === payload.nodeId);
+                if (store) {
+                    payload.state = {
+                        options: formatStoreForInspectorState(store),
+                    };
+                }
+                else {
+                    __VUE_DEVTOOLS_TOAST__(`🍍 store "${payload.nodeId}" not found`, 'error');
+                }
+            }
+        });
+        // trigger an update so it can display new registered stores
+        // @ts-ignore
+        api.notifyComponentUpdate();
+        __VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
+    });
+}
+function formatStoreForInspectorTree(store) {
+    return {
+        id: store.id,
+        label: store.id,
+        tags: [],
+    };
+}
+function formatStoreForInspectorState(store) {
+    const fields = [
+        { editable: false, key: 'id', value: formatDisplay(store.id) },
+        { editable: true, key: 'state', value: store.state },
+    ];
+    return fields;
+}
+
+const IS_CLIENT = typeof window !== 'undefined';
 function innerPatch(target, patchToApply) {
@@ -188,4 +458,14 @@ // TODO: get all keys like symbols as well
             (store = buildStore(id, state, getters, actions, getInitialState(id))));
-            // TODO: client devtools when availables
-            // if (isClient) useStoreDevtools(store)
+            if (IS_CLIENT && (process.env.NODE_ENV !== 'production') /*|| __FEATURE_PROD_DEVTOOLS__*/) {
+                const app = getClientApp();
+                if (app) {
+                    addDevtools(app, store);
+                }
+                else {
+                    console.warn(`[🍍]: store was instantiated before calling\n` +
+                        `app.use(pinia)\n` +
+                        `Make sure to install pinia's plugin by using createPinia:\n` +
+                        `linkto docs TODO`);
+                }
+            }
         }
@@ -196,2 +476,2 @@ return store;
 
-export { createStore, getRootState, setActiveReq, setStateProvider };
+export { createPinia, createStore, createStore as defineStore, getRootState, setActiveReq, setStateProvider };

dist/pinia.global.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
@@ -57,3 +57,273 @@ * @license MIT
   }
+  /**
+   * Client-side application instance used for devtools
+   */
+  let clientApp;
+  const setClientApp = (app) => (clientApp = app);
+  const getClientApp = () => clientApp;
+  function createPinia() {
+      return {
+          install(app) {
+              setClientApp(app);
+          },
+      };
+  }
+  /**
+   * Registered stores
+   */
+  const stores = new Set();
+  function registerStore(store) {
+      stores.add(store);
+  }
+  const getRegisteredStores = () => stores;
 
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function createCommonjsModule(fn, basedir, module) {
+  	return module = {
+  		path: basedir,
+  		exports: {},
+  		require: function (path, base) {
+  			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+  		}
+  	}, fn(module, module.exports), module.exports;
+  }
+
+  function commonjsRequire () {
+  	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+  }
+
+  var env = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.hook = exports.target = exports.isBrowser = void 0;
+  exports.isBrowser = typeof navigator !== 'undefined';
+  exports.target = exports.isBrowser
+      ? window
+      : typeof commonjsGlobal !== 'undefined'
+          ? commonjsGlobal
+          : {};
+  exports.hook = exports.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+
+  });
+
+  var _const = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.ApiHookEvents = void 0;
+  var ApiHookEvents;
+  (function (ApiHookEvents) {
+      ApiHookEvents["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
+  })(ApiHookEvents = exports.ApiHookEvents || (exports.ApiHookEvents = {}));
+
+  });
+
+  var api = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+
+  });
+
+  var app = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+
+  });
+
+  var component = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+
+  });
+
+  var context = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+
+  });
+
+  var hooks = createCommonjsModule(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.Hooks = void 0;
+  var Hooks;
+  (function (Hooks) {
+      Hooks["TRANSFORM_CALL"] = "transformCall";
+      Hooks["GET_APP_RECORD_NAME"] = "getAppRecordName";
+      Hooks["GET_APP_ROOT_INSTANCE"] = "getAppRootInstance";
+      Hooks["REGISTER_APPLICATION"] = "registerApplication";
+      Hooks["WALK_COMPONENT_TREE"] = "walkComponentTree";
+      Hooks["WALK_COMPONENT_PARENTS"] = "walkComponentParents";
+      Hooks["INSPECT_COMPONENT"] = "inspectComponent";
+      Hooks["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
+      Hooks["GET_COMPONENT_NAME"] = "getComponentName";
+      Hooks["GET_ELEMENT_COMPONENT"] = "getElementComponent";
+      Hooks["GET_INSPECTOR_TREE"] = "getInspectorTree";
+      Hooks["GET_INSPECTOR_STATE"] = "getInspectorState";
+  })(Hooks = exports.Hooks || (exports.Hooks = {}));
+
+  });
+
+  var api$1 = createCommonjsModule(function (module, exports) {
+  var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+  }) : (function(o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      o[k2] = m[k];
+  }));
+  var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+      for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+  };
+  Object.defineProperty(exports, "__esModule", { value: true });
+  __exportStar(api, exports);
+  __exportStar(app, exports);
+  __exportStar(component, exports);
+  __exportStar(context, exports);
+  __exportStar(hooks, exports);
+
+  });
+
+  var lib = createCommonjsModule(function (module, exports) {
+  var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+  }) : (function(o, m, k, k2) {
+      if (k2 === undefined) k2 = k;
+      o[k2] = m[k];
+  }));
+  var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+      for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+  };
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.setupDevtoolsPlugin = void 0;
+
+
+  __exportStar(api$1, exports);
+  function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+      if (env.hook) {
+          env.hook.emit(_const.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+      }
+      else {
+          const list = env.target.__VUE_DEVTOOLS_PLUGINS__ = env.target.__VUE_DEVTOOLS_PLUGINS__ || [];
+          list.push({
+              pluginDescriptor,
+              setupFn
+          });
+      }
+  }
+  exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
+
+  });
+
+  function formatDisplay(display) {
+      return {
+          _custom: {
+              display,
+          },
+      };
+  }
+  let isAlreadyInstalled;
+  function addDevtools(app, store, req) {
+      registerStore(store);
+      lib.setupDevtoolsPlugin({
+          id: 'pinia',
+          label: 'Pinia 🍍',
+          app,
+      }, (api) => {
+          api.on.inspectComponent((payload, ctx) => {
+              if (payload.instanceData) {
+                  payload.instanceData.state.push({
+                      type: '🍍 ' + store.id,
+                      key: 'state',
+                      editable: false,
+                      value: store.state,
+                  });
+              }
+          });
+          // watch(router.currentRoute, () => {
+          //   // @ts-ignore
+          //   api.notifyComponentUpdate()
+          // })
+          const mutationsLayerId = 'pinia:mutations';
+          const piniaInspectorId = 'pinia';
+          if (!isAlreadyInstalled) {
+              api.addTimelineLayer({
+                  id: mutationsLayerId,
+                  label: `Pinia 🍍`,
+                  color: 0xe5df88,
+              });
+              api.addInspector({
+                  id: piniaInspectorId,
+                  label: 'Pinia 🍍',
+                  icon: 'storage',
+                  treeFilterPlaceholder: 'Search stores',
+              });
+              isAlreadyInstalled = true;
+          }
+          else {
+              // @ts-ignore
+              api.notifyComponentUpdate();
+              api.sendInspectorTree(piniaInspectorId);
+              api.sendInspectorState(piniaInspectorId);
+          }
+          store.subscribe((mutation, state) => {
+              // rootStore.state[store.id] = state
+              const data = {
+                  store: formatDisplay(mutation.storeName),
+                  type: formatDisplay(mutation.type),
+              };
+              if (mutation.payload) {
+                  data.payload = mutation.payload;
+              }
+              // @ts-ignore
+              api.notifyComponentUpdate();
+              api.sendInspectorState(piniaInspectorId);
+              api.addTimelineEvent({
+                  layerId: mutationsLayerId,
+                  event: {
+                      time: Date.now(),
+                      data,
+                      // TODO: remove when fixed
+                      meta: {},
+                  },
+              });
+          });
+          api.on.getInspectorTree((payload) => {
+              if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                  const stores = Array.from(getRegisteredStores());
+                  payload.rootNodes = (payload.filter
+                      ? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
+                      : stores).map(formatStoreForInspectorTree);
+              }
+          });
+          api.on.getInspectorState((payload) => {
+              if (payload.app === app && payload.inspectorId === piniaInspectorId) {
+                  const stores = Array.from(getRegisteredStores());
+                  const store = stores.find((store) => store.id === payload.nodeId);
+                  if (store) {
+                      payload.state = {
+                          options: formatStoreForInspectorState(store),
+                      };
+                  }
+                  else {
+                      __VUE_DEVTOOLS_TOAST__(`🍍 store "${payload.nodeId}" not found`, 'error');
+                  }
+              }
+          });
+          // trigger an update so it can display new registered stores
+          // @ts-ignore
+          api.notifyComponentUpdate();
+          __VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
+      });
+  }
+  function formatStoreForInspectorTree(store) {
+      return {
+          id: store.id,
+          label: store.id,
+          tags: [],
+      };
+  }
+  function formatStoreForInspectorState(store) {
+      const fields = [
+          { editable: false, key: 'id', value: formatDisplay(store.id) },
+          { editable: true, key: 'state', value: store.state },
+      ];
+      return fields;
+  }
+
+  const IS_CLIENT = typeof window !== 'undefined';
   function innerPatch(target, patchToApply) {
@@ -189,4 +459,14 @@ // TODO: get all keys like symbols as well
               (store = buildStore(id, state, getters, actions, getInitialState(id))));
-              // TODO: client devtools when availables
-              // if (isClient) useStoreDevtools(store)
+              if (IS_CLIENT && true /*|| __FEATURE_PROD_DEVTOOLS__*/) {
+                  const app = getClientApp();
+                  if (app) {
+                      addDevtools(app, store);
+                  }
+                  else {
+                      console.warn(`[🍍]: store was instantiated before calling\n` +
+                          `app.use(pinia)\n` +
+                          `Make sure to install pinia's plugin by using createPinia:\n` +
+                          `linkto docs TODO`);
+                  }
+              }
           }
@@ -197,3 +477,5 @@ return store;
 
+  exports.createPinia = createPinia;
   exports.createStore = createStore;
+  exports.defineStore = createStore;
   exports.getRootState = getRootState;
@@ -200,0 +482,0 @@ exports.setActiveReq = setActiveReq;

dist/pinia.global.prod.js

 /*!
-  * pinia v2.0.0-alpha.1
+  * pinia v2.0.0-alpha.2
   * (c) 2020 Eduardo San Martin Morote
   * @license MIT
   */
-var Pinia=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t.toJSON}let o={};const c=t=>t&&(o=t),r=()=>o,u=new WeakMap,a=new WeakMap;function s(t,e){for(const o in e){const c=e[o],r=t[o];t[o]=n(r)&&n(c)?s(r,c):c}return t}function i(t){const n={};for(const o in t.value)n[o]=e.computed({get:()=>t.value[o],set:e=>t.value[o]=e});return n}function f(t,n=(()=>({})),o={},u={},a){const f=e.ref(a||n()),l=r();let p=!0,v=[];e.watch(()=>f.value,e=>{p&&v.forEach(n=>{n({storeName:t,type:"🧩 in place",payload:{}},e)})},{deep:!0,flush:"sync"});const d={id:t,_r:l,state:e.computed({get:()=>f.value,set:t=>{p=!1,f.value=t,p=!0}}),patch:function(e){p=!1,s(f.value,e),p=!0,v.forEach(n=>{n({storeName:t,type:"⤵️ patch",payload:e},f.value)})},subscribe:function(t){return v.push(t),()=>{const e=v.indexOf(t);e>-1&&v.splice(e,1)}},reset:function(){v=[],f.value=n()}},g={};for(const t in o)g[t]=e.computed(()=>(c(l),o[t].call(h,h)));const y={};for(const t in u)y[t]=function(){return c(l),u[t].apply(h,arguments)};const h=e.reactive({...d,...i(f),...g,...y});return h}return t.createStore=function(t){const{id:e,state:n,getters:o,actions:s}=t;return function(t){t&&c(t);const i=r();let l=u.get(i);l||u.set(i,l=new Map);let p=l.get(e);return p||l.set(e,p=f(e,n,o,s,function(t){const e=a.get(r());return e&&e()[t]}(e))),p}},t.getRootState=function(t){const e=u.get(t);if(!e)return{};const n={};return e.forEach(t=>{n[t.id]=t.state}),n},t.setActiveReq=c,t.setStateProvider=function(t){a.set(r(),t)},t}({},Vue);
+var Pinia=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e)&&"function"!=typeof e.toJSON}let o={};const r=e=>e&&(o=e),i=()=>o,u=new WeakMap,c=new WeakMap;let a;new Set;var s="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function f(e,t,n){return e(n={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},n.exports),n.exports}var p=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.hook=t.target=t.isBrowser=void 0,t.isBrowser="undefined"!=typeof navigator,t.target=t.isBrowser?window:void 0!==s?s:{},t.hook=t.target.__VUE_DEVTOOLS_GLOBAL_HOOK__})),l=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.ApiHookEvents=void 0,function(e){e.SETUP_DEVTOOLS_PLUGIN="devtools-plugin:setup"}(t.ApiHookEvents||(t.ApiHookEvents={}))})),_=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),d=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),O=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),E=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),v=f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.Hooks=void 0,function(e){e.TRANSFORM_CALL="transformCall",e.GET_APP_RECORD_NAME="getAppRecordName",e.GET_APP_ROOT_INSTANCE="getAppRootInstance",e.REGISTER_APPLICATION="registerApplication",e.WALK_COMPONENT_TREE="walkComponentTree",e.WALK_COMPONENT_PARENTS="walkComponentParents",e.INSPECT_COMPONENT="inspectComponent",e.GET_COMPONENT_BOUNDS="getComponentBounds",e.GET_COMPONENT_NAME="getComponentName",e.GET_ELEMENT_COMPONENT="getElementComponent",e.GET_INSPECTOR_TREE="getInspectorTree",e.GET_INSPECTOR_STATE="getInspectorState"}(t.Hooks||(t.Hooks={}))})),P=f((function(e,t){var n=s&&s.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),o=s&&s.__exportStar||function(e,t){for(var o in e)"default"===o||t.hasOwnProperty(o)||n(t,e,o)};Object.defineProperty(t,"__esModule",{value:!0}),o(_,t),o(d,t),o(O,t),o(E,t),o(v,t)}));f((function(e,t){var n=s&&s.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),o=s&&s.__exportStar||function(e,t){for(var o in e)"default"===o||t.hasOwnProperty(o)||n(t,e,o)};Object.defineProperty(t,"__esModule",{value:!0}),t.setupDevtoolsPlugin=void 0,o(P,t),t.setupDevtoolsPlugin=function(e,t){if(p.hook)p.hook.emit(l.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN,e,t);else{(p.target.__VUE_DEVTOOLS_PLUGINS__=p.target.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:e,setupFn:t})}}}));function T(e,t){for(const o in t){const r=t[o],i=e[o];e[o]=n(i)&&n(r)?T(i,r):r}return e}function g(e){const n={};for(const o in e.value)n[o]=t.computed({get:()=>e.value[o],set:t=>e.value[o]=t});return n}function N(e,n=(()=>({})),o={},u={},c){const a=t.ref(c||n()),s=i();let f=!0,p=[];t.watch(()=>a.value,t=>{f&&p.forEach(n=>{n({storeName:e,type:"🧩 in place",payload:{}},t)})},{deep:!0,flush:"sync"});const l={id:e,_r:s,state:t.computed({get:()=>a.value,set:e=>{f=!1,a.value=e,f=!0}}),patch:function(t){f=!1,T(a.value,t),f=!0,p.forEach(n=>{n({storeName:e,type:"⤵️ patch",payload:t},a.value)})},subscribe:function(e){return p.push(e),()=>{const t=p.indexOf(e);t>-1&&p.splice(t,1)}},reset:function(){p=[],a.value=n()}},_={};for(const e in o)_[e]=t.computed(()=>(r(s),o[e].call(O,O)));const d={};for(const e in u)d[e]=function(){return r(s),u[e].apply(O,arguments)};const O=t.reactive({...l,...g(a),..._,...d});return O}function y(e){const{id:t,state:n,getters:o,actions:a}=e;return function(e){e&&r(e);const s=i();let f=u.get(s);f||u.set(s,f=new Map);let p=f.get(t);return p||f.set(t,p=N(t,n,o,a,function(e){const t=c.get(i());return t&&t()[e]}(t))),p}}return e.createPinia=function(){return{install(e){(e=>{a=e})(e)}}},e.createStore=y,e.defineStore=y,e.getRootState=function(e){const t=u.get(e);if(!t)return{};const n={};return t.forEach(e=>{n[e.id]=e.state}),n},e.setActiveReq=r,e.setStateProvider=function(e){c.set(i(),e)},e}({},Vue);

package.json

 {
   "name": "pinia",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Some awesome description",
   "main": "dist/pinia.cjs.js",
-  "browser": "dist/pinia.esm-browser.js",
   "module": "dist/pinia.esm-bundler.js",
@@ -19,2 +18,3 @@ "unpkg": "dist/pinia.global.js",
     "build:dts": "api-extractor run --local --verbose",
+    "size": "rollup -c size-checks/rollup.config.js && node scripts/check-size.js",
     "release": "bash scripts/release.sh",
@@ -61,2 +61,4 @@ "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
     "@types/node": "^14.11.2",
+    "@vue/devtools-api": "^6.0.0-beta.2",
+    "brotli": "^1.3.2",
     "codecov": "^3.6.1",
@@ -63,0 +65,0 @@ "conventional-changelog-cli": "^2.1.0",

README.md

@@ -1,2 +0,2 @@
-# Pinia [![Build Status](https://badgen.net/circleci/github/posva/pinia/next)](https://circleci.com/gh/posva/pinia) [![npm package](https://badgen.net/npm/v/pinia/next)](https://www.npmjs.com/package/pinia) [![coverage](https://badgen.net/codecov/c/github/posva/pinia/next)](https://codecov.io/github/posva/pinia) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)
+# Pinia [![Build Status](https://badgen.net/circleci/github/posva/pinia/v2)](https://circleci.com/gh/posva/pinia) [![npm package](https://badgen.net/npm/v/pinia/next)](https://www.npmjs.com/package/pinia) [![coverage](https://badgen.net/codecov/c/github/posva/pinia/next)](https://codecov.io/github/posva/pinia) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)
 
@@ -9,5 +9,5 @@ > Pronounced like the fruit in Spanish, _Piña_
 
-## 👉 [Demo](https://github.com/posva/vue-next-pinia)
+## 👉 [Demo on CodeSandbox](https://8jwbf.sse.codesandbox.io)
 
-⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works both for Vue 2.x and Vue 3.x and you are currently on the branch that supports Vue 3.x. [Go here for the Vue 2.x compatible version](https://github.com/posva/pinia/tree/master).
+⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works both for Vue 2.x and Vue 3.x and you are currently on the branch that supports Vue 3.x. [Go here for the Vue 2.x compatible version](https://github.com/posva/pinia/tree/v1).
 
@@ -14,0 +14,0 @@ What I want is to inspire others to think about ways to improve Vuex and come up with something that works very well with the composition api. Ideally it could also be used without it.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105236

increased by101.61%

Lines of code

2356

increased by123.53%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

24

increased by9.09%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes