dioxus-desktop 0.4.3

WebView renderer for Dioxus
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
#![doc = include_str!("readme.md")]
#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
#![deny(missing_docs)]

mod cfg;
mod desktop_context;
mod element;
mod escape;
mod eval;
mod events;
mod file_upload;
mod protocol;
mod query;
mod shortcut;
mod waker;
mod webview;

#[cfg(any(target_os = "ios", target_os = "android"))]
mod mobile_shortcut;

use crate::query::QueryResult;
pub use cfg::{Config, WindowCloseBehaviour};
pub use desktop_context::DesktopContext;
pub use desktop_context::{
    use_window, use_wry_event_handler, DesktopService, WryEventHandler, WryEventHandlerId,
};
use desktop_context::{EventData, UserWindowEvent, WebviewQueue, WindowEventHandlers};
use dioxus_core::*;
use dioxus_html::MountedData;
use dioxus_html::{native_bind::NativeFileEngine, FormData, HtmlEvent};
use element::DesktopElement;
use eval::init_eval;
use futures_util::{pin_mut, FutureExt};
use shortcut::ShortcutRegistry;
pub use shortcut::{use_global_shortcut, ShortcutHandle, ShortcutId, ShortcutRegistryError};
use std::cell::Cell;
use std::rc::Rc;
use std::task::Waker;
use std::{collections::HashMap, sync::Arc};
pub use tao::dpi::{LogicalSize, PhysicalSize};
use tao::event_loop::{EventLoopProxy, EventLoopWindowTarget};
pub use tao::window::WindowBuilder;
use tao::{
    event::{Event, StartCause, WindowEvent},
    event_loop::{ControlFlow, EventLoop},
};
pub use wry;
pub use wry::application as tao;
use wry::webview::WebView;
use wry::{application::window::WindowId, webview::WebContext};

/// Launch the WebView and run the event loop.
///
/// This function will start a multithreaded Tokio runtime as well the WebView event loop.
///
/// ```rust, no_run
/// use dioxus::prelude::*;
///
/// fn main() {
///     dioxus_desktop::launch(app);
/// }
///
/// fn app(cx: Scope) -> Element {
///     cx.render(rsx!{
///         h1 {"hello world!"}
///     })
/// }
/// ```
pub fn launch(root: Component) {
    launch_with_props(root, (), Config::default())
}

/// Launch the WebView and run the event loop, with configuration.
///
/// This function will start a multithreaded Tokio runtime as well the WebView event loop.
///
/// You can configure the WebView window with a configuration closure
///
/// ```rust, no_run
/// use dioxus::prelude::*;
/// use dioxus_desktop::*;
///
/// fn main() {
///     dioxus_desktop::launch_cfg(app, Config::default().with_window(WindowBuilder::new().with_title("My App")));
/// }
///
/// fn app(cx: Scope) -> Element {
///     cx.render(rsx!{
///         h1 {"hello world!"}
///     })
/// }
/// ```
pub fn launch_cfg(root: Component, config_builder: Config) {
    launch_with_props(root, (), config_builder)
}

/// Launch the WebView and run the event loop, with configuration and root props.
///
/// This function will start a multithreaded Tokio runtime as well the WebView event loop. This will block the current thread.
///
/// You can configure the WebView window with a configuration closure
///
/// ```rust, no_run
/// use dioxus::prelude::*;
/// use dioxus_desktop::Config;
///
/// fn main() {
///     dioxus_desktop::launch_with_props(app, AppProps { name: "asd" }, Config::default());
/// }
///
/// struct AppProps {
///     name: &'static str
/// }
///
/// fn app(cx: Scope<AppProps>) -> Element {
///     cx.render(rsx!{
///         h1 {"hello {cx.props.name}!"}
///     })
/// }
/// ```
pub fn launch_with_props<P: 'static>(root: Component<P>, props: P, cfg: Config) {
    let event_loop = EventLoop::<UserWindowEvent>::with_user_event();

    let proxy = event_loop.create_proxy();

    let window_behaviour = cfg.last_window_close_behaviour;

    // Intialize hot reloading if it is enabled
    #[cfg(all(feature = "hot-reload", debug_assertions))]
    dioxus_hot_reload::connect({
        let proxy = proxy.clone();
        move |template| {
            let _ = proxy.send_event(UserWindowEvent(
                EventData::HotReloadEvent(template),
                unsafe { WindowId::dummy() },
            ));
        }
    });

    // We start the tokio runtime *on this thread*
    // Any future we poll later will use this runtime to spawn tasks and for IO
    let rt = tokio::runtime::Builder::new_multi_thread()
        .enable_all()
        .build()
        .unwrap();

    // We enter the runtime but we poll futures manually, circumventing the per-task runtime budget
    let _guard = rt.enter();

    // We only have one webview right now, but we'll have more later
    // Store them in a hashmap so we can remove them when they're closed
    let mut webviews = HashMap::<WindowId, WebviewHandler>::new();

    // We use this to allow dynamically adding and removing window event handlers
    let event_handlers = WindowEventHandlers::default();

    let queue = WebviewQueue::default();

    let shortcut_manager = ShortcutRegistry::new(&event_loop);

    // move the props into a cell so we can pop it out later to create the first window
    // iOS panics if we create a window before the event loop is started
    let props = Rc::new(Cell::new(Some(props)));
    let cfg = Rc::new(Cell::new(Some(cfg)));
    let mut is_visible_before_start = true;

    event_loop.run(move |window_event, event_loop, control_flow| {
        *control_flow = ControlFlow::Wait;

        event_handlers.apply_event(&window_event, event_loop);

        match window_event {
            Event::WindowEvent {
                event, window_id, ..
            } => match event {
                WindowEvent::CloseRequested => match window_behaviour {
                    cfg::WindowCloseBehaviour::LastWindowExitsApp => {
                        webviews.remove(&window_id);

                        if webviews.is_empty() {
                            *control_flow = ControlFlow::Exit
                        }
                    }
                    cfg::WindowCloseBehaviour::LastWindowHides => {
                        let Some(webview) = webviews.get(&window_id) else {
                            return;
                        };
                        hide_app_window(&webview.desktop_context.webview);
                    }
                    cfg::WindowCloseBehaviour::CloseWindow => {
                        webviews.remove(&window_id);
                    }
                },
                WindowEvent::Destroyed { .. } => {
                    webviews.remove(&window_id);

                    if matches!(
                        window_behaviour,
                        cfg::WindowCloseBehaviour::LastWindowExitsApp
                    ) && webviews.is_empty()
                    {
                        *control_flow = ControlFlow::Exit
                    }
                }
                _ => {}
            },

            Event::NewEvents(StartCause::Init) => {
                let props = props.take().unwrap();
                let cfg = cfg.take().unwrap();

                // Create a dom
                let dom = VirtualDom::new_with_props(root, props);

                is_visible_before_start = cfg.window.window.visible;

                let handler = create_new_window(
                    cfg,
                    event_loop,
                    &proxy,
                    dom,
                    &queue,
                    &event_handlers,
                    shortcut_manager.clone(),
                );

                let id = handler.desktop_context.webview.window().id();
                webviews.insert(id, handler);
                _ = proxy.send_event(UserWindowEvent(EventData::Poll, id));
            }

            Event::UserEvent(UserWindowEvent(EventData::NewWindow, _)) => {
                for handler in queue.borrow_mut().drain(..) {
                    let id = handler.desktop_context.webview.window().id();
                    webviews.insert(id, handler);
                    _ = proxy.send_event(UserWindowEvent(EventData::Poll, id));
                }
            }

            Event::UserEvent(event) => match event.0 {
                #[cfg(all(feature = "hot-reload", debug_assertions))]
                EventData::HotReloadEvent(msg) => match msg {
                    dioxus_hot_reload::HotReloadMsg::UpdateTemplate(template) => {
                        for webview in webviews.values_mut() {
                            webview.dom.replace_template(template);

                            poll_vdom(webview);
                        }
                    }
                    dioxus_hot_reload::HotReloadMsg::Shutdown => {
                        *control_flow = ControlFlow::Exit;
                    }
                },

                EventData::CloseWindow => {
                    webviews.remove(&event.1);

                    if webviews.is_empty() {
                        *control_flow = ControlFlow::Exit
                    }
                }

                EventData::Poll => {
                    if let Some(view) = webviews.get_mut(&event.1) {
                        poll_vdom(view);
                    }
                }

                EventData::Ipc(msg) if msg.method() == "user_event" => {
                    let params = msg.params();

                    let evt = match serde_json::from_value::<HtmlEvent>(params) {
                        Ok(value) => value,
                        Err(_) => return,
                    };

                    let HtmlEvent {
                        element,
                        name,
                        bubbles,
                        data,
                    } = evt;

                    let view = webviews.get_mut(&event.1).unwrap();

                    // check for a mounted event placeholder and replace it with a desktop specific element
                    let as_any = if let dioxus_html::EventData::Mounted = &data {
                        let query = view
                            .dom
                            .base_scope()
                            .consume_context::<DesktopContext>()
                            .unwrap()
                            .query
                            .clone();

                        let element =
                            DesktopElement::new(element, view.desktop_context.clone(), query);

                        Rc::new(MountedData::new(element))
                    } else {
                        data.into_any()
                    };

                    view.dom.handle_event(&name, as_any, element, bubbles);

                    send_edits(view.dom.render_immediate(), &view.desktop_context.webview);
                }

                // When the webview sends a query, we need to send it to the query manager which handles dispatching the data to the correct pending query
                EventData::Ipc(msg) if msg.method() == "query" => {
                    let params = msg.params();

                    if let Ok(result) = serde_json::from_value::<QueryResult>(params) {
                        let view = webviews.get(&event.1).unwrap();
                        let query = view
                            .dom
                            .base_scope()
                            .consume_context::<DesktopContext>()
                            .unwrap()
                            .query
                            .clone();

                        query.send(result);
                    }
                }

                EventData::Ipc(msg) if msg.method() == "initialize" => {
                    let view = webviews.get_mut(&event.1).unwrap();
                    send_edits(view.dom.rebuild(), &view.desktop_context.webview);
                    view.desktop_context
                        .webview
                        .window()
                        .set_visible(is_visible_before_start);
                }

                EventData::Ipc(msg) if msg.method() == "browser_open" => {
                    if let Some(temp) = msg.params().as_object() {
                        if temp.contains_key("href") {
                            let open = webbrowser::open(temp["href"].as_str().unwrap());
                            if let Err(e) = open {
                                tracing::error!("Open Browser error: {:?}", e);
                            }
                        }
                    }
                }

                EventData::Ipc(msg) if msg.method() == "file_diolog" => {
                    if let Ok(file_diolog) =
                        serde_json::from_value::<file_upload::FileDialogRequest>(msg.params())
                    {
                        let id = ElementId(file_diolog.target);
                        let event_name = &file_diolog.event;
                        let event_bubbles = file_diolog.bubbles;
                        let files = file_upload::get_file_event(&file_diolog);
                        let data = Rc::new(FormData {
                            value: Default::default(),
                            values: Default::default(),
                            files: Some(Arc::new(NativeFileEngine::new(files))),
                        });

                        let view = webviews.get_mut(&event.1).unwrap();

                        if event_name == "change&input" {
                            view.dom
                                .handle_event("input", data.clone(), id, event_bubbles);
                            view.dom.handle_event("change", data, id, event_bubbles);
                        } else {
                            view.dom.handle_event(event_name, data, id, event_bubbles);
                        }

                        send_edits(view.dom.render_immediate(), &view.desktop_context.webview);
                    }
                }

                _ => {}
            },
            Event::GlobalShortcutEvent(id) => shortcut_manager.call_handlers(id),
            _ => {}
        }
    })
}

