@webstudio-is/react-sdk 0.79.0 → 0.80.0

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

package/lib/types/components/component-meta.d.ts

@@ -366,6 +366,24 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: string | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        control: z.ZodLiteral<"action">;
+        type: z.ZodLiteral<"action">;
+        label: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+        required: z.ZodBoolean;
+    }, "strip", z.ZodTypeAny, {
+        type: "action";
+        required: boolean;
+        control: "action";
+        label?: string | undefined;
+        description?: string | undefined;
+    }, {
+        type: "action";
+        required: boolean;
+        control: "action";
+        label?: string | undefined;
+        description?: string | undefined;
     }>]>>;
     initialProps: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
 }, "strip", z.ZodTypeAny, {
@@ -490,6 +508,12 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: string | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "action";
+        required: boolean;
+        control: "action";
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }, {
@@ -614,6 +638,12 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: string | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "action";
+        required: boolean;
+        control: "action";
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }>;

package/lib/types/context.d.ts

@@ -29,10 +29,13 @@ export type Params = {
      */
     assetBaseUrl: string;
 };
+export type DataSourceValues = Map<DataSource["id"], unknown>;
 export declare const ReactSdkContext: import("react").Context<Params & {
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
-    setDataSourceValue: (instanceId: Instance["id"], prop: Prop["name"], value: unknown) => void;
+    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
+    executeEffectfulExpression: (expression: string, values: DataSourceValues) => DataSourceValues;
+    setDataSourceValues: (newValues: DataSourceValues) => void;
+    setBoundDataSourceValue: (instanceId: Instance["id"], prop: Prop["name"], value: unknown) => void;
 }>;

package/lib/types/embed-template.d.ts

@@ -213,6 +213,33 @@ declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
         code: string;
         type: "expression";
     } | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"action">;
+    name: z.ZodString;
+    value: z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"execute">;
+        code: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        code: string;
+        type: "execute";
+    }, {
+        code: string;
+        type: "execute";
+    }>, "many">;
+}, "strip", z.ZodTypeAny, {
+    name: string;
+    type: "action";
+    value: {
+        code: string;
+        type: "execute";
+    }[];
+}, {
+    name: string;
+    type: "action";
+    value: {
+        code: string;
+        type: "execute";
+    }[];
 }>]>;
 type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
 declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
@@ -2357,6 +2384,16 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        name: string;
+        type: "action";
+        value: {
+            code: string;
+            type: "execute";
+        }[];
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     })[];
     dataSources: ({
         name: string;
@@ -2611,4 +2648,5 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
     }[];
 };
+export type EmbedTemplateData = ReturnType<typeof generateDataFromEmbedTemplate>;
 export {};

package/lib/types/expression.d.ts

@@ -1,11 +1,19 @@
-type TransformIdentifier = (id: string) => string;
-export declare const validateExpression: (code: string, transformIdentifier?: TransformIdentifier) => string;
+type TransformIdentifier = (id: string, assignee: boolean) => string;
+export declare const validateExpression: (code: string, options?: {
+    effectful?: boolean;
+    transformIdentifier?: TransformIdentifier;
+}) => string;
 /**
  * Generates a function body expecting map as _variables argument
  * and outputing map of results
  */
-export declare const generateExpressionsComputation: (variables: Set<string>, expressions: Map<string, string>) => string;
-export declare const executeExpressions: (variables: Map<string, unknown>, expressions: Map<string, string>) => Map<string, unknown>;
+export declare const generateComputingExpressions: (expressions: Map<string, string>, allowedVariables: Set<string>) => string;
+export declare const executeComputingExpressions: (expressions: Map<string, string>, variables: Map<string, unknown>) => Map<string, unknown>;
+export declare const generateEffectfulExpression: (code: string, allowedVariables: Set<string>) => string;
+export declare const executeEffectfulExpression: (code: string, variables: Map<string, unknown>) => Map<string, unknown>;
+type Values = Map<string, unknown>;
 export declare const encodeDataSourceVariable: (id: string) => string;
+export declare const encodeVariablesMap: (values: Values) => Values;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
+export declare const decodeVariablesMap: (values: Values) => Values;
 export {};

package/lib/types/index.d.ts

@@ -7,4 +7,4 @@ export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, t
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, generateExpressionsComputation, executeExpressions, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";
+export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";

package/lib/types/props.d.ts

@@ -57,6 +57,16 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
+} | {
+    name: string;
+    type: "action";
+    value: {
+        code: string;
+        type: "execute";
+    }[];
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 }>) => PropsByInstanceId;
 export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, unknown>;
 export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {