@liveblocks/codemod

@liveblocks/codemod

Codemods for updating Liveblocks apps.

Transforms

General

remove-liveblocks-config-contexts

Replaces createRoomContext and createLiveblocksContext in liveblock.config files with global Liveblocks types and updates all imports to @liveblocks/react accordingly.

npx @liveblocks/codemod@latest remove-liveblocks-config-contexts

If you export the Suspense versions of hooks from createRoomContext and createLiveblocksContext, add the --suspense flag to update all imports to @liveblocks/react/suspense instead.

npx @liveblocks/codemod@latest remove-liveblocks-config-contexts --suspense

remove-unneeded-type-params

Removes no longer needed type params from Liveblocks types (only use this if you are using the global types).

npx @liveblocks/codemod@latest remove-unneeded-type-params

2.0 (breaking changes)

Liveblocks 2.0 comes with a number of breaking changes and most are covered by the following codemods, see the upgrade guide to learn more about the changes.

react-comments-to-react-ui

Updates @liveblocks/react-comments to @liveblocks/react-ui and renames <CommentsConfig /> to <LiveblocksUIConfig />.

npx @liveblocks/codemod@latest react-comments-to-react-ui

room-info-to-room-data

Renames RoomInfo type from @liveblocks/node to RoomData.

npx @liveblocks/codemod@latest room-info-to-room-data

remove-yjs-default-export

Replaces the default import of @liveblocks/yjs by a named LiveblocksYjsProvider one, and update its usage accordingly.

npx @liveblocks/codemod@latest remove-yjs-default-export

live-list-constructor

Adds an array to empty LiveList constructors.

npx @liveblocks/codemod@latest live-list-constructor

Changelog

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

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.

// ❌ Before
export const {
  suspense: {
    RoomProvider,
    useRoom,
    // etc
  },
} = createRoomContext<Presence, Storage>(client);

// ✅ After
declare global {
  interface Liveblocks {
    Presence: Presence;
    Storage: Storage;
  }
}

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

// ❌ Before: get hooks exported from your Liveblocks config
import { RoomProvider, useRoom, ... } from "./liveblocks.config";

// ✅ After: import hooks directly
import { RoomProvider, useRoom, ... } from "@liveblocks/react";
import { RoomProvider, useRoom, ... } from "@liveblocks/react/suspense";

// ❌ Before
const 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.