@webstudio-is/react-sdk 0.79.0 → 0.81.0

package/lib/cjs/context.js

@@ -30,7 +30,13 @@ const ReactSdkContext = (0, import_react.createContext)({
   assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
   pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
   dataSourceValuesStore: (0, import_nanostores.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");
   }
 });

package/lib/cjs/css/normalize.js

@@ -141,7 +141,7 @@ const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: "Arial, sans-serif"
+      value: "Arial, Roboto, sans-serif"
     }
   },
   {

package/lib/cjs/embed-template.js

@@ -32,11 +32,12 @@ const EmbedTemplateText = import_zod.z.object({
   type: import_zod.z.literal("text"),
   value: import_zod.z.string()
 });
+const DataSourceVariableRef = import_zod.z.object({
+  type: import_zod.z.literal("variable"),
+  name: import_zod.z.string()
+});
 const DataSourceRef = import_zod.z.union([
-  import_zod.z.object({
-    type: import_zod.z.literal("variable"),
-    name: import_zod.z.string()
-  }),
+  DataSourceVariableRef,
   import_zod.z.object({
     type: import_zod.z.literal("expression"),
     name: import_zod.z.string(),
@@ -67,6 +68,16 @@ const EmbedTemplateProp = import_zod.z.union([
     name: import_zod.z.string(),
     dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.array(import_zod.z.string())
+  }),
+  import_zod.z.object({
+    type: import_zod.z.literal("action"),
+    name: import_zod.z.string(),
+    value: import_zod.z.array(
+      import_zod.z.object({
+        type: import_zod.z.literal("execute"),
+        code: import_zod.z.string()
+      })
+    )
   })
 ]);
 const EmbedTemplateStyleDeclRaw = import_zod.z.object({
@@ -97,6 +108,28 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
       if (item.props) {
         for (const prop of item.props) {
           const propId = (0, import_nanoid.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: (0, import_expression.validateExpression)(value.code, {
+                    effectful: true,
+                    transformIdentifier: (ref) => {
+                      const id = dataSourceByRef.get(ref)?.id ?? ref;
+                      return (0, import_expression.encodeDataSourceVariable)(id);
+                    }
+                  })
+                };
+              })
+            });
+            continue;
+          }
           if (prop.dataSourceRef === void 0) {
             props.push({ id: propId, instanceId, ...prop });
             continue;
@@ -121,7 +154,13 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
                 id,
                 scopeInstanceId: instanceId,
                 name: dataSourceRef.name,
-                code: dataSourceRef.code
+                // replace all references with variable names
+                code: (0, import_expression.validateExpression)(dataSourceRef.code, {
+                  transformIdentifier: (ref) => {
+                    const id2 = dataSourceByRef.get(ref)?.id ?? ref;
+                    return (0, import_expression.encodeDataSourceVariable)(id2);
+                  }
+                })
               };
               dataSourceByRef.set(dataSourceRef.name, dataSource);
             } else {
@@ -207,21 +246,11 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     styles,
     defaultBreakpointId
   );
-  const dataSources = [];
-  for (const dataSource of dataSourceByRef.values()) {
-    if (dataSource.type === "expression") {
-      dataSource.code = (0, import_expression.validateExpression)(dataSource.code, (ref) => {
-        const id = dataSourceByRef.get(ref)?.id ?? ref;
-        return (0, import_expression.encodeDataSourceVariable)(id);
-      });
-    }
-    dataSources.push(dataSource);
-  }
   return {
     children,
     instances,
     props,
-    dataSources,
+    dataSources: Array.from(dataSourceByRef.values()),
     styleSourceSelections,
     styleSources,
     styles

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

@@ -72,7 +72,7 @@ const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: "Arial, sans-serif"
+      value: "Arial, Roboto, sans-serif"
     }
   },
   {

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