Merge pull request #385 from dojoengine/fix/store-types

fix: createDojoStore now have proper type

.changeset/chilled-jars-raise.md

@@ -0,0 +1,15 @@
+---
+"@dojoengine/sdk": patch
+"@dojoengine/core": patch
+"@dojoengine/create-burner": patch
+"@dojoengine/create-dojo": patch
+"@dojoengine/predeployed-connector": patch
+"@dojoengine/react": patch
+"@dojoengine/state": patch
+"@dojoengine/torii-client": patch
+"@dojoengine/torii-wasm": patch
+"@dojoengine/utils": patch
+"@dojoengine/utils-wasm": patch
+---
+
+fix: createDojoStore have now proper types

examples/example-vite-experimental-sdk/src/main.ts

@@ -46,7 +46,7 @@ async function main() {
             .addOrderBy(ModelsMapping.Moves, "remaining", "Asc")
             .includeHashedKeys()
             .build(),
-        ({ data, error }: { data: any; error: Error }) => {
+        ({ data, error }) => {
             if (data) {
                 console.log(data);
             }

examples/example-vite-phaser-sdk/package.json

@@ -15,14 +15,15 @@
     "homepage": "https://github.com/phaserjs/template-vite-ts#readme",
     "scripts": {
         "dev": "node log.js dev & vite --config vite/config.dev.mjs",
-        "build": "node log.js build & vite build --config vite/config.prod.mjs",
+        "build": "tsc && node log.js build & vite build --config vite/config.prod.mjs",
         "dev-nolog": "vite --config vite/config.dev.mjs",
         "build-nolog": "vite build --config vite/config.prod.mjs"
     },
     "devDependencies": {
         "terser": "^5.31.0",
         "typescript": "^5.4.5",
         "vite": "^5.3.1",
+        "vite-plugin-top-level-await": "^1.4.4",
         "vite-plugin-wasm": "^3.4.1"
     },
     "dependencies": {

examples/example-vite-phaser-sdk/src/dojo/context.ts

@@ -29,6 +29,8 @@ export class DojoContext<Schema extends SchemaType> {
 
         // Select only the specific model data for the given entityId
         const entities = this.store.getEntity(entityId.toString());
-        return entities?.models?.[namespace]?.[modelName];
+        return entities?.models?.[namespace]?.[modelName] as
+            | SchemaType[N][M]
+            | undefined;
     }
 }

examples/example-vite-phaser-sdk/src/main.ts

@@ -57,7 +57,7 @@ async function main() {
     const context = new DojoContext(sdk, dojoProvider, useDojoStore);
     const game = new Game(config);
     [Boot, Preloader, MainMenu, MainGame, GameOver].map((s) => {
-        game.scene.add(s, new s(context));
+        game.scene.add(s.toString(), new s(context));
     });
     return game;
 }

examples/example-vite-phaser-sdk/src/scenes/Boot.ts

@@ -1,10 +1,7 @@
 import { Scene } from "phaser";
-import { DojoContext } from "../dojo/context";
-import { predeployedAccounts } from "../../../../packages/predeployed-connector/dist";
-import { dojoConfig } from "../../dojoConfig";
 
 export class Boot extends Scene {
-    constructor(private ctx: DojoContext) {
+    constructor() {
         super("Boot");
     }
 

examples/example-vite-phaser-sdk/src/scenes/Game.ts

@@ -68,8 +68,12 @@ export class Game extends Scene {
                 )
                 .includeHashedKeys()
                 .build(),
-            ({ data }: { data: ParsedEntity<SchemaType> }) => {
-                this.ctx.store.updateEntity(data[Object.keys(data)[0]]);
+            ({ data }) => {
+                if (data) {
+                    this.ctx.store.updateEntity(
+                        data[0] as ParsedEntity<SchemaType>
+                    );
+                }
             }
         );
     }
@@ -112,47 +116,35 @@ export class Game extends Scene {
                 this.scene.start("MainMenu");
             });
 
-        this.keys = this.input.keyboard!.addKeys("W,A,S,D");
+        this.keys = this.input.keyboard!.addKeys("W,A,S,D") as MoveKeys;
 
-        this.keys.W.on(
-            "down",
-            async (event: typeof Phaser.Input.Keyboard.Events) => {
-                await this.ctx.client.actions.move(
-                    this.account,
-                    new CairoCustomEnum({ Up: "()" })
-                );
-            }
-        );
-        this.keys.S.on(
-            "down",
-            async (event: typeof Phaser.Input.Keyboard.Events) => {
-                await this.ctx.client.actions.move(
-                    this.account,
-                    new CairoCustomEnum({ Down: "()" })
-                );
-            }
-        );
-        this.keys.A.on(
-            "down",
-            async (event: typeof Phaser.Input.Keyboard.Events) => {
-                await this.ctx.client.actions.move(
-                    this.account,
-                    new CairoCustomEnum({ Left: "()" })
-                );
-            }
-        );
-        this.keys.D.on(
-            "down",
-            async (event: typeof Phaser.Input.Keyboard.Events) => {
-                await this.ctx.client.actions.move(
-                    this.account,
-                    new CairoCustomEnum({ Right: "()" })
-                );
-            }
-        );
+        this.keys.W.on("down", async () => {
+            await this.ctx.client.actions.move(
+                this.account,
+                new CairoCustomEnum({ Up: "()" })
+            );
+        });
+        this.keys.S.on("down", async () => {
+            await this.ctx.client.actions.move(
+                this.account,
+                new CairoCustomEnum({ Down: "()" })
+            );
+        });
+        this.keys.A.on("down", async () => {
+            await this.ctx.client.actions.move(
+                this.account,
+                new CairoCustomEnum({ Left: "()" })
+            );
+        });
+        this.keys.D.on("down", async () => {
+            await this.ctx.client.actions.move(
+                this.account,
+                new CairoCustomEnum({ Right: "()" })
+            );
+        });
     }
 
-    async update(time: number, delta: number): Promise<void> {
+    async update(): Promise<void> {
         const position = this.ctx.useModel(
             this.entityId,
             ModelsMapping.Position

examples/example-vite-phaser-sdk/src/scenes/GameOver.ts

@@ -1,12 +1,11 @@
 import { Scene } from "phaser";
-import { DojoContext } from "../dojo/context";
 
 export class GameOver extends Scene {
     camera: Phaser.Cameras.Scene2D.Camera;
     background: Phaser.GameObjects.Image;
     gameover_text: Phaser.GameObjects.Text;
 
-    constructor(private ctx: DojoContext) {
+    constructor() {
         super("GameOver");
     }
 
@@ -48,7 +47,3 @@ export class GameOver extends Scene {
         // });
     }
 }
-
-function handleButtonClick() {
-    console.log(this);
-}

examples/example-vite-phaser-sdk/src/scenes/MainMenu.ts

@@ -2,7 +2,11 @@ import { Scene, GameObjects } from "phaser";
 import { DojoContext } from "../dojo/context";
 import { PredeployedAccountsConnector } from "@dojoengine/predeployed-connector";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
-import { ClauseBuilder, ToriiQueryBuilder } from "@dojoengine/sdk";
+import {
+    ClauseBuilder,
+    ParsedEntity,
+    ToriiQueryBuilder,
+} from "@dojoengine/sdk";
 import { addAddressPadding } from "starknet";
 import { SchemaType } from "../typescript/models.gen";
 
@@ -50,9 +54,9 @@ export class MainMenu extends Scene {
                             .includeHashedKeys()
                             .build()
                     );
-                    this.ctx.store.setEntities([
-                        entities[Object.keys(entities)[0]],
-                    ]);
+                    this.ctx.store.setEntities(
+                        entities as ParsedEntity<SchemaType>[]
+                    );
 
                     this.scene.start("Game", { wallet, entityId, entities });
                 });

examples/example-vite-phaser-sdk/src/scenes/Preloader.ts

@@ -1,10 +1,9 @@
 import { Scene } from "phaser";
-import { DojoContext } from "../dojo/context";
 import { predeployedAccounts } from "@dojoengine/predeployed-connector";
 import { dojoConfig } from "../../dojoConfig";
 
 export class Preloader extends Scene {
-    constructor(private ctx: DojoContext) {
+    constructor() {
         super("Preloader");
     }
 

examples/example-vite-phaser-sdk/src/typescript/contracts.gen.ts

@@ -1,6 +1,5 @@
 import { DojoProvider } from "@dojoengine/core";
 import { Account, AccountInterface, CairoCustomEnum } from "starknet";
-import * as models from "./models.gen";
 
 export function setupWorld(provider: DojoProvider) {
     const build_actions_move_calldata = (direction: CairoCustomEnum) => {

examples/example-vite-phaser-sdk/src/typescript/models.gen.ts

@@ -106,11 +106,11 @@ export const schema: SchemaType = {
         Position: {
             fieldOrder: ["player", "vec"],
             player: "",
-            vec: { fieldOrder: ["x", "y"], x: 0, y: 0 },
+            vec: { x: 0, y: 0 },
         },
         PositionValue: {
             fieldOrder: ["vec"],
-            vec: { fieldOrder: ["x", "y"], x: 0, y: 0 },
+            vec: { x: 0, y: 0 },
         },
         Vec2: {
             fieldOrder: ["x", "y"],

examples/example-vite-phaser-sdk/tsconfig.json

@@ -1,16 +1,15 @@
 {
     "compilerOptions": {
-        "target": "ES2020",
+        "target": "ESNext",
         "useDefineForClassFields": true,
         "module": "ESNext",
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "lib": ["ESNext", "DOM"],
         "skipLibCheck": true,
         /* Bundler mode */
         "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
+        "noEmitOnError": true,
         /* Linting */
         "strict": true,
         "strictPropertyInitialization": false,

examples/example-vite-phaser-sdk/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/main.ts","./src/vite-env.d.ts","./src/dojo/context.ts","./src/scenes/boot.ts","./src/scenes/game.ts","./src/scenes/gameover.ts","./src/scenes/mainmenu.ts","./src/scenes/preloader.ts","./src/typescript/contracts.gen.ts","./src/typescript/models.gen.ts"],"errors":true,"version":"5.7.2"}

examples/example-vite-phaser-sdk/vite/config.prod.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+import topLevelAwait from "vite-plugin-top-level-await";
 
 import wasm from "vite-plugin-wasm";
 
@@ -44,5 +45,5 @@ export default defineConfig({
     server: {
         port: 5173,
     },
-    plugins: [phasermsg(), wasm()],
+    plugins: [phasermsg(), wasm(), topLevelAwait()],
 });

packages/sdk/src/experimental/index.ts

@@ -1,9 +1,14 @@
 import * as torii from "@dojoengine/torii-client";
-import { SchemaType, SDKConfig } from "../types";
+import { SchemaType, SDKConfig, StandardizedQueryResult } from "../types";
 import { parseEntities } from "../parseEntities";
 import { parseHistoricalEvents } from "../parseHistoricalEvents";
 import { intoEntityKeysClause } from "./convertClauseToEntityKeysClause";
 
+export type ToriiSubscriptionCallback<T extends SchemaType> = (response: {
+    data?: StandardizedQueryResult<T> | StandardizedQueryResult<T>[];
+    error?: Error;
+}) => void;
+
 export async function init<T extends SchemaType>(options: SDKConfig) {
     const client = await torii.createClient(options.client);
 
@@ -17,7 +22,10 @@ export async function init<T extends SchemaType>(options: SDKConfig) {
                 ? parseHistoricalEvents(events)
                 : parseEntities(events);
         },
-        subscribeEntities: async (query: torii.Query, callback: Function) => {
+        subscribeEntities: async (
+            query: torii.Query,
+            callback: ToriiSubscriptionCallback<T>
+        ) => {
             if (
                 query.dont_include_hashed_keys &&
                 query.clause &&
@@ -56,7 +64,7 @@ export async function init<T extends SchemaType>(options: SDKConfig) {
         },
         subscribeEvents: async (
             query: torii.Query,
-            callback: Function,
+            callback: ToriiSubscriptionCallback<T>,
             historical: boolean = false
         ) => {
             if (

packages/sdk/src/react/provider.tsx

@@ -2,7 +2,13 @@ import { ReactNode, useContext, createContext } from "react";
 import { SchemaType, SDK } from "../types";
 import { DojoConfig, DojoProvider } from "@dojoengine/core";
 import { createDojoStore } from "./hooks";
-import { DojoStore } from "../state";
+import { GameState } from "../state";
+
+// Define the hook type
+export type DojoStoreHook<T extends SchemaType> = <U>(
+    selector: (state: GameState<T>) => U,
+    equals?: (a: U, b: U) => boolean
+) => U;
 
 /**
  * Interface defining the shape of the Dojo context.
@@ -20,7 +26,7 @@ export interface DojoContextType<
     /** The Dojo provider */
     provider: DojoProvider;
     /** The dojo zustand store */
-    useDojoStore: DojoStore<Schema>;
+    useDojoStore: DojoStoreHook<Schema>;
 }
 
 /**

packages/sdk/src/state/index.ts

@@ -1,4 +1,4 @@
-import { StoreApi, UseBoundStore } from "zustand";
+import { StoreApi } from "zustand";
 
 import { createStore } from "zustand/vanilla";
 import { createDojoStoreFactory } from "./zustand";
@@ -42,9 +42,7 @@ export interface GameState<T extends SchemaType> {
 }
 
 // Define the store type
-export type DojoStore<T extends SchemaType> = UseBoundStore<
-    StoreApi<GameState<T>>
->;
+export type DojoStore<T extends SchemaType> = StoreApi<GameState<T>>;
 
 /**
  * Factory function to create a Vanilla Zustand store based on a given SchemaType.