@colyseus/react 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -3,6 +3,14 @@ let _colyseus_schema = require("@colyseus/schema");
 
 //#region src/schema/createSnapshot.ts
 /**
+* Returns the `@type`-decorated field names for a Schema class,
+* reading from `Symbol.metadata` set by v4's `@type()` decorators.
+*/
+function getSchemaFieldNames(node) {
+	const metadata = node.constructor?.[Symbol.metadata];
+	if (metadata && typeof metadata === "object") return Object.values(metadata).map((f) => f.name);
+}
+/**
 * Builds a reverse lookup map from objects to their refIds.
 */
 function buildObjectToRefIdMap(refs) {
@@ -64,8 +72,9 @@ function createSnapshotForArraySchema(node, previousResult, ctx) {
 function createSnapshotForSchema(node, previousResult, ctx) {
 	const snapshotted = {};
 	let hasChanged = previousResult === void 0;
-	const fieldDefinitions = node._definition?.fields;
-	if (fieldDefinitions) for (const fieldName in fieldDefinitions) {
+	const fieldNames = getSchemaFieldNames(node);
+	if (!fieldNames) throw new Error(`createSnapshotForSchema: no field metadata found on ${node.constructor?.name ?? "unknown"}. Is @colyseus/schema v4 installed?`);
+	for (const fieldName of fieldNames) {
 		const value = node[fieldName];
 		if (typeof value !== "function") {
 			const snapshottedValue = createSnapshot(value, ctx);
@@ -73,15 +82,6 @@ function createSnapshotForSchema(node, previousResult, ctx) {
 			if (!hasChanged && previousResult && previousResult[fieldName] !== snapshottedValue) hasChanged = true;
 		}
 	}
-	else for (const key in node) {
-		if (key.startsWith("_") || key.startsWith("$")) continue;
-		const value = node[key];
-		if (typeof value !== "function") {
-			const snapshottedValue = createSnapshot(value, ctx);
-			snapshotted[key] = snapshottedValue;
-			if (!hasChanged && previousResult && previousResult[key] !== snapshottedValue) hasChanged = true;
-		}
-	}
 	return hasChanged ? snapshotted : previousResult;
 }
 /**
@@ -125,7 +125,14 @@ const subscriptionsByState = /* @__PURE__ */ new WeakMap();
 * Gets or creates a subscription for the given room state.
 * 
 * This function sets up change notification by wrapping the decoder's
-* `triggerChanges` method to notify all subscribed React components.
+* `decode` method to intercept all state changes and notify subscribed
+* React components.
+* 
+* We wrap `decode()` rather than assigning `decoder.triggerChanges` because
+* `triggerChanges` is a single-slot callback that gets unconditionally
+* overwritten by `Callbacks.get()` / `getDecoderStateCallbacks()` on every
+* call. Wrapping `decode()` sidesteps this conflict entirely since it is the
+* sole entry point for both full-state syncs and incremental patches.
 * 
 * @param roomState - The Colyseus room state Schema instance
 * @param decoder - The Colyseus decoder associated with the room
@@ -140,27 +147,30 @@ function getOrCreateSubscription(roomState, decoder) {
 		dirtyRefIds: /* @__PURE__ */ new Set(),
 		parentRefIdMap: /* @__PURE__ */ new Map(),
 		objectToRefId: void 0,
-		cleanupCounter: 0
+		cleanupCounter: 0,
+		originalDecode: decoder.decode
 	};
-	subscription.originalTrigger = decoder.triggerChanges?.bind(decoder);
-	decoder.triggerChanges = (changes) => {
-		if (subscription.originalTrigger) subscription.originalTrigger(changes);
-		const refs = decoder.root?.refs;
-		if (refs) {
-			subscription.objectToRefId = /* @__PURE__ */ new Map();
-			for (const [refId, obj] of refs.entries()) if (obj !== null && typeof obj === "object") subscription.objectToRefId.set(obj, refId);
-		}
-		for (const change of changes) {
-			const refId = subscription.objectToRefId?.get(change.ref) ?? -1;
-			if (refId !== -1) {
-				let currentRefId = refId;
-				while (currentRefId !== void 0) {
-					subscription.dirtyRefIds.add(currentRefId);
-					currentRefId = subscription.parentRefIdMap.get(currentRefId);
+	decoder.decode = function(...args) {
+		const changes = subscription.originalDecode.apply(decoder, args);
+		if (changes && changes.length > 0) {
+			const refs = decoder.root?.refs;
+			if (refs) {
+				subscription.objectToRefId = /* @__PURE__ */ new Map();
+				for (const [refId, obj] of refs.entries()) if (obj !== null && typeof obj === "object") subscription.objectToRefId.set(obj, refId);
+			}
+			for (const change of changes) {
+				const refId = subscription.objectToRefId?.get(change.ref) ?? -1;
+				if (refId !== -1) {
+					let currentRefId = refId;
+					while (currentRefId !== void 0) {
+						subscription.dirtyRefIds.add(currentRefId);
+						currentRefId = subscription.parentRefIdMap.get(currentRefId);
+					}
 				}
 			}
+			subscription.listeners.forEach((callback) => callback());
 		}
-		subscription.listeners.forEach((callback) => callback());
+		return changes;
 	};
 	subscriptionsByState.set(roomState, subscription);
 	return subscription;
@@ -199,10 +209,12 @@ function useColyseusState(roomState, decoder, selector = (s) => s) {
 	(0, react.useEffect)(() => {
 		if (roomState && decoder) getOrCreateSubscription(roomState, decoder);
 	}, [roomState, decoder]);
-	const getSnapshot = () => {
+	const selectorRef = (0, react.useRef)(selector);
+	selectorRef.current = selector;
+	const getSnapshot = (0, react.useCallback)(() => {
 		if (!roomState || !decoder) return;
 		const subscription = getOrCreateSubscription(roomState, decoder);
-		const selectedState = selector(roomState);
+		const selectedState = selectorRef.current(roomState);
 		const ctx = {
 			refs: decoder.root?.refs,
 			objectToRefId: subscription.objectToRefId,
@@ -224,14 +236,13 @@ function useColyseusState(roomState, decoder, selector = (s) => s) {
 			}
 		}
 		return result;
-	};
-	const subscribe = (callback) => {
+	}, [roomState, decoder]);
+	return (0, react.useSyncExternalStore)((0, react.useCallback)((callback) => {
 		if (!roomState || !decoder) return () => {};
 		const subscription = getOrCreateSubscription(roomState, decoder);
 		subscription.listeners.add(callback);
 		return () => subscription.listeners.delete(callback);
-	};
-	return (0, react.useSyncExternalStore)(subscribe, getSnapshot);
+	}, [roomState, decoder]), getSnapshot);
 }
 
 //#endregion

package/dist/index.mjs

@@ -1,8 +1,16 @@
-import { useEffect, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { ArraySchema, MapSchema, Schema } from "@colyseus/schema";
 
 //#region src/schema/createSnapshot.ts
 /**
+* Returns the `@type`-decorated field names for a Schema class,
+* reading from `Symbol.metadata` set by v4's `@type()` decorators.
+*/
+function getSchemaFieldNames(node) {
+	const metadata = node.constructor?.[Symbol.metadata];
+	if (metadata && typeof metadata === "object") return Object.values(metadata).map((f) => f.name);
+}
+/**
 * Builds a reverse lookup map from objects to their refIds.
 */
 function buildObjectToRefIdMap(refs) {
@@ -64,8 +72,9 @@ function createSnapshotForArraySchema(node, previousResult, ctx) {
 function createSnapshotForSchema(node, previousResult, ctx) {
 	const snapshotted = {};
 	let hasChanged = previousResult === void 0;
-	const fieldDefinitions = node._definition?.fields;
-	if (fieldDefinitions) for (const fieldName in fieldDefinitions) {
+	const fieldNames = getSchemaFieldNames(node);
+	if (!fieldNames) throw new Error(`createSnapshotForSchema: no field metadata found on ${node.constructor?.name ?? "unknown"}. Is @colyseus/schema v4 installed?`);
+	for (const fieldName of fieldNames) {
 		const value = node[fieldName];
 		if (typeof value !== "function") {
 			const snapshottedValue = createSnapshot(value, ctx);
@@ -73,15 +82,6 @@ function createSnapshotForSchema(node, previousResult, ctx) {
 			if (!hasChanged && previousResult && previousResult[fieldName] !== snapshottedValue) hasChanged = true;
 		}
 	}
-	else for (const key in node) {
-		if (key.startsWith("_") || key.startsWith("$")) continue;
-		const value = node[key];
-		if (typeof value !== "function") {
-			const snapshottedValue = createSnapshot(value, ctx);
-			snapshotted[key] = snapshottedValue;
-			if (!hasChanged && previousResult && previousResult[key] !== snapshottedValue) hasChanged = true;
-		}
-	}
 	return hasChanged ? snapshotted : previousResult;
 }
 /**
@@ -125,7 +125,14 @@ const subscriptionsByState = /* @__PURE__ */ new WeakMap();
 * Gets or creates a subscription for the given room state.
 * 
 * This function sets up change notification by wrapping the decoder's
-* `triggerChanges` method to notify all subscribed React components.
+* `decode` method to intercept all state changes and notify subscribed
+* React components.
+* 
+* We wrap `decode()` rather than assigning `decoder.triggerChanges` because
+* `triggerChanges` is a single-slot callback that gets unconditionally
+* overwritten by `Callbacks.get()` / `getDecoderStateCallbacks()` on every
+* call. Wrapping `decode()` sidesteps this conflict entirely since it is the
+* sole entry point for both full-state syncs and incremental patches.
 * 
 * @param roomState - The Colyseus room state Schema instance
 * @param decoder - The Colyseus decoder associated with the room
@@ -140,27 +147,30 @@ function getOrCreateSubscription(roomState, decoder) {
 		dirtyRefIds: /* @__PURE__ */ new Set(),
 		parentRefIdMap: /* @__PURE__ */ new Map(),
 		objectToRefId: void 0,
-		cleanupCounter: 0
+		cleanupCounter: 0,
+		originalDecode: decoder.decode
 	};
-	subscription.originalTrigger = decoder.triggerChanges?.bind(decoder);
-	decoder.triggerChanges = (changes) => {
-		if (subscription.originalTrigger) subscription.originalTrigger(changes);
-		const refs = decoder.root?.refs;
-		if (refs) {
-			subscription.objectToRefId = /* @__PURE__ */ new Map();
-			for (const [refId, obj] of refs.entries()) if (obj !== null && typeof obj === "object") subscription.objectToRefId.set(obj, refId);
-		}
-		for (const change of changes) {
-			const refId = subscription.objectToRefId?.get(change.ref) ?? -1;
-			if (refId !== -1) {
-				let currentRefId = refId;
-				while (currentRefId !== void 0) {
-					subscription.dirtyRefIds.add(currentRefId);
-					currentRefId = subscription.parentRefIdMap.get(currentRefId);
+	decoder.decode = function(...args) {
+		const changes = subscription.originalDecode.apply(decoder, args);
+		if (changes && changes.length > 0) {
+			const refs = decoder.root?.refs;
+			if (refs) {
+				subscription.objectToRefId = /* @__PURE__ */ new Map();
+				for (const [refId, obj] of refs.entries()) if (obj !== null && typeof obj === "object") subscription.objectToRefId.set(obj, refId);
+			}
+			for (const change of changes) {
+				const refId = subscription.objectToRefId?.get(change.ref) ?? -1;
+				if (refId !== -1) {
+					let currentRefId = refId;
+					while (currentRefId !== void 0) {
+						subscription.dirtyRefIds.add(currentRefId);
+						currentRefId = subscription.parentRefIdMap.get(currentRefId);
+					}
 				}
 			}
+			subscription.listeners.forEach((callback) => callback());
 		}
-		subscription.listeners.forEach((callback) => callback());
+		return changes;
 	};
 	subscriptionsByState.set(roomState, subscription);
 	return subscription;
@@ -199,10 +209,12 @@ function useColyseusState(roomState, decoder, selector = (s) => s) {
 	useEffect(() => {
 		if (roomState && decoder) getOrCreateSubscription(roomState, decoder);
 	}, [roomState, decoder]);
-	const getSnapshot = () => {
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+	const getSnapshot = useCallback(() => {
 		if (!roomState || !decoder) return;
 		const subscription = getOrCreateSubscription(roomState, decoder);
-		const selectedState = selector(roomState);
+		const selectedState = selectorRef.current(roomState);
 		const ctx = {
 			refs: decoder.root?.refs,
 			objectToRefId: subscription.objectToRefId,
@@ -224,14 +236,13 @@ function useColyseusState(roomState, decoder, selector = (s) => s) {
 			}
 		}
 		return result;
-	};
-	const subscribe = (callback) => {
+	}, [roomState, decoder]);
+	return useSyncExternalStore(useCallback((callback) => {
 		if (!roomState || !decoder) return () => {};
 		const subscription = getOrCreateSubscription(roomState, decoder);
 		subscription.listeners.add(callback);
 		return () => subscription.listeners.delete(callback);
-	};
-	return useSyncExternalStore(subscribe, getSnapshot);
+	}, [roomState, decoder]), getSnapshot);
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colyseus/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "tsdown --watch --format esm,cjs",
@@ -22,8 +22,7 @@
   "peerDependencies": {
     "@colyseus/schema": "^4.0.8",
     "@colyseus/sdk": "^0.17.26",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=18.3.1"
   },
   "devDependencies": {
     "@colyseus/schema": "^4.0.8",
@@ -31,15 +30,12 @@
     "@eslint/js": "^9.9.0",
     "@testing-library/react": "^16.3.1",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "buffer": "^6.0.3",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "happy-dom": "^20.0.11",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "reflect-metadata": "^0.2.2",
     "tsdown": "^0.20.1",
     "typescript": "^5.5.3",