@webstudio-is/react-sdk 0.91.0 → 0.92.0

package/{src/embed-template.test.ts → lib/embed-template.test.js}

@@ -1,12 +1,9 @@
+"use strict";
 import { expect, test } from "@jest/globals";
 import { generateDataFromEmbedTemplate, namespaceMeta } from "./embed-template";
 import { showAttribute } from "./tree";
-import type { WsComponentMeta } from "./components/component-meta";
-
 const expectString = expect.any(String);
-
 const defaultBreakpointId = "base";
-
 test("generate data for embedding from instances and text", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -17,17 +14,17 @@ test("generate data for embedding from instances and text", () => {
           component: "Box1",
           children: [
             { type: "instance", component: "Box2", children: [] },
-            { type: "text", value: "world" },
-          ],
-        },
+            { type: "text", value: "world" }
+          ]
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
     children: [
       { type: "text", value: "hello" },
-      { type: "id", value: expectString },
+      { type: "id", value: expectString }
     ],
     instances: [
       {
@@ -36,24 +33,23 @@ test("generate data for embedding from instances and text", () => {
         component: "Box1",
         children: [
           { type: "id", value: expectString },
-          { type: "text", value: "world" },
-        ],
+          { type: "text", value: "world" }
+        ]
       },
       {
         type: "instance",
         id: expectString,
         component: "Box2",
-        children: [],
-      },
+        children: []
+      }
     ],
     props: [],
     dataSources: [],
     styleSourceSelections: [],
     styleSources: [],
-    styles: [],
+    styles: []
   });
 });
-
 test("generate data for embedding from props", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -63,19 +59,19 @@ test("generate data for embedding from props", () => {
           component: "Box1",
           props: [
             { type: "string", name: "data-prop1", value: "value1" },
-            { type: "string", name: "data-prop2", value: "value2" },
+            { type: "string", name: "data-prop2", value: "value2" }
           ],
           children: [
             {
               type: "instance",
               component: "Box2",
               props: [{ type: "string", name: "data-prop3", value: "value3" }],
-              children: [],
-            },
-          ],
-        },
+              children: []
+            }
+          ]
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -85,14 +81,14 @@ test("generate data for embedding from props", () => {
         type: "instance",
         id: expectString,
         component: "Box1",
-        children: [{ type: "id", value: expectString }],
+        children: [{ type: "id", value: expectString }]
       },
       {
         type: "instance",
         id: expectString,
         component: "Box2",
-        children: [],
-      },
+        children: []
+      }
     ],
     props: [
       {
@@ -100,30 +96,29 @@ test("generate data for embedding from props", () => {
         id: expectString,
         instanceId: expectString,
         name: "data-prop1",
-        value: "value1",
+        value: "value1"
       },
       {
         type: "string",
         id: expectString,
         instanceId: expectString,
         name: "data-prop2",
-        value: "value2",
+        value: "value2"
       },
       {
         type: "string",
         id: expectString,
         instanceId: expectString,
         name: "data-prop3",
-        value: "value3",
-      },
+        value: "value3"
+      }
     ],
     dataSources: [],
     styleSourceSelections: [],
     styleSources: [],
-    styles: [],
+    styles: []
   });
 });
-
 test("generate data for embedding from styles", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -133,7 +128,7 @@ test("generate data for embedding from styles", () => {
           component: "Box1",
           styles: [
             { property: "width", value: { type: "keyword", value: "auto" } },
-            { property: "height", value: { type: "keyword", value: "auto" } },
+            { property: "height", value: { type: "keyword", value: "auto" } }
           ],
           children: [
             {
@@ -142,15 +137,15 @@ test("generate data for embedding from styles", () => {
               styles: [
                 {
                   property: "color",
-                  value: { type: "keyword", value: "black" },
-                },
+                  value: { type: "keyword", value: "black" }
+                }
               ],
-              children: [],
-            },
-          ],
-        },
+              children: []
+            }
+          ]
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -160,63 +155,62 @@ test("generate data for embedding from styles", () => {
         type: "instance",
         id: expectString,
         component: "Box1",
-        children: [{ type: "id", value: expectString }],
+        children: [{ type: "id", value: expectString }]
       },
       {
         type: "instance",
         id: expectString,
         component: "Box2",
-        children: [],
-      },
+        children: []
+      }
     ],
     props: [],
     dataSources: [],
     styleSourceSelections: [
       {
         instanceId: expectString,
-        values: [expectString],
+        values: [expectString]
       },
       {
         instanceId: expectString,
-        values: [expectString],
-      },
+        values: [expectString]
+      }
     ],
     styleSources: [
       {
         type: "local",
-        id: expectString,
+        id: expectString
       },
       {
         type: "local",
-        id: expectString,
-      },
+        id: expectString
+      }
     ],
     styles: [
       {
         breakpointId: "base",
         styleSourceId: expectString,
-        state: undefined,
+        state: void 0,
         property: "width",
-        value: { type: "keyword", value: "auto" },
+        value: { type: "keyword", value: "auto" }
       },
       {
         breakpointId: "base",
         styleSourceId: expectString,
-        state: undefined,
+        state: void 0,
         property: "height",
-        value: { type: "keyword", value: "auto" },
+        value: { type: "keyword", value: "auto" }
       },
       {
         breakpointId: "base",
         styleSourceId: expectString,
-        state: undefined,
+        state: void 0,
         property: "color",
-        value: { type: "keyword", value: "black" },
-      },
-    ],
+        value: { type: "keyword", value: "black" }
+      }
+    ]
   });
 });
