chore(example): showcase type system across all frameworks (#520)

* chore(example): showcase type system across all frameworks

- React: replace any/Record<string, unknown> with ABI-derived types,
  add ParsedEntity, Token, TokenBalance, Event imports, remove console.log
- Vue: use ABI-derived Position/Moves types instead of ComponentValue<any>
- Node: add typed Position/Moves annotations from @showcase/dojo
- Add educational comments pointing to core/types.ts for the full pattern
- Fix 'Infinite Scroll Entities' -> 'Infinite Scroll Tokens' copy-paste bug

* fix(example): address CodeRabbit review feedback

- Extract shared NUMSGame interface to core/nums-types.ts (no duplication)
- Use React.JSX.Element for React 19 compatibility
- Use non-null assertion after .filter() instead of optional chaining
- Type Event consistently across EventList, EventSubscriber, and InfiniteScroll
- Add optional chaining for vec access in Vue moveUp/moveLeft
- Cast getComponentValue at boundary in Vue for consistency with Node
- Remove Partial<> wrapper on Vue refs (full model or null)

* refactor(example): switch React from NUMS/Sepolia to dojo-starter

- Connect to local Torii (localhost:8080) with dojo-starter manifest
- Query dojo_starter-Position and dojo_starter-Moves models
- Use ABI-derived Position/Moves types from @showcase/dojo
- Remove manifest_sepolia.json and nums-types.ts
- All frameworks now consistently use the dojo-starter world

* chore(example): replace recs with SDK pattern in vue and node

* fix(example): use Pagination.getItems() instead of private .items

---------

Co-authored-by: Thierry <thierry@openclaw.ai>

Author: MartianGreed

example/core/dojo/index.ts

@@ -18,6 +18,7 @@ export type {
     DirectionVariant,
     SpawnAction,
     MoveAction,
+    DojoStarterSchema,
 } from "../types";
 export { dojoConfig } from "./config";
 export type { ContractComponents } from "./generated/contractComponents";

example/frameworks/node/src/index.ts

@@ -1,11 +1,31 @@
-import { getComponentValue } from "@dojoengine/recs";
-import { getEntityIdFromKeys } from "@dojoengine/utils";
+import { init, ToriiQueryBuilder, KeysClause } from "@dojoengine/sdk/node";
 
-import { DirectionValue, dojoConfig, setup } from "@showcase/dojo";
+import {
+    DirectionValue,
+    dojoConfig,
+    setup,
+    type Position,
+    type Moves,
+    type DojoStarterSchema,
+} from "@showcase/dojo";
 
-async function main() {
+async function main(): Promise<void> {
     const result = await setup(dojoConfig);
 
+    // Initialize SDK for querying entities (no recs)
+    const sdk = await init<DojoStarterSchema>({
+        client: {
+            toriiUrl: dojoConfig.toriiUrl,
+            worldAddress: dojoConfig.manifest.world.address || "",
+        },
+        domain: {
+            name: "dojo_starter",
+            version: "1.0.0",
+            chainId: "SN_MAIN",
+            revision: "1",
+        },
+    });
+
     if (result.burnerManager.list().length === 0) {
         await result.burnerManager.create();
     }
@@ -23,19 +43,30 @@ async function main() {
     await result.systemCalls.move(account, DirectionValue.Right());
     await result.systemCalls.move(account, DirectionValue.Up());
 
-    const entityId = getEntityIdFromKeys([BigInt(account.address)]);
+    // Query entities via SDK instead of recs getComponentValue
+    const entities = await sdk.getEntities({
+        query: new ToriiQueryBuilder()
+            .withClause(
+                KeysClause(
+                    ["dojo_starter-Position", "dojo_starter-Moves"],
+                    [account.address],
+                    "VariableLen"
+                ).build()
+            )
+            .includeHashedKeys(),
+    });
 
-    const position = getComponentValue(
-        result.clientComponents.Position,
-        entityId
-    );
-    const moves = getComponentValue(result.clientComponents.Moves, entityId);
+    const entity = entities.getItems()[0];
+    const position = entity?.models?.dojo_starter?.Position as
+        | Position
+        | undefined;
+    const moves = entity?.models?.dojo_starter?.Moves as Moves | undefined;
 
     console.log("Position", position?.vec);
     console.log("Moves remaining", moves?.remaining);
 }
 
-main().catch((error) => {
+main().catch((error: unknown) => {
     console.error(error);
     process.exitCode = 1;
 });

example/frameworks/react/src/effect/atoms/index.ts

@@ -2,10 +2,12 @@ import { Atom } from "@effect-atom/atom-react";
 import { Layer } from "effect";
 import { makeToriiLayer } from "@dojoengine/react/effect";
 import { TracingLive } from "../tracing";
-import manifest from "../../manifest_sepolia.json" with { type: "json" };
+import manifest from "../../../../../core/manifest_dev.json" with {
+    type: "json",
+};
 
 const toriiLayer = makeToriiLayer(
-    { manifest, toriiUrl: "https://api.cartridge.gg/x/nums-bal/torii" },
+    { manifest, toriiUrl: "http://localhost:8080" },
     { autoReconnect: false, maxReconnectAttempts: 5 }
 );