From 6b571ffe00eac6520ceb26bc76c7d96b0bb11c55 Mon Sep 17 00:00:00 2001
From: Arpita-Jaiswal <ayushipujaa@gmail.com>
Date: Thu, 19 Oct 2023 14:57:43 +0530
Subject: [PATCH] Fix: Passing property to mutable component argument

---
 fastn-js/src/component_invocation.rs |   6 +-
 fastn-js/src/to_js.rs                |  12 ++-
 ftd/src/js/utils.rs                  |   3 +-
 ftd/t/js/65-counter.ftd              |  26 +++++
 ftd/t/js/65-counter.html             | 153 +++++++++++++++++++++++++++
 5 files changed, 194 insertions(+), 6 deletions(-)
 create mode 100644 ftd/t/js/65-counter.ftd
 create mode 100644 ftd/t/js/65-counter.html

diff --git a/fastn-js/src/component_invocation.rs b/fastn-js/src/component_invocation.rs
index bb151c1efc..dbc4d291a5 100644
--- a/fastn-js/src/component_invocation.rs
+++ b/fastn-js/src/component_invocation.rs
@@ -44,7 +44,7 @@ pub enum ElementKind {
 #[derive(Debug)]
 pub struct InstantiateComponent {
     pub component: InstantiateComponentData,
-    pub arguments: Vec<(String, fastn_js::SetPropertyValue)>,
+    pub arguments: Vec<(String, fastn_js::SetPropertyValue, bool)>,
     pub parent: String,
     pub inherited: String,
     pub should_return: bool,
@@ -66,7 +66,7 @@ pub enum InstantiateComponentData {
 impl InstantiateComponent {
     pub fn new(
         component_name: &str,
-        arguments: Vec<(String, fastn_js::SetPropertyValue)>,
+        arguments: Vec<(String, fastn_js::SetPropertyValue, bool)>,
         parent: &str,
         inherited: &str,
         should_return: bool,
@@ -86,7 +86,7 @@ impl InstantiateComponent {
 
     pub fn new_with_definition(
         component_definition: fastn_js::SetPropertyValue,
-        arguments: Vec<(String, fastn_js::SetPropertyValue)>,
+        arguments: Vec<(String, fastn_js::SetPropertyValue, bool)>,
         parent: &str,
         inherited: &str,
         should_return: bool,
diff --git a/fastn-js/src/to_js.rs b/fastn-js/src/to_js.rs
index 806e641511..5ecf155587 100644
--- a/fastn-js/src/to_js.rs
+++ b/fastn-js/src/to_js.rs
@@ -259,8 +259,16 @@ impl fastn_js::InstantiateComponent {
                 text("{")
                     .append(
                         pretty::RcDoc::intersperse(
-                            self.arguments.iter().map(|(k, v)| {
-                                format!("{}: {}", fastn_js::utils::name_to_js_(k), v.to_js())
+                            self.arguments.iter().map(|(k, value, is_mutable)| {
+                                format!(
+                                    "{}: {}",
+                                    fastn_js::utils::name_to_js_(k),
+                                    if *is_mutable {
+                                        format!("fastn.mutable({})", value.to_js())
+                                    } else {
+                                        value.to_js()
+                                    }
+                                )
                             }),
                             comma().append(space()),
                         )
diff --git a/ftd/src/js/utils.rs b/ftd/src/js/utils.rs
index 8ce8d7eb6f..05a606a535 100644
--- a/ftd/src/js/utils.rs
+++ b/ftd/src/js/utils.rs
@@ -257,7 +257,7 @@ pub(crate) fn get_set_property_values_for_provided_component_properties(
     component_properties: &[ftd::interpreter::Property],
     line_number: usize,
     has_rive_components: &mut bool,
-) -> Option<Vec<(String, fastn_js::SetPropertyValue)>> {
+) -> Option<Vec<(String, fastn_js::SetPropertyValue, bool)>> {
     use itertools::Itertools;
 
     // Attempt to retrieve component or web component arguments
@@ -280,6 +280,7 @@ pub(crate) fn get_set_property_values_for_provided_component_properties(
                                 has_rive_components,
                                 false,
                             ),
+                            v.mutable,
                         )
                     })
                 })
diff --git a/ftd/t/js/65-counter.ftd b/ftd/t/js/65-counter.ftd
new file mode 100644
index 0000000000..ee61fac90e
--- /dev/null
+++ b/ftd/t/js/65-counter.ftd
@@ -0,0 +1,26 @@
+-- counter:
+$count: 10
+
+/-- counter: 10
+
+-- component counter:
+caption integer $count: 20
+
+-- ftd.row:
+border-width.px: 2
+padding.px: 20
+spacing.fixed.px: 20
+background.solid if { counter.count % 2 == 0 }: yellow
+border-radius.px: 5
+
+-- ftd.text: ➕
+$on-click$: $ftd.increment-by($a=$counter.count, v=1)
+
+-- ftd.integer: $counter.count
+
+-- ftd.text: ➖
+$on-click$: $ftd.increment-by($a=$counter.count, v=-1)
+
+-- end: ftd.row
+
+-- end: counter
diff --git a/ftd/t/js/65-counter.html b/ftd/t/js/65-counter.html
new file mode 100644
index 0000000000..bca154d7c2
--- /dev/null
+++ b/ftd/t/js/65-counter.html
@@ -0,0 +1,153 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    
+    <meta content="fastn" name="generator">
+    
+    
+    <script>
+        let __fastn_package_name__ = "foo";
+    </script>
+
+    <script src="fastn-js.js"></script>
+
+    <style>
+       
+    </style>
+</head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3" class="ft_row __p-3 __bw-4 __br-5 __bgc-6 __g-7"><div data-id="4" class="__cur-8">➕</div><div data-id="5">10</div><div data-id="6" class="__cur-9">➖</div></div><div data-id="7" class="ft_row __p-10 __bw-11 __br-12 __bgc-13 __g-14"><div data-id="8" class="__cur-15">➕</div><div data-id="9">10</div><div data-id="10" class="__cur-16">➖</div></div></div></body><style id="styles">
+    .__w-1 { width: 100%; }
+	.__h-2 { height: 100%; }
+	.__p-3 { padding: 20px; }
+	.__bw-4 { border-width: 2px; }
+	.__br-5 { border-radius: 5px; }
+	.__bgc-6 { background-color: yellow; }
+	.__g-7 { gap: 20px; }
+	.__cur-8 { cursor: pointer; }
+	.__cur-9 { cursor: pointer; }
+	.__p-10 { padding: 20px; }
+	.__bw-11 { border-width: 2px; }
+	.__br-12 { border-radius: 5px; }
+	.__bgc-13 { background-color: yellow; }
+	.__g-14 { gap: 20px; }
+	.__cur-15 { cursor: pointer; }
+	.__cur-16 { cursor: pointer; }
+    </style>
+<script>
+    (function() {
+        let global = {
+};
+let main = function (parent) {
+  let __fastn_super_package_name__ = __fastn_package_name__;
+  __fastn_package_name__ = "foo";
+  try {
+    let parenti0 = foo__counter(parent, inherited, {
+      count: 10
+    });
+    let parenti1 = foo__counter(parent, inherited, {
+      count: 10
+    });
+  } finally {
+    __fastn_package_name__ = __fastn_super_package_name__;
+  }
+}
+global["main"] = main;
+let foo__counter = function (parent, inherited, args) {
+  let __fastn_super_package_name__ = __fastn_package_name__;
+  __fastn_package_name__ = "foo";
+  try {
+    let __args__ = {
+      count: fastn.mutable(10),
+    };
+    inherited = fastn_utils.getInheritedValues(__args__, inherited, args);
+    __args__ = fastn_utils.getArgs(__args__, args);
+    let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Row);
+    parenti0.setProperty(fastn_dom.PropertyKind.Padding, fastn_dom.Length.Px(20), inherited);
+    parenti0.setProperty(fastn_dom.PropertyKind.BorderWidth, fastn_dom.Length.Px(2), inherited);
+    parenti0.setProperty(fastn_dom.PropertyKind.BorderRadius, fastn_dom.Length.Px(5), inherited);
+    parenti0.setProperty(fastn_dom.PropertyKind.Background, fastn.formula([__args__.count], function () {
+      if (function () {
+        return (fastn_utils.getter(__args__.count) % 2 == 0);
+      }()) {
+        return fastn_dom.BackgroundStyle.Solid(fastn.recordInstance({
+          dark: "yellow",
+          light: "yellow"
+        }));
+      }
+    }
+    ), inherited);
+    parenti0.setProperty(fastn_dom.PropertyKind.Spacing, fastn_dom.Spacing.Fixed(fastn_dom.Length.Px(20)), inherited);
+    parenti0.setProperty(fastn_dom.PropertyKind.Children, fastn.mutableList([function (root, inherited) {
+      let rooti0 = fastn_dom.createKernel(root, fastn_dom.ElementKind.Text);
+      rooti0.setProperty(fastn_dom.PropertyKind.StringValue, "➕", inherited);
+      rooti0.addEventHandler(fastn_dom.Event.Click, function () {
+        ftd.increment_by({
+          a: __args__.count,
+          v: 1,
+        }, rooti0);
+      });
+    },
+    function (root, inherited) {
+      let rooti0 = fastn_dom.createKernel(root, fastn_dom.ElementKind.Integer);
+      rooti0.setProperty(fastn_dom.PropertyKind.IntegerValue, __args__.count, inherited);
+    },
+    function (root, inherited) {
+      let rooti0 = fastn_dom.createKernel(root, fastn_dom.ElementKind.Text);
+      rooti0.setProperty(fastn_dom.PropertyKind.StringValue, "➖", inherited);
+      rooti0.addEventHandler(fastn_dom.Event.Click, function () {
+        ftd.increment_by({
+          a: __args__.count,
+          v: - 1,
+        }, rooti0);
+      });
+    }
+    ]), inherited);
+    return parenti0;
+  } finally {
+    __fastn_package_name__ = __fastn_super_package_name__;
+  }
+}
+global["foo__counter"] = foo__counter;
+fastn_dom.codeData.availableThemes["coldark-theme.dark"] = "../../theme_css/coldark-theme.dark.css";
+fastn_dom.codeData.availableThemes["coldark-theme.light"] = "../../theme_css/coldark-theme.light.css";
+fastn_dom.codeData.availableThemes["coy-theme"] = "../../theme_css/coy-theme.css";
+fastn_dom.codeData.availableThemes["dracula-theme"] = "../../theme_css/dracula-theme.css";
+fastn_dom.codeData.availableThemes["duotone-theme.dark"] = "../../theme_css/duotone-theme.dark.css";
+fastn_dom.codeData.availableThemes["duotone-theme.earth"] = "../../theme_css/duotone-theme.earth.css";
+fastn_dom.codeData.availableThemes["duotone-theme.forest"] = "../../theme_css/duotone-theme.forest.css";
+fastn_dom.codeData.availableThemes["duotone-theme.light"] = "../../theme_css/duotone-theme.light.css";
+fastn_dom.codeData.availableThemes["duotone-theme.sea"] = "../../theme_css/duotone-theme.sea.css";
+fastn_dom.codeData.availableThemes["duotone-theme.space"] = "../../theme_css/duotone-theme.space.css";
+fastn_dom.codeData.availableThemes["fastn-theme.dark"] = "../../theme_css/fastn-theme.dark.css";
+fastn_dom.codeData.availableThemes["fastn-theme.light"] = "../../theme_css/fastn-theme.light.css";
+fastn_dom.codeData.availableThemes["fire.light"] = "../../theme_css/fire.light.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.dark"] = "../../theme_css/gruvbox-theme.dark.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.light"] = "../../theme_css/gruvbox-theme.light.css";
+fastn_dom.codeData.availableThemes["laserwave-theme"] = "../../theme_css/laserwave-theme.css";
+fastn_dom.codeData.availableThemes["material-theme.dark"] = "../../theme_css/material-theme.dark.css";
+fastn_dom.codeData.availableThemes["material-theme.light"] = "../../theme_css/material-theme.light.css";
+fastn_dom.codeData.availableThemes["nightowl-theme"] = "../../theme_css/nightowl-theme.css";
+fastn_dom.codeData.availableThemes["one-theme.dark"] = "../../theme_css/one-theme.dark.css";
+fastn_dom.codeData.availableThemes["one-theme.light"] = "../../theme_css/one-theme.light.css";
+fastn_dom.codeData.availableThemes["vs-theme.dark"] = "../../theme_css/vs-theme.dark.css";
+fastn_dom.codeData.availableThemes["vs-theme.light"] = "../../theme_css/vs-theme.light.css";
+fastn_dom.codeData.availableThemes["ztouch-theme"] = "../../theme_css/ztouch-theme.css";
+
+        let main_wrapper = function (parent) {
+            let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Column);
+            parenti0.setProperty(fastn_dom.PropertyKind.Width, fastn_dom.Resizing.FillContainer, inherited);
+            parenti0.setProperty(fastn_dom.PropertyKind.Height, fastn_dom.Resizing.FillContainer, inherited);
+            main(parenti0);
+        }
+        fastn_virtual.hydrate(main_wrapper);
+        ftd.post_init();
+    })();
+
+    window.onload = function() {
+        fastn_utils.resetFullHeight();
+        fastn_utils.setFullHeight();
+    };
+
+</script>
+</html>