@liveblocks/react 1.1.0-rc1 → 1.1.0-yjs1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, BroadcastOptions, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 import { ToImmutable, Resolve, RoomInitializers } from '@liveblocks/core';
 
@@ -88,6 +88,11 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
      * tree.
      */
     useRoom(): Room<TPresence, TStorage, TUserMeta, TRoomEvent>;
+    /**
+     * Returns the current connection status for the Room, and triggers
+     * a re-render whenever it changes. Can be used to render a status badge.
+     */
+    useStatus(): Status;
     /**
      * Returns a function that batches modifications made during the given function.
      * All the modifications are sent to other clients in a single message.
@@ -104,6 +109,27 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
      * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
      */
     useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+    /**
+     * Get informed when reconnecting to the Liveblocks servers is taking
+     * longer than usual. This typically is a sign of a client that has lost
+     * internet connectivity.
+     *
+     * This isn't problematic (because the Liveblocks client is still trying to
+     * reconnect), but it's typically a good idea to inform users about it if
+     * the connection takes too long to recover.
+     *
+     * @example
+     * useLostConnectionListener(event => {
+     *   if (event === 'lost') {
+     *     toast.warn('Reconnecting to the Liveblocks servers is taking longer than usual...')
+     *   } else if (event === 'failed') {
+     *     toast.warn('Reconnecting to the Liveblocks servers failed.')
+     *   } else if (event === 'restored') {
+     *     toast.clear();
+     *   }
+     * })
+     */
+    useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
     /**
      * useErrorListener is a react hook that lets you react to potential room connection errors.
      *
@@ -428,6 +454,11 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
          * tree.
          */
         useRoom(): Room<TPresence, TStorage, TUserMeta, TRoomEvent>;
+        /**
+         * Returns the current connection status for the Room, and triggers
+         * a re-render whenever it changes. Can be used to render a status badge.
+         */
+        useStatus(): Status;
         /**
          * Returns a function that batches modifications made during the given function.
          * All the modifications are sent to other clients in a single message.
@@ -444,6 +475,27 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
          * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
          */
         useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+        /**
+         * Get informed when reconnecting to the Liveblocks servers is taking
+         * longer than usual. This typically is a sign of a client that has lost
+         * internet connectivity.
+         *
+         * This isn't problematic (because the Liveblocks client is still trying to
+         * reconnect), but it's typically a good idea to inform users about it if
+         * the connection takes too long to recover.
+         *
+         * @example
+         * useLostConnectionListener(event => {
+         *   if (event === 'lost') {
+         *     toast.warn('Reconnecting to the Liveblocks servers is taking longer than usual...')
+         *   } else if (event === 'failed') {
+         *     toast.warn('Reconnecting to the Liveblocks servers failed.')
+         *   } else if (event === 'restored') {
+         *     toast.clear();
+         *   }
+         * })
+         */
+        useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
         /**
          * useErrorListener is a react hook that lets you react to potential room connection errors.
          *

package/dist/index.js

@@ -156,6 +156,12 @@ function createRoomContext(client) {
     }
     return room;
   }
+  function useStatus() {
+    const room = useRoom();
+    const subscribe = room.events.status.subscribe;
+    const getSnapshot = room.getStatus;
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  }
   function useMyPresence() {
     const room = useRoom();
     const subscribe = room.events.me.subscribe;
@@ -240,6 +246,19 @@ function createRoomContext(client) {
       [room]
     );
   }
+  function useLostConnectionListener(callback) {
+    const room = useRoom();
+    const savedCallback = React2.useRef(callback);
+    React2.useEffect(() => {
+      savedCallback.current = callback;
+    });
+    React2.useEffect(
+      () => room.events.lostConnection.subscribe(
+        (event) => savedCallback.current(event)
+      ),
+      [room]
+    );
+  }
   function useErrorListener(callback) {
     const room = useRoom();
     const savedCallback = React2.useRef(callback);
@@ -488,8 +507,10 @@ function createRoomContext(client) {
     RoomContext,
     RoomProvider,
     useRoom,
+    useStatus,
     useBatch,
     useBroadcastEvent,
+    useLostConnectionListener,
     useErrorListener,
     useEventListener,
     useHistory,
@@ -515,8 +536,10 @@ function createRoomContext(client) {
       RoomContext,
       RoomProvider,
       useRoom,
+      useStatus,
       useBatch,
       useBroadcastEvent,
+      useLostConnectionListener,
       useErrorListener,
       useEventListener,
       useHistory,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "1.1.0-rc1",
+  "version": "1.1.0-yjs1",
   "description": "A set of React hooks and providers to use Liveblocks declaratively. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
@@ -13,15 +13,15 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "start": "tsup --watch",
-    "format": "eslint --fix src/; prettier --write src/",
-    "lint": "eslint src/; npm run check:exports",
+    "format": "(eslint --fix src/ || true) && prettier --write src/",
+    "lint": "(eslint src/ || true) && npm run check:exports",
     "check:exports": "tsc scripts/check-factory-exports.ts && node scripts/check-factory-exports.js",
     "test": "jest --silent --verbose --color=always",
     "test:watch": "jest --silent --verbose --color=always --watch"
   },
   "dependencies": {
-    "@liveblocks/client": "1.1.0-rc1",
-    "@liveblocks/core": "1.1.0-rc1",
+    "@liveblocks/client": "1.1.0-yjs1",
+    "@liveblocks/core": "1.1.0-yjs1",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {