Changelog

• In @liveblocks/react:

  • Fix a bug that could cause an error when patching presence during local development. Not an issue in production builds. (#505)

For information, please read our Upgrade Guide for 0.18.

New React hooks ✨

• In @liveblocks/react:

  • useStorage
  • useMutation
  • useSelf
  • useOthers
  • useOthersMapped
  • useOthersConnectionIds
  • useOther (singular)

• In @liveblocks/client:

  • New .toImmutable() method on LiveObject, LiveList, and LiveMap lets you work with an immutable representation of the storage objects
  • Improved core performance
  • Reduced bundle size
  • Others only become visible in the others array if their presence is known

Breaking changes

• Remove support for directly importing hooks from @liveblocks/client (e.g. import { useMyPresence } from '@liveblocks/react'). If you’re still using these imports, see the Upgrade Guide for 0.17 for instructions.
• Remove ClientProvider and useClient hook
• Remove defaultPresence and defaultStorageRoot arguments. (Just use initialPresence and initialStorage arguments now.)
• Remove second argument to useMap(), useList(), and useObject().
• Remove new LiveMap(null) support. (Just use new LiveMap() or new LiveMap([]).)

General:

• Fix a packaging bug

In @liveblocks/react:

• Deprecate an undocumented API

• Fix bug that could cause duplicate copies of @liveblocks/client to end up in final bundle, for certain bundler configurations.
• Fix bug where in some conditions the initial presence for a new connection would not come through to all existing clients in the room
• Various internal changes

New history APIs ↩️ ↪️

• In @liveblocks/client:

  • Add canUndo() and canRedo() utilities to room.history
  • Add "history" event type to room.subscribe() to subscribe to the current user's history changes

• In @liveblocks/react:

  • Add useCanUndo() and useCanRedo() hooks

• In @liveblocks/zustand:

  • Simplify zustand middleware integration with Typescript. TPresence, TStorage, TUserMeta, and TRoomEvent are now optional.

Note that @liveblocks/zustand does not work with zustand > v4 because v3 and v4 have completely different type definitions. As soon as zustand v4 is out of the RC phase, we will consider updating our middleware to work with the latest version.

Let's take a look at our To-do list example. Without our middleware, the store would look like this:

import create from "zustand";
type State = {  draft: string;  isTyping: boolean;  todos: Todo[];  setDraft: (draft: string) => void;  addTodo: () => void;  deleteTodo: (index: number) => void;};
create<State>(/* ... */);

With our middleware, you simply need to move the State param at the middleware level:

import create from "zustand";import { createClient } from "@liveblocks/client";import { middleware } from "@liveblocks/zustand";
const client = createClient({ /*...*/ });
type State = {  draft: string;  isTyping: boolean;  todos: Todo[];  setDraft: (draft: string) => void;  addTodo: () => void;  deleteTodo: (index: number) => void;};
create(  middleware<State>(/* ... */, {    client,    presenceMapping: { isTyping: true },    storageMapping: { todos: true }  }));

If you want to type others presence, you can use the TPresence generic argument on the middleware.

type Presence = {  isTyping: true;}
const useStore = create(  middleware<State, Presence>(/* ... */, {    client,    presenceMapping: { isTyping: true },    storageMapping: { todos: true }  }));
// In your componentuseStore(state => state.liveblocks.others[0].presence?.isTyping)

• In @liveblocks/react:

  • Expose RoomContext in the return value of createRoomContext()

• In @liveblocks/react:

  • Fix bug where changing the key argument of useMap(), useList(), useObject() did not resubscribe to updates correctly
  • Ignore changes to the RoomProvider's initial presence/storage props on subsequent renders. This makes it behave closer to useState(initialState)

Fix missing documentation for hooks created via createRoomContext().

Fix @liveblocks/nodes packaging.