dave/jsgo

GopherJS compiler, serving framework and CDN.

2020 Update

• The compile.jsgo.io and play.jsgo.io services have been shut down.
• Anything deployed to jsgo.io or pkg.jsgo.io will continue to work fine.

I created the jsgo.io system several years ago, and it costs about $150/month to host which I pay personally. I'm tightening up my finances right now, so this outgoing had to stop.

If anyone would like to host it for me (it runs on a single GKE n1-standard-2 instance), please let me know and we can get it back online!

I had a plan for a big rewrite that would make is possible to run on App Engine, thus reduce the cost to almost zero. Unfortunately this is something I'm hesitant to start, because it seems that Go on the client is moving away from GopherJS and towards WASM.

jsgo.io

GopherJS is an amazing tool, but I've always been frustrated by the size of the output. All the packages in the dependency tree (including the standard library) are compiled to a single JS file. This can cause the resultant file to be several megabytes.

I've always thought a better solution would be to split the JS up by package and store it in a centralized CDN. This architecture would then allow aggressive caching: If you import fmt, it'll be delivered as a separate file fmt.js, and there's a good chance some of your visitors will already have it in their browser cache. Additionally, incremental updates to your app will only change the package you're updating, so your visitors won't have to download the entire dependency tree again.

jsgo.io makes this simple.

Features

• Compiles Go to JS using GopherJS.
• Splits the JS up by Go package.
• Stores the JS in a CDN for you (GCP / Cloudflare).
• Aggressively caches the JS.
• Creates a page on jsgo.io that runs the JS.
• Creates a single loader JS file you can use on your site.

How it works

Visit https://compile.jsgo.io/<path> to compile or re-compile your package. Here's a very simple hello world. Just click Compile.

After it's finished, you'll be shown a link to a page that runs the code on jsgo.io. The compile page will also give you a link to a single JS file on pkg.jsgo.io - this is the loader JS for your package. Add this in a <script> tag on your site and it will download all the dependencies and execute your package.

URLs on jsgo.io that start github.com may be abbreviated: github.com/foo/bar will be available at jsgo.io/foo/bar and also jsgo.io/github.com/foo/bar. Package URLs on pkg.jsgo.io always use the full path.

Production ready?

The package CDN (everything on pkg.jsgo.io) should be considered relatively production ready - it's just static JS files in a Google Storage bucket behind a Cloudflare CDN so there's very little that can go wrong. Additionally, the URL of each file contains a hash of it's contents, ensuring immutability.

The index pages (everything on jsgo.io) should only be used for testing and toy projects. Remember you're sharing a domain with everyone else, so the browser environment (cookies, local storage etc.) should be used with caution! For anything important, create your own index page on your site and add the loader JS (on pkg.jsgo.io) to a <script> tag.

Ths compile server (everything on compile.jsgo.io) should be considered in beta... Please add an issue if it's having trouble compiling your project.

Demos

• https://jsgo.io/hajimehoshi/go-inovation
• https://jsgo.io/hajimehoshi/ebiten/examples/2048
• https://jsgo.io/shurcooL/tictactoe/cmd/tictactoe
• https://jsgo.io/dave/todomvc
• https://jsgo.io/gopherjs/vecty/example/markdown
• https://jsgo.io/dave/html2vecty
• https://jsgo.io/dave/zip
• https://jsgo.io/dave/img

The power of aggressive caching is apparent when loading pages which share common packages... The examples in the ebiten game library are a great demonstration of this:

• https://jsgo.io/hajimehoshi/ebiten/examples/blocks
• https://jsgo.io/hajimehoshi/ebiten/examples/airship
• https://jsgo.io/hajimehoshi/ebiten/examples/alphablending
• https://jsgo.io/hajimehoshi/ebiten/examples/audio
• https://jsgo.io/hajimehoshi/ebiten/examples/infinitescroll
• https://jsgo.io/hajimehoshi/ebiten/examples/rotate
• https://jsgo.io/hajimehoshi/ebiten/examples/sprites

Index

You can customize the HTML delivered by the jsgo.io page by adding a file named index.jsgo.html to your package. Use {{ .Script }} as the script src. See todomvc for an example.

Progress

If a function window.jsgoProgress exists, it will be called repeatedly as packages load. Two parameters are supplied: count (the number of packages loaded so far) and total (the total number of packages).

The default index page on jsgo.io is to display a simple count / total message in a span. However, by supplying a custom index.jsgo.html, more complex effects may be created - see the html2vecty example for a bootstrap progress bar.

Limitations

If there's any non git repositories (e.g. hg, svn or bzr) in your dependency tree, it will fail. This is unlikely to change. Workaround: vendor the dependencies and it'll work fine.

How to contact me

If you'd like to chat more about the project, feel free to add an issue, mention @dave in your PR, email me or post in the #gopherjs channel of the Gophers Slack. I'm happy to help!

Run locally?

If you'd like to run jsgo locally, take a look at these instructions.

jsgo's Issues

go generate at $GOPATH/src/github.com/dave/jsgo/initialise failed

hajimehoshi@Hajimes-MacBook-Pro ~/go/src/github.com/dave/jsgo/initialise
$ GOPATH=~/go go generate
Loading...
Compiling: archive/tar (minified)
2018/12/26 01:41:20 goroot/src/reflect/value.go:673:60: cannot use t (variable of type *rtype) as *funcType value in argument to funcLayout
exit status 1
generate.go:3: running "go": exit status 1

Adapt to console application

Hi Dave,

A noob question -- How to adapt jsgo transpiled code for/to use within console?

Let me explain with a simple example:
https://github.com/suntong/game24/blob/c8000136ce33497ff32d09e9d52fb33df6bb2399/str/game24/main.go#L19-L22

 func main() { 
 	r := game24.Play(30) 
 	fmt.Println(r) 
 } 

Suppose I've got what I want from line 20, and I'll change line 21 to console.log(r),

how can I write a index.js file that does the above two simple steps?

My ultimate goal is to use my jsgo transpiled code as lib for my console based nodejs program. I.e., I don't know JS enough to turn the code of

