What’s new in v0.19

Zustand v4 support

With the release of Liveblocks 0.19, we’re adding support for Zustand v4 to @liveblocks/zustand. Zustand v4 brings greatly improved TypeScript types to its APIs, enabling us to enhance the quality of our types, bringing it in line with our React package.

To try the new version, upgrade both Zustand to v4 and Liveblocks to v0.19 as part of the same change.

npm install zustand@latestnpm install @liveblocks/zustand@latest

After installing you can then change these imports:

// ❌ Beforeimport { middleware } from "@liveblocks/zustand";
// ✅ Afterimport { liveblocks } from "@liveblocks/zustand";import type { WithLiveblocks } from "@liveblocks/zustand";

And finally, update your create function to the new pattern (explanation below):

// ❌ Beforecreate(middleware<MyState, ...>(...));
// ✅ Aftercreate<WithLiveblocks<MyState, ...>>()(liveblocks(...));

In this code snippet, we’re making four changes, as required by Zustand v4, or in accordance with ecosystem conventions:

1. Renaming middleware to liveblocks.
2. Moving the typing from middleware to create.
3. Wrapping the MyState type in a WithLiveblocks<...> wrapper.
4. Adding an extra call () to the wrapper:

create<WithLiveblocks<MyState, ...>>()(liveblocks(...));//                                  ^^ Not a typo!

After upgrading, you can now remove any manual type annotations that may have been sprinkled around your codebase. All types will now automatically be inferred!

Zustand v3

Because of the nature of the change, we’ll be dropping support for Zustand v3, but it’ll still be supported in previous versions of Liveblocks:

• If you use Zustand v3.x, use Liveblocks 0.18.x.
• If you use Zustand v4.1.3+, use Liveblocks 0.19.x+.
• (Zustand versions 4.0.0–4.1.2 are not supported.)

Contributors

Huge thanks to everyone who contributed and specifically to Guillaume Salles for his help towards the end allowing us to ship this faster. Also a big shout out to our incredible community that keeps jumping in to help us improve our Zustand integration! Especially Rayo Verweij, for fixing a few minor issues in our whiteboard React + Zustand tutorial. Keep checking out the changelog for the full release notes – see you next time!