feat(create-mud): infer recs components from config (#1278)

Co-authored-by: alvarius <alvarius@lattice.xyz>

.changeset/pretty-hotels-drop.md

@@ -0,0 +1,26 @@
+---
+"@latticexyz/cli": major
+"@latticexyz/std-client": major
+"@latticexyz/store-sync": major
+"@latticexyz/store": patch
+"@latticexyz/world": patch
+"create-mud": major
+---
+
+RECS components are now dynamically created and inferred from your MUD config when using `syncToRecs`.
+
+To migrate existing projects after upgrading to this MUD version:
+
+1. Remove `contractComponents.ts` from `client/src/mud`
+2. Remove `components` argument from `syncToRecs`
+3. Update `build:mud` and `dev` scripts in `contracts/package.json` to remove tsgen
+
+   ```diff
+   - "build:mud": "mud tablegen && mud worldgen && mud tsgen --configPath mud.config.ts --out ../client/src/mud",
+   + "build:mud": "mud tablegen && mud worldgen",
+   ```
+
+   ```diff
+   - "dev": "pnpm mud dev-contracts --tsgenOutput ../client/src/mud",
+   + "dev": "pnpm mud dev-contracts",
+   ```

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

@@ -2,7 +2,6 @@ import { createPublicClient, http, createWalletClient, Hex, parseEther, ClientCo
 import { createFaucetService } from "@latticexyz/network";
 import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
-import { defineContractComponents } from "./contractComponents";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
 import storeConfig from "contracts/mud.config";
@@ -11,7 +10,6 @@ import { createBurnerAccount, createContract, transportObserver } from "@lattice
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
 export async function setupNetwork() {
-  const contractComponents = defineContractComponents(world);
   const networkConfig = await getNetworkConfig();
 
   const clientOptions = {
@@ -42,7 +40,6 @@ export async function setupNetwork() {
     config: storeConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
-    components: contractComponents,
     startBlock: BigInt(networkConfig.initialBlockNumber),
     indexerUrl: networkConfig.indexerUrl ?? undefined,
   });

e2e/packages/contracts/package.json

@@ -6,15 +6,14 @@
   "scripts": {
     "build": "pnpm run build:mud && pnpm run build:abi && pnpm run build:typechain",
     "build:abi": "forge build --extra-output-files abi --out abi --skip test script",
-    "build:mud": "mud tablegen && mud worldgen && pnpm run tsgen",
+    "build:mud": "mud tablegen && mud worldgen",
     "build:typechain": "typechain --target=ethers-v5 abi/IWorld.sol/IWorld.json",
     "clean": "pnpm run clean:abi && pnpm run clean:mud && pnpm run clean:typechain",
     "clean:abi": "rimraf abi",
     "clean:mud": "rimraf src/codegen",
     "clean:typechain": "rimraf types",
     "deploy:local": "mud deploy",
-    "test": "mud test",
-    "tsgen": "mud tsgen --configPath mud.config.ts --out ../client-vanilla/src/mud"
+    "test": "mud test"
   },
   "devDependencies": {
     "@latticexyz/cli": "link:../../../packages/cli",

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

@@ -2,7 +2,6 @@ import { createPublicClient, fallback, webSocket, http, createWalletClient, Hex,
 import { createFaucetService } from "@latticexyz/network";
 import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
-import { defineContractComponents } from "./contractComponents";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
 import storeConfig from "contracts/mud.config";
@@ -11,7 +10,6 @@ import { createBurnerAccount, createContract, transportObserver } from "@lattice
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
 export async function setupNetwork() {
-  const contractComponents = defineContractComponents(world);
   const networkConfig = await getNetworkConfig();
 
   const clientOptions = {
@@ -40,7 +38,6 @@ export async function setupNetwork() {
     config: storeConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
-    components: contractComponents,
     startBlock: BigInt(networkConfig.initialBlockNumber),
   });
 

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

@@ -2,7 +2,6 @@ import { createPublicClient, fallback, webSocket, http, createWalletClient, Hex,
 import { createFaucetService } from "@latticexyz/network";
 import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
 import { getNetworkConfig } from "./getNetworkConfig";
-import { defineContractComponents } from "./contractComponents";
 import { world } from "./world";
 import { IWorld__factory } from "contracts/types/ethers-contracts/factories/IWorld__factory";
 import storeConfig from "contracts/mud.config";
@@ -11,7 +10,6 @@ import { createBurnerAccount, createContract, transportObserver } from "@lattice
 export type SetupNetworkResult = Awaited<ReturnType<typeof setupNetwork>>;
 
 export async function setupNetwork() {
-  const contractComponents = defineContractComponents(world);
   const networkConfig = await getNetworkConfig();
 
   const clientOptions = {
@@ -33,7 +31,6 @@ export async function setupNetwork() {
     config: storeConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
-    components: contractComponents,
     startBlock: BigInt(networkConfig.initialBlockNumber),
   });