fn create_new_window(
    mut cfg: Config,
    event_loop: &EventLoopWindowTarget<UserWindowEvent>,
    proxy: &EventLoopProxy<UserWindowEvent>,
    dom: VirtualDom,
    queue: &WebviewQueue,
    event_handlers: &WindowEventHandlers,
    shortcut_manager: ShortcutRegistry,
) -> WebviewHandler {
    let (webview, web_context) = webview::build(&mut cfg, event_loop, proxy.clone());
    let desktop_context = Rc::from(DesktopService::new(
        webview,
        proxy.clone(),
        event_loop.clone(),
        queue.clone(),
        event_handlers.clone(),
        shortcut_manager,
    ));

    let cx = dom.base_scope();
    cx.provide_context(desktop_context.clone());

    // Init eval
    init_eval(cx);

    WebviewHandler {
        // We want to poll the virtualdom and the event loop at the same time, so the waker will be connected to both
        waker: waker::tao_waker(proxy, desktop_context.webview.window().id()),
        desktop_context,
        dom,
        _web_context: web_context,
    }
}

struct WebviewHandler {
    dom: VirtualDom,
    desktop_context: DesktopContext,
    waker: Waker,

    // Wry assumes the webcontext is alive for the lifetime of the webview.
    // We need to keep the webcontext alive, otherwise the webview will crash
    _web_context: WebContext,
}

/// Poll the virtualdom until it's pending
///
/// The waker we give it is connected to the event loop, so it will wake up the event loop when it's ready to be polled again
///
/// All IO is done on the tokio runtime we started earlier
fn poll_vdom(view: &mut WebviewHandler) {
    let mut cx = std::task::Context::from_waker(&view.waker);

    loop {
        {
            let fut = view.dom.wait_for_work();
            pin_mut!(fut);

            match fut.poll_unpin(&mut cx) {
                std::task::Poll::Ready(_) => {}
                std::task::Poll::Pending => break,
            }
        }

        send_edits(view.dom.render_immediate(), &view.desktop_context.webview);
    }
}

/// Send a list of mutations to the webview
fn send_edits(edits: Mutations, webview: &WebView) {
    let serialized = serde_json::to_string(&edits).unwrap();

    // todo: use SSE and binary data to send the edits with lower overhead
    _ = webview.evaluate_script(&format!("window.interpreter.handleEdits({serialized})"));
}

/// Different hide implementations per platform
#[allow(unused)]
fn hide_app_window(webview: &WebView) {
    #[cfg(target_os = "windows")]
    {
        use wry::application::platform::windows::WindowExtWindows;
        webview.window().set_visible(false);
        webview.window().set_skip_taskbar(true);
    }

    #[cfg(target_os = "linux")]
    {
        use wry::application::platform::unix::WindowExtUnix;
        webview.window().set_visible(false);
    }

    #[cfg(target_os = "macos")]
    {
        // webview.window().set_visible(false); has the wrong behaviour on macOS
        // It will hide the window but not show it again when the user switches
        // back to the app. `NSApplication::hide:` has the correct behaviour
        use objc::runtime::Object;
        use objc::{msg_send, sel, sel_impl};
        objc::rc::autoreleasepool(|| unsafe {
            let app: *mut Object = msg_send![objc::class!(NSApplication), sharedApplication];
            let nil = std::ptr::null_mut::<Object>();
            let _: () = msg_send![app, hide: nil];
        });
    }
}