@liveblocks/react 0.15.5 → 0.15.6-beta.1

package/lib/esm/index.js

@@ -0,0 +1,216 @@
+import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
+import * as React from 'react';
+
+const ClientContext = React.createContext(null);
+const RoomContext = React.createContext(null);
+function LiveblocksProvider(props) {
+  return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
+    value: props.client
+  }, props.children);
+}
+function useClient() {
+  const client = React.useContext(ClientContext);
+  if (client == null) {
+    throw new Error("LiveblocksProvider is missing from the react tree");
+  }
+  return client;
+}
+function RoomProvider({
+  id,
+  children,
+  defaultPresence,
+  defaultStorageRoot
+}) {
+  if (process.env.NODE_ENV !== "production") {
+    if (id == null) {
+      throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
+    }
+    if (typeof id !== "string") {
+      throw new Error("RoomProvider id property should be a string.");
+    }
+  }
+  const client = useClient();
+  React.useEffect(() => {
+    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);
+}
+function useRoom() {
+  const room = React.useContext(RoomContext);
+  if (room == null) {
+    throw new Error("RoomProvider is missing from the react tree");
+  }
+  return room;
+}
+function useMyPresence() {
+  const room = useRoom();
+  const presence = room.getPresence();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onMyPresenceChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+  const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
+  return [presence, setPresence];
+}
+function useUpdateMyPresence() {
+  const room = useRoom();
+  return React.useCallback((overrides, options) => {
+    room.updatePresence(overrides, options);
+  }, [room]);
+}
+function useOthers() {
+  const room = useRoom();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onOthersChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribe = room.subscribe("others", onOthersChange);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+  return room.getOthers();
+}
+function useBroadcastEvent() {
+  const room = useRoom();
+  return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
+    room.broadcastEvent(event, options);
+  }, [room]);
+}
+function useErrorListener(callback) {
+  const room = useRoom();
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  React.useEffect(() => {
+    const listener = (e) => savedCallback.current(e);
+    const unsubscribe = room.subscribe("error", listener);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+}
+function useEventListener(callback) {
+  const room = useRoom();
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  React.useEffect(() => {
+    const listener = (e) => savedCallback.current(e);
+    const unsubscribe = room.subscribe("event", listener);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+}
+function useSelf() {
+  const room = useRoom();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribePresence = room.subscribe("my-presence", onChange);
+    const unsubscribeConnection = room.subscribe("connection", onChange);
+    return () => {
+      unsubscribePresence();
+      unsubscribeConnection();
+    };
+  }, [room]);
+  return room.getSelf();
+}
+function useStorage() {
+  const room = useRoom();
+  const [root, setState] = React.useState(null);
+  React.useEffect(() => {
+    let didCancel = false;
+    async function fetchStorage() {
+      const storage = await room.getStorage();
+      if (!didCancel) {
+        setState(storage.root);
+      }
+    }
+    fetchStorage();
+    return () => {
+      didCancel = true;
+    };
+  }, [room]);
+  return [root];
+}
+function useMap(key, entries) {
+  return useCrdt(key, new LiveMap(entries));
+}
+function useList(key, items) {
+  return useCrdt(key, new LiveList(items));
+}
+function useObject(key, initialData) {
+  return useCrdt(key, new LiveObject(initialData));
+}
+function useUndo() {
+  return useRoom().history.undo;
+}
+function useRedo() {
+  return useRoom().history.redo;
+}
+function useBatch() {
+  return useRoom().batch;
+}
+function useHistory() {
+  return useRoom().history;
+}
+function useCrdt(key, initialCrdt) {
+  var _a;
+  const room = useRoom();
+  const [root] = useStorage();
+  const [, setCount] = React.useState(0);
+  React.useEffect(() => {
+    if (root == null) {
+      return;
+    }
+    let crdt = root.get(key);
+    if (crdt == null) {
+      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);
+      }
+    }
+    let unsubscribeCrdt = room.subscribe(crdt, onChange);
+    const unsubscribeRoot = room.subscribe(root, onRootChange);
+    setCount((x) => x + 1);
+    return () => {
+      unsubscribeRoot();
+      unsubscribeCrdt();
+    };
+  }, [root, room]);
+  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 };

package/lib/esm/index.mjs

