Bump to jest 29 (#484)

The new version got more readable snapshots, no longer depends jsdom and
has much better esm support (will be enabled in next PR).

Had to switch to babel to support typescript, react and esm for now.

apps/designer/app/designer/features/props-panel/use-props-logic.test.ts

@@ -138,8 +138,8 @@ describe("usePropsLogic", () => {
 
     expect(result.current.userProps.length).toEqual(1);
     expect(result.current.userProps).toMatchInlineSnapshot(`
-      Array [
-        Object {
+      [
+        {
           "id": "1",
           "prop": "tag",
           "required": true,
@@ -178,14 +178,14 @@ describe("usePropsLogic", () => {
     });
 
     expect(result.current.userProps).toMatchInlineSnapshot(`
-      Array [
-        Object {
+      [
+        {
           "id": "1",
           "prop": "tag",
           "required": true,
           "value": "div",
         },
-        Object {
+        {
           "id": "disabled",
           "prop": "disabled2",
           "value": false,
@@ -223,14 +223,14 @@ describe("usePropsLogic", () => {
 
     expect(result.current.userProps.length).toEqual(2);
     expect(result.current.userProps).toMatchInlineSnapshot(`
-      Array [
-        Object {
+      [
+        {
           "id": "1",
           "prop": "tag",
           "required": true,
           "value": "div",
         },
-        Object {
+        {
           "id": "disabled",
           "prop": "disabled",
           "required": true,
@@ -266,14 +266,14 @@ describe("usePropsLogic", () => {
     });
 
     expect(result.current.userProps).toMatchInlineSnapshot(`
-      Array [
-        Object {
+      [
+        {
           "id": "1",
           "prop": "tag",
           "required": true,
           "value": "div",
         },
-        Object {
+        {
           "id": "2",
           "prop": "test",
           "required": true,
@@ -309,14 +309,14 @@ describe("usePropsLogic", () => {
     });
 
     expect(result.current.userProps).toMatchInlineSnapshot(`
-      Array [
-        Object {
+      [
+        {
           "id": "1",
           "prop": "tag",
           "required": true,
           "value": "div",
         },
-        Object {
+        {
           "id": "2",
           "prop": "test",
           "required": true,

apps/designer/app/shared/css-utils/__snapshots__/delete-css-rules-by-breakpoint.test.ts.snap

@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Delete breakpoint basic 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [],
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [],
           "component": "Box",
-          "cssRules": Array [],
+          "cssRules": [],
           "id": "3",
         },
       ],
       "component": "Box",
-      "cssRules": Array [
-        Object {
+      "cssRules": [
+        {
           "breakpoint": "do not delete",
-          "style": Object {},
+          "style": {},
         },
       ],
       "id": "2",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;

apps/designer/app/shared/props-utils/__snapshots__/delete-prop.test.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Delete prop found and deleted 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [
-      Object {
+    "props": [
+      {
         "id": "propId1",
         "prop": "a",
         "value": "1",
@@ -18,17 +18,17 @@ Object {
 `;
 
 exports[`Delete prop not found and not deleted 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [
-      Object {
+    "props": [
+      {
         "id": "propId",
         "prop": "b",
         "value": "1",
       },
-      Object {
+      {
         "id": "propId1",
         "prop": "a",
         "value": "1",

apps/designer/app/shared/props-utils/__snapshots__/update-props.test.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Update props with added prop 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [
-      Object {
+    "props": [
+      {
         "id": "propId",
         "prop": "a",
         "value": "1",
@@ -18,23 +18,23 @@ Object {
 `;
 
 exports[`Update props with empty updates 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [],
+    "props": [],
     "treeId": "treeId",
   },
 }
 `;
 
 exports[`Update props with renamed prop name 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [
-      Object {
+    "props": [
+      {
         "id": "propId",
         "prop": "b",
         "value": "1",
@@ -46,12 +46,12 @@ Object {
 `;
 
 exports[`Update props with updated prop value 1`] = `
-Object {
-  "instanceId": Object {
+{
+  "instanceId": {
     "id": "id",
     "instanceId": "instanceId",
-    "props": Array [
-      Object {
+    "props": [
+      {
         "id": "propId",
         "prop": "a",
         "value": "2",

apps/designer/package.json

@@ -69,7 +69,7 @@
     "zod-form-data": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.2",
     "@remix-run/dev": "^1.6.4",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
@@ -86,7 +86,7 @@
     "@types/css-tree": "^1.0.7",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/hyphenate-style-name": "^1.0.0",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^29.2.3",
     "@types/lodash.capitalize": "^4.2.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.memoize": "^4.1.6",
@@ -105,7 +105,7 @@
     "dotenv": "^16.0.0",
     "esbuild-jest": "^0.5.0",
     "esbuild-node-externals": "^1.4.1",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
     "prettier": "^2.6.2",
     "react-test-renderer": "^17.0.2",
     "relative-deps": "^1.0.7",

packages/design-system/src/components/primitives/dnd/__snapshots__/geometry-utils.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getPlacementInside childrenOrientation={ type: 'horizontal', reverse: false } 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 90,
   "type": "inside-parent",
@@ -11,7 +11,7 @@ Object {
 `;
 
 exports[`getPlacementInside childrenOrientation={ type: 'horizontal', reverse: true } 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 90,
   "type": "inside-parent",
@@ -21,7 +21,7 @@ Object {
 `;
 
 exports[`getPlacementInside childrenOrientation={ type: 'mixed' } 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 90,
   "type": "inside-parent",
@@ -31,7 +31,7 @@ Object {
 `;
 
 exports[`getPlacementInside childrenOrientation={ type: 'vertical', reverse: false } 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 90,
   "type": "inside-parent",
@@ -41,7 +41,7 @@ Object {
 `;
 
 exports[`getPlacementInside childrenOrientation={ type: 'vertical', reverse: true } 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 90,
   "type": "inside-parent",
@@ -51,7 +51,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=backward child almost same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 292,
   "type": "next-to-child",
@@ -61,7 +61,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=backward child bigger than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 310,
   "type": "next-to-child",
@@ -71,7 +71,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=backward child same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 300,
   "type": "next-to-child",
@@ -81,7 +81,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=backward child smaller than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 100,
   "type": "next-to-child",
@@ -91,7 +91,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=forward child almost same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 292,
   "type": "next-to-child",
@@ -101,7 +101,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=forward child bigger than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 310,
   "type": "next-to-child",
@@ -111,7 +111,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=forward child same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 300,
   "type": "next-to-child",
@@ -121,7 +121,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: false } direction=forward child smaller than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 100,
   "type": "next-to-child",
@@ -131,7 +131,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=backward child almost same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 292,
   "type": "next-to-child",
@@ -141,7 +141,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=backward child bigger than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 310,
   "type": "next-to-child",
@@ -151,7 +151,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=backward child same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 300,
   "type": "next-to-child",
@@ -161,7 +161,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=backward child smaller than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 100,
   "type": "next-to-child",
@@ -171,7 +171,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=forward child almost same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 292,
   "type": "next-to-child",
@@ -181,7 +181,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=forward child bigger than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 310,
   "type": "next-to-child",
@@ -191,7 +191,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=forward child same as parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 300,
   "type": "next-to-child",
@@ -201,7 +201,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'horizontal', reverse: true } direction=forward child smaller than parent 1`] = `
-Object {
+{
   "direction": "vertical",
   "length": 100,
   "type": "next-to-child",
@@ -211,7 +211,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=backward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -221,7 +221,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=backward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -231,7 +231,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=backward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -241,7 +241,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=backward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",
@@ -251,7 +251,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=forward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -261,7 +261,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=forward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -271,7 +271,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=forward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -281,7 +281,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'mixed' } direction=forward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",
@@ -291,7 +291,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=backward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -301,7 +301,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=backward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -311,7 +311,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=backward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -321,7 +321,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=backward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",
@@ -331,7 +331,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=forward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -341,7 +341,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=forward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -351,7 +351,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=forward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -361,7 +361,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: false } direction=forward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",
@@ -371,7 +371,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=backward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -381,7 +381,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=backward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -391,7 +391,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=backward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -401,7 +401,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=backward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",
@@ -411,7 +411,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=forward child almost same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 292,
   "type": "next-to-child",
@@ -421,7 +421,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=forward child bigger than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 310,
   "type": "next-to-child",
@@ -431,7 +431,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=forward child same as parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 300,
   "type": "next-to-child",
@@ -441,7 +441,7 @@ Object {
 `;
 
 exports[`getPlacementNextTo childrenOrientation={ type: 'vertical', reverse: true } direction=forward child smaller than parent 1`] = `
-Object {
+{
   "direction": "horizontal",
   "length": 100,
   "type": "next-to-child",

packages/fonts/src/__snapshots__/get-font-faces.test.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getFontFaces() different formats 1`] = `
-Array [
-  Object {
+[
+  {
     "fontDisplay": "swap",
     "fontFamily": "Roboto",
     "fontStyle": "normal",
@@ -13,15 +13,15 @@ Array [
 `;
 
 exports[`getFontFaces() different style 1`] = `
-Array [
-  Object {
+[
+  {
     "fontDisplay": "swap",
     "fontFamily": "Roboto",
     "fontStyle": "normal",
     "fontWeight": 400,
     "src": "url('/fonts/roboto.ttf') format('truetype')",
   },
-  Object {
+  {
     "fontDisplay": "swap",
     "fontFamily": "Roboto",
     "fontStyle": "italic",
@@ -32,15 +32,15 @@ Array [
 `;
 
 exports[`getFontFaces() different weight 1`] = `
-Array [
-  Object {
+[
+  {
     "fontDisplay": "swap",
     "fontFamily": "Roboto",
     "fontStyle": "normal",
     "fontWeight": 400,
     "src": "url('/fonts/roboto.ttf') format('truetype')",
   },
-  Object {
+  {
     "fontDisplay": "swap",
     "fontFamily": "Roboto",
     "fontStyle": "normal",

packages/jest-config/index.js

@@ -6,9 +6,10 @@ module.exports = {
   testMatch: ["<rootDir>/src/**/*.test.ts"],
   transform: {
     "^.+\\.tsx?$": [
-      "esbuild-jest",
+      require.resolve("babel-jest"),
       {
-        sourcemap: true,
+        presets: ["@babel/typescript", "@babel/react"],
+        plugins: ["@babel/transform-modules-commonjs"],
       },
     ],
     "^.+\\.webp$": require.resolve("./file-transform.js"),

packages/jest-config/package.json

@@ -3,11 +3,13 @@
   "version": "1.0.2",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.17.12",
-    "@types/jest": "^27.4.1",
-    "esbuild-jest": "^0.5.0",
-    "jest": "^27.5.1",
-    "typescript": "4.7.4"
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/jest": "^29.2.3",
+    "babel-jest": "^29.3.1",
+    "jest": "^29.3.1"
   },
   "publishConfig": {
     "access": "public"

packages/project/src/shared/tree-utils/__snapshots__/delete-instance.test.ts.snap

@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Delete instance div 1 > div 2 > [div 3] 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;
 
 exports[`Delete instance div 1 > div 2, [div 3] 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;

packages/project/src/shared/tree-utils/__snapshots__/insert-instance.test.ts.snap

@@ -1,90 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Insert instance after a nested div using "end": div 1 > div 2, [div 3] 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "3",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;
 
 exports[`Insert instance after a nested div using index: div 1 > div 2, [div 3] 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "3",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;
 
 exports[`Insert instance before a nested div using index: div 1 > [div 3], div 2 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "3",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;
 
 exports[`Insert instance inside a nested div using "end": div 1 > div 2 > [div 3] 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [],
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [],
           "component": "Box",
-          "cssRules": Array [],
+          "cssRules": [],
           "id": "3",
         },
       ],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;

packages/project/src/shared/tree-utils/__snapshots__/reparent-instance.test.ts.snap

@@ -1,58 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Reparent instance new parent 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [],
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [],
           "component": "Box",
-          "cssRules": Array [],
+          "cssRules": [],
           "id": "4",
         },
       ],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "3",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;
 
 exports[`Reparent instance same parent different position 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [],
+{
+  "children": [
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "3",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "2",
     },
-    Object {
-      "children": Array [],
+    {
+      "children": [],
       "component": "Box",
-      "cssRules": Array [],
+      "cssRules": [],
       "id": "4",
     },
   ],
   "component": "Box",
-  "cssRules": Array [],
+  "cssRules": [],
   "id": "1",
 }
 `;

packages/project/src/shared/tree-utils/get-css-rules.test.ts

@@ -40,13 +40,13 @@ describe("Get all cssRules from an instance including children", () => {
     };
 
     expect(getCssRules(rootInstance)).toMatchInlineSnapshot(`
-      Array [
-        Array [
+      [
+        [
           "1",
-          Object {
+          {
             "breakpoint": "a",
-            "style": Object {
-              "width": Object {
+            "style": {
+              "width": {
                 "type": "unit",
                 "unit": "px",
                 "value": 10,
@@ -54,24 +54,24 @@ describe("Get all cssRules from an instance including children", () => {
             },
           },
         ],
-        Array [
+        [
           "2",
-          Object {
+          {
             "breakpoint": "a",
-            "style": Object {
-              "display": Object {
+            "style": {
+              "display": {
                 "type": "keyword",
                 "value": "block",
               },
             },
           },
         ],
-        Array [
+        [
           "3",
-          Object {
+          {
             "breakpoint": "a",
-            "style": Object {
-              "color": Object {
+            "style": {
+              "color": {
                 "type": "keyword",
                 "value": "red",
               },

packages/react-sdk/package.json

@@ -18,11 +18,10 @@
     "storybook:build": "build-storybook"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.12",
+    "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "remix-utils": "^4.1.0",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-interactions": "^6.5.6",
@@ -41,6 +40,7 @@
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
+    "remix-utils": "^4.1.0",
     "tsup": "^6.1.3",
     "tsx": "^3.9.0",
     "typescript": "4.7.4",
@@ -49,18 +49,18 @@
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "remix-utils": "^4.1.0",
     "@storybook/react": "^6.5.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "remix-utils": "^4.1.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
     "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
+    "@webstudio-is/css-data": "*",
     "@webstudio-is/fonts": "*",
     "@webstudio-is/icons": "*",
-    "@webstudio-is/css-data": "*",
     "@webstudio-is/jest-config": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",

packages/react-sdk/src/component-utils/image.test.ts

@@ -12,7 +12,7 @@ describe("Image optimizations applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": undefined,
         "src": "/cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=128,quality=100,format=auto/https://webstudio.is/logo.webp 1x, /cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp 2x",
@@ -31,7 +31,7 @@ describe("Image optimizations applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": "(min-width: 1280px) 50vw, 100vw",
         "src": "/cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=384,quality=90,format=auto/https://webstudio.is/logo.webp 384w, /cdn-cgi/image/width=640,quality=90,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=90,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=90,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=90,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=90,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=90,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=90,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp 3840w",
@@ -50,7 +50,7 @@ describe("Image optimizations applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": "100vw",
         "src": "/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
         "srcSet": "/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
@@ -71,7 +71,7 @@ describe("Image optimizations applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": "100vw",
         "src": "/logo.webp?w=3840&q=70",
         "srcSet": "/logo.webp?w=640&q=70 640w, /logo.webp?w=750&q=70 750w, /logo.webp?w=828&q=70 828w, /logo.webp?w=1080&q=70 1080w, /logo.webp?w=1200&q=70 1200w, /logo.webp?w=1920&q=70 1920w, /logo.webp?w=2048&q=70 2048w, /logo.webp?w=3840&q=70 3840w",
@@ -92,7 +92,7 @@ describe("Image optimizations not applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": undefined,
         "src": "https://webstudio.is/logo.webp",
         "srcSet": undefined,
@@ -111,7 +111,7 @@ describe("Image optimizations not applied", () => {
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
-      Object {
+      {
         "sizes": undefined,
         "src": "https://webstudio.is/logo.webp",
         "srcSet": "user-defined-srcset",