@webstudio-is/react-sdk 0.78.0 → 0.80.0

package/src/css/normalize.ts

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import * as presets from "./presets";
+import { borders, outline } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -37,21 +37,13 @@ const boxSizing = {
  *   box-sizing: border-box;
   }
 */
-const baseStyle = [
-  boxSizing,
-  ...presets.borders,
-  ...presets.outline,
-] satisfies Styles;
+const baseStyle = [boxSizing, ...borders, ...outline] satisfies Styles;
 
 export const div = baseStyle;
 export const address = baseStyle;
 export const article = baseStyle;
 export const aside = baseStyle;
-export const blockquote = [
-  ...baseStyle,
-  ...presets.blockquote,
-] satisfies Styles;
-export const figure = [...baseStyle, ...presets.margins] satisfies Styles;
+export const figure = baseStyle;
 export const footer = baseStyle;
 export const header = baseStyle;
 export const main = baseStyle;
@@ -60,12 +52,12 @@ export const section = baseStyle;
 export const form = baseStyle;
 export const label = baseStyle;
 
-export const h1 = [...baseStyle, ...presets.h1] satisfies Styles;
-export const h2 = [...baseStyle, ...presets.h2] satisfies Styles;
-export const h3 = [...baseStyle, ...presets.h3] satisfies Styles;
-export const h4 = [...baseStyle, ...presets.h4] satisfies Styles;
-export const h5 = [...baseStyle, ...presets.h5] satisfies Styles;
-export const h6 = [...baseStyle, ...presets.h6] satisfies Styles;
+export const h1 = baseStyle;
+export const h2 = baseStyle;
+export const h3 = baseStyle;
+export const h4 = baseStyle;
+export const h5 = baseStyle;
+export const h6 = baseStyle;
 
 export const i = baseStyle;
 
@@ -76,7 +68,7 @@ export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;
 
-export const p = [...baseStyle, ...presets.verticalMargins];
+export const p = baseStyle;
 export const span = baseStyle;
 
 // @todo for now not applied to html, as we don't have html element
