JSServe got renamed to Bonito (#3477)

* JSServe got renamed to Bonito

* clean up WGLMakie docs

* Bonito got tagged

* bonito got tagged

* fix benchmark against master

NEWS.md

@@ -1,6 +1,8 @@
 # News
 
-## master 
+## master
+
+- Changes for Bonito rename and WGLMakie docs improvements [#3477](https://github.com/MakieOrg/Makie.jl/pull/3477).
 
 ## 0.20.3
 
@@ -160,7 +162,7 @@
 - Do less copies of Observables in Attributes + plot pipeline [#2443](https://github.com/MakieOrg/Makie.jl/pull/2443).
 - Add Search Page and tweak Result Ordering [#2474](https://github.com/MakieOrg/Makie.jl/pull/2474).
 - Remove all global attributes from TextureAtlas implementation and fix julia#master [#2498](https://github.com/MakieOrg/Makie.jl/pull/2498).
-- Use new JSServe, implement WGLMakie picking, improve performance and fix lots of WGLMakie bugs [#2428](https://github.com/MakieOrg/Makie.jl/pull/2428).
+- Use new Bonito, implement WGLMakie picking, improve performance and fix lots of WGLMakie bugs [#2428](https://github.com/MakieOrg/Makie.jl/pull/2428).
 
 ## v0.19.0
 

WGLMakie/Project.toml

@@ -9,7 +9,7 @@ FileIO = "5789e2e9-d7fb-5bc7-8068-2c6fae9b9549"
 FreeTypeAbstraction = "663a7486-cb36-511b-a19d-713bb74d65c9"
 GeometryBasics = "5c1252a2-5f33-56bf-86c9-59e7332b4326"
 Hyperscript = "47d2ed2b-36de-50cf-bf87-49c2cf4b8b91"
-JSServe = "824d6782-a2ef-11e9-3a09-e5662e0c26f9"
+Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 LinearAlgebra = "37e2e46d-f89d-539d-b4ee-838fcccc9c8e"
 Makie = "ee78f7c6-11fb-53f2-987a-cfe4a2b5a57a"
 Observables = "510215fc-4207-5dde-b226-833fc4488ee2"
@@ -25,7 +25,7 @@ FileIO = "1.1"
 FreeTypeAbstraction = "0.10"
 GeometryBasics = "0.4.1"
 Hyperscript = "0.0.3, 0.0.4, 0.0.5"
-JSServe = "v2.3"
+Bonito = "3.0.0"
 LinearAlgebra = "1.0, 1.6"
 Makie = "=0.20.3"
 Observables = "0.5.1"

WGLMakie/README.md

@@ -11,10 +11,10 @@ scatter(rand(4))
 
 In the REPL, this will open a browser tab, that will refresh on a new display.
 In VSCode, this should open in the plotpane.
-You can also embed plots in a JSServe webpage:
+You can also embed plots in a Bonito webpage:
 
 ```julia
-using JSServe
+using Bonito
 app = App() do session, request
     return DOM.div(
         DOM.h1("Some Makie Plots:"),
@@ -27,7 +27,7 @@ app = App() do session, request
     )
 end
 isdefined(Main, :server) && close(server)
-server = JSServe.Server(app, "127.0.0.1", 8082)
+server = Bonito.Server(app, "127.0.0.1", 8082)
 ```
 
 ## Sponsors

WGLMakie/src/Camera.js

@@ -65,7 +65,7 @@ export function attach_3d_camera(
     camera.lookAt(center);
 
     const use_orbit_cam = () =>
-        !(JSServe.can_send_to_julia && JSServe.can_send_to_julia());
+        !(Bonito.can_send_to_julia && Bonito.can_send_to_julia());
     const controls = new OrbitControls(camera, canvas, use_orbit_cam, (e) =>
         in_scene(scene, e)
     );

WGLMakie/src/Serialization.js

@@ -561,7 +561,7 @@ export function deserialize_scene(data, screen) {
         if (!force) {
             // we use the threejs orbit controls, if the julia connection is gone
             // at least for 3d ... 2d is still a todo, and will stay static right now
-            if (!(JSServe.can_send_to_julia && JSServe.can_send_to_julia())) {
+            if (!(Bonito.can_send_to_julia && Bonito.can_send_to_julia())) {
                 return;
             }
         }

WGLMakie/src/WGLMakie.jl

@@ -1,7 +1,7 @@
 module WGLMakie
 
 using Hyperscript
-using JSServe
+using Bonito
 using Observables
 using Makie
 using Colors
@@ -11,9 +11,9 @@ using GeometryBasics
 using PNGFiles
 using FreeTypeAbstraction
 
-using JSServe: Session
-using JSServe: @js_str, onjs, App, ES6Module
-using JSServe.DOM
+using Bonito: Session
+using Bonito: @js_str, onjs, App, ES6Module
+using Bonito.DOM
 
 using RelocatableFolders: @path
 
@@ -60,8 +60,8 @@ function activate!(; inline::Union{Automatic,Bool}=LAST_INLINE[], screen_config.
     LAST_INLINE[] = inline
     Makie.set_active_backend!(WGLMakie)
     Makie.set_screen_config!(WGLMakie, screen_config)
-    if !JSServe.has_html_display()
-        JSServe.browser_display()
+    if !Bonito.has_html_display()
+        Bonito.browser_display()
     end
     return
 end

WGLMakie/src/display.jl

@@ -1,8 +1,8 @@
 struct ThreeDisplay
-    session::JSServe.Session
+    session::Bonito.Session
 end
 
-JSServe.session(td::ThreeDisplay) = td.session
+Bonito.session(td::ThreeDisplay) = td.session
 Base.empty!(::ThreeDisplay) = nothing # TODO implement
 
 
@@ -13,7 +13,7 @@ end
 function Base.size(screen::ThreeDisplay)
     # look at d.qs().clientWidth for displayed width
     js = js"[document.querySelector('canvas').width, document.querySelector('canvas').height]"
-    width, height = round.(Int, JSServe.evaljs_value(screen.session, js; timeout=100))
+    width, height = round.(Int, Bonito.evaljs_value(screen.session, js; timeout=100))
     return (width, height)
 end
 
@@ -32,15 +32,15 @@ function render_with_init(screen, session, scene)
     return three, canvas, on_init
 end
 
-function JSServe.jsrender(session::Session, scene::Scene)
+function Bonito.jsrender(session::Session, scene::Scene)
     screen = Screen(scene)
     three, canvas, on_init = render_with_init(screen, session, scene)
     return canvas
 end
 
-function JSServe.jsrender(session::Session, fig::Makie.FigureLike)
+function Bonito.jsrender(session::Session, fig::Makie.FigureLike)
     Makie.update_state_before_display!(fig)
-    return JSServe.jsrender(session, Makie.get_scene(fig))
+    return Bonito.jsrender(session, Makie.get_scene(fig))
 end
 
 """
@@ -84,7 +84,7 @@ end
 """
     WithConfig(fig::Makie.FigureLike; screen_config...)
 
-Allows to pass a screenconfig to a figure, inside a JSServe.App.
+Allows to pass a screenconfig to a figure, inside a Bonito.App.
 This circumvents using `WGLMakie.activate!(; screen_config...)` inside an App, which modifies these values globally.
 Example:
 
@@ -107,7 +107,7 @@ function WithConfig(fig::Makie.FigureLike; kw...)
     return WithConfig(fig, config)
 end
 
-function JSServe.jsrender(session::Session, wconfig::WithConfig)
+function Bonito.jsrender(session::Session, wconfig::WithConfig)
     fig = wconfig.fig
     Makie.update_state_before_display!(fig)
     scene = Makie.get_scene(fig)
@@ -211,7 +211,7 @@ function get_three(screen::Screen; timeout = 100, error::Union{Nothing, String}=
     if isnothing(screen.session)
         throw_error("Screen has no session. Not yet displayed?"); return nothing
     end
-    if !(screen.session.status in (JSServe.RENDERED, JSServe.DISPLAYED, JSServe.OPEN))
+    if !(screen.session.status in (Bonito.RENDERED, Bonito.DISPLAYED, Bonito.OPEN))
         throw_error("Screen Session uninitialized. Not yet displayed? Session status: $(screen.session.status)"); return nothing
     end
     tstart = time()
@@ -289,9 +289,9 @@ function session2image(session::Session, scene::Scene)
         })
     }()
     """
-    picture_base64 = JSServe.evaljs_value(session, to_data; timeout=100)
+    picture_base64 = Bonito.evaljs_value(session, to_data; timeout=100)
     picture_base64 = replace(picture_base64, "data:image/png;base64," => "")
-    bytes = JSServe.Base64.base64decode(picture_base64)
+    bytes = Bonito.Base64.base64decode(picture_base64)
     return PNGFiles.load(IOBuffer(bytes))
 end
 
@@ -334,13 +334,13 @@ end
 function insert_plot!(disp::ThreeDisplay, scene::Scene, @nospecialize(plot::Plot))
     plot_data = serialize_plots(scene, [plot])
     plot_sub = Session(disp.session)
-    JSServe.init_session(plot_sub)
+    Bonito.init_session(plot_sub)
     plot.__wgl_session = plot_sub
     js = js"""
     $(WGL).then(WGL=> {
         WGL.insert_plot($(js_uuid(scene)), $plot_data);
     })"""
-    JSServe.evaljs_value(plot_sub, js; timeout=50)
+    Bonito.evaljs_value(plot_sub, js; timeout=50)
     return
 end
 
@@ -370,7 +370,7 @@ function delete_js_objects!(screen::Screen, plot_uuids::Vector{String},
     three = get_three(screen)
     isnothing(three) && return # if no session we haven't displayed and dont need to delete
     isready(three.session) || return
-    JSServe.evaljs(three.session, js"""
+    Bonito.evaljs(three.session, js"""
     $(WGL).then(WGL=> {
         WGL.delete_plots($(plot_uuids));
     })""")
@@ -398,7 +398,7 @@ function delete_js_objects!(screen::Screen, scene::Scene)
             close(session)
         end
     end
-    JSServe.evaljs(three.session, js"""
+    Bonito.evaljs(three.session, js"""
     $(WGL).then(WGL=> {
         WGL.delete_scenes($scene_uuids, $(js_uuid.(plots)));
     })""")

WGLMakie/src/picking.jl

@@ -4,7 +4,7 @@ function pick_native(screen::Screen, rect::Rect2i)
     (w, h) = widths(rect)
     session = get_three(screen; error="Can't do picking!").session
     scene = screen.scene
-    picking_data = JSServe.evaljs_value(session, js"""
+    picking_data = Bonito.evaljs_value(session, js"""
         Promise.all([$(WGL), $(scene)]).then(([WGL, scene]) => WGL.pick_native_matrix(scene, $x, $y, $w, $h))
     """)
     empty = Matrix{Tuple{Union{Nothing, AbstractPlot}, Int}}(undef, 0, 0)
@@ -37,7 +37,7 @@ function Makie.pick_closest(scene::Scene, screen::Screen, xy, range::Integer)
     xy_vec = Cint[round.(Cint, xy)...]
     range = round(Int, range)
     session = get_three(screen; error="Can't do picking!").session
-    selection = JSServe.evaljs_value(session, js"""
+    selection = Bonito.evaljs_value(session, js"""
         Promise.all([$(WGL), $(scene)]).then(([WGL, scene]) => WGL.pick_closest(scene, $(xy_vec), $(range)))
     """)
     lookup = plot_lookup(scene)
@@ -50,7 +50,7 @@ function Makie.pick_sorted(scene::Scene, screen::Screen, xy, range)
     range = round(Int, range)
 
     session = get_three(screen; error="Can't do picking!").session
-    selection = JSServe.evaljs_value(session, js"""
+    selection = Bonito.evaljs_value(session, js"""
         Promise.all([$(WGL), $(scene)]).then(([WGL, scene]) => WGL.pick_sorted(scene, $(xy_vec), $(range)))
     """)
     isnothing(selection) && return Tuple{Union{Nothing,AbstractPlot},Int}[]
@@ -69,7 +69,7 @@ end
 """
     ToolTip(figurelike, js_callback; plots=plots_you_want_to_hover)
 
-Returns a JSServe DOM element, which creates a popup whenever you click on a plot element in `plots`.
+Returns a Bonito DOM element, which creates a popup whenever you click on a plot element in `plots`.
 The content of the popup is filled with the return value of js_callback, which can be a string or `HTMLNode`.
 
 Usage example:
@@ -101,7 +101,7 @@ end
 """
 struct ToolTip
     scene::Scene
-    callback::JSServe.JSCode
+    callback::Bonito.JSCode
     plot_uuids::Vector{String}
     function ToolTip(figlike, callback; plots=nothing)
         scene = Makie.get_scene(figlike)
@@ -113,17 +113,17 @@ struct ToolTip
     end
 end
 
-const POPUP_CSS = JSServe.Asset(joinpath(@__DIR__, "popup.css"))
+const POPUP_CSS = Bonito.Asset(joinpath(@__DIR__, "popup.css"))
 
-function JSServe.jsrender(session::Session, tt::ToolTip)
+function Bonito.jsrender(session::Session, tt::ToolTip)
     scene = tt.scene
     popup =  DOM.div("", class="popup")
-    JSServe.evaljs(session, js"""
+    Bonito.evaljs(session, js"""
         $(scene).then(scene => {
             const plots_to_pick = new Set($(tt.plot_uuids));
             const callback = $(tt.callback);
             WGL.register_popup($popup, scene, plots_to_pick, callback)
         })
     """)
-    return DOM.span(JSServe.jsrender(session, POPUP_CSS), popup)
+    return DOM.span(Bonito.jsrender(session, POPUP_CSS), popup)
 end

WGLMakie/src/precompiles.jl

@@ -9,11 +9,11 @@ macro compile(block)
             # while precompiling
             # So we just do all parts of the stack we can do without browser
             scene = Makie.get_scene(figlike)
-            session = Session(JSServe.NoConnection(); asset_server=JSServe.NoServer())
+            session = Session(Bonito.NoConnection(); asset_server=Bonito.NoServer())
             three_display(Screen(scene), session, scene)
-            JSServe.jsrender(session, figlike)
+            Bonito.jsrender(session, figlike)
             s = serialize_scene(scene)
-            JSServe.SerializedMessage(session, Dict(:data => s))
+            Bonito.SerializedMessage(session, Dict(:data => s))
             close(session)
             return nothing
         end

WGLMakie/src/three_plot.jl

@@ -3,12 +3,12 @@
 # We use objectid to find objects on the js side
 js_uuid(object) = string(objectid(object))
 
-function JSServe.print_js_code(io::IO, plot::AbstractPlot, context::JSServe.JSSourceContext)
+function Bonito.print_js_code(io::IO, plot::AbstractPlot, context::Bonito.JSSourceContext)
     uuids = js_uuid.(Makie.collect_atomic_plots(plot))
     # This is a bit more complicated then it has to be, since evaljs / on_document_load
     # isn't guaranteed to run after plot initialization in an App... So, if we don't find any plots,
     # we have to check again after inserting new plots
-    JSServe.print_js_code(io, js"""(new Promise(resolve => {
+    Bonito.print_js_code(io, js"""(new Promise(resolve => {
         $(WGL).then(WGL=> {
             const find = ()=> {
                 const plots = WGL.find_plots($(uuids))
@@ -23,8 +23,8 @@ function JSServe.print_js_code(io::IO, plot::AbstractPlot, context::JSServe.JSSo
     }))""", context)
 end
 
-function JSServe.print_js_code(io::IO, scene::Scene, context::JSServe.JSSourceContext)
-    JSServe.print_js_code(io, js"""$(WGL).then(WGL=> WGL.find_scene($(js_uuid(scene))))""", context)
+function Bonito.print_js_code(io::IO, scene::Scene, context::Bonito.JSSourceContext)
+    Bonito.print_js_code(io, js"""$(WGL).then(WGL=> WGL.find_scene($(js_uuid(scene))))""", context)
 end
 
 function three_display(screen::Screen, session::Session, scene::Scene)
@@ -38,7 +38,7 @@ function three_display(screen::Screen, session::Session, scene::Scene)
     comm = Observable(Dict{String,Any}())
     done_init = Observable(false)
     # Keep texture atlas in parent session, so we don't need to send it over and over again
-    ta = JSServe.Retain(TEXTURE_ATLAS)
+    ta = Bonito.Retain(TEXTURE_ATLAS)
     evaljs(session, js"""
     $(WGL).then(WGL => {
         try {
@@ -53,7 +53,7 @@ function three_display(screen::Screen, session::Session, scene::Scene)
             }
             $(done_init).notify(true)
         } catch (e) {
-            JSServe.Connection.send_error("error initializing scene", e)
+            Bonito.Connection.send_error("error initializing scene", e)
             $(done_init).notify(false)
             return
         }

WGLMakie/src/wglmakie.bundled.js

@@ -21016,7 +21016,7 @@ function attach_3d_camera(canvas, makie_camera, cam3d, light_dir, scene) {
     camera.up = new A(...cam3d.upvector.value);
     camera.position.set(...cam3d.eyeposition.value);
     camera.lookAt(center);
-    const use_orbit_cam = ()=>!(JSServe.can_send_to_julia && JSServe.can_send_to_julia());
+    const use_orbit_cam = ()=>!(Bonito.can_send_to_julia && Bonito.can_send_to_julia());
     const controls = new OrbitControls(camera, canvas, use_orbit_cam, (e)=>in_scene(scene, e));
     controls.addEventListener("change", (e)=>{
         const view = camera.matrixWorldInverse;
@@ -21883,7 +21883,7 @@ function deserialize_scene(data, screen) {
     scene.wgl_camera = camera;
     function update_cam(camera_matrices, force) {
         if (!force) {
-            if (!(JSServe.can_send_to_julia && JSServe.can_send_to_julia())) {
+            if (!(Bonito.can_send_to_julia && Bonito.can_send_to_julia())) {
                 return;
             }
         }
@@ -22054,7 +22054,7 @@ function on_shader_error(gl, program, glVertexShader, glFragmentShader) {
     const vertexLog = gl.getShaderInfoLog(glVertexShader).trim();
     const fragmentLog = gl.getShaderInfoLog(glFragmentShader).trim();
     const err = "THREE.WebGLProgram: Shader Error " + wglerror(gl, gl.getError()) + " - " + "VALIDATE_STATUS " + gl.getProgramParameter(program, gl.VALIDATE_STATUS) + "\n\n" + "Program Info Log:\n" + programLog + "\n" + vertexErrors + "\n" + fragmentErrors + "\n" + "Fragment log:\n" + fragmentLog + "Vertex log:\n" + vertexLog;
-    JSServe.Connection.send_warning(err);
+    Bonito.Connection.send_warning(err);
 }
 function add_canvas_events(screen, comm, resize_to) {
     const { canvas , winscale  } = screen;

WGLMakie/src/wglmakie.js

@@ -220,7 +220,7 @@ function on_shader_error(gl, program, glVertexShader, glFragmentShader) {
         "Vertex log:\n" +
         vertexLog;
 
-    JSServe.Connection.send_warning(err);
+    Bonito.Connection.send_warning(err);
 }
 
 function add_canvas_events(screen, comm, resize_to) {

WGLMakie/test/Project.toml

@@ -1,7 +1,7 @@
 [deps]
 Electron = "a1bb12fb-d4d1-54b4-b10a-ee7951ef7ad3"
 FileIO = "5789e2e9-d7fb-5bc7-8068-2c6fae9b9549"
-JSServe = "824d6782-a2ef-11e9-3a09-e5662e0c26f9"
+Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 Makie = "ee78f7c6-11fb-53f2-987a-cfe4a2b5a57a"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
 ReferenceTests = "d37af2e0-5618-4e00-9939-d430db56ee94"