@webstudio-is/react-sdk 0.294.0 → 0.296.0

package/lib/index.js

@@ -252,10 +252,7 @@ import {
 } from "@webstudio-is/sdk";
 import { transpileExpression } from "@webstudio-is/expression";
 import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
-import {
-  getJsxPropName,
-  mapAttributeNames
-} from "@webstudio-is/content-engine/jsx-attributes";
+import { getJsxPropName } from "@webstudio-is/content-engine/jsx-attributes";
 var generateAction = ({
   scope,
   prop,
@@ -378,11 +375,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
   let collectionDataValue;
   let collectionItemValue;
   let collectionItemKeyValue;
-  let classNameValue;
-  const instanceProps = Array.from(props.values()).filter(
-    (prop) => prop.instanceId === instance.id
-  );
-  const instancePropNames = new Set(instanceProps.map((prop) => prop.name));
+  const classNameValues = [];
   const projectedResourceProps = /* @__PURE__ */ new Map();
   const componentPropNames = new Set(Object.keys(meta?.props ?? {}));
   const acceptsHtmlAttributes = hasTags || instance.tag !== void 0 || instance.component === elementComponent;
@@ -391,36 +384,45 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
     componentPropNames,
     acceptsHtmlAttributes
   });
-  const generatedPropNames = new Map(
-    mapAttributeNames({
-      attributes: instanceProps.filter(({ name }) => isAttributeNameSafe(name)),
-      direction: "instance-to-jsx",
-      componentPropNames,
-      acceptsHtmlAttributes
-    }).map(({ id, name }) => [id, name])
-  );
-  for (const prop of instanceProps) {
+  const propsByGeneratedName = /* @__PURE__ */ new Map();
+  const classProps = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.instanceId !== instance.id || isAttributeNameSafe(prop.name) === false) {
+      continue;
+    }
+    const name = getGeneratedPropName(prop.name);
+    if (name === "className") {
+      classProps.set(prop.name, prop);
+      continue;
+    }
+    propsByGeneratedName.set(name, prop);
+  }
+  const generatedPropNames = /* @__PURE__ */ new Set([
+    ...propsByGeneratedName.keys(),
+    ...classProps.size > 0 ? ["className"] : []
+  ]);
+  for (const [name, prop] of [
+    ...propsByGeneratedName,
+    ...Array.from(classProps.values(), (prop2) => ["className", prop2])
+  ]) {
     const propValue = generatePropValue({
       scope,
       prop,
       dataSources,
       usedDataSources
     });
-    if (isAttributeNameSafe(prop.name) === false) {
-      continue;
-    }
     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]);
+        for (const propName of propMeta.generatedProps ?? []) {
+          const generatedPropName = getGeneratedPropName(propName);
+          if (generatedPropNames.has(generatedPropName) === false && isAttributeNameSafe(propName)) {
+            projectedResourceProps.set(generatedPropName, resource[propName]);
           }
         }
       }
     }
-    const name = generatedPropNames.get(prop.id) ?? prop.name;
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -444,7 +446,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       continue;
     }
     if (name === "className" && propValue !== void 0) {
-      classNameValue = propValue;
+      classNameValues.push(propValue);
       continue;
     }
     if (propValue !== void 0) {
@@ -452,15 +454,14 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
 ${name}={${propValue}}`;
     }
   }
-  for (const [propName, value] of projectedResourceProps) {
-    const name = getGeneratedPropName(propName);
+  for (const [name, value] of projectedResourceProps) {
     generatedProps += `
 ${name}={${JSON.stringify(value)}}`;
   }
   const classMapArray = classesMap?.get(instance.id);
-  if (classMapArray || classNameValue) {
+  if (classMapArray || classNameValues.length > 0) {
     let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
-    if (classNameValue) {
+    for (const classNameValue of classNameValues) {
       if (classNameTemplate) {
         classNameTemplate += " ";
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.294.0",
+  "version": "0.296.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.294.0",
+    "@webstudio-is/template": "0.296.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,13 +26,13 @@
   "dependencies": {
     "change-case": "^5.4.4",
     "nanoid": "^5.1.5",
-    "@webstudio-is/content-engine": "0.294.0",
-    "@webstudio-is/css-engine": "0.294.0",
-    "@webstudio-is/fonts": "0.294.0",
-    "@webstudio-is/expression": "0.294.0",
-    "@webstudio-is/icons": "^0.294.0",
-    "@webstudio-is/sdk": "0.294.0",
-    "@webstudio-is/image": "0.294.0"
+    "@webstudio-is/expression": "0.296.0",
+    "@webstudio-is/css-engine": "0.296.0",
+    "@webstudio-is/content-engine": "0.296.0",
+    "@webstudio-is/fonts": "0.296.0",
+    "@webstudio-is/icons": "^0.296.0",
+    "@webstudio-is/sdk": "0.296.0",
+    "@webstudio-is/image": "0.296.0"
   },
   "exports": {
     ".": {