feat(cli,recs,std-client): update RECS components with v2 key/value schemas

.changeset/weak-mails-cross.md

@@ -0,0 +1,15 @@
+---
+"@latticexyz/cli": patch
+"@latticexyz/recs": patch
+"@latticexyz/std-client": patch
+---
+
+Update RECS components with v2 key/value schemas. This helps with encoding/decoding composite keys and strong types for keys/values.
+
+This may break if you were previously dependent on `component.id`, `component.metadata.componentId`, or `component.metadata.tableId`:
+
+- `component.id` is now the on-chain `bytes32` hex representation of the table ID
+- `component.metadata.componentName` is the table name (e.g. `Position`)
+- `component.metadata.tableName` is the namespaced table name (e.g. `myworld:Position`)
+- `component.metadata.keySchema` is an object with key names and their corresponding ABI types
+- `component.metadata.valueSchema` is an object with field names and their corresponding ABI types

e2e/packages/client-vanilla/src/mud/contractComponents.ts

@@ -1,70 +1,77 @@
 /* Autogenerated file. Do not edit manually. */
 
-import { TableId } from "@latticexyz/common";
 import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
 
 export function defineContractComponents(world: World) {
   return {
     Number: (() => {
-      const tableId = new TableId("", "Number");
       return defineComponent(
         world,
         {
           value: RecsType.Number,
         },
         {
+          id: "0x000000000000000000000000000000004e756d62657200000000000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Number",
+            tableName: ":Number",
+            keySchema: { key: "uint32" },
+            valueSchema: { value: "uint32" },
           },
-        }
+        } as const
       );
     })(),
     Vector: (() => {
-      const tableId = new TableId("", "Vector");
       return defineComponent(
         world,
         {
           x: RecsType.Number,
           y: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000566563746f7200000000000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Vector",
+            tableName: ":Vector",
+            keySchema: { key: "uint32" },
+            valueSchema: { x: "int32", y: "int32" },
           },
-        }
+        } as const
       );
     })(),
     NumberList: (() => {
-      const tableId = new TableId("", "NumberList");
       return defineComponent(
         world,
         {
           value: RecsType.NumberArray,
         },
         {
+          id: "0x000000000000000000000000000000004e756d6265724c697374000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "NumberList",
+            tableName: ":NumberList",
+            keySchema: {},
+            valueSchema: { value: "uint32[]" },
           },
-        }
+        } as const
       );
     })(),
     Multi: (() => {
-      const tableId = new TableId("", "Multi");
       return defineComponent(
         world,
         {
           num: RecsType.BigInt,
           value: RecsType.Boolean,
         },
         {
+          id: "0x000000000000000000000000000000004d756c74690000000000000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Multi",
+            tableName: ":Multi",
+            keySchema: { a: "uint32", b: "bool", c: "uint256", d: "int120" },
+            valueSchema: { num: "int256", value: "bool" },
           },
-        }
+        } as const
       );
     })(),
   };

examples/minimal/packages/client-phaser/src/mud/contractComponents.ts

@@ -1,53 +1,62 @@
 /* Autogenerated file. Do not edit manually. */
 
-import { TableId } from "@latticexyz/common";
 import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
 
 export function defineContractComponents(world: World) {
   return {
     CounterTable: (() => {
-      const tableId = new TableId("", "CounterTable");
       return defineComponent(
         world,
         {
           value: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000436f756e7465725461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "CounterTable",
+            tableName: ":CounterTable",
+            keySchema: { key: "bytes32" },
+            valueSchema: { value: "uint32" },
           },
-        }
+        } as const
       );
     })(),
     MessageTable: (() => {
-      const tableId = new TableId("", "MessageTable");
       return defineComponent(
         world,
         {
           value: RecsType.String,
         },
         {
+          id: "0x000000000000000000000000000000004d6573736167655461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "MessageTable",
+            tableName: ":MessageTable",
+            keySchema: {},
+            valueSchema: { value: "string" },
           },
-        }
+        } as const
       );
     })(),
     Inventory: (() => {
-      const tableId = new TableId("", "Inventory");
       return defineComponent(
         world,
         {
           amount: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000496e76656e746f727900000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Inventory",
+            tableName: ":Inventory",
+            keySchema: {
+              owner: "address",
+              item: "uint32",
+              itemVariant: "uint32",
+            },
+            valueSchema: { amount: "uint32" },
           },
-        }
+        } as const
       );
     })(),
   };

examples/minimal/packages/client-react/src/mud/contractComponents.ts

@@ -1,53 +1,62 @@
 /* Autogenerated file. Do not edit manually. */
 
-import { TableId } from "@latticexyz/common";
 import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
 
 export function defineContractComponents(world: World) {
   return {
     CounterTable: (() => {
-      const tableId = new TableId("", "CounterTable");
       return defineComponent(
         world,
         {
           value: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000436f756e7465725461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "CounterTable",
+            tableName: ":CounterTable",
+            keySchema: { key: "bytes32" },
+            valueSchema: { value: "uint32" },
           },
-        }
+        } as const
       );
     })(),
     MessageTable: (() => {
-      const tableId = new TableId("", "MessageTable");
       return defineComponent(
         world,
         {
           value: RecsType.String,
         },
         {
+          id: "0x000000000000000000000000000000004d6573736167655461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "MessageTable",
+            tableName: ":MessageTable",
+            keySchema: {},
+            valueSchema: { value: "string" },
           },
-        }
+        } as const
       );
     })(),
     Inventory: (() => {
-      const tableId = new TableId("", "Inventory");
       return defineComponent(
         world,
         {
           amount: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000496e76656e746f727900000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Inventory",
+            tableName: ":Inventory",
+            keySchema: {
+              owner: "address",
+              item: "uint32",
+              itemVariant: "uint32",
+            },
+            valueSchema: { amount: "uint32" },
           },
-        }
+        } as const
       );
     })(),
   };

examples/minimal/packages/client-vanilla/src/mud/contractComponents.ts

@@ -1,53 +1,62 @@
 /* Autogenerated file. Do not edit manually. */
 
-import { TableId } from "@latticexyz/common";
 import { defineComponent, Type as RecsType, World } from "@latticexyz/recs";
 
 export function defineContractComponents(world: World) {
   return {
     CounterTable: (() => {
-      const tableId = new TableId("", "CounterTable");
       return defineComponent(
         world,
         {
           value: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000436f756e7465725461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "CounterTable",
+            tableName: ":CounterTable",
+            keySchema: { key: "bytes32" },
+            valueSchema: { value: "uint32" },
           },
-        }
+        } as const
       );
     })(),
     MessageTable: (() => {
-      const tableId = new TableId("", "MessageTable");
       return defineComponent(
         world,
         {
           value: RecsType.String,
         },
         {
+          id: "0x000000000000000000000000000000004d6573736167655461626c6500000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "MessageTable",
+            tableName: ":MessageTable",
+            keySchema: {},
+            valueSchema: { value: "string" },
           },
-        }
+        } as const
       );
     })(),
     Inventory: (() => {
-      const tableId = new TableId("", "Inventory");
       return defineComponent(
         world,
         {
           amount: RecsType.Number,
         },
         {
+          id: "0x00000000000000000000000000000000496e76656e746f727900000000000000",
           metadata: {
-            contractId: tableId.toHex(),
-            tableId: tableId.toString(),
+            componentName: "Inventory",
+            tableName: ":Inventory",
+            keySchema: {
+              owner: "address",
+              item: "uint32",
+              itemVariant: "uint32",
+            },
+            valueSchema: { amount: "uint32" },
           },
-        }
+        } as const
       );
     })(),
   };

packages/cli/src/render-ts/recsV1TableOptions.ts

@@ -2,6 +2,8 @@ import { StoreConfig } from "@latticexyz/store";
 import { resolveAbiOrUserType } from "@latticexyz/store/codegen";
 import { schemaTypesToRecsTypeStrings } from "./schemaTypesToRecsTypeStrings";
 import { RecsV1TableOptions } from "./types";
+import { SchemaTypeToAbiType } from "@latticexyz/schema-type/deprecated";
+import { StaticAbiType } from "@latticexyz/schema-type";
 
 export function getRecsV1TableOptions(config: StoreConfig): RecsV1TableOptions {
   const tableOptions = [];
@@ -27,8 +29,24 @@ export function getRecsV1TableOptions(config: StoreConfig): RecsV1TableOptions {
       name: tableData.name,
     };
 
+    // TODO: move user type -> abi type into our config expanding step rather than sprinkled everywhere (https://github.com/latticexyz/mud/issues/1201)
+    const keySchema = Object.fromEntries(
+      Object.entries(tableData.keySchema).map(([name, type]) => [
+        name,
+        SchemaTypeToAbiType[resolveAbiOrUserType(type, config).schemaType] as StaticAbiType,
+      ])
+    );
+    const valueSchema = Object.fromEntries(
+      Object.entries(tableData.schema).map(([name, type]) => [
+        name,
+        SchemaTypeToAbiType[resolveAbiOrUserType(type, config).schemaType],
+      ])
+    );
+
     tableOptions.push({
       tableName,
+      keySchema,
+      valueSchema,
       fields,
       staticResourceData,
     });