@webstudio-is/react-sdk 0.292.0 → 0.294.0

package/lib/index.js

@@ -57,7 +57,8 @@ var generateRemixParams = (pathname) => {
 // src/props.ts
 import {
   getPagePath,
-  findPageByIdOrPath
+  findPageByIdOrPath,
+  findTreeInstanceIdsExcludingSubtrees
 } from "@webstudio-is/sdk";
 var normalizeProps = ({
   props,
@@ -163,6 +164,23 @@ var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var inflatedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
+var findTreeInstanceIdsExcludingStaticHidden = ({
+  instances,
+  props,
+  rootInstanceId
+}) => {
+  const hiddenInstanceIds = /* @__PURE__ */ new Set();
+  for (const prop of props.values()) {
+    if (prop.name === showAttribute && prop.type === "boolean" && prop.value === false) {
+      hiddenInstanceIds.add(prop.instanceId);
+    }
+  }
+  return findTreeInstanceIdsExcludingSubtrees(
+    instances,
+    rootInstanceId,
+    hiddenInstanceIds
+  );
+};
 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(
@@ -223,7 +241,9 @@ import {
   parseComponentName,
   generateExpression,
   decodeDataSourceVariable,
+  contentBlockDocumentProp,
   blockComponent,
+  blockBodyComponent,
   blockTemplateComponent,
   collectionComponent,
   descendantComponent,
@@ -232,226 +252,10 @@ import {
 } from "@webstudio-is/sdk";
 import { transpileExpression } from "@webstudio-is/expression";
 import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
-
-// src/__generated__/standard-attributes.ts
-var standardAttributesToReactProps = {
-  "accept-charset": "acceptCharset",
-  accesskey: "accessKey",
-  allowfullscreen: "allowFullScreen",
-  autocapitalize: "autoCapitalize",
-  autocomplete: "autoComplete",
-  autocorrect: "autoCorrect",
-  autofocus: "autoFocus",
-  autoplay: "autoPlay",
-  charset: "charSet",
-  class: "className",
-  colspan: "colSpan",
-  contenteditable: "contentEditable",
-  crossorigin: "crossOrigin",
-  datetime: "dateTime",
-  enctype: "encType",
-  enterkeyhint: "enterKeyHint",
-  fetchpriority: "fetchPriority",
-  for: "htmlFor",
-  formmethod: "formMethod",
-  formaction: "formAction",
-  formenctype: "formEncType",
-  formnovalidate: "formNoValidate",
-  formtarget: "formTarget",
-  hreflang: "hrefLang",
-  "http-equiv": "httpEquiv",
-  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",
-  "alignment-baseline": "alignmentBaseline",
-  "baseline-shift": "baselineShift",
-  "clip-path": "clipPath",
-  "clip-rule": "clipRule",
-  "color-interpolation": "colorInterpolation",
-  "color-interpolation-filters": "colorInterpolationFilters",
-  "color-profile": "colorProfile",
-  "color-rendering": "colorRendering",
-  "dominant-baseline": "dominantBaseline",
-  "enable-background": "enableBackground",
-  "fill-opacity": "fillOpacity",
-  "fill-rule": "fillRule",
-  "flood-opacity": "floodOpacity",
-  "flood-color": "floodColor",
-  "font-family": "fontFamily",
-  "font-size": "fontSize",
-  "font-size-adjust": "fontSizeAdjust",
-  "font-stretch": "fontStretch",
-  "font-style": "fontStyle",
-  "font-variant": "fontVariant",
-  "font-weight": "fontWeight",
-  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
-  "glyph-orientation-vertical": "glyphOrientationVertical",
-  "image-rendering": "imageRendering",
-  "letter-spacing": "letterSpacing",
-  "lighting-color": "lightingColor",
-  "marker-end": "markerEnd",
-  "marker-mid": "markerMid",
-  "marker-start": "markerStart",
-  "pointer-events": "pointerEvents",
-  popovertarget: "popoverTarget",
-  popovertargetaction: "popoverTargetAction",
-  "shape-rendering": "shapeRendering",
-  "stop-color": "stopColor",
-  "stop-opacity": "stopOpacity",
-  "stroke-dasharray": "strokeDasharray",
-  "stroke-dashoffset": "strokeDashoffset",
-  "stroke-linecap": "strokeLinecap",
-  "stroke-linejoin": "strokeLinejoin",
-  "stroke-miterlimit": "strokeMiterlimit",
-  "stroke-width": "strokeWidth",
-  "stroke-opacity": "strokeOpacity",
-  "text-anchor": "textAnchor",
-  "text-decoration": "textDecoration",
-  "text-rendering": "textRendering",
-  "unicode-bidi": "unicodeBidi",
-  "word-spacing": "wordSpacing",
-  "writing-mode": "writingMode",
-  "xlink:actuate": "xlinkActuate",
-  "xlink:arcrole": "xlinkArcrole",
-  "xlink:href": "xlinkHref",
-  "xlink:role": "xlinkRole",
-  "xlink:show": "xlinkShow",
-  "xlink:title": "xlinkTitle",
-  "xlink:type": "xlinkType",
-  "xml:base": "xmlBase",
-  "xml:lang": "xmlLang",
-  "xml:space": "xmlSpace",
-  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",
-  alignmentBaseline: "alignment-baseline",
-  baselineShift: "baseline-shift",
-  clipPath: "clip-path",
-  clipRule: "clip-rule",
-  colorInterpolation: "color-interpolation",
-  colorInterpolationFilters: "color-interpolation-filters",
-  colorProfile: "color-profile",
-  colorRendering: "color-rendering",
-  dominantBaseline: "dominant-baseline",
-  enableBackground: "enable-background",
-  fillOpacity: "fill-opacity",
-  fillRule: "fill-rule",
-  floodOpacity: "flood-opacity",
-  floodColor: "flood-color",
-  fontFamily: "font-family",
-  fontSize: "font-size",
-  fontSizeAdjust: "font-size-adjust",
-  fontStretch: "font-stretch",
-  fontStyle: "font-style",
-  fontVariant: "font-variant",
-  fontWeight: "font-weight",
-  glyphOrientationHorizontal: "glyph-orientation-horizontal",
-  glyphOrientationVertical: "glyph-orientation-vertical",
-  imageRendering: "image-rendering",
-  letterSpacing: "letter-spacing",
-  lightingColor: "lighting-color",
-  markerEnd: "marker-end",
-  markerMid: "marker-mid",
-  markerStart: "marker-start",
-  pointerEvents: "pointer-events",
-  popoverTarget: "popovertarget",
-  popoverTargetAction: "popovertargetaction",
-  shapeRendering: "shape-rendering",
-  stopColor: "stop-color",
-  stopOpacity: "stop-opacity",
-  strokeDasharray: "stroke-dasharray",
-  strokeDashoffset: "stroke-dashoffset",
-  strokeLinecap: "stroke-linecap",
-  strokeLinejoin: "stroke-linejoin",
-  strokeMiterlimit: "stroke-miterlimit",
-  strokeWidth: "stroke-width",
-  strokeOpacity: "stroke-opacity",
-  textAnchor: "text-anchor",
-  textDecoration: "text-decoration",
-  textRendering: "text-rendering",
-  unicodeBidi: "unicode-bidi",
-  wordSpacing: "word-spacing",
-  writingMode: "writing-mode",
-  xlinkActuate: "xlink:actuate",
-  xlinkArcrole: "xlink:arcrole",
-  xlinkHref: "xlink:href",
-  xlinkRole: "xlink:role",
-  xlinkShow: "xlink:show",
-  xlinkTitle: "xlink:title",
-  xlinkType: "xlink:type",
-  xmlBase: "xml:base",
-  xmlLang: "xml:lang",
-  xmlSpace: "xml:space",
-  dirName: "dirname"
-};
-
-// src/component-generator.ts
+import {
+  getJsxPropName,
+  mapAttributeNames
+} from "@webstudio-is/content-engine/jsx-attributes";
 var generateAction = ({
   scope,
   prop,
@@ -548,6 +352,7 @@ var generateJsxElement = ({
   tagsOverrides,
   instance,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
@@ -574,10 +379,27 @@ ${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 componentPropNames = new Set(Object.keys(meta?.props ?? {}));
+  const acceptsHtmlAttributes = hasTags || instance.tag !== void 0 || instance.component === elementComponent;
+  const getGeneratedPropName = (instancePropName) => getJsxPropName({
+    instancePropName,
+    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 propValue = generatePropValue({
       scope,
       prop,
@@ -587,10 +409,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 = generatedPropNames.get(prop.id) ?? prop.name;
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -613,7 +443,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       }
       continue;
     }
-    if ((name === "className" || name === "class" && meta === void 0) && propValue !== void 0) {
+    if (name === "className" && propValue !== void 0) {
       classNameValue = propValue;
       continue;
     }
@@ -622,6 +452,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(" ") : "";
@@ -660,7 +495,7 @@ ${name}={${propValue}}`;
 `;
     generatedElement += `}
 `;
-  } else if (instance.component === blockComponent) {
+  } else if (instance.component === blockComponent || instance.component === blockBodyComponent) {
     generatedElement += children;
   } else {
     let componentVariable;
@@ -716,11 +551,14 @@ var generateJsxChildren = ({
   children,
   instances,
   props,
+  resources,
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
   classesMap,
-  excludePlaceholders
+  excludePlaceholders,
+  publishedContentBlocks,
+  contentBodyOverride
 }) => {
   let generatedChildren = "";
   for (const child of children) {
@@ -750,6 +588,111 @@ var generateJsxChildren = ({
       if (instance === void 0) {
         continue;
       }
+      const publishedContent = publishedContentBlocks?.get(instance.id);
+      let generatedInstanceChildren;
+      if (contentBodyOverride?.instanceId === instance.id) {
+        generatedInstanceChildren = generateJsxChildren({
+          classesMap,
+          scope,
+          metas,
+          tagsOverrides,
+          children: contentBodyOverride.children,
+          instances,
+          props,
+          resources,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders,
+          publishedContentBlocks
+        });
+      } else if (publishedContent === void 0) {
+        generatedInstanceChildren = generateJsxChildren({
+          classesMap,
+          scope,
+          metas,
+          tagsOverrides,
+          children: instance.children,
+          instances,
+          props,
+          resources,
+          dataSources,
+          usedDataSources,
+          indexesWithinAncestors,
+          excludePlaceholders,
+          publishedContentBlocks,
+          contentBodyOverride
+        });
+      } else {
+        const sourceExpression = publishedContent.sourceExpression === void 0 ? void 0 : generateExpression({
+          expression: publishedContent.sourceExpression,
+          dataSources,
+          usedDataSources,
+          scope
+        });
+        const documentParameter = Array.from(props.values()).find(
+          (prop) => prop.instanceId === instance.id && prop.name === contentBlockDocumentProp && prop.type === "parameter"
+        );
+        const documentDataSource = documentParameter === void 0 ? void 0 : dataSources.get(documentParameter.value);
+        if (documentDataSource !== void 0) {
+          usedDataSources.set(documentDataSource.id, documentDataSource);
+        }
+        const documentName = documentDataSource === void 0 ? void 0 : scope.getName(documentDataSource.id, documentDataSource.name);
+        const generatedCandidates = publishedContent.candidates.map(
+          ({
+            assetId,
+            dependencyRevision,
+            children: candidateChildren,
+            frontmatter
+          }) => {
+            const generated = generateJsxChildren({
+              classesMap,
+              scope,
+              metas,
+              tagsOverrides,
+              children: publishedContent.bodyInstanceId === void 0 ? candidateChildren : instance.children,
+              instances,
+              props,
+              resources,
+              dataSources,
+              usedDataSources,
+              indexesWithinAncestors,
+              excludePlaceholders,
+              publishedContentBlocks,
+              contentBodyOverride: publishedContent.bodyInstanceId === void 0 ? void 0 : {
+                instanceId: publishedContent.bodyInstanceId,
+                children: candidateChildren
+              }
+            });
+            const withDocument = documentName === void 0 ? generated : `{((${documentName}) => <Fragment>
+${generated}</Fragment>)(${JSON.stringify({ frontmatter })})}
+`;
+            return {
+              assetId,
+              dependencyRevision,
+              generated: withDocument
+            };
+          }
+        );
+        if (sourceExpression === void 0) {
+          generatedInstanceChildren = generatedCandidates.map(
+            ({ dependencyRevision, generated }) => `<Fragment key=${JSON.stringify(dependencyRevision)}>
+${generated}</Fragment>
+`
+          ).join("");
+        } else {
+          const sourceName = scope.getName(
+            `${instance.id}-published-source`,
+            "contentSource"
+          );
+          const branches = generatedCandidates.map(
+            ({ assetId, dependencyRevision, generated }) => `${sourceName} === ${JSON.stringify(assetId)} ? <Fragment key=${JSON.stringify(dependencyRevision)}>
+${generated}</Fragment>`
+          ).join(" : ");
+          generatedInstanceChildren = `{((${sourceName}) => ${branches.length === 0 ? "null" : `${branches} : null`})(${sourceExpression})}
+`;
+        }
+      }
       generatedChildren += generateJsxElement({
         context: "jsx",
         scope,
@@ -757,23 +700,12 @@ var generateJsxChildren = ({
         tagsOverrides,
         instance,
         props,
+        resources,
         dataSources,
         usedDataSources,
         indexesWithinAncestors,
         classesMap,
-        children: generateJsxChildren({
-          classesMap,
-          scope,
-          metas,
-          tagsOverrides,
-          children: instance.children,
-          instances,
-          props,
-          dataSources,
-          usedDataSources,
-          indexesWithinAncestors,
-          excludePlaceholders
-        })
+        children: generatedInstanceChildren
       });
       continue;
     }
@@ -788,10 +720,12 @@ var generateWebstudioComponent = ({
   parameters,
   instances,
   props,
+  resources,
   dataSources,
   metas,
   tagsOverrides,
-  classesMap
+  classesMap,
+  publishedContentBlocks
 }) => {
   const instance = instances.get(rootInstanceId);
   const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
@@ -807,6 +741,7 @@ var generateWebstudioComponent = ({
       tagsOverrides,
       instance,
       props,
+      resources,
       dataSources,
       usedDataSources,
       indexesWithinAncestors,
@@ -818,10 +753,12 @@ var generateWebstudioComponent = ({
         children: instance.children,
         instances,
         props,
+        resources,
         dataSources,
         usedDataSources,
         indexesWithinAncestors,
-        classesMap
+        classesMap,
+        publishedContentBlocks
       })
     });
   }
@@ -879,8 +816,17 @@ var generateWebstudioComponent = ({
 `;
   return generatedComponent;
 };
+
+// src/standard-attributes.ts
+import {
+  getInstancePropName,
+  getJsxPropName as getJsxPropName2,
+  reactPropsToStandardAttributes,
+  standardAttributesToReactProps
+} from "@webstudio-is/content-engine/jsx-attributes";
 export {
   componentAttribute,
+  findTreeInstanceIdsExcludingStaticHidden,
   generateCollectionIterationCode,
   generateJsxChildren,
   generateJsxElement,
@@ -888,6 +834,8 @@ export {
   generateRemixRoute,
   generateWebstudioComponent,
   getCollectionEntries,
+  getInstancePropName,
+  getJsxPropName2 as getJsxPropName,
   idAttribute,
   inflatedAttribute,
   isAttributeNameSafe,

package/lib/standard-attributes.js

@@ -0,0 +1,13 @@
+// src/standard-attributes.ts
+import {
+  getInstancePropName,
+  getJsxPropName,
+  reactPropsToStandardAttributes,
+  standardAttributesToReactProps
+} from "@webstudio-is/content-engine/jsx-attributes";
+export {
+  getInstancePropName,
+  getJsxPropName,
+  reactPropsToStandardAttributes,
+  standardAttributesToReactProps
+};

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

@@ -1,5 +1,16 @@
-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 type PublishedContentBlock = Readonly<{
+    bodyInstanceId?: Instance["id"];
+    sourceExpression?: string;
+    candidates: readonly Readonly<{
+        assetId: string;
+        dependencyRevision: string;
+        children: Instance["children"];
+        frontmatter: Readonly<Record<string, unknown>>;
+        resourceIds?: readonly string[];
+    }>[];
+}>;
+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 +20,33 @@ 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, publishedContentBlocks, contentBodyOverride, }: {
     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;
+    publishedContentBlocks?: ReadonlyMap<Instance["id"], PublishedContentBlock>;
+    contentBodyOverride?: Readonly<{
+        instanceId: Instance["id"];
+        children: Instance["children"];
+    }>;
 }) => 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, publishedContentBlocks, }: {
     scope: Scope;
     name: string;
     rootInstanceId: Instance["id"];
@@ -37,8 +55,10 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
     }>[];
     instances: Instances;
     props: Props;
+    resources?: Resources;
     dataSources: DataSources;
     classesMap: Map<string, Array<string>>;
+    publishedContentBlocks?: ReadonlyMap<Instance["id"], PublishedContentBlock>;
     metas: Map<Instance["component"], WsComponentMeta>;
     /**
      * Record<tag, componentDescriptor>

package/lib/types/index.d.ts

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

package/lib/types/props.d.ts

@@ -1,4 +1,4 @@
-import { type Prop, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
+import { type Prop, type Instances, type Props, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
 export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingImageAssets, pages, source, }: {
     props: Prop[];
     assetBaseUrl: string;
@@ -7,6 +7,14 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
     pages: Pages;
     source: "canvas" | "prebuild";
 }) => ({
+    type: "expression";
+    value: string;
+    mode?: "read" | "readwrite" | undefined;
+    id: string;
+    instanceId: string;
+    name: string;
+    required?: boolean | undefined;
+} | {
     id: string;
     instanceId: string;
     name: string;
@@ -72,13 +80,6 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
     required?: boolean | undefined;
     type: "resource";
     value: string;
-} | {
-    id: string;
-    instanceId: string;
-    name: string;
-    required?: boolean | undefined;
-    type: "expression";
-    value: string;
 } | {
     id: string;
     instanceId: string;
@@ -1450,4 +1451,9 @@ export declare const componentAttribute: "data-ws-component";
 export declare const showAttribute: "data-ws-show";
 export declare const inflatedAttribute: "data-ws-collapsed";
 export declare const textContentAttribute: "data-ws-text-content";
+export declare const findTreeInstanceIdsExcludingStaticHidden: ({ instances, props, rootInstanceId, }: {
+    instances: Instances;
+    props: Props;
+    rootInstanceId: string;
+}) => Set<string>;
 export declare const isAttributeNameSafe: (attributeName: string) => boolean;

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

@@ -0,0 +1 @@
+export { getInstancePropName, getJsxPropName, reactPropsToStandardAttributes, standardAttributesToReactProps, } from "@webstudio-is/content-engine/jsx-attributes";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.292.0",
+  "version": "0.294.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.294.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -26,12 +26,13 @@
   "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/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"
   },
   "exports": {
     ".": {
@@ -45,9 +46,9 @@
       "import": "./lib/runtime.js"
     },
     "./standard-attributes": {
-      "webstudio": "./src/__generated__/standard-attributes.ts",
-      "types": "./lib/types/__generated__/standard-attributes.d.ts",
-      "import": "./lib/__generated__/standard-attributes.js"
+      "webstudio": "./src/standard-attributes.ts",
+      "types": "./lib/types/standard-attributes.d.ts",
+      "import": "./lib/standard-attributes.js"
     },
     "./placeholder": {
       "types": "./placeholder.d.ts"
@@ -62,7 +63,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts src/standard-attributes.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"

package/placeholder.d.ts

@@ -37,9 +37,13 @@ declare module "__CLIENT__" {
 declare module "__SERVER__" {
   import type { PageMeta, System, ResourceRequest } from "@webstudio-is/sdk";
 
-  export const getResources: (props: { system: System }) => {
+  export const getResources: (props: {
+    system: System;
+    resources?: Record<string, any>;
+  }) => {
     data: Map<string, ResourceRequest>;
     action: Map<string, ResourceRequest>;
+    contentData?: Map<string, ResourceRequest>;
   };
 
   export const getPageMeta: (props: {

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

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