proposal: syscall/js: add way to import() es modules

[jcbhmr]

Proposal Details

I don't know if this is a thing that already exists or not. I want to be able to import ESM modules in Go. I can do this in JavaScript via the dynamic import() expression. Right now the only way I know how to do this without extra modifications (where I expect the consumer to just copy-paste wasm_exec.js, wasm_exec_node.js, or wasm_exec.html into their source tree and use that) is to use eval() which seems... not ideal.

package main

import (
	"syscall/js"
	"log"
)

// import is a function-like keyword, not a global function
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
var jsImportFunc = js.Global().Get("eval").Invoke("(s,o)=>import(s,o)") // 🟥🟥🟥
func jsImport(specifier string, options any) js.Value {
	return jsImportFunc.Invoke(specifier, options)
}
// https://stackoverflow.com/questions/68415674/await-js-async-function-promise-inside-a-go-function
func jsAwait(promise js.Value) js.Value {
	c := make(chan js.Value)
	jsOnResolve := js.FuncOf(func(this js.Value, args []js.Value) any {
        c <- args[0]
		return nil
    })
	jsOnReject := js.FuncOf(func(this js.Value, args []js.Value) any {
		// act the same as if a function threw
		panic(&js.Error{Value:args[0]})
		return nil
	})
	promise.Call("then", jsOnResolve, jsOnReject)
	return <-c
}

func main() {
	jsPrettier := jsAwait(jsImport("prettier", js.Value{}))

	jsFormatted := jsAwait(jsPrettier.Call("format", "hello();world();", map[string]any{
		"parser": "typescript", // https://prettier.io/docs/en/options#parser
	}))
	log.Print(jsFormatted.String())
}

The eval() breaks when a user of the Go wasm blob disallows unsafe eval() via Content-Security-Policy.

I know, I know. I could just do globalThis.import = (s,o)=>import(s,o) in JavaScript before I run the Go test.wasm blob. But I don't control how the user uses my WASM blob and it would be really nice if I didn't have to ask them to "hey please add this thing when you use the wasm_exec.js to load this wasm file".

A cool minor change to do this would be to add a Go.prototype._import() method that is just this:

class Go {
	_import(specifier, options) {
		return import(specifier, options)
	}
}

and then in the syscall/js Go code:

func Import(specifier string, options any) js.Value {
	return whateverThePrivateGoRuntimeVariableIsCalled.Call("_import", specifier, options)
}

or you could add it to the importObject thing instead. The point is that this syntax thing (not a global function) is currently unobtainable without resorting to eval() or forcing the user of the my-cool-go-thing.wasm to include a special snippet in addition to the wasm_exec.js standard Go wasm+js runtime.

[Zxilly]

I think this is fine, but we have to take into account that es import is an asynchronous function, what kind of API should we have to handle this kind of process?

[jcbhmr]

Returning a regular js.Value that just so happens to be a JS side Promise instance object seems the easiest. 🤷‍♀️ right now I'm using a jsAwait() helper to call .then() on the JS side and pass the result to a Go-side chan so that it can be "<-" waited on the Go side. A .Await() or .Wait() method could also be added to js.Value for chaining. idk. The trick would be somehow communicating that it is async and you need to actually await like DoThingJS().Await().String() instead of DoThingJS().String() (which would print the Promise object repr, not the actual awaited string). This could be as easy as adding another .String() special case to print out "<promise>" or something similar to how console.log(fetch()) console logs a "Promise { <pending> }" thing

Sometimes you want to deal with the actual Promise objects without waiting for their completion directly (Promise.all(), Promise.any(), WebAssembly.instantiateStreaming(), etc.) and sometimes you want to "unwrap" or await the promise on the Go side. I don't know if there's already a convention in the Go standard library for such a "future" type thing? If there is maybe that idiom or type could be used. Somehow Promise.all() and friends need to still work too. 🤔 idk.