@liveblocks/react 0.15.11 → 0.16.2

package/README.md

@@ -18,6 +18,8 @@
   </a>
 </p>
 
+A set of [React](https://reactjs.org/) hooks and providers to use [Liveblocks](https://liveblocks.io) declaratively.
+
 ## Installation
 
 ```

package/{lib/esm → esm}/index.js

@@ -1,14 +1,8 @@
-import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
 import * as React from 'react';
 import { useReducer } from 'react';
-
-function useRerender() {
-  const [, update] = useReducer((x) => x + 1, 0);
-  return update;
-}
+import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
 
 const ClientContext = React.createContext(null);
-const RoomContext = React.createContext(null);
 function LiveblocksProvider(props) {
   return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
     value: props.client
@@ -21,6 +15,13 @@ function useClient() {
   }
   return client;
 }
+
+function useRerender() {
+  const [, update] = useReducer((x) => x + 1, 0);
+  return update;
+}
+
+const RoomContext = React.createContext(null);
 function RoomProvider({
   id,
   children,
@@ -36,16 +37,21 @@ function RoomProvider({
     }
   }
   const client = useClient();
+  const [room, setRoom] = React.useState(() => client.enter(id, {
+    defaultPresence: defaultPresence ? defaultPresence() : void 0,
+    defaultStorageRoot,
+    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+  }));
   React.useEffect(() => {
+    setRoom(client.enter(id, {
+      defaultPresence: defaultPresence ? defaultPresence() : void 0,
+      defaultStorageRoot,
+      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+    }));
     return () => {
       client.leave(id);
     };
   }, [client, id]);
-  const room = client.getRoom(id) || client.enter(id, {
-    defaultPresence: defaultPresence ? defaultPresence() : void 0,
-    defaultStorageRoot,
-    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-  });
   return /* @__PURE__ */ React.createElement(RoomContext.Provider, {
     value: room
   }, children);
@@ -207,4 +213,4 @@ function useCrdt(key, initialCrdt) {
   return (_a = root == null ? void 0 : root.get(key)) != null ? _a : null;
 }
 
-export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };
+export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

package/{lib/esm → esm}/index.mjs

@@ -1,14 +1,8 @@
-import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
 import * as React from 'react';
 import { useReducer } from 'react';
-
-function useRerender() {
-  const [, update] = useReducer((x) => x + 1, 0);
-  return update;
-}
+import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
 
 const ClientContext = React.createContext(null);
-const RoomContext = React.createContext(null);
 function LiveblocksProvider(props) {
   return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
     value: props.client
@@ -21,6 +15,13 @@ function useClient() {
   }
   return client;
 }
+
+function useRerender() {
+  const [, update] = useReducer((x) => x + 1, 0);
+  return update;
+}
+
+const RoomContext = React.createContext(null);
 function RoomProvider({
   id,
   children,
@@ -36,16 +37,21 @@ function RoomProvider({
     }
   }
   const client = useClient();
+  const [room, setRoom] = React.useState(() => client.enter(id, {
+    defaultPresence: defaultPresence ? defaultPresence() : void 0,
+    defaultStorageRoot,
+    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+  }));
   React.useEffect(() => {
+    setRoom(client.enter(id, {
+      defaultPresence: defaultPresence ? defaultPresence() : void 0,
+      defaultStorageRoot,
+      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+    }));
     return () => {
       client.leave(id);
     };
   }, [client, id]);
-  const room = client.getRoom(id) || client.enter(id, {
-    defaultPresence: defaultPresence ? defaultPresence() : void 0,
-    defaultStorageRoot,
-    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-  });
   return /* @__PURE__ */ React.createElement(RoomContext.Provider, {
     value: room
   }, children);
@@ -207,4 +213,4 @@ function useCrdt(key, initialCrdt) {
   return (_a = root == null ? void 0 : root.get(key)) != null ? _a : null;
 }
 
-export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };
+export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

package/{lib/index.d.ts → index.d.ts}

@@ -1,5 +1,6 @@
-import { Room, Presence, Others, BroadcastOptions, User, LiveObject, LiveMap, LiveList, Client } from '@liveblocks/client';
 import * as React from 'react';
+import { Client, Room, Presence, Others, BroadcastOptions, Json, User, LiveObject, Lson, LiveMap, LiveList, LsonObject, History } from '@liveblocks/client';
+export { Json, JsonObject } from '@liveblocks/client';
 
 declare type LiveblocksProviderProps = {
     children: React.ReactNode;
@@ -9,6 +10,12 @@ declare type LiveblocksProviderProps = {
  * Makes the Liveblocks client available in the component hierarchy below.
  */
 declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element;
+/**
+ * Returns the Client of the nearest LiveblocksProvider above in the React
+ * component tree.
+ */
+declare function useClient(): Client;
+
 declare type RoomProviderProps<TStorageRoot> = {
     /**
      * The id of the room you want to connect to
@@ -29,7 +36,8 @@ declare type RoomProviderProps<TStorageRoot> = {
  */
 declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
 /**
- * Returns the room of the nearest RoomProvider above in the react component tree
+ * Returns the Room of the nearest RoomProvider above in the React component
+ * tree.
  */
 declare function useRoom(): Room;
 /**
@@ -108,7 +116,7 @@ declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) =
  *   console.error(er);
  * })
  */
-declare function useErrorListener(callback: (er: Error) => void): void;
+declare function useErrorListener(callback: (err: Error) => void): void;
 /**
  * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
  *
@@ -121,7 +129,7 @@ declare function useErrorListener(callback: (er: Error) => void): void;
  *   }
  * });
  */
-declare function useEventListener<TEvent>(callback: ({ connectionId, event, }: {
+declare function useEventListener<TEvent extends Json>(callback: ({ connectionId, event, }: {
     connectionId: number;
     event: TEvent;
 }) => void): void;
@@ -149,7 +157,7 @@ declare function useStorage<TRoot extends Record<string, any>>(): [
  * const emptyMap = useMap("mapA");
  * const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
  */
-declare function useMap<TKey extends string, TValue>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
+declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
 /**
  * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
  * The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
@@ -162,7 +170,7 @@ declare function useMap<TKey extends string, TValue>(key: string, entries?: read
  * const emptyList = useList("listA");
  * const listWithItems = useList("listB", ["a", "b", "c"]);
  */
-declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
+declare function useList<TValue extends Lson>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
 /**
  * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
  * The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
@@ -177,7 +185,7 @@ declare function useList<TValue>(key: string, items?: TValue[] | undefined): Liv
  *   website: "https://liveblocks.io"
  * });
  */
-declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
+declare function useObject<TData extends LsonObject>(key: string, initialData?: TData): LiveObject<TData> | null;
 /**
  * Returns a function that undoes the last operation executed by the current client.
  * It does not impact operations made by other clients.
@@ -194,15 +202,10 @@ declare function useRedo(): () => void;
  * All the modifications are merged in a single history item (undo/redo).
  * All the subscribers are called only after the batch is over.
  */
-declare function useBatch(): (fn: () => void) => void;
+declare function useBatch(): (callback: () => void) => void;
 /**
  * Returns the room.history
  */
-declare function useHistory(): {
-    undo: () => void;
-    redo: () => void;
-    pause: () => void;
-    resume: () => void;
-};
+declare function useHistory(): History;
 
-export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };
+export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

package/{lib/index.js → index.js}

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var client = require('@liveblocks/client');
 var React = require('react');
+var client = require('@liveblocks/client');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -25,6 +25,22 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+var ClientContext = React__namespace.createContext(null);
+function LiveblocksProvider(props) {
+  return React__namespace.createElement(ClientContext.Provider, {
+    value: props.client
+  }, props.children);
+}
+function useClient() {
+  var client = React__namespace.useContext(ClientContext);
+
+  if (client == null) {
+    throw new Error("LiveblocksProvider is missing from the react tree");
+  }
+
+  return client;
+}
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -70,24 +86,7 @@ function useRerender() {
   return update;
 }
 
-var ClientContext = React__namespace.createContext(null);
 var RoomContext = React__namespace.createContext(null);
-function LiveblocksProvider(props) {
-  return React__namespace.createElement(ClientContext.Provider, {
-    value: props.client
-  }, props.children);
-}
-
-function useClient() {
-  var client = React__namespace.useContext(ClientContext);
-
-  if (client == null) {
-    throw new Error("LiveblocksProvider is missing from the react tree");
-  }
-
-  return client;
-}
-
 function RoomProvider(_ref) {
   var id = _ref.id,
       children = _ref.children,
@@ -105,16 +104,27 @@ function RoomProvider(_ref) {
   }
 
   var client = useClient();
+
+  var _React$useState = React__namespace.useState(function () {
+    return client.enter(id, {
+      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+      defaultStorageRoot: defaultStorageRoot,
+      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+    });
+  }),
+      room = _React$useState[0],
+      setRoom = _React$useState[1];
+
   React__namespace.useEffect(function () {
+    setRoom(client.enter(id, {
+      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+      defaultStorageRoot: defaultStorageRoot,
+      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
+    }));
     return function () {
       client.leave(id);
     };
   }, [client, id]);
-  var room = client.getRoom(id) || client.enter(id, {
-    defaultPresence: defaultPresence ? defaultPresence() : undefined,
-    defaultStorageRoot: defaultStorageRoot,
-    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-  });
   return React__namespace.createElement(RoomContext.Provider, {
     value: room
   }, children);
@@ -222,9 +232,9 @@ function useSelf() {
 function useStorage() {
   var room = useRoom();
 
-  var _React$useState = React__namespace.useState(null),
-      root = _React$useState[0],
-      setState = _React$useState[1];
+  var _React$useState2 = React__namespace.useState(null),
+      root = _React$useState2[0],
+      setState = _React$useState2[1];
 
   React__namespace.useEffect(function () {
     var didCancel = false;
@@ -336,6 +346,7 @@ exports.LiveblocksProvider = LiveblocksProvider;
 exports.RoomProvider = RoomProvider;
 exports.useBatch = useBatch;
 exports.useBroadcastEvent = useBroadcastEvent;
+exports.useClient = useClient;
 exports.useErrorListener = useErrorListener;
 exports.useEventListener = useEventListener;
 exports.useHistory = useHistory;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.15.11",
-  "description": "",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "version": "0.16.2",
+  "description": "A set of React hooks and providers to use Liveblocks declaratively.",
+  "main": "./index.js",
+  "types": "./index.d.ts",
   "files": [
-    "lib/**"
+    "**"
   ],
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./lib/index.d.ts",
-      "module": "./lib/esm/index.js",
-      "import": "./lib/esm/index.mjs",
-      "default": "./lib/index.js"
+      "types": "./index.d.ts",
+      "module": "./esm/index.js",
+      "import": "./esm/index.mjs",
+      "default": "./index.js"
     }
   },
   "keywords": [
@@ -27,13 +27,13 @@
     "url": "https://github.com/liveblocks/liveblocks/issues"
   },
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && cp ./package.json ./README.md ./lib",
     "start": "rollup -c -w",
     "test": "jest --watch"
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.15.11",
+    "@liveblocks/client": "0.16.2",
     "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
@@ -45,7 +45,7 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.3.1",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^13.1.1",
     "@types/jest": "^26.0.20",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^17.0.14",