fix(vite-plugin-mud): start block as number (#3555)

Author: frolic

.changeset/eight-starfishes-tell.md

@@ -0,0 +1,6 @@
+---
+"create-mud": patch
+"vite-plugin-mud": patch
+---
+
+Fixed an issue with providing world deploy's start block to Vite app's env.

packages/vite-plugin-mud/README.md

@@ -4,11 +4,11 @@ Vite plugin for MUD projects.
 
 This plugin will use your environment's `VITE_CHAIN_ID` to load the world deploy from your `worlds.json` file and provide it to your app via new environment variables.
 
-| Variable                        | Type                  | Description                                                |
-| ------------------------------- | --------------------- | ---------------------------------------------------------- |
-| `import.meta.env.CHAIN_ID`      | `number`              | The configured chain ID.                                   |
-| `import.meta.env.WORLD_ADDRESS` | `Hex \| undefined`    | The world contract address (if available).                 |
-| `import.meta.env.START_BLOCK`   | `bigint \| undefined` | The block number the world was deployed at (if available). |
+| Variable                        | Type                  | Description                                          |
+| ------------------------------- | --------------------- | ---------------------------------------------------- |
+| `import.meta.env.CHAIN_ID`      | `number`              | The configured chain ID.                             |
+| `import.meta.env.WORLD_ADDRESS` | `Hex \| undefined`    | The world contract address (if available).           |
+| `import.meta.env.START_BLOCK`   | `number \| undefined` | The block number of the world deploy (if available). |
 
 ## Installation
 

packages/vite-plugin-mud/env.d.ts

@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
   readonly CHAIN_ID: number;
   readonly WORLD_ADDRESS: `0x${string}` | undefined;
-  readonly START_BLOCK: bigint | undefined;
+  readonly START_BLOCK: number | undefined;
 }

packages/vite-plugin-mud/src/plugin.ts

@@ -15,7 +15,7 @@ export function mud(opts: { worldsFile: string }): Plugin {
       const chainId = Number(env.VITE_CHAIN_ID) || 31337;
 
       config.define ??= {};
-      config.define["import.meta.env.CHAIN_ID"] = chainId;
+      config.define["import.meta.env.CHAIN_ID"] = JSON.stringify(chainId);
 
       if (!(await isReadable(worldsFile))) {
         console.log("no worlds file");
@@ -29,7 +29,8 @@ export function mud(opts: { worldsFile: string }): Plugin {
       const world = worlds[chainId];
       if (world) {
         config.define["import.meta.env.WORLD_ADDRESS"] = JSON.stringify(world.address);
-        config.define["import.meta.env.START_BLOCK"] = world.blockNumber != null ? `${world.blockNumber}n` : undefined;
+        config.define["import.meta.env.START_BLOCK"] =
+          world.blockNumber != null ? JSON.stringify(world.blockNumber) : undefined;
       } else {
         console.log("no world deploy for chain ID", chainId);
       }

templates/react-ecs/packages/client/src/common.ts

@@ -4,7 +4,7 @@ import { Chain, Hex } from "viem";
 
 export const chainId = import.meta.env.CHAIN_ID;
 export const worldAddress = import.meta.env.WORLD_ADDRESS;
-export const startBlock = import.meta.env.START_BLOCK;
+export const startBlock = BigInt(import.meta.env.START_BLOCK ?? 0n);
 
 export const url = new URL(window.location.href);
 

templates/react/packages/client/src/common.ts

@@ -4,7 +4,7 @@ import { Chain } from "viem";
 
 export const chainId = import.meta.env.CHAIN_ID;
 export const worldAddress = import.meta.env.WORLD_ADDRESS;
-export const startBlock = import.meta.env.START_BLOCK;
+export const startBlock = BigInt(import.meta.env.START_BLOCK ?? 0n);
 
 export const url = new URL(window.location.href);