Update snaps-simulator

packages/snaps-simulator/jest.config.js

@@ -8,9 +8,9 @@ module.exports = deepmerge(baseConfig, {
   coverageThreshold: {
     global: {
       branches: 54.33,
-      functions: 60.59,
-      lines: 80.49,
-      statements: 80.83,
+      functions: 60.43,
+      lines: 80.38,
+      statements: 80.73,
     },
   },
   setupFiles: ['./jest.setup.js'],

packages/snaps-simulator/package.json

@@ -34,11 +34,11 @@
     "since-latest-release": "../../scripts/since-latest-release.sh",
     "start": "webpack serve --config-name main --mode development",
     "start:e2e": "webpack serve --config-name test --mode development",
-    "test": "node --experimental-vm-modules $(yarn bin jest) --reporters=jest-silent-reporter",
-    "test:clean": "node --experimental-vm-modules $(yarn bin jest) --clearCache",
+    "test": "jest --reporters=jest-silent-reporter",
+    "test:clean": "jest --clearCache",
     "test:post": "jest-it-up",
-    "test:verbose": "node --experimental-vm-modules $(yarn bin jest) --verbose",
-    "test:watch": "node --experimental-vm-modules $(yarn bin jest) --watch"
+    "test:verbose": "jest --verbose",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",

packages/snaps-simulator/src/features/builder/Builder.tsx

@@ -8,9 +8,10 @@ import {
   Tabs,
 } from '@chakra-ui/react';
 import { Box, type JSXElement } from '@metamask/snaps-sdk/jsx';
+import { logError } from '@metamask/snaps-utils';
 import type { NodeModel } from '@minoru/react-dnd-treeview';
 import type { FunctionComponent } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Editor } from '../../components';
 import { TemplateComponentList, NodeTree, NodeRenderer } from './components';
@@ -28,6 +29,12 @@ export const Builder: FunctionComponent = () => {
     },
   ]);
 
+  const [code, setCode] = useState<string>('');
+
+  useEffect(() => {
+    boxToCode(nodeModelsToComponent(items)).then(setCode).catch(logError);
+  }, [items]);
+
   const incrementId = () => {
     setId((state) => state + 1);
   };
@@ -103,7 +110,7 @@ export const Builder: FunctionComponent = () => {
               >
                 <Editor
                   border="none"
-                  value={boxToCode(nodeModelsToComponent(items))}
+                  value={code}
                   language="typescript"
                   options={{
                     readOnly: true,

packages/snaps-simulator/src/features/builder/utils.test.ts

@@ -197,7 +197,7 @@ describe('nodeModelsToComponent', () => {
 });
 
 describe('boxToCode', () => {
-  it('creates code from a component', () => {
+  it('creates code from a component', async () => {
     const component = Box({
       children: [
         Text({ children: 'foo' }),
@@ -207,7 +207,7 @@ describe('boxToCode', () => {
       ],
     });
 
-    const code = boxToCode(component);
+    const code = await boxToCode(component);
     expect(code).toMatchInlineSnapshot(`
       "import { Box, Text } from '@metamask/snaps-sdk/jsx';
 
@@ -224,7 +224,7 @@ describe('boxToCode', () => {
     `);
   });
 
-  it('creates code from a component with a form', () => {
+  it('creates code from a component with a form', async () => {
     const component = Box({
       children: [
         Text({ children: 'foo' }),
@@ -242,7 +242,7 @@ describe('boxToCode', () => {
       ],
     });
 
-    const code = boxToCode(component);
+    const code = await boxToCode(component);
     expect(code).toMatchInlineSnapshot(`
       "import { Box, Button, Field, Form, Input, Text } from '@metamask/snaps-sdk/jsx';
 

packages/snaps-simulator/src/features/builder/utils.ts

@@ -16,8 +16,9 @@ import {
 import { is } from '@metamask/superstruct';
 import { assert, hasProperty } from '@metamask/utils';
 import type { NodeModel } from '@minoru/react-dnd-treeview';
-import typescript from 'prettier/parser-typescript';
-import prettier from 'prettier/standalone';
+import * as estree from 'prettier/plugins/estree';
+import * as typescript from 'prettier/plugins/typescript';
+import { format } from 'prettier/standalone';
 
 /**
  * Get the text of a node model.
@@ -184,18 +185,18 @@ function getComponentTypes(component: JSXElement): string[] {
  * @param component - The root panel.
  * @returns The code.
  */
-export function boxToCode(component: BoxElement): string {
+export async function boxToCode(component: BoxElement): Promise<string> {
   const types = getComponentTypes(component).join(', ');
 
-  return prettier.format(
+  return await format(
     `
       import { ${types} } from '@metamask/snaps-sdk/jsx';
 
       const Component = () => (${serialiseJsx(component)});
 `,
     {
       parser: 'typescript',
-      plugins: [typescript],
+      plugins: [estree, typescript],
       printWidth: 80,
       tabWidth: 2,
       singleQuote: true,

yarn.config.cjs

@@ -165,7 +165,10 @@ module.exports = defineConfig({
           getRelativePath(workspace, 'scripts', 'since-latest-release.sh'),
         );
 
-        if (workspace.cwd !== 'packages/examples') {
+        if (
+          workspace.cwd !== 'packages/examples' &&
+          workspace.cwd !== 'packages/snaps-simulator'
+        ) {
           // All non-root packages must have the same "test" script.
           if (workspace.manifest.scripts['test:browser']) {
             expectWorkspaceField(