On change file

crates/vertigo-macro/src/html_parser/commons.rs

@@ -149,9 +149,16 @@ pub(super) fn parse_block_of_statements(
         quote! { into() }
     };
 
-    // If the last statement is a reference, use it as the value
-    // Otherwise, try to unwrap single statement block or use the whole block as the value
-    let value = dereferenced.unwrap_or_else(|| unwrap_block_if_single(block));
+    // For multi-statement blocks ending with a reference, keep the whole block so that
+    // preceding statements (e.g. `let mut x = ...; x += 1; &x`) are not lost.
+    // For single-statement reference blocks (e.g. `{&my_var}`), use the inner expression
+    // directly so `.clone()` applies to the value, not to a double-reference.
+    // For non-reference blocks, unwrap single-statement blocks or use the whole block.
+    let value = match &dereferenced {
+        Some(inner) if block.stmts.len() > 1 => block.to_token_stream(),
+        Some(inner) => inner.clone(),
+        None => unwrap_block_if_single(block),
+    };
 
     (key, value, method)
 }
@@ -237,14 +244,24 @@ mod tests {
 
     #[test]
     fn test_parse_block_of_statements_reference_value() {
-        // Reference: key and value are the inner expr; method is clone()
+        // Single-statement reference: inner expr used as value so `.clone()` applies correctly
         let block: Block = syn::parse_quote! { { &my_var } };
         let (key, value, method) = parse_block_of_statements(&block);
         assert_eq!(key.to_string(), "my_var");
         assert_eq!(value.to_string(), "my_var");
         assert_eq!(method.to_string(), "clone ()");
     }
 
+    #[test]
+    fn test_parse_block_of_statements_reference_with_preceding_stmts() {
+        // Multi-statement block ending with a reference: whole block preserved as value
+        let block: Block = syn::parse_quote! { { let mut x = 1; x += 1; &x } };
+        let (key, value, method) = parse_block_of_statements(&block);
+        assert_eq!(key.to_string(), "x");
+        assert_eq!(value.to_string(), "{ let mut x = 1 ; x += 1 ; & x }");
+        assert_eq!(method.to_string(), "clone ()");
+    }
+
     #[test]
     fn test_extract_spread_block_with_spread() {
         // Spread block: last stmt is a range like `..expr`

crates/vertigo-macro/src/html_parser/group_attrs.rs

@@ -53,6 +53,7 @@ fn attr_to_group_variant(key: impl AsRef<str>, value: TokenStream2) -> TokenStre
         "hook_key_down" => quote! { vertigo::AttrGroupValue::hook_key_down(#value) },
         "on_blur" => quote! { vertigo::AttrGroupValue::on_blur(#value) },
         "on_change" => quote! { vertigo::AttrGroupValue::on_change(#value) },
+        "on_change_file" => quote! { vertigo::AttrGroupValue::on_change_file(#value) },
         "on_click" => quote! { vertigo::AttrGroupValue::on_click(#value) },
         "on_dropfile" => quote! { vertigo::AttrGroupValue::on_dropfile(#value) },
         "on_input" => quote! { vertigo::AttrGroupValue::on_input(#value) },

crates/vertigo-macro/src/html_parser/node.rs

@@ -161,9 +161,9 @@ fn push_attribute(
     }
 
     let method_str = match name.as_str() {
-        "hook_key_down" | "on_blur" | "on_change" | "on_click" | "on_dropfile" | "on_input"
-        | "on_key_down" | "on_load" | "on_mouse_down" | "on_mouse_enter" | "on_mouse_leave"
-        | "on_mouse_up" | "on_submit" => &name,
+        "hook_key_down" | "on_blur" | "on_change" | "on_change_file" | "on_click"
+        | "on_dropfile" | "on_input" | "on_key_down" | "on_load" | "on_mouse_down"
+        | "on_mouse_enter" | "on_mouse_leave" | "on_mouse_up" | "on_submit" => &name,
 
         "form" => "on_submit",
 

crates/vertigo/src/dom/dom_element.rs

@@ -108,6 +108,9 @@ impl DomElement {
             ("on_dropfile", AttrGroupValue::OnDropfile(on_dropfile)) => {
                 self.on_dropfile_rc(on_dropfile)
             }
+            ("on_change_file", AttrGroupValue::OnChangeFile(on_change_file)) => {
+                self.on_change_file_rc(on_change_file)
+            }
             ("on_input", AttrGroupValue::OnInput(on_input)) => self.on_input_rc(on_input),
             ("on_key_down", AttrGroupValue::OnKeyDown(on_key_down)) => {
                 self.on_key_down_rc(on_key_down)
@@ -274,6 +277,40 @@ impl DomElement {
         })
     }
 
+    pub fn on_change_file(self, on_change_file: impl Into<Callback1<DropFileEvent, ()>>) -> Self {
+        self.on_change_file_rc(Rc::new(on_change_file.into()))
+    }
+
+    pub fn on_change_file_rc(self, on_change_file: Rc<Callback1<DropFileEvent, ()>>) -> Self {
+        let on_change_file = self.install_callback1(on_change_file);
+
+        self.add_event_listener("change_file", move |data| {
+            let params = data.map_list(|mut params: JsJsonListDecoder| {
+                let files = params.get_vec("change file", |item: JsJson| {
+                    item.map_list(|mut item: JsJsonListDecoder| {
+                        let name = item.get_string("name")?;
+                        let data = item.get_buffer("data")?;
+
+                        Ok(DropFileItem::new(name, data))
+                    })
+                })?;
+
+                Ok(DropFileEvent::new(files))
+            });
+
+            match params {
+                Ok(params) => {
+                    on_change_file(params);
+                }
+                Err(error) => {
+                    log::error!("on_change_file -> params decode error -> {error}");
+                }
+            };
+
+            JsJson::Null
+        })
+    }
+
     pub fn on_click(self, on_click: impl Into<Callback1<ClickEvent, ()>>) -> Self {
         self.on_click_rc(Rc::new(on_click.into()))
     }

crates/vertigo/src/dom_macro/dom.rs

@@ -51,6 +51,7 @@ pub enum AttrGroupValue {
     OnChange(Rc<Callback1<String, ()>>),
     OnClick(Rc<Callback1<ClickEvent, ()>>),
     OnDropfile(Rc<Callback1<DropFileEvent, ()>>),
+    OnChangeFile(Rc<Callback1<DropFileEvent, ()>>),
     OnInput(Rc<Callback1<String, ()>>),
     OnKeyDown(Rc<Callback1<KeyDownEvent, bool>>),
     OnLoad(Rc<Callback<()>>),
@@ -88,6 +89,7 @@ impl AttrGroupValue {
     group_value_constructor!(on_change, Callback1<String, ()>, OnChange);
     group_value_constructor!(on_click, Callback1<ClickEvent, ()>, OnClick);
     group_value_constructor!(on_dropfile, Callback1<DropFileEvent, ()>, OnDropfile);
+    group_value_constructor!(on_change_file, Callback1<DropFileEvent, ()>, OnChangeFile);
     group_value_constructor!(on_input, Callback1<String, ()>, OnInput);
     group_value_constructor!(on_key_down, Callback1<KeyDownEvent, bool>, OnKeyDown);
     group_value_constructor!(on_load, Callback<()>, OnLoad);

crates/vertigo/src/driver_module/src_js/api/command/dom/callbackManager.ts

@@ -68,6 +68,10 @@ export class CallbackManager {
                 return this.load(event, callback_id);
             }
 
+            if (event_name === 'change_file') {
+                return this.changeFile(event, callback_id);
+            }
+
             console.error(`No support for the event ${event_name}`);
         };
 
@@ -82,7 +86,8 @@ export class CallbackManager {
             document.addEventListener('keydown', callback, false);
         } else {
             const node = nodes.get('callback_add', id);
-            node.addEventListener(event_name, callback, false);
+            const domEventName = event_name === 'change_file' ? 'change' : event_name;
+            node.addEventListener(domEventName, callback, false);
         }
     }
 
@@ -99,7 +104,8 @@ export class CallbackManager {
             document.removeEventListener('keydown', callback);
         } else {
             const node = nodes.get('callback_remove', id);
-            node.removeEventListener(event_name, callback);
+            const domEventName = event_name === 'change_file' ? 'change' : event_name;
+            node.removeEventListener(domEventName, callback);
         }
     }
 
@@ -154,6 +160,41 @@ export class CallbackManager {
         console.warn('event input ignore', target);
     }
 
+    private changeFile(event: Event, callback_id: CallbackId) {
+        const target = event.target;
+
+        if (target instanceof HTMLInputElement && target.files !== null && target.files.length > 0) {
+            const promises: Array<Promise<{ name: string, data: Uint8Array }>> = [];
+
+            for (let i = 0; i < target.files.length; i++) {
+                const file = target.files[i];
+                if (file !== undefined) {
+                    promises.push(
+                        file.arrayBuffer().then((buf) => ({
+                            name: file.name,
+                            data: new Uint8Array(buf),
+                        }))
+                    );
+                }
+            }
+
+            if (promises.length > 0) {
+                Promise.all(promises).then((files) => {
+                    const params = [];
+                    for (const f of files) {
+                        params.push([f.name, Array.from(f.data)]);
+                    }
+                    this.wasmCallback(callback_id, [params]);
+                }).catch((err) => console.error('changeFile ->', err));
+            }
+
+            target.value = '';
+            return;
+        }
+
+        console.warn('changeFile: not a file input or no files', target);
+    }
+
     private blur(_event: Event, callback_id: CallbackId) {
         this.wasmCallback(callback_id, undefined);
     }

crates/vertigo/src/tests/dom/component_namespaces.rs

@@ -2,7 +2,8 @@
 /// This test checks if component can be used when not in local scope
 /// (whole name does not start with capital letter)
 fn test_namespaces() {
-    use crate::{self as vertigo, DomNode, dom};
+    use crate::dev::inspect::{DomDebugFragment, log_start};
+    use crate::{self as vertigo, dom};
 
     mod my_module {
         pub mod inner {
@@ -16,23 +17,15 @@ fn test_namespaces() {
         }
     }
 
-    let ret = dom! {
+    log_start();
+    let _el = dom! {
         <my_module::inner::Hello name={"world"} />
     };
-
-    match ret {
-        DomNode::Node { node } => {
-            match node.get_children().pop_back() {
-                // If node has text child, then component "Hello" was embedded correctly
-                Some(child) => match child {
-                    DomNode::Text { node: _ } => {}
-                    _ => panic!("Expected text child"),
-                },
-                _ => panic!("Expected child node"),
-            }
-        }
-        _ => panic!("Expected DomNode::Node"),
-    }
+    let html = DomDebugFragment::from_log().to_pseudo_html();
+    assert_eq!(
+        html,
+        "<span v-component='my_module::inner::Hello'>Hello world</span>"
+    );
 }
 
 #[test]
@@ -48,13 +41,18 @@ fn test_pub_super() {
         }
     }
 
-    use crate::{self as vertigo, DomNode, dom};
+    use crate::dev::inspect::{DomDebugFragment, log_start};
+    use crate::{self as vertigo, dom};
 
-    let ret = dom! {
+    log_start();
+    let _el = dom! {
         <p><sub_module::Hello name={"world"} /></p>
     };
-
-    assert!(matches!(ret, DomNode::Node { node: _ }));
+    let html = DomDebugFragment::from_log().to_pseudo_html();
+    assert_eq!(
+        html,
+        "<p><span v-component='sub_module::Hello'>Hello world</span></p>"
+    );
 }
 
 #[test]
@@ -71,11 +69,16 @@ fn test_pub_crate() {
         }
     }
 
-    use crate::{self as vertigo, DomNode, dom};
+    use crate::dev::inspect::{DomDebugFragment, log_start};
+    use crate::{self as vertigo, dom};
 
-    let ret = dom! {
+    log_start();
+    let _el = dom! {
         <p><sub_module::sub_sub_module::Hello name={"world"} /></p>
     };
-
-    assert!(matches!(ret, DomNode::Node { node: _ }));
+    let html = DomDebugFragment::from_log().to_pseudo_html();
+    assert_eq!(
+        html,
+        "<p><span v-component='sub_module::sub_sub_module::Hello'>Hello world</span></p>"
+    );
 }