feat: complete the component update case

rustq · Mar 17, 2024 · 50ab6f2 · 50ab6f2
1 parent 8a5651b
commit 50ab6f2
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 11 deletions.
diff --git a/rustle/src/compiler/generate/mod.rs b/rustle/src/compiler/generate/mod.rs
@@ -12,6 +12,7 @@ struct Code {
     components: Vec<(String, String)>,
     create: Vec<String>,
     update: Vec<String>,
+    props_set: Vec<String>,
     destroy: Vec<String>,
 }
 
@@ -22,6 +23,7 @@ pub fn generate(ast: RustleAst, analysis: AnalysisResult) -> String {
         components: Vec::new(),
         create: Vec::new(),
         update: Vec::new(),
+        props_set: Vec::new(),
         destroy: Vec::new(),
     };
 
@@ -65,6 +67,9 @@ pub fn generate(ast: RustleAst, analysis: AnalysisResult) -> String {
 			update(changed) {{
 				{}
 			}},
+			$set(changedSet) {{
+				{}
+			}},
 			destroy() {{
 				{}
 			}},
@@ -86,6 +91,7 @@ pub fn generate(ast: RustleAst, analysis: AnalysisResult) -> String {
             .join("\n"),
         code.create.join("\n"),
         code.update.join("\n"),
+        code.props_set.join("\n"),
         code.destroy.join("\n")
     )
 }
@@ -176,11 +182,11 @@ fn traverse(node: &Fragment, parent: String, analysis: &AnalysisResult, code: &m
                                     r#"
                                     const {}_changes = {{}};
                                     if (changed.includes('{}')) {{
-                                        {}_changes.{} = {};
+                                        {}_changes['{}'] = {};
                                     }}
-                                    variable_name.$set({}_changes);
+                                    {}.$set({}_changes);
                                 "#,
-                                    variable_name, value, variable_name, attr.name, value, variable_name
+                                    variable_name, value, variable_name, attr.name, value, variable_name, variable_name
                                 ));
                             },
                             _ => {
@@ -246,6 +252,14 @@ fn traverse(node: &Fragment, parent: String, analysis: &AnalysisResult, code: &m
 				"#,
                     expression_name, variable_name, expression_name
                 ));
+                code.props_set.push(format!(
+                    r#"
+					if ('{}' in changedSet) {{
+						{}.data = changedSet['{}'];
+					}}
+				"#,
+                    expression_name, variable_name, expression_name
+                ));
             } else {
                 for change in analysis.will_change.iter() {
                     if expression_name.contains(change) {
@@ -257,6 +271,14 @@ fn traverse(node: &Fragment, parent: String, analysis: &AnalysisResult, code: &m
                         "#,
                             change, variable_name, expression_name
                         ));
+                        code.props_set.push(format!(
+                            r#"
+                            if ('{}' in changedSet) {{
+                                {}.data = changedSet['{}'];
+                            }}
+                        "#,
+                            expression_name, variable_name, expression_name
+                        ));
                     }
                 }
             }

diff --git a/rustle/tests/component_update/Nested.rustle b/rustle/tests/component_update/Nested.rustle
@@ -1,5 +1,9 @@
 <script>
-	export let q;
+	let q=0;
+	const minus_q = () => q--;
 </script>
 
-<p>...don't affect this element {q}</p>
+<div>
+	<button on:click={minus_q}>-</button>
+	<p>...don't affect this element q={q}</p>
+</div>
diff --git a/rustle/tests/component_update/app.rustle b/rustle/tests/component_update/app.rustle
@@ -1,8 +1,9 @@
-<script>
-  let url = '/tutorial/image.gif';
-  const update_url = () => url--;
+import Nested from './Nested.js';
 
-	const Nested = require('./Nested.rustle');
+<script>
+	let out_q = 108;
+  const handleClick = () => out_q++
 </script>
 
-<Nested q={url} />
+<button on:click={handleClick}>+</button>
+<Nested q={out_q} />
diff --git a/rustle/tests/component_update/index.html b/rustle/tests/component_update/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<script type="module">
+		import App from "./app.js";
+		App().create(document.body);
+	</script>
+</body>
+</html>
diff --git a/rustle/tests/test_parsing.rs b/rustle/tests/test_parsing.rs
@@ -70,5 +70,15 @@ fn test_parsing_nested() {
 #[test]
 fn test_tag_update() { test_parsing("tag_update".to_owned()) }
 
+// in browser passed
 #[test]
-fn test_component_update() { test_parsing("component_update".to_owned()) }
+fn test_component_update() {
+    test_parsing("component_update".to_owned());
+
+    let source = fs::read_to_string("tests/component_update/Nested.rustle").unwrap();
+    let ast = Parser::new(&source).parse();
+    let analysis = analyse(&ast);
+    let generated = generate(ast, analysis);
+
+    fs::write("tests/component_update/Nested.js", generated).unwrap();
+}