@liveblocks/react 0.15.11-test.1 → 0.16.1

package/README.md

@@ -1,12 +1,24 @@
 <p align="center">
   <a href="https://liveblocks.io">
-    <img src="https://liveblocks.io/images/blog/introducing-liveblocks.png">
+    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header.svg" alt="Liveblocks" />
   </a>
 </p>
 
-# Liveblocks · [![Twitter Follow](https://shields.io/twitter/follow/liveblocks?label=Follow)](https://twitter.com/liveblocks)
+# `@liveblocks/react`
 
-**At [Liveblocks](https://liveblocks.io), we’re building tools to help companies create world-class collaborative products that attract, engage and retain users.** This repository is a set of open-source packages for building performant and reliable multiplayer experiences.
+<p>
+  <a href="https://npmjs.org/package/@liveblocks/react">
+    <img src="https://img.shields.io/npm/v/@liveblocks/react?style=flat&label=npm&color=c33" alt="NPM" />
+  </a>
+  <a href="https://bundlephobia.com/package/@liveblocks/react">
+    <img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react?style=flat&label=size&color=09f" alt="Size" />
+  </a>
+  <a href="https://github.com/liveblocks/liveblocks/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/liveblocks/liveblocks?style=flat&label=license&color=f80" alt="License" />
+  </a>
+</p>
+
+A set of [React](https://reactjs.org/) hooks and providers to use [Liveblocks](https://liveblocks.io) declaratively.
 
 ## Installation
 

package/lib/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);
@@ -60,12 +66,9 @@ function useRoom() {
 function useMyPresence() {
   const room = useRoom();
   const presence = room.getPresence();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onMyPresenceChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
+    const unsubscribe = room.subscribe("my-presence", rerender);
     return () => {
       unsubscribe();
     };
@@ -81,12 +84,9 @@ function useUpdateMyPresence() {
 }
 function useOthers() {
   const room = useRoom();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onOthersChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribe = room.subscribe("others", onOthersChange);
+    const unsubscribe = room.subscribe("others", rerender);
     return () => {
       unsubscribe();
     };
@@ -213,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/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);
@@ -60,12 +66,9 @@ function useRoom() {
 function useMyPresence() {
   const room = useRoom();
   const presence = room.getPresence();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onMyPresenceChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
+    const unsubscribe = room.subscribe("my-presence", rerender);
     return () => {
       unsubscribe();
     };
@@ -81,12 +84,9 @@ function useUpdateMyPresence() {
 }
 function useOthers() {
   const room = useRoom();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onOthersChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribe = room.subscribe("others", onOthersChange);
+    const unsubscribe = room.subscribe("others", rerender);
     return () => {
       unsubscribe();
     };
@@ -213,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

@@ -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

@@ -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,25 @@ function RoomProvider(_ref) {
   }
 
   var client = useClient();
+
+  var _React$useState = React__namespace.useState(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);
@@ -131,18 +139,9 @@ function useRoom() {
 function useMyPresence() {
   var room = useRoom();
   var presence = room.getPresence();
-
-  var _React$useState = React__namespace.useState(0),
-      update = _React$useState[1];
-
+  var rerender = useRerender();
   React__namespace.useEffect(function () {
-    function onMyPresenceChange() {
-      update(function (x) {
-        return x + 1;
-      });
-    }
-
-    var unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
+    var unsubscribe = room.subscribe("my-presence", rerender);
     return function () {
       unsubscribe();
     };
@@ -160,18 +159,9 @@ function useUpdateMyPresence() {
 }
 function useOthers() {
   var room = useRoom();
-
-  var _React$useState2 = React__namespace.useState(0),
-      update = _React$useState2[1];
-
+  var rerender = useRerender();
   React__namespace.useEffect(function () {
-    function onOthersChange() {
-      update(function (x) {
-        return x + 1;
-      });
-    }
-
-    var unsubscribe = room.subscribe("others", onOthersChange);
+    var unsubscribe = room.subscribe("others", rerender);
     return function () {
       unsubscribe();
     };
@@ -240,9 +230,9 @@ function useSelf() {
 function useStorage() {
   var room = useRoom();
 
-  var _React$useState3 = React__namespace.useState(null),
-      root = _React$useState3[0],
-      setState = _React$useState3[1];
+  var _React$useState2 = React__namespace.useState(null),
+      root = _React$useState2[0],
+      setState = _React$useState2[1];
 
   React__namespace.useEffect(function () {
     var didCancel = false;
@@ -354,6 +344,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,7 +1,7 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.15.11-test.1",
-  "description": "",
+  "version": "0.16.1",
+  "description": "A set of React hooks and providers to use Liveblocks declaratively.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "files": [
@@ -33,8 +33,8 @@
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.15.11-test.1",
-    "react": "^16.14.0 || ^17"
+    "@liveblocks/client": "0.16.1",
+    "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -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",