@webstudio-is/react-sdk 0.78.0 → 0.80.0

package/src/expression.ts

@@ -1,27 +1,37 @@
 import jsep from "jsep";
+import jsepAssignment from "@jsep-plugin/assignment";
+import type {
+  UpdateExpression,
+  AssignmentExpression,
+} from "@jsep-plugin/assignment";
 
-type TransformIdentifier = (id: string) => string;
+jsep.plugins.register(jsepAssignment);
 
-type Node = jsep.CoreExpression;
+type TransformIdentifier = (id: string, assignee: boolean) => string;
+
+type Node = jsep.CoreExpression | UpdateExpression | AssignmentExpression;
 
 const generateCode = (
   node: Node,
   failOnForbidden: boolean,
+  effectful: boolean,
   transformIdentifier: TransformIdentifier
 ): string => {
   if (node.type === "Identifier") {
-    return transformIdentifier(node.name);
+    return transformIdentifier(node.name, false);
   }
   if (node.type === "MemberExpression") {
     if (failOnForbidden) {
       const object = generateCode(
         node.object as Node,
         false,
+        effectful,
         transformIdentifier
       );
       const property = generateCode(
         node.property as Node,
         false,
+        effectful,
         transformIdentifier
       );
       throw Error(`Cannot access "${property}" of "${object}"`);
@@ -29,11 +39,13 @@ const generateCode = (
     const object = generateCode(
       node.object as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const property = generateCode(
       node.property as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${object}.${property}`;
@@ -45,6 +57,7 @@ const generateCode = (
     const arg = generateCode(
       node.argument as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${node.operator}${arg}`;
@@ -53,18 +66,25 @@ const generateCode = (
     const left = generateCode(
       node.left as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const right = generateCode(
       node.right as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${left} ${node.operator} ${right}`;
   }
   if (node.type === "ArrayExpression") {
     const elements = node.elements.map((element) =>
-      generateCode(element as Node, failOnForbidden, transformIdentifier)
+      generateCode(
+        element as Node,
+        failOnForbidden,
+        effectful,
+        transformIdentifier
+      )
     );
     return `[${elements.join(", ")}]`;
   }
@@ -73,6 +93,7 @@ const generateCode = (
       const callee = generateCode(
         node.callee as Node,
         false,
+        effectful,
         transformIdentifier
       );
       throw Error(`Cannot call "${callee}"`);
@@ -80,10 +101,11 @@ const generateCode = (
     const callee = generateCode(
       node.callee as Node,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const args = node.arguments.map((arg) =>
-      generateCode(arg as Node, failOnForbidden, transformIdentifier)
+      generateCode(arg as Node, failOnForbidden, effectful, transformIdentifier)
     );
     return `${callee}(${args.join(", ")})`;
   }
@@ -99,16 +121,43 @@ const generateCode = (
   if (node.type === "Compound") {
     throw Error("Cannot use multiple expressions");
   }
+  if (node.type === "AssignmentExpression") {
+    if (node.operator !== "=") {
+      throw Error(`Only "=" assignment operator is supported`);
+    }
+    if (effectful === false) {
+      throw Error(`Cannot use assignment in this expression`);
+    }
+    const left = generateCode(
+      node.left as Node,
+      failOnForbidden,
+      effectful,
+      // override and mark all identifiers inside of left expression as assignee
+      (id) => transformIdentifier(id, true)
+    );
+    const right = generateCode(
+      node.right as Node,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "UpdateExpression") {
+    throw Error(`"${node.operator}" operator is not supported`);
+  }
   node satisfies never;
   return "";
 };
 
 export const validateExpression = (
   code: string,
-  transformIdentifier: TransformIdentifier = (id) => id
+  options?: { effectful?: boolean; transformIdentifier?: TransformIdentifier }
 ) => {
+  const { effectful = false, transformIdentifier = (id: string) => id } =
+    options ?? {};
   const expression = jsep(code) as Node;
-  return generateCode(expression, true, transformIdentifier);
+  return generateCode(expression, true, effectful, transformIdentifier);
 };
 
 const sortTopologically = (
@@ -135,22 +184,26 @@ const sortTopologically = (
  * Generates a function body expecting map as _variables argument
  * and outputing map of results
  */
-export const generateExpressionsComputation = (
-  variables: Set<string>,
-  expressions: Map<string, string>
+export const generateComputingExpressions = (
+  expressions: Map<string, string>,
+  allowedVariables: Set<string>
 ) => {
   const depsById = new Map<string, Set<string>>();
+  const inputVariables = new Set<string>();
   for (const [id, code] of expressions) {
     const deps = new Set<string>();
-    validateExpression(code, (identifier) => {
-      if (variables.has(identifier)) {
-        return identifier;
-      }
-      if (expressions.has(identifier)) {
-        deps.add(identifier);
-        return identifier;
-      }
-      throw Error(`Unknown dependency "${identifier}"`);
+    validateExpression(code, {
+      transformIdentifier: (identifier) => {
+        if (allowedVariables.has(identifier)) {
+          inputVariables.add(identifier);
+          return identifier;
+        }
+        if (expressions.has(identifier)) {
+          deps.add(identifier);
+          return identifier;
+        }
+        throw Error(`Unknown dependency "${identifier}"`);
+      },
     });
     depsById.set(id, deps);
   }
@@ -163,7 +216,7 @@ export const generateExpressionsComputation = (
   // generate code computing all expressions
   let generatedCode = "";
 
-  for (const id of variables) {
+  for (const id of inputVariables) {
     generatedCode += `const ${id} = _variables.get('${id}');\n`;
   }
 
@@ -184,19 +237,78 @@ export const generateExpressionsComputation = (
   return generatedCode;
 };
 
-export const executeExpressions = (
-  variables: Map<string, unknown>,
-  expressions: Map<string, string>
+export const executeComputingExpressions = (
+  expressions: Map<string, string>,
+  variables: Map<string, unknown>
 ) => {
-  const generatedCode = generateExpressionsComputation(
-    new Set(variables.keys()),
-    expressions
+  const generatedCode = generateComputingExpressions(
+    expressions,
+    new Set(variables.keys())
   );
   const executeFn = new Function("_variables", generatedCode);
   const values = executeFn(variables) as Map<string, unknown>;
   return values;
 };
 
+export const generateEffectfulExpression = (
+  code: string,
+  allowedVariables: Set<string>
+) => {
+  const inputVariables = new Set<string>();
+  const outputVariables = new Set<string>();
+  validateExpression(code, {
+    effectful: true,
+    transformIdentifier: (identifier, assignee) => {
+      if (allowedVariables.has(identifier)) {
+        if (assignee) {
+          outputVariables.add(identifier);
+        } else {
+          inputVariables.add(identifier);
+        }
+        return identifier;
+      }
+      throw Error(`Unknown dependency "${identifier}"`);
+    },
+  });
+
+  // generate code computing all expressions
+  let generatedCode = "";
+
+  for (const id of inputVariables) {
+    generatedCode += `let ${id} = _variables.get('${id}');\n`;
+  }
+  for (const id of outputVariables) {
+    if (inputVariables.has(id) === false) {
+      generatedCode += `let ${id};\n`;
+    }
+  }
+
+  generatedCode += `${code};\n`;
+
+  generatedCode += `return new Map([\n`;
+  for (const id of outputVariables) {
+    generatedCode += `  ['${id}', ${id}],\n`;
+  }
+  generatedCode += `]);`;
+
+  return generatedCode;
+};
+
+export const executeEffectfulExpression = (
+  code: string,
+  variables: Map<string, unknown>
+) => {
+  const generatedCode = generateEffectfulExpression(
+    code,
+    new Set(variables.keys())
+  );
+  const executeFn = new Function("_variables", generatedCode);
+  const values = executeFn(variables) as Map<string, unknown>;
+  return values;
+};
+
+type Values = Map<string, unknown>;
+
 const dataSourceVariablePrefix = "$ws$dataSource$";
 
 // data source id is generated with nanoid which has "-" in alphabeta
@@ -208,6 +320,14 @@ export const encodeDataSourceVariable = (id: string) => {
   return `${dataSourceVariablePrefix}${encoded}`;
 };
 
+export const encodeVariablesMap = (values: Values) => {
+  const encodedValues: Values = new Map();
+  for (const [id, value] of values) {
+    encodedValues.set(encodeDataSourceVariable(id), value);
+  }
+  return encodedValues;
+};
+
 export const decodeDataSourceVariable = (name: string) => {
   if (name.startsWith(dataSourceVariablePrefix)) {
     const encoded = name.slice(dataSourceVariablePrefix.length);
@@ -215,3 +335,14 @@ export const decodeDataSourceVariable = (name: string) => {
   }
   return;
 };
+
+export const decodeVariablesMap = (values: Values) => {
+  const decodedValues: Values = new Map();
+  for (const [name, value] of values) {
+    const id = decodeDataSourceVariable(name);
+    if (id !== undefined) {
+      decodedValues.set(id, value);
+    }
+  }
+  return decodedValues;
+};

package/src/index.ts

@@ -22,8 +22,12 @@ export {
 export { type Params, ReactSdkContext } from "./context";
 export {
   validateExpression,
-  generateExpressionsComputation,
-  executeExpressions,
+  generateComputingExpressions,
+  executeComputingExpressions,
+  generateEffectfulExpression,
+  executeEffectfulExpression,
   encodeDataSourceVariable,
+  encodeVariablesMap,
   decodeDataSourceVariable,
+  decodeVariablesMap,
 } from "./expression";

package/src/props.ts

@@ -26,8 +26,13 @@ export const getPropsByInstanceId = (props: Props) => {
 // this utility is be used only for preview with static props
 // so there is no need to use computed to optimize rerenders
 export const useInstanceProps = (instanceId: Instance["id"]) => {
-  const { propsByInstanceIdStore, dataSourceValuesStore } =
-    useContext(ReactSdkContext);
+  const {
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    executeEffectfulExpression,
+    setDataSourceValues,
+    renderer,
+  } = useContext(ReactSdkContext);
   const instancePropsObjectStore = useMemo(() => {
     return computed(
       [propsByInstanceIdStore, dataSourceValuesStore],
@@ -49,12 +54,37 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
             }
             continue;
           }
+          if (prop.type === "action") {
+            instancePropsObject[prop.name] = () => {
+              // prevent all actions in canvas mode
+              if (renderer === "canvas") {
+                return;
+              }
+              for (const value of prop.value) {
+                if (value.type === "execute") {
+                  const newValues = executeEffectfulExpression(
+                    value.code,
+                    dataSourceValues
+                  );
+                  setDataSourceValues(newValues);
+                }
+              }
+            };
+            continue;
+          }
           instancePropsObject[prop.name] = prop.value;
         }
         return instancePropsObject;
       }
     );
-  }, [propsByInstanceIdStore, dataSourceValuesStore, instanceId]);
+  }, [
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    instanceId,
+    renderer,
+    executeEffectfulExpression,
+    setDataSourceValues,
+  ]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };

package/src/tree/create-elements-tree.tsx

@@ -2,13 +2,13 @@ import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 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 { ReactSdkContext, type Params } from "../context";
+import {
+  type Params,
+  type DataSourceValues,
+  ReactSdkContext,
+} from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 
@@ -24,6 +24,7 @@ export const createElementsTree = ({
   assetsStore,
   pagesStore,
   dataSourceValuesStore,
+  executeEffectfulExpression,
   onDataSourceUpdate,
   Component,
   components,
@@ -33,8 +34,12 @@ export const createElementsTree = ({
   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;
 }) => {
@@ -74,7 +79,9 @@ export const createElementsTree = ({
         renderer,
         imageBaseUrl,
         assetBaseUrl,
-        setDataSourceValue: (instanceId, propName, value) => {
+        executeEffectfulExpression,
+        setDataSourceValues: onDataSourceUpdate,
+        setBoundDataSourceValue: (instanceId, propName, value) => {
           const propsByInstanceId = propsByInstanceIdStore.get();
           const props = propsByInstanceId.get(instanceId);
           const prop = props?.find((prop) => prop.name === propName);
@@ -82,7 +89,9 @@ export const createElementsTree = ({
             throw Error(`${propName} is not data source`);
           }
           const dataSourceId = prop.value;
-          onDataSourceUpdate(dataSourceId, value);
+          const newValues = new Map();
+          newValues.set(dataSourceId, value);
+          onDataSourceUpdate(newValues);
         },
       }}
     >

package/src/tree/root.ts

@@ -1,17 +1,17 @@
-import { useRef, type ComponentProps } from "react";
+import { useRef, type ComponentProps, useCallback } from "react";
 import {
   atom,
   computed,
   type ReadableAtom,
   type WritableAtom,
 } from "nanostores";
-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 { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 import type { Components } from "../components/components-utils";
-import type { Params } from "../context";
+import type { Params, DataSourceValues } from "../context";
 
 export type Data = {
   page: Page;
@@ -25,18 +25,21 @@ 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 const InstanceRoot = ({
   data,
-  computeExpressions,
+  executeComputingExpressions,
+  executeEffectfulExpression,
   Component,
   components,
 }: RootProps): JSX.Element | null => {
@@ -67,7 +70,7 @@ export const InstanceRoot = ({
 
         // set expression values
         try {
-          const result = computeExpressions(dataSourceValues);
+          const result = executeComputingExpressions(dataSourceValues);
           for (const [id, value] of result) {
             dataSourceValues.set(id, value);
           }
@@ -82,6 +85,17 @@ export const InstanceRoot = ({
   }
   const dataSourceValuesStore = dataSourceValuesStoreRef.current;
 
+  const onDataSourceUpdate = useCallback(
+    (newValues: DataSourceValues) => {
+      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
+      for (const [dataSourceId, value] of newValues) {
+        dataSourceVariables.set(dataSourceId, value);
+      }
+      dataSourceVariablesStore.set(dataSourceVariables);
+    },
+    [dataSourceVariablesStore]
+  );
+
   return createElementsTree({
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
@@ -92,12 +106,9 @@ export const InstanceRoot = ({
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
+    executeEffectfulExpression,
     dataSourceValuesStore,
-    onDataSourceUpdate: (dataSourceId, value) => {
-      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
-      dataSourceVariables.set(dataSourceId, value);
-      dataSourceVariablesStore.set(dataSourceVariables);
-    },
+    onDataSourceUpdate,
     Component: Component ?? WebstudioComponent,
     components,
   });