Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,13 @@
"import": "./dist/server.js",
"require": "./dist/server.cjs.js"
},
"./map-set-support": "./map-set-support.js",
"./proxy-polyfill": "./proxy-polyfill.js"
"./map-set-support": "./map-set-support.js"
},
"files": [
"dist",
"src",
"index.d.ts",
"server.d.ts",
"proxy-polyfill.js",
"proxy-polyfill.d.ts",
"map-set-support.js",
"map-set-support.d.ts"
],
Expand Down Expand Up @@ -100,7 +97,7 @@
},
"dependencies": {
"fast-deep-equal": "^3.1.3",
"immer": "^9.0.21",
"immer": "^11.1.4",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"ts-toolbelt": "^9.6.0"
Expand Down
1 change: 0 additions & 1 deletion proxy-polyfill.d.ts

This file was deleted.

5 changes: 0 additions & 5 deletions proxy-polyfill.js

This file was deleted.

7 changes: 0 additions & 7 deletions src/lib.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,6 @@ export function createSimpleProduce(disableImmer = false) {
}
if (!easyPeasyImmer) {
easyPeasyImmer = new Immer({
// We need to ensure that we disable proxies if they aren't available
// on the environment. Users need to ensure that they use the enableES5
// feature of immer.
useProxies:
typeof Proxy !== 'undefined' &&
typeof Proxy.revocable !== 'undefined' &&
typeof Reflect !== 'undefined',
// Autofreezing breaks easy-peasy, we need a mixed version of immutability
// and mutability in order to apply updates to our computed properties
autoFreeze: false,
Expand Down
92 changes: 27 additions & 65 deletions website/docs/docs/introduction/browser-support.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
# Browsers & React Native

Easy Peasy produces multiple bundle types - support for browsers, Common JS, and
ESM.

However, due to our internal usage of [Immer](https://github.com/immerjs/immer)
your code may break on some older browsers (e.g. IE 11) or some older React
Native environments.

Specifically it will break on [environments](https://caniuse.com/?search=proxy)
that don't support
[proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).

We provide a solution to this, however, before we present the solution we would
like to describe our motivation for implementing Immer.
Easy Peasy ships ESM and CommonJS bundles. The library targets the same
environments that React 19 supports — modern evergreen browsers and current
React Native runtimes.

- [Why Immer?](#why-immer)
- [Polyfilling Proxy](#polyfilling-proxy)
- [Create React App IE11 Support Example](#create-react-app-ie11-support-example)
- [Proxy is required](#proxy-is-required)
- [Supporting Map or Set within your state](#supporting-map-or-set-within-your-state)

## Why Immer?

Immer powers our mutation based API that is supported within actions.
Easy Peasy uses [Immer](https://github.com/immerjs/immer) to power the
mutation-based API supported within actions:

```javascript
addTodo: action((state, payload) => {
Expand All @@ -31,12 +21,10 @@ addTodo: action((state, payload) => {
});
```

[Immer](https://github.com/immerjs/immer) converts these mutation operations
into immutable updates against the store.

This allows for a much improved developer experience as having to manage
immutable update operations yourself can become quite complex. For example here
is the same action above written to ensure immutability is met manually.
Immer converts these mutation operations into immutable updates against the
store. This is a much improved developer experience over managing immutable
updates yourself, particularly for deeply nested state. The same action
without Immer would look like:

```javascript
addTodo: action((state, payload) => {
Expand All @@ -47,55 +35,29 @@ addTodo: action((state, payload) => {
});
```

That's just a simple example. More complex/nested updates can get very tricky to
manage.

## Polyfilling Proxy

If you are getting errors on your console - typically error code 19 or 20 from
the Immer package then your execution environment likely does not support
[proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).

To patch/polyfill your environment you need to include the following import.

```javascript
import 'easy-peasy/proxy-polyfill';
```

This should typically be done as early as possible within the entry file of your
application.

### Create React App IE11 Support Example
## Proxy is required

Create React App users will likely need to include a configuration like so,
which includes full IE11 support;
Immer relies on the
[`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
global. Every browser in React 19's
[supported list](https://react.dev/reference/react/version-history) ships
native `Proxy`, as do all current React Native runtimes (Hermes, JSC), so no
polyfill is required.

```javascript
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'easy-peasy/proxy-polyfill';
```

Also, don't forget to update your browserslist within your `package.json`.

```diff
"browserslist": [
+ "ie 11",
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
]
```
> **Migrating from v6?** Easy Peasy v6 shipped an `easy-peasy/proxy-polyfill`
> subpath that opted Immer into an ES5 fallback for environments without
> native `Proxy` (notably IE11). v7 upgrades to Immer v11, which removed ES5
> mode entirely, so the subpath has been deleted. Remove any
> `import 'easy-peasy/proxy-polyfill';` lines — see the
> [v6 → v7 upgrade guide](/docs/upgrading-from-v6/#easy-peasyproxy-polyfill-subpath-removed)
> for details.

## Supporting Map or Set within your state

In order to utilize `Map` or `Set` within your state you need to include the
following import.
To use `Map` or `Set` within your state you need to opt into Immer's
[Map/Set support](https://immerjs.github.io/immer/map-set/) by importing the
following module as early as possible in your application's entry file:

```javascript
import 'easy-peasy/map-set-support';
```

Similarly to the Proxy polyfill you will need to do this as early as possible
within your application entry file.
20 changes: 20 additions & 0 deletions website/docs/docs/upgrading-from-v6/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ This guide walks you through the breaking changes and the new APIs.
- [Breaking changes](#breaking-changes)
- [React 19 is required](#react-19-is-required)
- [`useStoreRehydrated` now suspends](#usestorerehydrated-now-suspends)
- [`easy-peasy/proxy-polyfill` subpath removed](#easy-peasyproxy-polyfill-subpath-removed)
- [New APIs](#new-apis)
- [`useStoreTransition`](#usestoretransition)
- [`useStoreDeferredState`](#usestoredeferredstate)
Expand Down Expand Up @@ -113,6 +114,25 @@ If you previously wrote a wrapper component:
> React deliver the rehydrated tree in a single render once the data is ready,
> with no flash of default state.

### `easy-peasy/proxy-polyfill` subpath removed

v6 shipped an `easy-peasy/proxy-polyfill` subpath which called immer's
`enableES5()` helper to support environments without native `Proxy` (notably
IE11). Easy Peasy v7 upgrades to immer v11, which dropped ES5 mode entirely —
`Proxy` is now the only supported backend.

If you imported the subpath:

```diff
- import 'easy-peasy/proxy-polyfill';
```

…remove the import. Every browser supported by React 19 has native `Proxy`, so
no replacement is needed.

The `easy-peasy/map-set-support` subpath (which calls `enableMapSet()`) is
unchanged — Map/Set draft support is still opt-in in immer v11.

## New APIs

### `useStoreTransition`
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2641,10 +2641,10 @@ ignore@^5.2.0:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==

immer@^9.0.21:
version "9.0.21"
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
immer@^11.1.4:
version "11.1.4"
resolved "https://registry.yarnpkg.com/immer/-/immer-11.1.4.tgz#37aee86890b134a8f1a2fadd44361fb86c6ae67e"
integrity sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==

import-fresh@^3.2.1:
version "3.3.1"
Expand Down
Loading