@webstudio-is/react-sdk 0.78.0 → 0.80.0

package/lib/css/presets.js

@@ -22,117 +22,7 @@ const outline = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-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" }
-  }
-];
-const verticalMargins = [
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0, unit: "px" }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0, unit: "px" }
-  }
-];
-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 }
-  }
-];
-const h1 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 38, unit: "px" }
-  }
-];
-const h2 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 32, unit: "px" }
-  }
-];
-const h3 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 24, unit: "px" }
-  }
-];
-const h4 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 18, unit: "px" }
-  }
-];
-const h5 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 14, unit: "px" }
-  }
-];
-const h6 = [
-  ...verticalMargins,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 12, unit: "px" }
-  }
-];
 export {
-  blockquote,
   borders,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  margins,
-  outline,
-  verticalMargins
+  outline
 };

package/lib/embed-template.js

@@ -6,11 +6,12 @@ const EmbedTemplateText = z.object({
   type: z.literal("text"),
   value: z.string()
 });
+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(),
@@ -41,6 +42,16 @@ const EmbedTemplateProp = z.union([
     name: z.string(),
     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()
+      })
+    )
   })
 ]);
 const EmbedTemplateStyleDeclRaw = z.object({
@@ -71,6 +82,28 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
       if (item.props) {
         for (const prop of item.props) {
           const propId = nanoid();
+          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 === void 0) {
             props.push({ id: propId, instanceId, ...prop });
             continue;
@@ -95,7 +128,13 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
                 id,
                 scopeInstanceId: instanceId,
                 name: dataSourceRef.name,
-                code: dataSourceRef.code
+                // replace all references with variable names
+                code: validateExpression(dataSourceRef.code, {
+                  transformIdentifier: (ref) => {
+                    const id2 = dataSourceByRef.get(ref)?.id ?? ref;
+                    return encodeDataSourceVariable(id2);
+                  }
+                })
               };
               dataSourceByRef.set(dataSourceRef.name, dataSource);
             } else {
@@ -181,21 +220,11 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     styles,
     defaultBreakpointId
   );
-  const dataSources = [];
-  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

package/lib/expression.js

@@ -1,18 +1,22 @@
 import jsep from "jsep";
-const generateCode = (node, failOnForbidden, transformIdentifier) => {
+import jsepAssignment from "@jsep-plugin/assignment";
+jsep.plugins.register(jsepAssignment);
+const generateCode = (node, failOnForbidden, effectful, transformIdentifier) => {
   if (node.type === "Identifier") {
-    return transformIdentifier(node.name);
+    return transformIdentifier(node.name, false);
   }
   if (node.type === "MemberExpression") {
     if (failOnForbidden) {
       const object2 = generateCode(
         node.object,
         false,
+        effectful,
         transformIdentifier
       );
       const property2 = generateCode(
         node.property,
         false,
+        effectful,
         transformIdentifier
       );
       throw Error(`Cannot access "${property2}" of "${object2}"`);
@@ -20,11 +24,13 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
     const object = generateCode(
       node.object,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const property = generateCode(
       node.property,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${object}.${property}`;
@@ -36,6 +42,7 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
     const arg = generateCode(
       node.argument,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${node.operator}${arg}`;
@@ -44,18 +51,25 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
     const left = generateCode(
       node.left,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const right = generateCode(
       node.right,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${left} ${node.operator} ${right}`;
   }
   if (node.type === "ArrayExpression") {
     const elements = node.elements.map(
-      (element) => generateCode(element, failOnForbidden, transformIdentifier)
+      (element) => generateCode(
+        element,
+        failOnForbidden,
+        effectful,
+        transformIdentifier
+      )
     );
     return `[${elements.join(", ")}]`;
   }
@@ -64,6 +78,7 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
       const callee2 = generateCode(
         node.callee,
         false,
+        effectful,
         transformIdentifier
       );
       throw Error(`Cannot call "${callee2}"`);
@@ -71,10 +86,11 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
     const callee = generateCode(
       node.callee,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     const args = node.arguments.map(
-      (arg) => generateCode(arg, failOnForbidden, transformIdentifier)
+      (arg) => generateCode(arg, failOnForbidden, effectful, transformIdentifier)
     );
     return `${callee}(${args.join(", ")})`;
   }
@@ -90,12 +106,38 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
   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,
+      failOnForbidden,
+      effectful,
+      // override and mark all identifiers inside of left expression as assignee
+      (id) => transformIdentifier(id, true)
+    );
+    const right = generateCode(
+      node.right,
+      failOnForbidden,
+      effectful,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "UpdateExpression") {
+    throw Error(`"${node.operator}" operator is not supported`);
+  }
   node;
   return "";
 };
-const validateExpression = (code, transformIdentifier = (id) => id) => {
+const validateExpression = (code, options) => {
+  const { effectful = false, transformIdentifier = (id) => id } = options ?? {};
   const expression = jsep(code);
-  return generateCode(expression, true, transformIdentifier);
+  return generateCode(expression, true, effectful, transformIdentifier);
 };
 const sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(), sorted = []) => {
   for (const id of list) {
@@ -111,19 +153,23 @@ const sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(),
   }
   return sorted;
 };
-const generateExpressionsComputation = (variables, expressions) => {
+const generateComputingExpressions = (expressions, allowedVariables) => {
   const depsById = /* @__PURE__ */ new Map();
+  const inputVariables = /* @__PURE__ */ new Set();
   for (const [id, code] of expressions) {
     const deps = /* @__PURE__ */ new Set();
-    validateExpression(code, (identifier) => {
-      if (variables.has(identifier)) {
-        return identifier;
-      }
-      if (expressions.has(identifier)) {
-        deps.add(identifier);
-        return 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}"`);
       }
-      throw Error(`Unknown dependency "${identifier}"`);
     });
     depsById.set(id, deps);
   }
@@ -132,7 +178,7 @@ const generateExpressionsComputation = (variables, expressions) => {
     depsById
   );
   let generatedCode = "";
-  for (const id of variables) {
+  for (const id of inputVariables) {
     generatedCode += `const ${id} = _variables.get('${id}');
 `;
   }
@@ -153,10 +199,58 @@ const generateExpressionsComputation = (variables, expressions) => {
   generatedCode += `]);`;
   return generatedCode;
 };
-const executeExpressions = (variables, expressions) => {
-  const generatedCode = generateExpressionsComputation(
-    new Set(variables.keys()),
-    expressions
+const executeComputingExpressions = (expressions, variables) => {
+  const generatedCode = generateComputingExpressions(
+    expressions,
+    new Set(variables.keys())
+  );
+  const executeFn = new Function("_variables", generatedCode);
+  const values = executeFn(variables);
+  return values;
+};
+const generateEffectfulExpression = (code, allowedVariables) => {
+  const inputVariables = /* @__PURE__ */ new Set();
+  const outputVariables = /* @__PURE__ */ new Set();
+  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}"`);
+    }
+  });
+  let generatedCode = "";
+  for (const id of inputVariables) {
+    generatedCode += `let ${id} = _variables.get('${id}');
+`;
+  }
+  for (const id of outputVariables) {
+    if (inputVariables.has(id) === false) {
+      generatedCode += `let ${id};
+`;
+    }
+  }
+  generatedCode += `${code};
+`;
+  generatedCode += `return new Map([
+`;
+  for (const id of outputVariables) {
+    generatedCode += `  ['${id}', ${id}],
+`;
+  }
+  generatedCode += `]);`;
+  return generatedCode;
+};
+const executeEffectfulExpression = (code, variables) => {
+  const generatedCode = generateEffectfulExpression(
+    code,
+    new Set(variables.keys())
   );
   const executeFn = new Function("_variables", generatedCode);
   const values = executeFn(variables);
@@ -167,6 +261,13 @@ const encodeDataSourceVariable = (id) => {
   const encoded = id.replaceAll("-", "__DASH__");
   return `${dataSourceVariablePrefix}${encoded}`;
 };
+const encodeVariablesMap = (values) => {
+  const encodedValues = /* @__PURE__ */ new Map();
+  for (const [id, value] of values) {
+    encodedValues.set(encodeDataSourceVariable(id), value);
+  }
+  return encodedValues;
+};
 const decodeDataSourceVariable = (name) => {
   if (name.startsWith(dataSourceVariablePrefix)) {
     const encoded = name.slice(dataSourceVariablePrefix.length);
@@ -174,10 +275,24 @@ const decodeDataSourceVariable = (name) => {
   }
   return;
 };
+const decodeVariablesMap = (values) => {
+  const decodedValues = /* @__PURE__ */ new Map();
+  for (const [name, value] of values) {
+    const id = decodeDataSourceVariable(name);
+    if (id !== void 0) {
+      decodedValues.set(id, value);
+    }
+  }
+  return decodedValues;
+};
 export {
   decodeDataSourceVariable,
+  decodeVariablesMap,
   encodeDataSourceVariable,
-  executeExpressions,
-  generateExpressionsComputation,
+  encodeVariablesMap,
+  executeComputingExpressions,
+  executeEffectfulExpression,
+  generateComputingExpressions,
+  generateEffectfulExpression,
   validateExpression
 };

package/lib/index.js

@@ -18,19 +18,27 @@ import {
 import { ReactSdkContext } from "./context";
 import {
   validateExpression,
-  generateExpressionsComputation,
-  executeExpressions,
+  generateComputingExpressions,
+  executeComputingExpressions,
+  generateEffectfulExpression,
+  executeEffectfulExpression,
   encodeDataSourceVariable,
-  decodeDataSourceVariable
+  encodeVariablesMap,
+  decodeDataSourceVariable,
+  decodeVariablesMap
 } from "./expression";
 export {
   ReactSdkContext,
   componentCategories,
   decodeDataSourceVariable,
+  decodeVariablesMap,
   defaultStates,
   encodeDataSourceVariable,
-  executeExpressions,
-  generateExpressionsComputation,
+  encodeVariablesMap,
+  executeComputingExpressions,
+  executeEffectfulExpression,
+  generateComputingExpressions,
+  generateEffectfulExpression,
   getInstanceIdFromComponentProps,
   stateCategories,
   useInstanceProps,

package/lib/props.js

@@ -16,7 +16,13 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
-  const { propsByInstanceIdStore, dataSourceValuesStore } = useContext(ReactSdkContext);
+  const {
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    executeEffectfulExpression,
+    setDataSourceValues,
+    renderer
+  } = useContext(ReactSdkContext);
   const instancePropsObjectStore = useMemo(() => {
     return computed(
       [propsByInstanceIdStore, dataSourceValuesStore],
@@ -38,12 +44,36 @@ const useInstanceProps = (instanceId) => {
             }
             continue;
           }
+          if (prop.type === "action") {
+            instancePropsObject2[prop.name] = () => {
+              if (renderer === "canvas") {
+                return;
+              }
+              for (const value of prop.value) {
+                if (value.type === "execute") {
+                  const newValues = executeEffectfulExpression(
+                    value.code,
+                    dataSourceValues
+                  );
+                  setDataSourceValues(newValues);
+                }
+              }
+            };
+            continue;
+          }
           instancePropsObject2[prop.name] = prop.value;
         }
         return instancePropsObject2;
       }
     );
-  }, [propsByInstanceIdStore, dataSourceValuesStore, instanceId]);
+  }, [
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    instanceId,
+    renderer,
+    executeEffectfulExpression,
+    setDataSourceValues
+  ]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };

package/lib/tree/create-elements-tree.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
-import { ReactSdkContext } from "../context";
+import {
+  ReactSdkContext
+} from "../context";
 const createElementsTree = ({
   renderer,
   imageBaseUrl,
@@ -12,6 +14,7 @@ const createElementsTree = ({
   assetsStore,
   pagesStore,
   dataSourceValuesStore,
+  executeEffectfulExpression,
   onDataSourceUpdate,
   Component,
   components
@@ -52,7 +55,9 @@ 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((prop2) => prop2.name === propName);
@@ -60,7 +65,9 @@ const createElementsTree = ({
             throw Error(`${propName} is not data source`);
           }
           const dataSourceId = prop.value;
-          onDataSourceUpdate(dataSourceId, value);
+          const newValues = /* @__PURE__ */ new Map();
+          newValues.set(dataSourceId, value);
+          onDataSourceUpdate(newValues);
         }
       },
       children: root

package/lib/tree/root.js

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useCallback } from "react";
 import {
   atom,
   computed
@@ -8,7 +8,8 @@ import { WebstudioComponent } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 const InstanceRoot = ({
   data,
-  computeExpressions,
+  executeComputingExpressions,
+  executeEffectfulExpression,
   Component,
   components
 }) => {
@@ -30,7 +31,7 @@ const InstanceRoot = ({
           }
         }
         try {
-          const result = computeExpressions(dataSourceValues);
+          const result = executeComputingExpressions(dataSourceValues);
           for (const [id, value] of result) {
             dataSourceValues.set(id, value);
           }
@@ -42,6 +43,16 @@ const InstanceRoot = ({
     );
   }
   const dataSourceValuesStore = dataSourceValuesStoreRef.current;
+  const onDataSourceUpdate = useCallback(
+    (newValues) => {
+      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 ?? "/",
@@ -52,12 +63,9 @@ 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
   });