v5.0

package.json

@@ -12,23 +12,23 @@
   },
   "dependencies": {
     "@tsndr/cloudflare-worker-jwt": "^2.5.3",
-    "nanoid": "^5.0.6",
+    "nanoid": "^5.0.7",
     "partysocket": "^1.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tinybase": "4.8.1"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tinybase": "5.0.0"
   },
   "devDependencies": {
-    "@types/react-dom": "^18.2.24",
-    "@types/react": "^18.2.74",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "babel-eslint": "^10.1.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react": "7.34.3",
     "eslint": "^8.57.0",
-    "partykit": "^0.0.103",
-    "typescript": "^5.4.4"
+    "partykit": "^0.0.107",
+    "typescript": "^5.5.3"
   }
 }

src/client/App.tsx

@@ -1,11 +1,11 @@
-import {CLOUD, LOCAL} from './stores/rooms';
-import {UiStore, useUiUsername} from './stores/UiStore';
+import React from 'react';
+import {Provider} from 'tinybase/ui-react';
+import {Inspector} from 'tinybase/ui-react-inspector';
 import {Header} from './components/header/Header';
 import {Main} from './components/main/Main';
-import {Provider} from 'tinybase/debug/ui-react';
-import React from 'react';
+import {CLOUD, LOCAL} from './stores/rooms';
 import {RoomsStore} from './stores/RoomsStore';
-import {StoreInspector} from 'tinybase/debug/ui-react-dom';
+import {UiStore, useUiUsername} from './stores/UiStore';
 import {UserStore} from './stores/UserStore';
 
 export const App = () => {
@@ -21,7 +21,7 @@ export const App = () => {
       <Main />
 
       {/* Debug */}
-      <StoreInspector />
+      <Inspector />
     </Provider>
   );
 };

src/client/_shapes/Shape.tsx

@@ -1,11 +1,11 @@
-import {DRAGGED, SHAPES, useDraggable} from './common';
 import React, {RefObject, useCallback} from 'react';
 import {
   RowProps,
   useRow,
   useSetPartialRowCallback,
   useSetValueCallback,
-} from 'tinybase/debug/ui-react';
+} from 'tinybase/ui-react';
+import {DRAGGED, SHAPES, useDraggable} from './common';
 
 export const Shape = ({rowId}: RowProps) => {
   const {x, y, w, h, color} = useRow(SHAPES, rowId);

src/client/_shapes/Shapes.tsx

@@ -1,13 +1,13 @@
-import {DRAGGED, SHAPES} from './common';
 import React, {useRef} from 'react';
+import {nanoid} from 'nanoid';
 import {
   TableView,
   useHasTable,
   useSetRowCallback,
   useValue,
-} from 'tinybase/debug/ui-react';
+} from 'tinybase/ui-react';
+import {DRAGGED, SHAPES} from './common';
 import {Shape} from './Shape';
-import {nanoid} from 'nanoid';
 
 const random = (from: number, to: number) =>
   from + Math.floor(Math.random() * (to - from));

src/client/components/main/room/Room.tsx

