Merge branch 'upstream' into query-system

packages/web/src/dom.rs

@@ -10,15 +10,16 @@
 use dioxus_core::{
     BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
 };
-use dioxus_html::{event_bubbles, CompositionData, FormData, MountedData};
+use dioxus_html::{event_bubbles, CompositionData, FileEngine, FormData, MountedData};
 use dioxus_interpreter_js::{get_node, save_template, Channel};
 use futures_channel::mpsc;
+use js_sys::Array;
 use rustc_hash::FxHashMap;
-use std::{any::Any, rc::Rc};
-use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{Document, Element, Event, HtmlElement};
+use std::{any::Any, rc::Rc, sync::Arc};
+use wasm_bindgen::{closure::Closure, prelude::wasm_bindgen, JsCast};
+use web_sys::{console, Document, Element, Event, HtmlElement};
 
-use crate::Config;
+use crate::{file_engine::WebFileEngine, Config};
 
 pub struct WebsysDom {
     document: Document,
@@ -254,6 +255,7 @@ impl WebsysDom {
 // We need tests that simulate clicks/etc and make sure every event type works.
 pub fn virtual_event_from_websys_event(event: web_sys::Event, target: Element) -> Rc<dyn Any> {
     use dioxus_html::events::*;
+    console::log_1(&event.clone().into());
 
     match event.type_().as_str() {
         "copy" | "cut" | "paste" => Rc::new(ClipboardData {}),
@@ -355,47 +357,53 @@ fn read_input_to_data(target: Element) -> Rc<FormData> {
 
     // try to fill in form values
     if let Some(form) = target.dyn_ref::<web_sys::HtmlFormElement>() {
-        let elements = form.elements();
-        for x in 0..elements.length() {
-            let element = elements.item(x).unwrap();
-            if let Some(name) = element.get_attribute("name") {
-                let value: Option<String> = element
-                    .dyn_ref()
-                    .map(|input: &web_sys::HtmlInputElement| {
-                        match input.type_().as_str() {
-                            "checkbox" => {
-                                match input.checked() {
-                                    true => Some("true".to_string()),
-                                    false => Some("false".to_string()),
-                                }
-                            },
-                            "radio" => {
-                                match input.checked() {
-                                    true => Some(input.value()),
-                                    false => None,
-                                }
-                            }
-                            _ => Some(input.value())
-                        }
-                    })
-                    .or_else(|| element.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| Some(input.value())))
-                    .or_else(|| element.dyn_ref().map(|input: &web_sys::HtmlSelectElement| Some(input.value())))
-                    .or_else(|| Some(element.dyn_ref::<web_sys::HtmlElement>().unwrap().text_content()))
-                    .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener");
-                if let Some(value) = value {
-                    values.insert(name, value);
+        let form_data = get_form_data(form);
+        for value in form_data.entries().into_iter().flatten() {
+            if let Ok(array) = value.dyn_into::<Array>() {
+                if let Some(name) = array.get(0).as_string() {
+                    if let Ok(item_values) = array.get(1).dyn_into::<Array>() {
+                        let item_values =
+                            item_values.iter().filter_map(|v| v.as_string()).collect();
+
+                        values.insert(name, item_values);
+                    }
                 }
             }
         }
     }
 
+    let files = target
+        .dyn_ref()
+        .and_then(|input: &web_sys::HtmlInputElement| {
+            input.files().and_then(|files| {
+                WebFileEngine::new(files).map(|f| Arc::new(f) as Arc<dyn FileEngine>)
+            })
+        });
+
     Rc::new(FormData {
         value,
         values,
-        files: None,
+        files,
     })
 }
 
+// web-sys does not expose the keys api for form data, so we need to manually bind to it
+#[wasm_bindgen(inline_js = r#"
+    export function get_form_data(form) {
+        let values = new Map();
+        const formData = new FormData(form);
+
+        for (let name of formData.keys()) {
+            values.set(name, formData.getAll(name));
+        }
+
+        return values;
+    }
+"#)]
+extern "C" {
+    fn get_form_data(form: &web_sys::HtmlFormElement) -> js_sys::Map;
+}
+
 fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {
     let mut target = event
         .target()

packages/web/src/file_engine.rs

@@ -0,0 +1,103 @@
+use dioxus_html::FileEngine;
+use futures_channel::oneshot;
+use js_sys::Uint8Array;
+use wasm_bindgen::{prelude::Closure, JsCast};
+use web_sys::{File, FileList, FileReader};
+
+pub(crate) struct WebFileEngine {
+    file_reader: FileReader,
+    file_list: FileList,
+}
+
+impl WebFileEngine {
+    pub fn new(file_list: FileList) -> Option<Self> {
+        Some(Self {
+            file_list,
+            file_reader: FileReader::new().ok()?,
+        })
+    }
+
+    fn len(&self) -> usize {
+        self.file_list.length() as usize
+    }
+
+    fn get(&self, index: usize) -> Option<File> {
+        self.file_list.item(index as u32)
+    }
+
+    fn find(&self, name: &str) -> Option<File> {
+        (0..self.len())
+            .filter_map(|i| self.get(i))
+            .find(|f| f.name() == name)
+    }
+}
+
+#[async_trait::async_trait(?Send)]
+impl FileEngine for WebFileEngine {
+    fn files(&self) -> Vec<String> {
+        (0..self.len())
+            .filter_map(|i| self.get(i).map(|f| f.name()))
+            .collect()
+    }
+
+    // read a file to bytes
+    async fn read_file(&self, file: &str) -> Option<Vec<u8>> {
+        let file = self.find(file)?;
+
+        let file_reader = self.file_reader.clone();
+        let (rx, tx) = oneshot::channel();
+        let on_load: Closure<dyn FnMut()> = Closure::new({
+            let mut rx = Some(rx);
+            move || {
+                let result = file_reader.result();
+                let _ = rx
+                    .take()
+                    .expect("multiple files read without refreshing the channel")
+                    .send(result);
+            }
+        });
+
+        self.file_reader
+            .set_onload(Some(on_load.as_ref().unchecked_ref()));
+        on_load.forget();
+        self.file_reader.read_as_array_buffer(&file).ok()?;
+
+        if let Ok(Ok(js_val)) = tx.await {
+            let as_u8_arr = Uint8Array::new(&js_val);
+            let as_u8_vec = as_u8_arr.to_vec();
+
+            Some(as_u8_vec)
+        } else {
+            None
+        }
+    }
+
+    // read a file to string
+    async fn read_file_to_string(&self, file: &str) -> Option<String> {
+        let file = self.find(file)?;
+
+        let file_reader = self.file_reader.clone();
+        let (rx, tx) = oneshot::channel();
+        let on_load: Closure<dyn FnMut()> = Closure::new({
+            let mut rx = Some(rx);
+            move || {
+                let result = file_reader.result();
+                let _ = rx
+                    .take()
+                    .expect("multiple files read without refreshing the channel")
+                    .send(result);
+            }
+        });
+
+        self.file_reader
+            .set_onload(Some(on_load.as_ref().unchecked_ref()));
+        on_load.forget();
+        self.file_reader.read_as_text(&file).ok()?;
+
+        if let Ok(Ok(js_val)) = tx.await {
+            js_val.as_string()
+        } else {
+            None
+        }
+    }
+}

packages/web/src/lib.rs

@@ -61,6 +61,7 @@ use futures_util::{pin_mut, FutureExt, StreamExt};
 mod cache;
 mod cfg;
 mod dom;
+mod file_engine;
 mod hot_reload;
 #[cfg(feature = "hydrate")]
 mod rehydrate;
@@ -225,7 +226,7 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
     websys_dom.mount();
 
     loop {
-        log::debug!("waiting for work");
+        log::trace!("waiting for work");
 
         // if virtualdom has nothing, wait for it to have something before requesting idle time
         // if there is work then this future resolves immediately.