Improves the DevEx of working on Typescript (#818)

* Adjust the way that local dependencies are linked

* Improved `yarn clean`

* Added `prettier` to Mesh

* Updated cut-release script

* Build dependencies automatically when building a single package

* Make browser integration tests more effecient

* Update CONTRIBUTING.md

* Add some files to .prettierignore

* Change tsconfig for two examples to output to lib

* Add note to CONTRIBUTING.md about TSLint configuration

* Remove  from package.json

* Fixed nits

* Remove `$PKG`

* Fix tsc -b at the root of the project

Co-authored-by: Alex Browne <stephenalexbrowne@gmail.com>

.prettierignore

@@ -0,0 +1,10 @@
+lib
+docs
+*README.md
+CHANGELOG.md
+CONTRIBUTING.md
+ISSUE_TEMPLATE.md
+pull_request_template.md
+ethereum/blockwatch/testdata
+packages/**/generated/**
+*.d.ts

CONTRIBUTING.md

@@ -44,6 +44,20 @@ the dropdown menu in the GitHub UI to select `development`.
 make deps
 ```
 
+## Building TypeScript packages
+
+Mesh contains some TypeScript packages, all of which are contained in a small monorepo in the __packages/__ directory. Some
+packages are published, and some are only used internally for development and testing.
+
+To build all the TypeScript packages:
+
+```
+yarn build
+```
+
+You can also run `yarn build` inside of individual packages in order to just build that package and its dependencies. However,
+changing any Go code will require running `yarn build` at the root of the project again.
+
 ## Running Tests
 
 Some of the tests depend on having a test Ethereum node running. Before running
@@ -99,6 +113,20 @@ available linters, run:
 make lint
 ```
 
+## Running prettier
+
+0x Mesh uses a tool called [prettier](https://prettier.io/), which is a tool that
+enforces a consistent style across the Typescript codebase. The continuous integration
+pipeline will fail if Typescript code is not "prettified," so `prettier` must be run
+to ensure that the code is properly formatted.
+
+The prettier tool can be run using the following command from the top-level of the
+0x-Mesh repository (outside of a directory inside `packages/`):
+
+```bash
+yarn prettier
+```
+
 ## Managing Dependencies
 
 Mesh uses [Go Modules](https://github.com/golang/go/wiki/Modules) for managing
@@ -144,3 +172,13 @@ following to your editor config:
 	// ...
 }
 ```
+
+### Prettier
+
+Prettier configurations for most popular text editors can be found
+[here](https://prettier.io/docs/en/editors.html).
+
+### TSLint
+
+TSLint configurations for most popular text editors can be found
+[here](https://palantir.github.io/tslint/usage/third-party-tools/).

Makefile

@@ -68,7 +68,7 @@ test-ts:
 
 
 .PHONY: lint
-lint: lint-go lint-ts
+lint: lint-go lint-ts lint-prettier
 
 
 .PHONY: lint-go
@@ -80,6 +80,9 @@ lint-go:
 lint-ts:
 	yarn lint
 
+.PHONY: lint-prettier
+lint-prettier:
+	yarn prettier:ci
 
 .PHONY: mesh
 mesh:

cmd/cut-release/main.go

@@ -107,30 +107,50 @@ func generateTypescriptDocs() {
 
 // Update the version string in all files that must be updated for a new release
 func updateHardCodedVersions(version string) {
+	newVersionString := fmt.Sprintf(`"version": "%s"`, version)
+	newBrowserLiteDependencyString := fmt.Sprintf(`"@0x/mesh-browser-lite": "^%s"`, version)
+	newBrowserDependencyString := fmt.Sprintf(`"@0x/mesh-browser": "^%s"`, version)
+
 	// Update `packages/rpc-client/package.json`
 	tsClientPackageJSONPath := "packages/rpc-client/package.json"
-	newVersionString := fmt.Sprintf(`"version": "%s"`, version)
 	regex := `"version": "(.*)"`
 	updateFileWithRegex(tsClientPackageJSONPath, regex, newVersionString)
 
 	// Update `packages/browser-lite/package.json`
 	browserLitePackageJSONPath := "packages/browser-lite/package.json"
-	newVersionString = fmt.Sprintf(`"version": "%s"`, version)
 	regex = `"version": "(.*)"`
 	updateFileWithRegex(browserLitePackageJSONPath, regex, newVersionString)
 
 	// Update `packages/browser/package.json`
 	browserPackageJSONPath := "packages/browser/package.json"
-	newVersionString = fmt.Sprintf(`"version": "%s"`, version)
 	regex = `"version": "(.*)"`
 	updateFileWithRegex(browserPackageJSONPath, regex, newVersionString)
-	newBrowserLiteDependencyString := fmt.Sprintf(`"@0x/mesh-browser-lite": "^%s"`, version)
 	// NOTE(jalextowle): `@0x/mesh-browser` uses the local version of `@0x/mesh-browser-lite`
 	// on the `development` branch. Once the `@0x/mesh-browser-lite` package has been published,
 	// we need to update dependency in `@0x/mesh-browser` to published version.
 	regex = `"@0x/mesh-browser-lite": "(.*)"`
 	updateFileWithRegex(browserPackageJSONPath, regex, newBrowserLiteDependencyString)
 
+	// Update `packages/webpack-example-lite/package.json`
+	webpackExampleLitePackageJSONPath := "packages/webpack-example-lite/package.json"
+	regex = `"@0x/mesh-browser-lite": "(.*)"`
+	updateFileWithRegex(webpackExampleLitePackageJSONPath, regex, newBrowserLiteDependencyString)
+
+	// Update `packages/webpack-example/package.json`
+	webpackExamplePackageJSONPath := "packages/webpack-example/package.json"
+	regex = `"@0x/mesh-browser": "(.*)"`
+	updateFileWithRegex(webpackExamplePackageJSONPath, regex, newBrowserDependencyString)
+
+	// Update `packages/integration-tests/package.json`
+	integrationTestsPackageJSONPath := "packages/integration-tests/package.json"
+	regex = `"@0x/mesh-browser": "(.*)"`
+	updateFileWithRegex(integrationTestsPackageJSONPath, regex, newBrowserDependencyString)
+
+	// Update `packages/test-wasm/package.json`
+	testWasmPackageJSONPath := "packages/test-wasm/package.json"
+	regex = `"@0x/mesh-browser-lite": "(.*)"`
+	updateFileWithRegex(testWasmPackageJSONPath, regex, newBrowserLiteDependencyString)
+
 	// Update `core.go`
 	corePath := "core/core.go"
 	newVersionString = fmt.Sprintf(`version$1= "%s"`, version)

integration-tests/utils.go

@@ -116,29 +116,20 @@ func buildForTests(t *testing.T, ctx context.Context) {
 	buildStandaloneForTests(t, ctx)
 	buildBootstrapForTests(t, ctx)
 
-	fmt.Println("Clear yarn cache...")
-	cmd := exec.CommandContext(ctx, "yarn", "cache", "clean")
-	cmd.Dir = "../"
+	// Note(albrow): We have to rebuild the browser package manually in case
+	// any Go code was changed. The TypeScript compiler can automatically rebuild
+	// for TypeScript code changes only.
+	fmt.Println("Building mesh-browser package...")
+	cmd := exec.CommandContext(ctx, "yarn", "build")
+	cmd.Dir = "../packages/browser"
 	output, err := cmd.CombinedOutput()
-	require.NoError(t, err, "could not clean yarn cache: %s", string(output))
+	require.NoError(t, err, "could not build mesh-browser package: %s", string(output))
 
-	fmt.Println("Installing dependencies for TypeScript bindings...")
-	cmd = exec.CommandContext(ctx, "yarn", "install", "--force")
-	cmd.Dir = "../"
-	output, err = cmd.CombinedOutput()
-	require.NoError(t, err, "could not install depedencies for TypeScript bindings: %s", string(output))
-
-	fmt.Println("Running postinstall for browser node...")
-	cmd = exec.CommandContext(ctx, "yarn", "postinstall")
-	cmd.Dir = "../packages/integration-tests"
-	output, err = cmd.CombinedOutput()
-	require.NoError(t, err, "could not run yarn postinstall: %s", string(output))
-
-	fmt.Println("Building TypeScript bindings...")
+	fmt.Println("Building integration-tests package...")
 	cmd = exec.CommandContext(ctx, "yarn", "build")
-	cmd.Dir = "../"
+	cmd.Dir = "../packages/integration-tests"
 	output, err = cmd.CombinedOutput()
-	require.NoError(t, err, "could not build TypeScript bindings: %s", string(output))
+	require.NoError(t, err, "could not build integration-tests package: %s", string(output))
 	fmt.Println("Done building everything")
 }
 

package.json

@@ -4,18 +4,20 @@
     "engines": {
         "node": ">=11"
     },
-    "workspaces": [ 
-        "packages/*" 
-    ], 
+    "workspaces": [
+        "packages/*"
+    ],
     "scripts": {
         "wsrun": "wsrun",
-        "build": "wsrun --stages --fast-exit --exclude-missing build $PKG",
+        "build": "wsrun --stages --fast-exit --exclude-missing build",
         "build:ts": "tsc -b",
         "watch:ts": "tsc -b -w",
-        "clean": "wsrun --fast-exit --exclude-missing clean $PKG",
-        "docs:md": "wsrun --fast-exit --exclude-missing docs:md $PKG",
-        "lint": "wsrun lint $PKG",
-        "test": "wsrun --fast-exit --exclude-missing test $PKG "
+        "clean": "wsrun --fast-exit --exclude-missing clean",
+        "docs:md": "wsrun --fast-exit --exclude-missing docs:md",
+        "lint": "wsrun lint",
+        "prettier": "prettier --write '**/*.{ts,tsx,json,md}' --config .prettierrc",
+        "prettier:ci": "prettier --list-different '**/*.{ts,tsx,json}' --config .prettierrc",
+        "test": "wsrun --fast-exit --exclude-missing test "
     },
     "description": "A peer-to-peer network for sharing orders",
     "main": "index.js",

