Add WebAssembly support #232

emidoots · 2019-01-21T08:37:06Z

Prior to this PR, Vecty was only usable with GopherJS which would compile Go to JS code.

After this PR, Vecty can be used with:

GopherJS (browser, testing)
Go + WebAssembly (browser, testing)
Go + Native (for testing Vecty itself, autocomplete in editors etc)

All examples in the example directory work under both GopherJS and WebAssembly, and a README is added to describe how to compile for each.

TinyGo future support

In the future, Vecty will automatically gain support for TinyGo once it supports the subset of reflection and syscall/js that we make use of.

See tinygo-org/tinygo#93 for more discussion around this.

Prior work

Supersedes the prior PR for this by using build tags instead of exposing a gopherwasm API directly. See #215 (comment) for discussion around this.

Fixes #211

emidoots · 2019-01-21T08:40:37Z

It will likely be a few more weeks before I have time to begin working on this again and finish the remaining bits / merge it.

emidoots · 2019-05-13T10:07:30Z

Looks like the ecosystem is maturing a bit so we're pretty closer to being able to merge this. Notable things that have happened recently:

Go 1.12 has been released, so we don't need to advise installing Go tip anymore.
TinyGo now has support for all reflection APIs we need.
GopherJS has added syscall/js support (thanks to @hajimehoshi) so we no longer need to use gopherwasm in examples and can unify our DOM implementations between GopherJS/WASM.

Remaining work:

Test / confirm TinyGo support works -> it does not, I will post an update on Support compiling basic Vecty/Vugu examples to WASM tinygo-org/tinygo#93
Make use of new GopherJS syscall/js support / unify DOM implementations.
wasmserve has a bug only affecting example/markdown where it returns:

(index):4 GET http://localhost:8080/main.wasm net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

No other errors, logs, etc. Unsure why. Doesn't affect other examples. cc @hajimehoshi if you have any ideas, otherwise I'll find more minimal case and file/fix upstream.

(Just checkout this branch and cd example/markdown && wasmserve if you are keen to reproduce)

aykevl · 2019-05-13T12:16:16Z

I don't think the reflect support in TinyGo is good enough: it still doesn't support inspecting structs for example. However, I have been working on a better map implementation which is a prerequisite to js.FuncOf support so there is still progress.

hajimehoshi · 2019-05-13T19:11:16Z

wasmserve has a bug only affecting example/markdown where it returns:

That's a strange error message I've never seen. I'll take a look later, but now I'm on a business trip, so I cannot guarantee when :-)

emidoots · 2019-05-26T04:47:41Z

Confirmed the wasmserve issue is actually a bug in WSL not wasmserve: hajimehoshi/wasmserve#5

johanbrandhorst · 2019-06-18T18:05:24Z

What is the status of this? I think vecty could move to using syscall/js for both WebAssembly and GopherJS now that GopherJS has syscall/js too. What do you think?

johanbrandhorst · 2019-06-30T09:23:25Z

.travis.yml

-  - gopherjs test -v ./...
+  # Test with Go compiler (under amd64 and wasm architectures) and GopherJS compiler.
+  #- go test -race ./...
+  - GOOS=js GOARCH=wasm go test -exec="$(go env GOROOT)/misc/wasm/go_js_wasm_exec" ./... # https://github.com/golang/go/wiki/WebAssembly#executing-webassembly-with-nodejs


FYI there is https://github.com/agnivade/wasmbrowsertest which allows you to test against a browser.

Neat, I can see why that'd be useful -- though one of our goals with Vecty is to make go test alone (even without GOOS=js) work (initially just for testing Vecty itself, secondarily/not in this PR in projects using Vecty)

johanbrandhorst · 2019-06-30T13:41:46Z

example/README.md

