cleanups

- update dependencies
- ignore `.partykit` folder
- use `usePartySocket`
- pass lint
- add `.prettierrc`

.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 .vercel
 
-.env
+.env
+.partykit 

.prettierrc

@@ -0,0 +1,5 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"semi": false
+}

package.json

@@ -13,22 +13,22 @@
   },
   "dependencies": {
     "@tldraw/tldraw": "^2.0.0-canary.f7ae99dd1fc9",
-    "partykit": "^0.0.27",
-    "partysocket": "^0.0.17",
+    "partykit": "^0.0.59",
+    "partysocket": "^0.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "concurrently": "^8.2.0",
-    "eslint": "^8.45.0",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   }
 }

src/useSyncStore.ts

@@ -9,7 +9,7 @@ import {
 	uniqueId,
 } from '@tldraw/tldraw'
 import { useEffect, useState } from 'react'
-import PartySocket from 'partysocket'
+import { usePartySocket } from 'partysocket/react'
 
 const clientId = uniqueId()
 
@@ -34,12 +34,12 @@ export function useSyncStore({
 		status: 'loading',
 	})
 
-	useEffect(() => {
-		const socket = new PartySocket({
-			host: hostUrl,
-			room: `${roomId}_${version}`,
-		})
+	const socket = usePartySocket({
+		host: hostUrl,
+		room: `${roomId}_${version}`,
+	})
 
+	useEffect(() => {
 		setStoreWithStatus({ status: 'loading' })
 
 		const unsubs: (() => void)[] = []
@@ -161,7 +161,7 @@ export function useSyncStore({
 			unsubs.length = 0
 			socket.close()
 		}
-	}, [store])
+	}, [socket, store])
 
 	return storeWithStatus
 }