Allow using Intl in bindings

packages/toolpad-core/src/jsBrowserRuntime.tsx

@@ -20,7 +20,7 @@ function createBrowserRuntime(): JsRuntime {
       (() => {
         // See https://tc39.es/ecma262/multipage/global-object.html#sec-global-object
         const ecmaGlobals = new Set([ 'globalThis', 'Infinity', 'NaN', 'undefined', 'eval', 'isFinite', 'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent', 'encodeURI', 'encodeURIComponent', 'AggregateError', 'Array', 'ArrayBuffer', 'BigInt', 'BigInt64Array', 'BigUint64Array', 'Boolean', 'DataView', 'Date', 'Error', 'EvalError', 'FinalizationRegistry', 'Float32Array', 'Float64Array', 'Function', 'Int8Array', 'Int16Array', 'Int32Array', 'Map', 'Number', 'Object', 'Promise', 'Proxy', 'RangeError', 'ReferenceError', 'RegExp', 'Set', 'SharedArrayBuffer', 'String', 'Symbol', 'SyntaxError', 'TypeError', 'Uint8Array', 'Uint8ClampedArray', 'Uint16Array', 'Uint32Array', 'URIError', 'WeakMap', 'WeakRef', 'WeakSet', 'Atomics', 'JSON', 'Math', 'Reflect' ]);
-        const allowedDomGlobals = new Set([ 'setTimeout', 'console', 'URL', 'URLSearchParams' ])
+        const allowedDomGlobals = new Set([ 'setTimeout', 'console', 'URL', 'URLSearchParams', 'Intl' ])
 
         // NOTE: This is by no means intended to be a secure way to hide DOM globals 
         const globalThis = new Proxy(window.__SCOPE, {

test/integration/bindings/fixture/toolpad/pages/bindings/page.yml

@@ -4,22 +4,22 @@ spec:
   id: 741rda6
   title: Page 1
   content:
-    - component: PageRow
-      name: pageRow
-      children:
-        - component: Text
-          name: text
-          props:
-            value: -test1-
-            sx:
-              $$jsExpression: |
-                { color: "primary.main", p: 2 }
-    - component: PageRow
-      name: pageRow1
-      children:
-        - component: Text
-          name: text1
-          props:
-            sx:
-              $$jsExpression: "{"
-            value: -test2-
+    - component: Text
+      name: text
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value: -test1-
+        sx:
+          $$jsExpression: |
+            { color: "primary.main", p: 2 }
+    - component: Text
+      name: text1
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        sx:
+          $$jsExpression: "{"
+        value: -test2-

test/integration/bindings/fixture/toolpad/pages/encoding/page.yml

@@ -14,7 +14,9 @@ spec:
             value:
               $$jsExpression: |
                 `Can pass utf-8: "€"`
+          children: []
         - component: Text
-          name: text
+          name: text1
           props:
             value: 'Can pass double dollars: "$$"'
+          children: []

test/integration/bindings/fixture/toolpad/pages/globalScope/page.yml

@@ -5,66 +5,75 @@ spec:
   title: globalScope
   display: shell
   content:
-    - component: PageRow
-      name: pageRow5
-      children:
-        - component: Text
-          name: text5
-          props:
-            variant: h2
-            value: "Bindings: global scope access"
-    - component: PageRow
-      name: pageRow
-      children:
-        - component: Text
-          name: text
-          props:
-            value:
-              $$jsExpression: |
-                `Allows ecmascript globals |test1 ${
-                  typeof Array !== "undefined" ? "ok" : "nok"
-                }|`
-    - component: PageRow
-      name: pageRow1
-      children:
-        - component: Text
-          name: text1
-          props:
-            value:
-              $$jsExpression: |
-                `Disallows DOM globals |test2 ${
-                  typeof document === "undefined" ? "ok" : "nok"
-                }|`
-    - component: PageRow
-      name: pageRow2
-      children:
-        - component: Text
-          name: text2
-          props:
-            value:
-              $$jsExpression: |
-                `Supports globalThis |test3 ${
-                  typeof globalThis !== "undefined" ? "ok" : "nok"
-                }|`
-    - component: PageRow
-      name: pageRow3
-      children:
-        - component: Text
-          name: text3
-          props:
-            value:
-              $$jsExpression: |
-                `Disallows localStorage globals |test4 ${
-                  typeof localStorage === "undefined" ? "ok" : "nok"
-                }|`
-    - component: PageRow
-      name: pageRow4
-      children:
-        - component: Text
-          name: text4
-          props:
-            value:
-              $$jsExpression: |
-                `Disallows globalThis.localStorage |test5 ${
-                  typeof globalThis.localStorage === "undefined" ? "ok" : "nok"
-                }|`
+    - component: Text
+      name: text5
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        variant: h2
+        value: "Bindings: global scope access"
+    - component: Text
+      name: text
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value:
+          $$jsExpression: |
+            `Allows ecmascript globals |test1 ${
+              typeof Array !== "undefined" ? "ok" : "nok"
+            }|`
+    - component: Text
+      name: text1
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value:
+          $$jsExpression: |
+            `Disallows DOM globals |test2 ${
+              typeof document === "undefined" ? "ok" : "nok"
+            }|`
+    - component: Text
+      name: text2
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value:
+          $$jsExpression: |
+            `Supports globalThis |test3 ${
+              typeof globalThis !== "undefined" ? "ok" : "nok"
+            }|`
+    - component: Text
+      name: text3
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value:
+          $$jsExpression: |
+            `Disallows localStorage globals |test4 ${
+              typeof localStorage === "undefined" ? "ok" : "nok"
+            }|`
+    - component: Text
+      name: text4
+      children: []
+      layout:
+        columnSize: 1
+      props:
+        value:
+          $$jsExpression: |
+            `Disallows globalThis.localStorage |test5 ${
+              typeof globalThis.localStorage === "undefined" ? "ok" : "nok"
+            }|`
+    - component: Text
+      name: text6
+      children: []
+      props:
+        value:
+          $$jsExpression: |
+            `Allows Intl |test6 ${
+              typeof Intl?.NumberFormat !== "undefined" ? "ok" : "nok"
+            }|`

test/integration/bindings/index.spec.ts

@@ -40,6 +40,7 @@ test('global scope', async ({ page }) => {
   await expect(page.getByText('|test3 ok|')).toBeVisible();
   await expect(page.getByText('|test4 ok|')).toBeVisible();
   await expect(page.getByText('|test5 ok|')).toBeVisible();
+  await expect(page.getByText('|test6 ok|')).toBeVisible();
 });
 
 test('encoding', async ({ page }) => {