@webstudio-is/react-sdk 0.126.0 → 0.128.0

package/lib/index.js

@@ -802,82 +802,6 @@ var generateExpression = ({
     }
   });
 };
-var generateDataSources = ({
-  scope,
-  typed = false,
-  dataSources,
-  props
-}) => {
-  const variables = /* @__PURE__ */ new Map();
-  let body = "";
-  const output = /* @__PURE__ */ new Map();
-  for (const dataSource of dataSources.values()) {
-    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 });
-    }
-  }
-  for (const prop of props.values()) {
-    if (prop.type === "action") {
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const setters = /* @__PURE__ */ new Set();
-      let args = [];
-      let newCode = "";
-      for (const value of prop.value) {
-        args = value.args;
-        newCode += validateExpression(value.code, {
-          optional: true,
-          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 (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({
@@ -1399,6 +1323,58 @@ var generateUtilsExport = (siteData) => {
 
 // src/component-generator.ts
 import { parseComponentName } from "@webstudio-is/sdk";
+var generateAction = ({
+  scope,
+  prop,
+  dataSources
+}) => {
+  const setters = /* @__PURE__ */ new Set();
+  let args = [];
+  let assignersCode = "";
+  for (const value of prop.value) {
+    args = value.args;
+    assignersCode += validateExpression(value.code, {
+      optional: true,
+      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) {
+          if (assignee) {
+            setters.add(dep);
+          }
+          const valueName = scope.getName(dep.id, dep.name);
+          return valueName;
+        }
+        console.error(`Unknown dependency "${identifier}"`);
+        return identifier;
+      }
+    });
+    assignersCode += `
+`;
+  }
+  let settersCode = "";
+  for (const dataSource of setters) {
+    const valueName = scope.getName(dataSource.id, dataSource.name);
+    const setterName = scope.getName(
+      `set$${dataSource.id}`,
+      `set$${dataSource.name}`
+    );
+    settersCode += `${setterName}(${valueName})
+`;
+  }
+  const argsList = args.map((arg) => `${arg}: any`).join(", ");
+  let generated = "";
+  generated += `(${argsList}) => {
+`;
+  generated += assignersCode;
+  generated += settersCode;
+  generated += `}`;
+  return generated;
+};
 var generatePropValue = ({
   scope,
   prop,
@@ -1425,7 +1401,7 @@ var generatePropValue = ({
     });
   }
   if (prop.type === "action") {
-    return scope.getName(prop.id, prop.name);
+    return generateAction({ scope, prop, dataSources });
   }
   prop;
 };
@@ -1601,12 +1577,6 @@ var generatePageComponent = ({
   if (instance === void 0) {
     return "";
   }
-  const { body: dataSourcesBody } = generateDataSources({
-    typed: true,
-    scope,
-    dataSources,
-    props
-  });
   let generatedDataSources = "";
   for (const dataSource of dataSources.values()) {
     if (dataSource.type === "variable") {
@@ -1638,7 +1608,6 @@ var generatePageComponent = ({
 `;
     }
   }
-  generatedDataSources += dataSourcesBody;
   const generatedJsx = generateJsxElement({
     scope,
     instance,
@@ -1797,7 +1766,6 @@ export {
   encodeDataSourceVariable,
   generateCss,
   generateDataFromEmbedTemplate,
-  generateDataSources,
   generateJsxChildren,
   generateJsxElement,
   generatePageComponent,

package/lib/types/expression.d.ts

@@ -1,4 +1,4 @@
-import type { DataSources, Props, Scope } from "@webstudio-is/sdk";
+import type { DataSources, Scope } from "@webstudio-is/sdk";
 type TransformIdentifier = (id: string, assignee: boolean) => string;
 export declare const validateExpression: (code: string, options?: {
     /**
@@ -51,131 +51,4 @@ export declare const generateExpression: ({ expression, dataSources, scope, }: {
     }>;
     scope: Scope;
 }) => string;
-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: "json";
-            value?: unknown;
-        };
-        type: "variable";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "parameter";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "resource";
-        name: string;
-        id: string;
-        resourceId: 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;
-    } | {
-        type: "json";
-        name: string;
-        id: string;
-        instanceId: string;
-        value?: unknown;
-        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: "parameter";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "expression";
-        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/index.d.ts

@@ -9,7 +9,7 @@ export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsCom
 export * from "./embed-template";
 export * from "./props";
 export * from "./context";
-export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
+export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, } 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.126.0",
+  "version": "0.128.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/fonts": "0.126.0",
-    "@webstudio-is/image": "0.126.0",
-    "@webstudio-is/css-engine": "0.126.0",
-    "@webstudio-is/icons": "^0.126.0",
-    "@webstudio-is/sdk": "0.126.0"
+    "@webstudio-is/fonts": "0.128.0",
+    "@webstudio-is/css-engine": "0.128.0",
+    "@webstudio-is/icons": "^0.128.0",
+    "@webstudio-is/image": "0.128.0",
+    "@webstudio-is/sdk": "0.128.0"
   },
   "exports": {
     ".": {