Javascript with Stipple doesn't work.

[gioneves]

I have this code in Stipple:

import Stipple
import StippleUI
import Genie

@Stipple.vars reactives begin
name::String = "World!"
end

Stipple.Layout.add_script("https://cdn.jsdelivr.net/npm/sweetalert2@11")

############ javascript code (PROBLEM) ############
lib_module() = [
  Stipple.script(type ="module", "
    // script code goes here
    document.getElementsByClassName('btn1')[0].addEventListener('click', function() {
      Swal.fire({title: 'Stipple Fire!'})
    })
    ")
]

@Stipple.deps lib_module
############ javascript code (PROBLEM) ############

function ui()

finalMatch = """
<button class="btn1">Click me!</button>
<q-input v-model="name"/>
<p>Typed text: {{ name }}</p>
"""

return finalMatch

end

Stipple.route("/") do
Stipple.page(
  Stipple.init(reactives),
  ui()
) |> Stipple.html
end

Stipple.up()

But Sweet Alert's javascript doesn't work. I don't know what I did wrong, I followed the steps in the documentation, but I don't think I did something right.

I could do it like this, with onclick in the button tag:

<button class="btn1" onclick="Swal.fire({title: 'Stipple Fire!'})">Click me!</button>

But I would like to access the script normally.

[hhaensel]

I guess that the script executes too early. You have to make sure that the listener is added after the DOM has been established. So you rather need to bind the script to the mounted life cyclehook of Vue.

using Stipple.ReactiveTools

@mounted reactives """
   <your js code ...>
"""

Not sure though, why you don't want to use the classical binding via onclick ...

EDIT: ... or the Genie-way with

<q-btn v-on:click="Swal.fire({title: 'Stipple Fire!'})"></q-btn>

as html or via StippleUI

btn("Fire", @click("Swal.fire({title: 'Stipple Fire!'})"))

EDIT2: updated the syntax of @mounted

[hhaensel]

My way of writing the app would be

import Stipple
import StippleUI
import Genie
import Stipple.ReactiveTools
import Stipple.ReactiveTools: @in, LittleDict

# @Stipple.vars MyApp begin
#     name = "World!"
# end

@ReactiveTools.app MyApp begin
    @in name = "World!"
end

Stipple.Layout.add_script("https://cdn.jsdelivr.net/npm/sweetalert2@11")

# bring `Swal` to the context of the model
@ReactiveTools.mounted MyApp """
    this.Swal = Swal
"""

# make a nice page based on Quasar elements(StippleUI)
function ui()
    Stipple.row(StippleUI.card([
        StippleUI.cardsection(StippleUI.textfield("Greeting", :name))
        StippleUI.cardsection(Stipple.h6("Hello {{ name }}"))
        StippleUI.cardsection(StippleUI.btn("Fire", @Stipple.click("Swal.fire({title: 'Stipple Fire!'})")))
    ]))
end

Stipple.route("/") do
    Stipple.page(class = "container",
    @ReactiveTools.init(MyApp),
    ui,
    "v-cloak"
    ) |> Stipple.html
end

Stipple.up()

Currently @inand LittleDict need to be imported in order to work together with @ReactiveTools.app. That may be solved in a future version. Alternatively you may use your version with Stipple.@vars, which is commented out.

[hhaensel]

@gioneves does that solve the problem?