Fix hot reloading component properties out of order (#2842)

* Fix hot reloading component properties out of order

* ignore signal write warnings in hot reloading

* Fix hot reloading components with only some literal properties

* Add a test for hot reloading component properties

packages/rsx/src/hot_reload/diff.rs

@@ -411,13 +411,14 @@ impl HotReloadResult {
         }
 
         let mut new_fields = new_component.fields.clone();
-        new_fields.sort_by(|a, b| a.name.to_string().cmp(&b.name.to_string()));
-        let mut old_fields = old_component.fields.clone();
-        old_fields.sort_by(|a, b| a.name.to_string().cmp(&b.name.to_string()));
+        new_fields.sort_by_key(|attribute| attribute.name.to_string());
+        let mut old_fields = old_component.fields.iter().enumerate().collect::<Vec<_>>();
+        old_fields.sort_by_key(|(_, attribute)| attribute.name.to_string());
 
-        let mut literal_component_properties = Vec::new();
+        // The literal component properties for the component in same the order as the original component property literals
+        let mut literal_component_properties = vec![None; old_fields.len()];
 
-        for (new_field, old_field) in new_fields.iter().zip(old_fields.iter()) {
+        for (new_field, (index, old_field)) in new_fields.iter().zip(old_fields.iter()) {
             // Verify the names match
             if new_field.name != old_field.name {
                 return None;
@@ -435,7 +436,7 @@ impl HotReloadResult {
                         return None;
                     }
                     let literal = self.full_rebuild_state.hotreload_hot_literal(new_value)?;
-                    literal_component_properties.push(literal);
+                    literal_component_properties[*index] = Some(literal);
                 }
                 _ => {
                     if new_field.value != old_field.value {
@@ -445,7 +446,7 @@ impl HotReloadResult {
             }
         }
 
-        Some(literal_component_properties)
+        Some(literal_component_properties.into_iter().flatten().collect())
     }
 
     /// Hot reload an if chain

packages/rsx/tests/hotreload_pattern.rs

@@ -1069,8 +1069,20 @@ fn component_with_handlers() {
         }
     };
 
-    let valid = can_hotreload(a, b);
-    assert!(valid);
+    let hot_reload = hot_reload_from_tokens(a, b).unwrap();
+    let template = hot_reload.get(&0).unwrap();
+    assert_eq!(
+        template.component_values,
+        &[
+            HotReloadLiteral::Int(456),
+            HotReloadLiteral::Float(789.456),
+            HotReloadLiteral::Bool(false),
+            HotReloadLiteral::Fmted(FmtedSegments::new(vec![
+                FmtSegment::Literal { value: "goodbye " },
+                FmtSegment::Dynamic { id: 0 }
+            ])),
+        ]
+    );
 }
 
 #[test]