@webstudio-is/react-sdk 0.132.0 → 0.134.0

package/lib/index.js

@@ -787,6 +787,7 @@ var decodeDataSourceVariable = (name) => {
 var generateExpression = ({
   expression,
   dataSources,
+  usedDataSources,
   scope
 }) => {
   return validateExpression(expression, {
@@ -798,6 +799,7 @@ var generateExpression = ({
       const depId = decodeDataSourceVariable(identifier);
       const dep = depId ? dataSources.get(depId) : void 0;
       if (dep) {
+        usedDataSources?.set(dep.id, dep);
         return scope.getName(dep.id, dep.name);
       }
       return identifier;
@@ -1335,7 +1337,8 @@ import { parseComponentName } from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   const setters = /* @__PURE__ */ new Set();
   let args = [];
@@ -1352,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);
           }
@@ -1387,7 +1391,8 @@ var generateAction = ({
 var generatePropValue = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   if (prop.type === "asset" || prop.type === "page") {
     return;
@@ -1400,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;
 };
@@ -1419,6 +1426,7 @@ var generateJsxElement = ({
   instance,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   children,
   classesMap
@@ -1443,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;
@@ -1523,6 +1536,7 @@ var generateJsxChildren = ({
   instances,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   classesMap
 }) => {
@@ -1538,6 +1552,7 @@ var generateJsxChildren = ({
       const expression = generateExpression({
         expression: child.value,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedChildren = `{${expression}}
@@ -1555,6 +1570,7 @@ var generateJsxChildren = ({
         instance,
         props,
         dataSources,
+        usedDataSources,
         indexesWithinAncestors,
         classesMap,
         children: generateJsxChildren({
@@ -1564,6 +1580,7 @@ var generateJsxChildren = ({
           instances,
           props,
           dataSources,
+          usedDataSources,
           indexesWithinAncestors
         })
       });
@@ -1588,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 += `}`;
@@ -1606,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(
@@ -1629,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}) => {
 `;
@@ -1663,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) {
@@ -1700,6 +1705,7 @@ var generateResourcesLoader = ({
       const url = generateExpression({
         expression: resource.url,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedLoaders += `url: ${url},
@@ -1712,6 +1718,7 @@ var generateResourcesLoader = ({
         const value = generateExpression({
           expression: header.value,
           dataSources,
+          usedDataSources,
           scope
         });
         generatedLoaders += `{ name: "${header.name}", value: ${value} },
@@ -1723,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
 `;
     }
   }
@@ -1741,8 +1766,8 @@ var generateResourcesLoader = ({
 `;
   generated += `export const loadResources = async (_props: { params: Params }) => {
 `;
+  generated += generatedVariables;
   if (hasResources) {
-    generated += generatedVariables;
     generated += `const [
 `;
     generated += generatedOutput;
@@ -1763,25 +1788,33 @@ var generateResourcesLoader = ({
 };
 
 // src/page-meta-generator.ts
+import {
+  createScope
+} from "@webstudio-is/sdk";
 var generatePageMeta = ({
-  scope,
+  globalScope,
   page,
   dataSources
 }) => {
+  const localScope = createScope(["params", "resources"]);
+  const usedDataSources = /* @__PURE__ */ new Map();
   const titleExpression = generateExpression({
     expression: page.title,
     dataSources,
-    scope
+    usedDataSources,
+    scope: localScope
   });
   const descriptionExpression = generateExpression({
     expression: page.meta.description ?? "undefined",
     dataSources,
-    scope
+    usedDataSources,
+    scope: localScope
   });
   const excludePageFromSearchExpression = generateExpression({
     expression: page.meta.excludePageFromSearch ?? "undefined",
     dataSources,
-    scope
+    usedDataSources,
+    scope: localScope
   });
   const socialImageAssetIdExpression = JSON.stringify(
     page.meta.socialImageAssetId
@@ -1789,10 +1822,53 @@ var generatePageMeta = ({
   const socialImageUrlExpression = generateExpression({
     expression: page.meta.socialImageUrl ?? "undefined",
     dataSources,
-    scope
+    usedDataSources,
+    scope: localScope
+  });
+  const statusExpression = generateExpression({
+    expression: page.meta.status ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
+  const redirectExpression = generateExpression({
+    expression: page.meta.redirect ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
   });
+  let customExpression = "";
+  customExpression += `[
+`;
+  for (const customMeta of page.meta.custom ?? []) {
+    if (customMeta.property.trim().length === 0) {
+      continue;
+    }
+    const propertyExpression = JSON.stringify(customMeta.property);
+    const contentExpression = generateExpression({
+      expression: customMeta.content,
+      dataSources,
+      usedDataSources,
+      scope: localScope
+    });
+    customExpression += `      {
+`;
+    customExpression += `        property: ${propertyExpression},
+`;
+    customExpression += `        content: ${contentExpression},
+`;
+    customExpression += `      },
+`;
+  }
+  customExpression += `    ]`;
   let generated = "";
-  generated += `export const getPageMeta = ({}: {
+  generated += `export const getPageMeta = ({
+`;
+  generated += `  params,
+`;
+  generated += `  resources,
+`;
+  generated += `}: {
 `;
   generated += `  params: Record<string, undefined | string>;
 `;
@@ -1800,6 +1876,33 @@ var generatePageMeta = ({
 `;
   generated += `}): PageMeta => {
 `;
+  for (const dataSource of usedDataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const initialValueString = JSON.stringify(dataSource.value.value);
+      generated += `  let ${valueName} = ${initialValueString}
+`;
+      continue;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id === page.pathParamsDataSourceId) {
+        const valueName = localScope.getName(dataSource.id, dataSource.name);
+        generated += `  let ${valueName} = params
+`;
+      }
+      continue;
+    }
+    if (dataSource.type === "resource") {
+      const valueName = localScope.getName(dataSource.id, dataSource.name);
+      const resourceName = globalScope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      generated += `  let ${valueName} = resources.${resourceName}
+`;
+      continue;
+    }
+  }
   generated += `  return {
 `;
   generated += `    title: ${titleExpression},
@@ -1812,30 +1915,11 @@ var generatePageMeta = ({
 `;
   generated += `    socialImageUrl: ${socialImageUrlExpression},
 `;
-  generated += `    custom: [
+  generated += `    status: ${statusExpression},
 `;
-  if (page.meta.custom) {
-    for (const customMeta of page.meta.custom) {
-      if (customMeta.property.trim().length === 0) {
-        continue;
-      }
-      const propertyExpression = JSON.stringify(customMeta.property);
-      const contentExpression = generateExpression({
-        scope,
-        dataSources,
-        expression: customMeta.content
-      });
-      generated += `      {
-`;
-      generated += `        property: ${propertyExpression},
-`;
-      generated += `        content: ${contentExpression},
+  generated += `    redirect: ${redirectExpression},
 `;
-      generated += `      },
-`;
-    }
-  }
-  generated += `    ],
+  generated += `    custom: ${customExpression},
 `;
   generated += `  };
 `;

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

@@ -14,7 +14,7 @@ export declare const validateExpression: (code: string, options?: {
 }) => string;
 export declare const encodeDataSourceVariable: (id: string) => string;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
-export declare const generateExpression: ({ expression, dataSources, scope, }: {
+export declare const generateExpression: ({ expression, dataSources, usedDataSources, scope, }: {
     expression: string;
     dataSources: Map<string, {
         value: {
@@ -49,6 +49,39 @@ export declare const generateExpression: ({ expression, dataSources, scope, }: {
         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;
+    }>;
     scope: Scope;
 }) => string;
 export declare const executeExpression: (expression: undefined | string) => any;

package/lib/types/page-meta-generator.d.ts

@@ -1,17 +1,19 @@
-import type { Asset, DataSources, Page, Scope } from "@webstudio-is/sdk";
+import { type Asset, type DataSources, type Page, type Scope } from "@webstudio-is/sdk";
 export type PageMeta = {
     title: string;
     description?: string;
     excludePageFromSearch?: boolean;
     socialImageAssetId?: Asset["id"];
     socialImageUrl?: string;
+    status?: number;
+    redirect?: string;
     custom: Array<{
         property: string;
         content: string;
     }>;
 };
-export declare const generatePageMeta: ({ scope, page, dataSources, }: {
-    scope: Scope;
+export declare const generatePageMeta: ({ globalScope, page, dataSources, }: {
+    globalScope: Scope;
     page: Page;
     dataSources: Map<string, {
         value: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.132.0",
+  "version": "0.134.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.132.0",
-    "@webstudio-is/css-engine": "0.132.0",
-    "@webstudio-is/image": "0.132.0",
-    "@webstudio-is/icons": "^0.132.0",
-    "@webstudio-is/sdk": "0.132.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": {
     ".": {