Updated Liveblocks to Latest Version

liveblocks.config.ts

@@ -1,152 +1,49 @@
-import { createClient } from '@liveblocks/client';
+// Define Liveblocks types for your application
-import { createRoomContext, createLiveblocksContext } from '@liveblocks/react';
+// https://liveblocks.io/docs/api-reference/liveblocks-react#Typing-your-data
+declare global {
+  interface Liveblocks {
+    // Each user's Presence, for useMyPresence, useOthers, etc.
+    Presence: {
+      // Example, real-time cursor coordinates
+      // cursor: { x: number; y: number };
+    };
 
-const client = createClient({
+    // The Storage tree for the room, for useMutation, useStorage, etc.
-  publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
+    Storage: {
-  // authEndpoint: "/api/liveblocks-auth",
+      // Example, a conflict-free list
-  throttle: 16,
+      // animals: LiveList<string>;
-  async resolveUsers({ userIds }) {
+    };
-    // Used only for Comments and Notifications. Return a list of user information
-    // retrieved from `userIds`. This info is used in comments, mentions etc.
 
-    // const usersData = await __fetchUsersFromDB__(userIds);
+    // Custom user info set when authenticating with a secret key
-    //
+    UserMeta: {
-    // return usersData.map((userData) => ({
+      id: string;
-    //   name: userData.name,
+      info: {
-    //   avatar: userData.avatar.src,
+        // Example properties, for useSelf, useUser, useOthers, etc.
-    // }));
+        // name: string;
+        // avatar: string;
+      };
+    };
 
-    return [];
+    // Custom events, for useBroadcastEvent, useEventListener
-  },
+    RoomEvent: {};
-  async resolveMentionSuggestions({ text }) {
+    // Example has two events, using a union
-    // Used only for Comments. Return a list of userIds that match `text`.
+    // | { type: "PLAY" }
-    // These userIds are used to create a mention list when typing in the
+    // | { type: "REACTION"; emoji: "🔥" };
-    // composer.
-    //
-    // For example when you type "@jo", `text` will be `"jo"`, and
-    // you should to return an array with John and Joanna's userIds:
-    // ["john@example.com", "joanna@example.com"]
 
-    // const users = await getUsers({ search: text });
+    // Custom metadata set on threads, for useThreads, useCreateThread, etc.
-    // return users.map((user) => user.id);
+    ThreadMetadata: {
+      // Example, attaching coordinates to a thread
+      // x: number;
+      // y: number;
+    };
 
-    return [];
+    // Custom room info set with resolveRoomsInfo, for useRoomInfo
-  },
+    RoomInfo: {
-  async resolveRoomsInfo({ roomIds }) {
+      // Example, rooms with a title and url
-    // Used only for Comments and Notifications. Return a list of room information
+      // title: string;
-    // retrieved from `roomIds`.
+      // url: string;
+    };
+  }
+}
 
-    // const roomsData = await __fetchRoomsFromDB__(roomIds);
+export {};
-    //
-    // return roomsData.map((roomData) => ({
-    //   name: roomData.name,
-    //   url: roomData.url,
-    // }));
-
-    return [];
-  },
-});
-
-// Presence represents the properties that exist on every user in the Room
-// and that will automatically be kept in sync. Accessible through the
-// `user.presence` property. Must be JSON-serializable.
-type Presence = {
-  cursor: { x: number; y: number } | null;
-};
-
-// Optionally, Storage represents the shared document that persists in the
-// Room, even after all users leave. Fields under Storage typically are
-// LiveList, LiveMap, LiveObject instances, for which updates are
-// automatically persisted and synced to all connected clients.
-type Storage = {
-  // author: LiveObject<{ firstName: string, lastName: string }>,
-  // ...
-};
-
-// Optionally, UserMeta represents static/readonly metadata on each user, as
-// provided by your own custom auth back end (if used). Useful for data that
-// will not change during a session, like a user's name or avatar.
-type UserMeta = {
-  // id?: string,  // Accessible through `user.id`
-  // info?: Json,  // Accessible through `user.info`
-};
-
-// Optionally, the type of custom events broadcast and listened to in this
-// room. Use a union for multiple events. Must be JSON-serializable.
-type RoomEvent = {
-  // type: "NOTIFICATION",
-  // ...
-};
-
-// Optionally, when using Comments, ThreadMetadata represents metadata on
-// each thread. Can only contain booleans, strings, and numbers.
-export type ThreadMetadata = {
-  // resolved: boolean;
-  // quote: string;
-  // time: number;
-};
-
-// Room-level hooks, use inside `RoomProvider`
-export const {
-  suspense: {
-    RoomProvider,
-    useRoom,
-    useMyPresence,
-    useUpdateMyPresence,
-    useSelf,
-    useOthers,
-    useOthersMapped,
-    useOthersListener,
-    useOthersConnectionIds,
-    useOther,
-    useBroadcastEvent,
-    useEventListener,
-    useErrorListener,
-    useStorage,
-    useObject,
-    useMap,
-    useList,
-    useBatch,
-    useHistory,
-    useUndo,
-    useRedo,
-    useCanUndo,
-    useCanRedo,
-    useMutation,
-    useStatus,
-    useLostConnectionListener,
-    useThreads,
-    useCreateThread,
-    useEditThreadMetadata,
-    useCreateComment,
-    useEditComment,
-    useDeleteComment,
-    useAddReaction,
-    useRemoveReaction,
-    useThreadSubscription,
-    useMarkThreadAsRead,
-    useRoomNotificationSettings,
-    useUpdateRoomNotificationSettings,
-
-    // These hooks can be exported from either context
-    // useUser,
-    // useRoomInfo
-  },
-} = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>(
-  client
-);
-
-// Project-level hooks, use inside `LiveblocksProvider`
-export const {
-  suspense: {
-    LiveblocksProvider,
-    useMarkInboxNotificationAsRead,
-    useMarkAllInboxNotificationsAsRead,
-    useInboxNotifications,
-    useUnreadInboxNotificationsCount,
-
-    // These hooks can be exported from either context
-    useUser,
-    useRoomInfo,
-  },
-} = createLiveblocksContext<UserMeta, ThreadMetadata>(client);

