@webstudio-is/react-sdk 0.79.0 → 0.81.0

package/lib/types/tree/create-elements-tree.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentProps } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type { DataSource, Instance, Instances } from "@webstudio-is/project-build";
+import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
-import { type Params } from "../context";
+import { type Params, type DataSourceValues } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, onDataSourceUpdate, Component, components, }: Params & {
+export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, Component, components, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -24,8 +24,9 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
-    onDataSourceUpdate: (dataSourceId: DataSource["id"], value: unknown) => void;
+    executeEffectfulExpression: (expression: string, values: DataSourceValues) => DataSourceValues;
+    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
+    onDataSourceUpdate: (newValues: DataSourceValues) => void;
     Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
     components: Components;
 }) => JSX.Element | null;

package/lib/types/tree/root.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentProps } from "react";
-import { type Build, type Page, DataSource } from "@webstudio-is/project-build";
+import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { WebstudioComponent } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
-import type { Params } from "../context";
+import type { Params, DataSourceValues } from "../context";
 export type Data = {
     page: Page;
     pages: Array<Page>;
@@ -14,12 +14,12 @@ export type Data = {
 export type RootPropsData = Omit<Data, "build"> & {
     build: Pick<Data["build"], "instances" | "props" | "dataSources">;
 };
-type DataSourceValues = Map<DataSource["id"], unknown>;
 type RootProps = {
     data: RootPropsData;
-    computeExpressions: (values: DataSourceValues) => DataSourceValues;
+    executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
+    executeEffectfulExpression: (expression: string, values: DataSourceValues) => DataSourceValues;
     Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
     components: Components;
 };
-export declare const InstanceRoot: ({ data, computeExpressions, Component, components, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, executeComputingExpressions, executeEffectfulExpression, Component, components, }: RootProps) => JSX.Element | null;
 export {};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.79.0",
+  "version": "0.81.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@jest/globals": "^29.3.1",
-    "@remix-run/react": "^1.15.0",
+    "@jest/globals": "^29.6.1",
+    "@remix-run/react": "^1.18.1",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
-    "jest": "^29.3.1",
+    "jest": "^29.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "type-fest": "^3.7.1",
@@ -21,25 +21,26 @@
     "@webstudio-is/tsconfig": "^1.0.6"
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.15.0",
+    "@remix-run/react": "^1.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "@nanostores/react": "^0.4.1",
+    "@jsep-plugin/assignment": "^1.2.1",
+    "@nanostores/react": "^0.7.1",
     "detect-font": "^0.1.5",
-    "html-tags": "^3.2.0",
+    "html-tags": "^3.3.1",
     "jsep": "^1.3.8",
-    "nanoevents": "^7.0.1",
-    "nanoid": "^3.3.6",
-    "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.79.0",
-    "@webstudio-is/css-data": "^0.79.0",
-    "@webstudio-is/css-engine": "^0.79.0",
-    "@webstudio-is/fonts": "^0.79.0",
-    "@webstudio-is/generate-arg-types": "^0.79.0",
-    "@webstudio-is/project-build": "^0.79.0"
+    "nanoevents": "^8.0.0",
+    "nanoid": "^4.0.2",
+    "nanostores": "^0.9.3",
+    "@webstudio-is/asset-uploader": "^0.81.0",
+    "@webstudio-is/css-data": "^0.81.0",
+    "@webstudio-is/css-engine": "^0.81.0",
+    "@webstudio-is/fonts": "^0.81.0",
+    "@webstudio-is/generate-arg-types": "^0.81.0",
+    "@webstudio-is/project-build": "^0.81.0"
   },
   "exports": {
     ".": {

package/src/context.tsx

@@ -31,13 +31,20 @@ export type Params = {
   assetBaseUrl: string;
 };
 
+export type DataSourceValues = Map<DataSource["id"], unknown>;
+
 export const ReactSdkContext = createContext<
   Params & {
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
-    setDataSourceValue: (
+    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
+    executeEffectfulExpression: (
+      expression: string,
+      values: DataSourceValues
+    ) => DataSourceValues;
+    setDataSourceValues: (newValues: DataSourceValues) => void;
+    setBoundDataSourceValue: (
       instanceId: Instance["id"],
       prop: Prop["name"],
       value: unknown
@@ -50,7 +57,13 @@ export const ReactSdkContext = createContext<
   assetsStore: atom(new Map()),
   pagesStore: atom(new Map()),
   dataSourceValuesStore: atom(new Map()),
-  setDataSourceValue: () => {
-    throw Error("React SDK setDataSourceValue is not implemented");
+  executeEffectfulExpression: () => {
+    throw Error("React SDK executeEffectfulExpression is not implemented");
+  },
+  setDataSourceValues: () => {
+    throw Error("React SDK setBoundDataSourceValue is not implemented");
+  },
+  setBoundDataSourceValue: () => {
+    throw Error("React SDK setBoundDataSourceValue is not implemented");
   },
 });

package/src/css/normalize.ts

@@ -124,7 +124,7 @@ export const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: "Arial, sans-serif",
+      value: "Arial, Roboto, sans-serif",
     },
   },
   {

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]])
+  );
+});