packages/browser-lite/tsconfig.json

@@ -1,7 +1,7 @@
 {
-    "extends": "../../tsconfig",
-    "compilerOptions": { 
-        "outDir": "lib", 
+    "extends": "../../tsconfig-base",
+    "compilerOptions": {
+        "outDir": "lib",
         "rootDir": "src"
     },
     "include": ["./src/**/*"]

packages/browser/package.json

@@ -21,7 +21,7 @@
         "docsPath": "../../docs/browser-bindings/browser"
     },
     "dependencies": {
-        "@0x/mesh-browser-lite": "file:../browser-lite",
+        "@0x/mesh-browser-lite": "1.0.0",
         "base64-arraybuffer": "^0.2.0",
         "browserfs": "^1.4.3",
         "ethereum-types": "^3.0.0"

packages/browser/tsconfig.json

@@ -1,9 +1,14 @@
 {
-    "extends": "../../tsconfig",
-    "compilerOptions": { 
-        "outDir": "lib", 
-        "rootDir": "src" 
+    "extends": "../../tsconfig-base",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "src"
     },
     "include": ["./src/**/*"],
-    "exclude": ["./conversion-tests/**/*"]
+    "exclude": ["./conversion-tests/**/*"],
+    "references": [
+        {
+            "path": "../browser-lite"
+        }
+    ]
 }

packages/browser/webpack.tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "extends": "../../tsconfig",
+    "extends": "../../tsconfig-base",
     "compilerOptions": { "outDir": "lib", "rootDir": "." },
     "include": ["./src/**/*", "./conversion-tests/**/*"],
     "exclude": ["./src/index.ts"]

packages/integration-tests/package.json

@@ -5,8 +5,9 @@
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
-        "build": "node --max_old_space_size=3072 ./node_modules/.bin/webpack --mode=development",
+        "build": "yarn build:ts && node --max_old_space_size=3072 ./node_modules/.bin/webpack --mode=development",
         "build:ts": "tsc -b",
+        "clean": "shx rm ./dist/bundle.js || exit 0",
         "postinstall:comment": "Remove the go and scripts directories of the mesh browser package to reduce the webpack bundle size",
         "postinstall": "yarn rimraf ./node_modules/@0x/mesh-browser/go ./node_modules/@0x/mesh-browser/scripts",
         "lint": "tslint --format stylish --project ."
@@ -19,7 +20,7 @@
         "webpack-cli": "^3.3.7"
     },
     "dependencies": {
-        "@0x/mesh-browser": "file:../browser",
+        "@0x/mesh-browser": "1.0.0",
         "@0x/order-utils": "^10.0.1",
         "@0x/subproviders": "^6.0.2",
         "@0x/utils": "^5.1.1"

packages/integration-tests/tsconfig.json

@@ -1,9 +1,14 @@
 {
-    "extends": "../../tsconfig",
-    "compilerOptions": { 
-        "outDir": "./dist", 
-        "rootDir": "./src" ,
+    "extends": "../../tsconfig-base",
+    "compilerOptions": {
+        "outDir": "./lib",
+        "rootDir": "./src",
         "typeRoots": ["node_modules/@0x/typescript-typings/types", "node_modules/@types"]
     },
-    "include": ["./src/**/*", "./test/**/*"]
+    "include": ["./src/**/*", "./test/**/*"],
+    "references": [
+        {
+            "path": "../browser"
+        }
+    ]
 }

packages/rpc-client/tsconfig.json

@@ -1,8 +1,8 @@
 {
-    "extends": "../../tsconfig",
-    "compilerOptions": { 
-        "outDir": "lib", 
-        "rootDir": "." 
+    "extends": "../../tsconfig-base",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "."
     },
     "include": ["./src/**/*", "./test/**/*"]
 }

packages/test-wasm/package.json

@@ -6,12 +6,12 @@
     "main": "./lib/index.js",
     "license": "Apache-2.0",
     "scripts": {
-        "build": "./node_modules/.bin/webpack --mode=development",
+        "build": "tsc -b && ./node_modules/.bin/webpack --mode=development",
         "clean": "shx rm -r ./dist && shx rm -r ./lib || exit 0",
         "lint": "tslint --format stylish --project ."
     },
     "dependencies": {
-        "@0x/mesh-browser-lite": "file:../browser-lite",
+        "@0x/mesh-browser-lite": "1.0.0",
         "shx": "^0.3.2",
         "typescript": "^3.9.3",
         "ts-loader": "^6.2.1",

packages/test-wasm/tsconfig.json

@@ -1,8 +1,13 @@
 {
-    "extends": "../../tsconfig",
-    "compilerOptions": { 
-        "outDir": "lib", 
-        "rootDir": "src" 
+    "extends": "../../tsconfig-base",
+    "compilerOptions": {
+        "outDir": "lib",
+        "rootDir": "src"
     },
-    "include": ["./src/**/*"]
+    "include": ["./src/**/*"],
+    "references": [
+        {
+            "path": "../browser-lite"
+        }
+    ]
 }

packages/webpack-example-lite/package.json

@@ -5,10 +5,10 @@
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
-        "build": "yarn build:webpack && yarn build:wasm",
+        "build": "tsc -b && yarn build:webpack && yarn build:wasm",
         "build:wasm": "GOOS=js GOARCH=wasm go build -o ./dist/main.wasm ../browser/go/mesh-browser/main.go",
         "build:webpack": "node --max_old_space_size=3072 ./node_modules/.bin/webpack --mode=development",
-        "clean": "shx rm ./dist/bundle.js",
+        "clean": "shx rm ./dist/bundle.js || exit 0",
         "postinstall:comment": "Remove the go and scripts directories of the mesh browser package to reduce the webpack bundle size",
         "postinstall": "yarn rimraf ./node_modules/@0x/mesh-browser/go ./node_modules/@0x/mesh-browser/scripts",
         "lint": "tslint --format stylish --project ."
@@ -22,6 +22,6 @@
         "webpack-cli": "^3.3.7"
     },
     "dependencies": {
-        "@0x/mesh-browser-lite": "file:../browser-lite"
+        "@0x/mesh-browser-lite": "1.0.0"
     }
 }

packages/webpack-example-lite/tsconfig.json

@@ -1,17 +1,13 @@
 {
+    "extends": "../../tsconfig-base",
     "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "./src",
-        "module": "commonjs",
-        "target": "es5",
-        "lib": ["es2017", "dom"],
-        "experimentalDecorators": true,
-        "downlevelIteration": true,
-        "noImplicitReturns": true,
-        "pretty": true,
-        "skipLibCheck": true,
-        "typeRoots": ["node_modules/@0x/typescript-typings/types", "node_modules/@types"],
-        "strict": true
+        "outDir": "lib",
+        "rootDir": "src"
     },
-    "include": ["./src/**/*", "./test/**/*"]
+    "include": ["./src/**/*", "./test/**/*"],
+    "references": [
+        {
+            "path": "../browser-lite"
+        }
+    ]
 }