+
+- Go 1.12+ WebAssembly support
+- [GopherJS](https://github.com/gopherjs/gopherjs) (Go to JavaScript transpiler)
+- [TinyGo](https://github.com/tinygo-org/tinygo) WebAssembly support (produces tiny binaries, but with tradeoffs)


😬 is this right? TinyGo doesn't support all of reflect yet. Have you tested it with TinyGo?

Yeah, I haven't updated this file yet & TinyGo most likely doesn't work. Will fix.

example/go.mod

example/todomvc/example.go

codecov-io · 2019-07-01T03:56:09Z

Codecov Report

Merging #232 into master will increase coverage by 1.77%.
The diff coverage is 57.89%.

@@            Coverage Diff             @@
##           master     #232      +/-   ##
==========================================
+ Coverage   57.64%   59.41%   +1.77%     
==========================================
  Files           3        4       +1     
  Lines         654      653       -1     
==========================================
+ Hits          377      388      +11     
+ Misses        219      208      -11     
+ Partials       58       57       -1

Impacted Files	Coverage Δ
markup.go	`70.96% <ø> (ø)`	⬆️
dom_native.go	`53.84% <53.84%> (ø)`
dom.go	`57.45% <60%> (+2.16%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 216758a...9cf66b5. Read the comment docs.

Using blackfriday v2 with GopherJS and WebAssembly is not currently easily possible because with Go modules v2 must be imported as: ``` github.com/russross/blackfriday/v2 ``` But `gopherjs serve` cannot use that versioned import path, since it is not module-ware ([open issue](gopherjs/gopherjs#855)). So we end up stuck in a catch-22: Go 1.12 WebAssembly can't build `gopkg.in/russross/blackfriday.v2` anymore (import path must be suffixed with `/v2`) and GopherJS cannot build `github.com/russross/blackfriday/v2`. Initially I just tried downgrading to blackfriday v1 at `github.com/russross/blackfriday` but unfortunately that appears to have a different problem where module-aware builders like Go 1.12 are forced to use v2 but non-module-aware work fine, I suspect due to the `go.mod` comitted to that repo currently. This works for now, and the long term fix is GopherJS getting module-aware building.

Note that we still use a mock JS implementation for purposes of testing because syscall/js does not provide any such facilities today.

In some such as `TestRenderBody_RenderSkipper_Skip` it is not logically apparent to me how these ever passed on master before this, because the panic would have always led to RAF never being called unless `renderComponent` called RAF?

- run tests with GOOS=js GOARCH=wasm. - upgrade to go 1.12 - do not test with -v flag - use gofumpt/gofumports

emidoots · 2019-07-01T08:14:01Z

Good news! It's finally time for this to be merged: Vecty now has WebAssembly support! 😃 🎉

Consult the new README for details on bundle sizes, etc. (hello world is surprisingly small!)
Consult the updated PR description for details on supported build targets (WebAssembly, GopherJS, native, TinyGo, etc).
Consult the new example/README.md for details on building examples for WebAssembly.
Consult the CHANGELOG for exact details on the API breakage here.

Update Go Package Store to be compatible with Vecty API after vecty.RenderBody became blocking as part of hexops/vecty#232. Use the new non-blocking vecty.RenderInto instead, which was created as part of the solution described in hexops/vecty#247. Updates hexops/vecty#232. Updates hexops/vecty#247.

emidoots mentioned this pull request Jan 21, 2019

Add support for WebAssembly #215

Closed

xoviat mentioned this pull request Apr 2, 2019

cannot parse import comment marwan-at-work/vecty-router#8

Closed

emidoots mentioned this pull request May 12, 2019

TinyGo to produce smaller files sizes gopherjs/gopherjs#905

Closed

emidoots force-pushed the wasm branch 2 times, most recently from 8e15258 to 2592a9d Compare June 30, 2019 03:25

johanbrandhorst reviewed Jun 30, 2019

View reviewed changes

example/go.mod Outdated Show resolved Hide resolved

johanbrandhorst reviewed Jun 30, 2019

View reviewed changes

example/todomvc/example.go Outdated Show resolved Hide resolved

emidoots added 14 commits June 30, 2019 21:27

wasm WIP

b52c7b4

todomvc

3acd7a8

docs

feb7f76

go get ./...`

7e8b849

fix gopherjs building

6cfab50

example: update README

4c67cb7

example/markdown: fix "go test" building

d36b550

unify DOM implementation using syscall/js

40ae324

Note that we still use a mock JS implementation for purposes of testing because syscall/js does not provide any such facilities today.

correct function names in test strings

7d6521f

update function name mocks + test data

e73af9c

fix running most tests

2d119e2

accept RAF test change

1e12297

In some such as `TestRenderBody_RenderSkipper_Skip` it is not logically apparent to me how these ever passed on master before this, because the panic would have always led to RAF never being called unless `renderComponent` called RAF?

require GopherJS version 1.12+ for syscall/js

9e4a667

emidoots added 16 commits June 30, 2019 21:29

travis: update for GopherJS + WebAssembly + native builds

f4cd907

- run tests with GOOS=js GOARCH=wasm. - upgrade to go 1.12 - do not test with -v flag - use gofumpt/gofumports

gofmt

d350103

example/markdown: use blackfriday fork to avoid import complexity

c024de9

fix infinite recursive call

d549908

example/todomvc: order imports

b30a410

make tests non-reliant on syscall/js

5ff9550

remove mention of separate node types

88a31b3

testsuite: do not accidently consume panics

1ecc946

fix test suite on native architectures

d951e4b

gofumpt / gofumports

c6aee08

fix native build / type checking

f69e0dd

correct build tag

b1075c8

undo

4d3a512

fix native build / type checking

e1d54f8

update testdata

1455159

correctly release JS callbacks

da9db7b

emidoots force-pushed the wasm branch from 027bea8 to da9db7b Compare July 1, 2019 04:31

example: update README

c7dc7af

emidoots changed the title ~~[WIP] Add WebAssembly support~~ Add WebAssembly support Jul 1, 2019

emidoots added 4 commits June 30, 2019 23:49

doc/CHANGELOG: mention move to syscall/js

c4a4263

example: add hellovecty (useful for measuring minimal bundle size)

a0ff746

README: modernize

8fe4af3

gofmt

9cf66b5

emidoots merged commit 875bd2c into master Jul 1, 2019

emidoots deleted the wasm branch July 1, 2019 08:22

This was referenced Jul 1, 2019

Support compiling basic Vecty/Vugu examples to WASM tinygo-org/tinygo#93

Closed

Vecty officially has WebAssembly support gowasm/vecty#10

Open

dmitshur mentioned this pull request Aug 10, 2019

RenderBody became blocking (it never returns) after PR #232 #247

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WebAssembly support #232

Add WebAssembly support #232

emidoots commented Jan 21, 2019 •

edited

Loading

emidoots commented Jan 21, 2019 •

edited

Loading

emidoots commented May 13, 2019 •

edited

Loading

aykevl commented May 13, 2019

hajimehoshi commented May 13, 2019

emidoots commented May 26, 2019

johanbrandhorst commented Jun 18, 2019

johanbrandhorst Jun 30, 2019

emidoots Jun 30, 2019

johanbrandhorst Jun 30, 2019

emidoots Jun 30, 2019

codecov-io commented Jul 1, 2019 •

edited

Loading

emidoots commented Jul 1, 2019 •

edited

Loading

Add WebAssembly support #232

Add WebAssembly support #232

Conversation

emidoots commented Jan 21, 2019 • edited Loading

TinyGo future support

Prior work

emidoots commented Jan 21, 2019 • edited Loading

emidoots commented May 13, 2019 • edited Loading

aykevl commented May 13, 2019

hajimehoshi commented May 13, 2019

emidoots commented May 26, 2019

johanbrandhorst commented Jun 18, 2019

johanbrandhorst Jun 30, 2019

Choose a reason for hiding this comment

emidoots Jun 30, 2019

Choose a reason for hiding this comment

johanbrandhorst Jun 30, 2019

Choose a reason for hiding this comment

emidoots Jun 30, 2019

Choose a reason for hiding this comment

codecov-io commented Jul 1, 2019 • edited Loading

Codecov Report

emidoots commented Jul 1, 2019 • edited Loading

emidoots commented Jan 21, 2019 •

edited

Loading

emidoots commented Jan 21, 2019 •

edited

Loading

emidoots commented May 13, 2019 •

edited

Loading

codecov-io commented Jul 1, 2019 •

edited

Loading

emidoots commented Jul 1, 2019 •

edited

Loading