feat(create-mud): add create-mud package (#336)

* feat(create-mud): add create-mud package

yarn create create-app create-mud

* feat(create-mud): add templates

* feat(create-mud): publish template's gitignore files

* chore(create-mud): bump mud packages to 1.34.0, add missing dep

* feat(create-mud): move react template to use new react package

* chore(create-mud): add self to codeowners

* test(create-mud): add test entrypoint

* chore(create-mud): remove dup license file

* test(create-mud): fix test path for foundry

* chore(create-mud): fix up package install, add shx dev dep

.eslintignore

@@ -1,2 +1,2 @@
 node_modules
-dist
+dist

CODEOWNERS

@@ -11,3 +11,4 @@
 
 /packages/services @authcall
 /packages/react @holic
+/packages/create-mud @holic

package.json

@@ -20,7 +20,8 @@
       "packages/std-client",
       "packages/ecs-browser",
       "packages/services",
-      "packages/noise"
+      "packages/noise",
+      "packages/create-mud"
     ]
   },
   "devDependencies": {
@@ -61,7 +62,7 @@
     "foundryup": "curl -L https://foundry.paradigm.xyz | bash && bash ~/.foundry/bin/foundryup",
     "link:packages": "yarn lerna run link",
     "docs": "yarn lerna run docs && yarn retype:updateversion && yarn retype build",
-    "docs:dev":"yarn retype watch .",
+    "docs:dev": "yarn retype watch .",
     "retype:updateversion": "sed \"s/label: .*/label: $(yarn list --pattern @latticexyz/solecs | grep -e @latticexyz | sed \"s/.*@//\")/\" retype.yml > retype.yml.tmp && mv retype.yml.tmp retype.yml",
     "test": "yarn workspaces run test",
     "yalc:release": "yarn entry:dist && yarn lerna exec yalc push",

packages/create-mud/.gitignore

@@ -0,0 +1,101 @@
+/dist
+package-lock.json
+yarn.lock
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# react / gatsby 
+public/
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# End of https://www.gitignore.io/api/node

packages/create-mud/README.md

@@ -0,0 +1,11 @@
+# Create MUD
+
+Create a new MUD project
+
+> created by [create-create-app](https://github.com/uetchy/create-create-app).
+
+## Usage
+
+```bash
+yarn create mud <name>
+```

packages/create-mud/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-mud",
+  "description": "Create a new MUD project",
+  "version": "0.0.0",
+  "author": "Lattice <mud@lattice.xyz>",
+  "license": "MIT",
+  "bin": "dist/cli.js",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "prepare": "cd ../../node_modules/create-create-app && npm run build",
+    "build": "tsup src/cli.ts --minify",
+    "clean": "shx rm -rf lib",
+    "dev": "tsup src/cli.ts --watch",
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "echo \"TODO\""
+  },
+  "dependencies": {
+    "create-create-app": "git+https://github.com/holic/create-create-app#41d44df2f1b2be760eaf53281a1d6a8102a76a3d"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.29",
+    "shx": "^0.3.4",
+    "tsup": "^5.12.1",
+    "typescript": "^4.6.3"
+  }
+}

packages/create-mud/src/cli.ts

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+import { create } from "create-create-app";
+import { resolve } from "path";
+
+const templateRoot = resolve(__dirname, "..", "templates");
+
+// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.
+
+create("create-mud", {
+  templateRoot,
+  defaultTemplate: "minimal",
+  promptForDescription: false,
+  promptForAuthor: false,
+  promptForEmail: false,
+  promptForLicense: false,
+  promptForTemplate: true,
+  caveat: ({ answers }) => `Done! Play in the MUD with \`cd ${answers.name}\` and \`yarn dev\``,
+});

packages/create-mud/templates/.npmignore

@@ -0,0 +1,2 @@
+# make sure our npm package includes the template's gitignore
+!.gitignore

packages/create-mud/templates/minimal/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/create-mud/templates/minimal/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "solidity.remappings": [
+    "components/=./packages/contracts/src/components",
+    "systems/=./packages/contracts/src/systems",
+    "libraries/=./packages/contracts/src/libraries",
+    "std-contracts/=./node_modules/@latticexyz/std-contracts/src/",
+    "solecs/=./node_modules/@latticexyz/solecs/src/",
+    "memmove/=./node_modules/memmove/src/",
+    "ds-test/=./node_modules/ds-test/src/",
+    "solmate/=./node_modules/@rari-capital/solmate/src/",
+    "forge-std/=./node_modules/forge-std/src/"
+  ]
+}

