feat: finish the component update case

rustq · Mar 3, 2024 · e043155 · e043155
1 parent c94516f
commit e043155
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/rustle/src/compiler/generate/mod.rs b/rustle/src/compiler/generate/mod.rs
@@ -122,12 +122,12 @@ fn traverse(node: &Fragment, parent: String, analysis: &AnalysisResult, code: &m
 
                     code.create.push(format!(
                         "{}.addEventListener('{}', {});",
-                        parent, event_name, event_handler
+                        variable_name, event_name, event_handler
                     ));
 
                     code.destroy.push(format!(
                         "{}.removeEventListener('{}', {});",
-                        parent, event_name, event_handler
+                        variable_name, event_name, event_handler
                     ));
                 } else {
                     let mut value = match &attr.value {
@@ -159,18 +159,34 @@ fn traverse(node: &Fragment, parent: String, analysis: &AnalysisResult, code: &m
                     }
                     code.create.push(format!(
                         "{}.{} = {};",
-                        parent, attr.name, value
+                        variable_name, attr.name, value
                     ));
 
                     if analysis.will_change.contains(&value) {
-                        code.update.push(format!(
-                            r#"
-                            if (changed.includes('{}')) {{
-                                {}.{} = {};
-                            }}
-                        "#,
-                            value, parent, attr.name, value
-                        ));
+                        match f.is_component {
+                            true => {
+                                code.update.push(format!(
+                                    r#"
+                                    const {}_changes = {{}};
+                                    if (changed.includes('{}')) {{
+                                        {}_changes.{} = {};
+                                    }}
+                                    variable_name.$set({}_changes);
+                                "#,
+                                    variable_name, value, variable_name, attr.name, value, variable_name
+                                ));
+                            },
+                            _ => {
+                                code.update.push(format!(
+                                    r#"
+                                    if (changed.includes('{}')) {{
+                                        {}.{} = {};
+                                    }}
+                                "#,
+                                    value, variable_name, attr.name, value
+                                ));
+                            }
+                        }
                     }
                 }
             }

diff --git a/rustle/tests/component_update/app.rustle b/rustle/tests/component_update/app.rustle
@@ -5,5 +5,4 @@
 	const Nested = require('./Nested.rustle');
 </script>
 
-<button on:click={update_url} />
 <Nested q={url} />
diff --git a/rustle/tests/test_parsing.rs b/rustle/tests/test_parsing.rs
@@ -53,5 +53,5 @@ fn test_parsing_nested() { test_parsing("nested".to_owned()) }
 #[test]
 fn test_tag_update() { test_parsing("tag_update".to_owned()) }
 
-// #[test]
-// fn test_component_update() { test_parsing("component_update".to_owned()) }
+#[test]
+fn test_component_update() { test_parsing("component_update".to_owned()) }