diff --git a/docs/pages/_meta.js b/docs/pages/_meta.js index 4d79762a8d..73f48ab647 100644 --- a/docs/pages/_meta.js +++ b/docs/pages/_meta.js @@ -23,6 +23,10 @@ export default { cli: "CLI", "state-query": "State Query", services: "Services", + "world-explorer": { + title: "World Explorer", + theme: { breadcrumb: false }, + }, "---": { title: "", // no title renders as a line type: "separator", diff --git a/docs/pages/world-explorer.mdx b/docs/pages/world-explorer.mdx new file mode 100644 index 0000000000..b7dce4ac25 --- /dev/null +++ b/docs/pages/world-explorer.mdx @@ -0,0 +1,116 @@ +import { Tabs, Tab } from "nextra/components"; +import { CollapseCode } from "../components/CollapseCode"; + +# World Explorer + +World Explorer is a GUI tool designed for visually exploring and manipulating the state of worlds. +It is available in the MUD TypeScript templates starting with version 2.2. + +## Usage + +If you are running locally a MUD TypeScript template version 2.2 or later, the URL for World Explorer is [http://localhost:13690](http://localhost:13690). + + + + + + + + + + +### CLI options + +To use the explorer with different command-line options, use this process: + +1. In the mprocs screen, go down to the **explorer** process. + +1. Type `x` to stop the default explorer. + +1. In a different command-line window, go to `packages/contract`. + +1. Run the explorer using `pnpm explorer `. + +The World Explorer accepts the following CLI arguments: + +| Argument | Description | Default value | +| ----------------- | ------------------------------------------------------------------- | ------------- | +| `worldAddress` | The address of the world to explore | None | +| `worldsFile` | Path to a worlds configuration file (used to resolve world address) | "worlds.json" | +| `indexerDatabase` | Path to your SQLite indexer database | "indexer.db" | +| `chainId` | The chain ID of the network | 31337 | +| `port` | The port on which to run the World Explorer | 13690 | +| `dev` | Run the World Explorer in development mode | false | + +## Installation + +These installation steps are needed to add World Explorer to MUD 2.0 and 2.1. +In later versions the template already includes World Explorer. + +1. Update to the latest MUD version (optional): + + ```sh copy + pnpm mud set-version --tag latest + pnpm install + ``` + +1. Install the Indexer and World Explorer packages in the project root. + + ```sh copy + pnpm add -w @latticexyz/explorer @latticexyz/store-indexer + ``` + +1. Edit `mprocs.yaml` to add the `indexer` and `explorer` processes. + + + + ```yaml filename="mprocs.yaml" copy showLineNumbers {11-20} + procs: + client: + cwd: packages/client + shell: pnpm run dev + contracts: + cwd: packages/contracts + shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545 + anvil: + cwd: packages/contracts + shell: anvil --base-fee 0 --block-time 2 + indexer: + cwd: packages/contracts + shell: rm -rf $SQLITE_FILENAME && pnpm sqlite-indexer + env: + RPC_HTTP_URL: "http://127.0.0.1:8545" + FOLLOW_BLOCK_TAG: "latest" + SQLITE_FILENAME: "indexer.db" + explorer: + cwd: packages/contracts + shell: pnpm explorer + ``` + + + +1. Restart `pnpm dev`. + +1. Browse to [World Explorer](http://localhost:13690). + +## Contributing + +See [the README](https://github.com/latticexyz/mud/blob/main/packages/explorer/README.md). diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 3ed73a5c34..f76a448018 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es2020", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -10,7 +14,7 @@ "incremental": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "Bundler", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -21,6 +25,14 @@ ], "strictNullChecks": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_meta.js", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "pages/_meta.js", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] }