@liveblocks/zustand 0.15.0-alpha.1

package/lib/esm/index.js.js

@@ -0,0 +1,185 @@
+import { patchLiveObjectKey, liveNodeToJson, patchImmutableObject } from '@liveblocks/client';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const middleware = (config, {
+  client,
+  storageMapping: unvalidatedMapping,
+  presenceMapping: unvalidatedPresenceMapping = {}
+}) => {
+  if (client == null) {
+    throw new Error(`${ERROR_PREFIX} client is missing`);
+  }
+  const mapping = validateMapping(unvalidatedMapping, "storageMapping");
+  const presenceMapping = validateMapping(unvalidatedPresenceMapping, "presenceMapping");
+  validateNoDuplicateKeys(mapping, presenceMapping);
+  return (set, get, api) => {
+    const typedSet = set;
+    let room = null;
+    let isPatching = false;
+    let storageRoot = null;
+    let unsubscribeCallbacks = [];
+    const store = config((args) => {
+      const oldState = get();
+      set(args);
+      const newState = get();
+      if (room) {
+        isPatching = true;
+        updatePresence(room, oldState, newState, presenceMapping);
+        room.batch(() => {
+          if (storageRoot) {
+            patchLiveblocksStorage(storageRoot, oldState, newState, mapping);
+          }
+        });
+        isPatching = false;
+      }
+    }, get, api);
+    function enterRoom(roomId, initialState) {
+      if (storageRoot) {
+        return;
+      }
+      room = client.enter(roomId);
+      updateZustandLiveblocksState(set, { isStorageLoading: true, room });
+      const state = get();
+      broadcastInitialPresence(room, state, presenceMapping);
+      unsubscribeCallbacks.push(room.subscribe("others", (others) => {
+        updateZustandLiveblocksState(set, { others: others.toArray() });
+      }));
+      unsubscribeCallbacks.push(room.subscribe("connection", () => {
+        updateZustandLiveblocksState(set, {
+          connection: room.getConnectionState()
+        });
+      }));
+      room.getStorage().then(({ root }) => {
+        const updates = {};
+        room.batch(() => {
+          for (const key in mapping) {
+            const liveblocksStatePart = root.get(key);
+            if (liveblocksStatePart == null) {
+              updates[key] = initialState[key];
+              patchLiveObjectKey(root, key, void 0, initialState[key]);
+            } else {
+              updates[key] = liveNodeToJson(liveblocksStatePart);
+            }
+          }
+        });
+        typedSet(updates);
+        storageRoot = root;
+        unsubscribeCallbacks.push(room.subscribe(root, (updates2) => {
+          if (isPatching === false) {
+            set(patchState(get(), updates2, mapping));
+          }
+        }, { isDeep: true }));
+        updateZustandLiveblocksState(set, { isStorageLoading: false });
+      });
+    }
+    function leaveRoom(roomId) {
+      for (const unsubscribe of unsubscribeCallbacks) {
+        unsubscribe();
+      }
+      storageRoot = null;
+      room = null;
+      isPatching = false;
+      unsubscribeCallbacks = [];
+      client.leave(roomId);
+      updateZustandLiveblocksState(set, {
+        others: [],
+        connection: "closed",
+        isStorageLoading: false,
+        room: null
+      });
+    }
+    return __spreadProps(__spreadValues({}, store), {
+      liveblocks: {
+        enterRoom,
+        leaveRoom,
+        room: null,
+        others: [],
+        connection: "closed",
+        isStorageLoading: false
+      }
+    });
+  };
+};
+function patchState(state, updates, mapping) {
+  const partialState = {};
+  for (const key in mapping) {
+    partialState[key] = state[key];
+  }
+  const patched = patchImmutableObject(partialState, updates);
+  const result = {};
+  for (const key in mapping) {
+    result[key] = patched[key];
+  }
+  return result;
+}
+function updateZustandLiveblocksState(set, partial) {
+  set((state) => ({ liveblocks: __spreadValues(__spreadValues({}, state.liveblocks), partial) }));
+}
+function broadcastInitialPresence(room, state, mapping) {
+  for (const key in mapping) {
+    room == null ? void 0 : room.updatePresence({ [key]: state[key] });
+  }
+}
+function updatePresence(room, oldState, newState, presenceMapping) {
+  for (const key in presenceMapping) {
+    if (oldState[key] !== newState[key]) {
+      room.updatePresence({ [key]: newState[key] });
+    }
+  }
+}
+function patchLiveblocksStorage(root, oldState, newState, mapping) {
+  for (const key in mapping) {
+    if (oldState[key] !== newState[key]) {
+      patchLiveObjectKey(root, key, oldState[key], newState[key]);
+    }
+  }
+}
+function isObject(value) {
+  return Object.prototype.toString.call(value) === "[object Object]";
+}
+function validateNoDuplicateKeys(storageMapping, presenceMapping) {
+  for (const key in storageMapping) {
+    if (presenceMapping[key] !== void 0) {
+      throw new Error(`${ERROR_PREFIX} "${key}" is mapped on presenceMapping and storageMapping. A key shouldn't exist on both mapping.`);
+    }
+  }
+}
+function validateMapping(mapping, mappingType) {
+  if (mapping == null) {
+    throw new Error(`${ERROR_PREFIX} ${mappingType} is missing.`);
+  }
+  if (!isObject(mapping)) {
+    throw new Error(`${ERROR_PREFIX} ${mappingType} should be an object where the values are boolean.`);
+  }
+  const result = {};
+  for (const key in mapping) {
+    if (typeof mapping[key] !== "boolean") {
+      throw new Error(`${ERROR_PREFIX} ${mappingType}.${key} value should be a boolean`);
+    }
+    if (mapping[key] === true) {
+      result[key] = true;
+    }
+  }
+  return result;
+}
+const ERROR_PREFIX = "Invalid @liveblocks/zustand middleware config.";
+
+export { middleware };

