create-mud 2.0.0-next.12 → 2.0.0-next.13

package/dist/cli.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.0-next.12",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && ./scripts/copy-templates.sh",clean:"pnpm run clean:js","clean:js":"rimraf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && rimraf test-project","test:react":"dist/cli.js test-project --template react && rimraf test-project","test:threejs":"dist/cli.js test-project --template threejs && rimraf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && rimraf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"},gitHead:"914a1e0ae4a573d685841ca2ea921435057deb8f"};var i=(0,s.resolve)(__dirname,"..","dist","templates");(0,t.create)("create-mud",{templateRoot:i,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:r,packageManager:a})=>`Done! Play in the MUD with \`cd ${r.name}\` and \`${a} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:e.version}}});
+"use strict";var t=require("create-create-app"),s=require("path");var e={name:"create-mud",version:"2.0.0-next.13",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",bin:"dist/cli.js",files:["dist"],scripts:{build:"pnpm run build:js","build:js":"tsup && ./scripts/copy-templates.sh",clean:"pnpm run clean:js","clean:js":"rimraf dist",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs","test:ci":"pnpm run test","test:phaser":"dist/cli.js test-project --template phaser && rimraf test-project","test:react":"dist/cli.js test-project --template react && rimraf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && rimraf test-project","test:threejs":"dist/cli.js test-project --template threejs && rimraf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && rimraf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{"@types/node":"^18.15.11",tsup:"^6.7.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"},gitHead:"914a1e0ae4a573d685841ca2ea921435057deb8f"};var c=(0,s.resolve)(__dirname,"..","dist","templates");(0,t.create)("create-mud",{templateRoot:c,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:r,packageManager:a})=>`Done! Play in the MUD with \`cd ${r.name}\` and \`${a} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:e.version}}});

package/dist/templates/phaser/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["JuanBlanco.solidity"]
+  "recommendations": ["NomicFoundation.hardhat-solidity"]
 }

package/dist/templates/phaser/.vscode/settings.json

@@ -1,4 +1 @@
-{
-  "solidity.monoRepoSupport": true,
-  "solidity.compileUsingRemoteVersion": "v0.8.21+commit.d9974bed"
-}
+{}

package/dist/templates/phaser/mprocs.yaml

@@ -0,0 +1,7 @@
+procs:
+  contracts:
+    cwd: packages/contracts
+    shell: pnpm run dev
+  client:
+    cwd: packages/client
+    shell: pnpm run dev

package/dist/templates/phaser/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "build": "pnpm recursive run build",
-    "dev": "concurrently -n contracts,client -c cyan,magenta \"cd packages/contracts && pnpm run dev\" \"cd packages/client && pnpm run dev\"",
+    "dev": "mprocs",
     "dev:client": "pnpm --filter 'client' run dev",
     "dev:contracts": "pnpm --filter 'contracts' dev",
     "foundry:up": "curl -L https://foundry.paradigm.xyz | bash && bash $HOME/.foundry/bin/foundryup",
@@ -15,8 +15,8 @@
     "@latticexyz/cli": "{{mud-version}}",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
-    "concurrently": "^8.0.1",
     "eslint": "8.29.0",
+    "mprocs": "^0.6.4",
     "rimraf": "^3.0.2",
     "typescript": "5.1.6"
   },

package/dist/templates/phaser/packages/contracts/.env

@@ -4,5 +4,8 @@
 # your deployment enviroment, but we're including this here for ease of local
 # development. Please do not commit changes to this file!
 #
+# Enable debug logs for MUD CLI
+DEBUG=mud:*
+#
 # Anvil default private key:
 PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

package/dist/templates/phaser/packages/contracts/remappings.txt

@@ -1,3 +1,3 @@
-ds-test/=./node_modules/ds-test/src/
-forge-std/=./node_modules/forge-std/src/
-@latticexyz/=./node_modules/@latticexyz/
+ds-test/=node_modules/ds-test/src/
+forge-std/=node_modules/forge-std/src/
+@latticexyz/=node_modules/@latticexyz/

package/dist/templates/phaser/packages/contracts/script/PostDeploy.s.sol

@@ -3,10 +3,15 @@ pragma solidity >=0.8.21;
 
 import { Script } from "forge-std/Script.sol";
 import { console } from "forge-std/console.sol";
+import { StoreSwitch } from "@latticexyz/store/src/StoreSwitch.sol";
+
 import { IWorld } from "../src/codegen/world/IWorld.sol";
 
 contract PostDeploy is Script {
   function run(address worldAddress) external {
+    // Specify a store so that you can use tables directly in PostDeploy
+    StoreSwitch.setStoreAddress(worldAddress);
+
     // Load the private key from the `PRIVATE_KEY` environment variable (in .env)
     uint256 deployerPrivateKey = vm.envUint("PRIVATE_KEY");
 

package/dist/templates/react/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["JuanBlanco.solidity"]
+  "recommendations": ["NomicFoundation.hardhat-solidity"]
 }

package/dist/templates/react/.vscode/settings.json

@@ -1,4 +1 @@
-{
-  "solidity.monoRepoSupport": true,
-  "solidity.compileUsingRemoteVersion": "v0.8.21+commit.d9974bed"
-}
+{}

package/dist/templates/react/mprocs.yaml

@@ -0,0 +1,7 @@
+procs:
+  contracts:
+    cwd: packages/contracts
+    shell: pnpm run dev
+  client:
+    cwd: packages/client
+    shell: pnpm run dev

package/dist/templates/react/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "build": "pnpm recursive run build",
-    "dev": "concurrently -n contracts,client -c cyan,magenta \"cd packages/contracts && pnpm run dev\" \"cd packages/client && pnpm run dev\"",
+    "dev": "mprocs",
     "dev:client": "pnpm --filter 'client' run dev",
     "dev:contracts": "pnpm --filter 'contracts' dev",
     "foundry:up": "curl -L https://foundry.paradigm.xyz | bash && bash $HOME/.foundry/bin/foundryup",
@@ -15,8 +15,8 @@
     "@latticexyz/cli": "{{mud-version}}",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
-    "concurrently": "^8.0.1",
     "eslint": "8.29.0",
+    "mprocs": "^0.6.4",
     "rimraf": "^3.0.2",
     "typescript": "5.1.6"
   },

package/dist/templates/react/packages/client/package.json

@@ -14,7 +14,6 @@
     "@latticexyz/common": "{{mud-version}}",
     "@latticexyz/dev-tools": "{{mud-version}}",
     "@latticexyz/react": "{{mud-version}}",
-    "@latticexyz/recs": "{{mud-version}}",
     "@latticexyz/schema-type": "{{mud-version}}",
     "@latticexyz/services": "{{mud-version}}",
     "@latticexyz/store-sync": "{{mud-version}}",

package/dist/templates/react/packages/client/src/App.tsx

@@ -1,29 +1,105 @@
-import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./MUDContext";
-import { singletonEntity } from "@latticexyz/store-sync/recs";
+
+const styleUnset = { all: "unset" } as const;
 
 export const App = () => {
   const {
-    components: { Counter },
-    systemCalls: { increment },
+    network: { tables, useStore },
+    systemCalls: { addTask, toggleTask, deleteTask },
   } = useMUD();
 
-  const counter = useComponentValue(Counter, singletonEntity);
+  const tasks = useStore((state) => {
+    const records = Object.values(state.getRecords(tables.Tasks));
+    records.sort((a, b) => Number(a.value.createdAt - b.value.createdAt));
+    return records;
+  });
 
   return (
     <>
-      <div>
-        Counter: <span>{counter?.value ?? "??"}</span>
-      </div>
-      <button
-        type="button"
-        onClick={async (event) => {
-          event.preventDefault();
-          console.log("new counter value:", await increment());
-        }}
-      >
-        Increment
-      </button>
+      <table>
+        <tbody>
+          {tasks.map((task) => (
+            <tr key={task.id}>
+              <td align="right">
+                <input
+                  type="checkbox"
+                  checked={task.value.completedAt > 0n}
+                  title={task.value.completedAt === 0n ? "Mark task as completed" : "Mark task as incomplete"}
+                  onChange={async (event) => {
+                    event.preventDefault();
+                    const checkbox = event.currentTarget;
+
+                    checkbox.disabled = true;
+                    try {
+                      await toggleTask(task.key.key);
+                    } finally {
+                      checkbox.disabled = false;
+                    }
+                  }}
+                />
+              </td>
+              <td>{task.value.completedAt > 0n ? <s>{task.value.description}</s> : <>{task.value.description}</>}</td>
+              <td align="right">
+                <button
+                  type="button"
+                  title="Delete task"
+                  style={styleUnset}
+                  onClick={async (event) => {
+                    event.preventDefault();
+                    if (!window.confirm("Are you sure you want to delete this task?")) return;
+
+                    const button = event.currentTarget;
+                    button.disabled = true;
+                    try {
+                      await deleteTask(task.key.key);
+                    } finally {
+                      button.disabled = false;
+                    }
+                  }}
+                >
+                  &times;
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td>
+              <input type="checkbox" disabled />
+            </td>
+            <td colSpan={2}>
+              <form
+                onSubmit={async (event) => {
+                  event.preventDefault();
+                  const form = event.currentTarget;
+                  const fieldset = form.querySelector("fieldset");
+                  if (!(fieldset instanceof HTMLFieldSetElement)) return;
+
+                  const formData = new FormData(form);
+                  const desc = formData.get("description");
+                  if (typeof desc !== "string") return;
+
+                  fieldset.disabled = true;
+                  try {
+                    await addTask(desc);
+                    form.reset();
+                  } finally {
+                    fieldset.disabled = false;
+                  }
+                }}
+              >
+                <fieldset style={styleUnset}>
+                  <input type="text" name="description" />{" "}
+                  <button type="submit" title="Add task">
+                    Add
+                  </button>
+                </fieldset>
+              </form>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
     </>
   );
 };

package/dist/templates/react/packages/client/src/index.tsx

@@ -28,7 +28,6 @@ setup().then(async (result) => {
       worldAddress: result.network.worldContract.address,
       worldAbi: result.network.worldContract.abi,
       write$: result.network.write$,
-      recsWorld: result.network.world,
     });
   }
 });

package/dist/templates/react/packages/client/src/mud/createSystemCalls.ts

@@ -3,10 +3,8 @@
  * for changes in the World state (using the System contracts).
  */
 
-import { getComponentValue } from "@latticexyz/recs";
-import { ClientComponents } from "./createClientComponents";
+import { Hex } from "viem";
 import { SetupNetworkResult } from "./setupNetwork";
-import { singletonEntity } from "@latticexyz/store-sync/recs";
 
 export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
@@ -30,22 +28,27 @@ export function createSystemCalls(
    *   syncToRecs
    *   (https://github.com/latticexyz/mud/blob/main/templates/react/packages/client/src/mud/setupNetwork.ts#L77-L83).
    */
-  { worldContract, waitForTransaction }: SetupNetworkResult,
-  { Counter }: ClientComponents
+  { tables, useStore, worldContract, waitForTransaction }: SetupNetworkResult
 ) {
-  const increment = async () => {
-    /*
-     * Because IncrementSystem
-     * (https://mud.dev/templates/typescript/contracts#incrementsystemsol)
-     * is in the root namespace, `.increment` can be called directly
-     * on the World contract.
-     */
-    const tx = await worldContract.write.increment();
+  const addTask = async (label: string) => {
+    const tx = await worldContract.write.addTask([label]);
+    await waitForTransaction(tx);
+  };
+
+  const toggleTask = async (key: Hex) => {
+    const isComplete = (useStore.getState().getValue(tables.Tasks, { key })?.completedAt ?? 0n) > 0n;
+    const tx = isComplete ? await worldContract.write.resetTask([key]) : await worldContract.write.completeTask([key]);
+    await waitForTransaction(tx);
+  };
+
+  const deleteTask = async (key: Hex) => {
+    const tx = await worldContract.write.deleteTask([key]);
     await waitForTransaction(tx);
-    return getComponentValue(Counter, singletonEntity);
   };
 
   return {
-    increment,
+    addTask,
+    toggleTask,
+    deleteTask,
   };
 }

package/dist/templates/react/packages/client/src/mud/setup.ts

@@ -2,7 +2,6 @@
  * This file sets up all the definitions required for a MUD client.
  */
 
-import { createClientComponents } from "./createClientComponents";
 import { createSystemCalls } from "./createSystemCalls";
 import { setupNetwork } from "./setupNetwork";
 
@@ -10,12 +9,10 @@ export type SetupResult = Awaited<ReturnType<typeof setup>>;
 
 export async function setup() {
   const network = await setupNetwork();
-  const components = createClientComponents(network);
-  const systemCalls = createSystemCalls(network, components);
+  const systemCalls = createSystemCalls(network);
 
   return {
     network,
-    components,
     systemCalls,
   };
 }

package/dist/templates/react/packages/client/src/mud/setupNetwork.ts

@@ -5,13 +5,10 @@
  */
 import { createPublicClient, fallback, webSocket, http, createWalletClient, Hex, parseEther, ClientConfig } from "viem";
 import { createFaucetService } from "@latticexyz/services/faucet";
-import { encodeEntity, syncToRecs } from "@latticexyz/store-sync/recs";
-
+import { syncToZustand } from "@latticexyz/store-sync/zustand";
 import { getNetworkConfig } from "./getNetworkConfig";
-import { world } from "./world";
 import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
 import { createBurnerAccount, getContract, transportObserver, ContractWrite } from "@latticexyz/common";
-
 import { Subject, share } from "rxjs";
 
 /*
@@ -74,8 +71,7 @@ export async function setupNetwork() {
    * to the viem publicClient to make RPC calls to fetch MUD
    * events from the chain.
    */
-  const { components, latestBlock$, storedBlockLogs$, waitForTransaction } = await syncToRecs({
-    world,
+  const { tables, useStore, latestBlock$, storedBlockLogs$, waitForTransaction } = await syncToZustand({
     config: mudConfig,
     address: networkConfig.worldAddress as Hex,
     publicClient,
@@ -111,9 +107,8 @@ export async function setupNetwork() {
   }
 
   return {
-    world,
-    components,
-    playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
+    tables,
+    useStore,
     publicClient,
     walletClient: burnerWalletClient,
     latestBlock$,

package/dist/templates/react/packages/contracts/.env

@@ -4,5 +4,8 @@
 # your deployment enviroment, but we're including this here for ease of local
 # development. Please do not commit changes to this file!
 #
+# Enable debug logs for MUD CLI
+DEBUG=mud:*
+#
 # Anvil default private key:
 PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

package/dist/templates/react/packages/contracts/mud.config.ts

@@ -2,9 +2,12 @@ import { mudConfig } from "@latticexyz/world/register";
 
 export default mudConfig({
   tables: {
-    Counter: {
-      keySchema: {},
-      valueSchema: "uint32",
+    Tasks: {
+      valueSchema: {
+        createdAt: "uint256",
+        completedAt: "uint256",
+        description: "string",
+      },
     },
   },
 });

package/dist/templates/react/packages/contracts/remappings.txt

@@ -1,3 +1,3 @@
-ds-test/=./node_modules/ds-test/src/
-forge-std/=./node_modules/forge-std/src/
-@latticexyz/=./node_modules/@latticexyz/
+ds-test/=node_modules/ds-test/src/
+forge-std/=node_modules/forge-std/src/
+@latticexyz/=node_modules/@latticexyz/

package/dist/templates/react/packages/contracts/script/PostDeploy.s.sol

@@ -3,21 +3,30 @@ pragma solidity >=0.8.21;
 
 import { Script } from "forge-std/Script.sol";
 import { console } from "forge-std/console.sol";
+import { StoreSwitch } from "@latticexyz/store/src/StoreSwitch.sol";
+
 import { IWorld } from "../src/codegen/world/IWorld.sol";
+import { Tasks, TasksData } from "../src/codegen/index.sol";
 
 contract PostDeploy is Script {
   function run(address worldAddress) external {
+    // Specify a store so that you can use tables directly in PostDeploy
+    StoreSwitch.setStoreAddress(worldAddress);
+
     // Load the private key from the `PRIVATE_KEY` environment variable (in .env)
     uint256 deployerPrivateKey = vm.envUint("PRIVATE_KEY");
 
     // Start broadcasting transactions from the deployer account
     vm.startBroadcast(deployerPrivateKey);
 
-    // ------------------ EXAMPLES ------------------
+    // We can set table records directly
+    Tasks.set("1", TasksData({ description: "Walk the dog", createdAt: block.timestamp, completedAt: 0 }));
+
+    // Or we can call our own systems
+    IWorld(worldAddress).addTask("Take out the trash");
 
-    // Call increment on the world via the registered function selector
-    uint32 newValue = IWorld(worldAddress).increment();
-    console.log("Increment via IWorld:", newValue);
+    bytes32 key = IWorld(worldAddress).addTask("Do the dishes");
+    IWorld(worldAddress).completeTask(key);
 
     vm.stopBroadcast();
   }

package/dist/templates/react/packages/contracts/src/codegen/index.sol

@@ -3,4 +3,4 @@ pragma solidity >=0.8.21;
 
 /* Autogenerated file. Do not edit manually. */
 
-import { Counter, CounterTableId } from "./tables/Counter.sol";
+import { Tasks, TasksData, TasksTableId } from "./tables/Tasks.sol";