@webstudio-is/react-sdk 0.218.0 → 0.220.0

package/lib/index.js

@@ -155,7 +155,6 @@ var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
-var animationCanPlayOnCanvasAttribute = "data-ws-animation-can-play-on-canvas";
 var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
 var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
 var validAttributeNameRegex = new RegExp(
@@ -194,505 +193,111 @@ import {
 } from "@webstudio-is/sdk";
 import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
 
-// src/standard-attributes.ts
+// src/__generated__/standard-attributes.ts
 var standardAttributesToReactProps = {
-  // HTML
-  accept: "accept",
-  acceptcharset: "acceptCharset",
   "accept-charset": "acceptCharset",
   accesskey: "accessKey",
-  action: "action",
   allowfullscreen: "allowFullScreen",
-  alt: "alt",
-  as: "as",
-  async: "async",
   autocapitalize: "autoCapitalize",
   autocomplete: "autoComplete",
   autocorrect: "autoCorrect",
   autofocus: "autoFocus",
   autoplay: "autoPlay",
-  autosave: "autoSave",
-  capture: "capture",
-  cellpadding: "cellPadding",
-  cellspacing: "cellSpacing",
-  challenge: "challenge",
   charset: "charSet",
-  checked: "checked",
-  children: "children",
-  cite: "cite",
   class: "className",
-  classid: "classID",
-  classname: "className",
-  cols: "cols",
   colspan: "colSpan",
-  content: "content",
   contenteditable: "contentEditable",
-  contextmenu: "contextMenu",
-  controls: "controls",
-  controlslist: "controlsList",
-  coords: "coords",
   crossorigin: "crossOrigin",
-  dangerouslysetinnerhtml: "dangerouslySetInnerHTML",
-  data: "data",
   datetime: "dateTime",
-  default: "default",
-  defaultchecked: "defaultChecked",
-  defaultvalue: "defaultValue",
-  defer: "defer",
-  dir: "dir",
-  disabled: "disabled",
-  disablepictureinpicture: "disablePictureInPicture",
-  disableremoteplayback: "disableRemotePlayback",
-  download: "download",
-  draggable: "draggable",
   enctype: "encType",
   enterkeyhint: "enterKeyHint",
   fetchpriority: "fetchPriority",
   for: "htmlFor",
-  form: "form",
   formmethod: "formMethod",
   formaction: "formAction",
   formenctype: "formEncType",
   formnovalidate: "formNoValidate",
   formtarget: "formTarget",
-  frameborder: "frameBorder",
-  headers: "headers",
-  height: "height",
-  hidden: "hidden",
-  high: "high",
-  href: "href",
   hreflang: "hrefLang",
-  htmlfor: "htmlFor",
-  httpequiv: "httpEquiv",
   "http-equiv": "httpEquiv",
-  icon: "icon",
-  id: "id",
   imagesizes: "imageSizes",
   imagesrcset: "imageSrcSet",
-  inert: "inert",
-  innerhtml: "innerHTML",
   inputmode: "inputMode",
-  integrity: "integrity",
-  is: "is",
   itemid: "itemID",
   itemprop: "itemProp",
   itemref: "itemRef",
   itemscope: "itemScope",
   itemtype: "itemType",
-  keyparams: "keyParams",
-  keytype: "keyType",
-  kind: "kind",
-  label: "label",
-  lang: "lang",
-  list: "list",
-  loop: "loop",
-  low: "low",
-  manifest: "manifest",
-  marginwidth: "marginWidth",
-  marginheight: "marginHeight",
-  max: "max",
   maxlength: "maxLength",
-  media: "media",
-  mediagroup: "mediaGroup",
-  method: "method",
-  min: "min",
   minlength: "minLength",
-  multiple: "multiple",
-  muted: "muted",
-  name: "name",
   nomodule: "noModule",
-  nonce: "nonce",
   novalidate: "noValidate",
-  open: "open",
-  optimum: "optimum",
-  pattern: "pattern",
-  placeholder: "placeholder",
   playsinline: "playsInline",
-  poster: "poster",
-  preload: "preload",
-  profile: "profile",
-  radiogroup: "radioGroup",
   readonly: "readOnly",
   referrerpolicy: "referrerPolicy",
-  rel: "rel",
-  required: "required",
-  reversed: "reversed",
-  role: "role",
-  rows: "rows",
   rowspan: "rowSpan",
-  sandbox: "sandbox",
-  scope: "scope",
-  scoped: "scoped",
-  scrolling: "scrolling",
-  seamless: "seamless",
-  selected: "selected",
-  shape: "shape",
-  size: "size",
-  sizes: "sizes",
-  span: "span",
   spellcheck: "spellCheck",
-  src: "src",
   srcdoc: "srcDoc",
   srclang: "srcLang",
   srcset: "srcSet",
-  start: "start",
-  step: "step",
-  style: "style",
-  summary: "summary",
   tabindex: "tabIndex",
-  target: "target",
-  title: "title",
-  type: "type",
   usemap: "useMap",
-  value: "value",
-  width: "width",
-  wmode: "wmode",
-  wrap: "wrap",
-  // SVG
-  about: "about",
-  accentheight: "accentHeight",
-  "accent-height": "accentHeight",
-  accumulate: "accumulate",
-  additive: "additive",
-  alignmentbaseline: "alignmentBaseline",
-  "alignment-baseline": "alignmentBaseline",
-  allowreorder: "allowReorder",
-  alphabetic: "alphabetic",
-  amplitude: "amplitude",
-  arabicform: "arabicForm",
-  "arabic-form": "arabicForm",
-  ascent: "ascent",
-  attributename: "attributeName",
-  attributetype: "attributeType",
-  autoreverse: "autoReverse",
-  azimuth: "azimuth",
-  basefrequency: "baseFrequency",
-  baselineshift: "baselineShift",
-  "baseline-shift": "baselineShift",
-  baseprofile: "baseProfile",
-  bbox: "bbox",
-  begin: "begin",
-  bias: "bias",
-  by: "by",
-  calcmode: "calcMode",
-  capheight: "capHeight",
-  "cap-height": "capHeight",
-  clip: "clip",
-  clippath: "clipPath",
-  "clip-path": "clipPath",
-  clippathunits: "clipPathUnits",
-  cliprule: "clipRule",
-  "clip-rule": "clipRule",
-  color: "color",
-  colorinterpolation: "colorInterpolation",
-  "color-interpolation": "colorInterpolation",
-  colorinterpolationfilters: "colorInterpolationFilters",
-  "color-interpolation-filters": "colorInterpolationFilters",
-  colorprofile: "colorProfile",
-  "color-profile": "colorProfile",
-  colorrendering: "colorRendering",
-  "color-rendering": "colorRendering",
-  contentscripttype: "contentScriptType",
-  contentstyletype: "contentStyleType",
-  cursor: "cursor",
-  cx: "cx",
-  cy: "cy",
-  d: "d",
-  datatype: "datatype",
-  decelerate: "decelerate",
-  descent: "descent",
-  diffuseconstant: "diffuseConstant",
-  direction: "direction",
-  display: "display",
-  divisor: "divisor",
-  dominantbaseline: "dominantBaseline",
-  "dominant-baseline": "dominantBaseline",
-  dur: "dur",
-  dx: "dx",
-  dy: "dy",
-  edgemode: "edgeMode",
-  elevation: "elevation",
-  enablebackground: "enableBackground",
-  "enable-background": "enableBackground",
-  end: "end",
-  exponent: "exponent",
-  externalresourcesrequired: "externalResourcesRequired",
-  fill: "fill",
-  fillopacity: "fillOpacity",
-  "fill-opacity": "fillOpacity",
-  fillrule: "fillRule",
-  "fill-rule": "fillRule",
-  filter: "filter",
-  filterres: "filterRes",
-  filterunits: "filterUnits",
-  floodopacity: "floodOpacity",
-  "flood-opacity": "floodOpacity",
-  floodcolor: "floodColor",
-  "flood-color": "floodColor",
-  focusable: "focusable",
-  fontfamily: "fontFamily",
-  "font-family": "fontFamily",
-  fontsize: "fontSize",
-  "font-size": "fontSize",
-  fontsizeadjust: "fontSizeAdjust",
-  "font-size-adjust": "fontSizeAdjust",
-  fontstretch: "fontStretch",
-  "font-stretch": "fontStretch",
-  fontstyle: "fontStyle",
-  "font-style": "fontStyle",
-  fontvariant: "fontVariant",
-  "font-variant": "fontVariant",
-  fontweight: "fontWeight",
-  "font-weight": "fontWeight",
-  format: "format",
-  from: "from",
-  fx: "fx",
-  fy: "fy",
-  g1: "g1",
-  g2: "g2",
-  glyphname: "glyphName",
-  "glyph-name": "glyphName",
-  glyphorientationhorizontal: "glyphOrientationHorizontal",
-  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
-  glyphorientationvertical: "glyphOrientationVertical",
-  "glyph-orientation-vertical": "glyphOrientationVertical",
-  glyphref: "glyphRef",
-  gradienttransform: "gradientTransform",
-  gradientunits: "gradientUnits",
-  hanging: "hanging",
-  horizadvx: "horizAdvX",
-  "horiz-adv-x": "horizAdvX",
-  horizoriginx: "horizOriginX",
-  "horiz-origin-x": "horizOriginX",
-  ideographic: "ideographic",
-  imagerendering: "imageRendering",
-  "image-rendering": "imageRendering",
-  in2: "in2",
-  in: "in",
-  inlist: "inlist",
-  intercept: "intercept",
-  k1: "k1",
-  k2: "k2",
-  k3: "k3",
-  k4: "k4",
-  k: "k",
-  kernelmatrix: "kernelMatrix",
-  kernelunitlength: "kernelUnitLength",
-  kerning: "kerning",
-  keypoints: "keyPoints",
-  keysplines: "keySplines",
-  keytimes: "keyTimes",
-  lengthadjust: "lengthAdjust",
-  letterspacing: "letterSpacing",
-  "letter-spacing": "letterSpacing",
-  lightingcolor: "lightingColor",
-  "lighting-color": "lightingColor",
-  limitingconeangle: "limitingConeAngle",
-  local: "local",
-  markerend: "markerEnd",
-  "marker-end": "markerEnd",
-  markerheight: "markerHeight",
-  markermid: "markerMid",
-  "marker-mid": "markerMid",
-  markerstart: "markerStart",
-  "marker-start": "markerStart",
-  markerunits: "markerUnits",
-  markerwidth: "markerWidth",
-  mask: "mask",
-  maskcontentunits: "maskContentUnits",
-  maskunits: "maskUnits",
-  mathematical: "mathematical",
-  mode: "mode",
-  numoctaves: "numOctaves",
-  offset: "offset",
-  opacity: "opacity",
-  operator: "operator",
-  order: "order",
-  orient: "orient",
-  orientation: "orientation",
-  origin: "origin",
-  overflow: "overflow",
-  overlineposition: "overlinePosition",
-  "overline-position": "overlinePosition",
-  overlinethickness: "overlineThickness",
-  "overline-thickness": "overlineThickness",
-  paintorder: "paintOrder",
-  "paint-order": "paintOrder",
-  panose1: "panose1",
-  "panose-1": "panose1",
-  pathlength: "pathLength",
-  patterncontentunits: "patternContentUnits",
-  patterntransform: "patternTransform",
-  patternunits: "patternUnits",
-  pointerevents: "pointerEvents",
-  "pointer-events": "pointerEvents",
-  points: "points",
-  pointsatx: "pointsAtX",
-  pointsaty: "pointsAtY",
-  pointsatz: "pointsAtZ",
-  popover: "popover",
   popovertarget: "popoverTarget",
   popovertargetaction: "popoverTargetAction",
-  prefix: "prefix",
-  preservealpha: "preserveAlpha",
-  preserveaspectratio: "preserveAspectRatio",
-  primitiveunits: "primitiveUnits",
-  property: "property",
-  r: "r",
-  radius: "radius",
-  refx: "refX",
-  refy: "refY",
-  renderingintent: "renderingIntent",
-  "rendering-intent": "renderingIntent",
-  repeatcount: "repeatCount",
-  repeatdur: "repeatDur",
-  requiredextensions: "requiredExtensions",
-  requiredfeatures: "requiredFeatures",
-  resource: "resource",
-  restart: "restart",
-  result: "result",
-  results: "results",
-  rotate: "rotate",
-  rx: "rx",
-  ry: "ry",
-  scale: "scale",
-  security: "security",
-  seed: "seed",
-  shaperendering: "shapeRendering",
-  "shape-rendering": "shapeRendering",
-  slope: "slope",
-  spacing: "spacing",
-  specularconstant: "specularConstant",
-  specularexponent: "specularExponent",
-  speed: "speed",
-  spreadmethod: "spreadMethod",
-  startoffset: "startOffset",
-  stddeviation: "stdDeviation",
-  stemh: "stemh",
-  stemv: "stemv",
-  stitchtiles: "stitchTiles",
-  stopcolor: "stopColor",
-  "stop-color": "stopColor",
-  stopopacity: "stopOpacity",
-  "stop-opacity": "stopOpacity",
-  strikethroughposition: "strikethroughPosition",
-  "strikethrough-position": "strikethroughPosition",
-  strikethroughthickness: "strikethroughThickness",
-  "strikethrough-thickness": "strikethroughThickness",
-  string: "string",
-  stroke: "stroke",
-  strokedasharray: "strokeDasharray",
-  "stroke-dasharray": "strokeDasharray",
-  strokedashoffset: "strokeDashoffset",
-  "stroke-dashoffset": "strokeDashoffset",
-  strokelinecap: "strokeLinecap",
-  "stroke-linecap": "strokeLinecap",
-  strokelinejoin: "strokeLinejoin",
-  "stroke-linejoin": "strokeLinejoin",
-  strokemiterlimit: "strokeMiterlimit",
-  "stroke-miterlimit": "strokeMiterlimit",
-  strokewidth: "strokeWidth",
-  "stroke-width": "strokeWidth",
-  strokeopacity: "strokeOpacity",
-  "stroke-opacity": "strokeOpacity",
-  suppresscontenteditablewarning: "suppressContentEditableWarning",
-  suppresshydrationwarning: "suppressHydrationWarning",
-  surfacescale: "surfaceScale",
-  systemlanguage: "systemLanguage",
-  tablevalues: "tableValues",
-  targetx: "targetX",
-  targety: "targetY",
-  textanchor: "textAnchor",
-  "text-anchor": "textAnchor",
-  textdecoration: "textDecoration",
-  "text-decoration": "textDecoration",
-  textlength: "textLength",
-  textrendering: "textRendering",
-  "text-rendering": "textRendering",
-  to: "to",
-  transform: "transform",
-  transformorigin: "transformOrigin",
-  "transform-origin": "transformOrigin",
-  typeof: "typeof",
-  u1: "u1",
-  u2: "u2",
-  underlineposition: "underlinePosition",
-  "underline-position": "underlinePosition",
-  underlinethickness: "underlineThickness",
-  "underline-thickness": "underlineThickness",
-  unicode: "unicode",
-  unicodebidi: "unicodeBidi",
-  "unicode-bidi": "unicodeBidi",
-  unicoderange: "unicodeRange",
-  "unicode-range": "unicodeRange",
-  unitsperem: "unitsPerEm",
-  "units-per-em": "unitsPerEm",
-  unselectable: "unselectable",
-  valphabetic: "vAlphabetic",
-  "v-alphabetic": "vAlphabetic",
-  values: "values",
-  vectoreffect: "vectorEffect",
-  "vector-effect": "vectorEffect",
-  version: "version",
-  vertadvy: "vertAdvY",
-  "vert-adv-y": "vertAdvY",
-  vertoriginx: "vertOriginX",
-  "vert-origin-x": "vertOriginX",
-  vertoriginy: "vertOriginY",
-  "vert-origin-y": "vertOriginY",
-  vhanging: "vHanging",
-  "v-hanging": "vHanging",
-  videographic: "vIdeographic",
-  "v-ideographic": "vIdeographic",
-  viewbox: "viewBox",
-  viewtarget: "viewTarget",
-  visibility: "visibility",
-  vmathematical: "vMathematical",
-  "v-mathematical": "vMathematical",
-  vocab: "vocab",
-  widths: "widths",
-  wordspacing: "wordSpacing",
-  "word-spacing": "wordSpacing",
-  writingmode: "writingMode",
-  "writing-mode": "writingMode",
-  x1: "x1",
-  x2: "x2",
-  x: "x",
-  xchannelselector: "xChannelSelector",
-  xheight: "xHeight",
-  "x-height": "xHeight",
-  xlinkactuate: "xlinkActuate",
-  "xlink:actuate": "xlinkActuate",
-  xlinkarcrole: "xlinkArcrole",
-  "xlink:arcrole": "xlinkArcrole",
-  xlinkhref: "xlinkHref",
-  "xlink:href": "xlinkHref",
-  xlinkrole: "xlinkRole",
-  "xlink:role": "xlinkRole",
-  xlinkshow: "xlinkShow",
-  "xlink:show": "xlinkShow",
-  xlinktitle: "xlinkTitle",
-  "xlink:title": "xlinkTitle",
-  xlinktype: "xlinkType",
-  "xlink:type": "xlinkType",
-  xmlbase: "xmlBase",
-  "xml:base": "xmlBase",
-  xmllang: "xmlLang",
-  "xml:lang": "xmlLang",
-  xmlns: "xmlns",
-  "xml:space": "xmlSpace",
-  xmlnsxlink: "xmlnsXlink",
-  "xmlns:xlink": "xmlnsXlink",
-  xmlspace: "xmlSpace",
-  y1: "y1",
-  y2: "y2",
-  y: "y",
-  ychannelselector: "yChannelSelector",
-  z: "z",
-  zoomandpan: "zoomAndPan",
-  // added by us
   dirname: "dirName"
 };
+var reactPropsToStandardAttributes = {
+  acceptCharset: "accept-charset",
+  accessKey: "accesskey",
+  allowFullScreen: "allowfullscreen",
+  autoCapitalize: "autocapitalize",
+  autoComplete: "autocomplete",
+  autoCorrect: "autocorrect",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  charSet: "charset",
+  className: "class",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  encType: "enctype",
+  enterKeyHint: "enterkeyhint",
+  fetchPriority: "fetchpriority",
+  htmlFor: "for",
+  formMethod: "formmethod",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  hrefLang: "hreflang",
+  httpEquiv: "http-equiv",
+  imageSizes: "imagesizes",
+  imageSrcSet: "imagesrcset",
+  inputMode: "inputmode",
+  itemID: "itemid",
+  itemProp: "itemprop",
+  itemRef: "itemref",
+  itemScope: "itemscope",
+  itemType: "itemtype",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  playsInline: "playsinline",
+  readOnly: "readonly",
+  referrerPolicy: "referrerpolicy",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap",
+  popoverTarget: "popovertarget",
+  popoverTargetAction: "popovertargetaction",
+  dirName: "dirname"
+};
 
 // src/component-generator.ts
 var generateAction = ({
@@ -787,6 +392,8 @@ var generatePropValue = ({
 var generateJsxElement = ({
   context = "jsx",
   scope,
+  metas,
+  tagsOverrides,
   instance,
   props,
   dataSources,
@@ -798,6 +405,8 @@ var generateJsxElement = ({
   if (instance.component === descendantComponent) {
     return "";
   }
+  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) {
@@ -826,7 +435,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       continue;
     }
     let name = prop.name;
-    if (instance.component === elementComponent) {
+    if (hasTags && !meta?.props?.[prop.name]) {
       name = standardAttributesToReactProps[prop.name] ?? prop.name;
     }
     if (prop.name === showAttribute) {
@@ -888,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} />
 `;
@@ -939,6 +546,8 @@ ${name}={${propValue}}`;
 };
 var generateJsxChildren = ({
   scope,
+  metas,
+  tagsOverrides,
   children,
   instances,
   props,
@@ -979,6 +588,8 @@ var generateJsxChildren = ({
       generatedChildren += generateJsxElement({
         context: "jsx",
         scope,
+        metas,
+        tagsOverrides,
         instance,
         props,
         dataSources,
@@ -988,6 +599,8 @@ var generateJsxChildren = ({
         children: generateJsxChildren({
           classesMap,
           scope,
+          metas,
+          tagsOverrides,
           children: instance.children,
           instances,
           props,
@@ -1012,6 +625,7 @@ var generateWebstudioComponent = ({
   props,
   dataSources,
   metas,
+  tagsOverrides,
   classesMap
 }) => {
   const instance = instances.get(rootInstanceId);
@@ -1024,6 +638,8 @@ var generateWebstudioComponent = ({
     generatedJsx = generateJsxElement({
       context: "expression",
       scope,
+      metas,
+      tagsOverrides,
       instance,
       props,
       dataSources,
@@ -1032,6 +648,8 @@ var generateWebstudioComponent = ({
       classesMap,
       children: generateJsxChildren({
         scope,
+        metas,
+        tagsOverrides,
         children: instance.children,
         instances,
         props,
@@ -1097,7 +715,6 @@ var generateWebstudioComponent = ({
   return generatedComponent;
 };
 export {
-  animationCanPlayOnCanvasAttribute,
   collapsedAttribute,
   componentAttribute,
   generateJsxChildren,
@@ -1108,7 +725,9 @@ export {
   idAttribute,
   isAttributeNameSafe,
   normalizeProps,
+  reactPropsToStandardAttributes,
   selectorIdAttribute,
   showAttribute,
+  standardAttributesToReactProps,
   textContentAttribute
 };

package/lib/runtime.js

@@ -86,7 +86,8 @@ var PageSettingsMeta = ({
   host,
   siteName,
   pageMeta,
-  imageLoader
+  imageLoader,
+  assetBaseUrl
 }) => {
   const metas = [];
   if (url !== void 0) {
@@ -128,7 +129,7 @@ var PageSettingsMeta = ({
     metas.push({
       property: "og:image",
       content: `https://${host}${imageLoader({
-        src: pageMeta.socialImageAssetName,
+        src: `${assetBaseUrl}${pageMeta.socialImageAssetName}`,
         // Do not transform social image (not enough information do we need to do this)
         format: "raw"
       })}`
@@ -140,6 +141,12 @@ var PageSettingsMeta = ({
     });
   }
   metas.push(...pageMeta.custom);
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
+  if ((pageMeta.socialImageAssetName !== void 0 || pageMeta.socialImageUrl !== void 0) && isTwitterCardSizeDefined === false) {
+    metas.push({ property: "twitter:card", content: "summary_large_image" });
+  }
   return metas.map((meta, index) => /* @__PURE__ */ jsx(Meta, { ...meta }, index));
 };
 

package/lib/types/__generated__/standard-attributes.d.ts

@@ -0,0 +1,2 @@
+export declare const standardAttributesToReactProps: Record<string, string>;
+export declare const reactPropsToStandardAttributes: Record<string, string>;

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

@@ -1,7 +1,12 @@
 import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors } from "@webstudio-is/sdk";
-export declare const generateJsxElement: ({ context, scope, 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;
@@ -10,8 +15,10 @@ export declare const generateJsxElement: ({ context, scope, instance, props, dat
     children: string;
     classesMap?: Map<string, Array<string>>;
 }) => string;
-export declare const generateJsxChildren: ({ scope, 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;
@@ -21,7 +28,7 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     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"];
@@ -33,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/index.d.ts

@@ -4,3 +4,4 @@ export * from "./props";
 export type * from "./context";
 export type * from "./hook";
 export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
+export * from "./__generated__/standard-attributes";

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

@@ -1,10 +1,11 @@
 import type { ImageLoader } from "@webstudio-is/image";
 import type { PageMeta } from "@webstudio-is/sdk";
 export declare const isElementRenderedWithReact: (element: Element) => boolean;
-export declare const PageSettingsMeta: ({ url, host, siteName, pageMeta, imageLoader, }: {
+export declare const PageSettingsMeta: ({ url, host, siteName, pageMeta, imageLoader, assetBaseUrl, }: {
     url?: string;
     host: string;
     siteName: string;
     pageMeta: PageMeta;
     imageLoader: ImageLoader;
+    assetBaseUrl: string;
 }) => import("react/jsx-runtime").JSX.Element[];

package/lib/types/props.d.ts

@@ -1432,5 +1432,4 @@ export declare const componentAttribute: "data-ws-component";
 export declare const showAttribute: "data-ws-show";
 export declare const collapsedAttribute: "data-ws-collapsed";
 export declare const textContentAttribute: "data-ws-text-content";
-export declare const animationCanPlayOnCanvasAttribute = "data-ws-animation-can-play-on-canvas";
 export declare const isAttributeNameSafe: (attributeName: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.218.0",
+  "version": "0.220.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -12,9 +12,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "strip-indent": "^4.0.0",
     "type-fest": "^4.37.0",
-    "vitest": "^3.0.8",
+    "vitest": "^3.1.2",
     "zod": "^3.24.2",
-    "@webstudio-is/template": "0.218.0",
+    "@webstudio-is/template": "0.220.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/fonts": "0.218.0",
-    "@webstudio-is/icons": "^0.218.0",
-    "@webstudio-is/css-engine": "0.218.0",
-    "@webstudio-is/sdk": "0.218.0",
-    "@webstudio-is/image": "0.218.0"
+    "@webstudio-is/css-engine": "0.220.0",
+    "@webstudio-is/icons": "^0.220.0",
+    "@webstudio-is/sdk": "0.220.0",
+    "@webstudio-is/fonts": "0.220.0",
+    "@webstudio-is/image": "0.220.0"
   },
   "exports": {
     ".": {

package/lib/types/standard-attributes.d.ts

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export declare const standardAttributesToReactProps: Record<string, string>;