@latticexyz/recs 2.0.0-main-35c9f33d → 2.0.0-main-788de8de

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## 2.0.0-main-35c9f33d
+## 2.0.0-main-788de8de
 
 ### Patch Changes
 
@@ -204,8 +204,213 @@
   - `component.metadata.valueSchema` is an object with field names and their corresponding ABI types
 
 - Updated dependencies [[`48909d15`](https://github.com/latticexyz/mud/commit/48909d151b3dfceab128c120bc6bb77de53c456b), [`b02f9d0e`](https://github.com/latticexyz/mud/commit/b02f9d0e43089e5f9b46d817ea2032ce0a1b0b07), [`f03531d9`](https://github.com/latticexyz/mud/commit/f03531d97c999954a626ef63bc5bbae51a7b90f3), [`4e4a3415`](https://github.com/latticexyz/mud/commit/4e4a34150aeae988c8e61e25d55c227afb6c2d4b), [`53522998`](https://github.com/latticexyz/mud/commit/535229984565539e6168042150b45fe0f9b48b0f)]:
-  - @latticexyz/schema-type@2.0.0-main-35c9f33d
-  - @latticexyz/utils@2.0.0-main-35c9f33d
+  - @latticexyz/schema-type@2.0.0-main-788de8de
+  - @latticexyz/utils@2.0.0-main-788de8de
+
+## 2.0.0-next.1
+
+### Patch Changes
+
+- [#1214](https://github.com/latticexyz/mud/pull/1214) [`60cfd089`](https://github.com/latticexyz/mud/commit/60cfd089fc7a17b98864b631d265f36718df35a9) Thanks [@holic](https://github.com/holic)! - Templates and examples now use MUD's new sync packages, all built on top of [viem](https://viem.sh/). This greatly speeds up and stabilizes our networking code and improves types throughout.
+
+  These new sync packages come with support for our `recs` package, including `encodeEntity` and `decodeEntity` utilities for composite keys.
+
+  If you're using `store-cache` and `useRow`/`useRows`, you should wait to upgrade until we have a suitable replacement for those libraries. We're working on a [sql.js](https://github.com/sql-js/sql.js/)-powered sync module that will replace `store-cache`.
+
+  **Migrate existing RECS apps to new sync packages**
+
+  As you migrate, you may find some features replaced, removed, or not included by default. Please [open an issue](https://github.com/latticexyz/mud/issues/new) and let us know if we missed anything.
+
+  1. Add `@latticexyz/store-sync` package to your app's `client` package and make sure `viem` is pinned to version `1.3.1` (otherwise you may get type errors)
+
+  2. In your `supportedChains.ts`, replace `foundry` chain with our new `mudFoundry` chain.
+
+     ```diff
+     - import { foundry } from "viem/chains";
+     - import { MUDChain, latticeTestnet } from "@latticexyz/common/chains";
+     + import { MUDChain, latticeTestnet, mudFoundry } from "@latticexyz/common/chains";
+
+     - export const supportedChains: MUDChain[] = [foundry, latticeTestnet];
+     + export const supportedChains: MUDChain[] = [mudFoundry, latticeTestnet];
+     ```
+
+  3. In `getNetworkConfig.ts`, remove the return type (to let TS infer it for now), remove now-unused config values, and add the viem `chain` object.
+
+     ```diff
+     - export async function getNetworkConfig(): Promise<NetworkConfig> {
+     + export async function getNetworkConfig() {
+     ```
+
+     ```diff
+       const initialBlockNumber = params.has("initialBlockNumber")
+         ? Number(params.get("initialBlockNumber"))
+     -   : world?.blockNumber ?? -1; // -1 will attempt to find the block number from RPC
+     +   : world?.blockNumber ?? 0n;
+     ```
+
+     ```diff
+     + return {
+     +   privateKey: getBurnerWallet().value,
+     +   chain,
+     +   worldAddress,
+     +   initialBlockNumber,
+     +   faucetServiceUrl: params.get("faucet") ?? chain.faucetUrl,
+     + };
+     ```
+
+  4. In `setupNetwork.ts`, replace `setupMUDV2Network` with `syncToRecs`.
+
+     ```diff
+     - import { setupMUDV2Network } from "@latticexyz/std-client";
+     - import { createFastTxExecutor, createFaucetService, getSnapSyncRecords } from "@latticexyz/network";
+     + import { createFaucetService } from "@latticexyz/network";
+     + import { createPublicClient, fallback, webSocket, http, createWalletClient, getContract, Hex, parseEther, ClientConfig } from "viem";
+     + import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
+     + import { createBurnerAccount, createContract, transportObserver } from "@latticexyz/common";
+     ```
+
+     ```diff
+     - const result = await setupMUDV2Network({
+     -   ...
+     - });
+
+     + const clientOptions = {
+     +   chain: networkConfig.chain,
+     +   transport: transportObserver(fallback([webSocket(), http()])),
+     +   pollingInterval: 1000,
+     + } as const satisfies ClientConfig;
+
+     + const publicClient = createPublicClient(clientOptions);
+
+     + const burnerAccount = createBurnerAccount(networkConfig.privateKey as Hex);
+     + const burnerWalletClient = createWalletClient({
+     +   ...clientOptions,
+     +   account: burnerAccount,
+     + });
+
+     + const { components, latestBlock$, blockStorageOperations$, waitForTransaction } = await syncToRecs({
+     +   world,
+     +   config: storeConfig,
+     +   address: networkConfig.worldAddress as Hex,
+     +   publicClient,
+     +   components: contractComponents,
+     +   startBlock: BigInt(networkConfig.initialBlockNumber),
+     +   indexerUrl: networkConfig.indexerUrl ?? undefined,
+     + });
+
+     + const worldContract = createContract({
+     +   address: networkConfig.worldAddress as Hex,
+     +   abi: IWorld__factory.abi,
+     +   publicClient,
+     +   walletClient: burnerWalletClient,
+     + });
+     ```
+
+     ```diff
+       // Request drip from faucet
+     - const signer = result.network.signer.get();
+     - if (networkConfig.faucetServiceUrl && signer) {
+     -   const address = await signer.getAddress();
+     + if (networkConfig.faucetServiceUrl) {
+     +   const address = burnerAccount.address;
+     ```
+
+     ```diff
+       const requestDrip = async () => {
+     -   const balance = await signer.getBalance();
+     +   const balance = await publicClient.getBalance({ address });
+         console.info(`[Dev Faucet]: Player balance -> ${balance}`);
+     -   const lowBalance = balance?.lte(utils.parseEther("1"));
+     +   const lowBalance = balance < parseEther("1");
+     ```
+
+     You can remove the previous ethers `worldContract`, snap sync code, and fast transaction executor.
+
+     The return of `setupNetwork` is a bit different than before, so you may have to do corresponding app changes.
+
+     ```diff
+     + return {
+     +   world,
+     +   components,
+     +   playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
+     +   publicClient,
+     +   walletClient: burnerWalletClient,
+     +   latestBlock$,
+     +   blockStorageOperations$,
+     +   waitForTransaction,
+     +   worldContract,
+     + };
+     ```
+
+  5. Update `createSystemCalls` with the new return type of `setupNetwork`.
+
+     ```diff
+       export function createSystemCalls(
+     -   { worldSend, txReduced$, singletonEntity }: SetupNetworkResult,
+     +   { worldContract, waitForTransaction }: SetupNetworkResult,
+         { Counter }: ClientComponents
+       ) {
+          const increment = async () => {
+     -      const tx = await worldSend("increment", []);
+     -      await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
+     +      const tx = await worldContract.write.increment();
+     +      await waitForTransaction(tx);
+            return getComponentValue(Counter, singletonEntity);
+          };
+     ```
+
+  6. (optional) If you still need a clock, you can create it with:
+
+     ```ts
+     import { map, filter } from "rxjs";
+     import { createClock } from "@latticexyz/network";
+
+     const clock = createClock({
+       period: 1000,
+       initialTime: 0,
+       syncInterval: 5000,
+     });
+
+     world.registerDisposer(() => clock.dispose());
+
+     latestBlock$
+       .pipe(
+         map((block) => Number(block.timestamp) * 1000), // Map to timestamp in ms
+         filter((blockTimestamp) => blockTimestamp !== clock.lastUpdateTime), // Ignore if the clock was already refreshed with this block
+         filter((blockTimestamp) => blockTimestamp !== clock.currentTime) // Ignore if the current local timestamp is correct
+       )
+       .subscribe(clock.update); // Update the local clock
+     ```
+
+  If you're using the previous `LoadingState` component, you'll want to migrate to the new `SyncProgress`:
+
+  ```ts
+  import { SyncStep, singletonEntity } from "@latticexyz/store-sync/recs";
+
+  const syncProgress = useComponentValue(SyncProgress, singletonEntity, {
+    message: "Connecting",
+    percentage: 0,
+    step: SyncStep.INITIALIZE,
+  });
+
+  if (syncProgress.step === SyncStep.LIVE) {
+    // we're live!
+  }
+  ```
+
+- [#1195](https://github.com/latticexyz/mud/pull/1195) [`afdba793`](https://github.com/latticexyz/mud/commit/afdba793fd84abf17eef5ef59dd56fabe353c8bd) Thanks [@holic](https://github.com/holic)! - 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
+
+- Updated dependencies [[`b02f9d0e`](https://github.com/latticexyz/mud/commit/b02f9d0e43089e5f9b46d817ea2032ce0a1b0b07)]:
+  - @latticexyz/schema-type@2.0.0-next.1
+  - @latticexyz/utils@2.0.0-next.1
 
 ## 2.0.0-next.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latticexyz/recs",
-  "version": "2.0.0-main-35c9f33d",
+  "version": "2.0.0-main-788de8de",
   "repository": {
     "type": "git",
     "url": "https://github.com/latticexyz/mud.git",
@@ -15,8 +15,8 @@
   "dependencies": {
     "mobx": "^6.7.0",
     "rxjs": "7.5.5",
-    "@latticexyz/schema-type": "2.0.0-main-35c9f33d",
-    "@latticexyz/utils": "2.0.0-main-35c9f33d"
+    "@latticexyz/schema-type": "2.0.0-main-788de8de",
+    "@latticexyz/utils": "2.0.0-main-788de8de"
   },
   "devDependencies": {
     "@types/jest": "^27.4.1",