Merge branch 'feat-multisynq-react' into develop

Author: codefrau

package-lock.json

@@ -26,7 +26,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@croquet/react": "^2.3.0-1",
+    "@multisynq/react": "^1.0.0",
     "object-hash": "^3.0.0",
     "primeicons": "^7.0.0",
     "qrcode.react": "^3.1.0"

packages/react-together/package.json

@@ -1,4 +1,4 @@
-import { CroquetRoot } from '@croquet/react'
+import { MultisynqRoot } from '@multisynq/react'
 import { ReactTogetherContext } from '../context'
 import ReactTogetherModel from '../models/ReactTogetherModel'
 import { deriveNickname as defaultDeriveNickname } from '../utils'
@@ -74,7 +74,7 @@ export default function ReactTogether<D>({
   }
 
   return (
-    <CroquetRoot
+    <MultisynqRoot
       sessionParams={{
         model,
         name,
@@ -90,6 +90,6 @@ export default function ReactTogether<D>({
       <ReactTogetherContext.Provider value={{ deriveNickname, rememberUsers }}>
         {children}
       </ReactTogetherContext.Provider>
-    </CroquetRoot>
+    </MultisynqRoot>
   )
 }

packages/react-together/src/components/ReactTogether.tsx

@@ -12,23 +12,24 @@ import useNicknames from './useNicknames'
 import useStateTogether from './useStateTogether'
 import useStateTogetherWithPerUserValues from './useStateTogetherWithPerUserValues'
 
-// Create hook alias from @croquet/react
-import { useIsJoined } from '@croquet/react'
+// Create hook alias from @multisynq/react
+import { useIsJoined } from '@multisynq/react'
 const useIsTogether = useIsJoined
 
 export {
-  useAllNicknames,
-  useChat,
-  useConnectedUsers,
-  useCreateRandomSession,
-  useCursors,
-  useFunctionTogether,
-  useHoveringUsers,
-  useIsTogether,
-  useJoinUrl,
-  useLeaveSession,
-  useMyId,
-  useNicknames,
-  useStateTogether,
-  useStateTogetherWithPerUserValues
+    useAllNicknames,
+    useChat,
+    useConnectedUsers,
+    useCreateRandomSession,
+    useCursors,
+    useFunctionTogether,
+    useHoveringUsers,
+    useIsTogether,
+    useJoinUrl,
+    useLeaveSession,
+    useMyId,
+    useNicknames,
+    useStateTogether,
+    useStateTogetherWithPerUserValues
 }
+

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

@@ -1,4 +1,4 @@
-import { useCroquetContext, usePublish } from '@croquet/react'
+import { useMultisynqContext, usePublish } from '@multisynq/react'
 import { useCallback, useEffect, useState } from 'react'
 import { ChatMessage } from '../components/Chat'
 import ReactTogetherModel, { getChat } from '../models/ReactTogetherModel'
@@ -8,7 +8,7 @@ const EMPTY_ARRAY: ChatMessage[] = []
 
 export default function useChat(rtKey: string) {
   const myId = useMyId()
-  const { view, model } = useCroquetContext<ReactTogetherModel>()
+  const { view, model } = useMultisynqContext<ReactTogetherModel>()
 
   const [messages, setMessages] = useState<ChatMessage[]>(() => {
     if (!model) return EMPTY_ARRAY

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

@@ -1,4 +1,4 @@
-import { useJoinedViews as ujv, useModelRoot } from '@croquet/react'
+import { useJoinedViews as ujv, useModelRoot } from '@multisynq/react'
 import ReactTogetherModel from '../models/ReactTogetherModel'
 import useAllNicknames from './useAllNicknames'
 import useMyId from './useMyId'

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

@@ -1,4 +1,4 @@
-import { App, useSetSession } from '@croquet/react'
+import { App, useSetSession } from '@multisynq/react'
 import { useCallback } from 'react'
 
 export default function useCreateRandomSession() {

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

@@ -1,10 +1,10 @@
-import { useCroquetContext } from '@croquet/react'
+import { useMultisynqContext } from '@multisynq/react'
 import { useCallback, useEffect } from 'react'
 
 export default function useFunctionTogether<
   T extends (...args: Parameters<T>) => void
 >(rtKey: string, callback: T): T {
-  const { view, model } = useCroquetContext()
+  const { view, model } = useMultisynqContext()
 
   useEffect(() => {
     if (view) {

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

@@ -1,4 +1,4 @@
-import { useSessionParams } from '@croquet/react'
+import { useSessionParams } from '@multisynq/react'
 import { useMemo } from 'react'
 import { useIsTogether } from '.'
 import { getJoinUrl } from '../utils'

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

@@ -1,4 +1,4 @@
-import { useLeaveSession as uls } from '@croquet/react'
+import { useLeaveSession as uls } from '@multisynq/react'
 import { useCallback } from 'react'
 import { getCleanUrl } from '../utils'
 

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

@@ -1,4 +1,4 @@
-import { useModelRoot, useViewId } from '@croquet/react'
+import { useModelRoot, useViewId } from '@multisynq/react'
 import ReactTogetherModel, { getUserId } from '../models/ReactTogetherModel'
 
 export default function useMyId() {

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

@@ -1,10 +1,10 @@
-import { useCroquetContext } from '@croquet/react'
+import { useMultisynqContext } from '@multisynq/react'
 import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useEffect,
+    useState
 } from 'react'
 import ReactTogetherModel from '../models/ReactTogetherModel'
 import getNewValue from './getNewValue'
@@ -29,7 +29,7 @@ export default function useStateTogether<T>(
   // If no session is active, it behaves like a normal useState hook,
   // maintaining local state only.
 
-  const { session, view, model } = useCroquetContext<ReactTogetherModel>()
+  const { session, view, model } = useMultisynqContext<ReactTogetherModel>()
 
   const [value, set_value] = useState<T>(() => {
     // This function runs only during the initial render.

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

@@ -1,11 +1,11 @@
-import { useCroquetContext } from '@croquet/react'
+import { useMultisynqContext } from '@multisynq/react'
 import hash_fn, { NotUndefined } from 'object-hash'
 import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useEffect,
+    useState
 } from 'react'
 import ReactTogetherModel from '../models/ReactTogetherModel'
 import getNewValue from './getNewValue'
@@ -129,7 +129,7 @@ export default function useStateTogetherWithPerUserValues<
   // https://react.dev/reference/react/useState
   const [actualInitialValue] = useState(initialValue)
 
-  const { session, view, model } = useCroquetContext<ReactTogetherModel>()
+  const { session, view, model } = useMultisynqContext<ReactTogetherModel>()
   const myId = useMyId()
 
   const [allValuesState, setAllValuesState] = useState<LocalState<T>>(() => {

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

@@ -1,9 +1,10 @@
-// Re-export @croquet/react as is into CroquetReact
-// export type { CroquetSession, CroquetSessionParameters } from '@croquet/react'
-import * as CroquetReact from '@croquet/react'
-export { CroquetReact }
+// Re-export @multisynq/react as is into MultisynqReact
+// export type { MultisynqSession, MultisynqSessionParameters } from '@multisynq/react'
+import * as MultisynqReact from '@multisynq/react'
+export { MultisynqReact }
 
 export * from './components'
 export * from './hooks'
 export * from './models'
 export * as utils from './utils'
+

packages/react-together/src/index.ts

@@ -1,4 +1,4 @@
-import { ReactModel } from '@croquet/react'
+import { ReactModel } from '@multisynq/react'
 import { ChatMessage } from '../components/Chat'
 
 interface SendMessageArgs {

packages/react-together/src/models/ChatModel.tsx

@@ -1,4 +1,4 @@
-import { ReactModel, ViewInfo } from '@croquet/react'
+import { ReactModel, ViewInfo } from '@multisynq/react'
 import { UseStateTogetherWithPerUserValuesOptions } from '../hooks/useStateTogetherWithPerUserValues'
 import ChatModel from './ChatModel'
 

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

@@ -18,7 +18,7 @@ export default defineConfig({
       external: (id) =>
         [
           'react',
-          '@croquet',
+          '@multisynq',
           'color-hash',
           'object-hash',
           'primereact',

packages/react-together/vite.config.ts

@@ -1,8 +1,8 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 import { CELL_SIZE } from '../constants'
 import { OverrideModel } from '../models'
 
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 export default function Board() {
   const GRID_HEIGHT =

playground/src/tinyRpg/components/Board.tsx

@@ -1,9 +1,9 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 import { Coin } from '../components'
 import { OverrideModel } from '../models'
 import { numberToPosition } from '../models/TinyRpgModel'
 
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 export default function Coins() {
   const coins = useModelSelector((model: OverrideModel) =>

playground/src/tinyRpg/components/Coins.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import { CroquetReact, useMyId, useStateTogether } from 'react-together'
+import { MultisynqReact, useMyId, useStateTogether } from 'react-together'
 import { OverrideModel } from '../models'
 import TinyRpgTogether from './TinyRpgTogether'
 
-const { useModelRoot, usePublish, useSubscribe } = CroquetReact
+const { useModelRoot, usePublish, useSubscribe } = MultisynqReact
 
 export function MultipleModels() {
   const [count, setCount] = useStateTogether('count', 0)
@@ -20,7 +20,7 @@ export function MultipleModels() {
       <div className="flex justify-center gap-5 mt-5">
         <div>
           <h6>
-            <pre>Croquet.Model </pre>Auto-Counter
+            <pre>Multisynq.Model </pre>Auto-Counter
           </h6>
           <div className="text-xs text-neutral-500">Click to reset</div>
           <button className="text-xl" onClick={() => publishReset()}>

playground/src/tinyRpg/components/MultipleModels.tsx

@@ -1,8 +1,8 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 import { CELL_SIZE } from '../constants'
 import { OverrideModel } from '../models'
 
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 const stringToColor = (s: string) => {
   return [

playground/src/tinyRpg/components/Player.tsx

@@ -1,7 +1,7 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 import { OverrideModel } from '../models'
 import Player from './Player'
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 export default function Players() {
   const players = useModelSelector((m: OverrideModel) => [

playground/src/tinyRpg/components/Players.tsx

@@ -1,8 +1,8 @@
-import { CroquetReact, useMyId } from 'react-together'
+import { MultisynqReact, useMyId } from 'react-together'
 import { OverrideModel } from '../models'
 import Label from './Label'
 
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 export default function ScoreLabel() {
   const myId = useMyId()!

playground/src/tinyRpg/components/ScoreLabel.tsx

@@ -1,8 +1,8 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 import { OverrideModel } from '../models'
 import Label from './Label'
 
-const { useModelSelector } = CroquetReact
+const { useModelSelector } = MultisynqReact
 
 export default function TeamScoreLabel() {
   const value = useModelSelector((m: OverrideModel) =>

playground/src/tinyRpg/components/TeamScoreLabel.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from 'react'
-import { CroquetReact, useMyId } from 'react-together'
+import { MultisynqReact, useMyId } from 'react-together'
 import { ArrowButtons, Board, Coins, Players, Scores } from '.'
 import { OverrideModel } from '../models'
 import { MoveArgs } from '../models/TinyRpgModel'
 
-const { useModelSelector, usePublish } = CroquetReact
+const { useModelSelector, usePublish } = MultisynqReact
 
 export default function TinyRpgTogether() {
   // console.log('<TinyRpg/>')

playground/src/tinyRpg/components/TinyRpgTogether.tsx

@@ -1,6 +1,6 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together'
 
-const { Model } = CroquetReact
+const { Model } = MultisynqReact
 
 export default class CounterModel extends Model {
   count: number

playground/src/tinyRpg/models/CounterModel.ts

@@ -1,6 +1,6 @@
-import { CroquetReact } from 'react-together'
+import { MultisynqReact } from 'react-together';
 
-const { ReactModel } = CroquetReact
+const { ReactModel } = MultisynqReact
 
 export type Direction = 'up' | 'down' | 'left' | 'right'
 export type Position = { x: number; y: number }