fix(deps): update dependency easy-peasy to v5

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
easy-peasy (source)	2.6.6 -> 5.1.0

---

Release Notes

ctrlplusb/easy-peasy

v5.1.0

Compare Source

Minor Changes

• Feat: Adds support for React 18: #​769

Patches

• Fix broken links in Thunk docs: #​756
• Update computed property docs: #​735
• Allow unstable_effectOn effect to return void: #​730
• Typo: #​749
• Changed from connect to Hooks ⚡: #​652

Credits

Huge thanks to @​jmyrland, @​avramch, @​no-stack-dub-sack, @​yethranayeh, and @​troglodytto for helping!

v5.0.5

Compare Source

Patches

• Chore: Updates dependencies: 2fab9a2
• Chore: Upgrades dependencies: c63555c
• Optimize computed props: #​764

Credits

Huge thanks to @​jmyrland for helping!

v5.0.4

Compare Source

Patches

• Updates dependencies: ea98660
• Upgrades dependencies, removes previously broken TS comment: 444396f
• Fixes docs per PR #​558: 8640563
• Upgrades dependencies: 8fce26b
• UseLocalStorage: Recreate store if dependencies change: #​685
• Bump ws from 7.3.1 to 7.5.3: #​690
• Bump browserslist from 4.16.1 to 4.16.8: #​691
• Bump elliptic from 6.5.3 to 6.5.4: #​692
• Remove fast-memoize from docs: #​663
• Fix the typo in the action example: #​650
• Fixing broken link: #​643
• Minor name fix in Thunk docs: #​635
• Upgrades dev deps: f24ab25
• Upgrades dependencies: 68fdfff

Credits

Huge thanks to @​fbieler, @​mfbx9da4, @​yakovlevyuri, @​w3bdesign, and @​GavinRay97 for helping!

v5.0.3

Compare Source

## Patches

• Fixes computed property caching

v5.0.2

Compare Source

Patches

• Fixes computed property access within actions: 772f1b5

v5.0.1

Compare Source

Patches

• Fixes issue with computed properties not binding correctly

v5.0.0

Compare Source

A new website! https://easy-peasy.dev

Finally! The next major version of Easy Peasy has landed. It's been a long time
coming, and we are hopeful that the need for a new major release will be a long
way off.

This last year has been a challenging one for me on a personal level, so I want
to extend my thanks to the patience that the community has shown in me getting
this release together. I am aware that the docs still do not reflect the full
updated API reflection of v4. I humbly apologise for this and do promise that
parity will be achieved. This release already includes a lot of ground work
around revamping the docs. I plan to pump a lot more hours into getting the docs
into a much more improved and useful structre.

I've become aware of a critical security issue with the version of Immer
currently utilised within Easy Peasy <= v4. For that purpose I am issuing this
release earlier than I anticipated.

Whilst this is a major release the breaking changes are very minimal. So I
sincerely hope that your upgrade will be as fluid as it can be.

Breaking Changes

• Removed the memo helper. You'll need to bring your own memoization library,
  for e.g. memoizerific.

Changes

• Upgraded to Immer v8 🎉

• Fixes to support IE11!

  You will need to use our new import at the entry of your application to patch
  Proxy.

  import 'easy-peasy/proxy-polyfill';
  // The rest of your app code...

  In addition to this if you use Map or Set in your state then you will need
  this additional import at the entry of your application.

  import 'easy-peasy/proxy-polyfill';
  import 'easy-peasy/map-set-support';
  // The rest of your app code...

• Improved the bundle size! The Gzip bundle is back down to approximately 10kb.

• Fixed issue with computed properties throwing errors when being accessed in
  certain scopes

• Improved the module exports to improve tree shaking capability

• Added various bundle type support to the package.json, e.g. "module".

• Fixed bugs when rehydrating persisted state

v4.0.2

Compare Source

Patches

• Upgrades dependencies: a72aa7e

v4.0.1

Compare Source

Patches

• [TypeScript] Fixes optional payload declaration for Thunk types.: b39dd4e

Closes #​565

v4.0.0

Compare Source

The long wait is over.

v4 has arrived! 🎉

