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

@shipt/osmosis

Package Overview
Dependencies
Maintainers
90
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shipt/osmosis - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

10

dist/index.d.ts

@@ -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
});
```
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc