New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@liveblocks/react

Package Overview
Dependencies
Maintainers
3
Versions
470
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@liveblocks/react - npm Package Compare versions

Comparing version

0.15.5
to
0.15.6-beta.1

lib/esm/index.js
lib/esm/index.mjs

44

lib/index.d.ts

@@ -1,3 +0,4 @@

import { Client, Others, Presence, LiveObject, LiveMap, Room, User, LiveList, BroadcastOptions } from "@liveblocks/client";
import * as React from "react";
import { Room, Presence, Others, BroadcastOptions, User, LiveObject, LiveMap, LiveList, Client } from '@liveblocks/client';
import * as React from 'react';
declare type LiveblocksProviderProps = {

@@ -10,3 +11,3 @@ children: React.ReactNode;

*/
export declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element;
declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element;
declare type RoomProviderProps<TStorageRoot> = {

@@ -30,7 +31,7 @@ /**

*/
export declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
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
*/
export declare function useRoom(): Room;
declare function useRoom(): Room;
/**

@@ -50,3 +51,3 @@ * Returns the presence of the current user of the current room, and a function to update it.

*/
export declare function useMyPresence<T extends Presence>(): [
declare function useMyPresence<T extends Presence>(): [
T,

@@ -70,3 +71,3 @@ (overrides: Partial<T>, options?: {

*/
export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
addToHistory: boolean;

@@ -92,3 +93,3 @@ }) => void;

*/
export declare function useOthers<T extends Presence>(): Others<T>;
declare function useOthers<T extends Presence>(): Others<T>;
/**

@@ -104,3 +105,3 @@ * Returns a callback that lets you broadcast custom events to other users in the room

*/
export declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) => void;
declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) => void;
/**

@@ -116,3 +117,3 @@ * useErrorListener is a react hook that lets you react to potential room connection errors.

*/
export declare function useErrorListener(callback: (er: Error) => void): void;
declare function useErrorListener(callback: (er: Error) => void): void;
/**

@@ -130,3 +131,3 @@ * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.

*/
export declare function useEventListener<TEvent>(callback: ({ connectionId, event, }: {
declare function useEventListener<TEvent>(callback: ({ connectionId, event, }: {
connectionId: number;

@@ -143,4 +144,4 @@ event: TEvent;

*/
export declare function useSelf<TPresence extends Presence = Presence>(): User<TPresence> | null;
export declare function useStorage<TRoot extends Record<string, any>>(): [
declare function useSelf<TPresence extends Presence = Presence>(): User<TPresence> | null;
declare function useStorage<TRoot extends Record<string, any>>(): [
root: LiveObject<TRoot> | null

@@ -160,3 +161,3 @@ ];

*/
export 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>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
/**

@@ -174,3 +175,3 @@ * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.

*/
export declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
/**

@@ -190,3 +191,3 @@ * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.

*/
export declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
/**

@@ -196,3 +197,3 @@ * Returns a function that undoes the last operation executed by the current client.

*/
export declare function useUndo(): () => void;
declare function useUndo(): () => void;
/**

@@ -202,3 +203,3 @@ * Returns a function that redoes the last operation executed by the current client.

*/
export declare function useRedo(): () => void;
declare function useRedo(): () => void;
/**

@@ -210,7 +211,7 @@ * Returns a function that batches modifications made during the given function.

*/
export declare function useBatch(): (fn: () => void) => void;
declare function useBatch(): (fn: () => void) => void;
/**
* Returns the room.history
*/
export declare function useHistory(): {
declare function useHistory(): {
undo: () => void;

@@ -221,2 +222,3 @@ redo: () => void;

};
export {};
export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

691

lib/index.js

@@ -0,1 +1,3 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });

@@ -6,427 +8,357 @@

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
var React__namespace = /*#__PURE__*/_interopNamespace(React);
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
var ClientContext = React.createContext(null);
var RoomContext = React.createContext(null);
/**
* Makes the Liveblocks client available in the component hierarchy below.
*/
var ClientContext = React__namespace.createContext(null);
var RoomContext = React__namespace.createContext(null);
function LiveblocksProvider(props) {
return (React.createElement(ClientContext.Provider, { value: props.client }, props.children));
return React__namespace.createElement(ClientContext.Provider, {
value: props.client
}, props.children);
}
/**
* Returns the client of the nearest LiveblocksProvider above in the react component tree
*/
function useClient() {
var client = React.useContext(ClientContext);
if (client == null) {
throw new Error("LiveblocksProvider is missing from the react tree");
}
return client;
var client = React__namespace.useContext(ClientContext);
if (client == null) {
throw new Error("LiveblocksProvider is missing from the react tree");
}
return client;
}
/**
* Makes a Room available in the component hierarchy below.
* When this component is unmounted, the current user leave the room.
* That means that you can't have 2 RoomProvider with the same room id in your react tree.
*/
function RoomProvider(_a) {
var id = _a.id, children = _a.children, defaultPresence = _a.defaultPresence, defaultStorageRoot = _a.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.");
}
function RoomProvider(_ref) {
var id = _ref.id,
children = _ref.children,
defaultPresence = _ref.defaultPresence,
defaultStorageRoot = _ref.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");
}
var client = useClient();
React.useEffect(function () {
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.createElement(RoomContext.Provider, { value: room }, children);
if (typeof id !== "string") {
throw new Error("RoomProvider id property should be a string.");
}
}
var client = useClient();
React__namespace.useEffect(function () {
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);
}
/**
* Returns the room of the nearest RoomProvider above in the react component tree
*/
function useRoom() {
var room = React.useContext(RoomContext);
if (room == null) {
throw new Error("RoomProvider is missing from the react tree");
}
return room;
var room = React__namespace.useContext(RoomContext);
if (room == null) {
throw new Error("RoomProvider is missing from the react tree");
}
return room;
}
/**
* Returns the presence of the current user of the current room, and a function to update it.
* It is different from the setState function returned by the useState hook from React.
* You don't need to pass the full presence object to update it.
*
* @example
* import { useMyPresence } from "@liveblocks/react";
*
* const [myPresence, updateMyPresence] = useMyPresence();
* updateMyPresence({ x: 0 });
* updateMyPresence({ y: 0 });
*
* // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
*/
function useMyPresence() {
var room = useRoom();
var presence = room.getPresence();
var _a = React.useState(0), update = _a[1];
React.useEffect(function () {
function onMyPresenceChange() {
update(function (x) { return x + 1; });
}
var unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
return function () {
unsubscribe();
};
}, [room]);
var setPresence = React.useCallback(function (overrides, options) {
return room.updatePresence(overrides, options);
}, [room]);
return [presence, setPresence];
var room = useRoom();
var presence = room.getPresence();
var _React$useState = React__namespace.useState(0),
update = _React$useState[1];
React__namespace.useEffect(function () {
function onMyPresenceChange() {
update(function (x) {
return x + 1;
});
}
var unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
return function () {
unsubscribe();
};
}, [room]);
var setPresence = React__namespace.useCallback(function (overrides, options) {
return room.updatePresence(overrides, options);
}, [room]);
return [presence, setPresence];
}
/**
* useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
* If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
*
* @example
* import { useUpdateMyPresence } from "@liveblocks/react";
*
* const updateMyPresence = useUpdateMyPresence();
* updateMyPresence({ x: 0 });
* updateMyPresence({ y: 0 });
*
* // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
*/
function useUpdateMyPresence() {
var room = useRoom();
return React.useCallback(function (overrides, options) {
room.updatePresence(overrides, options);
}, [room]);
var room = useRoom();
return React__namespace.useCallback(function (overrides, options) {
room.updatePresence(overrides, options);
}, [room]);
}
/**
* Returns an object that lets you get information about all the the users currently connected in the room.
*
* @example
* import { useOthers } from "@liveblocks/react";
*
* const others = useOthers();
*
* // Example to map all cursors in jsx
* {
* others.map(({ connectionId, presence }) => {
* if(presence == null || presence.cursor == null) {
* return null;
* }
* return <Cursor key={connectionId} cursor={presence.cursor} />
* })
* }
*/
function useOthers() {
var room = useRoom();
var _a = React.useState(0), update = _a[1];
React.useEffect(function () {
function onOthersChange() {
update(function (x) { return x + 1; });
}
var unsubscribe = room.subscribe("others", onOthersChange);
return function () {
unsubscribe();
};
}, [room]);
return room.getOthers();
var room = useRoom();
var _React$useState2 = React__namespace.useState(0),
update = _React$useState2[1];
React__namespace.useEffect(function () {
function onOthersChange() {
update(function (x) {
return x + 1;
});
}
var unsubscribe = room.subscribe("others", onOthersChange);
return function () {
unsubscribe();
};
}, [room]);
return room.getOthers();
}
/**
* Returns a callback that lets you broadcast custom events to other users in the room
*
* @example
* import { useBroadcastEvent } from "@liveblocks/react";
*
* const broadcast = useBroadcastEvent();
*
* broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
*/
function useBroadcastEvent() {
var room = useRoom();
return React.useCallback(function (event, options) {
if (options === void 0) { options = { shouldQueueEventIfNotReady: false }; }
room.broadcastEvent(event, options);
}, [room]);
var room = useRoom();
return React__namespace.useCallback(function (event, options) {
if (options === void 0) {
options = {
shouldQueueEventIfNotReady: false
};
}
room.broadcastEvent(event, options);
}, [room]);
}
/**
* useErrorListener is a react hook that lets you react to potential room connection errors.
*
* @example
* import { useErrorListener } from "@liveblocks/react";
*
* useErrorListener(er => {
* console.error(er);
* })
*/
function useErrorListener(callback) {
var room = useRoom();
var savedCallback = React.useRef(callback);
React.useEffect(function () {
savedCallback.current = callback;
});
React.useEffect(function () {
var listener = function (e) { return savedCallback.current(e); };
var unsubscribe = room.subscribe("error", listener);
return function () {
unsubscribe();
};
}, [room]);
var room = useRoom();
var savedCallback = React__namespace.useRef(callback);
React__namespace.useEffect(function () {
savedCallback.current = callback;
});
React__namespace.useEffect(function () {
var listener = function listener(e) {
return savedCallback.current(e);
};
var unsubscribe = room.subscribe("error", listener);
return function () {
unsubscribe();
};
}, [room]);
}
/**
* useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
*
* @example
* import { useEventListener } from "@liveblocks/react";
*
* useEventListener(({ connectionId, event }) => {
* if (event.type === "CUSTOM_EVENT") {
* // Do something
* }
* });
*/
function useEventListener(callback) {
var room = useRoom();
var savedCallback = React.useRef(callback);
React.useEffect(function () {
savedCallback.current = callback;
});
React.useEffect(function () {
var listener = function (e) {
return savedCallback.current(e);
};
var unsubscribe = room.subscribe("event", listener);
return function () {
unsubscribe();
};
}, [room]);
var room = useRoom();
var savedCallback = React__namespace.useRef(callback);
React__namespace.useEffect(function () {
savedCallback.current = callback;
});
React__namespace.useEffect(function () {
var listener = function listener(e) {
return savedCallback.current(e);
};
var unsubscribe = room.subscribe("event", listener);
return function () {
unsubscribe();
};
}, [room]);
}
/**
* Gets the current user once it is connected to the room.
*
* @example
* import { useSelf } from "@liveblocks/react";
*
* const user = useSelf();
*/
function useSelf() {
var room = useRoom();
var _a = React.useState(0), update = _a[1];
React.useEffect(function () {
function onChange() {
update(function (x) { return x + 1; });
}
var unsubscribePresence = room.subscribe("my-presence", onChange);
var unsubscribeConnection = room.subscribe("connection", onChange);
return function () {
unsubscribePresence();
unsubscribeConnection();
};
}, [room]);
return room.getSelf();
var room = useRoom();
var _React$useState3 = React__namespace.useState(0),
update = _React$useState3[1];
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);
return function () {
unsubscribePresence();
unsubscribeConnection();
};
}, [room]);
return room.getSelf();
}
function useStorage() {
var room = useRoom();
var _a = React.useState(null), root = _a[0], setState = _a[1];
React.useEffect(function () {
var didCancel = false;
function fetchStorage() {
return __awaiter(this, void 0, void 0, function () {
var storage;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, room.getStorage()];
case 1:
storage = _a.sent();
if (!didCancel) {
setState(storage.root);
}
return [2 /*return*/];
}
});
});
}
fetchStorage();
return function () {
didCancel = true;
};
}, [room]);
return [root];
var room = useRoom();
var _React$useState4 = React__namespace.useState(null),
root = _React$useState4[0],
setState = _React$useState4[1];
React__namespace.useEffect(function () {
var didCancel = false;
function fetchStorage() {
return _fetchStorage.apply(this, arguments);
}
function _fetchStorage() {
_fetchStorage = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
var storage;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return room.getStorage();
case 2:
storage = _context.sent;
if (!didCancel) {
setState(storage.root);
}
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _fetchStorage.apply(this, arguments);
}
fetchStorage();
return function () {
didCancel = true;
};
}, [room]);
return [root];
}
/**
* Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
* The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
*
* @param key The storage key associated with the LiveMap
* @param entries Optional entries that are used to create the LiveMap for the first time
* @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage
*
* @example
* const emptyMap = useMap("mapA");
* const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
*/
function useMap(key, entries) {
return useCrdt(key, new client.LiveMap(entries));
return useCrdt(key, new client.LiveMap(entries));
}
/**
* 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.
*
* @param key The storage key associated with the LiveList
* @param items Optional items that are used to create the LiveList for the first time
* @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
*
* @example
* const emptyList = useList("listA");
* const listWithItems = useList("listB", ["a", "b", "c"]);
*/
function useList(key, items) {
return useCrdt(key, new client.LiveList(items));
return useCrdt(key, new client.LiveList(items));
}
/**
* 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.
*
* @param key The storage key associated with the LiveObject
* @param initialData Optional data that is used to create the LiveObject for the first time
* @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
*
* @example
* const object = useObject("obj", {
* company: "Liveblocks",
* website: "https://liveblocks.io"
* });
*/
function useObject(key, initialData) {
return useCrdt(key, new client.LiveObject(initialData));
return useCrdt(key, new client.LiveObject(initialData));
}
/**
* Returns a function that undoes the last operation executed by the current client.
* It does not impact operations made by other clients.
*/
function useUndo() {
return useRoom().history.undo;
return useRoom().history.undo;
}
/**
* Returns a function that redoes the last operation executed by the current client.
* It does not impact operations made by other clients.
*/
function useRedo() {
return useRoom().history.redo;
return useRoom().history.redo;
}
/**
* Returns a function that batches modifications made during the given function.
* All the modifications are sent to other clients in a single message.
* All the modifications are merged in a single history item (undo/redo).
* All the subscribers are called only after the batch is over.
*/
function useBatch() {
return useRoom().batch;
return useRoom().batch;
}
/**
* Returns the room.history
*/
function useHistory() {
return useRoom().history;
return useRoom().history;
}
function useCrdt(key, initialCrdt) {
var _a;
var room = useRoom();
var root = useStorage()[0];
var _b = React.useState(0), setCount = _b[1];
React.useEffect(function () {
if (root == null) {
return;
}
var crdt = root.get(key);
if (crdt == null) {
crdt = 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 /* AbstractCrdt */, onChange);
setCount(function (x) { return x + 1; });
}
}
var unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, onChange);
var unsubscribeRoot = room.subscribe(root /* AbstractCrdt */, onRootChange);
setCount(function (x) { return x + 1; });
return function () {
unsubscribeRoot();
unsubscribeCrdt();
};
}, [root, room]);
return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
var _root$get;
var room = useRoom();
var _useStorage = useStorage(),
root = _useStorage[0];
var _React$useState5 = React__namespace.useState(0),
setCount = _React$useState5[1];
React__namespace.useEffect(function () {
if (root == null) {
return;
}
var crdt = root.get(key);
if (crdt == null) {
crdt = 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;
});
}
}
var unsubscribeCrdt = room.subscribe(crdt, onChange);
var unsubscribeRoot = room.subscribe(root, onRootChange);
setCount(function (x) {
return x + 1;
});
return function () {
unsubscribeRoot();
unsubscribeCrdt();
};
}, [root, room]);
return (_root$get = root == null ? void 0 : root.get(key)) != null ? _root$get : null;
}

