feat: draft zustand state management system #280
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,6 +22,7 @@ | |
| "./package.json": "./package.json" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^28.0.0", | ||
| "@vitest/coverage-v8": "^1.6.0", | ||
| "eslint": "^8.57.1", | ||
| "prettier": "^2.8.8", | ||
|
|
@@ -35,7 +36,9 @@ | |
| }, | ||
| "dependencies": { | ||
| "@dojoengine/torii-client": "workspace:*", | ||
| "@dojoengine/create-burner": "workspace:*", | ||
| "axios": "^0.27.2", | ||
| "immer": "^10.1.1", | ||
| "lodash": "^4.17.21", | ||
| "vite-plugin-wasm": "^3.3.0", | ||
| "zustand": "^4.5.5" | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./zustand"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Consider optimizing state selection
While using
useDojoStorefor state management is a good approach, selecting the entire state on line 11 might lead to unnecessary re-renders. Consider selecting only the specific parts of the state that this component needs.Example:
This way, the component will only re-render when these specific parts of the state change.