Upgrading - Upgrading to 1.10

Notifications is the first Liveblocks product that works across multiple rooms, and this has required us to introduce breaking changes to ensure a consistent API for Comments and Notifications.

How to upgrade?

You can upgrade to 1.10 by downloading the latest version of each Liveblocks package you’re using, for example in a React app:

$npm install @liveblocks/client@latest @liveblocks/react@latest @liveblocks/react-comments@latest @liveblocks/node@latest

All changes are for Comments and Notifications

If you’re not using Comments or Notifications, there are no breaking changes for you! However, if you are using these, or intend to use them in future, keep reading.

Security

Users must see the notifications across multiple rooms when they open their inbox. This is the first time we must expose an API not associated with a single room. It forced us to introduce a minor breaking change in our authentication mechanism. Using useInboxNotifications will call your authentication endpoint without a room.

createClient with callback

If you use createClient with authEndpoint as a callback, room is now optional.

const client = createClient({  authEndpoint: (room) => {    // The `room` argument will be `undefined` if you're using `useInboxNotifications`  },});

Comments resolver functions

Notifications needs to resolve users, as well as Comments, so we’ve lifted the resolver functions from createRoomContext to createClient.

Before:

liveblocks.config.ts
// ❌ Before - Liveblocks 1.9const client = createClient({  authEndpoint: "/api/liveblocks-auth",});
const { RoomProvider } = createRoomContext({  async resolveUsers({ userIds, roomId }) {    // ...  },  async resolveMentionSuggestions({ text, roomId }) {    // ...  },});

After:

liveblocks.config.ts
// ✅ After - Liveblocks 1.10const client = createClient({  authEndpoint: "/api/auth/liveblocks-auth",  async resolveUsers({ userIds }) {    // ...  },  async resolveMentionSuggestions({ text }) {    // ...  },});
const { RoomProvider } = createRoomContext();

Because the resolvers are no longer room-based, you’ll notice that roomId is no longer in the parameters.

Resolver types

Because the resolvers have moved to the client, the ResolveUsersArgs and ResolveMentionSuggestionsArgs types are now exported from @liveblocks/client instead of @liveblocks/react.

// ❌ Before - Liveblocks 1.9import {  ResolveUsersArgs,  ResolveMentionSuggestionsArgs,} from "@liveblocks/react";
// ✅ After - Liveblocks 1.10import {  ResolveUsersArgs,  ResolveMentionSuggestionsArgs,} from "@liveblocks/client";

Relatedly, stringifyCommentBody’s CommentBodyResolveUsersArgs no longer exists, and you should use ResolveUsersArgs instead.

// ❌ Before - Liveblocks 1.9import { CommentBodyResolveUsersArgs } from "@liveblocks/node";
// ✅ After - Liveblocks 1.10import { ResolveUsersArgs } from "@liveblocks/node";

Comments CSS variables

Some elevation and tooltip CSS variables have been removed:

  • --lb-tooltip-background
  • --lb-tooltip-foreground
  • --lb-tooltip-foreground-contrast
  • --lb-elevation-background
  • --lb-elevation-foreground
  • --lb-elevation-foreground-contrast

Because these no longer exist, we recommend using the basic --lb-* variables directly on .lb-elevation or .lb-tooltip .

Before:

/* ❌ Before - Liveblocks 1.9 */:root {  --lb-tooltip-foreground: white;  --lb-elevation-background: red;}

After:

/* ✅ After - Liveblocks 1.10 */.lb-tooltip {  --lb-foreground: white;}
.lb-elevation {  --lb-background: red;}

Comments overrides

Comments overrides allows you to replace a string or node in default components, with another that you’ve specified. Some overrides have been changed.

  • SELF is now USER_SELF.
  • UNKNOWN_USER is now USER_UNKNOWN.
  • COMMENT_REACTION_REMAINING no longer exists, and you should use the LIST_REMAINING_USERS instead.
  • COMMENT_REACTION_TOOLTIP is now COMMENT_REACTION_LIST, and its arguments have been changed to (list, emoji, count).

Before:

// ❌ Before - Liveblocks 1.9<CommentsConfig  overrides={{    SELF: "you",    UNKNOWN_USER: "Anon",    COMMENT_REACTION_REMAINING: (others) => `${others} people`,    COMMENT_REACTION_TOOLTIP: (emoji, list) => (      <>        {list} reacted with {emoji}      </>    ),  }}/>

After:

// ✅ After - Liveblocks 1.10<CommentsConfig  overrides={{    USER_SELF: "you",    USER_UNKNOWN: "Anon",    LIST_REMAINING_USERS: (others) => `${others} people`,    COMMENT_REACTION_LIST: (list, emoji, count) => (      <>        {list} reacted with {emoji}      </>    ),  }}/>

When upgrading, remember that overrides can be applied both globally with <CommentsConfig>, and per component, e.g. <Composer>. Learn more in the overrides API reference.