Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

pinia

Package Overview
Dependencies
Maintainers
1
Versions
119
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pinia - npm Package Compare versions

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

21

CHANGELOG.md

@@ -0,1 +1,18 @@

# [2.0.0-alpha.3](https://github.com/posva/pinia/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2020-09-28)
### Code Refactoring
- rename createStore to defineStore ([a9ad160](https://github.com/posva/pinia/commit/a9ad160bb38d6bfae3a52c66ae28793937af05d6))
### Features
- deprecation message createStore ([3054251](https://github.com/posva/pinia/commit/30542514389e4b903e7726039b98324afdafcc24))
- **ssr:** support ssr ([59709e0](https://github.com/posva/pinia/commit/59709e0851db66d337054e3aab0db987fab20f9d))
### BREAKING CHANGES
- renamed `createStore` to `defineStore`. `createStore`
will be marked as deprecated during the alpha releases and then be
dropped.
# [2.0.0-alpha.2](https://github.com/posva/pinia/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2020-09-25)

@@ -16,4 +33,4 @@

- there is no longer a `state` property on the store,
you need to directly access it. `getters` no longer receive parameters,
- `state` properties no longer need to be accessed through `store.state`
- `getters` no longer receive parameters, access the store instance via `this`:
directly call `this.myState` to read state and other getters.

50

dist/pinia.cjs.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote

@@ -12,11 +12,2 @@ * @license MIT

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
/**

@@ -67,8 +58,17 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol('pinia')
);
function createPinia() {
return {
const pinia = {
install(app) {
app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
},
store(useStore) {
const store = useStore(pinia);
return store;
},
};
return pinia;
}

@@ -84,2 +84,11 @@ /**

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -446,2 +455,4 @@

}
// only warn the dev once
let isDevWarned;
/**

@@ -451,5 +462,7 @@ * Creates a `useStore` function that retrieves the store instance

*/
function createStore(options) {
function defineStore(options) {
const { id, state, getters, actions } = options;
return function useStore(reqKey) {
// avoid injecting if `useStore` when not possible
reqKey = reqKey || (vue.getCurrentInstance() && vue.inject(piniaSymbol));
if (reqKey)

@@ -471,7 +484,9 @@ setActiveReq(reqKey);

}
else {
else if (!isDevWarned && !false) {
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` +
`linkto docs TODO`);
`https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
`It will enable devtools and overall a better developer experience.`);
}

@@ -484,7 +499,12 @@ }

const createStore = ((options) => {
console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.');
return defineStore(options);
});
exports.createPinia = createPinia;
exports.createStore = createStore;
exports.defineStore = createStore;
exports.defineStore = defineStore;
exports.getRootState = getRootState;
exports.setActiveReq = setActiveReq;
exports.setStateProvider = setStateProvider;

49

dist/pinia.cjs.prod.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote

@@ -12,11 +12,2 @@ * @license MIT

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
/**

@@ -67,8 +58,16 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol());
function createPinia() {
return {
const pinia = {
install(app) {
app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
},
store(useStore) {
const store = useStore(pinia);
return store;
},
};
return pinia;
}

@@ -84,2 +83,11 @@ /**

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -446,2 +454,4 @@

}
// only warn the dev once
let isDevWarned;
/**

@@ -451,5 +461,7 @@ * Creates a `useStore` function that retrieves the store instance

*/
function createStore(options) {
function defineStore(options) {
const { id, state, getters, actions } = options;
return function useStore(reqKey) {
// avoid injecting if `useStore` when not possible
reqKey = reqKey || (vue.getCurrentInstance() && vue.inject(piniaSymbol));
if (reqKey)

@@ -471,7 +483,9 @@ setActiveReq(reqKey);

}
else {
else if (!isDevWarned && !false) {
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` +
`linkto docs TODO`);
`https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
`It will enable devtools and overall a better developer experience.`);
}

@@ -484,7 +498,12 @@ }

const createStore = ((options) => {
console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.');
return defineStore(options);
});
exports.createPinia = createPinia;
exports.createStore = createStore;
exports.defineStore = createStore;
exports.defineStore = defineStore;
exports.getRootState = getRootState;
exports.setActiveReq = setActiveReq;
exports.setStateProvider = setStateProvider;

36

dist/pinia.d.ts

@@ -1,6 +0,9 @@

import { App } from 'vue';
import { Ref } from 'vue';
import { Plugin as Plugin_2 } from 'vue';
export declare function createPinia(): {
install(app: App): void;
export declare function createPinia(): Pinia;
export declare const createStore: typeof defineStore;
declare type DeepPartial<T> = {
[K in keyof T]?: DeepPartial<T[K]>;
};

@@ -12,3 +15,3 @@

*/
declare function createStore<Id extends string, S extends StateTree, G, A>(options: {
export declare function defineStore<Id extends string, S extends StateTree, G, A>(options: {
id: Id;

@@ -18,9 +21,5 @@ state?: () => S;

actions?: A & ThisType<A & S & StoreWithState<Id, S> & StoreWithGetters<G>>;
}): (reqKey?: object | undefined) => Store<Id, S, G, A>;
export { createStore }
export { createStore as defineStore }
}): (reqKey?: object | null | undefined) => Store<Id, S, G, A>;
declare type DeepPartial<T> = {
[K in keyof T]?: DeepPartial<T[K]>;
};
declare type GenericStore = Store<string, StateTree, Record<string, Method>, Record<string, Method>>;

@@ -34,4 +33,11 @@ /**

declare type Method = (...args: any[]) => any;
declare type NonNullObject = Record<any, any>;
declare interface Pinia {
install: Exclude<Plugin_2['install'], undefined>;
store<F extends (req?: NonNullObject) => GenericStore>(useStore: F): ReturnType<F>;
}
export declare const setActiveReq: (req: NonNullObject | undefined) => Record<any, any> | undefined;

@@ -48,10 +54,6 @@

export declare type StateTree = Record<string | number | symbol, any>;
declare type StateTree = Record<string | number | symbol, any>;
export declare type Store<Id extends string, S extends StateTree, G, A> = StoreWithState<Id, S> & S & StoreWithGetters<G> & StoreWithActions<A>;
declare type Store<Id extends string, S extends StateTree, G, A> = StoreWithState<Id, S> & S & StoreWithGetters<G> & StoreWithActions<A>;
export declare interface StoreGetter<S extends StateTree, T = any> {
(state: S, getters: Record<string, Ref<any>>): T;
}
declare type StoreWithActions<A> = {

@@ -58,0 +60,0 @@ [k in keyof A]: A[k] extends (...args: infer P) => infer R ? (...args: P) => R : never;

52

dist/pinia.esm-browser.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote
* @license MIT
*/
import { ref, watch, computed, reactive } from 'vue';
import { getCurrentInstance, inject, ref, watch, computed, reactive } from 'vue';
function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
/**

@@ -62,8 +53,17 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol('pinia')
);
function createPinia() {
return {
const pinia = {
install(app) {
app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
},
store(useStore) {
const store = useStore(pinia);
return store;
},
};
return pinia;
}

@@ -79,2 +79,11 @@ /**

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -441,2 +450,4 @@

}
// only warn the dev once
let isDevWarned;
/**

@@ -446,5 +457,7 @@ * Creates a `useStore` function that retrieves the store instance

*/
function createStore(options) {
function defineStore(options) {
const { id, state, getters, actions } = options;
return function useStore(reqKey) {
// avoid injecting if `useStore` when not possible
reqKey = reqKey || (getCurrentInstance() && inject(piniaSymbol));
if (reqKey)

@@ -466,7 +479,9 @@ setActiveReq(reqKey);

}
else {
else if (!isDevWarned && !false) {
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` +
`linkto docs TODO`);
`https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
`It will enable devtools and overall a better developer experience.`);
}

@@ -479,2 +494,7 @@ }

export { createPinia, createStore, createStore as defineStore, getRootState, setActiveReq, setStateProvider };
const createStore = ((options) => {
console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.');
return defineStore(options);
});
export { createPinia, createStore, defineStore, getRootState, setActiveReq, setStateProvider };

53

dist/pinia.esm-bundler.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote
* @license MIT
*/
import { ref, watch, computed, reactive } from 'vue';
import { getCurrentInstance, inject, ref, watch, computed, reactive } from 'vue';
function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
/**

@@ -62,8 +53,18 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

const getClientApp = () => clientApp;
const piniaSymbol = ((process.env.NODE_ENV !== 'production')
? Symbol('pinia')
: Symbol());
function createPinia() {
return {
const pinia = {
install(app) {
app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
},
store(useStore) {
const store = useStore(pinia);
return store;
},
};
return pinia;
}

@@ -79,2 +80,11 @@ /**

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -441,2 +451,4 @@

}
// only warn the dev once
let isDevWarned;
/**

@@ -446,5 +458,7 @@ * Creates a `useStore` function that retrieves the store instance

*/
function createStore(options) {
function defineStore(options) {
const { id, state, getters, actions } = options;
return function useStore(reqKey) {
// avoid injecting if `useStore` when not possible
reqKey = reqKey || (getCurrentInstance() && inject(piniaSymbol));
if (reqKey)

@@ -466,7 +480,9 @@ setActiveReq(reqKey);

}
else {
else if (!isDevWarned && !(process.env.NODE_ENV === '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` +
`linkto docs TODO`);
`https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
`It will enable devtools and overall a better developer experience.`);
}

@@ -479,2 +495,7 @@ }

export { createPinia, createStore, createStore as defineStore, getRootState, setActiveReq, setStateProvider };
const createStore = ((options) => {
console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.');
return defineStore(options);
});
export { createPinia, createStore, defineStore, getRootState, setActiveReq, setStateProvider };

50

dist/pinia.global.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote

@@ -9,11 +9,2 @@ * @license MIT

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
/**

@@ -64,8 +55,17 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol('pinia')
);
function createPinia() {
return {
const pinia = {
install(app) {
app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
},
store(useStore) {
const store = useStore(pinia);
return store;
},
};
return pinia;
}

@@ -81,2 +81,11 @@ /**

function isPlainObject(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
o) {
return (o &&
typeof o === 'object' &&
Object.prototype.toString.call(o) === '[object Object]' &&
typeof o.toJSON !== 'function');
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -443,2 +452,4 @@

}
// only warn the dev once
let isDevWarned;
/**

@@ -448,5 +459,7 @@ * Creates a `useStore` function that retrieves the store instance

*/
function createStore(options) {
function defineStore(options) {
const { id, state, getters, actions } = options;
return function useStore(reqKey) {
// avoid injecting if `useStore` when not possible
reqKey = reqKey || (vue.getCurrentInstance() && vue.inject(piniaSymbol));
if (reqKey)

@@ -468,7 +481,9 @@ setActiveReq(reqKey);

}
else {
else if (!isDevWarned && !false) {
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` +
`linkto docs TODO`);
`https://github.com/posva/pinia/tree/v2#install-the-plugin\n` +
`It will enable devtools and overall a better developer experience.`);
}

@@ -481,5 +496,10 @@ }

const createStore = ((options) => {
console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.');
return defineStore(options);
});
exports.createPinia = createPinia;
exports.createStore = createStore;
exports.defineStore = createStore;
exports.defineStore = defineStore;
exports.getRootState = getRootState;

@@ -486,0 +506,0 @@ exports.setActiveReq = setActiveReq;

4

dist/pinia.global.prod.js
/*!
* pinia v2.0.0-alpha.2
* pinia v2.0.0-alpha.3
* (c) 2020 Eduardo San Martin Morote
* @license MIT
*/
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);
var Pinia=function(e,t){"use strict";let n={};const o=e=>e&&(n=e),r=()=>n,i=new WeakMap,u=new WeakMap;let c;const a=Symbol();new Set;function s(e){return e&&"object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e)&&"function"!=typeof e.toJSON}var f="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function l(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=l((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!==f?f:{},t.hook=t.target.__VUE_DEVTOOLS_GLOBAL_HOOK__})),_=l((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={}))})),d=l((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),O=l((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),E=l((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),v=l((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),P=l((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={}))})),T=l((function(e,t){var n=f&&f.__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=f&&f.__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(d,t),o(O,t),o(E,t),o(v,t),o(P,t)}));l((function(e,t){var n=f&&f.__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=f&&f.__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(T,t),t.setupDevtoolsPlugin=function(e,t){if(p.hook)p.hook.emit(_.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN,e,t);else{(p.target.__VUE_DEVTOOLS_PLUGINS__=p.target.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:e,setupFn:t})}}}));function g(e,t){for(const n in t){const o=t[n],r=e[n];e[n]=s(r)&&s(o)?g(r,o):o}return e}function N(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 y(e,n=(()=>({})),i={},u={},c){const a=t.ref(c||n()),s=r();let f=!0,l=[];t.watch(()=>a.value,t=>{f&&l.forEach(n=>{n({storeName:e,type:"🧩 in place",payload:{}},t)})},{deep:!0,flush:"sync"});const p={id:e,_r:s,state:t.computed({get:()=>a.value,set:e=>{f=!1,a.value=e,f=!0}}),patch:function(t){f=!1,g(a.value,t),f=!0,l.forEach(n=>{n({storeName:e,type:"⤵️ patch",payload:t},a.value)})},subscribe:function(e){return l.push(e),()=>{const t=l.indexOf(e);t>-1&&l.splice(t,1)}},reset:function(){l=[],a.value=n()}},_={};for(const e in i)_[e]=t.computed(()=>(o(s),i[e].call(O,O)));const d={};for(const e in u)d[e]=function(){return o(s),u[e].apply(O,arguments)};const O=t.reactive({...p,...N(a),..._,...d});return O}function S(e){const{id:n,state:c,getters:s,actions:f}=e;return function(e){(e=e||t.getCurrentInstance()&&t.inject(a))&&o(e);const l=r();let p=i.get(l);p||i.set(l,p=new Map);let _=p.get(n);return _||p.set(n,_=y(n,c,s,f,function(e){const t=u.get(r());return t&&t()[e]}(n))),_}}return e.createPinia=function(){const e={install(t){t.provide(a,e),(e=>{c=e})(t)},store:t=>t(e)};return e},e.createStore=e=>(console.warn('[🍍]: "createStore" has been deprecated and will be removed on the sable release, use "defineStore" instead.'),S(e)),e.defineStore=S,e.getRootState=function(e){const t=i.get(e);if(!t)return{};const n={};return t.forEach(e=>{n[e.id]=e.state}),n},e.setActiveReq=o,e.setStateProvider=function(e){u.set(r(),e)},e}({},Vue);

3

package.json
{
"name": "pinia",
"version": "2.0.0-alpha.2",
"version": "2.0.0-alpha.3",
"description": "Some awesome description",

@@ -61,2 +61,3 @@ "main": "dist/pinia.cjs.js",

"@vue/devtools-api": "^6.0.0-beta.2",
"@vue/server-renderer": "^3.0.0",
"brotli": "^1.3.2",

@@ -63,0 +64,0 @@ "codecov": "^3.6.1",

151

README.md

@@ -9,3 +9,3 @@ # 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)

## 👉 [Demo on CodeSandbox](https://8jwbf.sse.codesandbox.io)
## 👉 [Demo on CodeSandbox](https://j4qzw.csb.app/)

@@ -61,6 +61,6 @@ ⚠️⚠️⚠️ 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).

- [ ] Should the state be merged at the same level as actions and getters?
- [ ] Allow grouping stores together into a similar structure and allow defining new getters (`pinia`)
- [x] Should the state be merged at the same level as actions and getters?
- [ ] ~~Allow grouping stores together into a similar structure and allow defining new getters (`pinia`)~~
You can directly call `useOtherStore()` inside of a getter or action.
- [ ] Getter with params that act like computed properties (@ktsn)
- [ ] Passing all getters to a getter (need Typing support)

@@ -77,2 +77,15 @@ ## Installation

### Install the plugin
Create a pinia (the root store) and pass it to app:
```js
import { createPinia } from 'pinia'
app.use(createPinia())
```
This will also add devtools support. Some features like time traveling and editing are still not supported because vue-devtools doesn't expose the necessary APIs yet.
**NOTE**: this API is still experimental and is currently only used for devtools and SSR but that might change in the future.
### Creating a Store

@@ -83,5 +96,5 @@

```ts
import { createStore } from 'pinia'
import { defineStore } from 'pinia'
export const useMainStore = createStore({
export const useMainStore = defineStore({
// name of the store

@@ -115,3 +128,3 @@ // it is used in devtools and allows restoring state

`createStore` returns a function that has to be called to get access to the store:
`defineStore` returns a function that has to be called to get access to the store:

@@ -137,5 +150,5 @@ ```ts

Note: the SSR implementation is yet to be decided on Pinia, but if you intend having SSR on your application, you should avoid using `useStore` functions at the root level of a file to make sure the correct store is retrieved for your request.
Note: the SSR implementation is yet to be decided on Pinia, but if you intend having SSR on your application, you should avoid using `useStore` functions at the root level of a file to make sure the correct store is retrieved for your request. Here is an example:
Or:
**Avoid doing this\***:

@@ -152,3 +165,3 @@ ```ts

router.beforeEach((to, from, next) => {
if (main.state.isLoggedIn) next()
if (main.isLoggedIn) next()
else next('/login')

@@ -158,3 +171,3 @@ })

It must be called **after the Composition API plugin is installed**. That's why calling `useStore` inside functions is usually safe, because they are called after the plugin being installed:
Instead, call `useMainStore()` at the top of `setup`, like `inject` and `provide` in Vue:

@@ -173,8 +186,7 @@ ```ts

router.beforeEach((to, from, next) => {
router.beforeEach((to) => {
// ✅ This will work (requires an extra param for SSR, see below)
const main = useMainStore()
if (main.state.isLoggedIn) next()
else next('/login')
if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
})

@@ -191,5 +203,9 @@ ```

const main = useMainStore()
const text = main.name
const doubleCount = main.doubleCount
return {}
const text = main.name // "eduardo"
const doubleCount = main.doubleCount // 2
return {
text, // will always be "eduardo"
textDynamic: computed(() => main.name), // reactive value
}
},

@@ -243,3 +259,3 @@ })

The main difference here is that `patch` allows you to group multiple changes into one single entry in the devtools (which are not yet available for Vue 3.x).
The main difference here is that `patch` allows you to group multiple changes into one single entry in the devtools.

@@ -256,4 +272,31 @@ ### Replacing the `state`

To be decided once SSR is implemented on Vue 3
Pinia should work out of the box for SSR as long as you call your `useStore()` functions at the top of `setup` functions, `getters` and `actions`:
```ts
export default defineComponent({
setup() {
// this works because pinia knows what application is running
const main = useMainStore()
return { main }
},
})
```
If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](#install-the-plugin) to the `useStore()` function call:
```ts
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
router.beforeEach((to) => {
// ✅ This will work make sure the correct store is used for the current running app
const main = useMainStore(pinia)
if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
})
```
### Composing Stores

@@ -267,2 +310,28 @@

You can call `useOtherStore()` at the top of any getter an action:
```ts
import { useUserStore } from './user'
export const cartStore = defineStore({
id: 'cart',
getters: {
// ... other getters
summary() {
const user = useUserStore()
return `Hi ${user.name}, you have ${this.list.length} items in your cart. It costs ${this.price}.`
},
},
actions: {
purchase() {
const user = useUserStore()
return apiPurchase(user.id, this.list)
},
},
})
```
#### Shared Getters

@@ -274,7 +343,7 @@

```ts
import { createStore } from 'pinia'
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useCartStore } from './cart'
export const useSharedStore = createStore({
export const useSharedStore = defineStore({
id: 'shared',

@@ -297,7 +366,7 @@ getters: {

```ts
import { createStore } from 'pinia'
import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useCartStore } from './cart'
export const useSharedStore = createStore({
export const useSharedStore = defineStore({
id: 'shared',

@@ -321,38 +390,2 @@ state: () => ({}),

#### Creating _Pinias_
_Not implemented_. Still under discussion, needs more feedback as this doesn't seem necessary because it can be replaced by shared stores as shown above.
Combine multiple _stores_ (gajos) into a new one:
```ts
import { pinia } from 'pinia'
import { useUserStore } from './user'
import { useCartStore, emptyCart } from './cart'
export const useCartUserStore = pinia(
{
user: useUserStore,
cart: useCartStore,
},
{
getters: {
combinedGetter () {
return `Hi ${this.user.name}, you have ${this.cart.list.length} items in your cart. It costs ${this.cart.price}.`,
}
},
actions: {
async orderCart() {
try {
await apiOrderCart(this.user.token, this.cart.items)
this.cart.emptyCart()
} catch (err) {
displayError(err)
}
},
},
}
)
```
## Related

@@ -359,0 +392,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc