refactor(store-sync): move syncToZustand to new config (#2936)

latticexyz · Jul 11, 2024 · 9e05278 · 9e05278
1 parent 811049a
commit 9e05278
Show file tree

Hide file tree

Showing 16 changed files with 208 additions and 89 deletions.
diff --git a/.changeset/flat-swans-turn.md b/.changeset/flat-swans-turn.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/store-sync": patch
+---
+
+Refactored `syncToZustand` to use new Store config under the hood, removing compatibility layers and improving performance.
diff --git a/.changeset/orange-beans-allow.md b/.changeset/orange-beans-allow.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/dev-tools": patch
+---
+
+Updated Zustand components after changes to `syncToZustand`.
diff --git a/packages/config/src/common.ts b/packages/config/src/common.ts
@@ -31,3 +31,7 @@ export type Table = {
   readonly schema: Schema;
   readonly key: readonly string[];
 };
+
+export type Tables = {
+  readonly [label: string]: Table;
+};
diff --git a/packages/config/src/exports/index.ts b/packages/config/src/exports/index.ts
@@ -4,4 +4,4 @@
  * Be sure we're ready to commit to these being supported and changes made backward compatible!
  */
 
-export type { AbiType, StaticAbiType, DynamicAbiType, Schema, Table } from "../common";
+export type { AbiType, StaticAbiType, DynamicAbiType, Schema, Table, Tables } from "../common";
diff --git a/packages/dev-tools/src/zustand/TableDataTable.tsx b/packages/dev-tools/src/zustand/TableDataTable.tsx
@@ -1,6 +1,6 @@
-import { Table } from "@latticexyz/store/internal";
 import { useRecords } from "./useRecords";
 import { FieldValue } from "./FieldValue";
+import { Table } from "@latticexyz/store-sync/zustand";
 
 // TODO: use react-table or similar for better perf with lots of logs
 
@@ -15,12 +15,7 @@ export function TableDataTable({ table }: Props) {
     <table className="w-full -mx-1">
       <thead className="sticky top-0 z-10 bg-slate-800 text-left">
         <tr className="text-amber-200/80 font-mono">
-          {Object.keys(table.keySchema).map((name) => (
-            <th key={name} className="px-1.5 pt-1.5 font-normal">
-              {name}
-            </th>
-          ))}
-          {Object.keys(table.valueSchema).map((name) => (
+          {Object.keys(table.schema).map((name) => (
             <th key={name} className="px-1.5 pt-1.5 font-normal">
               {name}
             </th>
@@ -31,14 +26,9 @@ export function TableDataTable({ table }: Props) {
         {records.map((record) => {
           return (
             <tr key={record.id}>
-              {Object.keys(table.keySchema).map((name) => (
-                <td key={name} className="px-1.5 whitespace-nowrap overflow-hidden text-ellipsis">
-                  <FieldValue value={record.key[name]} />
-                </td>
-              ))}
-              {Object.keys(table.valueSchema).map((name) => (
+              {Object.keys(table.schema).map((name) => (
                 <td key={name} className="px-1.5 whitespace-nowrap overflow-hidden text-ellipsis">
-                  <FieldValue value={record.value[name]} />
+                  <FieldValue value={record.fields[name]} />
                 </td>
               ))}
             </tr>

diff --git a/packages/dev-tools/src/zustand/useRecords.ts b/packages/dev-tools/src/zustand/useRecords.ts
@@ -1,7 +1,6 @@
-import { Table } from "@latticexyz/store/internal";
 import { useDevToolsContext } from "../DevToolsContext";
 import { useEffect, useState } from "react";
-import { TableRecord } from "@latticexyz/store-sync/zustand";
+import { Table, TableRecord } from "@latticexyz/store-sync/zustand";
 
 export function useRecords<table extends Table>(table: table): TableRecord<table>[] {
   const { useStore } = useDevToolsContext();

diff --git a/packages/dev-tools/src/zustand/useTables.ts b/packages/dev-tools/src/zustand/useTables.ts
@@ -1,6 +1,6 @@
-import { Table } from "@latticexyz/store/internal";
 import { useDevToolsContext } from "../DevToolsContext";
 import { useEffect, useState } from "react";
+import { Table } from "@latticexyz/store-sync/zustand";
 
 export function useTables(): Table[] {
   const { useStore } = useDevToolsContext();

diff --git a/packages/protocol-parser/src/common.ts b/packages/protocol-parser/src/common.ts
@@ -30,6 +30,7 @@ export type KeySchema<userTypes extends UserTypes | undefined = undefined> = Rec
   string,
   userTypes extends UserTypes ? StaticAbiType | keyof userTypes : StaticAbiType
 >;
+
 export type ValueSchema<userTypes extends UserTypes | undefined = undefined> = Record<
   string,
   userTypes extends UserTypes ? SchemaAbiType | keyof userTypes : SchemaAbiType

diff --git a/packages/store-sync/src/zustand/common.ts b/packages/store-sync/src/zustand/common.ts
@@ -1,4 +1,5 @@
-import { Table, SchemaToPrimitives } from "@latticexyz/store/internal";
+import { Table } from "@latticexyz/config";
+import { SchemaToPrimitives, getKeySchema, getSchemaTypes, getValueSchema } from "@latticexyz/protocol-parser/internal";
 import { Hex } from "viem";
 
 export type RawRecord = {
@@ -16,6 +17,9 @@ export type TableRecord<table extends Table = Table> = {
   readonly id: string;
   readonly table: table;
   readonly keyTuple: readonly Hex[];
-  readonly key: SchemaToPrimitives<table["keySchema"]>;
-  readonly value: SchemaToPrimitives<table["valueSchema"]>;
+  readonly key: SchemaToPrimitives<getSchemaTypes<getKeySchema<table>>>;
+  readonly value: SchemaToPrimitives<getSchemaTypes<getValueSchema<table>>>;
+  readonly fields: SchemaToPrimitives<getSchemaTypes<table["schema"]>>;
 };
+
+export type { Table };
diff --git a/packages/store-sync/src/zustand/createStorageAdapter.test.ts b/packages/store-sync/src/zustand/createStorageAdapter.test.ts
@@ -2,7 +2,7 @@ import { beforeAll, describe, expect, it } from "vitest";
 import { storeEventsAbi } from "@latticexyz/store";
 import { createStorageAdapter } from "./createStorageAdapter";
 import { createStore } from "./createStore";
-import { config, deployMockGame } from "../../test/mockGame";
+import { configV2 as config, deployMockGame } from "../../test/mockGame";
 import { fetchAndStoreLogs } from "../fetchAndStoreLogs";
 import { testClient } from "../../test/common";
 import { getBlockNumber } from "viem/actions";
@@ -34,6 +34,11 @@ describe("createStorageAdapter", async () => {
     expect(useStore.getState().getRecords(config.tables.Position)).toMatchInlineSnapshot(`
       {
         "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000078cf0753dd50f7c56f20b3ae02719ea199be2eb": {
+          "fields": {
+            "player": "0x078cf0753dd50f7C56F20B3Ae02719EA199BE2eb",
+            "x": 3,
+            "y": 5,
+          },
           "id": "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000078cf0753dd50f7c56f20b3ae02719ea199be2eb",
           "key": {
             "player": "0x078cf0753dd50f7C56F20B3Ae02719EA199BE2eb",
@@ -42,16 +47,25 @@ describe("createStorageAdapter", async () => {
             "0x000000000000000000000000078cf0753dd50f7c56f20b3ae02719ea199be2eb",
           ],
           "table": {
-            "keySchema": {
+            "codegen": {
+              "dataStruct": true,
+              "outputDirectory": "tables",
+              "storeArgument": false,
+              "tableIdArgument": false,
+            },
+            "deploy": {
+              "disabled": false,
+            },
+            "key": [
+              "player",
+            ],
+            "name": "Position",
+            "namespace": "",
+            "schema": {
               "player": {
                 "internalType": "address",
                 "type": "address",
               },
-            },
-            "name": "Position",
-            "namespace": "",
-            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
-            "valueSchema": {
               "x": {
                 "internalType": "int32",
                 "type": "int32",
@@ -61,13 +75,20 @@ describe("createStorageAdapter", async () => {
                 "type": "int32",
               },
             },
+            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
+            "type": "table",
           },
           "value": {
             "x": 3,
             "y": 5,
           },
         },
         "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x0000000000000000000000001d96f2f6bef1202e4ce1ff6dad0c2cb002861d3e": {
+          "fields": {
+            "player": "0x1D96F2f6BeF1202E4Ce1Ff6Dad0c2CB002861d3e",
+            "x": 1,
+            "y": -1,
+          },
           "id": "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x0000000000000000000000001d96f2f6bef1202e4ce1ff6dad0c2cb002861d3e",
           "key": {
             "player": "0x1D96F2f6BeF1202E4Ce1Ff6Dad0c2CB002861d3e",
@@ -76,16 +97,25 @@ describe("createStorageAdapter", async () => {
             "0x0000000000000000000000001d96f2f6bef1202e4ce1ff6dad0c2cb002861d3e",
           ],
           "table": {
-            "keySchema": {
+            "codegen": {
+              "dataStruct": true,
+              "outputDirectory": "tables",
+              "storeArgument": false,
+              "tableIdArgument": false,
+            },
+            "deploy": {
+              "disabled": false,
+            },
+            "key": [
+              "player",
+            ],
+            "name": "Position",
+            "namespace": "",
+            "schema": {
               "player": {
                 "internalType": "address",
                 "type": "address",
               },
-            },
-            "name": "Position",
-            "namespace": "",
-            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
-            "valueSchema": {
               "x": {
                 "internalType": "int32",
                 "type": "int32",
@@ -95,13 +125,20 @@ describe("createStorageAdapter", async () => {
                 "type": "int32",
               },
             },
+            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
+            "type": "table",
           },
           "value": {
             "x": 1,
             "y": -1,
           },
         },
         "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000328809bc894f92807417d2dad6b7c998c1afdac6": {
+          "fields": {
+            "player": "0x328809Bc894f92807417D2dAD6b7C998c1aFdac6",
+            "x": 3,
+            "y": 5,
+          },
           "id": "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000328809bc894f92807417d2dad6b7c998c1afdac6",
           "key": {
             "player": "0x328809Bc894f92807417D2dAD6b7C998c1aFdac6",
@@ -110,16 +147,25 @@ describe("createStorageAdapter", async () => {
             "0x000000000000000000000000328809bc894f92807417d2dad6b7c998c1afdac6",
           ],
           "table": {
-            "keySchema": {
+            "codegen": {
+              "dataStruct": true,
+              "outputDirectory": "tables",
+              "storeArgument": false,
+              "tableIdArgument": false,
+            },
+            "deploy": {
+              "disabled": false,
+            },
+            "key": [
+              "player",
+            ],
+            "name": "Position",
+            "namespace": "",
+            "schema": {
               "player": {
                 "internalType": "address",
                 "type": "address",
               },
-            },
-            "name": "Position",
-            "namespace": "",
-            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
-            "valueSchema": {
               "x": {
                 "internalType": "int32",
                 "type": "int32",
@@ -129,13 +175,20 @@ describe("createStorageAdapter", async () => {
                 "type": "int32",
               },
             },
+            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
+            "type": "table",
           },
           "value": {
             "x": 3,
             "y": 5,
           },
         },
         "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000dba86119a787422c593cef119e40887f396024e2": {
+          "fields": {
+            "player": "0xdBa86119a787422C593ceF119E40887f396024E2",
+            "x": 100,
+            "y": 100,
+          },
           "id": "0x74620000000000000000000000000000506f736974696f6e0000000000000000:0x000000000000000000000000dba86119a787422c593cef119e40887f396024e2",
           "key": {
             "player": "0xdBa86119a787422C593ceF119E40887f396024E2",
@@ -144,16 +197,25 @@ describe("createStorageAdapter", async () => {
             "0x000000000000000000000000dba86119a787422c593cef119e40887f396024e2",
           ],
           "table": {
-            "keySchema": {
+            "codegen": {
+              "dataStruct": true,
+              "outputDirectory": "tables",
+              "storeArgument": false,
+              "tableIdArgument": false,
+            },
+            "deploy": {
+              "disabled": false,
+            },
+            "key": [
+              "player",
+            ],
+            "name": "Position",
+            "namespace": "",
+            "schema": {
               "player": {
                 "internalType": "address",
                 "type": "address",
               },
-            },
-            "name": "Position",
-            "namespace": "",
-            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
-            "valueSchema": {
               "x": {
                 "internalType": "int32",
                 "type": "int32",
@@ -163,6 +225,8 @@ describe("createStorageAdapter", async () => {
                 "type": "int32",
               },
             },
+            "tableId": "0x74620000000000000000000000000000506f736974696f6e0000000000000000",
+            "type": "table",
           },
           "value": {
             "x": 100,

diff --git a/packages/store-sync/src/zustand/createStorageAdapter.ts b/packages/store-sync/src/zustand/createStorageAdapter.ts
@@ -1,14 +1,20 @@
-import { Tables } from "@latticexyz/store/internal";
 import { StorageAdapter } from "../common";
 import { RawRecord, TableRecord } from "./common";
 import { ZustandStore } from "./createStore";
 import { hexToResource, resourceToLabel, spliceHex } from "@latticexyz/common";
 import { debug } from "./debug";
 import { getId } from "./getId";
 import { size } from "viem";
-import { decodeKey, decodeValueArgs } from "@latticexyz/protocol-parser/internal";
-import { flattenSchema } from "../flattenSchema";
+import {
+  KeySchema,
+  decodeKey,
+  decodeValueArgs,
+  getKeySchema,
+  getSchemaTypes,
+  getValueSchema,
+} from "@latticexyz/protocol-parser/internal";
 import { isDefined } from "@latticexyz/common/utils";
+import { Tables } from "@latticexyz/config";
 
 export type CreateStorageAdapterOptions<tables extends Tables> = {
   store: ZustandStore<tables>;
@@ -131,14 +137,21 @@ export function createStorageAdapter<tables extends Tables>({
               return;
             }
             // TODO: warn if no table
+
+            // TODO: update decodeKey to use more recent types
+            const key = decodeKey(getSchemaTypes(getKeySchema(table)) as KeySchema, rawRecord.keyTuple);
+            // TODO: update decodeValueArgs to use more recent types
+            const value = decodeValueArgs(getSchemaTypes(getValueSchema(table)), rawRecord);
+
             return [
               id,
               {
                 id,
                 table: store.getState().tables[rawRecord.tableId],
                 keyTuple: rawRecord.keyTuple,
-                key: decodeKey(flattenSchema(table.keySchema), rawRecord.keyTuple),
-                value: decodeValueArgs(flattenSchema(table.valueSchema), rawRecord),
+                key,
+                value,
+                fields: { ...key, ...value },
               } satisfies TableRecord,
             ];
           })
-Original file line number
+Diff line change
@@ Expand Up @@
       string,
       userTypes extends UserTypes ? StaticAbiType | keyof userTypes : StaticAbiType
     >;
     export type ValueSchema<userTypes extends UserTypes | undefined = undefined> = Record<
       string,
       userTypes extends UserTypes ? SchemaAbiType | keyof userTypes : SchemaAbiType
@@ Expand Down @@