@webstudio-is/react-sdk 0.292.0 → 0.293.0

package/lib/index.js

@@ -548,6 +548,7 @@ var generateJsxElement = ({
   tagsOverrides,
   instance,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
@@ -574,10 +575,18 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
   let collectionItemValue;
   let collectionItemKeyValue;
   let classNameValue;
-  for (const prop of props.values()) {
-    if (prop.instanceId !== instance.id) {
-      continue;
+  const instanceProps = Array.from(props.values()).filter(
+    (prop) => prop.instanceId === instance.id
+  );
+  const instancePropNames = new Set(instanceProps.map((prop) => prop.name));
+  const projectedResourceProps = /* @__PURE__ */ new Map();
+  const getGeneratedPropName = (name) => {
+    if (hasTags && !meta?.props?.[name]) {
+      return standardAttributesToReactProps[name] ?? name;
     }
+    return name;
+  };
+  for (const prop of instanceProps) {
     const propValue = generatePropValue({
       scope,
       prop,
@@ -587,10 +596,18 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
     if (isAttributeNameSafe(prop.name) === false) {
       continue;
     }
-    let name = prop.name;
-    if (hasTags && !meta?.props?.[prop.name]) {
-      name = standardAttributesToReactProps[prop.name] ?? prop.name;
+    if (prop.type === "resource") {
+      const propMeta = meta?.props?.[prop.name];
+      const resource = resources?.get(prop.value);
+      if (propMeta?.type === "resource" && resource !== void 0) {
+        for (const name2 of propMeta.generatedProps ?? []) {
+          if (instancePropNames.has(name2) === false && isAttributeNameSafe(name2)) {
+            projectedResourceProps.set(name2, resource[name2]);
+          }
+        }
+      }
     }
+    const name = getGeneratedPropName(prop.name);
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -622,6 +639,11 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
 ${name}={${propValue}}`;
     }
   }
+  for (const [propName, value] of projectedResourceProps) {
+    const name = getGeneratedPropName(propName);
+    generatedProps += `
+${name}={${JSON.stringify(value)}}`;
+  }
   const classMapArray = classesMap?.get(instance.id);
   if (classMapArray || classNameValue) {
     let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
@@ -716,6 +738,7 @@ var generateJsxChildren = ({
   children,
   instances,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
@@ -757,6 +780,7 @@ var generateJsxChildren = ({
         tagsOverrides,
         instance,
         props,
+        resources,
         dataSources,
         usedDataSources,
         indexesWithinAncestors,
@@ -769,6 +793,7 @@ var generateJsxChildren = ({
           children: instance.children,
           instances,
           props,
+          resources,
           dataSources,
           usedDataSources,
           indexesWithinAncestors,
@@ -788,6 +813,7 @@ var generateWebstudioComponent = ({
   parameters,
   instances,
   props,
+  resources,
   dataSources,
   metas,
   tagsOverrides,
@@ -807,6 +833,7 @@ var generateWebstudioComponent = ({
       tagsOverrides,
       instance,
       props,
+      resources,
       dataSources,
       usedDataSources,
       indexesWithinAncestors,
@@ -818,6 +845,7 @@ var generateWebstudioComponent = ({
         children: instance.children,
         instances,
         props,
+        resources,
         dataSources,
         usedDataSources,
         indexesWithinAncestors,

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

@@ -1,5 +1,5 @@
-import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors } from "@webstudio-is/sdk";
-export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
+import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors, Resources } from "@webstudio-is/sdk";
+export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides, instance, props, resources, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
     context?: "expression" | "jsx";
     scope: Scope;
     metas: Map<Instance["component"], WsComponentMeta>;
@@ -9,26 +9,28 @@ export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides
     tagsOverrides?: Record<string, string>;
     instance: Instance;
     props: Props;
+    resources?: Resources;
     dataSources: DataSources;
     usedDataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
     classesMap?: Map<string, Array<string>>;
 }) => string;
-export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
+export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, children, instances, props, resources, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
     scope: Scope;
     metas: Map<Instance["component"], WsComponentMeta>;
     tagsOverrides?: Record<string, string>;
     children: Instance["children"];
     instances: Instances;
     props: Props;
+    resources?: Resources;
     dataSources: DataSources;
     usedDataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap?: Map<string, Array<string>>;
     excludePlaceholders?: boolean;
 }) => string;
-export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, metas, tagsOverrides, classesMap, }: {
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, resources, dataSources, metas, tagsOverrides, classesMap, }: {
     scope: Scope;
     name: string;
     rootInstanceId: Instance["id"];
@@ -37,6 +39,7 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
     }>[];
     instances: Instances;
     props: Props;
+    resources?: Resources;
     dataSources: DataSources;
     classesMap: Map<string, Array<string>>;
     metas: Map<Instance["component"], WsComponentMeta>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.292.0",
+  "version": "0.293.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -15,7 +15,7 @@
     "typescript": "7.0.2",
     "vitest": "^3.1.2",
     "zod": "^4.4.3",
-    "@webstudio-is/template": "0.292.0",
+    "@webstudio-is/template": "0.293.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,12 +26,12 @@
   "dependencies": {
     "change-case": "^5.4.4",
     "nanoid": "^5.1.5",
-    "@webstudio-is/css-engine": "0.292.0",
-    "@webstudio-is/fonts": "0.292.0",
-    "@webstudio-is/icons": "^0.292.0",
-    "@webstudio-is/image": "0.292.0",
-    "@webstudio-is/expression": "0.292.0",
-    "@webstudio-is/sdk": "0.292.0"
+    "@webstudio-is/css-engine": "0.293.0",
+    "@webstudio-is/expression": "0.293.0",
+    "@webstudio-is/image": "0.293.0",
+    "@webstudio-is/sdk": "0.293.0",
+    "@webstudio-is/icons": "^0.293.0",
+    "@webstudio-is/fonts": "0.293.0"
   },
   "exports": {
     ".": {