@webstudio-is/react-sdk 0.117.0 → 0.118.0

package/lib/index.js

@@ -618,45 +618,6 @@ var generateDataSources = ({
     }
   }
   for (const prop of props.values()) {
-    if (prop.type === "dataSource") {
-      const dataSource = dataSources.get(prop.value);
-      if (dataSource?.type !== "expression") {
-        continue;
-      }
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const code = validateExpression(dataSource.code, {
-        optional: true,
-        transformIdentifier: (identifier) => {
-          const depId = decodeDataSourceVariable(identifier);
-          const dep = depId ? dataSources.get(depId) : void 0;
-          if (dep) {
-            return scope.getName(dep.id, dep.name);
-          }
-          console.error(`Unknown dependency "${identifier}"`);
-          return identifier;
-        }
-      });
-      body += `let ${name} = (${code});
-`;
-    }
-    if (prop.type === "expression") {
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const code = validateExpression(prop.value, {
-        transformIdentifier: (identifier) => {
-          const depId = decodeDataSourceVariable(identifier);
-          const dep = depId ? dataSources.get(depId) : void 0;
-          if (dep) {
-            return scope.getName(dep.id, dep.name);
-          }
-          console.error(`Unknown dependency "${identifier}"`);
-          return identifier;
-        }
-      });
-      body += `let ${name} = (${code});
-`;
-    }
     if (prop.type === "action") {
       const name = scope.getName(prop.id, prop.name);
       output.set(prop.id, name);
@@ -1265,6 +1226,36 @@ var generateUtilsExport = (siteData) => {
 
 // src/component-generator.ts
 import { parseComponentName } from "@webstudio-is/sdk";
+var generatePropValue = ({
+  scope,
+  prop,
+  dataSources
+}) => {
+  if (prop.type === "asset" || prop.type === "page") {
+    return;
+  }
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+    return JSON.stringify(prop.value);
+  }
+  if (prop.type === "expression") {
+    return validateExpression(prop.value, {
+      // transpile to safely executable member expressions
+      optional: true,
+      transformIdentifier: (identifier) => {
+        const depId = decodeDataSourceVariable(identifier);
+        const dep = depId ? dataSources.get(depId) : void 0;
+        if (dep) {
+          return scope.getName(dep.id, dep.name);
+        }
+        return identifier;
+      }
+    });
+  }
+  if (prop.type === "action") {
+    return scope.getName(prop.id, prop.name);
+  }
+  prop;
+};
 var generateJsxElement = ({
   scope,
   instance,
@@ -1273,7 +1264,7 @@ var generateJsxElement = ({
   indexesWithinAncestors,
   children
 }) => {
-  let conditionVariableName;
+  let conditionValue;
   let generatedProps = "";
   generatedProps += `
 ${idAttribute}=${JSON.stringify(instance.id)}`;
@@ -1290,74 +1281,25 @@ ${indexAttribute}="${index}"`;
     if (prop.instanceId !== instance.id) {
       continue;
     }
+    const propValue = generatePropValue({ scope, prop, dataSources });
     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;
-        }
-        if (dataSource.type === "variable") {
-          conditionVariableName = scope.getName(dataSource.id, dataSource.name);
-        }
-        if (dataSource.type === "expression") {
-          conditionVariableName = scope.getName(prop.id, prop.name);
-        }
-      }
-      if (prop.type === "expression") {
-        conditionVariableName = scope.getName(prop.id, prop.name);
-      }
-      continue;
-    }
-    if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
-      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) {
+      if (propValue === "true") {
         continue;
       }
-      if (dataSource.type === "variable") {
-        const dataSourceVariable = scope.getName(
-          dataSource.id,
-          dataSource.name
-        );
-        generatedProps += `
-${prop.name}={${dataSourceVariable}}`;
-      }
-      if (dataSource.type === "expression") {
-        const dataSourceVariable = scope.getName(prop.id, prop.name);
-        generatedProps += `
-${prop.name}={${dataSourceVariable}}`;
+      if (propValue === "false") {
+        return "";
       }
+      conditionValue = propValue;
       continue;
     }
-    if (prop.type === "expression") {
-      const propVariable = scope.getName(prop.id, prop.name);
-      generatedProps += `
-${prop.name}={${propVariable}}`;
-      continue;
-    }
-    if (prop.type === "action") {
-      const propVariable = scope.getName(prop.id, prop.name);
+    if (propValue !== void 0) {
       generatedProps += `
-${prop.name}={${propVariable}}`;
-      continue;
+${prop.name}={${propValue}}`;
     }
-    prop;
   }
   let generatedElement = "";
-  if (conditionVariableName) {
-    generatedElement += `{${conditionVariableName} &&
+  if (conditionValue) {
+    generatedElement += `{(${conditionValue}) &&
 `;
   }
   const [_namespace, shortName] = parseComponentName(instance.component);
@@ -1372,7 +1314,7 @@ ${prop.name}={${propVariable}}`;
     generatedElement += `</${componentVariable}>
 `;
   }
-  if (conditionVariableName) {
+  if (conditionValue) {
     generatedElement += `}
 `;
   }

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

@@ -58,13 +58,6 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "dataSource";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
@@ -105,12 +98,6 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
@@ -190,13 +177,6 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "dataSource";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
@@ -237,12 +217,6 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;
@@ -317,13 +291,6 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "dataSource";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
@@ -364,12 +331,6 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }) => string;

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

@@ -2260,13 +2260,6 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         id: string;
         instanceId: string;
         required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "dataSource";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
@@ -2286,7 +2279,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         instanceId: string;
         required?: boolean | undefined;
     })[];
-    dataSources: ({
+    dataSources: {
         value: {
             value: number;
             type: "number";
@@ -2307,13 +2300,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    })[];
+    }[];
     styleSourceSelections: {
         values: string[];
         instanceId: string;

package/lib/types/expression.d.ts

@@ -39,12 +39,6 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
-    } | {
-        code: string;
-        type: "expression";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
     }>;
     props: Map<string, {
         value: number;
@@ -101,13 +95,6 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         id: string;
         instanceId: string;
         required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "dataSource";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
     } | {
         value: string;
         type: "expression";

package/lib/types/props.d.ts

@@ -108,13 +108,6 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
-} | {
-    value: string;
-    type: "dataSource";
-    name: string;
-    id: string;
-    instanceId: string;
-    required?: boolean | undefined;
 } | {
     value: string;
     type: "expression";
@@ -189,13 +182,6 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
-} | {
-    value: string;
-    type: "dataSource";
-    name: string;
-    id: string;
-    instanceId: string;
-    required?: boolean | undefined;
 } | {
     value: string;
     type: "expression";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.117.0",
+  "version": "0.118.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,8 +16,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/jest-config": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -33,10 +33,10 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.117.0",
-    "@webstudio-is/image": "0.117.0",
-    "@webstudio-is/fonts": "0.117.0",
-    "@webstudio-is/sdk": "0.117.0"
+    "@webstudio-is/css-engine": "0.118.0",
+    "@webstudio-is/fonts": "0.118.0",
+    "@webstudio-is/image": "0.118.0",
+    "@webstudio-is/sdk": "0.118.0"
   },
   "exports": {
     ".": {