@liveblocks/react 0.15.10 → 0.16.0

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

@@ -60,12 +60,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 +78,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();
     };

package/lib/esm/index.mjs

@@ -60,12 +60,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 +78,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();
     };

package/lib/index.d.ts

@@ -1,4 +1,5 @@
-import { Room, Presence, Others, BroadcastOptions, User, LiveObject, LiveMap, LiveList, Client } from '@liveblocks/client';
+import { Room, Presence, Others, BroadcastOptions, Json, User, LiveObject, Lson, LiveMap, LiveList, LsonObject, History, Client } from '@liveblocks/client';
+export { Json, JsonObject } from '@liveblocks/client';
 import * as React from 'react';
 
 declare type LiveblocksProviderProps = {
@@ -108,7 +109,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 +122,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 +150,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 +163,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 +178,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 +195,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 };

package/lib/index.js

@@ -131,18 +131,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 +151,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 +222,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$useState = React__namespace.useState(null),
+      root = _React$useState[0],
+      setState = _React$useState[1];
 
   React__namespace.useEffect(function () {
     var didCancel = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.15.10",
-  "description": "",
+  "version": "0.16.0",
+  "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.10",
-    "react": "^16.14.0 || ^17"
+    "@liveblocks/client": "0.16.0",
+    "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -49,9 +49,12 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "babel-core": "^6.26.3",
     "babel-jest": "^26.6.3",
     "babel-runtime": "^6.26.0",
+    "eslint": "^8.12.0",
     "jest": "^26.6.3",
     "msw": "^0.27.1",
     "react-error-boundary": "^3.1.1",
@@ -66,4 +69,4 @@
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react"
   }
-}
+}