Using Observables inside Oxygen.jl app and/or HypertextLiteral.jl

[Dale-Black]

I created a super simple app with Oxygen that has various routes. In this, I created an HTML page using HypertextLiteral.jl (HTL) and a counter using HTL and the <script> tag inside the @htl macro.

I now want to recreate this simple functionality using Observables.jl (and maybe WebIO or whatever) inside this Oxygen app. Is there a simple way to go about this? Here is the app.jl file and if someone could direct me on how to make a route like /counter but using Observables, that would be a helpful starting place!

using Oxygen
using HTTP
using HypertextLiteral

@get "/greet" function (req::HTTP.Request)
    return "hello world!"
end

@get "/multiply/{a}/{b}" function (req, a::Float64, b::Float64)
    return a * b
end

@get "/getdata" function ()
    return Dict("message" => "hello2!")
end

@get "/htl" function ()
    string(@htl """
        <h1>Hello test</h1>
        <p>This is a simple frontend using HypertextLiteral.jl.</p>
    """)
end

@get "/counter" function ()
    string(@htl """
        <h1>Counter</h1>
        <button onclick="incrementCounter()">Increment</button>
        <p>Counter: <span id="counter">0</span></p>
        <script>
            let counter = 0;
            function incrementCounter() {
                counter += 1;
                document.getElementById("counter").innerText = counter;
            }
        </script>
    """)
end

serve()

[Dale-Black]

Also, HypertextLiteral.jl doesn't work with Observables as far as I know. But if it were possible to do something like

@get "/obs/counter" function ()
    counter = Observable(0)
    return string(@htl """
        <label>$(counter)</label>
        <button onclick=$(counter += 1)>Click me</button>
    """)
end

This would be incredible!