@webstudio-is/react-sdk 0.99.1-de264e0.0 → 0.100.0

package/lib/index.js

@@ -887,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) {
@@ -1037,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);
@@ -1051,16 +933,6 @@ 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);
-    }
-  }
-  return decodedValues;
-};
 var generateDataSources = ({
   scope,
   typed = false,
@@ -1270,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)) {
@@ -1283,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)
@@ -1292,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
@@ -1308,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,
@@ -1381,7 +1253,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         }
       }
       if (item.styles) {
-        const styleSourceId = nanoid();
+        const styleSourceId = generateId();
         styleSources.push({
           type: "local",
           id: styleSourceId
@@ -1420,7 +1292,8 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         styleSources,
         styles,
         metas,
-        defaultBreakpointId
+        defaultBreakpointId,
+        generateId
       );
       parentChildren.push({
         type: "id",
@@ -1436,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();
@@ -1452,7 +1325,8 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) =
     styleSources,
     styles,
     metas,
-    defaultBreakpointId
+    defaultBreakpointId,
+    generateId
   );
   return {
     children,
@@ -1563,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 { createScope, getStyleDeclKey } from "@webstudio-is/sdk";
-
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
@@ -1617,145 +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"]
-          ),
-          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
-                ])
-              )
-            });
-            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,
-        components: new Map(Object.entries(components)),
-        imageLoader: imageLoader ?? (({ src }) => src)
-      }
-    )
-  ] });
-};
-
 // src/hook.ts
 var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
   let matched = false;
@@ -1771,7 +1505,7 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 
 // src/generator.ts
 import {
-  createScope as createScope2
+  createScope
 } from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
   const indexesWithinAncestors = getIndexesWithinAncestors(
@@ -1792,7 +1526,7 @@ var generateUtilsExport = (siteData) => {
   ]);
   `;
   const { variables, body, output } = generateDataSources({
-    scope: createScope2(["_getVariable", "_setVariable", "_output"]),
+    scope: createScope(["_getVariable", "_setVariable", "_output"]),
     typed: true,
     dataSources: siteData.dataSources,
     props: siteData.props
@@ -1825,6 +1559,22 @@ var generateUtilsExport = (siteData) => {
 `;
   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 generatedFormsProperties = `export const formsProperties = new Map<string, { method?: string, action?: string }>(${JSON.stringify(
+    Array.from(formsProperties.entries())
+  )})`;
   return `
   /* eslint-disable */
 
@@ -1832,6 +1582,8 @@ var generateUtilsExport = (siteData) => {
 
   ${generatedDataSources}
 
+  ${generatedFormsProperties}
+
   export const utils = {
     indexesWithinAncestors,
     getDataSourcesLogic,
@@ -1842,11 +1594,12 @@ var generateUtilsExport = (siteData) => {
 };
 
 // src/component-generator.ts
-import { findTreeInstanceIds, parseComponentName } from "@webstudio-is/sdk";
+import { parseComponentName } from "@webstudio-is/sdk";
 var generateJsxElement = ({
   scope,
   instance,
   props,
+  dataSources,
   indexesWithinAncestors,
   children
 }) => {
@@ -1873,7 +1626,11 @@ ${indexAttribute}="${index}"`;
       }
       if (prop.type === "dataSource") {
         const dataSourceId = prop.value;
-        conditionVariableName = encodeDataSourceVariable(dataSourceId);
+        const dataSource = dataSources.get(dataSourceId);
+        if (dataSource === void 0) {
+          continue;
+        }
+        conditionVariableName = scope.getName(dataSource.id, dataSource.name);
       }
       continue;
     }
