@shipt/osmosis
Advanced tools
Comparing version 2.1.0 to 2.1.1
@@ -9,7 +9,7 @@ declare namespace _default { | ||
export default _default; | ||
import { setupStore } from "./setupStore.js"; | ||
import { configureSetupStore } from "./setupStore.js"; | ||
import { StoreProvider } from "./storeProvider.js"; | ||
import { usePersistedState } from "./usePersistedState.js"; | ||
import { configureUsePersistedState } from "./usePersistedState.js"; | ||
import { setupStore } from './setupStore.js'; | ||
import { configureSetupStore } from './setupStore.js'; | ||
import { StoreProvider } from './storeProvider.js'; | ||
import { usePersistedState } from './usePersistedState.js'; | ||
import { configureUsePersistedState } from './usePersistedState.js'; | ||
export { setupStore, configureSetupStore, StoreProvider, usePersistedState, configureUsePersistedState }; |
@@ -1,2 +0,5 @@ | ||
export function usePersistedState(initValue: any, key: string): any[]; | ||
export function usePersistedState<T>(initValue: T, key: string, transformers?: { | ||
getItem: (arg0: T) => any; | ||
setItem: (arg0: T) => any; | ||
}): [T, (arg0: T | ((arg0: T) => T)) => void, boolean]; | ||
export function configureUsePersistedState(config: { | ||
@@ -3,0 +6,0 @@ getItem: getItem; |
@@ -29,8 +29,10 @@ "use strict"; | ||
/** | ||
* @param {Object} initValue | ||
* @template T | ||
* @param {T} initValue | ||
* @param {string} key | ||
* @returns {Object[]} | ||
* @param {{ getItem: function(T) : any, setItem: function(T) : any}} [transformers] | ||
* @returns {[T, function(T | function(T) : T) : void, boolean]} | ||
*/ | ||
var usePersistedState = function usePersistedState(initValue, key) { | ||
var usePersistedState = function usePersistedState(initValue, key, transformers) { | ||
if (!key) console.error('usePersistedState: Storage key is required'); | ||
@@ -74,7 +76,8 @@ | ||
case 5: | ||
if (!!(transformers !== null && transformers !== void 0 && transformers.getItem)) persistedValue = transformers.getItem(persistedValue); | ||
setState(function (state) { | ||
var _persistedValue; | ||
var _persistedValue2; | ||
return { | ||
value: (_persistedValue = persistedValue) !== null && _persistedValue !== void 0 ? _persistedValue : state.value, | ||
value: (_persistedValue2 = persistedValue) !== null && _persistedValue2 !== void 0 ? _persistedValue2 : state.value, | ||
isLoaded: true | ||
@@ -84,3 +87,3 @@ }; | ||
case 6: | ||
case 7: | ||
case "end": | ||
@@ -98,2 +101,8 @@ return _context.stop(); | ||
var _persistState = function _persistState(value) { | ||
var _persistedValue = value; | ||
if (!!(transformers !== null && transformers !== void 0 && transformers.setItem)) _persistedValue = transformers.setItem(_persistedValue); | ||
if (setItem) setItem(key, _persistedValue); | ||
}; | ||
var setPersistedState = function setPersistedState(value) { | ||
@@ -103,3 +112,5 @@ if (typeof value === 'function') { | ||
var newValue = value(currentValue.value); | ||
if (setItem) setItem(key, newValue); | ||
_persistState(newValue); | ||
return { | ||
@@ -111,3 +122,4 @@ value: newValue, | ||
} else { | ||
if (setItem) setItem(key, value); | ||
_persistState(value); | ||
setState({ | ||
@@ -114,0 +126,0 @@ value: value, |
{ | ||
"name": "@shipt/osmosis", | ||
"version": "2.1.0", | ||
"version": "2.1.1", | ||
"description": "A lightweight state management library for React and React Native", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -85,8 +85,11 @@ <p align="center"> | ||
//counter.js | ||
import React, { useContext } from 'react'; | ||
import React from 'react'; | ||
import { CounterStore } from './counter.store'; | ||
export default () => { | ||
const counterStore = useContext(CounterStore.Context); | ||
let { count } = counterStore.state; | ||
const { | ||
state: { count }, | ||
increment, | ||
decrement | ||
} = CounterStore.useStore(); | ||
@@ -96,4 +99,4 @@ return ( | ||
<p>{count}</p> | ||
<button onClick={counterStore.increment}>+</button> | ||
<button onClick={counterStore.decrement}>-</button> | ||
<button onClick={increment}>+</button> | ||
<button onClick={decrement}>-</button> | ||
</div> | ||
@@ -125,3 +128,3 @@ ); | ||
async function getItem(key) { | ||
let value = // perform async actions to return the value for the key provided | ||
let value = // perform async actions to return the value for the key provided | ||
return value; | ||
@@ -160,1 +163,14 @@ } | ||
- **isHydrated**: a boolean value determining if the persisted value has been loaded into state. Since reading and writing values to the persistence layer are done async, it is often required to delay performing certain actions after the persisted state has been rehydrated into state during the current app session, such as refreshing a user's persisted but expired auth token. | ||
### Custom Transformers | ||
When saving certain data types that are not serializable, it may be necessary to tie into the getter/setter implementation of `usePersistedState` to transform the data type into something that can be serialized for persistence. `usePersistedState` takes a third optional parameter, which is an object containing two functions: `getItem` and `setItem`. These functions will be called as part of the persistence and hydration logic and will be passed the corresponding value that needs transformation. | ||
In the example below, a Map type needs to be persisted and therefore needs to be transformed to and from a JS object for serialization: | ||
```js | ||
const [stateValue, setStateValue, isHydrated] = usePersistedState(new Map(), 'mapValue', { | ||
setItem: value => Object.fromEntries(value), //called when the state value is being persisted. value is the Map | ||
getItem: value => new Map(Object.entries(value)) //called with the state value is being hydrated from the persistence layer. value is the JS Object | ||
}); | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26075
393
173