This release includes an insane amount of improvements and fixes, with an ironing over some of the APIs and features that were introduced in v3.

This release will also include a completely overhauled website. This work is still in progress and is likely to continue even after the v4 release. It's a lot of work and I don't want it to be the sole reason for us holding back on the v4 release.

Unfortunately there are breaking changes, however, I expect the breaking changes will only impact a subset of our userbase that are using the more advanced features of Easy Peasy.

Breaking Change

Replaced createComponentStore with a useLocalStore hook

The API for createComponentStore was a verbose and limited.

Taking learnings from it we have replaced it with a new API; namely useLocalStore.

function MyCounter() {
  const [state, actions] = useLocalStore(() => ({
    count: 0,
    increment: action((_state) => {
      _state.count += 1;
    }),
  }));

  return (
    <div>
      {state.count}
      <button onClick={() => actions.increment()}>+</button>
    </div>
  );
}

Please see the API documentation for more information.

Persist API rewrite

The persist API received a huge overhaul to the point that it should essentially be considered a rewrite.

We suggest that you read the updated docs and update your implementations accordingly.

Some notable changes include:

• API is now always asynchronous in terms of persisting and rehydrating. This allows us to support a single recommended API structure for implementing persisting and rehydration.
• Persist operations are now optimised utilizing a combination of the browser's requestIdleCallback or requestAnimationFrame APIs.
• The merge strategies have been renamed as follows:
  • mergeDeep
  • mergeShallow
  • overwrite
• The mergeDeep strategy is now the default
• Merging strategies are now sensitive to model updates. If we note a type difference comparing the store model's initial state to persisted state we will use the store model's initial state instead as it likely indicates an evolved model. Null or undefined values are excluded from this comparison.
• A "version" number has been introduced on the creatStore config. If you utilize this value we will compare the persisted state version number against the current store version number - if they do not align the persisted state will be ignored. This gives you absolute guarantees if you wish to ship a refactored store model without worrying about breaking clients with already persisted state.
• New APIs and support has been added for managing rehydration of dynamically added models.
• A huge number of bug fixes. Some of these marked as critical.

Upgraded to immer@7

We used to managed a forked version of Immer as it previously did not support computed properties. This is no longer the case! We now rely on the native Immer package.

A side effect of this is that you may experience browser support issues for browsers that do not support support Proxy.

If you require your application to work on such environments (e.g. Internet Explorer 11 or some versions of React Native on Android) then please ensure that you import and execute the enableES5 feature from Immer.

import { enableES5 } from "immer";

enableES5();

Moved internal redux-thunk binding to grant user defined middleware higher priority

This will allow you to influence thunks prior to their execution. For advanced cases.

This likely will have zero impact on anyone, but given the nature of the change we are marking it as breaking.

Thunk action states, error handling, and listener behaviour updates

Easy Peasy will no longer catch any errors within your thunks and dispatch a "failed" state action. If you wish to explicitly mark your thunk as failed, so that an action listener can respond to it accordingly then you need to use the new fail helper that is provided to thunks.

const model = {
  myNaughtyThunk: thunk((actions, payload, helpers) => {
    try {
      await axios.get('/an-endpoint-that-fails');
    } catch (err) {
      // This will dispatch a @​thunk.myNaughtyThunk(fail) action with the err attached
      fail(err);
    }
  })
};

Error handling is now explicitly your responsibility.

The actions that are dispatch to represent thunk states have been updated. Taking the example above here are the possible action types that will be dispatched and visible in the redux dev tools:

• @thunk.myThunk(start)

  Dispatched at the start of a thunk execution.

• @thunk.myThunk(success)

  Dispatched when a thunk has completed - i.e. with no uncaught errors occurring.

• @thunk.myThunk(fail)

  Dispatched if the fail helper was called. In this case the @thunk.myThunk(success) would not have been dispatched.

Listeners (actionOn and thunkOn) will now by default only respond to the "success" event of a thunk. If you wish to handle the "fail" events then you will need to explicitly resolve them.

onAddTodoFailed: actionOn(
  (actions) => actions.saveTodo.failType,
  (state, target) => {
    state.auditLog.push(`Failed to save todo: ${target.payload}`);
  }
);

New Features

unstable_effectOn