@@ -102,7 +94,7 @@ export const html = [
     value: { type: "unit", value: 4, unit: "number" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -132,7 +124,7 @@ export const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: "Arial, sans-serif",
+      value: "Arial, Roboto, sans-serif",
     },
   },
   {
@@ -144,7 +136,7 @@ export const body = [
     value: { type: "unit", unit: "number", value: 1.2 },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -163,8 +155,7 @@ export const hr = [
     value: { type: "keyword", value: "inherit" },
   },
   boxSizing,
-  ...presets.borders,
-  ...presets.margins,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -186,7 +177,7 @@ export const b = [
     value: { type: "keyword", value: "700" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 export const strong = b;
 
@@ -209,7 +200,7 @@ export const code = [
     value: { type: "unit", value: 1, unit: "em" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 export const kbd = code;
@@ -226,7 +217,7 @@ export const small = [
     value: { type: "unit", value: 80, unit: "%" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -251,7 +242,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 export const sub = [
@@ -286,7 +277,7 @@ export const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" },
   },
-  ...presets.borders,
+  ...borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -349,7 +340,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 export const input = buttonBase;
@@ -436,7 +427,7 @@ export const legend = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -449,7 +440,7 @@ export const progress = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;
 
 /**
@@ -512,5 +503,5 @@ export const summary = [
     value: { type: "keyword", value: "list-item" },
   },
   boxSizing,
-  ...presets.borders,
+  ...borders,
 ] satisfies Styles;

package/src/css/presets.ts

@@ -25,113 +25,3 @@ export const outline: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
-
-export const margins = [
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-  {
-    property: "marginRight",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-  {
-    property: "marginLeft",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-] satisfies Styles;
-
-export const verticalMargins = [
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0, unit: "px" },
-  },
-] satisfies Styles;
-
-export const blockquote = [
-  ...margins,
-  {
-    property: "paddingTop",
-    value: { type: "unit", value: 10, unit: "px" },
-  },
-  {
-    property: "paddingBottom",
-    value: { type: "unit", value: 10, unit: "px" },
-  },
-  {
-    property: "paddingLeft",
-    value: { type: "unit", value: 20, unit: "px" },
-  },
-  {
-    property: "paddingRight",
-    value: { type: "unit", value: 20, unit: "px" },
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", value: 5, unit: "px" },
-  },
-  {
-    property: "borderLeftStyle",
-    value: { type: "keyword", value: "solid" },
-  },
-  {
-    property: "borderLeftColor",
-    value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
-  },
-] satisfies Styles;
-
-export const h1 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 38, unit: "px" },
-  },
-] satisfies Styles;
-
-export const h2 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 32, unit: "px" },
-  },
-] satisfies Styles;
-
-export const h3 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 24, unit: "px" },
-  },
-] satisfies Styles;
-
-export const h4 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 18, unit: "px" },
-  },
-] satisfies Styles;
-
-export const h5 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 14, unit: "px" },
-  },
-] satisfies Styles;
-
-export const h6 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 12, unit: "px" },
-  },
-] satisfies Styles;

package/src/embed-template.test.ts

@@ -307,10 +307,7 @@ test("generate data for embedding from props bound to data source expressions",
               type: "string",
               name: "state",
               value: "initial",
-              dataSourceRef: {
-                type: "variable",
-                name: "boxState",
-              },
+              dataSourceRef: { type: "variable", name: "boxState" },
             },
           ],
           children: [],
@@ -384,3 +381,86 @@ test("generate data for embedding from props bound to data source expressions",
     styles: [],
   });
 });
+
+test("generate data for embedding from action props", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box1",
+          props: [
+            {
+              type: "string",
+              name: "state",
+              value: "initial",
+              dataSourceRef: { type: "variable", name: "boxState" },
+            },
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "Box2",
+              props: [
+                {
+                  type: "action",
+                  name: "onClick",
+                  value: [{ type: "execute", code: `boxState = 'success'` }],
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [{ type: "id", value: expectString }],
+    instances: [
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box1",
+        children: [{ type: "id", value: expectString }],
+      },
+      { type: "instance", id: expectString, component: "Box2", children: [] },
+    ],
+    props: [
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "dataSource",
+        name: "state",
+        value: expectString,
+      },
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "action",
+        name: "onClick",
+        value: [
+          {
+            type: "execute",
+            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = 'success'/),
+          },
+        ],
+      },
+    ],
+    dataSources: [
+      {
+        type: "variable",
+        id: expectString,
+        scopeInstanceId: expectString,
+        name: "boxState",
+        value: {
+          type: "string",
+          value: "initial",
+        },
+      },
+    ],
+    styleSourceSelections: [],
+    styleSources: [],
+    styles: [],
+  });
+});

package/src/embed-template.ts

@@ -21,11 +21,13 @@ const EmbedTemplateText = z.object({
 
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 
+const DataSourceVariableRef = z.object({
+  type: z.literal("variable"),
+  name: z.string(),
+});
+
 const DataSourceRef = z.union([
-  z.object({
-    type: z.literal("variable"),
-    name: z.string(),
-  }),
+  DataSourceVariableRef,
   z.object({
     type: z.literal("expression"),
     name: z.string(),
@@ -58,6 +60,16 @@ const EmbedTemplateProp = z.union([
     dataSourceRef: z.optional(DataSourceRef),
     value: z.array(z.string()),
   }),
+  z.object({
+    type: z.literal("action"),
+    name: z.string(),
+    value: z.array(
+      z.object({
+        type: z.literal("execute"),
+        code: z.string(),
+      })
+    ),
+  }),
 ]);
 
 type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
@@ -124,6 +136,29 @@ const createInstancesFromTemplate = (
       if (item.props) {
         for (const prop of item.props) {
           const propId = nanoid();
+          // action cannot be bound to data source
+          if (prop.type === "action") {
+            props.push({
+              id: propId,
+              instanceId,
+              type: "action",
+              name: prop.name,
+              value: prop.value.map((value) => {
+                return {
+                  type: "execute",
+                  // replace all references with variable names
+                  code: validateExpression(value.code, {
+                    effectful: true,
+                    transformIdentifier: (ref) => {
+                      const id = dataSourceByRef.get(ref)?.id ?? ref;
+                      return encodeDataSourceVariable(id);
+                    },
+                  }),
+                };
+              }),
+            });
+            continue;
+          }
           if (prop.dataSourceRef === undefined) {
             props.push({ id: propId, instanceId, ...prop });
             continue;
@@ -148,7 +183,13 @@ const createInstancesFromTemplate = (
                 id,
                 scopeInstanceId: instanceId,
                 name: dataSourceRef.name,
-                code: dataSourceRef.code,
+                // replace all references with variable names
+                code: validateExpression(dataSourceRef.code, {
+                  transformIdentifier: (ref) => {
+                    const id = dataSourceByRef.get(ref)?.id ?? ref;
+                    return encodeDataSourceVariable(id);
+                  },
+                }),
               };
               dataSourceByRef.set(dataSourceRef.name, dataSource);
             } else {
@@ -246,25 +287,17 @@ export const generateDataFromEmbedTemplate = (
     defaultBreakpointId
   );
 
-  // replace all references with variable names
-  const dataSources: DataSource[] = [];
-  for (const dataSource of dataSourceByRef.values()) {
-    if (dataSource.type === "expression") {
-      dataSource.code = validateExpression(dataSource.code, (ref) => {
-        const id = dataSourceByRef.get(ref)?.id ?? ref;
-        return encodeDataSourceVariable(id);
-      });
-    }
-    dataSources.push(dataSource);
-  }
-
   return {
     children,
     instances,
     props,
-    dataSources,
+    dataSources: Array.from(dataSourceByRef.values()),
     styleSourceSelections,
     styleSources,
     styles,
   };
 };
+
+export type EmbedTemplateData = ReturnType<
+  typeof generateDataFromEmbedTemplate
+>;

package/src/expression.test.ts

@@ -2,8 +2,10 @@ import { expect, test } from "@jest/globals";
 import {
   decodeDataSourceVariable,
   encodeDataSourceVariable,
-  executeExpressions,
-  generateExpressionsComputation,
+  executeComputingExpressions,
+  executeEffectfulExpression,
+  generateComputingExpressions,
+  generateEffectfulExpression,
   validateExpression,
 } from "./expression";
 
@@ -17,6 +19,13 @@ test("allow unary and binary expressions", () => {
   expect(validateExpression(`[-1, 1 + 1]`)).toEqual(`[-1, 1 + 1]`);
 });
 
+test("optionally allow assignment expressions", () => {
+  expect(() => {
+    validateExpression(`a = 2`);
+  }).toThrowError(/Cannot use assignment in this expression/);
+  expect(validateExpression(`a = 2`, { effectful: true })).toEqual(`a = 2`);
+});
+
 test("forbid member expressions", () => {
   expect(() => {
     validateExpression("var1 + obj.param");
@@ -44,6 +53,21 @@ test("forbid ternary", () => {
   }).toThrowError(/Ternary operator is not supported/);
 });
 
+test("forbid increment and decrement", () => {
+  expect(() => {
+    validateExpression("++var1");
+  }).toThrowError(/"\+\+" operator is not supported/);
+  expect(() => {
+    validateExpression("var1++");
+  }).toThrowError(/"\+\+" operator is not supported/);
+  expect(() => {
+    validateExpression("--var1");
+  }).toThrowError(/"--" operator is not supported/);
+  expect(() => {
+    validateExpression("var1--");
+  }).toThrowError(/"--" operator is not supported/);
+});
+
 test("forbid multiple expressions", () => {
   expect(() => {
     validateExpression("a b");
@@ -57,12 +81,14 @@ test("forbid multiple expressions", () => {
 });
 
 test("transform identifiers", () => {
-  expect(validateExpression(`a + b`, (id) => `$ws$${id}`)).toEqual(
-    `$ws$a + $ws$b`
-  );
+  expect(
+    validateExpression(`a + b`, {
+      transformIdentifier: (id) => `$ws$${id}`,
+    })
+  ).toEqual(`$ws$a + $ws$b`);
 });
 
-test("generate expressions computation", () => {
+test("generate computing expressions", () => {
   const variables = new Set(["var0"]);
   const expressions = new Map([
     ["exp3", "exp2 + exp1"],
@@ -70,7 +96,7 @@ test("generate expressions computation", () => {
     ["exp2", "exp1"],
     ["exp4", "exp2"],
   ]);
-  expect(generateExpressionsComputation(variables, expressions))
+  expect(generateComputingExpressions(expressions, variables))
     .toMatchInlineSnapshot(`
     "const var0 = _variables.get('var0');
     const exp1 = (var0);
@@ -86,10 +112,22 @@ test("generate expressions computation", () => {
   `);
 });
 
+test("add only used variables in computing expression", () => {
+  const expressions = new Map([["exp1", "var0"]]);
+  expect(generateComputingExpressions(expressions, new Set(["var0", "var1"])))
+    .toMatchInlineSnapshot(`
+    "const var0 = _variables.get('var0');
+    const exp1 = (var0);
+    return new Map([
+      ['exp1', exp1],
+    ]);"
+  `);
+});
+
 test("execute expression", () => {
   const variables = new Map();
   const expressions = new Map([["exp1", "1 + 1"]]);
-  expect(executeExpressions(variables, expressions)).toEqual(
+  expect(executeComputingExpressions(expressions, variables)).toEqual(
     new Map([["exp1", 2]])
   );
 });
@@ -97,7 +135,7 @@ test("execute expression", () => {
 test("execute expression dependent on variables", () => {
   const variables = new Map([["var1", 5]]);
   const expressions = new Map([["exp1", "var1 + 1"]]);
-  expect(executeExpressions(variables, expressions)).toEqual(
+  expect(executeComputingExpressions(expressions, variables)).toEqual(
     new Map([["exp1", 6]])
   );
 });
@@ -108,7 +146,7 @@ test("execute expression dependent on another expressions", () => {
     ["exp1", "exp0 + 1"],
     ["exp0", "var1 + 2"],
   ]);
-  expect(executeExpressions(variables, expressions)).toEqual(
+  expect(executeComputingExpressions(expressions, variables)).toEqual(
     new Map([
       ["exp1", 6],
       ["exp0", 5],
@@ -124,7 +162,7 @@ test("forbid circular expressions", () => {
     ["exp2", "exp1 + 3"],
   ]);
   expect(() => {
-    executeExpressions(variables, expressions);
+    executeComputingExpressions(expressions, variables);
   }).toThrowError(/Cannot access 'exp0' before initialization/);
 });
 
@@ -132,7 +170,7 @@ test("make sure dependency exists", () => {
   const variables = new Map();
   const expressions = new Map([["exp1", "var1 + 1"]]);
   expect(() => {
-    executeExpressions(variables, expressions);
+    executeComputingExpressions(expressions, variables);
   }).toThrowError(/Unknown dependency "var1"/);
 });
 
@@ -145,3 +183,59 @@ test("encode/decode variable names", () => {
   );
   expect(decodeDataSourceVariable("myVarName")).toEqual(undefined);
 });
+
+test("generate effectful expression", () => {
+  expect(
+    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0", "var1"]))
+  ).toMatchInlineSnapshot(`
+    "let var0 = _variables.get('var0');
+    let var1 = _variables.get('var1');
+    var0 = var0 + var1;
+    return new Map([
+      ['var0', var0],
+    ]);"
+  `);
+
+  expect(
+    generateEffectfulExpression(`var0 = var1 + 1`, new Set(["var0", "var1"]))
+  ).toMatchInlineSnapshot(`
+    "let var1 = _variables.get('var1');
+    let var0;
+    var0 = var1 + 1;
+    return new Map([
+      ['var0', var0],
+    ]);"
+  `);
+});
+
+test("add only used variables in effectful expression", () => {
+  expect(
+    generateEffectfulExpression(
+      `var0 = var1 + 1`,
+      new Set(["var0", "var1", "var2"])
+    )
+  ).toMatchInlineSnapshot(`
+    "let var1 = _variables.get('var1');
+    let var0;
+    var0 = var1 + 1;
+    return new Map([
+      ['var0', var0],
+    ]);"
+  `);
+});
+
+test("forbid not allowed variables in effectful expression", () => {
+  expect(() => {
+    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0"]));
+  }).toThrowError(/Unknown dependency "var1"/);
+});
+
+test("execute effectful expression", () => {
+  const variables = new Map([
+    ["var0", 2],
+    ["var1", 3],
+  ]);
+  expect(executeEffectfulExpression(`var0 = var0 + var1`, variables)).toEqual(
+    new Map([["var0", 5]])
+  );
+});