@webstudio-is/react-sdk 0.133.0 → 0.134.0

package/lib/index.js

@@ -1337,7 +1337,8 @@ import { parseComponentName } from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   const setters = /* @__PURE__ */ new Set();
   let args = [];
@@ -1354,6 +1355,7 @@ var generateAction = ({
         const depId = decodeDataSourceVariable(identifier);
         const dep = depId ? dataSources.get(depId) : void 0;
         if (dep) {
+          usedDataSources.set(dep.id, dep);
           if (assignee) {
             setters.add(dep);
           }
@@ -1389,7 +1391,8 @@ var generateAction = ({
 var generatePropValue = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   if (prop.type === "asset" || prop.type === "page") {
     return;
@@ -1402,17 +1405,19 @@ var generatePropValue = ({
     if (dataSource === void 0) {
       return;
     }
+    usedDataSources.set(dataSource.id, dataSource);
     return scope.getName(dataSource.id, dataSource.name);
   }
   if (prop.type === "expression") {
     return generateExpression({
       expression: prop.value,
       dataSources,
+      usedDataSources,
       scope
     });
   }
   if (prop.type === "action") {
-    return generateAction({ scope, prop, dataSources });
+    return generateAction({ scope, prop, dataSources, usedDataSources });
   }
   prop;
 };
@@ -1421,6 +1426,7 @@ var generateJsxElement = ({
   instance,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   children,
   classesMap
@@ -1445,7 +1451,12 @@ ${indexAttribute}="${index}"`;
     if (prop.instanceId !== instance.id) {
       continue;
     }
-    const propValue = generatePropValue({ scope, prop, dataSources });
+    const propValue = generatePropValue({
+      scope,
+      prop,
+      dataSources,
+      usedDataSources
+    });
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -1525,6 +1536,7 @@ var generateJsxChildren = ({
   instances,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   classesMap
 }) => {
@@ -1540,6 +1552,7 @@ var generateJsxChildren = ({
       const expression = generateExpression({
         expression: child.value,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedChildren = `{${expression}}
@@ -1557,6 +1570,7 @@ var generateJsxChildren = ({
         instance,
         props,
         dataSources,
+        usedDataSources,
         indexesWithinAncestors,
         classesMap,
         children: generateJsxChildren({
@@ -1566,6 +1580,7 @@ var generateJsxChildren = ({
           instances,
           props,
           dataSources,
+          usedDataSources,
           indexesWithinAncestors
         })
       });
@@ -1590,17 +1605,36 @@ var generateWebstudioComponent = ({
   if (instance === void 0) {
     return "";
   }
+  const usedDataSources = /* @__PURE__ */ new Map();
+  const generatedJsx = generateJsxElement({
+    scope,
+    instance,
+    props,
+    dataSources,
+    usedDataSources,
+    indexesWithinAncestors,
+    classesMap,
+    children: generateJsxChildren({
+      scope,
+      children: instance.children,
+      instances,
+      props,
+      dataSources,
+      usedDataSources,
+      indexesWithinAncestors,
+      classesMap
+    })
+  });
   let generatedProps = "";
   if (parameters.length > 0) {
     let generatedPropsValue = "{ ";
     let generatedPropsType = "{ ";
     for (const parameter of parameters) {
-      const dataSource = dataSources.get(parameter.value);
-      if (dataSource === void 0) {
-        continue;
+      const dataSource = usedDataSources.get(parameter.value);
+      if (dataSource) {
+        const valueName = scope.getName(dataSource.id, dataSource.name);
+        generatedPropsValue += `${parameter.name}: ${valueName}, `;
       }
-      const valueName = scope.getName(dataSource.id, dataSource.name);
-      generatedPropsValue += `${parameter.name}: ${valueName}, `;
       generatedPropsType += `${parameter.name}: any; `;
     }
     generatedPropsValue += `}`;
@@ -1608,7 +1642,7 @@ var generateWebstudioComponent = ({
     generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
   }
   let generatedDataSources = "";
-  for (const dataSource of dataSources.values()) {
+  for (const dataSource of usedDataSources.values()) {
     if (dataSource.type === "variable") {
       const valueName = scope.getName(dataSource.id, dataSource.name);
       const setterName = scope.getName(
@@ -1631,23 +1665,6 @@ var generateWebstudioComponent = ({
 `;
     }
   }
-  const generatedJsx = generateJsxElement({
-    scope,
-    instance,
-    props,
-    dataSources,
-    indexesWithinAncestors,
-    classesMap,
-    children: generateJsxChildren({
-      scope,
-      children: instance.children,
-      instances,
-      props,
-      dataSources,
-      indexesWithinAncestors,
-      classesMap
-    })
-  });
   let generatedComponent = "";
   generatedComponent += `const ${name} = (${generatedProps}) => {
 `;
@@ -1665,25 +1682,11 @@ var generateResourcesLoader = ({
   dataSources,
   resources
 }) => {
-  let generatedVariables = "";
   let generatedOutput = "";
   let generatedLoaders = "";
   let hasResources = false;
+  const usedDataSources = /* @__PURE__ */ new Map();
   for (const dataSource of dataSources.values()) {
-    if (dataSource.type === "variable") {
-      const name = scope.getName(dataSource.id, dataSource.name);
-      const value = JSON.stringify(dataSource.value.value);
-      generatedVariables += `let ${name} = ${value}
-`;
-    }
-    if (dataSource.type === "parameter") {
-      if (dataSource.id !== page.pathVariableId) {
-        continue;
-      }
-      const name = scope.getName(dataSource.id, dataSource.name);
-      generatedVariables += `const ${name} = _props.params
-`;
-    }
     if (dataSource.type === "resource") {
       const resource = resources.get(dataSource.resourceId);
       if (resource === void 0) {
@@ -1702,6 +1705,7 @@ var generateResourcesLoader = ({
       const url = generateExpression({
         expression: resource.url,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedLoaders += `url: ${url},
@@ -1714,6 +1718,7 @@ var generateResourcesLoader = ({
         const value = generateExpression({
           expression: header.value,
           dataSources,
+          usedDataSources,
           scope
         });
         generatedLoaders += `{ name: "${header.name}", value: ${value} },
@@ -1725,12 +1730,30 @@ var generateResourcesLoader = ({
         const body = generateExpression({
           expression: resource.body,
           dataSources,
+          usedDataSources,
           scope
         });
         generatedLoaders += `body: ${body},
 `;
       }
       generatedLoaders += `}),
+`;
+    }
+  }
+  let generatedVariables = "";
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const name = scope.getName(dataSource.id, dataSource.name);
+      const value = JSON.stringify(dataSource.value.value);
+      generatedVariables += `let ${name} = ${value}
+`;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id !== page.pathParamsDataSourceId) {
+        continue;
+      }
+      const name = scope.getName(dataSource.id, dataSource.name);
+      generatedVariables += `const ${name} = _props.params
 `;
     }
   }
@@ -1743,8 +1766,8 @@ var generateResourcesLoader = ({
 `;
   generated += `export const loadResources = async (_props: { params: Params }) => {
 `;
+  generated += generatedVariables;
   if (hasResources) {
-    generated += generatedVariables;
     generated += `const [
 `;
     generated += generatedOutput;
@@ -1862,7 +1885,7 @@ var generatePageMeta = ({
       continue;
     }
     if (dataSource.type === "parameter") {
-      if (dataSource.id === page.pathVariableId) {
+      if (dataSource.id === page.pathParamsDataSourceId) {
         const valueName = localScope.getName(dataSource.id, dataSource.name);
         generated += `  let ${valueName} = params
 `;

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

@@ -1,6 +1,6 @@
 import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
-export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, classesMap, }: {
+export declare const generateJsxElement: ({ scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
     scope: Scope;
     instance: Instance;
     props: Map<string, {
@@ -117,11 +117,44 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         resourceId: string;
         scopeInstanceId?: string | undefined;
     }>;
+    usedDataSources: 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;
+    }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
     classesMap?: Map<string, string[]> | undefined;
 }) => string;
-export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
     children: Instance["children"];
     instances: Map<string, {
@@ -254,6 +287,39 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         resourceId: string;
         scopeInstanceId?: string | undefined;
     }>;
+    usedDataSources: 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;
+    }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap?: Map<string, string[]> | undefined;
 }) => string;

package/lib/types/expression.d.ts

@@ -49,7 +49,7 @@ export declare const generateExpression: ({ expression, dataSources, usedDataSou
         resourceId: string;
         scopeInstanceId?: string | undefined;
     }>;
-    usedDataSources?: Map<string, {
+    usedDataSources: Map<string, {
         value: {
             value: number;
             type: "number";
@@ -81,7 +81,7 @@ export declare const generateExpression: ({ expression, dataSources, usedDataSou
         id: string;
         resourceId: string;
         scopeInstanceId?: string | undefined;
-    }> | undefined;
+    }>;
     scope: Scope;
 }) => string;
 export declare const executeExpression: (expression: undefined | string) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.133.0",
+  "version": "0.134.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,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.133.0",
-    "@webstudio-is/fonts": "0.133.0",
-    "@webstudio-is/icons": "^0.133.0",
-    "@webstudio-is/image": "0.133.0",
-    "@webstudio-is/sdk": "0.133.0"
+    "@webstudio-is/css-engine": "0.134.0",
+    "@webstudio-is/image": "0.134.0",
+    "@webstudio-is/sdk": "0.134.0",
+    "@webstudio-is/fonts": "0.134.0",
+    "@webstudio-is/icons": "^0.134.0"
   },
   "exports": {
     ".": {