You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

pinia

Package Overview
Dependencies
Maintainers
1
Versions
127
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.4
to
2.0.0-alpha.5

dist/pinia.common.js
dist/pinia.esm-browser.min.js
dist/pinia.js
dist/pinia.min.js

10

CHANGELOG.md

@@ -0,1 +1,11 @@

# [2.0.0-alpha.5](https://github.com/posva/pinia/compare/v2.0.0-alpha.4...v2.0.0-alpha.5) (2020-10-09)
### Code Refactoring
- prefix store properties with \$ ([#254](https://github.com/posva/pinia/issues/254)) ([751f286](https://github.com/posva/pinia/commit/751f2867b97f210488eb82bad1ec05af6ab6e72c))
### BREAKING CHANGES
- all store properties (`id`, `state`, `patch`, `subscribe`, and `reset`) are now prefixed with `$` to allow properties defined with the same type and avoid types breaking. Tip: you can refactor your whole codebase with F2 (or right-click + Refactor) on each of the store's properties
# [2.0.0-alpha.4](https://github.com/posva/pinia/compare/v2.0.0-alpha.3...v2.0.0-alpha.4) (2020-09-29)

@@ -2,0 +12,0 @@

173

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

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

const IS_CLIENT = typeof window !== 'undefined';
/**

@@ -48,12 +50,6 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

stores.forEach((store) => {
rootState[store.id] = store.state;
rootState[store.$id] = store.$state;
});
return rootState;
}
/**
* Client-side application instance used for devtools
*/
let clientApp;
const setClientApp = (app) => (clientApp = app);
const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol('pinia')

@@ -65,8 +61,6 @@ );

app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
app.config.globalProperties.$pinia = pinia.store;
},
store(useStore) {
const store = useStore(pinia);
return store;
return useStore(pinia);
},

@@ -76,10 +70,2 @@ };

}
/**
* Registered stores
*/
const stores = new Set();
function registerStore(store) {
stores.add(store);
}
const getRegisteredStores = () => stores;

