@liveblocks/react 0.15.11-test.1 → 0.15.11

package/README.md

@@ -1,12 +1,22 @@
 <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>
 
 ## 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.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,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.15.11-test.1",
+  "version": "0.15.11",
   "description": "",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -33,8 +33,8 @@
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.15.11-test.1",
-    "react": "^16.14.0 || ^17"
+    "@liveblocks/client": "0.15.11",
+    "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",