Immer 10

[mweststrate]

Release notes

• [breaking change] Immer 10 only supports modern browsers, that have support for Proxy, Reflect, Symbol and Map and Set.
• [breaking change] There is no longer a UMD build exposed (thanks Mark Erikson for modernizing the build setup in Switch build tooling to tsup and modernize JS build artifacts #1032!
• [breaking change] getters and setters are ignored by default on plain object, as this is a very uncommon case and provides a significant performance boost (ca 33%, but depends a lot on the scenario). Fixes Immer takes a long time to update the data. #867, Unexpected access to getter property in irrelevant plain objects #1012. Thanks hrsh7th for implementing it in [breaking change] implement and default to useStrictShallowCopy, omitting getters #941!
• [breaking change] Promise based reducers are no longer supported. Conceptually it is an anti pattern to hold on to drafts over time. If needed the old behavior can still be achieved by leveraging createDraft and finishDraft.
• [breaking change] ES5 mode (for legacy browsers) has been dropped. If your project relies on enableES5(), you SHOULD NOT upgrade Immer. enableES5 has been removed.
• [breaking change] produce is no longer exposed as the default export. This improves eco system compatibility, and makes sure that there is only one correct way of doing things
• [breaking change] enableAllPlugins has been removed, use enablePatches(); enableMapSet() instead
• [breaking change] shortening the length of a JSON array now results in delete patches, rather than a mutation of the length property, in accordance with JSON spec. Thanks kshramt for implementing this in [breaking change] Do not replace array.length as patch when removing items #964!
• Immer is now an ESM package that can be directly imported into the browser. CJS should still work, UMD support has been removed.

Overall, there is a rough performance increase of 33% for Immer (and in some cases significantly higher), and the (non gzipped) bundle size has reduced from 16 to 11.5 KB, while the the minimal gzipped import of just produce has remained roughly the same at 3.3 KB.

For more details, see #1015

Migration steps

1. If you have any enableES5() call, don't migrate
2. When using getters/ setters icmw plain objects, call useStrictShallowCopy(true) at startup
3. Replace all default imports: Replace import produce from "immer" with import {produce} from "immer"
4. Replace all calls to enableAllPlugins() with enablePatches(); enableMapSet(); to be more specific and smoothen future migrations.
5. If any producer returned a Promise, refactor it to leverage createDraft instead. Roughly:

const newState = await produce(oldState, recipe)

// becomes
const draft  = createDraft(oldState)
await recipe(draft)
const newState = finishDraft(draft)

[coveralls]

Pull Request Test Coverage Report for Build 4622958383

Warning: This coverage report may be inaccurate.

We've detected an issue with your CI configuration that might affect the accuracy of this pull request's coverage report.
To ensure accuracy in future PRs, please see these guidelines.
A quick fix for this PR: rebase it; your next report should be accurate.

• 79 of 79 (100.0%) changed or added relevant lines in 10 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage increased (+1.5%) to 99.796%

---

Files with Coverage Reduction	New Missed Lines	%
src/utils/errors.ts	1	88.24%

Totals
Change from base Build 4504340943:	1.5%
Covered Lines:	641
Relevant Lines:	642

---

💛 - Coveralls

[markerikson]

Just ran a quick check on 9.0.16 vs 10.0.beta, using Vite 4.2.1 + source-map-explorer:

• 9.0.16: immer/dist/immer.esm.mjs, 10.42KB
• 10.0.0-beta.4: immer/dist/immer.mjs, 15.78KB

If I hand-inspect the Vite bundle output, I don't see any NODE_ENV references left in there, which is what I would expect - they exist in the ESM artifact, but the minifier should get rid of those.

If it helps at all, I just manually copied and pasted the minified versions of 9.0.16 and 10.0.0-beta.4 out of Vite-built bundles, ran them through Prettier, and am attaching them as a zip - maybe it'll help show where the differences are:

immer-minified-prettified.zip

Per the Map/Set thing: FWIW, we really don't want people using the Map/Set support with RTK because of serialization issues, so at least in our case that is a size increase we don't benefit from. But, I do understand how that can cause confusion and annoyance on your side. (My own preference would be that it still be opt-in somehow if possible.)

[mweststrate]

Ah interesting! Is there a documentation section I can refer people back to if they report this in the future? RTK is probably the biggest packaged Immer provider, so if that isn't even supposed to be done in that case, happy to reconsider

…

On Mon, Apr 3, 2023 at 6:11 PM Mark Erikson ***@***.***> wrote: Just ran a quick check on 9.0.16 vs 10.0.beta, using Vite 4.2.1 + source-map-explorer: - 9.0.16: immer/dist/immer.esm.mjs, 10.42KB - 10.0.0-beta.4: immer/dist/immer.mjs, 15.78KB If I hand-inspect the Vite bundle output, I don't *see* any NODE_ENV references left in there, which is what I would expect - they exist in the ESM artifact, but the minifier should get rid of those. If it helps at all, I just manually copied and pasted the minified versions of 9.0.16 and 10.0.0-beta.4 out of Vite-built bundles, ran them through Prettier, and am attaching them as a zip - maybe it'll help show where the differences are: immer-minified-prettified.zip <https:/immerjs/immer/files/11140726/immer-minified-prettified.zip> Per the Map/Set thing: FWIW, we really *don't* want people using the Map/Set support with RTK because of serialization issues, so at least in our case that is a size increase we don't benefit from. But, I do understand how that can cause confusion and annoyance on *your* side. (My own preference would be that it still be opt-in somehow if possible.) — Reply to this email directly, view it on GitHub <#1028 (comment)>, or unsubscribe <https:/notifications/unsubscribe-auth/AAN4NBF56VRECVVNPETOLHTW7MADJANCNFSM6AAAAAAWFUJMLA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[markerikson]

Yeah, the two most immediate references are here:

• https://redux.js.org/style-guide/#do-not-put-non-serializable-values-in-state-or-actions
• https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state

We actually had an internal discussion about Map/Set usage again yesterday after seeing your comment, and concluded it's still not sufficiently worth it. It is hypothetically possible to rework the Redux DevTools with one of the new "JSON superset" serialization libs, but it's fairly common for folks to want to persist state in localStorage (often using the redux-persist library), and that would run into serialization issues. There'd also be more nuance to try to explain in the docs, and it's simpler if we leave it at a blanket "Don't!" :)