@@ -227,120 +213,2 @@ function isPlainObject(

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 withScope(factory) {

@@ -385,3 +253,3 @@ {

*/
function buildStore(id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
function buildStore($id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
const state = vue.ref(initialState || buildState());

@@ -395,3 +263,3 @@ // TODO: remove req part?

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '🧩 in place', payload: {} }, state);
callback({ storeName: $id, type: '🧩 in place', payload: {} }, state);
});

@@ -403,3 +271,3 @@ }

});
function patch(partialState) {
function $patch(partialState) {
isListening = false;

@@ -410,6 +278,6 @@ innerPatch(state.value, partialState);

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value);
callback({ storeName: $id, type: '⤵️ patch', payload: partialState }, state.value);
});
}
function subscribe(callback) {
function $subscribe(callback) {
subscriptions.push(callback);

@@ -423,3 +291,3 @@ return () => {

}
function reset() {
function $reset() {
subscriptions = [];

@@ -429,6 +297,6 @@ state.value = buildState();

const storeWithState = {
id,
$id,
_r,
// @ts-ignore, `reactive` unwraps this making it of type S
state: vue.computed({
$state: vue.computed({
get: () => state.value,

@@ -441,5 +309,5 @@ set: (newState) => {

}),
patch,
subscribe,
reset,
$patch,
$subscribe,
$reset,
};

@@ -485,2 +353,3 @@ const computedGetters = {};

setActiveReq(reqKey);
// TODO: worth warning on server if no reqKey as it can leak data
const req = getActiveReq();

@@ -496,7 +365,3 @@ let stores = storesMap.get(req);

true /*|| __FEATURE_PROD_DEVTOOLS__*/) {
const app = getClientApp();
if (app) {
addDevtools(app, store);
}
else if (!isDevWarned && !false) {
if (!isDevWarned && !false) {
isDevWarned = true;

@@ -503,0 +368,0 @@ console.warn(`[🍍]: store was instantiated before calling\n` +

173

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

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

const IS_CLIENT = typeof window !== 'undefined';
/**

@@ -48,12 +50,6 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

stores.forEach((store) => {
rootState[store.id] = store.state;
rootState[store.$id] = store.$state;
});
return rootState;
}
/**
* Client-side application instance used for devtools
*/
let clientApp;
const setClientApp = (app) => (clientApp = app);
const getClientApp = () => clientApp;
const piniaSymbol = ( Symbol());

@@ -64,8 +60,6 @@ function createPinia() {

app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
app.config.globalProperties.$pinia = pinia.store;
},
store(useStore) {
const store = useStore(pinia);
return store;
return useStore(pinia);
},

@@ -75,10 +69,2 @@ };

}
/**
* Registered stores
*/
const stores = new Set();
function registerStore(store) {
stores.add(store);
}
const getRegisteredStores = () => stores;

@@ -226,120 +212,2 @@ function isPlainObject(

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 withScope(factory) {

@@ -384,3 +252,3 @@ {

*/
function buildStore(id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
function buildStore($id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
const state = vue.ref(initialState || buildState());

@@ -394,3 +262,3 @@ // TODO: remove req part?

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '🧩 in place', payload: {} }, state);
callback({ storeName: $id, type: '🧩 in place', payload: {} }, state);
});

@@ -402,3 +270,3 @@ }

});
function patch(partialState) {
function $patch(partialState) {
isListening = false;

@@ -409,6 +277,6 @@ innerPatch(state.value, partialState);

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value);
callback({ storeName: $id, type: '⤵️ patch', payload: partialState }, state.value);
});
}
function subscribe(callback) {
function $subscribe(callback) {
subscriptions.push(callback);

@@ -422,3 +290,3 @@ return () => {

}
function reset() {
function $reset() {
subscriptions = [];

@@ -428,6 +296,6 @@ state.value = buildState();

const storeWithState = {
id,
$id,
_r,
// @ts-ignore, `reactive` unwraps this making it of type S
state: vue.computed({
$state: vue.computed({
get: () => state.value,

@@ -440,5 +308,5 @@ set: (newState) => {

}),
patch,
subscribe,
reset,
$patch,
$subscribe,
$reset,
};

@@ -484,2 +352,3 @@ const computedGetters = {};

setActiveReq(reqKey);
// TODO: worth warning on server if no reqKey as it can leak data
const req = getActiveReq();

@@ -495,7 +364,3 @@ let stores = storesMap.get(req);

false /*|| __FEATURE_PROD_DEVTOOLS__*/) {
const app = getClientApp();
if (app) {
addDevtools(app, store);
}
else if (!isDevWarned && !false) {
if (!isDevWarned && !false) {
isDevWarned = true;

@@ -502,0 +367,0 @@ console.warn(`[🍍]: store was instantiated before calling\n` +

24

dist/pinia.d.ts

@@ -22,4 +22,2 @@ import { Plugin as Plugin_2 } from 'vue';

declare type GenericStore = Store<string, StateTree, Record<string, Method>, Record<string, Method>>;
/**

@@ -32,4 +30,2 @@ * Gets the root state of all active stores. This is useful when reporting an application crash by

declare type Method = (...args: any[]) => any;
declare type NonNullObject = Record<any, any>;

@@ -39,3 +35,3 @@

install: Exclude<Plugin_2['install'], undefined>;
store<F extends (req?: NonNullObject) => GenericStore>(useStore: F): ReturnType<F>;
store<F extends (...args: any[]) => any>(useStore: F): ReturnType<F>;
}

@@ -70,9 +66,11 @@

*/
id: Id;
$id: Id;
/**
* State of the Store. Setting it will replace the whole state.
*/
state: S;
$state: S;
/**
* Private property defining the request key for this store
*
* @internal
*/

@@ -82,5 +80,6 @@ _r: NonNullObject;

* Applies a state patch to current state. Allows passing nested values
*
* @param partialState - patch to apply to the state
*/
patch(partialState: DeepPartial<S>): void;
$patch(partialState: DeepPartial<S>): void;
/**

@@ -90,9 +89,10 @@ * Resets the store to its initial state by removing all subscriptions and

*/
reset(): void;
$reset(): void;
/**
* Setups a callback to be called whenever the state changes.
* @param callback - callback that is called whenever the state
* @returns function that removes callback from subscriptions
*
* @param callback - callback passed to the watcher
* @returns function that removes the watcher
*/
subscribe(callback: SubscriptionCallback<S>): () => void;
$subscribe(callback: SubscriptionCallback<S>): () => void;
}

@@ -99,0 +99,0 @@

62

dist/pinia.esm-browser.js
/*!
* pinia v2.0.0-alpha.4
* pinia v2.0.0-alpha.5
* (c) 2020 Eduardo San Martin Morote

@@ -8,2 +8,4 @@ * @license MIT

const IS_CLIENT = typeof window !== 'undefined';
/**

@@ -44,3 +46,3 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

stores.forEach((store) => {
rootState[store.id] = store.state;
rootState[store.$id] = store.$state;
});

@@ -61,8 +63,11 @@ return rootState;

app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
app.config.globalProperties.$pinia = pinia.store;
// TODO: write test
// only set the app on client
if ( IS_CLIENT) {
setClientApp(app);
}
},
store(useStore) {
const store = useStore(pinia);
return store;
return useStore(pinia);
},

@@ -240,6 +245,6 @@ };

payload.instanceData.state.push({
type: '🍍 ' + store.id,
type: '🍍 ' + store.$id,
key: 'state',
editable: false,
value: store.state,
value: store.$state,
});

@@ -274,3 +279,3 @@ }

}
store.subscribe((mutation, state) => {
store.$subscribe((mutation, state) => {
// rootStore.state[store.id] = state

@@ -301,3 +306,3 @@ const data = {

payload.rootNodes = (payload.filter
? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
? stores.filter((store) => store.$id.toLowerCase().includes(payload.filter.toLowerCase()))
: stores).map(formatStoreForInspectorTree);

@@ -309,3 +314,3 @@ }

const stores = Array.from(getRegisteredStores());
const store = stores.find((store) => store.id === payload.nodeId);
const store = stores.find((store) => store.$id === payload.nodeId);
if (store) {

@@ -324,3 +329,3 @@ payload.state = {

api.notifyComponentUpdate();
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.$id}" store installed`);
});

@@ -330,4 +335,4 @@ }

return {
id: store.id,
label: store.id,
id: store.$id,
label: store.$id,
tags: [],

@@ -338,4 +343,4 @@ };

const fields = [
{ editable: false, key: 'id', value: formatDisplay(store.id) },
{ editable: true, key: 'state', value: store.state },
{ editable: false, key: 'id', value: formatDisplay(store.$id) },
{ editable: true, key: 'state', value: store.$state },
];

@@ -345,4 +350,2 @@ return fields;

const IS_CLIENT = typeof window !== 'undefined';
function withScope(factory) {

@@ -398,3 +401,3 @@ if ( IS_CLIENT) {

*/
function buildStore(id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
function buildStore($id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
const state = ref(initialState || buildState());

@@ -408,3 +411,3 @@ // TODO: remove req part?

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '🧩 in place', payload: {} }, state);
callback({ storeName: $id, type: '🧩 in place', payload: {} }, state);
});

@@ -416,3 +419,3 @@ }

});
function patch(partialState) {
function $patch(partialState) {
isListening = false;

@@ -423,6 +426,6 @@ innerPatch(state.value, partialState);

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value);
callback({ storeName: $id, type: '⤵️ patch', payload: partialState }, state.value);
});
}
function subscribe(callback) {
function $subscribe(callback) {
subscriptions.push(callback);

@@ -436,3 +439,3 @@ return () => {

}
function reset() {
function $reset() {
subscriptions = [];

@@ -442,6 +445,6 @@ state.value = buildState();

const storeWithState = {
id,
$id,
_r,
// @ts-ignore, `reactive` unwraps this making it of type S
state: computed({
$state: computed({
get: () => state.value,

@@ -454,5 +457,5 @@ set: (newState) => {

}),
patch,
subscribe,
reset,
$patch,
$subscribe,
$reset,
};

@@ -498,2 +501,3 @@ const computedGetters = {};

setActiveReq(reqKey);
// TODO: worth warning on server if no reqKey as it can leak data
const req = getActiveReq();

@@ -500,0 +504,0 @@ let stores = storesMap.get(req);

62

dist/pinia.esm-bundler.js
/*!
* pinia v2.0.0-alpha.4
* pinia v2.0.0-alpha.5
* (c) 2020 Eduardo San Martin Morote

@@ -8,2 +8,4 @@ * @license MIT

const IS_CLIENT = typeof window !== 'undefined';
/**

@@ -44,3 +46,3 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

stores.forEach((store) => {
rootState[store.id] = store.state;
rootState[store.$id] = store.$state;
});

@@ -62,8 +64,11 @@ return rootState;

app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
app.config.globalProperties.$pinia = pinia.store;
// TODO: write test
// only set the app on client
if ( IS_CLIENT) {
setClientApp(app);
}
},
store(useStore) {
const store = useStore(pinia);
return store;
return useStore(pinia);
},

@@ -241,6 +246,6 @@ };

payload.instanceData.state.push({
type: '🍍 ' + store.id,
type: '🍍 ' + store.$id,
key: 'state',
editable: false,
value: store.state,
value: store.$state,
});

@@ -275,3 +280,3 @@ }

}
store.subscribe((mutation, state) => {
store.$subscribe((mutation, state) => {
// rootStore.state[store.id] = state

@@ -302,3 +307,3 @@ const data = {

payload.rootNodes = (payload.filter
? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
? stores.filter((store) => store.$id.toLowerCase().includes(payload.filter.toLowerCase()))
: stores).map(formatStoreForInspectorTree);

@@ -310,3 +315,3 @@ }

const stores = Array.from(getRegisteredStores());
const store = stores.find((store) => store.id === payload.nodeId);
const store = stores.find((store) => store.$id === payload.nodeId);
if (store) {

@@ -325,3 +330,3 @@ payload.state = {

api.notifyComponentUpdate();
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.$id}" store installed`);
});

@@ -331,4 +336,4 @@ }

return {
id: store.id,
label: store.id,
id: store.$id,
label: store.$id,
tags: [],

@@ -339,4 +344,4 @@ };

const fields = [
{ editable: false, key: 'id', value: formatDisplay(store.id) },
{ editable: true, key: 'state', value: store.state },
{ editable: false, key: 'id', value: formatDisplay(store.$id) },
{ editable: true, key: 'state', value: store.$state },
];

@@ -346,4 +351,2 @@ return fields;

const IS_CLIENT = typeof window !== 'undefined';
function withScope(factory) {

@@ -399,3 +402,3 @@ if ( IS_CLIENT) {

*/
function buildStore(id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
function buildStore($id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
const state = ref(initialState || buildState());

@@ -409,3 +412,3 @@ // TODO: remove req part?

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '🧩 in place', payload: {} }, state);
callback({ storeName: $id, type: '🧩 in place', payload: {} }, state);
});

@@ -417,3 +420,3 @@ }

});
function patch(partialState) {
function $patch(partialState) {
isListening = false;

@@ -424,6 +427,6 @@ innerPatch(state.value, partialState);

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value);
callback({ storeName: $id, type: '⤵️ patch', payload: partialState }, state.value);
});
}
function subscribe(callback) {
function $subscribe(callback) {
subscriptions.push(callback);

@@ -437,3 +440,3 @@ return () => {

}
function reset() {
function $reset() {
subscriptions = [];

@@ -443,6 +446,6 @@ state.value = buildState();

const storeWithState = {
id,
$id,
_r,
// @ts-ignore, `reactive` unwraps this making it of type S
state: computed({
$state: computed({
get: () => state.value,

@@ -455,5 +458,5 @@ set: (newState) => {

}),
patch,
subscribe,
reset,
$patch,
$subscribe,
$reset,
};

@@ -499,2 +502,3 @@ const computedGetters = {};

setActiveReq(reqKey);
// TODO: worth warning on server if no reqKey as it can leak data
const req = getActiveReq();

@@ -501,0 +505,0 @@ let stores = storesMap.get(req);

62

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

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

const IS_CLIENT = typeof window !== 'undefined';
/**

@@ -45,3 +47,3 @@ * setActiveReq must be called to handle SSR at the top of functions like `fetch`, `setup`, `serverPrefetch` and others

stores.forEach((store) => {
rootState[store.id] = store.state;
rootState[store.$id] = store.$state;
});

@@ -62,8 +64,11 @@ return rootState;

app.provide(piniaSymbol, pinia);
// TODO: strip out if no need for
setClientApp(app);
app.config.globalProperties.$pinia = pinia.store;
// TODO: write test
// only set the app on client
if ( IS_CLIENT) {
setClientApp(app);
}
},
store(useStore) {
const store = useStore(pinia);
return store;
return useStore(pinia);
},

@@ -241,6 +246,6 @@ };

payload.instanceData.state.push({
type: '🍍 ' + store.id,
type: '🍍 ' + store.$id,
key: 'state',
editable: false,
value: store.state,
value: store.$state,
});

@@ -275,3 +280,3 @@ }

}
store.subscribe((mutation, state) => {
store.$subscribe((mutation, state) => {
// rootStore.state[store.id] = state

@@ -302,3 +307,3 @@ const data = {

payload.rootNodes = (payload.filter
? stores.filter((store) => store.id.toLowerCase().includes(payload.filter.toLowerCase()))
? stores.filter((store) => store.$id.toLowerCase().includes(payload.filter.toLowerCase()))
: stores).map(formatStoreForInspectorTree);

@@ -310,3 +315,3 @@ }

const stores = Array.from(getRegisteredStores());
const store = stores.find((store) => store.id === payload.nodeId);
const store = stores.find((store) => store.$id === payload.nodeId);
if (store) {

@@ -325,3 +330,3 @@ payload.state = {

api.notifyComponentUpdate();
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.id}" store installed`);
__VUE_DEVTOOLS_TOAST__(`🍍 "${store.$id}" store installed`);
});

@@ -331,4 +336,4 @@ }

return {
id: store.id,
label: store.id,
id: store.$id,
label: store.$id,
tags: [],

@@ -339,4 +344,4 @@ };

const fields = [
{ editable: false, key: 'id', value: formatDisplay(store.id) },
{ editable: true, key: 'state', value: store.state },
{ editable: false, key: 'id', value: formatDisplay(store.$id) },
{ editable: true, key: 'state', value: store.$state },
];

@@ -346,4 +351,2 @@ return fields;

const IS_CLIENT = typeof window !== 'undefined';
function withScope(factory) {

@@ -399,3 +402,3 @@ if ( IS_CLIENT) {

*/
function buildStore(id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
function buildStore($id, buildState = () => ({}), getters = {}, actions = {}, initialState) {
const state = vue.ref(initialState || buildState());

@@ -409,3 +412,3 @@ // TODO: remove req part?

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '🧩 in place', payload: {} }, state);
callback({ storeName: $id, type: '🧩 in place', payload: {} }, state);
});

@@ -417,3 +420,3 @@ }

});
function patch(partialState) {
function $patch(partialState) {
isListening = false;

@@ -424,6 +427,6 @@ innerPatch(state.value, partialState);

subscriptions.forEach((callback) => {
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value);
callback({ storeName: $id, type: '⤵️ patch', payload: partialState }, state.value);
});
}
function subscribe(callback) {
function $subscribe(callback) {
subscriptions.push(callback);

@@ -437,3 +440,3 @@ return () => {

}
function reset() {
function $reset() {
subscriptions = [];

@@ -443,6 +446,6 @@ state.value = buildState();

const storeWithState = {
id,
$id,
_r,
// @ts-ignore, `reactive` unwraps this making it of type S
state: vue.computed({
$state: vue.computed({
get: () => state.value,

@@ -455,5 +458,5 @@ set: (newState) => {

}),
patch,
subscribe,
reset,
$patch,
$subscribe,
$reset,
};

@@ -499,2 +502,3 @@ const computedGetters = {};

setActiveReq(reqKey);
// TODO: worth warning on server if no reqKey as it can leak data
const req = getActiveReq();

@@ -501,0 +505,0 @@ let stores = storesMap.get(req);

4

dist/pinia.global.prod.js
/*!
* pinia v2.0.0-alpha.4
* pinia v2.0.0-alpha.5
* (c) 2020 Eduardo San Martin Morote
* @license MIT
*/
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__})),d=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={}))})),_=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(_,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(d.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN,e,t);else{(p.target.__VUE_DEVTOOLS_PLUGINS__=p.target.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:e,setupFn:t})}}}));const g="undefined"!=typeof window;function N(e,t){for(const n in t){const o=t[n],r=e[n];e[n]=s(r)&&s(o)?N(r,o):o}return e}function y(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 S(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,N(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()}},d={};for(const e in i)d[e]=t.computed(()=>(o(s),i[e].call(O,O)));const _={};for(const e in u)_[e]=function(){return o(s),u[e].apply(O,arguments)};const O=t.reactive({...p,...y(a),...d,..._});return O}function b(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 d=p.get(n);return d||p.set(n,d=function(e){if(g){let n;return t.createApp({setup:()=>(n=e(),()=>null)}).mount(document.createElement("div")),n}return e()}(()=>S(n,c,s,f,function(e){const t=u.get(r());return t&&t()[e]}(n)))),d}}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.'),b(e)),e.defineStore=b,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);
var Pinia=function(e,t){"use strict";const n="undefined"!=typeof window;let o={};const r=e=>e&&(o=e),i=()=>o,u=new WeakMap,c=new WeakMap;let a;const s=Symbol();new Set;function f(e){return e&&"object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e)&&"function"!=typeof e.toJSON}var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function p(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 d=p((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!==l?l:{},t.hook=t.target.__VUE_DEVTOOLS_GLOBAL_HOOK__})),_=p((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={}))})),O=p((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),E=p((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),v=p((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),P=p((function(e,t){Object.defineProperty(t,"__esModule",{value:!0})})),g=p((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=p((function(e,t){var n=l&&l.__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=l&&l.__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(O,t),o(E,t),o(v,t),o(P,t),o(g,t)}));p((function(e,t){var n=l&&l.__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=l&&l.__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(d.hook)d.hook.emit(_.ApiHookEvents.SETUP_DEVTOOLS_PLUGIN,e,t);else{(d.target.__VUE_DEVTOOLS_PLUGINS__=d.target.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:e,setupFn:t})}}}));function N(e,t){for(const n in t){const o=t[n],r=e[n];e[n]=f(r)&&f(o)?N(r,o):o}return e}function y(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 b(e,n=(()=>({})),o={},u={},c){const a=t.ref(c||n()),s=i();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,N(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()}},d={};for(const e in o)d[e]=t.computed(()=>(r(s),o[e].call(O,O)));const _={};for(const e in u)_[e]=function(){return r(s),u[e].apply(O,arguments)};const O=t.reactive({...p,...y(a),...d,..._});return O}function S(e){const{id:o,state:a,getters:f,actions:l}=e;return function(e){(e=e||t.getCurrentInstance()&&t.inject(s))&&r(e);const p=i();let d=u.get(p);d||u.set(p,d=new Map);let _=d.get(o);return _||d.set(o,_=function(e){if(n){let n;return t.createApp({setup:()=>(n=e(),()=>null)}).mount(document.createElement("div")),n}return e()}(()=>b(o,a,f,l,function(e){const t=c.get(i());return t&&t()[e]}(o)))),_}}return e.createPinia=function(){const e={install(t){t.provide(s,e),t.config.globalProperties.$pinia=e.store,n&&(e=>{a=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=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);

4

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

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

"devDependencies": {
"@microsoft/api-extractor": "7.8.1",
"@microsoft/api-extractor": "7.10.1",
"@nuxt/types": "^2.14.6",

@@ -55,0 +55,0 @@ "@rollup/plugin-alias": "^3.1.1",

31

README.md

@@ -240,6 +240,6 @@ # 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)

or call the method `patch` that allows you apply multiple changes at the same time with a partial `state` object:
or call the method `$patch` that allows you apply multiple changes at the same time with a partial `state` object:
```ts
main.patch({
main.$patch({
counter: -1,

@@ -250,3 +250,3 @@ name: 'Abalam',

The main difference here is that `patch` allows you to group multiple changes into one single entry in the devtools.
The main difference here is that `$patch` allows you to group multiple changes into one single entry in the devtools.

@@ -263,3 +263,3 @@ ### Replacing the `state`

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`:
Creating stores with 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`:

@@ -293,2 +293,25 @@ ```ts

To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on:
```js
import { createPinia, getRootState } from 'pinia'
// retrieve the rootState server side
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
// after rendering the page, the root state is build and can be read
getRootState() // serialize, escape, and place it somewhere on the page, for example, as a global variable
```
On client side, you must tell pinia how to read that variable:
```js
import { setStateProvider } from 'pinia'
// if the previous step appended a script to the page that sets a global variable named `__pinia` with the rootState
setStateProvider(() => window.__pinia)
```
### Composing Stores

@@ -295,0 +318,0 @@