Fix binding to objects with more than one property

packages/toolpad-app/src/runtime/evalJsBindings.ts

@@ -1,5 +1,5 @@
+import { evalExpression } from '@mui/toolpad-core/jsRuntime';
 import { set } from 'lodash-es';
-import evalExpression from '../utils/evalExpression';
 import { mapValues } from '../utils/collections';
 import { errorFrom } from '../utils/errors';
 

packages/toolpad-app/src/toolpadDataSources/rest/runtime.tsx

@@ -1,8 +1,8 @@
 import type { Entry } from 'har-format';
+import { evalExpression } from '@mui/toolpad-core/jsRuntime';
 import { ExecFetchFn, RuntimeDataSource } from '../../types';
 import { FetchQuery, FetchResult } from './types';
 import { execfetch } from './shared';
-import evalExpression from '../../utils/evalExpression';
 import { createHarLog } from '../../utils/har';
 
 export async function clientExec(

packages/toolpad-core/src/jsRuntime.tsx

@@ -42,7 +42,7 @@ export function useJsRuntime(): QuickJSRuntime {
 }
 
 let iframe: HTMLIFrameElement;
-function evalCode(code: string, globalScope: Record<string, unknown>) {
+export function evalExpression(code: string, globalScope: Record<string, unknown>) {
   if (!iframe) {
     iframe = document.createElement('iframe');
     iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts');
@@ -52,7 +52,15 @@ function evalCode(code: string, globalScope: Record<string, unknown>) {
 
   // eslint-disable-next-line no-underscore-dangle
   (iframe.contentWindow as any).__SCOPE = globalScope;
-  return (iframe.contentWindow as any).eval(`with (window.__SCOPE) { ${code} }`);
+  (iframe.contentWindow as any).console = window.console;
+
+  return (iframe.contentWindow as any).eval(`
+    (() => {
+      with (window.__SCOPE) { 
+        return (${code})
+      }
+    })()
+  `);
 }
 
 export function evaluateBindable<V>(
@@ -63,7 +71,7 @@ export function evaluateBindable<V>(
 ): LiveBinding {
   const execExpression = () => {
     if (bindable?.type === 'jsExpression') {
-      return evalCode(bindable?.value, globalScope);
+      return evalExpression(bindable?.value, globalScope);
     }
 
     if (bindable?.type === 'const') {

test/integration/bindings/dom.json

@@ -0,0 +1,111 @@
+{
+  "root": "740rd3w",
+  "nodes": {
+    "740rd3w": {
+      "id": "740rd3w",
+      "name": "Application",
+      "type": "app",
+      "parentId": null,
+      "attributes": {},
+      "parentProp": null,
+      "parentIndex": null
+    },
+    "741rda6": {
+      "id": "741rda6",
+      "name": "bindings",
+      "type": "page",
+      "parentId": "740rd3w",
+      "attributes": {
+        "title": {
+          "type": "const",
+          "value": "Page 1"
+        }
+      },
+      "parentProp": "pages",
+      "parentIndex": "a0"
+    },
+    "7t730ct": {
+      "id": "7t730ct",
+      "name": "pageRow1",
+      "type": "element",
+      "props": {},
+      "layout": {},
+      "parentId": "741rda6",
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageRow"
+        }
+      },
+      "parentProp": "children",
+      "parentIndex": "a1"
+    },
+    "vx530kf": {
+      "id": "vx530kf",
+      "name": "text1",
+      "type": "element",
+      "props": {
+        "sx": {
+          "type": "jsExpression",
+          "value": "{"
+        },
+        "value": {
+          "type": "const",
+          "value": "-test2-"
+        }
+      },
+      "layout": {},
+      "parentId": "7t730ct",
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "Text"
+        }
+      },
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "b7a3074": {
+      "name": "pageRow",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageRow"
+        }
+      },
+      "layout": {},
+      "id": "b7a3074",
+      "type": "element",
+      "parentId": "741rda6",
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "n9830o2": {
+      "name": "text",
+      "props": {
+        "value": {
+          "type": "const",
+          "value": "-test1-"
+        },
+        "sx": {
+          "type": "jsExpression",
+          "value": "{ color: \"primary.main\", p: 2 }\n"
+        }
+      },
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "Text"
+        }
+      },
+      "layout": {},
+      "id": "n9830o2",
+      "type": "element",
+      "parentId": "b7a3074",
+      "parentProp": "children",
+      "parentIndex": "a0"
+    }
+  },
+  "version": 5
+}

test/integration/bindings/index.spec.ts

@@ -0,0 +1,33 @@
+import * as path from 'path';
+import { ToolpadRuntime } from '../../models/ToolpadRuntime';
+import { expect, test } from '../../playwright/test';
+import { readJsonFile } from '../../utils/fs';
+import generateId from '../../utils/generateId';
+
+test.use({
+  ignoreConsoleErrors: [
+    // Chrome
+    /Unexpected token '\)'/,
+    // Firefox
+    /expected property name, got '\)'/,
+  ],
+});
+
+test('bindings', async ({ page, api }) => {
+  const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));
+
+  const app = await api.mutation.createApp(`App ${generateId()}`, {
+    from: { kind: 'dom', dom },
+  });
+
+  const runtimeModel = new ToolpadRuntime(page);
+  await runtimeModel.gotoPage(app.id, 'bindings');
+
+  const test1 = page.getByText('-test1-');
+  await expect(test1).toBeVisible();
+  const color = await test1.evaluate((elm) =>
+    window.getComputedStyle(elm).getPropertyValue('color'),
+  );
+  expect(color).toBe('rgb(25, 118, 210)');
+  await expect(page.getByText('-test2-')).toBeVisible();
+});