*Note: this is an experimental API. We are pre-releasing it to allow for early feedback. The API is subject to breaking changes with any release of Easy Peasy. As such we have prefixed the API with "unstable*", much like React does with its experimental APIs. Once the API has stabilised the "unstable*" prefix will be removed and semver based releases will be respected.*

Allows you to declare an effect within your model which will execute every time the targeted state changes.

Two arguments are provided to unstable_effectOn; namely the stateResolvers and the handler. The stateResolvers are an array of functions which should resolve the target state that should be tracked. When the tracked state changes the handler function is executed.

The handler can be asynchronous or synchronous. It receives the store actions, a change object containing the prev values for the targeted state and the current values as well as the action that caused the change in state. It additionally receives a helper argument allowing you to access the store state etc.

The handler additionally allows you to return a dispose function, which will be executed prior to the next execution of the handler. This can be useful in performing things like API call cancellation etc.

import { unstable_effectOn } from 'easy-peasy';

const todosModel = {
  items: [],
  saving: false,
  setSaving: action((state, payload) => {
    state.saving = payload;
  }),
  unstable_effectOn(
    // Provide an array of "stateResolvers" to resolve the targeted state:
    [state => state.items],
    // Provide a handler which will execute every time the targeted state changes:
    async (actions, change) => {
      const [items] = change.current;
      actions.setSaving(true);
      await todosService.save(items);
      actions.setSaving(false);
    }
  )
};

Context stores now allow you to override injections at runtime

Simply pass your injections as a prop to the Provider for the context store.

See the updated docs for more information.

Fixes

Computed properties are now immutable bound to state

Previously if you executed a computed property it would always resolve against the latest version of the store state. Now it will operate against the state at the moment of time it was pulled out from.

In doing this we also addressed a strange case where you may get an error for invalid computed property access.

Internals rewritten to utilize incoming model definitions immutably

This will address any issues where you may have been providing model definitions to different stores.

TypeScript

Loads of fixes and improvements to the typings

Phew. Too many to mention. Just take our word for it. Tons of nitty issues have been addressed.

Added support for generics in models

Previously if you defined a model containing generic state, like below, TypeScript would break within your actions.

interface StoreModel<K> {
  data: K;
  updateData: Action<StoreModel<K>, K>;
}

const numberStoreModel: StoreModel<number> = {
  data: 1337,
  updateData: action((state, payload) => {
    // A TypeScript would be thrown at this point
    //     👇
    state.data = payload;
  }),
};

Unfortunately we were unable to directly resolve the case of generic properties due to current limitations with the TypeScript type system. We created a StackOverflow question which details the problem.

In a gist; the issue is that Easy Peasy's underlying State and Action types map over the user provider model types in order to filter down to types that represent state and actions respectively. However, when defining a generic state, TypeScript assumes that the generic state intersects with types that are trying to be filtered out of each case. Therefore the filtering ends up always removing your generic state.

To resolve the case of generic state we have introduce a new API helper. Any time you wish to have a generic state value within your model, simply wrap it with the Generic type, and then assigned the associated value within the model instance using the generic helper.

import { Generic, generic } from "easy-peasy";

interface StoreModel<K> {
  data: Generic<K>; // 👈
  updateData: Action<StoreModel<K>, K>;
}

const numberStoreModel: StoreModel<number> = {
  data: generic(1337), // 👈
  updateData: action((state, payload) => {
    // Note that you don't need to wrap the payload with the
    // helper          👇
    state.data = payload;
  }),
};

numberStoreModel.getState().data;
// 1337

typeof numberStoreModel.getState().data;
// number

Note how you only need to use the helper at the point of defining the initial value of the generic model state. Within your actions and anywhere you consume the state you would treat the value as the underlying generic value (i.e. a number in the example).

Removed the limit on TypeScript model depth

Previously, if you had a model more than 6 levels deep, in terms of object structure, the TypeScript mapping wouldn't work as expected. This is no longer the case.

Fixed the statemapper eating up "classes"

If you assigned a class instance to your state the typings from getState / useStoreState etc would report your type as being something similar to:

With this fix your state will correctly be reported back as the actual class type (Person in the examples case).

