@webstudio-is/react-sdk 0.99.1-596a55d.0 → 0.99.1-6ad9b47.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
@@ -937,117 +887,6 @@ var sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(), s
   }
   return sorted;
 };
-var 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, {
-      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}"`);
-      }
-    });
-    depsById.set(id, deps);
-  }
-  const sortedExpressions = sortTopologically(
-    new Set(expressions.keys()),
-    depsById
-  );
-  let generatedCode = "";
-  for (const id of inputVariables) {
-    generatedCode += `const ${id} = _variables.get('${id}');
-`;
-  }
-  for (const id of sortedExpressions) {
-    const code = expressions.get(id);
-    if (code === void 0) {
-      continue;
-    }
-    generatedCode += `const ${id} = (${code});
-`;
-  }
-  generatedCode += `return new Map([
-`;
-  for (const id of sortedExpressions) {
-    generatedCode += `  ['${id}', ${id}],
-`;
-  }
-  generatedCode += `]);`;
-  return generatedCode;
-};
-var executeComputingExpressions = (expressions, variables) => {
-  const generatedCode = generateComputingExpressions(
-    expressions,
-    new Set(variables.keys())
-  );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables);
-  return values;
-};
-var generateEffectfulExpression = (code, args, allowedVariables) => {
-  const inputVariables = /* @__PURE__ */ new Set();
-  const outputVariables = /* @__PURE__ */ new Set();
-  validateExpression(code, {
-    effectful: true,
-    transformIdentifier: (identifier, assignee) => {
-      if (args.has(identifier)) {
-        return identifier;
-      }
-      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 args) {
-    generatedCode += `let ${id} = _args.get('${id}');
-`;
-  }
-  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;
-};
-var executeEffectfulExpression = (code, args, variables) => {
-  const generatedCode = generateEffectfulExpression(
-    code,
-    new Set(args.keys()),
-    new Set(variables.keys())
-  );
-  const executeFn = new Function("_variables", "_args", generatedCode);
-  const values = executeFn(variables, args);
-  return values;
-};
 var computeExpressionDependencies = (expressions, expressionId, dependencies) => {
   const depsById = dependencies.get(expressionId);
   if (depsById) {
@@ -1087,13 +926,6 @@ var encodeDataSourceVariable = (id) => {
   const encoded = id.replaceAll("-", "__DASH__");
   return `${dataSourceVariablePrefix}${encoded}`;
 };
-var encodeVariablesMap = (values) => {
-  const encodedValues = /* @__PURE__ */ new Map();
-  for (const [id, value] of values) {
-    encodedValues.set(encodeDataSourceVariable(id), value);
-  }
-  return encodedValues;
-};
 var decodeDataSourceVariable = (name) => {
   if (name.startsWith(dataSourceVariablePrefix)) {
     const encoded = name.slice(dataSourceVariablePrefix.length);
@@ -1101,15 +933,117 @@ var decodeDataSourceVariable = (name) => {
   }
   return;
 };
-var 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);
+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 decodedValues;
+  return {
+    variables,
+    body,
+    output
+  };
 };
 
 // src/embed-template.ts
@@ -1208,11 +1142,11 @@ var getDataSourceValue = (value) => {
   value;
   throw Error("Impossible case");
 };
-var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId) => {
+var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId, generateId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
-      const instanceId = nanoid();
+      const instanceId = generateId();
       if (item.dataSources) {
         for (const [name, dataSource] of Object.entries(item.dataSources)) {
           if (dataSourceByRef.has(name)) {
@@ -1221,7 +1155,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
           if (dataSource.type === "variable") {
             dataSourceByRef.set(name, {
               type: "variable",
-              id: nanoid(),
+              id: generateId(),
               scopeInstanceId: instanceId,
               name,
               value: getDataSourceValue(dataSource.initialValue)
@@ -1230,7 +1164,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
           if (dataSource.type === "expression") {
             dataSourceByRef.set(name, {
               type: "expression",
-              id: nanoid(),
+              id: generateId(),
               scopeInstanceId: instanceId,
               name,
               // replace all references with variable names
@@ -1246,7 +1180,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
       }
       if (item.props) {
         for (const prop of item.props) {
-          const propId = nanoid();
+          const propId = generateId();
           if (prop.type === "action") {
             props.push({
               id: propId,
@@ -1319,7 +1253,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         }
       }
       if (item.styles) {
-        const styleSourceId = nanoid();
+        const styleSourceId = generateId();
         styleSources.push({
           type: "local",
           id: styleSourceId
@@ -1358,7 +1292,8 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         styleSources,
         styles,
         metas,
-        defaultBreakpointId
+        defaultBreakpointId,
+        generateId
       );
       parentChildren.push({
         type: "id",
@@ -1374,7 +1309,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
   }
   return parentChildren;
 };
-var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
+var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, generateId = nanoid) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
@@ -1390,7 +1325,8 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) =
     styleSources,
     styles,
     metas,
-    defaultBreakpointId
+    defaultBreakpointId,
+    generateId
   );
   return {
     children,
@@ -1501,16 +1437,15 @@ var WsComponentMeta = z3.object({
   label: z3.optional(z3.string()),
   description: z3.string().optional(),
   icon: z3.string(),
-  presetStyle: z3.optional(z3.record(z3.string(), EmbedTemplateStyleDecl)),
+  presetStyle: z3.optional(
+    z3.record(z3.string(), z3.array(EmbedTemplateStyleDecl))
+  ),
   presetTokens: z3.optional(z3.record(z3.string(), ComponentToken)),
   states: z3.optional(z3.array(ComponentState)),
   template: z3.optional(WsEmbedTemplate),
   order: z3.number().optional()
 });
 
-// src/component-renderer.tsx
-import { getStyleDeclKey } from "@webstudio-is/sdk";
-
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
@@ -1555,124 +1490,6 @@ var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   return indexes;
 };
 
-// src/component-renderer.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var renderComponentTemplate = ({
-  name,
-  metas: metasRecord,
-  components,
-  props,
-  imageLoader
-}) => {
-  const metas = new Map(Object.entries(metasRecord));
-  const template = metas.get(name)?.template ?? [
-    {
-      type: "instance",
-      component: name,
-      children: []
-    }
-  ];
-  if (template[0].type === "instance" && props !== void 0) {
-    template[0].props = Object.entries(props).map(([prop, value]) => {
-      if (typeof value === "string") {
-        return { type: "string", name: prop, value };
-      }
-      if (typeof value === "number") {
-        return { type: "number", name: prop, value };
-      }
-      if (typeof value === "boolean") {
-        return { type: "boolean", name: prop, value };
-      }
-      throw new Error(`Unsupported prop ${props} with value ${value}`);
-    });
-  }
-  const data = generateDataFromEmbedTemplate(template, metas, "base");
-  const instances = [
-    [
-      "root",
-      {
-        type: "instance",
-        id: "root",
-        component: "Box",
-        children: data.children
-      }
-    ],
-    ...data.instances.map(
-      (instance) => [instance.id, instance]
-    )
-  ];
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx4("style", { children: generateCssText(
-      {
-        assets: [],
-        breakpoints: [["base", { id: "base", label: "base" }]],
-        styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
-        styleSourceSelections: data.styleSourceSelections.map((item) => [
-          item.instanceId,
-          item
-        ]),
-        componentMetas: metas
-      },
-      { assetBaseUrl: "/" }
-    ) }),
-    /* @__PURE__ */ jsx4(
-      InstanceRoot,
-      {
-        data: {
-          page: {
-            path: "",
-            id: "",
-            name: "",
-            title: "",
-            meta: {},
-            rootInstanceId: "root"
-          },
-          pages: [],
-          assets: [],
-          build: {
-            instances,
-            props: data.props.map((prop) => [prop.id, prop]),
-            dataSources: data.dataSources.map((dataSource) => [
-              dataSource.id,
-              dataSource
-            ])
-          }
-        },
-        utils: {
-          indexesWithinAncestors: getIndexesWithinAncestors(
-            metas,
-            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)
-              )
-            );
-          },
-          executeEffectfulExpression: (code, args, values) => {
-            return decodeVariablesMap(
-              executeEffectfulExpression(code, args, encodeVariablesMap(values))
-            );
-          }
-        },
-        Component: WebstudioComponent,
-        components: new Map(Object.entries(components)),
-        imageLoader: imageLoader ?? (({ src }) => src)
-      }
-    )
-  ] });
-};
-
 // src/hook.ts
 var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
   let matched = false;
@@ -1687,6 +1504,9 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 };
 
 // src/generator.ts
+import {
+  createScope
+} from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
   const indexesWithinAncestors = getIndexesWithinAncestors(
     siteData.metas,
@@ -1705,91 +1525,257 @@ 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: createScope(["_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})
+`;
+  }
+  generatedDataSources += `return _output
+`;
+  generatedDataSources += `}
 `;
+  const formsProperties = /* @__PURE__ */ new Map();
+  for (const prop of siteData.props.values()) {
+    if (prop.type === "string") {
+      if (prop.name === "action" || prop.name === "method") {
+        let properties = formsProperties.get(prop.instanceId);
+        if (properties === void 0) {
+          properties = {};
+        }
+        properties[prop.name] = prop.value;
+        formsProperties.set(prop.instanceId, properties);
       }
     }
   }
-  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);
-  };
-  `;
+  const generatedFormsProperties = `export const formsProperties = new Map<string, { method?: string, action?: string }>(${JSON.stringify(
+    Array.from(formsProperties.entries())
+  )})`;
   return `
   /* eslint-disable */
 
   ${generatedIndexesWithinAncestors.trim()}
 
-  ${generatedExecuteComputingExpressions.trim()}
+  ${generatedDataSources}
 
-  ${generatedExecuteEffectfulExpression.trim()}
+  ${generatedFormsProperties}
 
   export const utils = {
     indexesWithinAncestors,
-    executeComputingExpressions,
-    executeEffectfulExpression,
+    getDataSourcesLogic,
   };
 
   /* eslint-enable */
   `;
 };
+
+// src/component-generator.ts
+import { parseComponentName } from "@webstudio-is/sdk";
+var generateJsxElement = ({
+  scope,
+  instance,
+  props,
+  dataSources,
+  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;
+        const dataSource = dataSources.get(dataSourceId);
+        if (dataSource === void 0) {
+          continue;
+        }
+        conditionVariableName = scope.getName(dataSource.id, dataSource.name);
+      }
+      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 dataSource = dataSources.get(dataSourceId);
+      if (dataSource === void 0) {
+        continue;
+      }
+      const dataSourceVariable = scope.getName(dataSource.id, dataSource.name);
+      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,
+  dataSources,
+  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,
+        dataSources,
+        indexesWithinAncestors,
+        children: generateJsxChildren({
+          scope,
+          children: instance.children,
+          instances,
+          props,
+          dataSources,
+          indexesWithinAncestors
+        })
+      });
+      continue;
+    }
+    child;
+  }
+  return generatedChildren;
+};
+var generatePageComponent = ({
+  scope,
+  rootInstanceId,
+  instances,
+  props,
+  dataSources,
+  indexesWithinAncestors
+}) => {
+  const instance = instances.get(rootInstanceId);
+  if (instance === void 0) {
+    return "";
+  }
+  const { variables, body: dataSourcesBody } = generateDataSources({
+    typed: true,
+    scope,
+    dataSources,
+    props
+  });
+  let generatedDataSources = "";
+  for (const { valueName, setterName, initialValue } of variables.values()) {
+    const initialValueString = JSON.stringify(initialValue);
+    generatedDataSources += `let [${valueName}, ${setterName}] = useState(${initialValueString})
+`;
+  }
+  generatedDataSources += dataSourcesBody;
+  const generatedJsx = generateJsxElement({
+    scope,
+    instance,
+    props,
+    dataSources,
+    indexesWithinAncestors,
+    children: generateJsxChildren({
+      scope,
+      children: instance.children,
+      instances,
+      props,
+      dataSources,
+      indexesWithinAncestors
+    }) + "{props.scripts}\n"
+  });
+  let generatedComponent = "";
+  generatedComponent += `const Page = (props: { scripts?: ReactNode }) => {
+`;
+  generatedComponent += `${generatedDataSources}`;
+  generatedComponent += `return ${generatedJsx}`;
+  generatedComponent += `}
+`;
+  return generatedComponent;
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateStyleDecl,
@@ -1798,6 +1784,7 @@ export {
   ReactSdkContext,
   Root,
   WebstudioComponent,
+  WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
   collapsedAttribute,
@@ -1807,16 +1794,12 @@ export {
   createElementsTree,
   createImageValueTransformer,
   decodeDataSourceVariable,
-  decodeVariablesMap,
   defaultStates,
   encodeDataSourceVariable,
-  encodeVariablesMap,
-  executeComputingExpressions,
-  executeEffectfulExpression,
-  generateComputingExpressions,
   generateCssText,
   generateDataFromEmbedTemplate,
-  generateEffectfulExpression,
+  generateDataSources,
+  generatePageComponent,
   generateUtilsExport,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
@@ -1827,7 +1810,6 @@ export {
   idAttribute,
   indexAttribute,
   namespaceMeta,
-  renderComponentTemplate,
   renderWebstudioComponentChildren,
   selectorIdAttribute,
   showAttribute,