packages/create-mud/templates/minimal/package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "name": "{{kebab name}}",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "prepare": "yarn workspace contracts prepare",
+    "dev": "run-pty % yarn dev:node % yarn dev:client % yarn dev:contracts",
+    "dev:client": "yarn workspace client run dev",
+    "dev:node": "yarn workspace contracts run devnode",
+    "dev:contracts": "yarn workspace contracts run dev"
+  },
+  "devDependencies": {
+    "run-pty": "^4.0.3"
+  }
+}

packages/create-mud/templates/minimal/packages/client/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}

packages/create-mud/templates/minimal/packages/client/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

packages/create-mud/templates/minimal/packages/client/index.html

@@ -0,0 +1,13 @@
+<!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>
+  </head>
+  <body>
+    <script type="module" src="/src/index.ts"></script>
+    <div>Counter: <span id="counter">0</span></div>
+    <button onclick="window.increment()">Increment</button>
+  </body>
+</html>

packages/create-mud/templates/minimal/packages/client/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "client",
+  "license": "MIT",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "eslint": "^8.29.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  },
+  "dependencies": {
+    "@improbable-eng/grpc-web": "^0.15.0",
+    "@latticexyz/network": "1.34.0",
+    "@latticexyz/recs": "1.34.0",
+    "@latticexyz/services": "1.34.0",
+    "@latticexyz/std-client": "1.34.0",
+    "async-mutex": "^0.4.0",
+    "ethers": "^5.7.2",
+    "mobx": "^6.7.0",
+    "nice-grpc": "^2.0.1",
+    "nice-grpc-web": "^2.0.1",
+    "proxy-deep": "^3.1.1",
+    "react": "^18.2.0",
+    "threads": "^1.7.0"
+  }
+}

packages/create-mud/templates/minimal/packages/client/src/config.ts

@@ -0,0 +1,22 @@
+import { SetupContractConfig } from "@latticexyz/std-client";
+import { Wallet } from "ethers";
+const params = new URLSearchParams(window.location.search);
+
+export const config: SetupContractConfig = {
+  clock: {
+    period: 1000,
+    initialTime: 0,
+    syncInterval: 5000,
+  },
+  provider: {
+    jsonRpcUrl: params.get("rpc") ?? "http://localhost:8545",
+    wsRpcUrl: params.get("wsRpc") ?? "ws://localhost:8545",
+    chainId: Number(params.get("chainId")) || 31337,
+  },
+  privateKey: Wallet.createRandom().privateKey,
+  chainId: Number(params.get("chainId")) || 31337,
+  snapshotServiceUrl: params.get("snapshot") ?? undefined,
+  initialBlockNumber: Number(params.get("initialBlockNumber")) || 0,
+  worldAddress: params.get("worldAddress")!,
+  devMode: params.get("dev") === "true",
+};

packages/create-mud/templates/minimal/packages/client/src/index.ts

@@ -0,0 +1,37 @@
+import { setupMUDNetwork } from "@latticexyz/std-client";
+import { createWorld } from "@latticexyz/recs";
+import { SystemTypes } from "contracts/types/SystemTypes";
+import { SystemAbis } from "contracts/types/SystemAbis.mjs";
+import { defineNumberComponent } from "@latticexyz/std-client";
+import { config } from "./config";
+
+// The world contains references to all entities, all components and disposers.
+const world = createWorld();
+
+// Components contain the application state.
+// If a contractId is provided, MUD syncs the state with the corresponding
+// component contract (in this case `CounterComponent.sol`)
+const components = {
+  Counter: defineNumberComponent(world, {
+    metadata: {
+      contractId: "component.Counter",
+    },
+  }),
+};
+
+// Components expose a stream that triggers when the component is updated.
+components.Counter.update$.subscribe(({ value }) => {
+  document.getElementById("counter")!.innerHTML = String(value?.[0]?.value);
+});
+
+// This is where the magic happens
+setupMUDNetwork<typeof components, SystemTypes>(config, world, components, SystemAbis).then(
+  ({ startSync, systems }) => {
+    // After setting up the network, we can tell MUD to start the synchronization process.
+    startSync();
+
+    // Just for demonstration purposes: we create a global function that can be
+    // called to invoke the Increment system contract. (See IncrementSystem.sol.)
+    (window as any).increment = () => systems["system.Increment"].executeTyped("0x00");
+  }
+);

packages/create-mud/templates/minimal/packages/client/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}