Fixed action mapper so that state isn't display when viewing actions

The VSCode intellisense for actions were showing state. The types have been patched so that only actions will be displayed.

Fixed state mapper where actions were still being represented on state

There were cases if you had a nested action and only primitive state next to it that you would see the nested action. This is no longer the case.

Fixed computed properties state resolvers not inferring resolved types correctly

If you used a state resolver array within your computed properties, whilst using TypeScript, the inferred types based on the resolved state was incorrect. This is now fixed.

v3.3.1

Compare Source

This is a no-op release that just fixes latest on npm due to an accidental publish.

v3.3.0

Compare Source

Minor Changes

• Feat: Shallow equality function as 2nd argument for useStoreState(): #​354

Patches

• Update testing-thunks.md: #​397
• Bump handlebars from 4.1.2 to 4.5.3: #​391
• Fixes typos in Redux interop doc page: #​388
• Update the reducer comment block in the Interop recipe.: #​310
• Upgrades dependencies: e9b4a1b
• Remove note about delay: #​399
• Merge branch 'master' of https://github.com/ctrlplusb/easy-peasy: 746ed5b
• Updates website config: 6c5b8f6
• Upgrades deps: 063ff4a
• Upgrades dependencies: 90dec92

Credits

Huge thanks to @​joelmoss, @​loveforweb, @​gamtiq, @​jaredmeakin, and @​nickmeldrum for helping!

v3.2.6

Compare Source

Patches

• Adds workaround example for generics: 52c396b
• Upgrades deps: 81e3c0a
• Updates deps: afe755c
• Minor refactoring to reduce KB footprint: fe617fd
• Update docs for store: #​366
• Update docs for action: #​367
• Update docs for computed: #​368
• Update docs for use-store-actions: #​369
• Update docs for use-store-state: #​370
• Merge branch 'master' of https://github.com/ctrlplusb/easy-peasy: bb51fc0
• Updates deps: 72e6070
• Small updates to docs: #​375
• Fix broken links in docs: #​377
• Upgrades dependencies: 51c633f
• Adds npmignore: 07abd4c
• Bumps version: 3bd3de5
• Updates npmignore: 3b5186b

Credits

Huge thanks to @​crissdev for helping!

v3.2.5

Compare Source

v3.2.4

Compare Source

v3.2.3

Compare Source

Patches

• Small fix to mergeDeep persistence rehydrate strategy: 501f237

v3.2.2

Compare Source

Patches

• Minor improvement to types: 16c7d13
• Small fix on mergeDeep strategy for persistence rehydration: 38de869
• Adds more TS test coverage: 01fd077
• Updates deps: 5e033e2

v3.2.1

Compare Source

Patches

• Fixes typescript issue with generics and actions: bd9e978

v3.2.0

Compare Source

Minor Changes

• Adds store persistence APIs: #​343

Patches

• Fix docs: 2ce5f1a
• Updates website: 627fd17

v3.1.2

Compare Source

Patches

• Fixes actions allowing them to return new state without explicitly having to disable immer: 7f13514

v3.1.1

Compare Source

Patches

• Fixes compatibility with react-redux provider.: e199314
• Fixes debug helper, and updates it's docs: fb63aac

v3.1.0

Compare Source

Minor Changes

• Adds useStore hook: e128e1e

Patches

• Fixed some lint issues: 740d1a4
• Update testing-actions.md: 52a8561
• 📝 Add comma at action listener example: 5963568
• Update adding-typed-actions.md: c92ff7c
• Update adding-typed-thunks.md: e0ddb22
• Fix: added html suffix to store links within docs;: d3cc2b5
• Reduce the number of mapped types used in state mapper: 66da041
• Prevent state updates on unmounted components: 65a2fd8
• Minor tweak to typescript state mapper: c4efa4f
• Upgrades dependencies: ea8aa83
• Adds generic model typescript case: 08ab8d9

v3.0.3

Compare Source

v3.0.2

Compare Source

Patches

• Updates deps: ee424b4
• Adds warning about invalid computed property access: 6992dc9
• Bumps deps and version: a4202a7

v3.0.1

Compare Source

Patches

• Upgrades deps: 6becae1

v3.0.0

Compare Source

