Add TypeScript bindings #369

albrow · 2019-08-21T22:02:32Z

Fixes #298.

This PR adds TypeScript bindings and an npm package for using Mesh in the browser. The Wasm bytecode is embedded in the package itself which makes it really easy to import and use. It also adds an example of how to import and use the TypeScript bindings.

Here's a breakdown of the directory structure and key files:

browser/ contains TypeScript bindings for running Mesh in the browser. This directory is a publishable npm package called @0x/mesh-browser.
- go/ The source code for the Wasm bytecode that will be embedded in the package. It imports 0x-mesh/core and adds everything we need to the global scope.
- scripts/ contains one-off scripts related to the TypeScript bindings.
  - generate_wasm_buffer.go a script that generates a TypeScript file containing the Wasm bytecode as a base64-encoded ArrayBuffer.
- ts/ the entry point for the npm package. This is a lightweight wrapper around the variables that we injected into global scope that adds some extra niceties.
  - generated/ contains the TypeScript file generated by scripts/generate_wasm_buffer.go.
- wasm/ contains the Wasm bytecode itself (the result of compiling go/main.go).
- lib/ contains the JavaScript code, source maps, and type definitions (the result of compiling ts/).
examples/browser is an example of how to import and use the @0x/mesh-browser package in a browser-based application. It uses TypeScript and webpack.
- src/ is the TypeScript code for the example application.
- dist/ is where webpack outputs the results. Everything is compiled into a single bundle.js file.

I'm planning to clean this up and document it in a README, but for now here are the steps for running the example:

In the browser/ directory run yarn install && yarn build.
In the examples/browser directory run yarn install && yarn build.
In the root of the repository, run goexec 'http.ListenAndServe(":8000", http.FileServer(http.Dir("./examples/browser/dist")))'
Visit http://localhost:8000 in your browser and look at the console output.

…e_modules

albrow · 2019-08-22T00:08:56Z

Latest commit adds a setOrderEventsHandler method, which is analogous to the mesh_subscribe("orders") JSON RPC endpoint.

albrow · 2019-08-22T23:11:26Z

@fabioberger I removed the WIP tag and this PR is ready for review. I still expect that there will be some discussion about naming, interface design, and project structure.

browser/package.json

albrow · 2019-08-22T23:19:37Z

browser/ts/index.ts

