feat: draft zustand state management system #280
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -36,6 +36,7 @@ | |
| "dependencies": { | ||
| "@dojoengine/torii-client": "workspace:*", | ||
| "axios": "^0.27.2", | ||
| "immer": "^10.1.1", | ||
| "lodash": "^4.17.21", | ||
| "vite-plugin-wasm": "^3.3.0", | ||
| "zustand": "^4.5.5" | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ import { SchemaType, SDK, UnionOfModelData } from "./types"; | |
| import { Account, Signature, StarknetDomain, TypedData } from "starknet"; | ||
|
|
||
| export * from "./types"; | ||
| export * from "./state"; | ||
|
There was a problem hiding this comment. 💡 Codebase verification Issue Detected: Missing The export statement
🔗 Analysis chainLGTM! Verify for potential naming conflicts. The new export statement is consistent with the PR objective of implementing a state management system. It appropriately exposes the state module's functionality to SDK consumers. To ensure there are no naming conflicts, please run the following script: 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Check for potential naming conflicts between the new state exports and existing exports
# Get existing exports
existing_exports=$(rg -o --no-filename 'export \{.*?\}' packages/sdk/src/index.ts | tr -d '{}' | tr ',' '\n' | sed 's/^ *//g')
# Get exports from the state module
state_exports=$(rg -o --no-filename 'export .*' packages/sdk/src/state.ts | sed 's/export //g')
# Check for conflicts
conflicts=$(comm -12 <(echo "$existing_exports" | sort) <(echo "$state_exports" | sort))
if [ -n "$conflicts" ]; then
echo "Potential naming conflicts detected:"
echo "$conflicts"
else
echo "No naming conflicts detected."
fi
Length of output: 543 |
||
|
|
||
| interface SDKConfig { | ||
| client: torii.ClientConfig; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./zustand"; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import { create } from "zustand"; | ||
| import { immer } from "zustand/middleware/immer"; | ||
| import { | ||
| Draft, | ||
| Patch, | ||
| WritableDraft, | ||
| applyPatches, | ||
| produceWithPatches, | ||
| } from "immer"; | ||
|
|
||
| import { enablePatches } from "immer"; | ||
| import { subscribeWithSelector } from "zustand/middleware"; | ||
| import { ParsedEntity, SchemaType } from "../types"; | ||
|
|
||
| enablePatches(); | ||
|
|
||
| interface PendingTransaction { | ||
| transactionId: string; | ||
| patches: Patch[]; | ||
| inversePatches: Patch[]; | ||
| } | ||
|
|
||
| interface GameState<T extends SchemaType> { | ||
| entities: Record<string, ParsedEntity<T>>; | ||
| pendingTransactions: Record<string, PendingTransaction>; | ||
| setEntities: (entities: ParsedEntity<T>[]) => void; | ||
| updateEntity: (entity: Partial<ParsedEntity<T>>) => void; | ||
| applyOptimisticUpdate: ( | ||
| transactionId: string, | ||
| updateFn: (draft: Draft<GameState<T>>) => void | ||
| ) => void; | ||
| revertOptimisticUpdate: (transactionId: string) => void; | ||
| confirmTransaction: (transactionId: string) => void; | ||
| subscribeToEntity: ( | ||
| entityId: string, | ||
| listener: (entity: ParsedEntity<T> | undefined) => void | ||
| ) => () => void; | ||
| waitForEntityChange: ( | ||
| entityId: string, | ||
| predicate: (entity: ParsedEntity<T> | undefined) => boolean, | ||
| timeout?: number | ||
| ) => Promise<ParsedEntity<T> | undefined>; | ||
| } | ||
|
|
||
| /** | ||
| * Factory function to create a Zustand store based on a given SchemaType. | ||
| * | ||
| * @template T - The schema type. | ||
| * @returns A Zustand hook tailored to the provided schema. | ||
| */ | ||
| export function createDojoStore<T extends SchemaType>() { | ||
| const useStore = create<GameState<T>>()( | ||
| subscribeWithSelector( | ||
| immer((set, get) => ({ | ||
| entities: {}, | ||
| pendingTransactions: {}, | ||
| setEntities: (entities: ParsedEntity<T>[]) => { | ||
| set((state: Draft<GameState<T>>) => { | ||
| entities.forEach((entity) => { | ||
| state.entities[entity.entityId] = | ||
| entity as WritableDraft<ParsedEntity<T>>; | ||
| }); | ||
| }); | ||
| }, | ||
| updateEntity: (entity: Partial<ParsedEntity<T>>) => { | ||
| set((state: Draft<GameState<T>>) => { | ||
| if ( | ||
| entity.entityId && | ||
| state.entities[entity.entityId] | ||
| ) { | ||
| Object.assign( | ||
| state.entities[entity.entityId], | ||
| entity | ||
| ); | ||
| } | ||
| }); | ||
| }, | ||
|
Comment on lines
+73
to
+85
There was a problem hiding this comment. 🛠️ Refactor suggestion Handle the case where an entity does not exist in the state In the |
||
| applyOptimisticUpdate: (transactionId, updateFn) => { | ||
| const currentState = get(); | ||
| const [nextState, patches, inversePatches] = | ||
| produceWithPatches( | ||
| currentState, | ||
| (draftState: Draft<GameState<T>>) => { | ||
| updateFn(draftState); | ||
| } | ||
| ); | ||
|
|
||
| set(() => nextState); | ||
|
|
||
| set((state: Draft<GameState<T>>) => { | ||
| state.pendingTransactions[transactionId] = { | ||
| transactionId, | ||
| patches, | ||
| inversePatches, | ||
| }; | ||
| }); | ||
| }, | ||
| revertOptimisticUpdate: (transactionId) => { | ||
| const transaction = | ||
| get().pendingTransactions[transactionId]; | ||
| if (transaction) { | ||
| set((state: Draft<GameState<T>>) => | ||
| applyPatches(state, transaction.inversePatches) | ||
| ); | ||
| set((state: Draft<GameState<T>>) => { | ||
| delete state.pendingTransactions[transactionId]; | ||
| }); | ||
| } | ||
| }, | ||
|
Comment on lines
+106
to
+117
There was a problem hiding this comment. Add error handling for missing transactions in When a transaction ID is not found in |
||
| confirmTransaction: (transactionId) => { | ||
| set((state: Draft<GameState<T>>) => { | ||
| delete state.pendingTransactions[transactionId]; | ||
| }); | ||
| }, | ||
| subscribeToEntity: (entityId, listener): (() => void) => { | ||
| return useStore.subscribe((state) => { | ||
| const entity = state.entities[entityId]; | ||
| listener(entity); | ||
| }); | ||
| }, | ||
|
Comment on lines
+123
to
+128
There was a problem hiding this comment. 🛠️ Refactor suggestion Clarify the use of The methods |
||
| waitForEntityChange: (entityId, predicate, timeout = 6000) => { | ||
| return new Promise<ParsedEntity<T> | undefined>( | ||
| (resolve, reject) => { | ||
| const unsubscribe = useStore.subscribe( | ||
| (state) => state.entities[entityId], | ||
| (entity) => { | ||
| if (predicate(entity)) { | ||
| clearTimeout(timer); | ||
| unsubscribe(); | ||
| resolve(entity); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| const timer = setTimeout(() => { | ||
| unsubscribe(); | ||
| reject( | ||
| new Error( | ||
| `waitForEntityChange: Timeout of ${timeout}ms exceeded` | ||
| ) | ||
| ); | ||
| }, timeout); | ||
| } | ||
| ); | ||
| }, | ||
| })) | ||
| ) | ||
| ); | ||
|
|
||
| return useStore; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -226,7 +226,9 @@ export type ParsedEntity<T extends SchemaType> = { | |
| entityId: string; | ||
| models: { | ||
| [K in keyof T]: { | ||
| [M in keyof T[K]]?: T[K][M] extends object | ||
| ? Partial<T[K][M]> | ||
| : T[K][M]; | ||
|
Comment on lines
+230
to
+232
There was a problem hiding this comment. 🛠️ Refactor suggestion Refine type check for better type safety The current implementation applies [M in keyof T[K]]?: T[K][M] extends object
? T[K][M] extends Record<string, any> ? Partial<T[K][M]> : T[K][M]
: T[K][M];This change ensures that |
||
| }; | ||
| }; | ||
| }; | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Simplify state usage to prevent unnecessary re-renders
You are accessing the entire state and
state.entitiesseparately usinguseGameState. This can lead to unnecessary re-renders. Since you have the entire state withstate, you can usestate.entitiesdirectly without needing to select it separately.