@webstudio-is/react-sdk 0.133.0 → 0.135.0

package/lib/index.js

@@ -649,6 +649,7 @@ import { StyleValue } from "@webstudio-is/css-engine";
 import jsep from "jsep";
 import jsepAssignment from "@jsep-plugin/assignment";
 import jsepObject from "@jsep-plugin/object";
+jsep.literals["undefined"] = "undefined";
 jsep.plugins.register(jsepAssignment);
 jsep.plugins.register(jsepObject);
 var generateCode = (node, failOnForbidden, options) => {
@@ -1191,7 +1192,8 @@ var componentCategories = [
   "media",
   "forms",
   "radix",
-  "hidden"
+  "hidden",
+  "utilities"
 ];
 var stateCategories = ["states", "component-states"];
 var ComponentState = z3.object({
@@ -1337,7 +1339,8 @@ import { parseComponentName } from "@webstudio-is/sdk";
 var generateAction = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   const setters = /* @__PURE__ */ new Set();
   let args = [];
@@ -1354,6 +1357,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 +1393,8 @@ var generateAction = ({
 var generatePropValue = ({
   scope,
   prop,
-  dataSources
+  dataSources,
+  usedDataSources
 }) => {
   if (prop.type === "asset" || prop.type === "page") {
     return;
@@ -1402,17 +1407,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 +1428,7 @@ var generateJsxElement = ({
   instance,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   children,
   classesMap
@@ -1445,7 +1453,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 +1538,7 @@ var generateJsxChildren = ({
   instances,
   props,
   dataSources,
+  usedDataSources,
   indexesWithinAncestors,
   classesMap
 }) => {
@@ -1540,6 +1554,7 @@ var generateJsxChildren = ({
       const expression = generateExpression({
         expression: child.value,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedChildren = `{${expression}}
@@ -1557,6 +1572,7 @@ var generateJsxChildren = ({
         instance,
         props,
         dataSources,
+        usedDataSources,
         indexesWithinAncestors,
         classesMap,
         children: generateJsxChildren({
@@ -1566,6 +1582,7 @@ var generateJsxChildren = ({
           instances,
           props,
           dataSources,
+          usedDataSources,
           indexesWithinAncestors
         })
       });
@@ -1590,17 +1607,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 +1644,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 +1667,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 +1684,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 +1707,7 @@ var generateResourcesLoader = ({
       const url = generateExpression({
         expression: resource.url,
         dataSources,
+        usedDataSources,
         scope
       });
       generatedLoaders += `url: ${url},
@@ -1714,6 +1720,7 @@ var generateResourcesLoader = ({
         const value = generateExpression({
           expression: header.value,
           dataSources,
+          usedDataSources,
           scope
         });
         generatedLoaders += `{ name: "${header.name}", value: ${value} },
@@ -1725,12 +1732,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 +1768,8 @@ var generateResourcesLoader = ({
 `;
   generated += `export const loadResources = async (_props: { params: Params }) => {
 `;
+  generated += generatedVariables;
   if (hasResources) {
-    generated += generatedVariables;
     generated += `const [
 `;
     generated += generatedOutput;
@@ -1862,7 +1887,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/components/component-meta.d.ts

@@ -688,7 +688,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden", "utilities"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -706,7 +706,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden", "utilities"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -2035,7 +2035,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "utilities" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -2488,7 +2488,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "utilities" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/components/components-utils.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { componentAttribute, idAttribute } from "../props";
-export type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+export type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & WebstudioComponentSystemProps & React.RefAttributes<HTMLElement>>;
+export type Components = Map<string, AnyComponent>;
+export type WebstudioComponentSystemProps = {
     [componentAttribute]: string;
     [idAttribute]: string;
-} & React.RefAttributes<HTMLElement>>;
-export type Components = Map<string, AnyComponent>;
+};

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

@@ -2250,7 +2250,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "utilities" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

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.135.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/fonts": "0.135.0",
+    "@webstudio-is/css-engine": "0.135.0",
+    "@webstudio-is/icons": "^0.135.0",
+    "@webstudio-is/image": "0.135.0",
+    "@webstudio-is/sdk": "0.135.0"
   },
   "exports": {
     ".": {