+    const zeroExMesh: ZeroExMesh;
+}
+
+/**


@fabioberger We should probably generate docs for the TypeScript bindings similar to what we did for the TypeScript RPC client. Can you point me in the right direction? Alternatively we could do that in a separate PR since this is already pretty big.

You'll need "@0x/ts-doc-gen": "^0.0.16", dep and a command:

"scripts": { "docs:md": "ts-doc-gen --sourceDir=./src --output=${npm_package_config_docsPath}" }, "config": { "docsPath": "../../../docs/json_rpc_clients/typescript" },

Just change the docsPath to where you want the MD generated to and it should work 👍

👍@fabioberger just added this. Mind eyeballing the docs to make sure everything looks right?

albrow · 2019-08-22T23:27:20Z

I know there's not a lot of tests here. I'm planning to write integration tests in a separate PR. The way it will work is that we'll spin up a few nodes on a local network and confirm that they can connect and share orders with one another. It will involve coordinating between some native Go nodes and some that are running in a headless browser. In the meantime, examples/browser can serve as a sort of ad hoc integration test.

albrow · 2019-08-22T23:28:46Z

examples/browser/package.json

+        "webpack-cli": "^3.3.7"
+    },
+    "dependencies": {
+        "@0x/mesh-browser": "./../../browser/"


Right now the example uses a local copy of the TypeScript bindings. I'll update this to use the actual version once we have published the package on NPM.

fabioberger · 2019-08-23T15:59:28Z

browser/go/main.go

+	loadEventName = "0xmeshload"
+	// orderEventsBufferSize is the buffer size for the orderEvents channel. If
+	// the buffer is full, any additional events won't be processed.
+	orderEventsBufferSize = 100


Any reason not to bump this up a bit higher?

Increasing orderEventsBufferSize reduces the chance of order events being missed but increases memory usage. I think 100 is a decent starting point but we can adjust it if needed. The channel should never get that full if an orderEventsHandler is set.

browser/go/main.go

browser/package.json

fabioberger · 2019-08-23T16:23:57Z

browser/ts/index.ts

+    signedOrder: MeshSignedOrder;
+    kind: RejectedOrderKind;
+    status: RejectedOrderStatus;
+}


These are all duplicated from @0x/mesh-rpc-client. Any ideas on how to avoid that? I can't think of any without creating a TS monorepo within this repo...

I can't think of anything else either. I'm not sure if it's worth the overhead of using a TS monorepo here. Let's copy it manually for now and discuss later?

browser/package.json

fabioberger · 2019-08-23T16:34:38Z

browser/ts/index.ts

+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function meshSignedOrderToSignedOrder(meshSignedOrder: MeshSignedOrder): SignedOrder {


Why you're calling MeshSignedOrder we call StringifiedSignedOrder in mesh-rpc-client. Thoughts on standardizing?

Hmm... StringifiedSignedOrder is an okay name in this case because all the types are strings. However, I want to pick a name that highlights the pattern of converting between Go types and TypeScript types. I'm thinking that there will be other type conversions in the future and not just string to BigNumber. I can't think of a good name to cover the use cases in both mesh-rpc-client and mesh-browser. Maybe something like BasicSignedOrder?

My vote would perhaps be StringifiedSignedOrder for now, and if there are other types involved in the future, changing it then. Don't feel too strongly about this though, so we can also leave it for now.

I'm going to go with WrapperSignedOrder, WrapperOrderEvent, WrapperValidationResults, etc. to more closely match the fact that these are types exposed by MeshWrapper that might need further conversion. This is what I was originally trying to show with the Mesh* prefix but I feel that name was too confusing. Happy to re-evaluate later.

examples/browser/src/index.ts

Co-Authored-By: Fabio B <me@fabioberger.com>

…-mesh into feature/typescript-bindings

Add minimal TypeScript bindings and update browser example to use them

94b3fb1

albrow added the browser label Aug 21, 2019

albrow added this to the MVP Browser Support milestone Aug 21, 2019

albrow requested a review from fabioberger August 21, 2019 22:02

albrow assigned albrow and fabioberger Aug 21, 2019

albrow added 3 commits August 21, 2019 15:06

Minor name changes

e903a89

Add temporary workaround to remove Go files from examples/browser/nod…

5f47499

…e_modules

Add setOrderEventsHandler method

91d2533

Implement addOrdersAsync method

8aafd19

albrow force-pushed the feature/typescript-bindings branch from 733dee3 to 8aafd19 Compare August 22, 2019 20:30

albrow added 4 commits August 22, 2019 14:05

Implement onError method

8b45d14

Use BigNumber and @0x/order-utils types where appropriate

dba3516

Add more documentation comments

2fee79f

Fix some typos and improve some comments

cfd6afc

albrow changed the title ~~WIP: Add TypeScript bindings~~ Add TypeScript bindings Aug 22, 2019

Update top-level yarn.lock

3615430

albrow commented Aug 22, 2019

View reviewed changes

browser/package.json Outdated Show resolved Hide resolved

albrow commented Aug 22, 2019

View reviewed changes

browser/package.json Outdated Show resolved Hide resolved

albrow commented Aug 22, 2019

View reviewed changes

Remove old comment

a156cf7

albrow commented Aug 22, 2019

View reviewed changes

fabioberger suggested changes Aug 23, 2019

View reviewed changes

albrow and others added 4 commits August 23, 2019 11:09

Update browser/go/main.go

0925043

Co-Authored-By: Fabio B <me@fabioberger.com>

Update examples/browser/src/index.ts

b5c7cfc

Co-Authored-By: Fabio B <me@fabioberger.com>

Update package.json files

9294076

Merge branch 'feature/typescript-bindings' of github.com:0xProject/0x…

ed8a11c

…-mesh into feature/typescript-bindings

albrow added 4 commits August 23, 2019 11:56

Add browser README and docs:md script

8a543a0

Add note about keeping Config type in sync

f03aca3

Add tslint

afb5199

Throw an error if Wasm didn't compile

3ab7a48

albrow requested a review from fabioberger August 23, 2019 20:11

fabioberger approved these changes Aug 23, 2019

View reviewed changes

Rename Mesh* types to Wrapper* in browser/index.ts

95f193b

albrow merged commit 3e68040 into development Aug 23, 2019

albrow deleted the feature/typescript-bindings branch August 23, 2019 22:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TypeScript bindings #369

Add TypeScript bindings #369

albrow commented Aug 21, 2019 •

edited

Loading

albrow commented Aug 22, 2019

albrow commented Aug 22, 2019

albrow Aug 22, 2019

fabioberger Aug 23, 2019

albrow Aug 23, 2019

albrow commented Aug 22, 2019 •

edited

Loading

albrow Aug 22, 2019 •

edited

Loading

fabioberger Aug 23, 2019

albrow Aug 23, 2019

fabioberger Aug 23, 2019

albrow Aug 23, 2019

fabioberger Aug 23, 2019

albrow Aug 23, 2019

fabioberger Aug 23, 2019

albrow Aug 23, 2019

Add TypeScript bindings #369

Add TypeScript bindings #369

Conversation

albrow commented Aug 21, 2019 • edited Loading

albrow commented Aug 22, 2019

albrow commented Aug 22, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

albrow commented Aug 22, 2019 • edited Loading

albrow Aug 22, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

albrow commented Aug 21, 2019 •

edited

Loading

albrow commented Aug 22, 2019 •

edited

Loading

albrow Aug 22, 2019 •

edited

Loading