@liveblocks/react 0.15.6 → 0.15.9

package/lib/esm/index.js

@@ -1,5 +1,11 @@
 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;
+}
 
 const ClientContext = React.createContext(null);
 const RoomContext = React.createContext(null);
@@ -123,13 +129,10 @@ function useEventListener(callback) {
 }
 function useSelf() {
   const room = useRoom();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribePresence = room.subscribe("my-presence", onChange);
-    const unsubscribeConnection = room.subscribe("connection", onChange);
+    const unsubscribePresence = room.subscribe("my-presence", rerender);
+    const unsubscribeConnection = room.subscribe("connection", rerender);
     return () => {
       unsubscribePresence();
       unsubscribeConnection();
@@ -180,7 +183,7 @@ function useCrdt(key, initialCrdt) {
   var _a;
   const room = useRoom();
   const [root] = useStorage();
-  const [, setCount] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
     if (root == null) {
       return;
@@ -190,21 +193,18 @@ function useCrdt(key, initialCrdt) {
       crdt = initialCrdt;
       root.set(key, crdt);
     }
-    function onChange() {
-      setCount((x) => x + 1);
-    }
     function onRootChange() {
       const newCrdt = root.get(key);
       if (newCrdt !== crdt) {
         unsubscribeCrdt();
         crdt = newCrdt;
-        unsubscribeCrdt = room.subscribe(crdt, onChange);
-        setCount((x) => x + 1);
+        unsubscribeCrdt = room.subscribe(crdt, rerender);
+        rerender();
       }
     }
-    let unsubscribeCrdt = room.subscribe(crdt, onChange);
+    let unsubscribeCrdt = room.subscribe(crdt, rerender);
     const unsubscribeRoot = room.subscribe(root, onRootChange);
-    setCount((x) => x + 1);
+    rerender();
     return () => {
       unsubscribeRoot();
       unsubscribeCrdt();

package/lib/esm/index.mjs

@@ -1,5 +1,11 @@
 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;
+}
 
 const ClientContext = React.createContext(null);
 const RoomContext = React.createContext(null);
@@ -123,13 +129,10 @@ function useEventListener(callback) {
 }
 function useSelf() {
   const room = useRoom();
-  const [, update] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
-    function onChange() {
-      update((x) => x + 1);
-    }
-    const unsubscribePresence = room.subscribe("my-presence", onChange);
-    const unsubscribeConnection = room.subscribe("connection", onChange);
+    const unsubscribePresence = room.subscribe("my-presence", rerender);
+    const unsubscribeConnection = room.subscribe("connection", rerender);
     return () => {
       unsubscribePresence();
       unsubscribeConnection();
@@ -180,7 +183,7 @@ function useCrdt(key, initialCrdt) {
   var _a;
   const room = useRoom();
   const [root] = useStorage();
-  const [, setCount] = React.useState(0);
+  const rerender = useRerender();
   React.useEffect(() => {
     if (root == null) {
       return;
@@ -190,21 +193,18 @@ function useCrdt(key, initialCrdt) {
       crdt = initialCrdt;
       root.set(key, crdt);
     }
-    function onChange() {
-      setCount((x) => x + 1);
-    }
     function onRootChange() {
       const newCrdt = root.get(key);
       if (newCrdt !== crdt) {
         unsubscribeCrdt();
         crdt = newCrdt;
-        unsubscribeCrdt = room.subscribe(crdt, onChange);
-        setCount((x) => x + 1);
+        unsubscribeCrdt = room.subscribe(crdt, rerender);
+        rerender();
       }
     }
-    let unsubscribeCrdt = room.subscribe(crdt, onChange);
+    let unsubscribeCrdt = room.subscribe(crdt, rerender);
     const unsubscribeRoot = room.subscribe(root, onRootChange);
-    setCount((x) => x + 1);
+    rerender();
     return () => {
       unsubscribeRoot();
       unsubscribeCrdt();

package/lib/index.js

@@ -61,6 +61,15 @@ function _asyncToGenerator(fn) {
   };
 }
 
+function useRerender() {
+  var _useReducer = React.useReducer(function (x) {
+    return x + 1;
+  }, 0),
+      update = _useReducer[1];
+
+  return update;
+}
+
 var ClientContext = React__namespace.createContext(null);
 var RoomContext = React__namespace.createContext(null);
 function LiveblocksProvider(props) {
@@ -217,19 +226,10 @@ function useEventListener(callback) {
 }
 function useSelf() {
   var room = useRoom();
-
-  var _React$useState3 = React__namespace.useState(0),
-      update = _React$useState3[1];
-
+  var rerender = useRerender();
   React__namespace.useEffect(function () {
-    function onChange() {
-      update(function (x) {
-        return x + 1;
-      });
-    }
-
-    var unsubscribePresence = room.subscribe("my-presence", onChange);
-    var unsubscribeConnection = room.subscribe("connection", onChange);
+    var unsubscribePresence = room.subscribe("my-presence", rerender);
+    var unsubscribeConnection = room.subscribe("connection", rerender);
     return function () {
       unsubscribePresence();
       unsubscribeConnection();
@@ -240,9 +240,9 @@ function useSelf() {
 function useStorage() {
   var room = useRoom();
 
-  var _React$useState4 = React__namespace.useState(null),
-      root = _React$useState4[0],
-      setState = _React$useState4[1];
+  var _React$useState3 = React__namespace.useState(null),
+      root = _React$useState3[0],
+      setState = _React$useState3[1];
 
   React__namespace.useEffect(function () {
     var didCancel = false;
@@ -315,9 +315,7 @@ function useCrdt(key, initialCrdt) {
   var _useStorage = useStorage(),
       root = _useStorage[0];
 
-  var _React$useState5 = React__namespace.useState(0),
-      setCount = _React$useState5[1];
-
+  var rerender = useRerender();
   React__namespace.useEffect(function () {
     if (root == null) {
       return;
@@ -330,30 +328,20 @@ function useCrdt(key, initialCrdt) {
       root.set(key, crdt);
     }
 
-    function onChange() {
-      setCount(function (x) {
-        return x + 1;
-      });
-    }
-
     function onRootChange() {
       var newCrdt = root.get(key);
 
       if (newCrdt !== crdt) {
         unsubscribeCrdt();
         crdt = newCrdt;
-        unsubscribeCrdt = room.subscribe(crdt, onChange);
-        setCount(function (x) {
-          return x + 1;
-        });
+        unsubscribeCrdt = room.subscribe(crdt, rerender);
+        rerender();
       }
     }
 
-    var unsubscribeCrdt = room.subscribe(crdt, onChange);
+    var unsubscribeCrdt = room.subscribe(crdt, rerender);
     var unsubscribeRoot = room.subscribe(root, onRootChange);
-    setCount(function (x) {
-      return x + 1;
-    });
+    rerender();
     return function () {
       unsubscribeRoot();
       unsubscribeCrdt();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.15.6",
+  "version": "0.15.9",
   "description": "",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -33,7 +33,7 @@
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.15.6",
+    "@liveblocks/client": "0.15.9",
     "react": "^16.14.0 || ^17"
   },
   "devDependencies": {
@@ -48,6 +48,7 @@
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
     "@types/react": "^16.14.0",
+    "@types/react-dom": "^17.0.14",
     "babel-core": "^6.26.3",
     "babel-jest": "^26.6.3",
     "babel-runtime": "^6.26.0",
@@ -65,4 +66,4 @@
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react"
   }
-}
+}