@webstudio-is/react-sdk 0.99.1-251324f.0 → 0.99.1-48ee023.0

package/lib/index.js

@@ -29,13 +29,7 @@ var ReactSdkContext = createContext({
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
   assetsStore: atom(/* @__PURE__ */ new Map()),
   pagesStore: atom(/* @__PURE__ */ new Map()),
-  dataSourceValuesStore: atom(/* @__PURE__ */ new Map()),
-  executeEffectfulExpression: () => {
-    throw Error("React SDK executeEffectfulExpression is not implemented");
-  },
-  setDataSourceValues: () => {
-    throw Error("React SDK setDataSourceValues is not implemented");
-  },
+  dataSourcesLogicStore: atom(/* @__PURE__ */ new Map()),
   indexesWithinAncestors: /* @__PURE__ */ new Map()
 });
 
@@ -51,9 +45,7 @@ var createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
-  dataSourceValuesStore,
-  executeEffectfulExpression: executeEffectfulExpression2,
-  onDataSourceUpdate,
+  dataSourcesLogicStore,
   indexesWithinAncestors,
   Component,
   components,
@@ -90,14 +82,12 @@ var createElementsTree = ({
         propsByInstanceIdStore,
         assetsStore,
         pagesStore,
-        dataSourceValuesStore,
+        dataSourcesLogicStore,
         renderer,
         imageLoader,
         assetBaseUrl,
         imageBaseUrl,
-        indexesWithinAncestors,
-        executeEffectfulExpression: executeEffectfulExpression2,
-        setDataSourceValues: onDataSourceUpdate
+        indexesWithinAncestors
       },
       children: root
     }
