javascript callbacks #876
Comments
|
This does seem like odd behavior. In this PR: https://github.com/maxence-charriere/go-app/pull/446/files cleanArgs() was added to Call and New: func (v value) Call(m string, args ...any) Value {
args = cleanArgs(args...)
return val(v.Value.Call(m, args...))
}
func (v value) New(args ...any) Value {
args = cleanArgs(args...)
return val(v.Value.New(args...))
}However it is not present in Invoke: func (v value) Invoke(args ...any) Value {
return val(v.Value.Invoke(args...))
}Adding this locally seems to fix your issue and does not break any tests in pkg/app func (v value) Invoke(args ...any) Value {
args = cleanArgs(args...)
return val(v.Value.Invoke(args...))
}@maxence-charriere - Should cleanArgs() also be applied in the Invoke case? |
|
Hi, thanks for the tip, doing the same modification locally works for me. here's the modified test: package main
import (
"log"
"net/http"
"github.com/maxence-charriere/go-app/v9/pkg/app"
)
type jstest struct {
app.Compo
}
func (c *jstest) Render() app.UI {
return app.H1().Text("test")
}
func test1() {
func1 := app.Window().Get("func1")
func1.Invoke("directArg1", "directArg2")
app.Window().Call("func2", func1)
func2 := app.Window().Get("func2")
func2.Invoke(func1)
}
func test2() {
goFunc := func(this app.Value, args []app.Value) any {
app.Logf("goFunc")
return nil
}
func3 := app.Window().Get("func3")
func3.Invoke(map[string]interface{}{
"callbacks": []any{
map[string]interface{}{
"run": app.FuncOf(goFunc),
},
},
})
}
func (c *jstest) OnNav(ctx app.Context) {
test1()
test2()
}
func main() {
app.Route("/", &jstest{})
app.RunWhenOnBrowser()
h := &app.Handler{
Name: "Test",
Description: "Test JS interaction",
RawHeaders: []string{
`<script>
window.func1 = function(arg1, arg2) {
console.log("FUNC1 " + arg1 + " " + arg2)
}
window.func2 = function(cb) {
cb("CbArg1", "CbArg2")
}
window.func3 = function(obj) {
obj.callbacks[0].run("Indirect1", "Indirect2")
}
</script>
`,
},
}
http.Handle("/", h)
if err := http.ListenAndServe("0.0.0.0:8010", nil); err != nil {
log.Fatal(err)
}
}I'm getting another panic in this case: OTOH, if I wrap goFunc using this function instead of app.FuncOf, the parameters recursion seems to work: // +build wasm,js
package main
import (
"syscall/js"
"github.com/maxence-charriere/go-app/v9/pkg/app"
)
func myFuncOf(fn func(this app.Value, args []app.Value) any) js.Func {
return js.FuncOf(func(this js.Value, args []js.Value) any {
jArgs := make([]app.Value, len(args))
for i := range args {
jArgs[i] = app.ValueOf(args[i])
}
return fn(app.ValueOf(this), jArgs)
})
}My understanding is that go-app is wrapping the syscall/js interfaces to dodge the build constraints on import "syscall/js" when building server-side (is that right ?), but apparently covering all corner cases is a bit tricky due to syscall/js enforcing use of its own low-level types for conversion instead of compatible kinds (cf. golang/go#42188) |
|
and now for something even more complicated, promises! 😨 package main
import (
"log"
"net/http"
"github.com/maxence-charriere/go-app/v9/pkg/app"
)
type jstest struct {
app.Compo
}
func (c *jstest) Render() app.UI {
return app.H1().Text("test")
}
func test1() {
func1 := app.Window().Get("func1")
func1.Invoke("directArg1", "directArg2")
app.Window().Call("func2", func1)
func2 := app.Window().Get("func2")
func2.Invoke(func1)
}
func test2(fail bool) {
genPromise := func(this app.Value, args[]app.Value) any {
goFunc := func(this app.Value, args []app.Value) any {
resolve := args[0]
reject := args[1]
go func() {
if !fail {
resolve.Invoke("hi from goFunc")
} else {
reject.Invoke("goFunc failed")
}
}()
return nil
}
return app.Window().Get("Promise").New(app.FuncOf(goFunc))
}
func3 := app.Window().Get("func3")
func3.Invoke(map[string]interface{}{
"callbacks": []any{
map[string]interface{}{
"run": myFuncOf(genPromise),
},
},
})
}
func (c *jstest) OnNav(ctx app.Context) {
test1()
test2(false)
test2(true)
}
func main() {
app.Route("/", &jstest{})
app.RunWhenOnBrowser()
h := &app.Handler{
Name: "Test",
Description: "Test JS interaction",
RawHeaders: []string{
`<script>
window.func1 = function(arg1, arg2) {
console.log("FUNC1 " + arg1 + " " + arg2)
}
window.func2 = function(cb) {
cb("CbArg1", "CbArg2")
}
window.func3 = function(obj) {
obj.callbacks[0].run()
.then((msg) => console.log(msg))
.catch((err) => console.log("FAIL " + err))
}
</script>
`,
},
}
http.Handle("/", h)
if err := http.ListenAndServe("0.0.0.0:8010", nil); err != nil {
log.Fatal(err)
}
}panic a bit like the previous case, a workaround is to call syscall/js directly from a build-constrained wrapper function. instead of returning func myPromise(fn func(this app.Value, args[]app.Value) any) js.Value {
return js.Global().Get("Promise").New(myFuncOf(fn))
} |
That's my understanding as well. Components are used both for pre-rendered pages on the server and for manipulation of the dom in the browser. There are also some additional go-app hooks that make sure js functions are correctly released during the component lifecycle. Regarding the other two cases you found: There are probably more places where the conversion between app.Value and js.Value are not quite 100% correct passing between those two packages. I'll look around a bit on your examples to see if there is another spot in the code that could be bundled in with the change to Invoke() that fixed your original question. |
|
well, for the indirect call case, I guessed there could be an issue with the switch doing type recursion in cleanArg(), but at first glance I couldn't see any problem just by reading the code (I tried good-ol' printf debugging in this function, but app.Log triggers an infinite call recursion ;p), so I'm a bit confused there... I guess the Promise issue is most probably a consequence of the recursion issue, since the whole call stack goes through syscall/js and not go-app's wrapper (I checked the same promise code without the indirect call and it works without any workaround) |
|
Also, I forgot to mention this for working with promises - don't now if that will help or hurt your case. I'm still narrowing in on where the type conversion fails. |
in my use case, then() is called by the external JS lib, so it doesn't actually matter, but I'll keep that info for whenever I need it, thanks ;) |
|
Tracked it down 🧐, hopefully. In addition to adding the cleanArgs call in the Invoke() method, these changes appear to fix the panic. OriginalLines 367 to 375 in 1a6a8c2 Updated case []any:
s := make([]any, len(v))
for i, val := range v {
s[i] = cleanArg(val) // <- Args to Arg !!!
}
return s // missing return
case function: // prevent passing app.function to syscall/js
return v.fn
case Wrapper:
return jsval(v.JSValue())
} |
alright, fixes it for me (including the promise use case), thanks! |
|
Hmm. I could not get the promise use case to work.. Did you change anything? Or are you still using your custom js only code? |
|
sorry I think I talked too fast, probably forgot to flush the cache while reloading, let met retest everything EDIT: after re-testing, the promise-less case works, but the promise still needs to be wrapped using myPromise() (which must still wrap the handler using myFuncOf instead of app.FuncOf because it is passed to syscall/js's |
|
OK. I think there still might be a way to fix this case as well.. I'll follow up if I find anything. |
|
I thought this conversion challenge looked a bit familiar. Previous issue: #359 and the resulting PR The challenge is that the PR only added the method to
// JSValue returns the underlying syscall/js value of the given Javascript value.
func JSValue(v Value) any {
return jsval(v)
}
// JSValue returns the underlying syscall/js value of the given Javascript value.
// For non-wasm paths this just returns v.
func JSValue(v Value) any {
return v
}Then your promise code would work as-is. note the last return line genPromise := func(this app.Value, args []app.Value) any {
goFunc := func(this app.Value, args []app.Value) any {
resolve := args[0]
reject := args[1]
go func() {
if !fail {
resolve.Invoke("hi from goFunc")
} else {
reject.Invoke("goFunc failed")
}
}()
return nil
}
return app.JSValue(app.Window().Get("Promise").New(app.FuncOf(goFunc)))
} |
|
I just tested with this PR and everything works fine now, thanks! |
Hi,
I've been trying to pass Go functions as javascript callbacks to an external JS library, but I seem stuck on a weird issue.
(note: the sample below does not implement this exact use case but the results seem similar so I guess solving it might help me go further with the library issue)
given the following sample app based on the hello world sample:
the first two calls (direct func1.Invoke and func2 call through app.Window().Call()) work fine, but the last one (direct func2 Invoke with func1 as callback parameter) fails with the following backtrace:
my interpretation of app.Value's documentation is that the window.Call() invocation should be equivalent to the func2.Invoke() one, but for some reason it isn't and the call to func2 fails while converting the params...
might I have missed some type conversion on func1 before passing it to func2.Invoke() ?
cheers,
The text was updated successfully, but these errors were encountered: