Support widget setters as they are in flutter framework

.changeset/eleven-chicken-press.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-kitchen-sink": patch
+---
+
+Support widget setters for flutter compatibility

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -25,11 +25,18 @@ View:
       children:
         - Icon:
         - Text:
+            id: formHeading
             styles:
               names: heading-3
             text: Forms
         - Markdown:
             text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).
+        - Button:
+            label: set me
+            onTap:
+              executeCode: |
+                formHeading.text = 'i am set'
+                iconText.text = 'i am set too'
         - Card:
             styles:
               maxWidth: unset
@@ -144,7 +151,7 @@ View:
         - Text:
             styles:
               names: heading-3
-            text: Forms with initial values
+            text: ${formHeading.text + ' with initial values'}
         - Markdown:
             text: More to come! In the meantime, checkout the Ensemble [documentation](https://docs.ensembleui.com/).
         - Card:
@@ -261,4 +268,5 @@ API:
 Icon:
   body:
     Text:
+      id: iconText
       text: Hello123

packages/framework/src/evaluate/evaluate.ts

@@ -26,16 +26,49 @@ export const buildEvaluateFn = (
   const globalBlock = screen.model?.global;
   const importedScriptBlock = screen.model?.importedScripts;
 
+  const modifiedJs = modifyJs(Object.fromEntries([...widgets]), js);
+
   // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
   const jsFunc = new Function(
     ...Object.keys(invokableObj),
-    addScriptBlock(formatJs(js), globalBlock, importedScriptBlock),
+    addScriptBlock(formatJs(modifiedJs), globalBlock, importedScriptBlock),
   );
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return () => jsFunc(...Object.values(invokableObj));
 };
 
+const modifyJs = (
+  invokables: { [key: string]: InvokableMethods | undefined },
+  js?: string,
+): string => {
+  if (!js || isEmpty(js)) {
+    return js || "";
+  }
+
+  // check if the code is assigning a value to a property
+  // eslint-disable-next-line prefer-named-capture-group
+  const assignmentRegex = /(\w+)\.(\w+)\s*=\s*(.*)$/gm; // matches widgetId.setter = value
+  let modifiedCode = js;
+
+  let match;
+  while ((match = assignmentRegex.exec(js))) {
+    const [fullMatch, widgetId, setter, value] = match;
+    const setterName = `set${setter.charAt(0).toUpperCase() + setter.slice(1)}`;
+    const originalSetter = invokables[widgetId]?.[setterName];
+
+    if (originalSetter) {
+      // if a setter function exists, replace the assignment with a function call
+      modifiedCode = modifiedCode.replace(
+        fullMatch,
+        `${widgetId}.${setterName}(${value});`,
+      );
+    }
+  }
+
+  return modifiedCode;
+};
+
 const formatJs = (js?: string): string => {
   if (!js || isEmpty(js)) {
     if (process.env.NODE_ENV === "debug") {