-
 test("generate data for embedding from props bound to data source variables", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -225,16 +219,16 @@ test("generate data for embedding from props bound to data source variables", ()
           type: "instance",
           component: "Box1",
           dataSources: {
-            showOtherBoxDataSource: { type: "variable", initialValue: false },
+            showOtherBoxDataSource: { type: "variable", initialValue: false }
           },
           props: [
             {
               type: "dataSource",
               name: "showOtherBox",
-              dataSourceName: "showOtherBoxDataSource",
-            },
+              dataSourceName: "showOtherBoxDataSource"
+            }
           ],
-          children: [],
+          children: []
         },
         {
           type: "instance",
@@ -243,23 +237,23 @@ test("generate data for embedding from props bound to data source variables", ()
             {
               type: "dataSource",
               name: showAttribute,
-              dataSourceName: "showOtherBoxDataSource",
-            },
+              dataSourceName: "showOtherBoxDataSource"
+            }
           ],
-          children: [],
-        },
+          children: []
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
     children: [
       { type: "id", value: expectString },
-      { type: "id", value: expectString },
+      { type: "id", value: expectString }
     ],
     instances: [
       { type: "instance", id: expectString, component: "Box1", children: [] },
-      { type: "instance", id: expectString, component: "Box2", children: [] },
+      { type: "instance", id: expectString, component: "Box2", children: [] }
     ],
     props: [
       {
@@ -267,15 +261,15 @@ test("generate data for embedding from props bound to data source variables", ()
         instanceId: expectString,
         type: "dataSource",
         name: "showOtherBox",
-        value: expectString,
+        value: expectString
       },
       {
         id: expectString,
         instanceId: expectString,
         type: "dataSource",
         name: showAttribute,
-        value: expectString,
-      },
+        value: expectString
+      }
     ],
     dataSources: [
       {
@@ -285,16 +279,15 @@ test("generate data for embedding from props bound to data source variables", ()
         name: "showOtherBoxDataSource",
         value: {
           type: "boolean",
-          value: false,
-        },
-      },
+          value: false
+        }
+      }
     ],
     styleSourceSelections: [],
     styleSources: [],
-    styles: [],
+    styles: []
   });
 });
-
 test("generate data for embedding from props bound to data source expressions", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -306,17 +299,17 @@ test("generate data for embedding from props bound to data source expressions",
             boxState: { type: "variable", initialValue: "initial" },
             boxStateSuccess: {
               type: "expression",
-              code: `boxState === 'success'`,
-            },
+              code: `boxState === 'success'`
+            }
           },
           props: [
             {
               type: "dataSource",
               name: "state",
-              dataSourceName: "boxState",
-            },
+              dataSourceName: "boxState"
+            }
           ],
-          children: [],
+          children: []
         },
         {
           type: "instance",
@@ -325,23 +318,23 @@ test("generate data for embedding from props bound to data source expressions",
             {
               type: "dataSource",
               name: showAttribute,
-              dataSourceName: "boxStateSuccess",
-            },
+              dataSourceName: "boxStateSuccess"
+            }
           ],