package/lib/esm/index.js.mjs

@@ -0,0 +1,185 @@
+import { patchLiveObjectKey, liveNodeToJson, patchImmutableObject } from '@liveblocks/client';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const middleware = (config, {
+  client,
+  storageMapping: unvalidatedMapping,
+  presenceMapping: unvalidatedPresenceMapping = {}
+}) => {
+  if (client == null) {
+    throw new Error(`${ERROR_PREFIX} client is missing`);
+  }
+  const mapping = validateMapping(unvalidatedMapping, "storageMapping");
+  const presenceMapping = validateMapping(unvalidatedPresenceMapping, "presenceMapping");
+  validateNoDuplicateKeys(mapping, presenceMapping);
+  return (set, get, api) => {
+    const typedSet = set;
+    let room = null;
+    let isPatching = false;
+    let storageRoot = null;
+    let unsubscribeCallbacks = [];
+    const store = config((args) => {
+      const oldState = get();
+      set(args);
+      const newState = get();
+      if (room) {
+        isPatching = true;
+        updatePresence(room, oldState, newState, presenceMapping);
+        room.batch(() => {
+          if (storageRoot) {
+            patchLiveblocksStorage(storageRoot, oldState, newState, mapping);
+          }
+        });
+        isPatching = false;
+      }
+    }, get, api);
+    function enterRoom(roomId, initialState) {
+      if (storageRoot) {
+        return;
+      }
+      room = client.enter(roomId);
+      updateZustandLiveblocksState(set, { isStorageLoading: true, room });
+      const state = get();
+      broadcastInitialPresence(room, state, presenceMapping);
+      unsubscribeCallbacks.push(room.subscribe("others", (others) => {
+        updateZustandLiveblocksState(set, { others: others.toArray() });
+      }));
+      unsubscribeCallbacks.push(room.subscribe("connection", () => {
+        updateZustandLiveblocksState(set, {
+          connection: room.getConnectionState()
+        });
+      }));
+      room.getStorage().then(({ root }) => {
+        const updates = {};
+        room.batch(() => {
+          for (const key in mapping) {
+            const liveblocksStatePart = root.get(key);
+            if (liveblocksStatePart == null) {
+              updates[key] = initialState[key];
+              patchLiveObjectKey(root, key, void 0, initialState[key]);
+            } else {
+              updates[key] = liveNodeToJson(liveblocksStatePart);
+            }
+          }
+        });
+        typedSet(updates);
+        storageRoot = root;
+        unsubscribeCallbacks.push(room.subscribe(root, (updates2) => {
+          if (isPatching === false) {
+            set(patchState(get(), updates2, mapping));
+          }
+        }, { isDeep: true }));
+        updateZustandLiveblocksState(set, { isStorageLoading: false });
+      });
+    }
+    function leaveRoom(roomId) {
+      for (const unsubscribe of unsubscribeCallbacks) {
+        unsubscribe();
+      }
+      storageRoot = null;
+      room = null;
+      isPatching = false;
+      unsubscribeCallbacks = [];
+      client.leave(roomId);
+      updateZustandLiveblocksState(set, {
+        others: [],
+        connection: "closed",
+        isStorageLoading: false,
+        room: null
+      });
+    }
+    return __spreadProps(__spreadValues({}, store), {
+      liveblocks: {
+        enterRoom,
+        leaveRoom,
+        room: null,
+        others: [],
+        connection: "closed",
+        isStorageLoading: false
+      }
+    });
+  };
+};
+function patchState(state, updates, mapping) {
+  const partialState = {};
+  for (const key in mapping) {
+    partialState[key] = state[key];
+  }
+  const patched = patchImmutableObject(partialState, updates);
+  const result = {};
+  for (const key in mapping) {
+    result[key] = patched[key];
+  }
+  return result;
+}
+function updateZustandLiveblocksState(set, partial) {
+  set((state) => ({ liveblocks: __spreadValues(__spreadValues({}, state.liveblocks), partial) }));
+}
+function broadcastInitialPresence(room, state, mapping) {
+  for (const key in mapping) {
+    room == null ? void 0 : room.updatePresence({ [key]: state[key] });
+  }
+}
+function updatePresence(room, oldState, newState, presenceMapping) {
+  for (const key in presenceMapping) {
+    if (oldState[key] !== newState[key]) {
+      room.updatePresence({ [key]: newState[key] });
+    }
+  }
+}
+function patchLiveblocksStorage(root, oldState, newState, mapping) {
+  for (const key in mapping) {
+    if (oldState[key] !== newState[key]) {
+      patchLiveObjectKey(root, key, oldState[key], newState[key]);
+    }
+  }
+}
+function isObject(value) {
+  return Object.prototype.toString.call(value) === "[object Object]";
+}
+function validateNoDuplicateKeys(storageMapping, presenceMapping) {
+  for (const key in storageMapping) {
+    if (presenceMapping[key] !== void 0) {
+      throw new Error(`${ERROR_PREFIX} "${key}" is mapped on presenceMapping and storageMapping. A key shouldn't exist on both mapping.`);
+    }
+  }
+}
+function validateMapping(mapping, mappingType) {
+  if (mapping == null) {
+    throw new Error(`${ERROR_PREFIX} ${mappingType} is missing.`);
+  }
+  if (!isObject(mapping)) {
+    throw new Error(`${ERROR_PREFIX} ${mappingType} should be an object where the values are boolean.`);
+  }
+  const result = {};
+  for (const key in mapping) {
+    if (typeof mapping[key] !== "boolean") {
+      throw new Error(`${ERROR_PREFIX} ${mappingType}.${key} value should be a boolean`);
+    }
+    if (mapping[key] === true) {
+      result[key] = true;
+    }
+  }
+  return result;
+}
+const ERROR_PREFIX = "Invalid @liveblocks/zustand middleware config.";
+
+export { middleware };

