Week 24

Jun 14th, 2024

v2.0.0

This major release marks the maturity of Liveblocks. It contains new products (@liveblocks/react-lexical) and clarifications (e.g. @liveblocks/react-comments is now called @liveblocks/react-ui). t Also, we bring major DX improvements by allowing you to specify your types globally now. These types will be typed once and shared across all Liveblocks APIs, which includes your Node backend.

// ❌ Beforeexport const {  suspense: {    RoomProvider,    useRoom,    // etc  },} = createRoomContext<Presence, Storage>(client);
// ✅ Afterdeclare global {  interface Liveblocks {    Presence: Presence;    Storage: Storage;  }}

In @liveblocks/react, you can now import hooks directly:

// ❌ Before: get hooks exported from your Liveblocks configimport { RoomProvider, useRoom, ... } from "./liveblocks.config";
// ✅ After: import hooks directlyimport { RoomProvider, useRoom, ... } from "@liveblocks/react";import { RoomProvider, useRoom, ... } from "@liveblocks/react/suspense";

// ❌ Beforeconst client = createClient(/* options */);
// ✅ After<LiveblocksProvider /* options */>  <App /></LiveblocksProvider>

For full upgrade instructions and codemods, see the 2.0 upgrade guide.

`create-liveblocks-app`

Update config generation for Liveblocks 2.0.
Add --upgrade flag to automatically update all Liveblocks package to their latest version.

`@liveblocks/client`

DX improvements: type once, globally, benefit everywhere

`@liveblocks/react`

DX improvement: import hooks directly
DX improvement: <ClientSideSuspense> no longer needs a function as its children
New provider: LiveblocksProvider (replaces the need for createClient)
New hook: useClient
Tweak useMutation error message to be less confusing.
Allow thread and activity metadata types to contain undefined values.

`@liveblocks/react-ui`

Rename from @liveblocks/react-comments.
Rename <CommentsConfig /> to <LiveblocksUIConfig />.
Improve InboxNotification props types.

`@liveblocks/react-lexical`

Initial release.

`@liveblocks/node-lexical`

Initial release.

`@liveblocks/yjs`

LiveblocksProvider is no longer a default export, it’s now import { LiveblocksYjsProvider } from "@liveblocks/yjs".

`@liveblocks/node`

DX improvements: all Node client methods will pick up the same global types you’re using in your frontend
Rename RoomInfo to RoomData.
The webhook event NotificationEvent’s type can represent multiple kinds of notifications. ("thread", "textMention", and custom ones (e.g. "$myNotification"))

`@liveblocks/codemod`

Initial release.

Documentation

New API reference page for @liveblocks/react-lexical.
Added lots of new information to @liveblocks/react API reference page.
Information includes details Suspense section, new LiveblocksProvider props, details on typing, and more.
Added a set of product pages for Notifications, with info on concepts, components, hooks, styling, and email notifications.
Added product page for Lexical summarising all its features.
Restructured and updated existing product pages for our new products.
More information on the NotificationEvent webhook, including the new textMention kind.
Created new guide on adding users to Liveblocks Notifications.
Created new guide on adding users to Liveblocks Text Editor.
Created new get started guides for our new Lexical packages.
Added product badges to get started guides.
Updated all get started guides for new type improvements.
Updated API references for new type improvements.
Updated various guides for new type improvements.
Updated images and text on How Liveblocks works page.

Website

We redesigned our website to represent the Liveblocks product offering more accurately. Here are some of the key changes:
- New homepage with interactive 3D game in the hero.
- New page product page for Liveblocks Text Editor
- New page product page for Liveblocks Notifications
- New page product page for Liveblocks Realtime APIs
- Improved pricing page
- New navigation
New blog post: Introducing Liveblocks 2.0.