@@ -1,3 +1,6 @@
+import React from 'react';
+import {useHasValues} from 'tinybase/ui-react';
+import {FORBIDDEN} from '../../../common';
 import {
   CREATING,
   LOCAL,
@@ -6,12 +9,9 @@ import {
   useRoomType,
 } from '../../../stores/rooms';
 import {useUiOnline, useUiRoomId, useUiUsername} from '../../../stores/UiStore';
-import {FORBIDDEN} from '../../../common';
-import React from 'react';
+import {RoomJoin} from '../sidebar/RoomJoin';
 import {RoomBody} from './RoomBody';
 import {RoomHeader} from './RoomHeader';
-import {RoomJoin} from '../sidebar/RoomJoin';
-import {useHasValues} from 'tinybase/debug/ui-react';
 
 export const Room = () => {
   const roomId = useUiRoomId();

src/client/components/main/room/RoomBody.tsx

@@ -1,5 +1,5 @@
-import {Provider} from 'tinybase/debug/ui-react';
 import React from 'react';
+import {Provider} from 'tinybase/ui-react';
 import {Shapes} from '../../../_shapes/Shapes';
 import {useRoomStore} from '../../../stores/rooms';
 

src/client/stores/RoomStore.tsx

@@ -1,16 +1,16 @@
+import React from 'react';
+import {createStore} from 'tinybase';
+import {useCreateStore, useProvideStore} from 'tinybase/ui-react';
+import {EditableValueView} from 'tinybase/ui-react-dom';
+import {NAME_VALUE} from '../../common';
+import {usePersisters} from '../common';
 import {
   CLOUD,
   CLOUD_ROOM_STORE_PARTY,
-  RoomType,
   getRoomStoreId,
+  RoomType,
   useRoomSetStateCallback,
 } from './rooms';
-import {useCreateStore, useProvideStore} from 'tinybase/debug/ui-react';
-import {EditableValueView} from 'tinybase/debug/ui-react-dom';
-import {NAME_VALUE} from '../../common';
-import React from 'react';
-import {createStore} from 'tinybase';
-import {usePersisters} from '../common';
 
 export const RoomStore = ({
   roomType,

src/client/stores/RoomsStore.tsx

@@ -1,20 +1,16 @@
+import React from 'react';
+import {createStore} from 'tinybase';
+import {useCreateStore, useProvideStore, useRowIds} from 'tinybase/ui-react';
+import {ROOMS_TABLE} from '../../common';
+import {usePersisters} from '../common';
 import {
   CLOUD,
   CLOUD_ROOMS_STORE_PARTY,
+  getRoomsStoreId,
   INITIAL_JSON_CELL,
   RoomType,
-  getRoomsStoreId,
 } from './rooms';
-import {
-  useCreateStore,
-  useProvideStore,
-  useRowIds,
-} from 'tinybase/debug/ui-react';
-import {ROOMS_TABLE} from '../../common';
-import React from 'react';
 import {RoomStore} from './RoomStore';
-import {createStore} from 'tinybase';
-import {usePersisters} from '../common';
 import {useUiUsername} from './UiStore';
 
 /**

src/client/stores/UiStore.tsx

@@ -1,13 +1,13 @@
 import {useCallback, useEffect} from 'react';
+import {createStore} from 'tinybase';
 import {
   useCreateStore,
   useDelValueCallback,
   useProvideStore,
   useSetValueCallback,
   useValue,
   useValueListener,
-} from 'tinybase/debug/ui-react';
-import {createStore} from 'tinybase';
+} from 'tinybase/ui-react';
 import {getConnection} from '../common';
 
 const UI_STORE_ID = 'ui';

src/client/stores/UserStore.tsx

@@ -1,13 +1,9 @@
 import React, {MouseEventHandler, useCallback} from 'react';
+import {createStore} from 'tinybase';
+import {useCreateStore, useProvideStore, useValue} from 'tinybase/ui-react';
+import {EditableValueView} from 'tinybase/ui-react-dom';
 import {redirect, usePersisters} from '../common';
-import {
-  useCreateStore,
-  useProvideStore,
-  useValue,
-} from 'tinybase/debug/ui-react';
 import {useUiDelUsernameCallback, useUiUsername} from './UiStore';
-import {EditableValueView} from 'tinybase/debug/ui-react-dom';
-import {createStore} from 'tinybase';
 
 const USER_STORE_ID = 'user';
 

src/client/stores/rooms.ts

@@ -1,3 +1,17 @@
+import {useCallback} from 'react';
+import {nanoid} from 'nanoid';
+import {Row} from 'tinybase';
+import {
+  useCell,
+  useDelRowCallback,
+  useDelTableCallback,
+  useHasRow,
+  useRowIds,
+  useSetCellCallback,
+  useSetValueCallback,
+  useStore,
+  useValue,
+} from 'tinybase/ui-react';
 import {
   CREATED_CELL,
   NAME_VALUE,
@@ -10,20 +24,6 @@ import {
   VISIBILITY_VALUE,
 } from '../../common';
 import {ConnectionState, FORBIDDEN, OPEN} from '../common';
-import {
-  useCell,
-  useDelRowCallback,
-  useDelTableCallback,
-  useHasRow,
-  useRowIds,
-  useSetCellCallback,
-  useSetValueCallback,
-  useStore,
-  useValue,
-} from 'tinybase/debug/ui-react';
-import {Row} from 'tinybase';
-import {nanoid} from 'nanoid';
-import {useCallback} from 'react';
 import {useUiSetRoomIdCallback} from './UiStore';
 
 export type RoomState = ConnectionState | typeof CREATING;

src/server/RoomServer.ts

@@ -1,24 +1,24 @@
 import {
-  Request as CfRequest,
   Connection,
   ConnectionContext,
   Lobby,
   Party,
+  Request as CfRequest,
 } from 'partykit/server';
+import {Id, Value} from 'tinybase';
+import {
+  broadcastChanges,
+  TinyBasePartyKitServer,
+  TinyBasePartyKitServerConfig,
+} from 'tinybase/persisters/persister-partykit-server';
 import {
   FORBIDDEN_CODE,
   FORBIDDEN_MESSAGE,
   OWNER_VALUE,
   PUBLIC,
   VISIBILITY_VALUE,
 } from '../common';
-import {Id, Value} from 'tinybase';
 import {MESSAGE_PREFIX, STORAGE_PREFIX, STORE_PATH} from '../config';
-import {
-  TinyBasePartyKitServer,
-  TinyBasePartyKitServerConfig,
-  broadcastTransactionChanges,
-} from 'tinybase/persisters/persister-partykit-server';
 import {getTokenContent, newResponse} from './common';
 
 /**
@@ -117,7 +117,7 @@ const getPolicy = async (that: RoomServer, request?: CfRequest) => {
     await that.party.storage.put(getValueStorageKey(OWNER_VALUE), username);
     owner = username;
     setTimeout(
-      () => broadcastTransactionChanges(that, [{}, {owner} as {owner: string}]),
+      () => broadcastChanges(that, [{}, {owner} as {owner: string}, 1]),
       100,
     );
   }