@webstudio-is/react-sdk 0.78.0 → 0.80.0

package/lib/cjs/expression.js

@@ -29,27 +29,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var expression_exports = {};
 __export(expression_exports, {
   decodeDataSourceVariable: () => decodeDataSourceVariable,
+  decodeVariablesMap: () => decodeVariablesMap,
   encodeDataSourceVariable: () => encodeDataSourceVariable,
-  executeExpressions: () => executeExpressions,
-  generateExpressionsComputation: () => generateExpressionsComputation,
+  encodeVariablesMap: () => encodeVariablesMap,
+  executeComputingExpressions: () => executeComputingExpressions,
+  executeEffectfulExpression: () => executeEffectfulExpression,
+  generateComputingExpressions: () => generateComputingExpressions,
+  generateEffectfulExpression: () => generateEffectfulExpression,
   validateExpression: () => validateExpression
 });
 module.exports = __toCommonJS(expression_exports);
 var import_jsep = __toESM(require("jsep"), 1);
-const generateCode = (node, failOnForbidden, transformIdentifier) => {
+var import_assignment = __toESM(require("@jsep-plugin/assignment"), 1);
+import_jsep.default.plugins.register(import_assignment.default);
+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}"`);
@@ -57,11 +65,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}`;
@@ -73,6 +83,7 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
     const arg = generateCode(
       node.argument,
       failOnForbidden,
+      effectful,
       transformIdentifier
     );
     return `${node.operator}${arg}`;
@@ -81,18 +92,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(", ")}]`;
   }
