fix: added support for await in executeCode (#1053)

added support for await in executeCode action

Author: sagardspeed2

.changeset/honest-gorillas-care.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added support for await in executeCode

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

@@ -224,7 +224,7 @@ API:
 
   UPLOADFILE:
     method: POST
-    uri: https://example.com
+    uri: https://example.com/
 
 Global: |
   function verifyFileExtension(fileName) {

packages/framework/src/evaluate/evaluate.ts

@@ -70,11 +70,27 @@ const formatJs = (js?: string): string => {
 
   // multiline js
   if (sanitizedJs.includes("\n")) {
+    if (sanitizedJs.includes("await ")) {
+      return `
+        return (async function() {
+          ${sanitizedJs}
+        }())
+      `;
+    }
+
+    return `
+        return (function() {
+          ${sanitizedJs}
+        }())
+      `;
+  }
+
+  if (sanitizedJs.includes("await ")) {
     return `
-      return (function() {
-         ${sanitizedJs}
-      }())
-    `;
+        return (async function() {
+          return ${sanitizedJs}
+        }())
+      `;
   }
 
   return `return ${sanitizedJs}`;

packages/runtime/src/runtime/hooks/__tests__/useEnsembleAction.test.tsx

@@ -59,16 +59,17 @@ describe("Test cases for useEnsembleAction Hook", () => {
     expect(result.current).toBeUndefined();
   });
 
-  it("should return useExecuteCode when action is a string", () => {
+  it("should return useExecuteCode when action is a string", async () => {
     const { result } = renderHook(() => useEnsembleAction("myWidget.value"), {
       wrapper,
     });
 
     let execResult;
 
-    act(() => {
-      execResult = result.current?.callback();
+    await act(async () => {
+      execResult = await result.current?.callback();
     });
+
     expect(execResult).toBe(2);
   });
 });

packages/runtime/src/runtime/hooks/__tests__/useExecuteCode.test.tsx

@@ -47,19 +47,19 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   </ScreenContextProvider>
 );
 
-test("populates screen invokables in function context", () => {
+test("populates screen invokables in function context", async () => {
   const { result } = renderHook(() => useExecuteCode("myWidget.value"), {
     wrapper,
   });
 
   let execResult;
-  act(() => {
-    execResult = result.current?.callback();
+  await act(async () => {
+    execResult = await result.current?.callback();
   });
   expect(execResult).toBe(2);
 });
 
-test("populates context passed in", () => {
+test("populates context passed in", async () => {
   const { result } = renderHook(
     () =>
       useExecuteCode("specialScope.value", {
@@ -69,25 +69,25 @@ test("populates context passed in", () => {
   );
 
   let execResult;
-  act(() => {
-    execResult = result.current?.callback();
+  await act(async () => {
+    execResult = await result.current?.callback();
   });
   expect(execResult).toBe(4);
 });
 
-test("can be invoked multiple times", () => {
+test("can be invoked multiple times", async () => {
   const { result } = renderHook(() => useExecuteCode("myWidget.value"), {
     wrapper,
   });
 
   let execResult;
-  act(() => {
-    execResult = result.current?.callback();
+  await act(async () => {
+    execResult = await result.current?.callback();
   });
   expect(execResult).toBe(2);
   let execResult2;
-  act(() => {
-    execResult2 = result.current?.callback();
+  await act(async () => {
+    execResult2 = await result.current?.callback();
   });
   expect(execResult2).toBe(2);
 });
@@ -101,7 +101,8 @@ test("call ensemble.invokeAPI", async () => {
   const { result } = renderHook(
     () =>
       useExecuteCode(
-        "ensemble.invokeAPI('getDummyProductsByPaginate', apiConfig).then((res) => res.body.products.length)",
+        `const res = await ensemble.invokeAPI('getDummyProductsByPaginate', apiConfig);
+        return res.body.limit`,
         { context: { apiConfig } },
       ),
     {
@@ -146,7 +147,7 @@ test("call ensemble.invokeAPI with bypassCache", async () => {
 
   expect(withoutForceInitialResult).toBe(withoutForceResult);
   expect(withForceResult).not.toBe(withoutForceResult);
-});
+}, 10000);
 
 test.todo("populates application invokables");
 

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -130,14 +130,16 @@ export const useExecuteCode: EnsembleActionHook<
   }, [action, isCodeString, appContext?.application?.scripts]);
 
   const execute = useCommandCallback(
-    (evalContext, ...args: unknown[]) => {
+    async (evalContext, ...args: unknown[]) => {
       if (!js) {
         return;
       }
       const context = merge({}, evalContext, ...args, options?.context) as {
         [key: string]: unknown;
       };
-      const retVal = evaluate({ model: screenModel }, js, context);
+
+      const retVal = await evaluate({ model: screenModel }, js, context);
+
       onCompleteAction?.callback({
         ...(args[0] as { [key: string]: unknown }),
         result: retVal,

packages/runtime/src/widgets/__tests__/Button.test.tsx

@@ -6,6 +6,7 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { BrowserRouter } from "react-router-dom";
 import { useRegisterBindings } from "@ensembleui/react-framework";
+import { ToastContainer } from "react-toastify";
 import { Button, type ButtonProps } from "../Button";
 import { createCustomWidget } from "../../runtime/customWidget";
 import { Column } from "../Column";
@@ -633,4 +634,97 @@ test("should update the action on bindings changes and track renders", async ()
     expect(mockOpen).toHaveBeenCalledWith("http://youtube.com", "_self");
   });
 });
+
+describe("check for pass result of executeCode into nested actions", () => {
+  test("should pass result of executeCode into nested action", async () => {
+    render(
+      <>
+        <ToastContainer />
+        <Button
+          id="checkLoader"
+          label="Set Storage"
+          onTap={{
+            executeCode:
+              "ensemble.storage.set('toast_message', 'This is toast')",
+          }}
+        />
+        <Button
+          label="Check Toast"
+          onTap={{
+            executeCode: {
+              body: "ensemble.storage.get('toast_message')",
+              onComplete: {
+                showToast: {
+                  message: `\${result}`,
+                  options: {
+                    position: "topRight",
+                    type: "success",
+                  },
+                },
+              },
+            },
+          }}
+        />
+      </>,
+      { wrapper: BrowserRouter },
+    );
+
+    const setStorageBtn = screen.getByText("Set Storage");
+    fireEvent.click(setStorageBtn);
+
+    const checkToastBtn = screen.getByText("Check Toast");
+    userEvent.click(checkToastBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText("This is toast")).toBeInTheDocument();
+    });
+  });
+
+  test("should pass result of async/await executeCode into nested action", async () => {
+    render(
+      <>
+        <ToastContainer />
+        <Button
+          id="checkLoader"
+          label="Set Storage"
+          onTap={{
+            executeCode:
+              "ensemble.storage.set('toast_message', 'This is async toast')",
+          }}
+        />
+        <Button
+          label="Check Toast"
+          onTap={{
+            executeCode: {
+              body: "await new Promise((resolve) => setTimeout(() => resolve(ensemble.storage.get('toast_message')), 1000))",
+              onComplete: {
+                showToast: {
+                  message: `\${result}`,
+                  options: {
+                    position: "topRight",
+                    type: "success",
+                  },
+                },
+              },
+            },
+          }}
+        />
+      </>,
+      { wrapper: BrowserRouter },
+    );
+
+    const setStorageBtn = screen.getByText("Set Storage");
+    fireEvent.click(setStorageBtn);
+
+    const checkToastBtn = screen.getByText("Check Toast");
+    userEvent.click(checkToastBtn);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText("This is async toast")).toBeInTheDocument();
+      },
+      { timeout: 2000 },
+    );
+  });
+});
 /* eslint-enable react/no-children-prop */