package/lib/index.d.ts

@@ -0,0 +1,20 @@
+import { StateCreator, SetState, GetState, StoreApi } from "zustand";
+import { Client, User, Room } from "@liveblocks/client";
+export declare type LiveblocksState<TState, TPresence = any> = TState & {
+    readonly liveblocks: {
+        readonly enterRoom: (room: string, initialState: Partial<TState>) => void;
+        readonly leaveRoom: (room: string) => void;
+        readonly room: Room | null;
+        readonly others: Array<User<TPresence>>;
+        readonly isStorageLoading: boolean;
+        readonly connection: "closed" | "authenticating" | "unavailable" | "failed" | "open" | "connecting";
+    };
+};
+export declare type Mapping<T> = Partial<{
+    [Property in keyof T]: boolean;
+}>;
+export declare const middleware: <T extends Object, TPresence extends Object = any>(config: StateCreator<T, SetState<T>, GetState<LiveblocksState<T>>, StoreApi<T>>, options: {
+    client: Client;
+    storageMapping: Mapping<T>;
+    presenceMapping?: Mapping<T>;
+}) => StateCreator<LiveblocksState<T, TPresence>, SetState<LiveblocksState<T, TPresence>>, GetState<LiveblocksState<T, TPresence>>, StoreApi<LiveblocksState<T, TPresence>>>;