v3 is considered the realisation of the "final" Easy Peasy API - taking all the evolution and learning from v2 to produce a long term stable API that we will commit to supporting and will do our best to avoid breaking changes moving forward.

New Features

Hot reloading support

Hot reloading is supported via the store.reconfigure(model) API. See #​168

New actionOn and thunkOn APIs

These are the new and only APIs by which to define action/thunk listeners with.

The v3 website has been updated with tutorials and API docs introducing these APIs.

We are really sorry about the churn around listener APIs! This API was driven by community feedback so feeling far better about it. 👍

Breaking Changes

Removed deprecated APIs

• listen (use the new actionOn or thunkOn APIs instead)
• action and thunk can no longer be configured as listeners (use the new actionOn or thunkOn APIs instead)
• select (use computed instead)
• selector (use computed instead)
• useStore (renamed to useStoreState)
• useActions (renamed to useStoreActions)
• useDispatch (renamed to useStoreDispatch)
• store instances have had the following properties removed:
  • triggerListener
  • triggerListeners
  • useStoreState (import from 'easy-peasy' or use createTypedHooks for TS)
  • useStoreActions (import from 'easy-peasy' or use createTypedHooks for TS)
  • useStoreDispatch (import from 'easy-peasy' or use createTypedHooks for TS)

Thunks can be either asynchronous and synchronous

Using async/await or returning a Promise from a thunk will maintain its previous async behaviour.

However, if you do neither of the above your thunk will be executed synchronously. Therefore you can now get eager updates to your state if all you do is dispatch actions within your thunk. This can be handy for encapsulating logic based action dispatching.

For example

addProduct: thunk((actions, payload) => {
  switch (payload.type) {
    case 'SHOES': 
		actions.addShoe(payload);
        break;
    case 'VEGETABLE':
        // ...
  }
});

Returning immutable state from actions

If you prefer to return new immutable state from your actions, rather than mutating the state, you need to set the new disableImmer flag.

import { createStore, action } from 'easy-peasy';

const model = {
  todos: [],
  addTodo: action((state, payload) => {
    // 👇 new immutable state returned
    return [...state, payload];
  })
}

const store = createStore(model, {
  disableImmer: true // 👈 set the flag
})

Failing to disable immer may result in strange errors if you are using computed properties.

computed

In order to optimise the Typescript experience we have made a fairly small change to the computed API. If you wish to use state resolvers, these now need to be defined as the first argument.

Before

const basketModel = {
  productIds: [],
  products: computed(
    (productIds, products) => productIds.map(id => products[id]),
    [
      state => state.productIds,
      (state, storeState) => storeState.products.items
    ]
  )
};

After

const basketModel = {
  productIds: [],
  products: computed(
    [
      state => state.productIds,
      (state, storeState) => storeState.products.items
    ],
    (productIds, products) => productIds.map(id => products[id])
  )
};

Computed properties not using state resolvers remain unchanged.

useStoreState API update