-          children: [],
-        },
+          children: []
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
     children: [
       { type: "id", value: expectString },
-      { type: "id", value: expectString },
+      { type: "id", value: expectString }
     ],
     instances: [
       { type: "instance", id: expectString, component: "Box1", children: [] },
-      { type: "instance", id: expectString, component: "Box2", children: [] },
+      { type: "instance", id: expectString, component: "Box2", children: [] }
     ],
     props: [
       {
@@ -349,15 +342,15 @@ test("generate data for embedding from props bound to data source expressions",
         instanceId: expectString,
         type: "dataSource",
         name: "state",
-        value: expectString,
+        value: expectString
       },
       {
         id: expectString,
         instanceId: expectString,
         type: "dataSource",
         name: showAttribute,
-        value: expectString,
-      },
+        value: expectString
+      }
     ],
     dataSources: [
       {
@@ -367,23 +360,22 @@ test("generate data for embedding from props bound to data source expressions",
         name: "boxState",
         value: {
           type: "string",
-          value: "initial",
-        },
+          value: "initial"
+        }
       },
       {
         type: "expression",
         id: expectString,
         scopeInstanceId: expectString,
         name: "boxStateSuccess",
-        code: expect.stringMatching(/\$ws\$dataSource\$\w+ === 'success'/),
-      },
+        code: expect.stringMatching(/\$ws\$dataSource\$\w+ === 'success'/)
+      }
     ],
     styleSourceSelections: [],
     styleSources: [],
-    styles: [],
+    styles: []
   });
 });
-
 test("generate data for embedding from action props", () => {
   expect(
     generateDataFromEmbedTemplate(
@@ -392,14 +384,14 @@ test("generate data for embedding from action props", () => {
           type: "instance",
           component: "Box1",
           dataSources: {
-            boxState: { type: "variable", initialValue: "initial" },
+            boxState: { type: "variable", initialValue: "initial" }
           },
           props: [
             {
               type: "dataSource",
               name: "state",
-              dataSourceName: "boxState",
-            },
+              dataSourceName: "boxState"
+            }
           ],
           children: [
             {
@@ -409,7 +401,7 @@ test("generate data for embedding from action props", () => {
                 {
                   type: "action",
                   name: "onClick",
-                  value: [{ type: "execute", code: `boxState = 'success'` }],
+                  value: [{ type: "execute", code: `boxState = 'success'` }]
                 },
                 {
                   type: "action",
@@ -418,17 +410,17 @@ test("generate data for embedding from action props", () => {
                     {
                       type: "execute",
                       args: ["value"],
-                      code: `boxState = value`,
-                    },
-                  ],
-                },
+                      code: `boxState = value`
+                    }
+                  ]
+                }
               ],
-              children: [],
-            },
-          ],
-        },
+              children: []
+            }
+          ]
+        }
       ],
-      new Map(),
+      /* @__PURE__ */ new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -438,9 +430,9 @@ test("generate data for embedding from action props", () => {
         type: "instance",
         id: expectString,
         component: "Box1",
-        children: [{ type: "id", value: expectString }],
+        children: [{ type: "id", value: expectString }]
       },
-      { type: "instance", id: expectString, component: "Box2", children: [] },
+      { type: "instance", id: expectString, component: "Box2", children: [] }
     ],
     props: [
       {
@@ -448,7 +440,7 @@ test("generate data for embedding from action props", () => {
         instanceId: expectString,
         type: "dataSource",
         name: "state",
-        value: expectString,
+        value: expectString
       },
       {
         id: expectString,
@@ -459,9 +451,9 @@ test("generate data for embedding from action props", () => {
           {
             type: "execute",
             args: [],
-            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = 'success'/),
-          },
-        ],
+            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = 'success'/)
+          }
+        ]
       },
       {
         id: expectString,
@@ -472,10 +464,10 @@ test("generate data for embedding from action props", () => {
           {
             type: "execute",
             args: ["value"],
-            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = value/),
-          },
-        ],
-      },
+            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = value/)
+          }
+        ]
+      }
     ],
     dataSources: [
       {
@@ -485,103 +477,100 @@ test("generate data for embedding from action props", () => {
         name: "boxState",
         value: {
           type: "string",
-          value: "initial",
-        },
-      },
+          value: "initial"
+        }
+      }
     ],
     styleSourceSelections: [],
     styleSources: [],
-    styles: [],
+    styles: []
   });
 });