package.json

@@ -14,9 +14,9 @@
   "dependencies": {
     "@clerk/nextjs": "^5.1.4",
     "@hello-pangea/dnd": "^16.6.0",
-    "@liveblocks/client": "^1.11.0",
+    "@liveblocks/client": "^2.0.0",
     "@liveblocks/node": "^1.12.0",
-    "@liveblocks/react": "^1.12.0",
+    "@liveblocks/react": "^2.0.0",
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
     "@prisma/client": "^5.15.0",
     "@prisma/extension-accelerate": "^1.1.0",

yarn.lock

@@ -516,12 +516,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@liveblocks/client@npm:1.12.0, @liveblocks/client@npm:^1.11.0":
+"@liveblocks/client@npm:2.0.0, @liveblocks/client@npm:^2.0.0":
-  version: 1.12.0
+  version: 2.0.0
-  resolution: "@liveblocks/client@npm:1.12.0"
+  resolution: "@liveblocks/client@npm:2.0.0"
   dependencies:
-    "@liveblocks/core": "npm:1.12.0"
+    "@liveblocks/core": "npm:2.0.0"
-  checksum: 10c0/f1d067458a3e5cae997396a3c8cb9dd0e86f6f52604701507796210ff2d0d0fe06584e34a375b1628424e157235d786a8619e3252e424203b4a52407affb8e9e
+  checksum: 10c0/6e0c82961ee9a0871888e5632942a946e6df20a5cd866204cc75e3eb5d47f397d02e19817edfb3dc16d5a380ceb852511c3ba1d3f448249a5879bfa0fbf38591
   languageName: node
   linkType: hard
 
@@ -532,6 +532,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@liveblocks/core@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@liveblocks/core@npm:2.0.0"
+  checksum: 10c0/59b97161a672ba90f41160535682ad2476009fd24cb8914e307e666f5efe032f3af545252d1831fbfbc2bda3f75fdca64af6fd8ecce9b616bba837d79bc0eeee
+  languageName: node
+  linkType: hard
+
 "@liveblocks/node@npm:^1.12.0":
   version: 1.12.0
   resolution: "@liveblocks/node@npm:1.12.0"
@@ -544,17 +551,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@liveblocks/react@npm:^1.12.0":
+"@liveblocks/react@npm:^2.0.0":
-  version: 1.12.0
+  version: 2.0.0
-  resolution: "@liveblocks/react@npm:1.12.0"
+  resolution: "@liveblocks/react@npm:2.0.0"
   dependencies:
-    "@liveblocks/client": "npm:1.12.0"
+    "@liveblocks/client": "npm:2.0.0"
-    "@liveblocks/core": "npm:1.12.0"
+    "@liveblocks/core": "npm:2.0.0"
     nanoid: "npm:^3"
-    use-sync-external-store: "npm:^1.2.0"
+    use-sync-external-store: "npm:^1.2.2"
   peerDependencies:
     react: ^16.14.0 || ^17 || ^18
-  checksum: 10c0/2663552c92b67554a3389e1d8a8e6a0ffca729d43f4e95d6434e69509f815d28e751a77ed7f8dc458bb3afb30bee3b948163ba1e56329415479915e2a79888df
+  checksum: 10c0/4928ffb932b033f81059348609152a2ec354c941f18da0b51f0deb66e4b0d27793a705b80b44021a7ebc1c90e204ec9d6fc6fa47927e7cbebcfc279e2364280b
   languageName: node
   linkType: hard
 
@@ -5957,9 +5964,9 @@ __metadata:
   dependencies:
     "@clerk/nextjs": "npm:^5.1.4"
     "@hello-pangea/dnd": "npm:^16.6.0"
-    "@liveblocks/client": "npm:^1.11.0"
+    "@liveblocks/client": "npm:^2.0.0"
     "@liveblocks/node": "npm:^1.12.0"
-    "@liveblocks/react": "npm:^1.12.0"
+    "@liveblocks/react": "npm:^2.0.0"
     "@microsoft/eslint-formatter-sarif": "npm:^3.1.0"
     "@next/eslint-plugin-next": "npm:^14.2.3"
     "@prisma/client": "npm:^5.15.0"
@@ -6328,6 +6335,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "use-sync-external-store@npm:1.2.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/23b1597c10adf15b26ade9e8c318d8cc0abc9ec0ab5fc7ca7338da92e89c2536abd150a5891bf076836c352fdfa104fc7231fb48f806fd9960e0cbe03601abaf
+  languageName: node
+  linkType: hard
+
 "usehooks-ts@npm:^3.1.0":
   version: 3.1.0
   resolution: "usehooks-ts@npm:3.1.0"