useStoreState(previouslyuseStore) no longer needs/accepts the dependencies 2nd argument. Your state will get mapped correctly if they use external values, like props, within the mapState` function.

Typescript

We officially support >= [email protected]. Although we recommend using the latest version ([email protected] at the time of writing), in order to ensure you are up to date with the latest bug fixes.

Create React App users can just install [email protected] as a dev dependency and the CRA build system will use that version. You may get a warning printed to your console, however, we experienced no issues with this. 👍

Note: using a lower version of TypeScript 3.x may still work, however, you may have issues.

Hooks

You will have noted above that the useStoreState, useStoreActions, and useStoreDispatch are no longer attached to the store instance. You need to use the createTypedHooks helper instead.

import { createTypedHooks } from 'easy-peasy';
import { StoreModel } from './model';

const { useStoreActions, useStoreState, useStoreDispatch } = createTypedHooks<StoreModel>();

export default {
  useStoreActions,
  useStoreState,
  useStoreDispatch
}

Computed

The Computed type no longer requires you to define the types for state resolvers. These will automatically be inferred.

Before

interface BasketModel {
  productIds: string[];
  products: Computed<
    BasketModel, 
    Product[], 
    ResolvedState2<string[], Product[]>, 
    StoreModel
   >
}

After

interface BasketModel {
  productIds: string[];
  products: Computed<
    BasketModel, 
    Product[],
    StoreModel
   >
}

Commits

• Update overview.md: f5fbe87
• Removes deprecated code: ba955a5
• Removes unused assets: 0a06ee8
• Cleans up and organises the typescript definitions: 78dc4d4
• Adds depth limit to State and Actions typescript definitions: 55375dc
• Fixes index signatures on state: 7ce3188
• Dispatch no longer has actions bound to it and fixes to types: ff6cd76
• Removes unused deps and bumps version: 858c96b
• Adds yarnrc: 0bdbdad
• Fixes thunk payloads: 8b8bdce
• Bumps version: bff2d9c
• Adds test case for state any: 7545e63
• Breaking change listenTo actions now resolved via callback funciton: 8086cb2
• Progress on new tutorial: 70287db
• Updates docs: 4b30b9f
• Updates website: 754d6a2
• Website updates: 85e8f7b
• Fixes useStoreState so that an update gets handled in same render cycle across hook instances: 6f2826f
• Bumps version: 56c871f
• Fixes multi hook render cycle issue: 42dc2e1
• Bumps version: 09ac40f
• Removes the need to define dependencies on useStoreState: 4cb3ec3
• Bumps version: cd14db1
• Removes instance of useStoreState dependencies: 1ff97f7
• Updates deps: 6145efa
• Website updates: 75ce14c
• Reverts the change that removed bound action creators on the stores dispatch: e8aa7bd
• Fixes action name helper typings: d37943d
• Bumps version: de12c2c
• Fixes store so it does not kill class based properties: 1c51bf7
• Bumps version: b3ad4eb
• Updates website: 8c4ffa2
• Installs v3 of ts-toolbelt and bumps version: d926ce3
• Bumps version: e300c57
• Creates a simplified immer produce and fixes debug helper: 461d42e
• Adds an additional test case for typescript generic interface models: 3f82175
• Bumps version: 7a382e8
• Adds new listeners APIs as per #​247: #​251
• Updates ts-toolbelt.: d93a01c
• Moves prop-types from peer deps to deps: ca321b2
• Updates to Typscript 3.5.3: 39b80a3
• Removes prop-types from dev deps: 88aed9a
• Upgrades deps: f77cb49
• Adds a comment to a typescript test case: 925c68c
• Adds createTypedHooks API back: 3a16e10
• Bumps version: 332c80b
• Updates website: b23993a
• Updates website: 49e4f25
• Adds the ability to reconfigure a store: 270dc6a
• Bumps version: 80112da
• Updates website: 809c278
• Updates website: dfc4209
• Updates website: 68721b8
• Updates website: 58204ff
• Updates website: 9f3152b
• Adds now deploy config: 0eada96
• Removes the hooks from store instance: 49ee9e3
• Updates website: 9261d23
• Bumps version: 9e519d0
• Updates website: 672e786
• Adds tests and docs about testing: 06e67ac
• Adds 100% code coverage: d35153c
• Code housekeeping: 95eb5ef
• Updates website: bee0ad6
• Bumps version: e4859b9
• Updates website: 0efd3d0
• Updates readme: 2be472b
• Refactor listener TS api: #​259
• Type experiment: 17f8215
• Refactors computed and simplifies the TS defs for it.: 13526ba
• Updates docs: 9f4f8cc
• Bumps version: 0646512
• Enables disabling of immer: ada83d7
• Code cleanup and refactoring. Listeners correctly prefixed: 292804f
• Moves listeners into a getListeners API of the store instance: c9ee9d8
• Updates documentation per new getListeners: 2706d22
• Fixes disableImmer behaviour: 5ae789a
• Bumps version: 7c97880
• Updates release number in docs: 6147021
• Minor docs update and definition fix: dfaf0cc
• Updates website: 9f221da
• Bumps version: 6efd17e
• Bumps version: 961a4fc
• Converts thunks so that they can be asynchronous or synchronous: c465d98
• Upgrades deps: 78923e3
• Fixes computed property reducer access cases: d9aa182
• Updates deps: 412c77f
• V3: a297302

---

Configuration

📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.