[mweststrate]

@markerikson I reverted the MapSet opt-in in [email protected], mind doing a check if it solves the bundle size increase?

[markerikson]

@mweststrate yeah, I'll check on that tonight!

[markerikson]

@mweststrate: Okay, 3 builds of the same RTKQ app, changing only the Immer version:

Version	Bundle (min)	Bundle (gzip)	Sourcemapped file
9.0.16	386.77 kB	122.41 kB	10.42 kB
10.0-beta.4	392.30 kB	123.74 kB	15.78 kB
10.0-beta.6	387.12 kB	122.31 kB	10.76 kB

I'm still generally surprised that 10.x isn't smaller than 9.x, given the changes.

[markerikson]

@mweststrate : well, you got me hooked :)

I cloned the immer-10 branch and did some poking around. I think there's a few things going on:

• You're currently building the project with TSDX. That seems to be adding some polyfills, like _extends() (which you can see in the CJS dev build).
• That in turn is partly because tsconfig.json is set to target: "ES6".

So, those are adding up to a bunch of dead bytes that aren't needed.

Unrelated to the bundle sizes, there's also issues with the current build output in this beta:

• I know you've been flipping file names back and forth. Right now there's an immer.mjs bundle, but an immer.esm.js.map sourcemap file
• The sourcemaps themselves seem broken and incorrect. If you try loading some of them into https://evanw.github.io/source-map-visualization/ , you'll see that variables and segments don't line up correctly, making them semi-useless

FWIW, I just switched redux and redux-thunk over to use https://tsup.egoist.dev/ . It's basically like TSDX conceptually, except that it's based on ESBuild + Rollup (and it seems to actually be maintained atm).

I just tried making a local branch that switches over to tsup instead, and after 15-ish minutes I've got a decent part of the output bundles generating. More than that, I've got the minified files shrinking noticeably. In beta.6, immer.cjs.production.min.js is 16542b, and with tsup I've already got it down to 13680b. I also tried generating a minified .mjs artifact for comparison, and that's down to 12941b.

Some other notes here:

• I see room for some byte shaving tricks. For example, I tried export const getPrototypeOf = Object.getPrototypeOf and deleting the Object. in front of the uses, and that shaved off a few bytes because the variable name gets minified down to just E.
• I'm 95% set on dropping UMD bundles for Redux 5.0 / RTK 2.0, especially since you can make a pre-built ESM bundle that should be importable in-browser. Might want to consider that here.
• I'd say you can probably drop the Flow support too, really :)

Sooooo, with all that said:

If you're interested, I can try to do the rest of the TSDX -> tsup conversion, and file that as a PR against this branch.

Thoughts?

[mweststrate]

@markerikson thanks for pointing out tsup! I was already wondering what was the modern bundling setup since tsdx went unmaintained, which was also the reason I didn't want to poke too much in the config. So happy to receive a PR! Please do leave the flow types, as they're useful inside Meta, so I try to keep them roughly up to date :)

[markerikson]

@mweststrate okay, sure! I'll try to put up a PR over the weekend.

[markerikson]

@mweststrate done! See #1032 .

Please let me know if you have any questions or would like me to tweak things further!

[mweststrate]

Sorry had some PTO and now playing really hard catch-up! I'll try to go over it in the weekend :)

…

On Mon, Apr 10, 2023 at 5:34 PM Mark Erikson ***@***.***> wrote: @mweststrate <https:/mweststrate> done! See #1032 <#1032> . Please let me know if you have any questions or would like me to tweak things further! — Reply to this email directly, view it on GitHub <#1028 (comment)>, or unsubscribe <https:/notifications/unsubscribe-auth/AAN4NBHGCON5TCPRRR2ELJLXAQR7JANCNFSM6AAAAAAWFUJMLA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mweststrate]

@markerikson just published [email protected]

[github-actions]

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