@@ -160,8 +150,7 @@ var createInstanceElement = ({
 
 // src/tree/root.ts
 import {
-  useRef,
-  useCallback
+  useRef
 } from "react";
 import {
   atom as atom2,
@@ -190,16 +179,14 @@ var getPropsByInstanceId = (props) => {
 var useInstanceProps = (instanceId) => {
   const {
     propsByInstanceIdStore,
-    dataSourceValuesStore,
-    executeEffectfulExpression: executeEffectfulExpression2,
-    setDataSourceValues,
+    dataSourcesLogicStore,
     indexesWithinAncestors
   } = useContext(ReactSdkContext);
   const index = indexesWithinAncestors.get(instanceId);
   const instancePropsObjectStore = useMemo(() => {
     return computed(
-      [propsByInstanceIdStore, dataSourceValuesStore],
-      (propsByInstanceId, dataSourceValues) => {
+      [propsByInstanceIdStore, dataSourcesLogicStore],
+      (propsByInstanceId, dataSourcesLogic) => {
         const instancePropsObject2 = {};
         if (index !== void 0) {
           instancePropsObject2[indexAttribute] = index.toString();
@@ -214,29 +201,17 @@ var useInstanceProps = (instanceId) => {
           }
           if (prop.type === "dataSource") {
             const dataSourceId = prop.value;
-            const value = dataSourceValues.get(dataSourceId);
+            const value = dataSourcesLogic.get(dataSourceId);
             if (value !== void 0) {
               instancePropsObject2[prop.name] = value;
             }
             continue;
           }
           if (prop.type === "action") {
-            instancePropsObject2[prop.name] = (...args) => {
-              for (const value of prop.value) {
-                if (value.type === "execute") {
-                  const argsMap = /* @__PURE__ */ new Map();
-                  for (const [i, name] of value.args.entries()) {
-                    argsMap.set(name, args[i]);
-                  }
-                  const newValues = executeEffectfulExpression2(
-                    value.code,
-                    argsMap,
-                    dataSourceValues
-                  );
-                  setDataSourceValues(newValues);
-                }
-              }
-            };
+            const action = dataSourcesLogic.get(prop.id);
+            if (typeof action === "function") {
+              instancePropsObject2[prop.name] = action;
+            }
             continue;
           }
           instancePropsObject2[prop.name] = prop.value;
@@ -244,14 +219,7 @@ var useInstanceProps = (instanceId) => {
         return instancePropsObject2;
       }
     );
-  }, [
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    instanceId,
-    executeEffectfulExpression2,
-    setDataSourceValues,
-    index
-  ]);
+  }, [propsByInstanceIdStore, dataSourcesLogicStore, instanceId, index]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };
@@ -415,51 +383,35 @@ var InstanceRoot = ({
   scripts,
   imageLoader
 }) => {
-  const {
-    indexesWithinAncestors,
-    executeComputingExpressions: executeComputingExpressions2,
-    executeEffectfulExpression: executeEffectfulExpression2
-  } = utils;
+  const { indexesWithinAncestors, getDataSourcesLogic } = utils;
   const dataSourceVariablesStoreRef = useRef(void 0);
   if (dataSourceVariablesStoreRef.current === void 0) {
     dataSourceVariablesStoreRef.current = atom2(/* @__PURE__ */ new Map());
   }
   const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
-  const dataSourceValuesStoreRef = useRef(void 0);
-  if (dataSourceValuesStoreRef.current === void 0) {
-    dataSourceValuesStoreRef.current = computed2(
+  const dataSourcesLogicStoreRef = useRef(void 0);
+  if (dataSourcesLogicStoreRef.current === void 0) {
+    dataSourcesLogicStoreRef.current = computed2(
       dataSourceVariablesStore,
       (dataSourceVariables) => {
-        const dataSourceValues = /* @__PURE__ */ new Map();
-        for (const [dataSourceId, dataSource] of data.build.dataSources) {
-          if (dataSource.type === "variable") {
-            const value = dataSourceVariables.get(dataSourceId) ?? dataSource.value.value;
-            dataSourceValues.set(dataSourceId, value);
-          }
-        }
         try {
-          const result = executeComputingExpressions2(dataSourceValues);
-          for (const [id, value] of result) {
-            dataSourceValues.set(id, value);
-          }
+          const getVariable = (id) => {
+            return dataSourceVariables.get(id);
+          };
+          const setVariable = (id, value) => {
+            const dataSourceVariables2 = new Map(dataSourceVariablesStore.get());
+            dataSourceVariables2.set(id, value);
+            dataSourceVariablesStore.set(dataSourceVariables2);
+          };
+          return getDataSourcesLogic(getVariable, setVariable);
         } catch (error) {
           console.error(error);
         }
-        return dataSourceValues;
+        return /* @__PURE__ */ new Map();
       }
     );
   }
-  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]
-  );
+  const dataSourcesLogicStore = dataSourcesLogicStoreRef.current;
   return createElementsTree({
     imageLoader,
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
@@ -472,9 +424,7 @@ var InstanceRoot = ({
     assetsStore: atom2(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom2(new Map(data.pages.map((page) => [page.id, page]))),
     indexesWithinAncestors,
-    executeEffectfulExpression: executeEffectfulExpression2,
-    dataSourceValuesStore,
-    onDataSourceUpdate,
+    dataSourcesLogicStore,
     Component: Component ?? WebstudioComponent,
     components,
     scripts
@@ -1111,6 +1061,118 @@ var decodeVariablesMap = (values) => {
   }
   return decodedValues;
 };
+var generateDataSources = ({
+  scope,
+  typed = false,
+  dataSources,
+  props
+}) => {
+  const variables = /* @__PURE__ */ new Map();
+  let body = "";
+  const output = /* @__PURE__ */ new Map();
+  const depsById = /* @__PURE__ */ new Map();
+  const codeById = /* @__PURE__ */ new Map();
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "expression") {
+      const deps = /* @__PURE__ */ new Set();
+      const newCode = validateExpression(dataSource.code, {
+        transformIdentifier: (identifier) => {
+          const depId = decodeDataSourceVariable(identifier);
+          const dep = depId ? dataSources.get(depId) : void 0;
+          if (dep) {
+            deps.add(dep.id);
+            return scope.getName(dep.id, dep.name);
+          }
+          console.error(`Unknown dependency "${identifier}"`);
+          return identifier;
+        }
+      });
+      depsById.set(dataSource.id, deps);
+      codeById.set(dataSource.id, newCode);
+    }
+  }
+  const sortedDataSources = sortTopologically(
+    new Set(dataSources.keys()),
+    depsById
+  );
+  for (const dataSourceId of sortedDataSources) {
+    const dataSource = dataSources.get(dataSourceId);
+    if (dataSource?.type === "variable") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const setterName = scope.getName(
+        `set$${dataSource.id}`,
+        `set$${dataSource.name}`
+      );
+      const initialValue = dataSource.value.value;
+      output.set(dataSource.id, valueName);
+      variables.set(dataSource.id, { valueName, setterName, initialValue });
+    }
+    if (dataSource?.type === "expression") {
+      const name = scope.getName(dataSource.id, dataSource.name);
+      const code = codeById.get(dataSourceId);
+      output.set(dataSource.id, name);
+      body += `let ${name} = (${code});
+`;
+    }
+  }
+  for (const prop of props.values()) {
+    if (prop.type !== "action") {
+      continue;
+    }
+    const name = scope.getName(prop.id, prop.name);
+    output.set(prop.id, name);
+    const setters = /* @__PURE__ */ new Set();
+    let args = void 0;
+    let newCode = "";
+    for (const value of prop.value) {
+      args = value.args;
+      newCode += validateExpression(value.code, {
+        effectful: true,
+        transformIdentifier: (identifier, assignee) => {
+          if (args?.includes(identifier)) {
+            return identifier;
+          }
+          const depId = decodeDataSourceVariable(identifier);
+          const dep = depId ? dataSources.get(depId) : void 0;
+          if (dep) {
+            const name2 = scope.getName(dep.id, dep.name);
+            if (assignee) {
+              setters.add(dep.id);
+            }
+            return name2;
+          }
+          console.error(`Unknown dependency "${identifier}"`);
+          return identifier;
+        }
+      });
+      newCode += `
+`;
+    }
+    if (args === void 0) {
+      continue;
+    }
+    if (typed) {
+      args = args.map((arg) => `${arg}: any`);
+    }
+    body += `let ${name} = (${args.join(", ")}) => {
+`;
+    body += newCode;
+    for (const dataSourceId of setters.values()) {
+      const variable = variables.get(dataSourceId);
+      if (variable) {
+        body += `${variable.setterName}(${variable.valueName})
+`;
+      }
+    }
+    body += `}
+`;
+  }
+  return {
+    variables,
+    body,
+    output
+  };
+};
 
 // src/embed-template.ts
 var EmbedTemplateText = z2.object({
@@ -1509,7 +1571,7 @@ var WsComponentMeta = z3.object({
 });
 
 // src/component-renderer.tsx
-import { getStyleDeclKey } from "@webstudio-is/sdk";
+import { createScope, getStyleDeclKey } from "@webstudio-is/sdk";
 
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
@@ -1644,25 +1706,46 @@ var renderComponentTemplate = ({
             new Map(instances),
             ["root"]
           ),
-          executeComputingExpressions: (values) => {
-            const expressions = /* @__PURE__ */ new Map();
-            for (const dataSource of data.dataSources) {
-              const name2 = encodeDataSourceVariable(dataSource.id);
-              if (dataSource.type === "expression") {
-                expressions.set(name2, dataSource.code);
-              }
-            }
-            return decodeVariablesMap(
-              executeComputingExpressions(
-                expressions,
-                encodeVariablesMap(values)
+          getDataSourcesLogic(getVariable, setVariable) {
+            const { variables, body, output } = generateDataSources({
+              scope: createScope(["_getVariable", "_setVariable", "_output"]),
+              props: new Map(data.props.map((prop) => [prop.id, prop])),
+              dataSources: new Map(
+                data.dataSources.map((dataSource) => [
+                  dataSource.id,
+                  dataSource
+                ])
               )
-            );
-          },
-          executeEffectfulExpression: (code, args, values) => {
-            return decodeVariablesMap(
-              executeEffectfulExpression(code, args, encodeVariablesMap(values))
-            );
+            });
+            let generatedCode = "";
+            for (const [dataSourceId, variable] of variables) {
+              const { valueName, setterName } = variable;
+              const initialValue = JSON.stringify(variable.initialValue);
+              generatedCode += `let ${valueName} = _getVariable("${dataSourceId}") ?? ${initialValue};
+`;
+              generatedCode += `let ${setterName} = (value) => _setVariable("${dataSourceId}", value);
+`;
+            }
+            generatedCode += body;
+            generatedCode += `let _output = new Map();
+`;
+            for (const [dataSourceId, variableName] of output) {
+              generatedCode += `_output.set('${dataSourceId}', ${variableName})
+`;
+            }
+            generatedCode += `return _output
+`;
+            try {
+              const executeFn = new Function(
+                "_getVariable",
+                "_setVariable",
+                generatedCode
+              );
+              return executeFn(getVariable, setVariable);
+            } catch (error) {
+              console.error(error);
+            }
+            return /* @__PURE__ */ new Map();
           }
         },
         Component: WebstudioComponent,
@@ -1687,6 +1770,9 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 };
 
 // src/generator.ts
+import {
+  createScope as createScope2
+} from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
   const indexesWithinAncestors = getIndexesWithinAncestors(
     siteData.metas,
@@ -1705,91 +1791,272 @@ var generateUtilsExport = (siteData) => {
   ${indexesWithinAncestorsEntries}
   ]);
   `;
-  const variables = /* @__PURE__ */ new Set();
-  const expressions = /* @__PURE__ */ new Map();
-  for (const dataSource of siteData.dataSources.values()) {
-    if (dataSource.type === "variable") {
-      variables.add(encodeDataSourceVariable(dataSource.id));
-    }
-    if (dataSource.type === "expression") {
-      expressions.set(encodeDataSourceVariable(dataSource.id), dataSource.code);
-    }
+  const { variables, body, output } = generateDataSources({
+    scope: createScope2(["_getVariable", "_setVariable", "_output"]),
+    typed: true,
+    dataSources: siteData.dataSources,
+    props: siteData.props
+  });
+  let generatedDataSources = "";
+  generatedDataSources += `const getDataSourcesLogic = (
+`;
+  generatedDataSources += `  _getVariable: (id: string) => unknown,
+`;
+  generatedDataSources += `  _setVariable: (id: string, value: unknown) => void
+`;
+  generatedDataSources += `) => {
+`;
+  for (const [dataSourceId, variable] of variables) {
+    const { valueName, setterName } = variable;
+    const initialValue = JSON.stringify(variable.initialValue);
+    generatedDataSources += `let ${valueName} = _getVariable("${dataSourceId}") ?? ${initialValue};
+`;
+    generatedDataSources += `let ${setterName} = (value: unknown) => _setVariable("${dataSourceId}", value);
+`;
   }
-  const generatedExecuteComputingExpressions = `
-  const rawExecuteComputingExpressions = (
-    _variables: Map<string, unknown>
-  ): Map<string, unknown> => {
-    ${generateComputingExpressions(expressions, variables)}
-  };
-  const executeComputingExpressions = (variables: Map<string, unknown>) => {
-    const encodedvariables = sdk.encodeVariablesMap(variables);
-    const encodedResult = rawExecuteComputingExpressions(encodedvariables);
-    return sdk.decodeVariablesMap(encodedResult);
-  };
-  `;
-  let effectfulExpressionsEntries = "";
-  for (const prop of siteData.props.values()) {
-    if (prop.type === "action") {
-      for (const executableValue of prop.value) {
-        const codeString = JSON.stringify(executableValue.code);
-        const generatedCode = generateEffectfulExpression(
-          executableValue.code,
-          new Set(executableValue.args),
-          variables
-        );
-        const generatedFunction = `(_args: Map<string, any>, _variables: Map<string, any>) => { ${generatedCode} }`;
-        effectfulExpressionsEntries += `[${codeString}, ${generatedFunction}],
+  generatedDataSources += body;
+  generatedDataSources += `let _output = new Map();
+`;
+  for (const [dataSourceId, variableName] of output) {
+    generatedDataSources += `_output.set('${dataSourceId}', ${variableName})
 `;
-      }
-    }
   }
-  const generatedExecuteEffectfulExpression = `const generatedEffectfulExpressions = new Map<
-    string,
-    (args: Map<string, any>, variables: Map<string, any>) => Map<string, unknown>
-  >([
-  ${effectfulExpressionsEntries}
-  ]);
-
-  const rawExecuteEffectfulExpression = (
-    code: string,
-    args: Map<string, unknown>,
-    variables: Map<string, unknown>
-  ): Map<string, unknown> => {
-    if(generatedEffectfulExpressions.has(code)) {
-      return generatedEffectfulExpressions.get(code)!(args, variables);
-    }
-    console.error("Effectful expression not found", code);
-    throw new Error("Effectful expression not found");
-  };
-
-  const executeEffectfulExpression = (
-    code: string,
-    args: Map<string, unknown>,
-    variables: Map<string, unknown>
-  ) => {
-    const encodedvariables = sdk.encodeVariablesMap(variables);
-    const encodedResult = rawExecuteEffectfulExpression(code, args, encodedvariables);
-    return sdk.decodeVariablesMap(encodedResult);
-  };
-  `;
+  generatedDataSources += `return _output
+`;
+  generatedDataSources += `}
+`;
   return `
   /* eslint-disable */
 
   ${generatedIndexesWithinAncestors.trim()}
 
-  ${generatedExecuteComputingExpressions.trim()}
-
-  ${generatedExecuteEffectfulExpression.trim()}
+  ${generatedDataSources}
 
   export const utils = {
     indexesWithinAncestors,
-    executeComputingExpressions,
-    executeEffectfulExpression,
+    getDataSourcesLogic,
   };
 
   /* eslint-enable */
   `;
 };
+
+// src/component-generator.ts
+import { findTreeInstanceIds, parseComponentName } from "@webstudio-is/sdk";
+var generateJsxElement = ({
+  scope,
+  instance,
+  props,
+  indexesWithinAncestors,
+  children
+}) => {
+  let conditionVariableName;
+  let generatedProps = "";
+  generatedProps += `
+${idAttribute}=${JSON.stringify(instance.id)}`;
+  generatedProps += `
+${componentAttribute}=${JSON.stringify(
+    instance.component
+  )}`;
+  const index = indexesWithinAncestors.get(instance.id);
+  if (index !== void 0) {
+    generatedProps += `
+${indexAttribute}="${index}"`;
+  }
+  for (const prop of props.values()) {
+    if (prop.instanceId !== instance.id) {
+      continue;
+    }
+    if (prop.name === showAttribute) {
+      if (prop.type === "boolean" && prop.value === false) {
+        return "";
+      }
+      if (prop.type === "dataSource") {
+        const dataSourceId = prop.value;
+        conditionVariableName = encodeDataSourceVariable(dataSourceId);
+      }
+      continue;
+    }
+    if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]") {
+      generatedProps += `
+${prop.name}={${JSON.stringify(prop.value)}}`;
+      continue;
+    }
+    if (prop.type === "asset" || prop.type === "page") {
+      continue;
+    }
+    if (prop.type === "dataSource") {
+      const dataSourceId = prop.value;
+      const dataSourceVariable = encodeDataSourceVariable(dataSourceId);
+      generatedProps += `
+${prop.name}={${dataSourceVariable}}`;
+      continue;
+    }
+    if (prop.type === "action") {
+      const propVariable = scope.getName(prop.id, prop.name);
+      generatedProps += `
+${prop.name}={${propVariable}}`;
+      continue;
+    }
+    prop;
+  }
+  let generatedElement = "";
+  if (conditionVariableName) {
+    generatedElement += `{${conditionVariableName} &&
+`;
+  }
+  const [_namespace, shortName] = parseComponentName(instance.component);
+  const componentVariable = scope.getName(instance.component, shortName);
+  if (instance.children.length === 0) {
+    generatedElement += `<${componentVariable}${generatedProps} />
+`;
+  } else {
+    generatedElement += `<${componentVariable}${generatedProps}>
+`;
+    generatedElement += children;
+    generatedElement += `</${componentVariable}>
+`;
+  }
+  if (conditionVariableName) {
+    generatedElement += `}
+`;
+  }
+  return generatedElement;
+};
+var generateJsxChildren = ({
+  scope,
+  children,
+  instances,
+  props,
+  indexesWithinAncestors
+}) => {
+  let generatedChildren = "";
+  for (const child of children) {
+    if (child.type === "text") {
+      generatedChildren += child.value.split("\n").map((line) => `{${JSON.stringify(line)}}
+`).join(`<br />
+`);
+      continue;
+    }
+    if (child.type === "id") {
+      const instanceId = child.value;
+      const instance = instances.get(instanceId);
+      if (instance === void 0) {
+        continue;
+      }
+      generatedChildren += generateJsxElement({
+        scope,
+        instance,
+        props,
+        indexesWithinAncestors,
+        children: generateJsxChildren({
+          scope,
+          children: instance.children,
+          instances,
+          props,
+          indexesWithinAncestors
+        })
+      });
+      continue;
+    }
+    child;
+  }
+  return generatedChildren;
+};
+var generateDataSources2 = ({
+  scope,
+  rootInstanceId,
+  instances,
+  props
+}) => {
+  let generatedDataSources = "";
+  generatedDataSources += `const { dataSourceValuesStore, setDataSourceValues, executeEffectfulExpression } = useContext(ReactSdkContext);
+`;
+  generatedDataSources += "const dataSourceValues = useStore(dataSourceValuesStore);\n";
+  const usedInstanceIds = findTreeInstanceIds(instances, rootInstanceId);
+  for (const prop of props.values()) {
+    if (prop.type === "dataSource" && usedInstanceIds.has(prop.instanceId)) {
+      const dataSourceId = prop.value;
+      const variableName = encodeDataSourceVariable(dataSourceId);
+      const key = JSON.stringify(dataSourceId);
+      generatedDataSources += `const ${variableName} = dataSourceValues.get(${key});
+`;
+    }
+    if (prop.type === "action") {
+      const propVariable = scope.getName(prop.id, prop.name);
+      let args = "";
+      for (const value of prop.value) {
+        const newArgs = value.args.map((arg) => `${arg}: unknown`).join(", ");
+        if (args !== "" && newArgs !== args) {
+          continue;
+        }
+        args = newArgs;
+      }
+      generatedDataSources += `const ${propVariable} = (${args}) => {
+`;
+      for (const value of prop.value) {
+        if (value.type === "execute") {
+          generatedDataSources += `const newValues = executeEffectfulExpression(
+`;
+          generatedDataSources += `value.code,
+`;
+          generatedDataSources += `new Map([`;
+          generatedDataSources += value.args.map((arg) => `[${JSON.stringify(arg)}, ${arg}]`).join(", ");
+          generatedDataSources += `]),
+`;
+          generatedDataSources += `dataSourceValues
+`;
+          generatedDataSources += `);
+`;
+          generatedDataSources += `setDataSourceValues(newValues);
+`;
+        }
+      }
+      generatedDataSources += `};
+`;
+    }
+  }
+  return generatedDataSources;
+};
+var generatePageComponent = ({
+  scope,
+  rootInstanceId,
+  instances,
+  props,
+  indexesWithinAncestors
+}) => {
+  const instance = instances.get(rootInstanceId);
+  if (instance === void 0) {
+    return "";
+  }
+  const generatedDataSources = generateDataSources2({
+    scope,
+    rootInstanceId,
+    instances,
+    props
+  });
+  const generatedJsx = generateJsxElement({
+    scope,
+    instance,
+    props,
+    indexesWithinAncestors,
+    children: generateJsxChildren({
+      scope,
+      children: instance.children,
+      instances,
+      props,
+      indexesWithinAncestors
+    }) + "{props.scripts}\n"
+  });
+  let generatedComponent = "";
+  generatedComponent += `export const Page = (props: { scripts: ReactNode }) => {
+`;
+  generatedComponent += `${generatedDataSources}`;
+  generatedComponent += `return ${generatedJsx}`;
+  generatedComponent += `};
+`;
+  return generatedComponent;
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateStyleDecl,
@@ -1816,7 +2083,9 @@ export {
   generateComputingExpressions,
   generateCssText,
   generateDataFromEmbedTemplate,
+  generateDataSources,
   generateEffectfulExpression,
+  generatePageComponent,
   generateUtilsExport,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,

package/lib/types/component-generator.d.ts

@@ -0,0 +1,249 @@
+import type { Instances, Instance, Props, Scope } from "@webstudio-is/sdk";
+import type { IndexesWithinAncestors } from "./instance-utils";
+export declare const generateJsxElement: ({ scope, instance, props, indexesWithinAncestors, children, }: {
+    scope: Scope;
+    instance: Instance;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+    children: string;
+}) => string;
+/**
+ * Jsx element and children are generated separately to be able
+ * to inject some scripts into Body if necessary
+ */
+export declare const generateJsxChildren: ({ scope, children, instances, props, indexesWithinAncestors, }: {
+    scope: Scope;
+    children: Instance["children"];
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            value: string;
+            type: "text";
+        } | {
+            value: string;
+            type: "id";
+        })[];
+        label?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+}) => string;
+export declare const generatePageComponent: ({ scope, rootInstanceId, instances, props, indexesWithinAncestors, }: {
+    scope: Scope;
+    rootInstanceId: Instance["id"];
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            value: string;
+            type: "text";
+        } | {
+            value: string;
+            type: "id";
+        })[];
+        label?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+}) => string;

package/lib/types/component-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/context.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ReadableAtom } from "nanostores";
-import type { DataSource, Assets } from "@webstudio-is/sdk";
+import type { Assets } from "@webstudio-is/sdk";
 import type { Pages, PropsByInstanceId } from "./props";
 import type { IndexesWithinAncestors } from "./instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
@@ -30,14 +30,11 @@ export type Params = {
      */
     assetBaseUrl: string;
 };
-export type DataSourceValues = Map<DataSource["id"], unknown>;
 export declare const ReactSdkContext: import("react").Context<Params & {
     imageLoader: ImageLoader;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
-    setDataSourceValues: (newValues: DataSourceValues) => void;
+    dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }>;

package/lib/types/expression.d.ts

@@ -1,3 +1,4 @@
+import type { DataSources, Props, Scope } from "@webstudio-is/sdk";
 type TransformIdentifier = (id: string, assignee: boolean) => string;
 export declare const validateExpression: (code: string, options?: {
     effectful?: boolean;
@@ -17,4 +18,109 @@ 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;
+type VariableName = string;
+export declare const generateDataSources: ({ scope, typed, dataSources, props, }: {
+    scope: Scope;
+    typed?: boolean | undefined;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        code: string;
+        type: "expression";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+}) => {
+    variables: Map<string, {
+        valueName: VariableName;
+        setterName: VariableName;
+        initialValue: unknown;
+    }>;
+    body: string;
+    output: Map<string, string>;
+};
 export {};

package/lib/types/generator.d.ts

@@ -1,7 +1,6 @@
-import type { DataSources, Instance, Instances, Page, Props } from "@webstudio-is/sdk";
+import { type DataSources, type Instance, type Instances, type Page, type Props } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "./components/component-meta";
 import { type IndexesWithinAncestors } from "./instance-utils";
-import type { DataSourceValues } from "./context";
 type PageData = {
     page: Page;
     metas: Map<Instance["component"], WsComponentMeta>;
@@ -11,8 +10,7 @@ type PageData = {
 };
 export type GeneratedUtils = {
     indexesWithinAncestors: IndexesWithinAncestors;
-    executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
+    getDataSourcesLogic: (getVariable: (id: string) => unknown, setVariable: (id: string, value: unknown) => void) => Map<string, unknown>;
 };
 /**
  * Generates data based utilities at build time

package/lib/types/index.d.ts

@@ -7,8 +7,9 @@ export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, t
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, computeExpressionsDependencies, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";
+export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, computeExpressionsDependencies, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, generateDataSources, } from "./expression";
 export { renderComponentTemplate } from "./component-renderer";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";
+export { generatePageComponent } from "./component-generator";

package/lib/types/tree/create-elements-tree.d.ts

@@ -2,12 +2,12 @@ import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } fr
 import type { ReadableAtom } from "nanostores";
 import type { Instance, Instances, Assets } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
-import { type Params, type DataSourceValues } from "../context";
+import { type Params } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
 import type { IndexesWithinAncestors } from "../instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
-export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, indexesWithinAncestors, Component, components, scripts, }: Params & {
+export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourcesLogicStore, indexesWithinAncestors, Component, components, scripts, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -26,9 +26,7 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
-    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-    onDataSourceUpdate: (newValues: DataSourceValues) => void;
+    dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.99.1-251324f.0",
+  "version": "0.99.1-48ee023.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -13,11 +13,12 @@
     "jest": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "strip-indent": "^4.0.0",
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "^1.0.8-251324f.0",
-    "@webstudio-is/tsconfig": "^1.0.8-251324f.0"
+    "@webstudio-is/jest-config": "^1.0.8-48ee023.0",
+    "@webstudio-is/tsconfig": "^1.0.8-48ee023.0"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -34,10 +35,10 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "^0.99.1-251324f.0",
-    "@webstudio-is/fonts": "^0.99.1-251324f.0",
-    "@webstudio-is/image": "^0.99.1-251324f.0",
-    "@webstudio-is/sdk": "^0.99.1-251324f.0"
+    "@webstudio-is/css-engine": "^0.99.1-48ee023.0",
+    "@webstudio-is/fonts": "^0.99.1-48ee023.0",
+    "@webstudio-is/image": "^0.99.1-48ee023.0",
+    "@webstudio-is/sdk": "^0.99.1-48ee023.0"
   },
   "exports": {
     ".": {