function js_methods(app::T) where {T<:ReactiveModel}

Defines js functions for the methods section of the vue element. Expected result types of the function are

• String containing javascript code
• Pair of function name and function code
• Function returning String of javascript code
• Dict of function names and function code
• Vector of the above

Example 1

js_methods(::MyDashboard) = """
  mysquare: function (x) {
    return x^2
  }
  myadd: function (x, y) {
    return x + y
  }
"""

Example 2

js_methods(::MyDashboard) = Dict(:f => "function(x) { console.log('x: ' + x) })

Example 3

js_greet() = :greet => "function(name) {console.log('Hello ' + name)}"
js_bye() = :bye => "function() {console.log('Bye!')}"
js_methods(::MyDashboard) = [js_greet, js_bye]

function js_computed(app::T) where {T<:ReactiveModel}

Defines js functions for the computed section of the vue element. These properties are updated every time on of the inner parameters changes its value. Expected result types of the function are

• String containing javascript code
• Pair of function name and function code
• Function returning String of javascript code
• Dict of function names and function code
• Vector of the above

Example

js_computed(app::MyDashboard) = """
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
"""

function js_watch(app::T) where {T<:ReactiveModel}

Defines js functions for the watch section of the vue element. These functions are called every time the respective property changes. Expected result types of the function are

• String containing javascript code
• Pair of function name and function code
• Function returning String of javascript code
• Dict of function names and function code
• Vector of the above

Example

Updates the fullName every time firstName or lastName changes.

js_watch(app::MyDashboard) = """
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
"""

function js_created(app::T)::Union{Function, String, Vector} where {T<:ReactiveModel}

Defines js statements for the created section of the vue element.

Result types of the function can be

• String containing javascript code
• Function returning String of javascript code
• Vector of the above

Example 1

js_created(app::MyDashboard) = """
    if (this.cameraon) { startcamera() }
"""

Example 2

startcamera() = "if (this.cameraon) { startcamera() }"
stopcamera() = "if (this.cameraon) { stopcamera() }"

js_created(app::MyDashboard) = [startcamera, stopcamera]

Checking the result can be done in the following way

julia> render(MyApp())[:created]
JSONText("function(){
    if (this.cameraon) { startcamera() }

    if (this.cameraon) { stopcamera() }
}")

function js_mounted(app::T)::Union{Function, String, Vector} where {T<:ReactiveModel}

Defines js statements for the mounted section of the vue element.

Result types of the function can be

• String containing javascript code
• Function returning String of javascript code
• Vector of the above

Example 1

js_mounted(app::MyDashboard) = """
    if (this.cameraon) { startcamera() }
"""

Example 2

startcamera() = "if (this.cameraon) { startcamera() }"
stopcamera() = "if (this.cameraon) { stopcamera() }"

js_mounted(app::MyDashboard) = [startcamera, stopcamera]

Checking the result can be done in the following way

julia> render(MyApp())[:mounted]
JSONText("function(){
    if (this.cameraon) { startcamera() }

    if (this.cameraon) { stopcamera() }
}")

function client_data(app::T)::String where {T<:ReactiveModel}

Defines additional data that will only be visible by the browser.

It is meant to keep volatile data, e.g. form data that needs to pass a validation first. In order to use the data you most probably also want to define js_methods

Example

import Stipple.client_data
client_data(m::Example) = client_data(client_name = js"null", client_age = js"null", accept = false)

will define the additional fields client_name, client_age and accept for the model Example. These should, of course, not overlap with existing fields of your model.

function register_components(model::Type{M}, keysvals::AbstractVector) where {M<:ReactiveModel}

Utility function for adding Vue components that need to be registered with the Vue.js app. This is usually needed for registering components provided by Stipple plugins.

Example

Stipple.register_components(HelloPie, StippleCharts.COMPONENTS)

function components(m::Type{M})::String where {M<:ReactiveModel}
function components(app::M)::String where {M<:ReactiveModel}

JSON representation of the Vue.js components registered for the ReactiveModel M.

setindex_withoutwatchers!(field::Reactive, val; notify=(x)->true)
setindex_withoutwatchers!(field::Reactive, val, keys::Int...; notify=(x)->true)

Change the content of a Reactive field without triggering the listeners. If keys are specified, only these listeners are exempted from triggering.

setfield_withoutwatchers!(app::ReactiveModel, field::Symmbol, val; notify=(x)->true)
setfield_withoutwatchers!(app::ReactiveModel, field::Symmbol, val, keys...; notify=(x)->true)

Change the field of a ReactiveModel without triggering the listeners. If keys are specified, only these listeners are exempted from triggering.

function init(::Type{M};
                vue_app_name::S = Stipple.Elements.root(M),
                endpoint::S = vue_app_name,
                channel::Union{Any,Nothing} = nothing,
                debounce::Int = JS_DEBOUNCE_TIME,
                transport::Module = Genie.WebChannels,
                core_theme::Bool = true)::M where {M<:ReactiveModel, S<:AbstractString}

Initializes the reactivity of the model M by setting up the custom JavaScript for integrating with the Vue.js frontend and perform the 2-way backend-frontend data sync. Returns the instance of the model.

Example

hs_model = Stipple.init(HelloPie)

function setup(model::M, channel = Genie.config.webchannels_default_route)::M where {M<:ReactiveModel}

Configures the reactive handlers for the reactive properties of the model. Called internally.

Base.push!(app::M, vals::Pair{Symbol,T}; channel::String,
            except::Union{Genie.WebChannels.HTTP.WebSockets.WebSocket,Nothing,UInt}) where {T,M<:ReactiveModel}

Pushes data payloads over to the frontend by broadcasting the vals through the channel.

function rendering_mappings(mappings = Dict{String,String})

Registers additional mappings as Julia to Vue properties mappings (eg foobar to foo-bar).

function julia_to_vue(field, mapping_keys = mapping_keys())

Converts Julia names to Vue names (eg foobar to foo-bar).

function parse_jsfunction(s::AbstractString)

Checks whether the string is a valid js function and returns a Dict from which a reviver function in the backend can construct a function.

function replace_jsfunction!(js::Union{Dict, JSONText})

Replaces all JSONText values that contain a valid js function by a Dict that codes the function for a reviver. For JSONText variables it encapsulates the dict in a JSONText to make the function type stable.

Replaces all JSONText values on a copy of the input, see replace_jsfunction!.

function deps(channel::String = Genie.config.webchannels_default_route)

Outputs the HTML code necessary for injecting the dependencies in the page (the

Missing docstring for @R_str.

on(f, observable::AbstractObservable; weak = false, priority=0, update=false)::ObserverFunction

julia> obs = Observable(0)
Observable(0)

julia> on(obs) do val
           println("current value is ", val)
       end
ObserverFunction defined at REPL[17]:2 operating on Observable(0)
julia> obs[] = 5;
current value is 5

julia> obs = Observable(0)
julia> on(obs; priority=-1) do x
           println("Hi from first added")
       end
julia> on(obs) do x
           println("Hi from second added")
       end
julia> obs[] = 2
Hi from second added
Hi from first added

julia> on(Observable(1); update=true) do x
    println("hi")
end
hi

onbutton(f::Function, button::R{Bool}; async = false, weak = false)

onbutton(model.save_button) do
  # save what has to be saved
end

@js_str -> JSONText

@kwredef(expr)

Stipple.@kwdef