@@ -101,6 +119,7 @@ const generateCode = (node, failOnForbidden, transformIdentifier) => {
       const callee2 = generateCode(
         node.callee,
         false,
+        effectful,
         transformIdentifier
       );
       throw Error(`Cannot call "${callee2}"`);
@@ -108,10 +127,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(", ")})`;
   }
@@ -127,12 +147,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 = (0, import_jsep.default)(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) {
@@ -148,19 +194,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);
   }
@@ -169,7 +219,7 @@ const generateExpressionsComputation = (variables, expressions) => {
     depsById
   );
   let generatedCode = "";
-  for (const id of variables) {
+  for (const id of inputVariables) {
     generatedCode += `const ${id} = _variables.get('${id}');
 `;
   }
@@ -190,10 +240,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);
@@ -204,6 +302,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);
@@ -211,3 +316,13 @@ 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;
+};

package/lib/cjs/index.js

@@ -22,10 +22,14 @@ __export(src_exports, {
   ReactSdkContext: () => import_context.ReactSdkContext,
   componentCategories: () => import_component_meta.componentCategories,
   decodeDataSourceVariable: () => import_expression.decodeDataSourceVariable,
+  decodeVariablesMap: () => import_expression.decodeVariablesMap,
   defaultStates: () => import_component_meta.defaultStates,
   encodeDataSourceVariable: () => import_expression.encodeDataSourceVariable,
-  executeExpressions: () => import_expression.executeExpressions,
-  generateExpressionsComputation: () => import_expression.generateExpressionsComputation,
+  encodeVariablesMap: () => import_expression.encodeVariablesMap,
+  executeComputingExpressions: () => import_expression.executeComputingExpressions,
+  executeEffectfulExpression: () => import_expression.executeEffectfulExpression,
+  generateComputingExpressions: () => import_expression.generateComputingExpressions,
+  generateEffectfulExpression: () => import_expression.generateEffectfulExpression,
   getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
   stateCategories: () => import_component_meta.stateCategories,
   useInstanceProps: () => import_props.useInstanceProps,

package/lib/cjs/props.js

@@ -44,7 +44,13 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
-  const { propsByInstanceIdStore, dataSourceValuesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const {
+    propsByInstanceIdStore,
+    dataSourceValuesStore,
+    executeEffectfulExpression,
+    setDataSourceValues,
+    renderer
+  } = (0, import_react.useContext)(import_context.ReactSdkContext);
   const instancePropsObjectStore = (0, import_react.useMemo)(() => {
     return (0, import_nanostores.computed)(
       [propsByInstanceIdStore, dataSourceValuesStore],
@@ -66,12 +72,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 = (0, import_react2.useStore)(instancePropsObjectStore);
   return instancePropsObject;
 };

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

@@ -35,6 +35,7 @@ const createElementsTree = ({
   assetsStore,
   pagesStore,
   dataSourceValuesStore,
+  executeEffectfulExpression,
   onDataSourceUpdate,
   Component,
   components
@@ -75,7 +76,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);
@@ -83,7 +86,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/cjs/tree/root.js

@@ -28,7 +28,8 @@ var import_webstudio_component = require("./webstudio-component");
 var import_props = require("../props");
 const InstanceRoot = ({
   data,
-  computeExpressions,
+  executeComputingExpressions,
+  executeEffectfulExpression,
   Component,
   components
 }) => {
@@ -50,7 +51,7 @@ const InstanceRoot = ({
           }
         }
         try {
-          const result = computeExpressions(dataSourceValues);
+          const result = executeComputingExpressions(dataSourceValues);
           for (const [id, value] of result) {
             dataSourceValues.set(id, value);
           }
@@ -62,6 +63,16 @@ const InstanceRoot = ({
     );
   }
   const dataSourceValuesStore = dataSourceValuesStoreRef.current;
+  const onDataSourceUpdate = (0, import_react.useCallback)(
+    (newValues) => {
+      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
+      for (const [dataSourceId, value] of newValues) {
+        dataSourceVariables.set(dataSourceId, value);
+      }
+      dataSourceVariablesStore.set(dataSourceVariables);
+    },
+    [dataSourceVariablesStore]
+  );
   return (0, import_create_elements_tree.createElementsTree)({
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
@@ -72,12 +83,9 @@ const InstanceRoot = ({
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: (0, import_nanostores.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 ?? import_webstudio_component.WebstudioComponent,
     components
   });

package/lib/context.js

@@ -7,8 +7,14 @@ const ReactSdkContext = createContext({
   assetsStore: atom(/* @__PURE__ */ new Map()),
   pagesStore: atom(/* @__PURE__ */ new Map()),
   dataSourceValuesStore: atom(/* @__PURE__ */ 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");
   }
 });
 export {

package/lib/css/normalize.js

@@ -1,22 +1,14 @@
-import * as presets from "./presets";
+import { borders, outline } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [
-  boxSizing,
-  ...presets.borders,
-  ...presets.outline
-];
+const baseStyle = [boxSizing, ...borders, ...outline];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
 const aside = baseStyle;
-const blockquote = [
-  ...baseStyle,
-  ...presets.blockquote
-];
-const figure = [...baseStyle, ...presets.margins];
+const figure = baseStyle;
 const footer = baseStyle;
 const header = baseStyle;
 const main = baseStyle;
@@ -24,19 +16,19 @@ const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
 const label = baseStyle;
-const h1 = [...baseStyle, ...presets.h1];
-const h2 = [...baseStyle, ...presets.h2];
-const h3 = [...baseStyle, ...presets.h3];
-const h4 = [...baseStyle, ...presets.h4];
-const h5 = [...baseStyle, ...presets.h5];
-const h6 = [...baseStyle, ...presets.h6];
+const h1 = baseStyle;
+const h2 = baseStyle;
+const h3 = baseStyle;
+const h4 = baseStyle;
+const h5 = baseStyle;
+const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
 const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;
-const p = [...baseStyle, ...presets.verticalMargins];
+const p = baseStyle;
 const span = baseStyle;
 const html = [
   /* 1 */
@@ -55,7 +47,7 @@ const html = [
     value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const body = [
   /* 1 */
@@ -80,7 +72,7 @@ const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: "Arial, sans-serif"
+      value: "Arial, Roboto, sans-serif"
     }
   },
   {
@@ -92,7 +84,7 @@ const body = [
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const hr = [
   /* 1 */
@@ -106,8 +98,7 @@ const hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...presets.borders,
-  ...presets.margins
+  ...borders
 ];
 const b = [
   {
@@ -115,7 +106,7 @@ const b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const strong = b;
 const code = [
@@ -133,7 +124,7 @@ const code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const kbd = code;
 const samp = code;
@@ -144,7 +135,7 @@ const small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const subSupBase = [
   {
@@ -164,7 +155,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const sub = [
   ...subSupBase,
@@ -186,7 +177,7 @@ const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...presets.borders,
+  ...borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -238,7 +229,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const input = buttonBase;
 const optgroup = buttonBase;
@@ -269,7 +260,7 @@ const legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const progress = [
   {
@@ -277,7 +268,7 @@ const progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 const summary = [
   {
@@ -285,7 +276,7 @@ const summary = [
     value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
-  ...presets.borders
+  ...borders
 ];
 export {
   a,
@@ -293,7 +284,6 @@ export {
   article,
   aside,
   b,
-  blockquote,
   body,
   button,
   code,