@@ -1887,7 +1644,11 @@ ${prop.name}={${JSON.stringify(prop.value)}}`;
     }
     if (prop.type === "dataSource") {
       const dataSourceId = prop.value;
-      const dataSourceVariable = encodeDataSourceVariable(dataSourceId);
+      const dataSource = dataSources.get(dataSourceId);
+      if (dataSource === void 0) {
+        continue;
+      }
+      const dataSourceVariable = scope.getName(dataSource.id, dataSource.name);
       generatedProps += `
 ${prop.name}={${dataSourceVariable}}`;
       continue;
@@ -1928,6 +1689,7 @@ var generateJsxChildren = ({
   children,
   instances,
   props,
+  dataSources,
   indexesWithinAncestors
 }) => {
   let generatedChildren = "";
@@ -1948,12 +1710,14 @@ var generateJsxChildren = ({
         scope,
         instance,
         props,
+        dataSources,
         indexesWithinAncestors,
         children: generateJsxChildren({
           scope,
           children: instance.children,
           instances,
           props,
+          dataSources,
           indexesWithinAncestors
         })
       });
@@ -1963,97 +1727,52 @@ var generateJsxChildren = ({
   }
   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,
+  dataSources,
   indexesWithinAncestors
 }) => {
   const instance = instances.get(rootInstanceId);
   if (instance === void 0) {
     return "";
   }
-  const generatedDataSources = generateDataSources2({
+  const { variables, body: dataSourcesBody } = generateDataSources({
+    typed: true,
     scope,
-    rootInstanceId,
-    instances,
+    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 += `export const Page = (props: { scripts: ReactNode }) => {
+  generatedComponent += `const Page = (props: { scripts?: ReactNode }) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
-  generatedComponent += `};
+  generatedComponent += `}
 `;
   return generatedComponent;
 };
@@ -2065,6 +1784,7 @@ export {
   ReactSdkContext,
   Root,
   WebstudioComponent,
+  WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
   collapsedAttribute,
@@ -2074,17 +1794,11 @@ export {
   createElementsTree,
   createImageValueTransformer,
   decodeDataSourceVariable,
-  decodeVariablesMap,
   defaultStates,
   encodeDataSourceVariable,
-  encodeVariablesMap,
-  executeComputingExpressions,
-  executeEffectfulExpression,
-  generateComputingExpressions,
   generateCssText,
   generateDataFromEmbedTemplate,
   generateDataSources,
-  generateEffectfulExpression,
   generatePageComponent,
   generateUtilsExport,
   getClosestInstance,
@@ -2096,7 +1810,6 @@ export {
   idAttribute,
   indexAttribute,
   namespaceMeta,
-  renderComponentTemplate,
   renderWebstudioComponentChildren,
   selectorIdAttribute,
   showAttribute,

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

@@ -1,6 +1,6 @@
-import type { Instances, Instance, Props, Scope } from "@webstudio-is/sdk";
+import type { Instances, Instance, Props, Scope, DataSources } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
-export declare const generateJsxElement: ({ scope, instance, props, indexesWithinAncestors, children, }: {
+export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, }: {
     scope: Scope;
     instance: Instance;
     props: Map<string, {
@@ -70,6 +70,31 @@ export declare const generateJsxElement: ({ scope, instance, props, indexesWithi
         instanceId: string;
         required?: 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;
+    }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
 }) => string;
@@ -77,7 +102,7 @@ export declare const generateJsxElement: ({ scope, instance, props, indexesWithi
  * 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, }: {
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, }: {
     scope: Scope;
     children: Instance["children"];
     instances: Map<string, {
@@ -160,9 +185,34 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         instanceId: string;
         required?: 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;
+    }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;
-export declare const generatePageComponent: ({ scope, rootInstanceId, instances, props, indexesWithinAncestors, }: {
+export declare const generatePageComponent: ({ scope, rootInstanceId, instances, props, dataSources, indexesWithinAncestors, }: {
     scope: Scope;
     rootInstanceId: Instance["id"];
     instances: Map<string, {
@@ -245,5 +295,30 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         instanceId: string;
         required?: 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;
+    }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;

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

@@ -670,7 +670,7 @@ export declare const ComponentState: z.ZodObject<{
 }>;
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
-declare const WsComponentMeta: z.ZodObject<{
+export declare const WsComponentMeta: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "radix", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -681,7 +681,7 @@ declare const WsComponentMeta: z.ZodObject<{
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     icon: z.ZodString;
-    presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodType<{
+    presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodType<{
         value: {
             value: number;
             type: "unit";
@@ -1105,7 +1105,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }>>>;
+    }>, "many">>>;
     presetTokens: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
         variant: z.ZodOptional<z.ZodString>;
         styles: z.ZodArray<z.ZodType<{
@@ -2211,7 +2211,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }> | undefined;
+    }[]> | undefined;
     presetTokens?: Record<string, {
         styles: {
             value: {
@@ -2661,7 +2661,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }> | undefined;
+    }[]> | undefined;
     presetTokens?: Record<string, {
         styles: {
             value: {

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

@@ -2196,7 +2196,7 @@ export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
-} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"]) => {
+} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => {
     children: ({
         value: string;
         type: "text";

package/lib/types/expression.d.ts

@@ -4,20 +4,9 @@ export declare const validateExpression: (code: string, options?: {
     effectful?: boolean;
     transformIdentifier?: TransformIdentifier;
 }) => string;
-/**
- * Generates a function body expecting map as _variables argument
- * and outputing map of results
- */
-export declare const generateComputingExpressions: (expressions: Map<string, string>, allowedVariables: Set<string>) => string;
-export declare const executeComputingExpressions: (expressions: Map<string, string>, variables: Map<string, unknown>) => Map<string, unknown>;
-export declare const generateEffectfulExpression: (code: string, args: Set<string>, allowedVariables: Set<string>) => string;
-export declare const executeEffectfulExpression: (code: string, args: Map<string, unknown>, variables: Map<string, unknown>) => Map<string, unknown>;
 export declare const computeExpressionsDependencies: (expressions: Map<string, string>) => Map<string, Set<string>>;
-type Values = Map<string, unknown>;
 export declare const encodeDataSourceVariable: (id: string) => string;
-export declare const encodeVariablesMap: (values: Values) => Values;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
-export declare const decodeVariablesMap: (values: Values) => Values;
 type VariableName = string;
 export declare const generateDataSources: ({ scope, typed, dataSources, props, }: {
     scope: Scope;

package/lib/types/index.d.ts

@@ -1,14 +1,13 @@
-export * from "./css";
-export * from "./tree";
-export * from "./app";
+export * from "./css/index";
+export * from "./tree/index";
+export * from "./app/index";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";
-export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 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, generateDataSources, } from "./expression";
-export { renderComponentTemplate } from "./component-renderer";
+export { validateExpression, computeExpressionsDependencies, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.99.1-de264e0.0",
+  "version": "0.100.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,8 +17,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "^1.0.8-de264e0.0",
-    "@webstudio-is/tsconfig": "^1.0.8-de264e0.0"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -35,10 +35,10 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "^0.99.1-de264e0.0",
-    "@webstudio-is/fonts": "^0.99.1-de264e0.0",
-    "@webstudio-is/image": "^0.99.1-de264e0.0",
-    "@webstudio-is/sdk": "^0.99.1-de264e0.0"
+    "@webstudio-is/css-engine": "0.100.0",
+    "@webstudio-is/fonts": "0.100.0",
+    "@webstudio-is/image": "0.100.0",
+    "@webstudio-is/sdk": "0.100.0"
   },
   "exports": {
     ".": {

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

@@ -1,11 +0,0 @@
-import type { ExoticComponent } from "react";
-import type { Instance } from "@webstudio-is/sdk";
-import type { WsComponentMeta } from "./components/component-meta";
-import type { ImageLoader } from "@webstudio-is/image";
-export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, props, imageLoader, }: {
-    name: Instance["component"];
-    metas: Record<string, WsComponentMeta>;
-    props?: Record<string, unknown> | undefined;
-    components: Record<string, ExoticComponent<any>>;
-    imageLoader?: ImageLoader | undefined;
-}) => import("react/jsx-runtime").JSX.Element;