instance in js_methods missing model variables

[yakir12]

Consider this MWE where an image is continuously updated in the background and continuously queried by the client:

module App

using JpegTurbo
using ColorTypes
using GenieFramework

@genietools

snap() = rand(RGB, 100, 100)

img = Ref(snap())
Threads.@spawn while true
    img[] = snap()
    sleep(0.1)
end

route("/frame") do
    respond(String(jpeg_encode(img[])), :jpg)
end

@app MyApp begin
    @out imageurl = "/frame"
end

ui() = Html.div([
                 imageview(src=:imageurl, basic=true, style="max-width: 100px")
                ])

Stipple.js_methods(::MyApp) = """updateimage: async function () { this.imageurl = "frame#" + new Date().getTime() }"""

Stipple.js_created(::MyApp) = "setInterval(this.updateimage, 100)"

@page("/", ui)

end

The resulting window is empty:

although, if I navigate to frame manually I can see the frame:

and the console states that:

[Vue warn]: Property or method "imageurl" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) vue.js:634:17
    VueJS 11

versions:

pkg> st
Status `~/tmp/Project.toml`
  [3da002f7] ColorTypes v0.11.4
  [a59fdf5c] GenieFramework v1.26.11
  [b835a17e] JpegTurbo v0.1.5

[hhaensel]

Well, if you use an explicit app, you should also call it in thepage macro

[yakir12]

How exactly, is it in the docs somewhere? apologies if so.

help?> @page
  @page(url, view)

  Registers a new page with source in view to be rendered at the route url.

  Usage

  @page("/", "view.html")

btw, I'm only using an explicit app because I need to define js_methods. Is there another way of accomplishing that...?

[hhaensel]

It's a general pattern: All New Reactive API macros can be called with an explicit model type in the first position

@methods "
    f1: function() {console.log('Hello')}
    f2: function(name) {console.log(name)}
"

@methods MyApp "
    f1: function() {console.log('Hello')}
    f2: function(name) {console.log(name)}
"

there's one exception with the @page macro:

@page("/", ui)
@page("/", ui, model = MyApp)

[hhaensel]

We should put that in the docs somewhere ...

[yakir12]

I think we can close this now.