fix: recs remove component on empty values

.changeset/blue-points-drop.md

@@ -0,0 +1,5 @@
+---
+"@dojoengine/state": patch
+---
+
+fix: remove empty components when no values

examples/example-vite-grpc-playground/src/App.tsx

@@ -9,8 +9,6 @@ import {
     StandardizedQueryResult,
     SchemaType,
     type init,
-    ToriiQueryBuilder,
-    ClauseBuilder,
 } from "@dojoengine/sdk";
 import { evaluateUserInput } from "./components/ts-executor";
 

package.json

@@ -13,6 +13,7 @@
         "release": "pnpm build:deps && pnpm -F './packages/**' publish -r --force --no-git-checks",
         "release:dry-run": "pnpm -F './packages/**' publish -r --force --dry-run",
         "dev": "turbo watch dev --concurrency 20",
+        "dev:deps": "turbo watch build:deps --concurrency 20",
         "docs": "turbo run docs --ui stream"
     },
     "devDependencies": {

packages/sdk/src/react/hooks/hooks.ts

@@ -14,7 +14,7 @@ import { deepEqual, sleep } from "./utils";
  */
 export function createSubscriptionHook<
     Schema extends SchemaType,
-    Historical extends boolean = false,
+    Historical extends boolean = false
 >(config: {
     subscribeMethod: (
         options: SubscribeParams<Schema, Historical>

packages/sdk/src/react/hooks/index.ts

@@ -18,7 +18,7 @@ export * from "./state";
  */
 export function useDojoSDK<
     Client extends (...args: any) => any,
-    Schema extends SchemaType,
+    Schema extends SchemaType
 >(): DojoContextType<Client, Schema> {
     return useContext<DojoContextType<Client, Schema>>(DojoContext);
 }

packages/sdk/src/react/hooks/state.ts

@@ -30,7 +30,7 @@ export function useModel<
     N extends keyof SchemaType,
     M extends keyof SchemaType[N] & string,
     Client extends (...args: any) => any,
-    Schema extends SchemaType,
+    Schema extends SchemaType
 >(entityId: BigNumberish, model: `${N}-${M}`): SchemaType[N][M] | undefined {
     const [namespace, modelName] = model.split("-") as [N, M];
     const { useDojoStore } =
@@ -57,7 +57,7 @@ export function useModels<
     N extends keyof SchemaType,
     M extends keyof SchemaType[N] & string,
     Client extends (...args: any) => any,
-    Schema extends SchemaType,
+    Schema extends SchemaType
 >(model: `${N}-${M}`): { [entityId: string]: SchemaType[N][M] | undefined } {
     const [namespace, modelName] = model.split("-") as [N, M];
     const { useDojoStore } =

packages/sdk/src/react/provider.tsx

@@ -15,7 +15,7 @@ export type DojoStoreHook<T extends SchemaType> = <U>(
  */
 export interface DojoContextType<
     Client extends (...args: any) => any,
-    Schema extends SchemaType,
+    Schema extends SchemaType
 > {
     /** The Dojo client instance */
     config: DojoConfig;

packages/sdk/src/types.ts

@@ -248,14 +248,14 @@ export type UnionOfModelData<T extends SchemaType> = {
 
 export type ToriiResponse<
     T extends SchemaType,
-    Historical extends boolean,
+    Historical extends boolean
 > = Historical extends true
     ? StandardizedQueryResult<T>[]
     : StandardizedQueryResult<T>;
 
 export type SubscribeResponse<
     T extends SchemaType,
-    Historical extends boolean,
+    Historical extends boolean
 > = [ToriiResponse<T, Historical>, torii.Subscription];
 
 export interface GetTokenRequest {
@@ -523,7 +523,7 @@ export interface SDKFunctionOptions {
 
 export interface SubscribeParams<
     T extends SchemaType,
-    Historical extends boolean = false,
+    Historical extends boolean = false
 > {
     // Query object used to filter entities.
     query: ToriiQueryBuilder<T>;
@@ -535,7 +535,7 @@ export interface SubscribeParams<
 
 export interface GetParams<
     T extends SchemaType,
-    Historical extends boolean = false,
+    Historical extends boolean = false
 > {
     // The query object used to filter entities.
     query: ToriiQueryBuilder<T>;

packages/state/src/recs/index.ts

@@ -1,15 +1,16 @@
 import {
-    Component,
-    ComponentValue,
-    Entity,
+    type Component,
+    type ComponentValue,
+    type Entity,
+    type Metadata,
+    type Schema,
     getComponentValue,
     hasComponent,
-    Metadata,
-    Schema,
+    removeComponent,
     setComponent,
     updateComponent,
 } from "@dojoengine/recs";
-import {
+import type {
     Clause,
     Entities,
     EntityKeysClause,
@@ -411,16 +412,17 @@ export const setEntities = async <S extends Schema>(
         console.warn("No entities to set");
         return;
     }
-
     if (logging) console.log("Entities to set:", entities);
 
     for (const key in entities) {
         if (!Object.hasOwn(entities, key)) {
+            console.log("Did not found key", key);
             continue;
         }
 
         for (const componentName in entities[key]) {
             if (!Object.hasOwn(entities[key], componentName)) {
+                console.log("Did not found componentName", componentName);
                 continue;
             }
             const recsComponent = Object.values(components).find(
@@ -429,63 +431,74 @@ export const setEntities = async <S extends Schema>(
                     componentName
             );
 
-            if (recsComponent) {
-                try {
-                    const rawValue = entities[key][componentName];
+            if (!recsComponent) {
+                if (logging)
+                    console.warn(
+                        `Component ${componentName} not found in provided components.`
+                    );
+                continue;
+            }
 
+            try {
+                const rawValue = entities[key][componentName];
+                if (Object.keys(rawValue).length === 0) {
+                    removeComponent(recsComponent, key as Entity, {
+                        skipUpdateStream: false,
+                    });
                     if (logging)
                         console.log(
-                            `Raw value for ${componentName} on ${key}:`,
-                            rawValue
+                            `Removed component ${recsComponent.metadata?.name} on ${key}`
                         );
+                    continue;
+                }
 
-                    const convertedValue = convertValues(
-                        recsComponent.schema,
+                if (logging)
+                    console.log(
+                        `Raw value for ${componentName} on ${key}:`,
                         rawValue
-                    ) as ComponentValue;
+                    );
 
-                    if (logging)
-                        console.log(
-                            `Converted value for ${componentName} on ${key}:`,
-                            convertedValue
-                        );
+                const convertedValue = convertValues(
+                    recsComponent.schema,
+                    rawValue
+                ) as ComponentValue;
 
-                    if (!convertedValue) {
-                        console.error(
-                            `convertValues returned undefined or invalid for ${componentName} on ${key}`
-                        );
-                    }
-
-                    if (hasComponent(recsComponent, key as Entity)) {
-                        updateComponent(
-                            recsComponent,
-                            key as Entity,
-                            convertedValue as Partial<ComponentValue>,
-                            getComponentValue(recsComponent, key as Entity)
-                        );
-                        if (logging)
-                            console.log(
-                                `Update component ${recsComponent.metadata?.name} on ${key}`
-                            );
-                        continue;
-                    }
-                    setComponent(recsComponent, key as Entity, convertedValue);
+                if (logging)
+                    console.log(
+                        `Converted value for ${componentName} on ${key}:`,
+                        convertedValue
+                    );
+
+                if (!convertedValue) {
+                    console.error(
+                        `convertValues returned undefined or invalid for ${componentName} on ${key}`
+                    );
+                }
 
+                if (hasComponent(recsComponent, key as Entity)) {
+                    updateComponent(
+                        recsComponent,
+                        key as Entity,
+                        convertedValue as Partial<ComponentValue>,
+                        getComponentValue(recsComponent, key as Entity)
+                    );
                     if (logging)
                         console.log(
-                            `Set component ${recsComponent.metadata?.name} on ${key}`
+                            `Update component ${recsComponent.metadata?.name} on ${key}`
                         );
-                } catch (error) {
-                    console.warn(
-                        `Failed to set component ${recsComponent.metadata?.name} on ${key}`,
-                        error
-                    );
+                    continue;
                 }
-            } else {
+                setComponent(recsComponent, key as Entity, convertedValue);
+
                 if (logging)
-                    console.warn(
-                        `Component ${componentName} not found in provided components.`
+                    console.log(
+                        `Set component ${recsComponent.metadata?.name} on ${key}`
                     );
+            } catch (error) {
+                console.warn(
+                    `Failed to set component ${recsComponent.metadata?.name} on ${key}`,
+                    error
+                );
             }
         }
     }