dioxus_liveview/
lib.rs

1#![doc = include_str!("../README.md")]
2#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
3#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
4
5mod adapters;
6#[allow(unused_imports)]
7pub use adapters::*;
8
9mod element;
10pub mod pool;
11mod query;
12use dioxus_interpreter_js::NATIVE_JS;
13use futures_util::{SinkExt, StreamExt};
14pub use pool::*;
15mod config;
16mod document;
17mod events;
18mod history;
19pub use config::*;
20#[cfg(feature = "axum")]
21pub mod launch;
22
23pub trait WebsocketTx: SinkExt<String, Error = LiveViewError> {}
24impl<T> WebsocketTx for T where T: SinkExt<String, Error = LiveViewError> {}
25
26pub trait WebsocketRx: StreamExt<Item = Result<String, LiveViewError>> {}
27impl<T> WebsocketRx for T where T: StreamExt<Item = Result<String, LiveViewError>> {}
28
29#[derive(Debug, thiserror::Error)]
30#[non_exhaustive]
31pub enum LiveViewError {
32    #[error("Sending to client error")]
33    SendingFailed,
34}
35
36fn handle_edits_code() -> String {
37    use dioxus_interpreter_js::unified_bindings::SLEDGEHAMMER_JS;
38
39    let serialize_file_uploads = r#"if (
40        target.tagName === "INPUT" &&
41        (event.type === "change" || event.type === "input")
42      ) {
43        const type = target.getAttribute("type");
44        if (type === "file") {
45          async function read_files() {
46            const files = target.files;
47            const file_contents = {};
48
49            for (let i = 0; i < files.length; i++) {
50              const file = files[i];
51
52              file_contents[file.name] = Array.from(
53                new Uint8Array(await file.arrayBuffer())
54              );
55            }
56            let file_engine = {
57              files: file_contents,
58            };
59            contents.files = file_engine;
60
61            if (realId === null) {
62              return;
63            }
64            const message = window.interpreter.sendSerializedEvent({
65              name: name,
66              element: parseInt(realId),
67              data: contents,
68              bubbles,
69            });
70            window.ipc.postMessage(message);
71          }
72          read_files();
73          return;
74        }
75      }"#;
76    let mut interpreter = format!(
77        r#"
78    // Bring the sledgehammer code
79    {SLEDGEHAMMER_JS}
80
81    // And then extend it with our native bindings
82    {NATIVE_JS}
83    "#
84    )
85    .replace("/*POST_EVENT_SERIALIZATION*/", serialize_file_uploads)
86    .replace("export", "");
87    while let Some(import_start) = interpreter.find("import") {
88        let import_end = interpreter[import_start..]
89            .find([';', '\n'])
90            .map(|i| i + import_start)
91            .unwrap_or_else(|| interpreter.len());
92        interpreter.replace_range(import_start..import_end, "");
93    }
94    let main_js = include_str!("./main.js");
95    let js = format!("{interpreter}\n{main_js}");
96    js
97}
98
99/// This script that gets injected into your app connects this page to the websocket endpoint
100///
101/// Once the endpoint is connected, it will send the initial state of the app, and then start
102/// processing user events and returning edits to the liveview instance.
103///
104/// You can pass a relative path prefixed with "/", or enter a full URL including the protocol
105/// (`ws:` or `wss:`) as an argument.
106///
107/// If you enter a relative path, the web client automatically prefixes the host address in
108/// `window.location` when creating a web socket to LiveView.
109///
110/// ```rust
111/// use dioxus_liveview::interpreter_glue;
112///
113/// // Creates websocket connection to same host as current page
114/// interpreter_glue("/api/liveview");
115///
116/// // Creates websocket connection to specified url
117/// interpreter_glue("ws://localhost:8080/api/liveview");
118/// ```
119pub fn interpreter_glue(url_or_path: &str) -> String {
120    // If the url starts with a `/`, generate glue which reuses current host
121    let get_ws_url = if url_or_path.starts_with('/') {
122        r#"
123  let loc = window.location;
124  let new_url = "";
125  if (loc.protocol === "https:") {{
126      new_url = "wss:";
127  }} else {{
128      new_url = "ws:";
129  }}
130  new_url += "//" + loc.host + path;
131  return new_url;
132      "#
133    } else {
134        "return path;"
135    };
136
137    let handle_edits = handle_edits_code();
138
139    format!(
140        r#"
141<script>
142    function __dioxusGetWsUrl(path) {{
143      {get_ws_url}
144    }}
145
146    var WS_ADDR = __dioxusGetWsUrl("{url_or_path}");
147    {handle_edits}
148</script>
149    "#
150    )
151}
dioxus_liveview/lib.rs

dioxus_liveview/
lib.rs
