@webstudio-is/react-sdk 0.78.0 → 0.80.0

package/lib/types/css/presets.d.ts

@@ -1,285 +1,3 @@
 import type { Styles } from "./normalize";
 export declare const borders: Styles;
 export declare const outline: Styles;
-export declare const margins: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginRight";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginLeft";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const verticalMargins: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const blockquote: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginRight";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginLeft";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "paddingTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "paddingBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "paddingLeft";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "paddingRight";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "borderLeftWidth";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "borderLeftStyle";
-    value: {
-        type: "keyword";
-        value: string;
-        unit?: undefined;
-        r?: undefined;
-        g?: undefined;
-        b?: undefined;
-        alpha?: undefined;
-    };
-} | {
-    property: "borderLeftColor";
-    value: {
-        type: "rgb";
-        r: number;
-        g: number;
-        b: number;
-        alpha: number;
-        value?: undefined;
-        unit?: undefined;
-    };
-})[];
-export declare const h1: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const h2: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const h3: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const h4: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const h5: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];
-export declare const h6: ({
-    property: "marginTop";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "marginBottom";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-} | {
-    property: "fontSize";
-    value: {
-        type: "unit";
-        value: number;
-        unit: "px";
-    };
-})[];

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) => {

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.78.0",
+  "version": "0.80.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.78.0",
-    "@webstudio-is/css-data": "^0.78.0",
-    "@webstudio-is/css-engine": "^0.78.0",
-    "@webstudio-is/fonts": "^0.78.0",
-    "@webstudio-is/generate-arg-types": "^0.78.0",
-    "@webstudio-is/project-build": "^0.78.0"
+    "nanoevents": "^8.0.0",
+    "nanoid": "^4.0.2",
+    "nanostores": "^0.9.3",
+    "@webstudio-is/asset-uploader": "^0.80.0",
+    "@webstudio-is/css-data": "^0.80.0",
+    "@webstudio-is/css-engine": "^0.80.0",
+    "@webstudio-is/fonts": "^0.80.0",
+    "@webstudio-is/generate-arg-types": "^0.80.0",
+    "@webstudio-is/project-build": "^0.80.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");
   },
 });