@webstudio-is/react-sdk 0.219.0 → 0.221.0

package/lib/index.js

@@ -393,6 +393,7 @@ var generateJsxElement = ({
   context = "jsx",
   scope,
   metas,
+  tagsOverrides,
   instance,
   props,
   dataSources,
@@ -404,7 +405,8 @@ var generateJsxElement = ({
   if (instance.component === descendantComponent) {
     return "";
   }
-  const hasTags = Object.keys(metas.get(instance.component)?.presetStyle ?? {}).length > 0;
+  const meta = metas.get(instance.component);
+  const hasTags = Object.keys(meta?.presetStyle ?? {}).length > 0;
   let generatedProps = "";
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
@@ -433,7 +435,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       continue;
     }
     let name = prop.name;
-    if (instance.component === elementComponent || hasTags) {
+    if (hasTags && !meta?.props?.[prop.name]) {
       name = standardAttributesToReactProps[prop.name] ?? prop.name;
     }
     if (prop.name === showAttribute) {
@@ -495,21 +497,19 @@ ${name}={${propValue}}`;
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
-  } else if (instance.component === elementComponent) {
-    const tagName = instance.tag ?? "div";
-    if (instance.children.length === 0) {
-      generatedElement += `<${tagName}${generatedProps} />
-`;
+  } else {
+    let componentVariable;
+    if (instance.component === elementComponent) {
+      componentVariable = instance.tag ?? "div";
+      const componentDescriptor = tagsOverrides?.[componentVariable];
+      if (componentDescriptor !== void 0) {
+        const [_importSource, importSpecifier] = componentDescriptor.split(":");
+        componentVariable = scope.getName(componentDescriptor, importSpecifier);
+      }
     } else {
-      generatedElement += `<${tagName}${generatedProps}>
-`;
-      generatedElement += children;
-      generatedElement += `</${tagName}>
-`;
+      const [_namespace, shortName] = parseComponentName(instance.component);
+      componentVariable = scope.getName(instance.component, shortName);
     }
-  } else {
-    const [_namespace, shortName] = parseComponentName(instance.component);
-    const componentVariable = scope.getName(instance.component, shortName);
     if (instance.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
 `;
@@ -547,6 +547,7 @@ ${name}={${propValue}}`;
 var generateJsxChildren = ({
   scope,
   metas,
+  tagsOverrides,
   children,
   instances,
   props,
@@ -588,6 +589,7 @@ var generateJsxChildren = ({
         context: "jsx",
         scope,
         metas,
+        tagsOverrides,
         instance,
         props,
         dataSources,
@@ -598,6 +600,7 @@ var generateJsxChildren = ({
           classesMap,
           scope,
           metas,
+          tagsOverrides,
           children: instance.children,
           instances,
           props,
@@ -622,6 +625,7 @@ var generateWebstudioComponent = ({
   props,
   dataSources,
   metas,
+  tagsOverrides,
   classesMap
 }) => {
   const instance = instances.get(rootInstanceId);
@@ -635,6 +639,7 @@ var generateWebstudioComponent = ({
       context: "expression",
       scope,
       metas,
+      tagsOverrides,
       instance,
       props,
       dataSources,
@@ -644,6 +649,7 @@ var generateWebstudioComponent = ({
       children: generateJsxChildren({
         scope,
         metas,
+        tagsOverrides,
         children: instance.children,
         instances,
         props,

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

@@ -1,8 +1,12 @@
 import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors } from "@webstudio-is/sdk";
-export declare const generateJsxElement: ({ context, scope, metas, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
+export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
     context?: "expression" | "jsx";
     scope: Scope;
     metas: Map<Instance["component"], WsComponentMeta>;
+    /**
+     * Record<tag, componentDescriptor>
+     */
+    tagsOverrides?: Record<string, string>;
     instance: Instance;
     props: Props;
     dataSources: DataSources;
@@ -11,9 +15,10 @@ export declare const generateJsxElement: ({ context, scope, metas, instance, pro
     children: string;
     classesMap?: Map<string, Array<string>>;
 }) => string;
-export declare const generateJsxChildren: ({ scope, metas, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
+export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
     scope: Scope;
     metas: Map<Instance["component"], WsComponentMeta>;
+    tagsOverrides?: Record<string, string>;
     children: Instance["children"];
     instances: Instances;
     props: Props;
@@ -23,7 +28,7 @@ export declare const generateJsxChildren: ({ scope, metas, children, instances,
     classesMap?: Map<string, Array<string>>;
     excludePlaceholders?: boolean;
 }) => string;
-export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, metas, classesMap, }: {
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, metas, tagsOverrides, classesMap, }: {
     scope: Scope;
     name: string;
     rootInstanceId: Instance["id"];
@@ -35,4 +40,8 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
     dataSources: DataSources;
     classesMap: Map<string, Array<string>>;
     metas: Map<Instance["component"], WsComponentMeta>;
+    /**
+     * Record<tag, componentDescriptor>
+     */
+    tagsOverrides?: Record<string, string>;
 }) => string;

package/lib/types/hook.d.ts

@@ -3,6 +3,7 @@ export type InstanceData = {
     id: Instance["id"];
     instanceKey: string;
     component: Instance["component"];
+    tag?: Instance["tag"];
 };
 /**
  * Hooks are subscriptions to builder events

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.219.0",
+  "version": "0.221.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,7 +14,7 @@
     "type-fest": "^4.37.0",
     "vitest": "^3.1.2",
     "zod": "^3.24.2",
-    "@webstudio-is/template": "0.219.0",
+    "@webstudio-is/template": "0.221.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,11 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.1.5",
-    "@webstudio-is/css-engine": "0.219.0",
-    "@webstudio-is/fonts": "0.219.0",
-    "@webstudio-is/image": "0.219.0",
-    "@webstudio-is/icons": "^0.219.0",
-    "@webstudio-is/sdk": "0.219.0"
+    "@webstudio-is/css-engine": "0.221.0",
+    "@webstudio-is/fonts": "0.221.0",
+    "@webstudio-is/image": "0.221.0",
+    "@webstudio-is/icons": "^0.221.0",
+    "@webstudio-is/sdk": "0.221.0"
   },
   "exports": {
     ".": {