Reactive Dict with string keys: curly braces not escaped properly

[jochenkrattenmacher]

Heyo!

Not sure whether this is going to be practically relevant (for me it isn't really), but here goes:

If I have a model as follows:

@reactive! mutable struct Test <: ReactiveModel
    test::R{Dict{String, Int8}} = Dict("a{b}" => 1)
end

then the browser console throws me an error:

Uncaught SyntaxError: missing : after property id vartest323.js:5:115]

The problem seems to be that the curly braces are not escaped properly somehow (there is no issue with keys not containing special characters):

function initStipple(rootSelector){
Stipple.init({theme: 'stipple-blue'});
window.varTest323 = new Vue({"el":rootSelector,"mixins":[watcherMixin, reviveMixin],"data":{"test":{"a{b} :1},"isready":false,"isprocessing":false}});
} // end of initStipple

(there is a quote missing after a{b})

Here is the full MWE:

using Stipple

@reactive! mutable struct Test <: ReactiveModel
    test::Dict{String, Int8} = Dict("a{b}" => 1)
end

function handlers(model)
    on(model.isready) do isready
        isready || return
        push!(model)
    end
    return model
end

function ui(model)
    page(
        model,
        title = "Hello Stipple",
        cell("test"),
    )
end


route("/") do
    # global model definition is for debugging/testing purpose only
    global model 
    model = Stipple.init(Test)
    model |> handlers |> ui |> html
end

up(8080)

[hhaensel]

This is related to lines 56-57 of Elements.jl.
Not sure, if the replacement is needed at all anymore.

  vue_app = replace(json(model |> Stipple.render), "\"{" => " {")
  vue_app = replace(vue_app, "}\"" => "} ")

[hhaensel]

@jochenkrattenmacher
I think, it's not! We eliminated these lines for the Vue3 branches which are to be released soon, and have seen no negative effect.

@protozoo, @essenciary , @PGimenez
Should we backport this to the Vue2 branch?

[hhaensel]

I did backport to Vue2 by releasing version 0.29 today. So this should be fixed.