@@ -452,2 +384,1 @@

exports.useUpdateMyPresence = useUpdateMyPresence;
//# sourceMappingURL=index.js.map

23

package.json
{
"name": "@liveblocks/react",
"version": "0.15.5",
"version": "0.15.6-beta.1",
"description": "",
"main": "./lib/index.js",
"types": "./lib/index.d.ts",
"files": [
"lib/"
"lib/**"
],
"exports": {
"./package.json": "./package.json",
".": {
"types": "./lib/index.d.ts",
"module": "./lib/esm/index.js",
"import": "./lib/esm/index.mjs",
"default": "./lib/index.js"
}
},
"keywords": [

@@ -34,3 +44,5 @@ "react",

"@babel/preset-typescript": "^7.12.16",
"@rollup/plugin-node-resolve": "^11.2.0",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-node-resolve": "^11.2.1",
"@rollup/plugin-typescript": "^8.3.1",
"@testing-library/jest-dom": "^5.11.9",

@@ -47,3 +59,4 @@ "@testing-library/react": "^11.2.5",

"rollup": "^2.39.0",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-dts": "^4.2.0",
"rollup-plugin-esbuild": "^4.8.2",
"typescript": "^4.1.5",

@@ -57,2 +70,2 @@ "whatwg-fetch": "^3.6.2"

}
}
}
lib/index.js.map
lib/index.test.d.ts