[840] Support directly writing code without executeCode action. (#853)

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

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

@@ -15,8 +15,7 @@ View:
  inputs:
  skip: 0
  limit: 17
- onResponse:
- executeCode: |
+ onResponse: |
  const res = response.body.products;
  ensemble.storage.set("dummyProducts", res);
 
@@ -405,8 +404,7 @@ View:
  inputs:
  skip: ${ensemble.storage.get('skip') * (page - 1)}
  limit: ${pageSize}
- onResponse:
- executeCode: |
+ onResponse: |
  const prevItem = ensemble.storage.get("dummyProducts")
  const res = response.body.products;
  ensemble.storage.set("dummyProducts", [...res])
@@ -493,8 +491,7 @@ View:
  onTap:
  invokeAPI:
  name: getDummyNumbers
- onResponse:
- executeCode: |
+ onResponse: |
  ensemble.storage.set('dummyNumbers', response.body)
  - Text:
  styles:
@@ -516,8 +513,7 @@ View:
  onScrollEnd:
  invokeAPI:
  name: getDummyNumbers
- onResponse:
- executeCode: |
+ onResponse: |
  ensemble.storage.set('dummyNumbers', [...ensemble.storage.get('dummyNumbers'), ...response.body])
  item-template:
  data: ${ensemble.storage.get('dummyNumbers')}
@@ -1228,8 +1224,7 @@ View:
  onTap:
  invokeApi:
  name: "getDummyProducts"
- onResponse:
- executeCode: |
+ onResponse: |
  ensemble.storage.set('dynamicDropdownOptions', response.body.products)
  - Dropdown:
  label: With the label widget
@@ -1339,6 +1334,5 @@ API:
  getDummyNumbers:
  method: GET
  uri: https://661e111b98427bbbef034208.mockapi.io/number?limit=10
- onResponse:
- executeCode: |
+ onResponse: |
  console.log('dummy number fetched')

packages/framework/src/shared/actions.ts

@@ -186,6 +186,7 @@ export interface DispatchEventAction {
  * @uiType action
  */
 export type EnsembleAction =
+ | string
  | {
  executeCode?: ExecuteCodeAction;
  }

packages/runtime/package.json

@@ -8,7 +8,7 @@
  ],
  "repository": "https://github.com/EnsembleUI/ensemble-react",
  "scripts": {
- "dev": "tsup src/index.tsx --format cjs --watch --dts --external react",
+ "dev": "tsup src/index.tsx --format cjs --watch --dts --external react --sourcemap",
  "build": "tsup src/index.tsx --format cjs --dts --external react",
  "test": "jest --runInBand",
  "lint": "eslint ."

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

@@ -0,0 +1,63 @@
+/* eslint import/first: 0 */
+import { act, renderHook } from "@testing-library/react";
+import { ScreenContextProvider } from "@ensembleui/react-framework";
+import { useEnsembleAction } from "../useEnsembleAction";
+
+jest.mock("react-markdown", jest.fn());
+jest.mock("react-router-dom");
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+ <ScreenContextProvider
+ context={{
+ widgets: {
+ myWidget: {
+ values: {
+ value: 2,
+ },
+ invokable: {
+ id: "myWidget",
+ },
+ },
+ },
+ data: {},
+ storage: {},
+ }}
+ screen={{
+ id: "test",
+ name: "test",
+ body: { name: "Widget", properties: {} },
+ apis: [
+ {
+ name: "getDummyProductsByPaginate",
+ method: "GET",
+ // eslint-disable-next-line no-template-curly-in-string
+ uri: "https://dummyjson.com/products?skip=${skip}&limit=${limit}",
+ inputs: ["skip", "limit"],
+ },
+ ],
+ }}
+ >
+ {children}
+ </ScreenContextProvider>
+);
+
+describe("Test cases for useEnsembleAction Hook", () => {
+ it("should return undefined when no action is provided", () => {
+ const { result } = renderHook(() => useEnsembleAction(undefined));
+
+ expect(result.current).toBeUndefined();
+ });
+
+ it("should return useExecuteCode when action is a string", () => {
+ const { result } = renderHook(() => useEnsembleAction("myWidget.value"), {
+ wrapper,
+ });
+
+ let execResult;
+
+ act(() => {
+ execResult = result.current?.callback();
+ });
+ expect(execResult).toBe(2);
+ });
+});