feat: move to sdk

Author: ponderingdemocritus

examples/example-vite-react-sdk/src/App.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from "react";
 import "./App.css";
-import { SDK } from "@dojoengine/sdk";
+import { SDK, createDojoStore } from "@dojoengine/sdk";
 import { Schema } from "./bindings.ts";
-import { useGameState } from "./state.ts";
 
 import { v4 as uuidv4 } from "uuid";
 
+export const useGameState = createDojoStore<Schema>();
+
 function App({ db }: { db: SDK<Schema> }) {
     const state = useGameState((state) => state);
     const entities = useGameState((state) => state.entities);
@@ -126,9 +127,11 @@ function App({ db }: { db: SDK<Schema> }) {
                         Player:{" "}
                         {entity.models.dojo_starter.Position?.player ?? "N/A"}
                         <br />
-                        X: {entity.models.dojo_starter.Position?.vec.x ?? "N/A"}
+                        X:{" "}
+                        {entity.models.dojo_starter.Position?.vec?.x ?? "N/A"}
                         <br />
-                        Y: {entity.models.dojo_starter.Position?.vec.y ?? "N/A"}
+                        Y:{" "}
+                        {entity.models.dojo_starter.Position?.vec?.y ?? "N/A"}
                     </p>
                     <h3>Moves</h3>
                     <p>

examples/example-vite-react-sdk/src/state.ts

@@ -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"

packages/sdk/package.json

@@ -8,6 +8,7 @@ import { SchemaType, SDK, UnionOfModelData } from "./types";
 import { Account, Signature, StarknetDomain, TypedData } from "starknet";
 
 export * from "./types";
+export * from "./state";
 
 interface SDKConfig {
     client: torii.ClientConfig;

packages/sdk/src/index.ts

@@ -0,0 +1 @@
+export * from "./zustand";

packages/sdk/src/state/index.ts

@@ -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
+                            );
+                        }
+                    });
+                },
+                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];
+                        });
+                    }
+                },
+                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);
+                    });
+                },
+                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;
+}

packages/sdk/src/state/zustand.ts

@@ -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];
+            [M in keyof T[K]]?: T[K][M] extends object
+                ? Partial<T[K][M]>
+                : T[K][M];
         };
     };
 };