$load["something"] = function () {
$packages["something"] = (function() {
...

to nodejs based program that use module.exports and require("./something"); for module importing.

THX a lot!

Cannot compile programs that vendor GopherJS

GopherJS recently recieved support for vendoring, and I updated my johanbrandhorst/grpcweb-example to vendor the GopherJS compiler. However, now I can't compile the client package anymore:

https://compile.jsgo.io/johanbrandhorst/grpcweb-example/client

It returns Error: vendoring github.com/gopherjs/gopherjs/js package is not supported, see https://github.com/gopherjs/gopherjs/issues/415.

Presumably this should just be a matter of upgrading the compiler?

playground: print(ln) / stdout / stderr output

Now the result of println is shown at the console, but there are mixed messages from the playground itself and from println. Could we have a separate space to show println messages?

Also, it'd be useful to have space showing stdout / stderr messages, but I don't know we really need this.

Ebiten requires the latest GopherJS (1.12-2) and Go 1.12

The latest change in GopherJS (gopherjs/gopherjs#899) made it possible to use syscall/js instead of github.com/gopherjs/gopherjs/js, and Ebiten now replaced all the imports. Ebiten requires GopherJS (and Go 1.12 for the latest syscall/js API definition), but it looks like jsgo does not support them yet, and I've confirmed jsgo didn't work for Ebiten now. I'd be happy if you could update them. Thanks!

Zopfli compress JS files

Hi!

This is a super cool idea, and I really like it, especially the package splitting. However, further gains in terms of bandwidth can be had by Zopfli or Gzip compressing the JS files. In my testing I achieve about 80% compression rate using Zopfli with go-zopfli and default settings.

See https://github.com/johanbrandhorst/grpcweb-example/blob/master/client/app.go#L11 for an example of this in use.

Support vgo

Very very cool.

It's going to be interesting how the new golang packaging versioning plays out from RSC. It would allow a one to one mapping of semvar versioning.
Just an idea.

Complation error in golang.org/x/sys/unix/syscall_unix.go

Hi.

I recently updated the dependencies of my GopherJS project and found that it no longer compiles on compile.jsgo.io.

The following link reproduces the problem: https://compile.jsgo.io/johanbrandhorst/grpcweb-example.

The error is:

gopath/src/github.com/johanbrandhorst/grpcweb-example/vendor/golang.org/x/sys/unix/syscall_unix.go:153:38: undeclared name: _Socklen

init() order might be different from other build systems

JS code from the same Go code both with and without minimizing worked on my local machine (I have confirmed gopherjs serve --tags=example -m). Is there a good way to debug this? Now it's hard since the js code is minimized.

prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1 Uncaught Error: runtime error: invalid memory address or nil pointer dereference
    at $callDeferred (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at $panic (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at AS (runtime.862690a6e22bb9d83a495b05ae0a6de473c0b502.js:1)
    at Object.$throwNilPointerError (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at S (text.c1f0ba1fc72b86a5a68338ef75bc6e8c3dd215ea.js:1)
    at W (text.c1f0ba1fc72b86a5a68338ef75bc6e8c3dd215ea.js:1)
    at O (text.c1f0ba1fc72b86a5a68338ef75bc6e8c3dd215ea.js:1)
    at Object.Y [as Draw] (text.c1f0ba1fc72b86a5a68338ef75bc6e8c3dd215ea.js:1)
    at BS (blocks.9050cabd12c43380463b4c70de1321c1b5c9c52e.js:1)
    at AY (blocks.9050cabd12c43380463b4c70de1321c1b5c9c52e.js:1)
    at Object.$init (blocks.9050cabd12c43380463b4c70de1321c1b5c9c52e.js:1)
    at $init (blocks.dd312ccb279428b2ea789b6a1c5dab8df1c3d362.js:1)
    at n (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at $runScheduled (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at $schedule (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at $go (prelude.d7be2bb7257fad35c0261c76fc03aed1a338ee9e.js:1)
    at blocks.a11d29e748302e6e2eb5b63516e8341ff16c1d15.js:1
    at HTMLScriptElement.o [as onreadystatechange] (blocks.a11d29e748302e6e2eb5b63516e8341ff16c1d15.js:1)

Compile failed

when I try to compile https://compile.jsgo.io/dave/html2vecty
I find no buildable Go source files in goroot/src/syscall/js

image

Odd JS error (wrong cache?)

https://jsgo.io/github.com/hajimehoshi/ebiten/examples/flappy

Uncaught Error: vertex float num must be 12 but 0
    at $callDeferred (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at $panic (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at U (opengl.cdcce353b737028b027174b308dc30189620f637.js:1)
    at Object.$init (opengl.cdcce353b737028b027174b308dc30189620f637.js:1)
    at Object.$init (graphicscommand.a4b4695ffe4eec74aab191cbe71d906557c46cd7.js:1)
    at Object.$init (ebiten.a48728df35f1ea1ed3ca664fad11a7b200509733.js:1)
    at $init (flappy.dcb6c5748448680140437fcad3d6359c801a24ec.js:1)
    at r (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at $runScheduled (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at $schedule (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at $go (prelude.157dde98f7d79d4d93872fe9c9189c7296ccac3e.js:1)
    at flappy.226c58554d92fac0df9471238fd663105dd28104.js:1
    at HTMLScriptElement.o [as onreadystatechange] (flappy.226c58554d92fac0df9471238fd663105dd28104.js:1)

This sounds like there are some inconsistency versions of libs. I am not sure.

I've confirmed the same project worked on my local machine.

playground: 'runtime not found' error

https://jsgo.io/dave/jsgo/playground#50da9bc755bcb33603cf45c32d7d66214d2bbb20

Executed an almost empty Go program.

Doesn't work with agamigo.io/material

This should work... Must be a bug in getter.

UglifyJS

It would be great if you run uglify/ugllify2 afterwards to further minimize file size.

Compilation error: Authentication required

https://compile.jsgo.io/github.com/hajimehoshi/examples/raycasting

package github.com/hajimehoshi/examples/raycasting: authentication required

API to update subdirectories of a specified directory

I'm thinking of using your jsgo.io at my website https://hajimehoshi.github.io/ebiten/. I'd like to keep the examples' JavaScript latest as much as possible. In my website, there are multiple examples like airship and blocks, and with the current jsgo I'd need to update those examples one by one to access compile.jsgo.io.

Is there an API to update all the subdirectories of a specified directory?

Running locally returns 500 error

I have followed the Running locallly guide, and get the server up and running. When I try to access it at localhost:8080 or http://localhost:8080/github.com/kyeett/adventure-island/ I just get a 500 error.

o run -tags "norwfs dev local" main.go                                 1 ↵

Unzipping assets...
2019/01/04 13:06:08 Listening on :8081
2019/01/04 13:06:08 Listening on :8082
2019/01/04 13:06:08 Listening on :8083
2019/01/04 13:06:08 Listening on :8080

playground: Sandbox

Can the iframe have sandbox attribute? Now a Go script can break the editor itself. I think the necessary value is allow-forms allow-scripts allow-modals allow-popups.

Error message at 2048

https://play.jsgo.io/github.com/hajimehoshi/ebiten/examples/2048

package github.com/go-gl/gl/v2.1/gl: build constraints exclude all Go files in gopath/src/github.com/go-gl/gl/v2.1/gl

websocket closed but archives not updated

That's odd since Ebiten should not require go-gl on browsers. I'd be happy if you could confirm this. Thank you!