create-mud 2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e → 2.2.17-ffefc8f000769d5ca625dd19290007a853a21788

package/README.md

@@ -2,10 +2,8 @@
 
 Create a new MUD project
 
-> created by [create-create-app](https://github.com/uetchy/create-create-app).
-
 ## Usage
 
-```bash
-npm create mud <name>
+```
+pnpm create mud@latest
 ```

package/bin/cli.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// workaround for https://github.com/pnpm/pnpm/issues/1801
+import "../dist/cli.js";

package/dist/cli.d.ts

@@ -1 +1,2 @@
-#!/usr/bin/env node
+
+export {  }

package/dist/cli.js

@@ -1,3 +1,10 @@
-#!/usr/bin/env node
-"use strict";var l=Object.create;var p=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var h=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!u.call(e,r)&&r!==s&&p(e,r,{get:()=>t[r],enumerable:!(a=o(t,r))||a.enumerable});return e};var j=(e,t,s)=>(s=e!=null?l(d(e)):{},h(t||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e));var i=require("create-create-app"),n=j(require("path"));var c={name:"create-mud",version:"2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e",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 && tsx ./scripts/copy-templates.ts",clean:"pnpm run clean:js","clean:js":"shx rm -rf 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 && shx rm -rf test-project","test:react":"dist/cli.js test-project --template react && shx rm -rf test-project","test:react-ecs":"dist/cli.js test-project --template react-ecs && shx rm -rf test-project","test:threejs":"dist/cli.js test-project --template threejs && shx rm -rf test-project","test:vanilla":"dist/cli.js test-project --template vanilla && shx rm -rf test-project"},dependencies:{"create-create-app":"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"},devDependencies:{execa:"^7.0.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var b=n.default.resolve(__dirname,"..","dist","templates");(0,i.create)("create-mud",{templateRoot:b,defaultTemplate:"vanilla",defaultPackageManager:"pnpm",promptForDescription:!1,promptForAuthor:!1,promptForEmail:!1,promptForLicense:!1,promptForTemplate:!0,caveat:({answers:e,packageManager:t})=>`Done! Play in the MUD with \`cd ${e.name}\` and \`${t} run dev\``,extra:{"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}});
+import r from"node:fs/promises";import t from"node:path";import{fileURLToPath as j}from"node:url";import h from"yargs-interactive";import y from"fast-glob";var c={name:"create-mud",version:"2.2.17-ffefc8f000769d5ca625dd19290007a853a21788",description:"Create a new MUD project",license:"MIT",author:"Lattice <mud@lattice.xyz>",type:"module",bin:"bin/cli.js",files:["bin","dist","templates"],scripts:{build:"pnpm run build:js","build:js":"tsup && pnpm run copy-templates",clean:"pnpm run clean:js","clean:js":"shx rm -rf dist","copy-templates":"tsx ./scripts/copy-templates.ts",dev:"tsup --watch",prepublishOnly:"npm run clean && npm run build",test:"pnpm run copy-templates && pnpm vitest --run && 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":"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project","test:react":"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project","test:react-ecs":"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project","test:threejs":"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project","test:vanilla":"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project"},dependencies:{"fast-glob":"^3.3.3","yargs-interactive":"^3.0.1"},devDependencies:{"@types/yargs-interactive":"^2.1.6",execa:"^7.0.0"},publishConfig:{access:"public",registry:"https://registry.npmjs.org"}};var o=["react","react-ecs","phaser","threejs","vanilla"];import f from"node:fs/promises";async function m(e){try{return await f.access(e),!0}catch{return!1}}var v=j(import.meta.url),b=t.dirname(v);async function w(){h().usage("$0 [args]").interactive({interactive:{default:!0},name:{describe:"Name your project",type:"input"},template:{describe:"Pick a template",type:"list",choices:o},"mud-version":{type:"input",describe:"The version of MUD packages to use, defaults to latest",default:c.version}}).then(async e=>{if(!e.name)throw new Error("No project name provided.");let s=t.join(process.cwd(),e.name);if(await m(s))throw new Error(`Target directory "${s}" already exists.`);let a=t.join(b,"..","templates",e.template),l=await y("**/*",{cwd:a,dot:!0});for(let p of l){let i=t.join(a,p),n=t.join(s,p);if(await r.mkdir(t.dirname(n),{recursive:!0}),/package\.json$/.test(i)){let u=await r.readFile(i,"utf-8");await r.writeFile(n,u.replaceAll(/{{mud-version}}/g,e.mudVersion),"utf-8")}else await r.copyFile(i,n)}console.log(`
+New project created! Run it with:
+
+  cd ${e.name}
+  pnpm install
+  pnpm dev
+
+Have fun! For more info, check the docs at https://mud.dev/
+`)})}w();
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli.ts","../package.json"],"sourcesContent":["#!/usr/bin/env node\nimport { create } from \"create-create-app\";\nimport path from \"node:path\";\nimport packageJson from \"../package.json\";\n\nconst templateRoot = path.resolve(__dirname, \"..\", \"dist\", \"templates\");\n\n// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.\ncreate(\"create-mud\", {\n  templateRoot,\n  defaultTemplate: \"vanilla\",\n  // templates use pnpm workspaces, so default to that for now\n  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different\n  defaultPackageManager: \"pnpm\",\n  promptForDescription: false,\n  promptForAuthor: false,\n  promptForEmail: false,\n  promptForLicense: false,\n  promptForTemplate: true,\n  caveat: ({ answers, packageManager }) =>\n    `Done! Play in the MUD with \\`cd ${answers.name}\\` and \\`${packageManager} run dev\\``,\n  extra: {\n    \"mud-version\": {\n      type: \"input\",\n      describe: \"The version of MUD packages to use, defaults to latest\",\n      default: packageJson.version,\n    },\n  },\n});\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"bin\": \"dist/cli.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && tsx ./scripts/copy-templates.ts\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"dist/cli.js test-project --template phaser && shx rm -rf test-project\",\n    \"test:react\": \"dist/cli.js test-project --template react && shx rm -rf test-project\",\n    \"test:react-ecs\": \"dist/cli.js test-project --template react-ecs && shx rm -rf test-project\",\n    \"test:threejs\": \"dist/cli.js test-project --template threejs && shx rm -rf test-project\",\n    \"test:vanilla\": \"dist/cli.js test-project --template vanilla && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"create-create-app\": \"git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63\"\n  },\n  \"devDependencies\": {\n    \"execa\": \"^7.0.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"],"mappings":";wdACA,IAAAA,EAAuB,6BACvBC,EAAiB,mBCFjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,IAAO,cACP,MAAS,CACP,MACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,0CACZ,MAAS,oBACT,WAAY,kBACZ,IAAO,eACP,eAAkB,iCAClB,KAAQ,2HACR,UAAW,gBACX,cAAe,wEACf,aAAc,uEACd,iBAAkB,2EAClB,eAAgB,yEAChB,eAAgB,wEAClB,EACA,aAAgB,CACd,oBAAqB,yFACvB,EACA,gBAAmB,CACjB,MAAS,QACX,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,ED9BA,IAAMC,EAAe,EAAAC,QAAK,QAAQ,UAAW,KAAM,OAAQ,WAAW,KAGtE,UAAO,aAAc,CACnB,aAAAD,EACA,gBAAiB,UAGjB,sBAAuB,OACvB,qBAAsB,GACtB,gBAAiB,GACjB,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,GACnB,OAAQ,CAAC,CAAE,QAAAE,EAAS,eAAAC,CAAe,IACjC,mCAAmCD,EAAQ,IAAI,YAAYC,CAAc,aAC3E,MAAO,CACL,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CACF,CAAC","names":["import_create_create_app","import_node_path","package_default","templateRoot","path","answers","packageManager","package_default"]}
+{"version":3,"sources":["../src/bin/cli.ts","../package.json","../src/common.ts","../src/exists.ts"],"sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport yargsInteractive from \"yargs-interactive\";\nimport glob from \"fast-glob\";\nimport packageJson from \"../../package.json\";\nimport { templates } from \"../common\";\nimport { exists } from \"../exists\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nasync function run() {\n  yargsInteractive()\n    .usage(\"$0 [args]\")\n    .interactive({\n      interactive: { default: true },\n      name: {\n        describe: \"Name your project\",\n        type: \"input\",\n      },\n      template: {\n        describe: \"Pick a template\",\n        type: \"list\",\n        choices: templates,\n      },\n      \"mud-version\": {\n        type: \"input\",\n        describe: \"The version of MUD packages to use, defaults to latest\",\n        default: packageJson.version,\n      },\n    })\n    .then(async (args) => {\n      if (!args.name) throw new Error(\"No project name provided.\");\n\n      const destDir = path.join(process.cwd(), args.name);\n      if (await exists(destDir)) {\n        throw new Error(`Target directory \"${destDir}\" already exists.`);\n      }\n\n      const sourceDir = path.join(__dirname, \"..\", \"templates\", args.template);\n      const files = await glob(\"**/*\", { cwd: sourceDir, dot: true });\n\n      for (const filename of files) {\n        const sourceFile = path.join(sourceDir, filename);\n        const destFile = path.join(destDir, filename);\n\n        await fs.mkdir(path.dirname(destFile), { recursive: true });\n\n        if (/package\\.json$/.test(sourceFile)) {\n          const source = await fs.readFile(sourceFile, \"utf-8\");\n          await fs.writeFile(destFile, source.replaceAll(/{{mud-version}}/g, args.mudVersion), \"utf-8\");\n        } else {\n          await fs.copyFile(sourceFile, destFile);\n        }\n      }\n\n      console.log(`\nNew project created! Run it with:\n\n  cd ${args.name}\n  pnpm install\n  pnpm dev\n\nHave fun! For more info, check the docs at https://mud.dev/\n`);\n    });\n}\n\nrun();\n","{\n  \"name\": \"create-mud\",\n  \"version\": \"2.2.17-ffefc8f000769d5ca625dd19290007a853a21788\",\n  \"description\": \"Create a new MUD project\",\n  \"license\": \"MIT\",\n  \"author\": \"Lattice <mud@lattice.xyz>\",\n  \"type\": \"module\",\n  \"bin\": \"bin/cli.js\",\n  \"files\": [\n    \"bin\",\n    \"dist\",\n    \"templates\"\n  ],\n  \"scripts\": {\n    \"build\": \"pnpm run build:js\",\n    \"build:js\": \"tsup && pnpm run copy-templates\",\n    \"clean\": \"pnpm run clean:js\",\n    \"clean:js\": \"shx rm -rf dist\",\n    \"copy-templates\": \"tsx ./scripts/copy-templates.ts\",\n    \"dev\": \"tsup --watch\",\n    \"prepublishOnly\": \"npm run clean && npm run build\",\n    \"test\": \"pnpm run copy-templates && pnpm vitest --run && pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs\",\n    \"test:ci\": \"pnpm run test\",\n    \"test:phaser\": \"bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project\",\n    \"test:react\": \"bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project\",\n    \"test:react-ecs\": \"bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project\",\n    \"test:threejs\": \"bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project\",\n    \"test:vanilla\": \"bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project\"\n  },\n  \"dependencies\": {\n    \"fast-glob\": \"^3.3.3\",\n    \"yargs-interactive\": \"^3.0.1\"\n  },\n  \"devDependencies\": {\n    \"@types/yargs-interactive\": \"^2.1.6\",\n    \"execa\": \"^7.0.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n","// We define these here to keep them in the order we want to present in the CLI.\n// Tests will ensure this list stays up to date.\nexport const templates = [\"react\", \"react-ecs\", \"phaser\", \"threejs\", \"vanilla\"];\n","import fs from \"node:fs/promises\";\n\nexport async function exists(path: string) {\n  try {\n    await fs.access(path);\n    return true;\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"AAAA,OAAOA,MAAQ,mBACf,OAAOC,MAAU,YACjB,OAAS,iBAAAC,MAAqB,WAC9B,OAAOC,MAAsB,oBAC7B,OAAOC,MAAU,YCJjB,IAAAC,EAAA,CACE,KAAQ,aACR,QAAW,kDACX,YAAe,2BACf,QAAW,MACX,OAAU,4BACV,KAAQ,SACR,IAAO,aACP,MAAS,CACP,MACA,OACA,WACF,EACA,QAAW,CACT,MAAS,oBACT,WAAY,kCACZ,MAAS,oBACT,WAAY,kBACZ,iBAAkB,kCAClB,IAAO,eACP,eAAkB,iCAClB,KAAQ,2KACR,UAAW,gBACX,cAAe,iHACf,aAAc,gHACd,iBAAkB,oHAClB,eAAgB,kHAChB,eAAgB,iHAClB,EACA,aAAgB,CACd,YAAa,SACb,oBAAqB,QACvB,EACA,gBAAmB,CACjB,2BAA4B,SAC5B,MAAS,QACX,EACA,cAAiB,CACf,OAAU,SACV,SAAY,4BACd,CACF,ECvCO,IAAMC,EAAY,CAAC,QAAS,YAAa,SAAU,UAAW,SAAS,ECF9E,OAAOC,MAAQ,mBAEf,eAAsBC,EAAOC,EAAc,CACzC,GAAI,CACF,aAAMF,EAAG,OAAOE,CAAI,EACb,EACT,MAAQ,CACN,MAAO,EACT,CACF,CHAA,IAAMC,EAAaC,EAAc,YAAY,GAAG,EAC1CC,EAAYC,EAAK,QAAQH,CAAU,EAEzC,eAAeI,GAAM,CACnBC,EAAiB,EACd,MAAM,WAAW,EACjB,YAAY,CACX,YAAa,CAAE,QAAS,EAAK,EAC7B,KAAM,CACJ,SAAU,oBACV,KAAM,OACR,EACA,SAAU,CACR,SAAU,kBACV,KAAM,OACN,QAASC,CACX,EACA,cAAe,CACb,KAAM,QACN,SAAU,yDACV,QAASC,EAAY,OACvB,CACF,CAAC,EACA,KAAK,MAAOC,GAAS,CACpB,GAAI,CAACA,EAAK,KAAM,MAAM,IAAI,MAAM,2BAA2B,EAE3D,IAAMC,EAAUN,EAAK,KAAK,QAAQ,IAAI,EAAGK,EAAK,IAAI,EAClD,GAAI,MAAME,EAAOD,CAAO,EACtB,MAAM,IAAI,MAAM,qBAAqBA,CAAO,mBAAmB,EAGjE,IAAME,EAAYR,EAAK,KAAKD,EAAW,KAAM,YAAaM,EAAK,QAAQ,EACjEI,EAAQ,MAAMC,EAAK,OAAQ,CAAE,IAAKF,EAAW,IAAK,EAAK,CAAC,EAE9D,QAAWG,KAAYF,EAAO,CAC5B,IAAMG,EAAaZ,EAAK,KAAKQ,EAAWG,CAAQ,EAC1CE,EAAWb,EAAK,KAAKM,EAASK,CAAQ,EAI5C,GAFA,MAAMG,EAAG,MAAMd,EAAK,QAAQa,CAAQ,EAAG,CAAE,UAAW,EAAK,CAAC,EAEtD,iBAAiB,KAAKD,CAAU,EAAG,CACrC,IAAMG,EAAS,MAAMD,EAAG,SAASF,EAAY,OAAO,EACpD,MAAME,EAAG,UAAUD,EAAUE,EAAO,WAAW,mBAAoBV,EAAK,UAAU,EAAG,OAAO,CAC9F,MACE,MAAMS,EAAG,SAASF,EAAYC,CAAQ,CAE1C,CAEA,QAAQ,IAAI;AAAA;AAAA;AAAA,OAGXR,EAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,CAKf,CACG,CAAC,CACL,CAEAJ,EAAI","names":["fs","path","fileURLToPath","yargsInteractive","glob","package_default","templates","fs","exists","path","__filename","fileURLToPath","__dirname","path","run","yargsInteractive","templates","package_default","args","destDir","exists","sourceDir","files","glob","filename","sourceFile","destFile","fs","source"]}

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "create-mud",
-  "version": "2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e",
+  "version": "2.2.17-ffefc8f000769d5ca625dd19290007a853a21788",
   "description": "Create a new MUD project",
   "license": "MIT",
   "author": "Lattice <mud@lattice.xyz>",
-  "bin": "dist/cli.js",
+  "type": "module",
+  "bin": "bin/cli.js",
   "files": [
-    "dist"
+    "bin",
+    "dist",
+    "templates"
   ],
   "dependencies": {
-    "create-create-app": "git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"
+    "fast-glob": "^3.3.3",
+    "yargs-interactive": "^3.0.1"
   },
   "devDependencies": {
+    "@types/yargs-interactive": "^2.1.6",
     "execa": "^7.0.0"
   },
   "publishConfig": {
@@ -20,16 +25,17 @@
   },
   "scripts": {
     "build": "pnpm run build:js",
-    "build:js": "tsup && tsx ./scripts/copy-templates.ts",
+    "build:js": "tsup && pnpm run copy-templates",
     "clean": "pnpm run clean:js",
     "clean:js": "shx rm -rf dist",
+    "copy-templates": "tsx ./scripts/copy-templates.ts",
     "dev": "tsup --watch",
-    "test": "pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs",
+    "test": "pnpm run copy-templates && pnpm vitest --run && 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 && shx rm -rf test-project",
-    "test:react": "dist/cli.js test-project --template react && shx rm -rf test-project",
-    "test:react-ecs": "dist/cli.js test-project --template react-ecs && shx rm -rf test-project",
-    "test:threejs": "dist/cli.js test-project --template threejs && shx rm -rf test-project",
-    "test:vanilla": "dist/cli.js test-project --template vanilla && shx rm -rf test-project"
+    "test:phaser": "bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project",
+    "test:react": "bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project",
+    "test:react-ecs": "bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project",
+    "test:threejs": "bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project",
+    "test:vanilla": "bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project"
   }
 }

package/templates/react/mprocs.yaml

@@ -0,0 +1,21 @@
+scrollback: 10000
+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
+  deploy-prereqs:
+    cwd: packages/contracts
+    shell: pnpm deploy-local-prereqs
+    env:
+      DEBUG: "mud:*"
+      # Anvil default account (0x70997970C51812dc3A010C7d01b50e0d17dc79C8)
+      PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
+  anvil:
+    cwd: packages/contracts
+    shell: anvil --block-time 2
+  explorer:
+    cwd: packages/contracts
+    shell: pnpm explorer

package/templates/react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "mud-template-react",
+  "private": true,
+  "scripts": {
+    "build": "pnpm recursive run build",
+    "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",
+    "mud:up": "pnpm mud set-version --tag main && pnpm install",
+    "prepare": "(forge --version || pnpm foundry:up)",
+    "test": "pnpm recursive run test"
+  },
+  "devDependencies": {
+    "@latticexyz/cli": "{{mud-version}}",
+    "@latticexyz/common": "{{mud-version}}",
+    "@latticexyz/explorer": "{{mud-version}}",
+    "@latticexyz/store-indexer": "{{mud-version}}",
+    "@types/debug": "4.1.7",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
+    "eslint": "8.57.0",
+    "mprocs": "^0.7.1",
+    "shx": "^0.3.4",
+    "typescript": "5.4.2"
+  },
+  "engines": {
+    "node": "^18",
+    "pnpm": "^8 || ^9"
+  }
+}

package/{dist/templates/threejs → templates/react}/packages/client/index.html

@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>a minimal MUD client</title>
+    <title>a MUD app</title>
   </head>
   <body>
     <div id="react-root"></div>

package/templates/react/packages/client/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/react/packages/client/src/game/useKeyboardMovement.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { Direction } from "../common";
+
+const keys = new Map<KeyboardEvent["key"], Direction>([
+  ["ArrowUp", "North"],
+  ["ArrowRight", "East"],
+  ["ArrowDown", "South"],
+  ["ArrowLeft", "West"],
+]);
+
+export const useKeyboardMovement = (move: undefined | ((direction: Direction) => void)) => {
+  useEffect(() => {
+    if (!move) return;
+
+    const listener = (event: KeyboardEvent) => {
+      const direction = keys.get(event.key);
+      if (direction == null) return;
+
+      event.preventDefault();
+      move(direction);
+    };
+
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [move]);
+};

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

@@ -0,0 +1,19 @@
+import "tailwindcss/tailwind.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Providers } from "./Providers";
+import { App } from "./App";
+import { Explorer } from "./mud/Explorer";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallback } from "./ui/ErrorFallback";
+
+createRoot(document.getElementById("react-root")!).render(
+  <StrictMode>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Providers>
+        <App />
+        <Explorer />
+      </Providers>
+    </ErrorBoundary>
+  </StrictMode>,
+);

package/templates/react/packages/client/src/mud/Explorer.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { getChain, getWorldAddress } from "../common";
+import { MUDIcon } from "../ui/icons/MUDIcon";
+
+export function Explorer() {
+  const [open, setOpen] = useState(false);
+
+  const chain = getChain();
+  const worldAddress = getWorldAddress();
+
+  const explorerUrl = chain.blockExplorers?.worldsExplorer?.url;
+  if (!explorerUrl) return null;
+
+  return (
+    <div className="fixed bottom-0 inset-x-0 flex flex-col opacity-80 transition hover:opacity-100">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="outline-none flex justify-end gap-2 p-2 font-medium leading-none text-black"
+      >
+        {open ? (
+          <>Close</>
+        ) : (
+          <>
+            Explore <MUDIcon className="text-orange-500" />
+          </>
+        )}
+      </button>
+      {open ? <iframe src={`${explorerUrl}/${worldAddress}`} className="bg-black h-[50vh]" /> : null}
+    </div>
+  );
+}

package/{dist/templates → templates}/react/packages/client/src/mud/Synced.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { useSyncStatus } from "./useSyncStatus";
 import { TableRecord } from "@latticexyz/stash/internal";
-import { SyncProgress } from "@latticexyz/store-sync/stash/common";
+import { SyncProgress } from "@latticexyz/store-sync/internal";
 
 export type Props = {
   children: ReactNode;

package/templates/react/packages/client/src/mud/useWorldContract.ts

@@ -0,0 +1,44 @@
+import { useClient } from "wagmi";
+import { chainId, getWorldAddress } from "../common";
+import { Account, Chain, Client, GetContractReturnType, Transport, getContract } from "viem";
+import { useQuery } from "@tanstack/react-query";
+import { useSessionClient } from "@latticexyz/entrykit/internal";
+import { observer } from "@latticexyz/explorer/observer";
+import worldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
+
+export function useWorldContract():
+  | GetContractReturnType<
+      typeof worldAbi,
+      {
+        public: Client<Transport, Chain>;
+        wallet: Client<Transport, Chain, Account>;
+      }
+    >
+  | undefined {
+  const client = useClient({ chainId });
+  const { data: sessionClient } = useSessionClient();
+
+  const { data: worldContract } = useQuery({
+    queryKey: ["worldContract", client?.uid, sessionClient?.uid],
+    queryFn: () => {
+      if (!client || !sessionClient) {
+        throw new Error("Not connected.");
+      }
+
+      return getContract({
+        abi: worldAbi,
+        address: getWorldAddress(),
+        client: {
+          public: client,
+          wallet: sessionClient.extend(observer()),
+        },
+      });
+    },
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return worldContract;
+}

package/templates/react/packages/client/src/ui/AsyncButton.tsx

@@ -0,0 +1,41 @@
+import { DetailedHTMLProps, ButtonHTMLAttributes, useState, useRef, useCallback, MouseEventHandler } from "react";
+
+export type AsyncButtonProps = {
+  pending?: boolean;
+};
+
+export type Props = AsyncButtonProps & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+
+export const AsyncButton = ({ pending, type, disabled, onClick, ...props }: Props) => {
+  // TODO: move all this logic into a hook so we can wrap other event handlers
+
+  const promiseRef = useRef<Promise<unknown>>();
+  const [promisePending, setPromisePending] = useState<true | undefined>(undefined);
+
+  const asyncOnClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (...args) => {
+      if (!onClick) return;
+      const result = onClick(...args);
+      const promise = Promise.resolve(result);
+      promiseRef.current = promise;
+      setPromisePending(true);
+      promise.finally(() => {
+        if (promiseRef.current === promise) {
+          setPromisePending(undefined);
+        }
+      });
+    },
+    [onClick],
+  );
+
+  return (
+    <button
+      type={type || "button"}
+      aria-busy={pending || promisePending}
+      aria-disabled={disabled}
+      disabled={disabled || pending || promisePending}
+      onClick={onClick ? asyncOnClick : undefined}
+      {...props}
+    />
+  );
+};

package/templates/react/packages/client/src/ui/ErrorFallback.tsx

@@ -0,0 +1,58 @@
+import { wait } from "@latticexyz/common/utils";
+import { useEffect, useRef, useState } from "react";
+import { FallbackProps } from "react-error-boundary";
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  const when = new Date();
+  const isMounted = useRef(false);
+  const [retries, setRetries] = useState(1);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+
+  return (
+    <div className="fixed inset-0 overflow-auto bg-red-50">
+      <div className="w-full max-w-screen-md mx-auto py-16 px-8 space-y-12">
+        <h1 className="text-4xl font-black text-red-500">Oops! It broke :(</h1>
+        <div className="space-y-6">
+          <div className="relative">
+            <div className="p-6 bg-red-100 border-l-8 -ml-[8px] border-red-500 font-semibold whitespace-pre-wrap">
+              {error instanceof Error ? error.message : String(error)}
+            </div>
+            {error instanceof Error && error.stack ? (
+              <div className="p-6 bg-white font-mono text-sm overflow-auto whitespace-pre">{error.stack}</div>
+            ) : null}
+            <div className="absolute top-full right-0 text-sm text-stone-400" title={when.toISOString()}>
+              {when.toLocaleString()}
+            </div>
+          </div>
+
+          {retries > 0 ? (
+            <button
+              type="button"
+              className="group bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 active:bg-red-700 transition aria-busy:pointer-events-none aria-busy:animate-pulse"
+              onClick={async (event) => {
+                // if we retry and the same error occurs, it'll look like the button click did nothing
+                // so we'll fake a pending state here to give users an indication something is happening
+                event.currentTarget.ariaBusy = "true";
+                await wait(1000);
+                resetErrorBoundary();
+                if (isMounted.current) {
+                  setRetries((value) => value - 1);
+                  event.currentTarget.ariaBusy = null;
+                }
+              }}
+            >
+              <span className="group-aria-busy:hidden">Retry?</span>
+              <span className="hidden group-aria-busy:inline">Retrying…</span>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react/packages/client/src/ui/icons/ArrowDownIcon.tsx

@@ -0,0 +1,22 @@
+import { DetailedHTMLProps, SVGAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type Props = DetailedHTMLProps<SVGAttributes<SVGSVGElement>, SVGSVGElement>;
+
+export function ArrowDownIcon({ className, ...props }: Props) {
+  return (
+    <svg
+      className={twMerge("h-[1em] w-[1em]", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M8 2a.75.75 0 0 1 .75.75v8.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.22 3.22V2.75A.75.75 0 0 1 8 2Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/templates/react/packages/client/src/ui/icons/MUDIcon.tsx

@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, SVGAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type Props = DetailedHTMLProps<SVGAttributes<SVGSVGElement>, SVGSVGElement>;
+
+export function MUDIcon({ className, ...props }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 8 8"
+      fill="currentColor"
+      shapeRendering="crispEdges"
+      className={twMerge("-my-[0.125em] h-[1.25em] w-[1.25em]", className)}
+      {...props}
+    >
+      {/* eslint-disable-next-line max-len */}
+      <path d="M0 0h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm0 1h1v1H0zm1 0h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm2-1h1v1H7zm0 1h1v1H7zM6 7h1v1H6zm1-2h1v1H7zm0-1h1v1H7zm0-1h1v1H7z" />
+      <path
+        d="M2 2h1v1H2zm0 1h1v1H2zm0 1h1v1H2zm0 1h1v1H2zm1-3h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm0 1h1v1H5zm0 1h1v1H5zm0 1h1v1H5zM4 5h1v1H4zM3 5h1v1H3z"
+        opacity=".5"
+      />
+      <path d="M7 2h1v1H7zm0-1h1v1H7zM1 0h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z" />
+    </svg>
+  );
+}

package/templates/react/packages/client/src/wagmiConfig.ts

@@ -0,0 +1,49 @@
+import { Chain, http, webSocket } from "viem";
+import { anvil } from "viem/chains";
+import { createWagmiConfig } from "@latticexyz/entrykit/internal";
+import { rhodolite, garnet, redstone } from "@latticexyz/common/chains";
+import { chainId } from "./common";
+
+export const chains = [
+  redstone,
+  garnet,
+  rhodolite,
+  {
+    ...anvil,
+    contracts: {
+      ...anvil.contracts,
+      paymaster: {
+        address: "0xf03E61E7421c43D9068Ca562882E98d1be0a6b6e",
+      },
+    },
+    blockExplorers: {
+      default: {} as never,
+      worldsExplorer: {
+        name: "MUD Worlds Explorer",
+        url: "http://localhost:13690/anvil/worlds",
+      },
+    },
+  },
+] as const satisfies Chain[];
+
+export const transports = {
+  [anvil.id]: webSocket(),
+  [garnet.id]: http(),
+  [rhodolite.id]: http(),
+  [redstone.id]: http(),
+} as const;
+
+export const wagmiConfig = createWagmiConfig({
+  chainId,
+  // TODO: swap this with another default project ID or leave empty
+  walletConnectProjectId: "14ce88fdbc0f9c294e26ec9b4d848e44",
+  appName: document.title,
+  chains,
+  transports,
+  pollingInterval: {
+    [anvil.id]: 2000,
+    [garnet.id]: 2000,
+    [rhodolite.id]: 2000,
+    [redstone.id]: 2000,
+  },
+});

package/templates/react/packages/client/tailwind.config.ts

@@ -0,0 +1,10 @@
+import { Config } from "tailwindcss/types/config";
+
+export default {
+  content: ["./**/*.{html,js,jsx,ts,tsx}", "!./node_modules"],
+  theme: {},
+  plugins: [],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+} satisfies Config;

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

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client", "vite-plugin-mud/env"],
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "include": ["src"]
+}

package/{dist/templates/threejs → templates/react}/packages/client/vite.config.ts

@@ -1,14 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { mud } from "vite-plugin-mud";
 
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    fs: {
-      strict: false,
-    },
-  },
+  plugins: [react(), mud({ worldsFile: "../contracts/worlds.json" })],
   build: {
     target: "es2022",
     minify: true,

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

@@ -0,0 +1,11 @@
+# This .env file is for demonstration purposes only.
+#
+# This should usually be excluded via .gitignore and the env vars attached to
+# your deployment environment, 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 → templates}/react/packages/contracts/mud.config.ts

@@ -11,11 +11,4 @@ export default defineWorld({
       key: ["player"],
     },
   },
-  modules: [
-    {
-      artifactPath:
-        "@latticexyz/world-modules/out/Unstable_CallWithSignatureModule.sol/Unstable_CallWithSignatureModule.json",
-      root: true,
-    },
-  ],
 });

package/{dist/templates/vanilla → templates/react}/packages/contracts/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@latticexyz/cli": "{{mud-version}}",
+    "@latticexyz/entrykit": "{{mud-version}}",
     "@latticexyz/schema-type": "{{mud-version}}",
     "@latticexyz/store": "{{mud-version}}",
     "@latticexyz/world": "{{mud-version}}",

package/{dist/templates/vanilla → templates/react}/packages/contracts/script/PostDeploy.s.sol

@@ -18,11 +18,7 @@ contract PostDeploy is Script {
     // Start broadcasting transactions from the deployer account
     vm.startBroadcast(deployerPrivateKey);
 
-    // ------------------ EXAMPLES ------------------
-
-    // Call increment on the world via the registered function selector
-    uint32 newValue = IWorld(worldAddress).app__increment();
-    console.log("Increment via IWorld:", newValue);
+    // TODO
 
     vm.stopBroadcast();
   }