Changelog

Fix CORS issue.

In @liveblocks/client:

Room.getStorageStatus

Get the storage status.

• not-loaded: Initial state when entering the room.
• loading: Once the storage has been requested via room.getStorage().
• synchronizing: When some local updates have not been acknowledged by Liveblocks servers.
• synchronized: Storage is in sync with Liveblocks servers.

Room.subscribe("storage-status", status => )

Subscribe to storage status changes.

Returns an unsubscribe function.

room.subscribe("storage-status", (status) => {  switch (status) {    case "not-loaded":      break;    case "loading":      break;    case "synchronizing":      break;    case "synchronized":      break;    default:      break;  }});

Room.reconnect

Close the room connection and try to reconnect.

Internal changes

• Add support for the upcoming Liveblocks browser extension

Fixes some internal type definitions.

Fixes an issue where imports from Liveblocks packages could not be resolved correctly in certain build environments.

This release brings Zustand v4 support. This is a breaking change only if you’re using @liveblocks/zustand.

In @liveblocks/zustand:

• Support Zustand v4 (actually v4.1.3 or higher)
• Drop support for Zustand v3 (also v4.1.2 or lower are not supported)
• Fix bug where some usage pattern could cause the Zustand store to stop synching (#491)

To migrate, make the following code changes:

• npm install zustand@latest
• npm install @liveblocks/zustand@latest
• Change these imports, if applicable:

  -import { middleware } from "@liveblocks/zustand";+import { liveblocks } from "@liveblocks/zustand";
  and

  -import type { LiveblocksState } from "@liveblocks/zustand";+import type { WithLiveblocks } from "@liveblocks/zustand";
  and rename accordingly.
• Change the pattern:

  create(liveblocks<MyState, ...>(...))
  to the Zustand v4 recommended pattern:

  create<WithLiveblocks<MyState, ...>>()(liveblocks(...))
  To be clear:
  1. First, move the type annotation away from the liveblocks middleware call, and onto the create call.
  2. Next, wrap your MyState type in a WithLiveblocks<...> wrapper. This will make sure the injected liveblocks property on your Zustand state will be correctly typed.
  3. Finally, make sure to add the extra call () wrapper, needed by Zustand v4 now:

     create<WithLiveblocks<MyState, ...>>()(liveblocks(...))//                                  ^^ Not a typo
• Remove the second argument to state.liveblocks.enterRoom(): it no longer takes an explicit initial state. Instead, it's automatically be populated from your Zustand state.

In @liveblocks/redux:

• The main export has been renamed:

  -import { enhancer } from "@liveblocks/redux";+import { liveblocksEnhancer } from "@liveblocks/redux";
• The second argument to state.liveblocks.enterRoom() to send in an explicit initial state is no longer supported. It will use the state in your Redux store, for consistency and ease of use.

Bug fix:

• Fixes a small bug in a type definition, scopes was removed from BaseUserMeta.

Internal updates:

• Switch the monorepo over to Turborepo.

All packages now provide an isReadOnly flag on user instances. It is available when getting self or others. isReadOnly is true when storage is read-only, see the room management guide for more information.

const me = room.getSelf();
me.isReadOnly; // boolean
const others = room.getOthers();for (const other of others) {  other.isReadOnly; // boolean}

In @liveblocks/client:

• Add a new option shouldInitiallyConnect to client.enter that let you control whether or not the room connects to Liveblocks servers. Default is true.

  Usually set to false when the client is used from the server to not call the authentication endpoint or connect via WebSocket.

In @liveblocks/react:

• Add a new property shouldInitiallyConnect to RoomProvider that let you control whether or not the room connects to Liveblocks servers. Default is true.

  By default equals to typeof window !== "undefined", meaning the RoomProvider tries to connect to Liveblocks servers only on the client side.

• Internal package restructurings to increase code sharing. You may notice a new dependency show up in your dependency tree: @liveblocks/core. It contains private APIs that aren't intended for direct consumption.

• In @liveblocks/react:

  Fixes the "zombie-child" problem that can occur with React 17 or lower. If you’re on React 18: great, you can ignore this! If you’re using React 17 or lower with Liveblocks, we’ll now start to enforce that you pass the unstable_batchedUpdates prop to RoomProvider, so this problem can be circumvented. This small addition may save you hours of debugging time!

  // ⚠️  Only if you’re using React 17 or lowerimport { unstable_batchedUpdates } from "react-dom";  // 👈
  <RoomProvider  id="my-room"  initialPresence={...}  initialStorage={...}  unstable_batchedUpdates={unstable_batchedUpdates}  // 👈>  <App /></RoomProvider>

  To read more, see https://liveblocks.io/docs/guides/troubleshooting#stale-props-zombie-child

• In @liveblocks/zustand:

  • Fix a confusing error message

• In @liveblocks/react:

  • Make sure that useOther will not rerender if tracked users already left the room, so that child components won't get rerendered before the parent got the chance to unmount them.
  • Disallow useOther without selector

• In @liveblocks/react:

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