perf: add serializer to hydrate

Author: christopher-buss

package.json

@@ -28,6 +28,7 @@
 		"@flamework/components": "1.2.3",
 		"@flamework/core": "1.2.3",
 		"@flamework/networking": "1.2.3",
+		"@rbxts/flamework-binary-serializer": "0.6.0",
 		"@rbxts/inspect": "1.0.1",
 		"@rbxts/janitor": "1.16.0-ts.0",
 		"@rbxts/lapis": "0.3.3",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ import { createBroadcastReceiver } from "@rbxts/reflex";
 import { Events } from "client/network";
 import { $NODE_ENV } from "rbxts-transform-env";
 import { IS_EDIT } from "shared/constants";
+import { stateSerDes } from "shared/store";
 
 /**
  * A middleware that listens for actions dispatched from the server and
@@ -28,7 +29,7 @@ export function receiverMiddleware(): ProducerMiddleware {
 	});
 
 	Events.store.hydrate.connect(state => {
-		receiver.hydrate(state);
+		receiver.hydrate(stateSerDes.deserialize(state.buffer, state.blobs));
 	});
 
 	return receiver.middleware;

src/client/store/middleware/receiver.ts

@@ -5,8 +5,8 @@ import { Players } from "@rbxts/services";
 import { $NODE_ENV } from "rbxts-transform-env";
 import { Events } from "server/network";
 import { IS_EDIT } from "shared/constants";
-import type { SharedState } from "shared/store";
-import { slices } from "shared/store";
+import type { SerializedSharedState, SharedState } from "shared/store";
+import { slices, stateSerDes } from "shared/store";
 
 export const ONCE_PER_MINUTE = 60;
 
@@ -39,13 +39,16 @@ export function broadcasterMiddleware(): ProducerMiddleware {
 
 function beforeHydrate(hydrated: Set<number>): (player: Player, state: SharedState) => SharedState {
 	return (player: Player, state: SharedState) => {
+		// The cast is necessary due to the typings of the reflex library.
+		const serialized = stateSerDes.serialize(state) as unknown as SharedState;
+
 		const isInitialHydrate = !hydrated.has(player.UserId);
 		if (!isInitialHydrate) {
-			return state;
+			return serialized;
 		}
 
 		hydrated.add(player.UserId);
-		return state;
+		return serialized;
 	};
 }
 
@@ -54,5 +57,6 @@ function dispatch(player: Player, actions: Array<BroadcastAction>): void {
 }
 
 function hydrate(player: Player, state: SharedState): void {
-	Events.store.hydrate.fire(player, state);
+	// The cast is necessary due to the typings of the reflex library.
+	Events.store.hydrate.fire(player, state as unknown as SerializedSharedState);
 }

src/server/store/middleware/broadcaster.ts

@@ -1,7 +1,7 @@
 import { Networking } from "@flamework/networking";
 import type { BroadcastAction } from "@rbxts/reflex";
 
-import type { SharedState } from "./store";
+import type { SerializedSharedState } from "./store";
 
 /** Fired by client to server. */
 interface ClientToServerEvents {
@@ -23,7 +23,7 @@ interface ServerToClientEvents {
 		 * @param actions - The actions to send to the client.
 		 */
 		dispatch: (actions: Array<BroadcastAction>) => void;
-		hydrate: (state: SharedState) => void;
+		hydrate: (state: SerializedSharedState) => void;
 	};
 }
 

src/shared/network.ts

@@ -1,8 +1,12 @@
+import { createBinarySerializer } from "@rbxts/flamework-binary-serializer";
 import type { CombineStates } from "@rbxts/reflex";
 
 import { persistentSlice } from "./persistent/persistent-slice";
 
 export type SharedState = CombineStates<typeof slices>;
+export type SerializedSharedState = ReturnType<typeof stateSerDes.serialize>;
+
+export const stateSerDes = createBinarySerializer<SharedState>();
 
 export const slices = {
 	persistent: persistentSlice,