-
 test("generate styles from tokens", () => {
-  const presetTokens: WsComponentMeta["presetTokens"] = {
+  const presetTokens = {
     box: {
       styles: [
         {
           property: "width",
-          value: { type: "keyword", value: "max-content" },
+          value: { type: "keyword", value: "max-content" }
         },
         {
           property: "height",
-          value: { type: "keyword", value: "max-content" },
-        },
-      ],
+          value: { type: "keyword", value: "max-content" }
+        }
+      ]
     },
     boxBright: {
       styles: [
         {
           property: "color",
-          value: { type: "keyword", value: "red" },
+          value: { type: "keyword", value: "red" }
         },
         {
           property: "backgroundColor",
-          value: { type: "keyword", value: "pink" },
-        },
-      ],
+          value: { type: "keyword", value: "pink" }
+        }
+      ]
     },
     boxNone: {
       styles: [
         {
           property: "color",
-          value: { type: "keyword", value: "transparent" },
+          value: { type: "keyword", value: "transparent" }
         },
         {
           property: "backgroundColor",
-          value: { type: "keyword", value: "transparent" },
-        },
-      ],
-    },
+          value: { type: "keyword", value: "transparent" }
+        }
+      ]
+    }
   };
-  const { styleSourceSelections, styleSources, styles } =
-    generateDataFromEmbedTemplate(
-      [
-        {
-          type: "instance",
-          component: "Box",
-          tokens: ["box", "boxBright"],
-          children: [],
-        },
-      ],
-      new Map([["Box", { type: "container", icon: "", presetTokens }]]),
-      defaultBreakpointId
-    );
+  const { styleSourceSelections, styleSources, styles } = generateDataFromEmbedTemplate(
+    [
+      {
+        type: "instance",
+        component: "Box",
+        tokens: ["box", "boxBright"],
+        children: []
+      }
+    ],
+    /* @__PURE__ */ new Map([["Box", { type: "container", icon: "", presetTokens }]]),
+    defaultBreakpointId
+  );
   expect(styleSources).toEqual([
     { id: "Box:box", name: "Box", type: "token" },
-    { id: "Box:boxBright", name: "Box Bright", type: "token" },
+    { id: "Box:boxBright", name: "Box Bright", type: "token" }
   ]);
   expect(styleSourceSelections).toEqual([
-    { instanceId: expectString, values: ["Box:box", "Box:boxBright"] },
+    { instanceId: expectString, values: ["Box:box", "Box:boxBright"] }
   ]);
   expect(styles).toEqual([
     {
       breakpointId: "base",
       property: "width",
       styleSourceId: "Box:box",
-      value: { type: "keyword", value: "max-content" },
+      value: { type: "keyword", value: "max-content" }
     },
     {
       breakpointId: "base",
       property: "height",
       styleSourceId: "Box:box",
-      value: { type: "keyword", value: "max-content" },
+      value: { type: "keyword", value: "max-content" }
     },
     {
       breakpointId: "base",
       property: "color",
       styleSourceId: "Box:boxBright",
-      value: { type: "keyword", value: "red" },
+      value: { type: "keyword", value: "red" }
     },
     {
       breakpointId: "base",
       property: "backgroundColor",
       styleSourceId: "Box:boxBright",
-      value: { type: "keyword", value: "pink" },
-    },
+      value: { type: "keyword", value: "pink" }
+    }
   ]);
 });
-
 test("add namespace to selected components in embed template", () => {
   expect(
     namespaceMeta(
@@ -595,7 +584,7 @@ test("add namespace to selected components in embed template", () => {
         presetTokens: {
           base: { styles: [] },
           small: { styles: [] },
-          large: { styles: [] },
+          large: { styles: [] }
         },
         template: [
           {
@@ -611,16 +600,16 @@ test("add namespace to selected components in embed template", () => {
                   {
                     type: "instance",
                     component: "Button",
-                    children: [],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+                    children: []
+                  }
+                ]
+              }
+            ]
+          }
+        ]
       },
       "my-namespace",
-      new Set(["Tooltip", "Button"])
+      /* @__PURE__ */ new Set(["Tooltip", "Button"])
     )
   ).toEqual({
     type: "container",
@@ -632,7 +621,7 @@ test("add namespace to selected components in embed template", () => {
     presetTokens: {
       base: { styles: [] },
       small: { styles: [] },
-      large: { styles: [] },
+      large: { styles: [] }
     },
     template: [
       {
@@ -648,12 +637,12 @@ test("add namespace to selected components in embed template", () => {
               {
                 type: "instance",
                 component: "my-namespace:Button",
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
-    ],
+                children: []
+              }
+            ]
+          }
+        ]
+      }
+    ]
   });
 });