@@ -0,0 +1,216 @@
+import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
+import * as React from 'react';
+
+const ClientContext = React.createContext(null);
+const RoomContext = React.createContext(null);
+function LiveblocksProvider(props) {
+  return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
+    value: props.client
+  }, props.children);
+}
+function useClient() {
+  const client = React.useContext(ClientContext);
+  if (client == null) {
+    throw new Error("LiveblocksProvider is missing from the react tree");
+  }
+  return client;
+}
+function RoomProvider({
+  id,
+  children,
+  defaultPresence,
+  defaultStorageRoot
+}) {
+  if (process.env.NODE_ENV !== "production") {
+    if (id == null) {
+      throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
+    }
+    if (typeof id !== "string") {
+      throw new Error("RoomProvider id property should be a string.");
+    }
+  }
+  const client = useClient();
+  React.useEffect(() => {
+    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);
+}
+function useRoom() {
+  const room = React.useContext(RoomContext);
+  if (room == null) {
+    throw new Error("RoomProvider is missing from the react tree");
+  }
+  return room;
+}
+function useMyPresence() {
+  const room = useRoom();
+  const presence = room.getPresence();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onMyPresenceChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+  const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
+  return [presence, setPresence];
+}
+function useUpdateMyPresence() {
+  const room = useRoom();
+  return React.useCallback((overrides, options) => {
+    room.updatePresence(overrides, options);
+  }, [room]);
+}
+function useOthers() {
+  const room = useRoom();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onOthersChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribe = room.subscribe("others", onOthersChange);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+  return room.getOthers();
+}
+function useBroadcastEvent() {
+  const room = useRoom();
+  return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
+    room.broadcastEvent(event, options);
+  }, [room]);
+}
+function useErrorListener(callback) {
+  const room = useRoom();
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  React.useEffect(() => {
+    const listener = (e) => savedCallback.current(e);
+    const unsubscribe = room.subscribe("error", listener);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+}
+function useEventListener(callback) {
+  const room = useRoom();
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  React.useEffect(() => {
+    const listener = (e) => savedCallback.current(e);
+    const unsubscribe = room.subscribe("event", listener);
+    return () => {
+      unsubscribe();
+    };
+  }, [room]);
+}
+function useSelf() {
+  const room = useRoom();
+  const [, update] = React.useState(0);
+  React.useEffect(() => {
+    function onChange() {
+      update((x) => x + 1);
+    }
+    const unsubscribePresence = room.subscribe("my-presence", onChange);
+    const unsubscribeConnection = room.subscribe("connection", onChange);
+    return () => {
+      unsubscribePresence();
+      unsubscribeConnection();
+    };
+  }, [room]);
+  return room.getSelf();
+}
+function useStorage() {
+  const room = useRoom();
+  const [root, setState] = React.useState(null);
+  React.useEffect(() => {
+    let didCancel = false;
+    async function fetchStorage() {
+      const storage = await room.getStorage();
+      if (!didCancel) {
+        setState(storage.root);
+      }
+    }
+    fetchStorage();
+    return () => {
+      didCancel = true;
+    };
+  }, [room]);
+  return [root];
+}
+function useMap(key, entries) {
+  return useCrdt(key, new LiveMap(entries));
+}
+function useList(key, items) {
+  return useCrdt(key, new LiveList(items));
+}
+function useObject(key, initialData) {
+  return useCrdt(key, new LiveObject(initialData));
+}
+function useUndo() {
+  return useRoom().history.undo;
+}
+function useRedo() {
+  return useRoom().history.redo;
+}
+function useBatch() {
+  return useRoom().batch;
+}
+function useHistory() {
+  return useRoom().history;
+}
+function useCrdt(key, initialCrdt) {
+  var _a;
+  const room = useRoom();
+  const [root] = useStorage();
+  const [, setCount] = React.useState(0);
+  React.useEffect(() => {
+    if (root == null) {
+      return;
+    }
+    let crdt = root.get(key);
+    if (crdt == null) {
+      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);
+      }
+    }
+    let unsubscribeCrdt = room.subscribe(crdt, onChange);
+    const unsubscribeRoot = room.subscribe(root, onRootChange);
+    setCount((x) => x + 1);
+    return () => {
+      unsubscribeRoot();
+      unsubscribeCrdt();
+    };
+  }, [root, room]);
+  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 };