@liveblocks/node - npm Package Versions

v0.17.7

• 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.

Example

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 component
useStore(state => state.liveblocks.others[0].presence?.isTyping)

v0.17.6

• In @liveblocks/react:

  • Expose RoomContext in the return value of createRoomContext()

v0.17.5

• 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)

v0.17.4

Fix missing documentation for hooks created via createRoomContext().

v0.17.1

Fix @liveblocks/nodes packaging.

v0.17.0

For information, please read our Upgrade Guide.

TypeScript improvements ✨

This release contains major TypeScript improvements. The recommended setup now is that you define your own Presence and Storage types at the highest level (i.e. where you set up the room). After that initial one-time setup, you will no longer need to provide any extra type annotations anywhere for your Liveblocks code! 🙌

To learn how to set that up, follow the instructions in our Upgrade Guide.

• No more any types used (in @liveblocks/client and @liveblocks/react)
• All APIs that work with Presence data will now require it to be JSON-serializable
• All APIs that work with Storage data will now require it to be LSON (= JSON + Live structures)
• All Live structures now take mandatory type params for their payloads, just like the built-in array, object, and map types do:
  • LiveMap<K, V> (like Map<K, V>)
  • LiveObject<{ a: number, b: string }> (like, for example, { a: number, b: string })
  • LiveList<T> (like Array<T>)

React Native support ✨

We now support React Native! To learn how to use Liveblocks in your React Native projects, see our API reference. It's surprisingly simple!

New APIs ✨

• In @liveblocks/react:

  • createRoomContext() is now the preferred way to initialize hooks.

• In the API:

  • New endpoint to Get Users in a Room
  • New endpoint to Get a list of all Rooms

Bug fixes 🐛

• Improved conflict resolution on LiveList
• Various minor internal bug fixes

Breaking changes

• In @liveblocks/client:

  • Removed old Room.unsubscribe() API

New deprecations

• In @liveblocks/client:

  • The defaultPresence option to client.enter() will get renamed to initialPresence
  • The defaultStorageRoot option to client.enter() will get renamed to initialStorage
  • Calling new LiveMap(null) will stop working. Please use new LiveMap(), or new LiveMap([])

• In @liveblocks/react:

  • Importing the React hooks directly is deprecated, instead use the new createRoomContext() helper. For help, read the Recommended Upgrade Steps section within our Upgrade Guide
  • The second argument to useList(), useObject(), and useMap() is deprecated
  • The RoomProvider's defaultPresence is renamed to initialPresence
  • The RoomProvider's defaultStorageRoot is renamed to initialStorage