package/lib/index.js

@@ -0,0 +1,272 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var client = require('@liveblocks/client');
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var middleware = function middleware(config, _ref) {
+  var client$1 = _ref.client,
+      unvalidatedMapping = _ref.storageMapping,
+      _ref$presenceMapping = _ref.presenceMapping,
+      unvalidatedPresenceMapping = _ref$presenceMapping === void 0 ? {} : _ref$presenceMapping;
+
+  if (client$1 == null) {
+    throw new Error(ERROR_PREFIX + " client is missing");
+  }
+
+  var mapping = validateMapping(unvalidatedMapping, "storageMapping");
+  var presenceMapping = validateMapping(unvalidatedPresenceMapping, "presenceMapping");
+  validateNoDuplicateKeys(mapping, presenceMapping);
+  return function (set, get, api) {
+    var typedSet = set;
+    var room = null;
+    var isPatching = false;
+    var storageRoot = null;
+    var unsubscribeCallbacks = [];
+    var store = config(function (args) {
+      var oldState = get();
+      set(args);
+      var newState = get();
+
+      if (room) {
+        isPatching = true;
+        updatePresence(room, oldState, newState, presenceMapping);
+        room.batch(function () {
+          if (storageRoot) {
+            patchLiveblocksStorage(storageRoot, oldState, newState, mapping);
+          }
+        });
+        isPatching = false;
+      }
+    }, get, api);
+
+    function enterRoom(roomId, initialState) {
+      if (storageRoot) {
+        return;
+      }
+
+      room = client$1.enter(roomId);
+      updateZustandLiveblocksState(set, {
+        isStorageLoading: true,
+        room: room
+      });
+      var state = get();
+      broadcastInitialPresence(room, state, presenceMapping);
+      unsubscribeCallbacks.push(room.subscribe("others", function (others) {
+        updateZustandLiveblocksState(set, {
+          others: others.toArray()
+        });
+      }));
+      unsubscribeCallbacks.push(room.subscribe("connection", function () {
+        updateZustandLiveblocksState(set, {
+          connection: room.getConnectionState()
+        });
+      }));
+      room.getStorage().then(function (_ref2) {
+        var root = _ref2.root;
+        var updates = {};
+        room.batch(function () {
+          for (var key in mapping) {
+            var liveblocksStatePart = root.get(key);
+
+            if (liveblocksStatePart == null) {
+              updates[key] = initialState[key];
+              client.patchLiveObjectKey(root, key, undefined, initialState[key]);
+            } else {
+              updates[key] = client.liveNodeToJson(liveblocksStatePart);
+            }
+          }
+        });
+        typedSet(updates);
+        storageRoot = root;
+        unsubscribeCallbacks.push(room.subscribe(root, function (updates) {
+          if (isPatching === false) {
+            set(patchState(get(), updates, mapping));
+          }
+        }, {
+          isDeep: true
+        }));
+        updateZustandLiveblocksState(set, {
+          isStorageLoading: false
+        });
+      });
+    }
+
+    function leaveRoom(roomId) {
+      for (var _iterator = _createForOfIteratorHelperLoose(unsubscribeCallbacks), _step; !(_step = _iterator()).done;) {
+        var unsubscribe = _step.value;
+        unsubscribe();
+      }
+
+      storageRoot = null;
+      room = null;
+      isPatching = false;
+      unsubscribeCallbacks = [];
+      client$1.leave(roomId);
+      updateZustandLiveblocksState(set, {
+        others: [],
+        connection: "closed",
+        isStorageLoading: false,
+        room: null
+      });
+    }
+
+    return _extends({}, store, {
+      liveblocks: {
+        enterRoom: enterRoom,
+        leaveRoom: leaveRoom,
+        room: null,
+        others: [],
+        connection: "closed",
+        isStorageLoading: false
+      }
+    });
+  };
+};
+
+function patchState(state, updates, mapping) {
+  var partialState = {};
+
+  for (var key in mapping) {
+    partialState[key] = state[key];
+  }
+
+  var patched = client.patchImmutableObject(partialState, updates);
+  var result = {};
+
+  for (var _key in mapping) {
+    result[_key] = patched[_key];
+  }
+
+  return result;
+}
+
+function updateZustandLiveblocksState(set, partial) {
+  set(function (state) {
+    return {
+      liveblocks: _extends({}, state.liveblocks, partial)
+    };
+  });
+}
+
+function broadcastInitialPresence(room, state, mapping) {
+  for (var key in mapping) {
+    var _room$updatePresence;
+
+    room == null ? void 0 : room.updatePresence((_room$updatePresence = {}, _room$updatePresence[key] = state[key], _room$updatePresence));
+  }
+}
+
+function updatePresence(room, oldState, newState, presenceMapping) {
+  for (var key in presenceMapping) {
+    if (oldState[key] !== newState[key]) {
+      var _room$updatePresence2;
+
+      room.updatePresence((_room$updatePresence2 = {}, _room$updatePresence2[key] = newState[key], _room$updatePresence2));
+    }
+  }
+}
+
+function patchLiveblocksStorage(root, oldState, newState, mapping) {
+  for (var key in mapping) {
+    if (oldState[key] !== newState[key]) {
+      client.patchLiveObjectKey(root, key, oldState[key], newState[key]);
+    }
+  }
+}
+
+function isObject(value) {
+  return Object.prototype.toString.call(value) === "[object Object]";
+}
+
+function validateNoDuplicateKeys(storageMapping, presenceMapping) {
+  for (var key in storageMapping) {
+    if (presenceMapping[key] !== undefined) {
+      throw new Error(ERROR_PREFIX + " \"" + key + "\" is mapped on presenceMapping and storageMapping. A key shouldn't exist on both mapping.");
+    }
+  }
+}
+
+function validateMapping(mapping, mappingType) {
+  if (mapping == null) {
+    throw new Error(ERROR_PREFIX + " " + mappingType + " is missing.");
+  }
+
+  if (!isObject(mapping)) {
+    throw new Error(ERROR_PREFIX + " " + mappingType + " should be an object where the values are boolean.");
+  }
+
+  var result = {};
+
+  for (var key in mapping) {
+    if (typeof mapping[key] !== "boolean") {
+      throw new Error(ERROR_PREFIX + " " + mappingType + "." + key + " value should be a boolean");
+    }
+
+    if (mapping[key] === true) {
+      result[key] = true;
+    }
+  }
+
+  return result;
+}
+
+var ERROR_PREFIX = "Invalid @liveblocks/zustand middleware config.";
+
+exports.middleware = middleware;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@liveblocks/zustand",
+  "version": "0.15.0-alpha.1",
+  "description": "",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "module": "./lib/esm/index.js",
+      "import": "./lib/esm/index.mjs",
+      "default": "./lib/index.js"
+    }
+  },
+  "keywords": [
+    "zustand",
+    "react",
+    "liveblocks",
+    "multiplayer",
+    "live-cursors",
+    "collaborative"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --watch",
+    "dtslint": "dtslint --localTs node_modules/typescript/lib --expectOnly types"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liveblocks/liveblocks.git",
+    "directory": "packages/liveblocks-zustand"
+  },
+  "peerDependencies": {
+    "@liveblocks/client": "0.15.0-alpha.1",
+    "zustand": "^3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-typescript": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@definitelytyped/dtslint": "^0.0.103",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.4.0",
+    "esbuild": "0.14.11",
+    "jest": "^27.4.7",
+    "msw": "^0.36.4",
+    "rollup": "^2.64.0",
+    "rollup-plugin-esbuild": "^4.8.2",
+    "whatwg-fetch": "^3.6.2",
+    "zustand": "^3.6.9"
+  }
+}