Release 0.1.1: Merge branch 'hotfix-0.1.1'

Author: codefrau

package-lock.json

@@ -18,7 +18,7 @@
     "clean": "rm -rf node_modules dist"
   },
   "dependencies": {
-    "react-together": "^0.1.0"
+    "react-together": "^0.1.1"
   },
   "peerDependencies": {
     "primereact": "^10.6.6"

packages/react-together-primereact/package.json

@@ -1,5 +1,12 @@
+## 0.1.1
+`2024-08-31`
+
+ - Fixed bugs on `useStateTogether`
+ - Fixed bugs on `useStateTogetherWithPerUserValues`
+
 ## 0.1.0
 `2024-08-28`
+
  - Optimize `useStateTogether` and `useStateTogetherWithPerUserValues` to minimize unnecessary re-rendering
  - `useConnectedViews` does not return `null`
  - Allow to override the session model via `sessionParams.model` prop of the `<ReactTogether/>` component

packages/react-together/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "react-together",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/react-together/package.json

@@ -34,9 +34,16 @@ export default function useStateTogether<T>(
   const modelValue = model?.state.get(rtKey) as T
 
   // This is the local state
-  const [value, set_value] = useState<T>(
-    modelValue !== undefined ? modelValue : initial_value
-  )
+  const [value, set_value] = useState<T>(() => {
+    // This function is only executed on the first render
+    // If there is no value for this key, publish the initial
+    // value
+    if (view && model && !model.state.has(rtKey)) {
+      view.publish(model.id, 'setState', { id: rtKey, newValue: initial_value })
+      return initial_value
+    }
+    return modelValue
+  })
 
   useEffect(() => {
     if (!session || !view || !model) return

packages/react-together/src/hooks/useStateTogether.ts

@@ -21,8 +21,13 @@ export default function useStateTogetherWithPerUserValues<
   T extends NotUndefined
 >(
   rtKey: string,
-  initial_value: T
+  initialValue: T
 ): [T, Dispatch<SetStateAction<T>>, { [id: string]: T }] {
+  // Memorize the first initial value, ignore changes to the
+  // initialValue prop
+  // https://react.dev/reference/react/useState
+  const [actualInitialValue] = useState(initialValue)
+
   const context = useContext(CroquetContext)
   let model: null | ReactTogetherModel = null
   let session: null | Session = null
@@ -35,11 +40,13 @@ export default function useStateTogetherWithPerUserValues<
   }
   const viewId = view?.viewId || ''
   const [allValuesState, setAllValuesState] = useState<{
-    value: Map<string, T>
+    value: { [id: string]: T }
     hash: string
   }>(() => {
-    const value = (model?.stateTogether.get(rtKey) ||
-      new Map([[viewId, initial_value]])) as Map<string, T>
+    const value = mapToObject(
+      (model?.stateTogether.get(rtKey) ||
+        new Map([[viewId, actualInitialValue]])) as Map<string, T>
+    )
     const hash = hash_fn(value)
     return { value, hash }
   })
@@ -50,12 +57,16 @@ export default function useStateTogetherWithPerUserValues<
     if (!session || !view || !model || !viewId) return
 
     const handler = () => {
-      const newValues = model.stateTogether.get(rtKey) as Map<string, T>
+      const newValues = mapToObject(
+        model.stateTogether.get(rtKey) as Map<string, T>
+      )
       const newHash = hash_fn(newValues)
 
-      setAllValuesState((prev) =>
-        prev.hash === newHash ? prev : { value: newValues, hash: newHash }
-      )
+      setAllValuesState((prev) => {
+        return prev.hash === newHash
+          ? prev
+          : { value: newValues, hash: newHash }
+      })
     }
 
     view.subscribe(
@@ -74,7 +85,7 @@ export default function useStateTogetherWithPerUserValues<
     view.publish(model.id, 'setStateTogether', {
       id: rtKey,
       viewId,
-      newValue: initial_value
+      newValue: actualInitialValue
     })
 
     return () => {
@@ -87,9 +98,9 @@ export default function useStateTogetherWithPerUserValues<
 
       view.unsubscribe(rtKey, 'updated', handler)
     }
-  }, [session, view, viewId, model, rtKey, initial_value])
+  }, [session, view, viewId, model, rtKey, actualInitialValue])
 
-  const localValue = allValues.get(viewId) || initial_value
+  const localValue = allValues[viewId] || actualInitialValue
 
   const setter = useCallback(
     (newValueOrFn: SetStateAction<T>): void => {
@@ -112,12 +123,12 @@ export default function useStateTogetherWithPerUserValues<
         // the same state interface
         setAllValuesState((prev) => {
           const { value, hash } = prev
-          const newValue = getNewValue(value.get('')!, newValueOrFn)
+          const newValue = getNewValue(value[viewId]!, newValueOrFn)
           const newHash = hash_fn(newValue)
           if (hash === newHash) {
             return prev
           } else {
-            value.set('', newValue)
+            value[viewId] = newValue
             return { value, hash: newHash }
           }
         })
@@ -126,5 +137,5 @@ export default function useStateTogetherWithPerUserValues<
     [view, viewId, model, rtKey]
   )
 
-  return [localValue, setter, mapToObject(allValues)]
+  return [localValue, setter, allValues]
 }

packages/react-together/src/hooks/useStateTogetherWithPerUserValues.ts

@@ -49,7 +49,10 @@ export default class ReactTogetherModel extends ReactModel {
   }
 
   handleViewExit(viewId: string): void {
-    this.stateTogether.forEach((st) => st.delete(viewId))
+    this.stateTogether.forEach((st, key) => {
+      st.delete(viewId)
+      this.publish(key, 'updated', {})
+    })
   }
 }
 ReactTogetherModel.register('ReactTogetherModel')

packages/react-together/src/models/ReactTogetherModel.ts

@@ -24,7 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.1",
-    "react-together": "^0.1.0",
+    "react-together": "^0.1.1",
     "react-together-primereact": "^0.1.0"
   },
   "devDependencies": {

playground/package.json

@@ -42,7 +42,7 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.25.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react-together": "^0.1.0",
+    "react-together": "^0.1.1",
     "react-together-primereact": "^0.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",

website/package.json

@@ -159,7 +159,7 @@ export default function TinyRpgTogether() {
           {Object.entries(everyonesPosition).map(([viewId, position]) => (
             <div
               className='character absolute bg-blue-500 rounded-full flex items-center justify-center'
-              id={`position-${viewId}`}
+              key={`position-${viewId}`}
               style={{
                 width: `${CELL_SIZE - 4}px`,
                 height: `${CELL_SIZE - 8}px`,