@contentful/experiences-sdk-react 1.30.5-dev-20250206T1804-ed40499.0 → 1.30.5-prerelease-20250207T1349-200d927.0

package/dist/blocks/preview/CompositionBlock.js

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { useEffect, useMemo } from 'react';
-import { checkIsAssemblyNode, resolveHyperlinkPattern, transformBoundContentValue, sanitizeNodeProps } from '@contentful/experiences-core';
+import React, { useState, useEffect, useMemo } from 'react';
+import { checkIsAssemblyNode, transformBoundContentValue, resolveHyperlinkPattern, sanitizeNodeProps } from '@contentful/experiences-core';
 import { HYPERLINK_DEFAULT_PATTERN, CONTENTFUL_COMPONENTS } from '@contentful/experiences-core/constants';
 import { getComponentRegistration, createAssemblyRegistration } from '../../core/componentRegistry.js';
-import { useClassName } from '../../hooks/useClassName.js';
+import { useInjectStylesheet } from '../../hooks/useClassName.js';
 import { Assembly, ContentfulContainer, Columns, SingleColumn } from '@contentful/experiences-components-react';
 import { resolveAssembly } from '../../core/preview/assemblyUtils.js';
 import PreviewUnboundImage from './PreviewUnboundImage.js';
+import { parseComponentProps } from '../../utils/parseComponentProps.js';
+import { resolveClassNamesFromBuiltInStyles } from '../../hooks/useMediaQuery.js';
 
 const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds = new Set(), }) => {
-    const [hasRendered, setHasRendered] = React.useState(false);
+    const [hasRendered, setHasRendered] = useState(false);
     useEffect(() => {
         setHasRendered(true);
     }, []);
@@ -41,69 +43,81 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         }
         return registration;
     }, [isAssembly, node.definitionId]);
-    const nodeProps = useMemo(() => {
+    const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {
         // In SSR, we store the className under breakpoints[0] which is resolved here to the actual string
         const cfSsrClassNameValues = node.variables.cfSsrClassName;
-        const cfSsrClassName = resolveDesignValue(cfSsrClassNameValues?.valuesByBreakpoint, 'cfSsrClassName');
+        const mainBreakpoint = entityStore.breakpoints[0];
+        const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id];
         // Don't enrich the assembly wrapper node with props
         if (!componentRegistration || isAssembly) {
-            return { cfSsrClassName };
+            const ssrProps = { cfSsrClassName };
+            const props = { className: cfSsrClassName };
+            return {
+                ssrProps,
+                props,
+            };
         }
-        const propMap = {
+        const ssrProps = {
             cfSsrClassName: node.id && getPatternChildNodeClassName
                 ? getPatternChildNodeClassName(node.id)
                 : cfSsrClassName,
         };
-        const props = Object.entries(componentRegistration.definition.variables).reduce((acc, [variableName, variableDefinition]) => {
-            const variable = node.variables[variableName];
-            if (!variable)
-                return acc;
-            switch (variable.type) {
-                case 'DesignValue':
-                    acc[variableName] = resolveDesignValue(variable.valuesByBreakpoint, variableName);
-                    break;
-                case 'BoundValue': {
-                    const [, uuid] = variable.path.split('/');
-                    const binding = entityStore.dataSource[uuid];
-                    const value = transformBoundContentValue(node.variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, variable.path);
-                    acc[variableName] = value ?? variableDefinition.defaultValue;
-                    break;
-                }
-                case 'HyperlinkValue': {
-                    const binding = entityStore.dataSource[variable.linkTargetKey];
-                    const hyperlinkEntry = entityStore.getEntryOrAsset(binding, variable.linkTargetKey);
-                    const value = resolveHyperlinkPattern(componentRegistration.definition.hyperlinkPattern ||
-                        hyperlinkPattern ||
-                        HYPERLINK_DEFAULT_PATTERN, hyperlinkEntry, locale);
-                    if (value) {
-                        acc[variableName] = value;
-                    }
-                    break;
-                }
-                case 'UnboundValue': {
-                    const uuid = variable.key;
-                    acc[variableName] =
-                        entityStore.unboundValues[uuid]?.value ?? variableDefinition.defaultValue;
-                    break;
-                }
-                case 'ComponentValue':
-                    // We're rendering a pattern entry. Content cannot be set for ComponentValue type properties
-                    // directly in the pattern so we can safely use the default value
-                    // This can either a design (style) or a content variable
-                    acc[variableName] = variableDefinition.defaultValue;
-                    break;
-            }
-            return acc;
-        }, propMap);
+        const { contentProps = {}, styleProps = {}, customDesignProps = {}, mediaQuery, } = parseComponentProps({
+            componentDefinition: componentRegistration.definition,
+            node,
+            resolveCustomDesignValue: ({ propertyName, valuesByBreakpoint }) => {
+                return resolveDesignValue(valuesByBreakpoint, propertyName);
+            },
+            resolveBoundValue: ({ binding, propertyName, dataType }) => {
+                const [, uuid] = binding.path.split('/');
+                const boundEntityLink = entityStore.dataSource[uuid];
+                const boundValue = transformBoundContentValue(node.variables, entityStore, boundEntityLink, resolveDesignValue, propertyName, dataType, binding.path);
+                return boundValue;
+            },
+            resolveHyperlinkValue: ({ linkTargetKey }) => {
+                const boundEntity = entityStore.dataSource[linkTargetKey];
+                const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);
+                const value = resolveHyperlinkPattern(componentRegistration.definition.hyperlinkPattern ||
+                    hyperlinkPattern ||
+                    HYPERLINK_DEFAULT_PATTERN, hyperlinkEntry, locale);
+                return value;
+            },
+            resolveUnboundValue: ({ mappingKey, defaultValue }) => {
+                return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;
+            },
+            resolveClassNamesFromBuiltInStyles: (designPropsByBreakpointId) => {
+                return resolveClassNamesFromBuiltInStyles({
+                    designPropsByBreakpointId,
+                    breakpoints: entityStore.breakpoints,
+                    node,
+                });
+            },
+        });
+        const slotsProps = {};
         if (componentRegistration.definition.slots) {
             for (const slotId in componentRegistration.definition.slots) {
                 const slotNode = node.children.find((child) => child.slotId === slotId);
                 if (slotNode) {
-                    props[slotId] = (jsx(CompositionBlock, { node: slotNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds }));
+                    slotsProps[slotId] = (jsx(CompositionBlock, { node: slotNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds }));
                 }
             }
         }
-        return props;
+        const props = {
+            className: ssrProps.cfSsrClassName ?? mediaQuery?.className,
+            ...styleProps,
+            ...contentProps,
+            ...customDesignProps,
+            ...slotsProps,
+        };
+        return {
+            ssrProps,
+            contentProps,
+            slotsProps,
+            styleProps,
+            customDesignProps,
+            mediaQuery,
+            props,
+        };
     }, [
         node.variables,
         node.id,
@@ -117,7 +131,8 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         locale,
         wrappingPatternIds,
     ]);
-    const className = useClassName({ props: nodeProps, node });
+    // do not inject the stylesheet into the dom because it's already been done on the server side
+    useInjectStylesheet(ssrProps.cfSsrClassName ? undefined : mediaQuery);
     if (!componentRegistration) {
         return null;
     }
@@ -145,23 +160,22 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         })
         : null;
     if ([CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(node.definitionId)) {
-        return (jsx(ContentfulContainer, { editorMode: false, cfHyperlink: nodeProps.cfHyperlink, cfOpenInNewTab: nodeProps.cfOpenInNewTab, className: className, children: children }));
+        return (jsx(ContentfulContainer, { editorMode: false, cfHyperlink: contentProps.cfHyperlink, cfOpenInNewTab: contentProps.cfOpenInNewTab, className: props.className, children: children }));
     }
     if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {
-        return (jsx(Columns, { editorMode: false, className: className, children: children }));
+        return (jsx(Columns, { editorMode: false, className: props.className, children: children }));
     }
     if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {
-        return (jsx(SingleColumn, { editorMode: false, className: className, children: children }));
+        return (jsx(SingleColumn, { editorMode: false, className: props.className, children: children }));
     }
     if (node.definitionId === CONTENTFUL_COMPONENTS.image.id &&
         node.variables.cfImageAsset?.type === 'UnboundValue') {
-        return jsx(PreviewUnboundImage, { node: node, nodeProps: nodeProps, component: component });
+        return (jsx(PreviewUnboundImage, { node: node, nodeProps: props, component: component, breakpoints: entityStore.breakpoints }));
     }
     return React.createElement(component, {
-        ...sanitizeNodeProps(nodeProps),
-        className,
+        ...sanitizeNodeProps(props),
         key: `${node.id}-${hasRendered}`,
-    }, children ?? (typeof nodeProps.children === 'string' ? nodeProps.children : null));
+    }, children ?? (typeof props.children === 'string' ? props.children : null));
 };
 
 export { CompositionBlock };

package/dist/blocks/preview/CompositionBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositionBlock.js","sources":["../../../../src/blocks/preview/CompositionBlock.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport type { UnresolvedLink } from 'contentful';\nimport {\n  EntityStore,\n  resolveHyperlinkPattern,\n  sanitizeNodeProps,\n} from '@contentful/experiences-core';\nimport {\n  CONTENTFUL_COMPONENTS,\n  HYPERLINK_DEFAULT_PATTERN,\n} from '@contentful/experiences-core/constants';\nimport type {\n  ComponentTreeNode,\n  DesignValue,\n  PrimitiveValue,\n  ResolveDesignValueType,\n  StyleProps,\n} from '@contentful/experiences-core/types';\nimport { createAssemblyRegistration, getComponentRegistration } from '../../core/componentRegistry';\nimport { checkIsAssemblyNode, transformBoundContentValue } from '@contentful/experiences-core';\nimport { useClassName } from '../../hooks/useClassName';\nimport {\n  Assembly,\n  Columns,\n  ContentfulContainer,\n  SingleColumn,\n} from '@contentful/experiences-components-react';\n\nimport { resolveAssembly } from '../../core/preview/assemblyUtils';\nimport { Entry } from 'contentful';\nimport PreviewUnboundImage from './PreviewUnboundImage';\n\ntype CompositionBlockProps = {\n  node: ComponentTreeNode;\n  locale: string;\n  entityStore: EntityStore;\n  hyperlinkPattern?: string | undefined;\n  resolveDesignValue: ResolveDesignValueType;\n  getPatternChildNodeClassName?: (childNodeId: string) => string | undefined;\n  wrappingPatternIds?: Set<string>;\n};\n\nexport const CompositionBlock = ({\n  node: rawNode,\n  locale,\n  entityStore,\n  hyperlinkPattern,\n  resolveDesignValue,\n  getPatternChildNodeClassName,\n  wrappingPatternIds: parentWrappingPatternIds = new Set(),\n}: CompositionBlockProps) => {\n  const [hasRendered, setHasRendered] = React.useState(false);\n\n  useEffect(() => {\n    setHasRendered(true);\n  }, []);\n\n  const isAssembly = useMemo(\n    () =>\n      checkIsAssemblyNode({\n        componentId: rawNode.definitionId,\n        usedComponents: entityStore.usedComponents,\n      }),\n    [entityStore.usedComponents, rawNode.definitionId],\n  );\n\n  const node = useMemo(() => {\n    return isAssembly\n      ? resolveAssembly({\n          node: rawNode,\n          entityStore,\n        })\n      : rawNode;\n  }, [entityStore, isAssembly, rawNode]);\n\n  const wrappingPatternIds = useMemo(() => {\n    if (isAssembly) {\n      return new Set([node.definitionId, ...parentWrappingPatternIds]);\n    }\n    return parentWrappingPatternIds;\n  }, [isAssembly, node, parentWrappingPatternIds]);\n\n  const componentRegistration = useMemo(() => {\n    const registration = getComponentRegistration(node.definitionId as string);\n\n    if (isAssembly && !registration) {\n      return createAssemblyRegistration({\n        definitionId: node.definitionId as string,\n        component: Assembly,\n      });\n    }\n    return registration;\n  }, [isAssembly, node.definitionId]);\n\n  const nodeProps = useMemo(() => {\n    // In SSR, we store the className under breakpoints[0] which is resolved here to the actual string\n    const cfSsrClassNameValues = node.variables.cfSsrClassName as DesignValue | undefined;\n    const cfSsrClassName = resolveDesignValue(\n      cfSsrClassNameValues?.valuesByBreakpoint,\n      'cfSsrClassName',\n    );\n\n    // Don't enrich the assembly wrapper node with props\n    if (!componentRegistration || isAssembly) {\n      return { cfSsrClassName };\n    }\n\n    const propMap: Record<string, PrimitiveValue> = {\n      cfSsrClassName:\n        node.id && getPatternChildNodeClassName\n          ? getPatternChildNodeClassName(node.id)\n          : cfSsrClassName,\n    };\n\n    const props = Object.entries(componentRegistration.definition.variables).reduce(\n      (acc, [variableName, variableDefinition]) => {\n        const variable = node.variables[variableName];\n        if (!variable) return acc;\n\n        switch (variable.type) {\n          case 'DesignValue':\n            acc[variableName] = resolveDesignValue(variable.valuesByBreakpoint, variableName);\n            break;\n          case 'BoundValue': {\n            const [, uuid] = variable.path.split('/');\n            const binding = entityStore.dataSource[uuid] as UnresolvedLink<'Entry' | 'Asset'>;\n\n            const value = transformBoundContentValue(\n              node.variables,\n              entityStore,\n              binding,\n              resolveDesignValue,\n              variableName,\n              variableDefinition,\n              variable.path,\n            );\n            acc[variableName] = value ?? variableDefinition.defaultValue;\n            break;\n          }\n\n          case 'HyperlinkValue': {\n            const binding = entityStore.dataSource[variable.linkTargetKey];\n            const hyperlinkEntry = entityStore.getEntryOrAsset(binding, variable.linkTargetKey);\n\n            const value = resolveHyperlinkPattern(\n              componentRegistration.definition.hyperlinkPattern ||\n                hyperlinkPattern ||\n                HYPERLINK_DEFAULT_PATTERN,\n              hyperlinkEntry as Entry,\n              locale,\n            );\n            if (value) {\n              acc[variableName] = value;\n            }\n            break;\n          }\n          case 'UnboundValue': {\n            const uuid = variable.key;\n            acc[variableName] =\n              entityStore.unboundValues[uuid]?.value ?? variableDefinition.defaultValue;\n            break;\n          }\n          case 'ComponentValue':\n            // We're rendering a pattern entry. Content cannot be set for ComponentValue type properties\n            // directly in the pattern so we can safely use the default value\n            // This can either a design (style) or a content variable\n            acc[variableName] = variableDefinition.defaultValue;\n            break;\n          default:\n            break;\n        }\n        return acc;\n      },\n      propMap,\n    );\n\n    if (componentRegistration.definition.slots) {\n      for (const slotId in componentRegistration.definition.slots) {\n        const slotNode = node.children.find((child) => child.slotId === slotId);\n        if (slotNode) {\n          props[slotId] = (\n            <CompositionBlock\n              node={slotNode}\n              locale={locale}\n              hyperlinkPattern={hyperlinkPattern}\n              entityStore={entityStore}\n              resolveDesignValue={resolveDesignValue}\n              wrappingPatternIds={wrappingPatternIds}\n            />\n          );\n        }\n      }\n    }\n\n    return props;\n  }, [\n    node.variables,\n    node.id,\n    node.children,\n    resolveDesignValue,\n    componentRegistration,\n    isAssembly,\n    getPatternChildNodeClassName,\n    entityStore,\n    hyperlinkPattern,\n    locale,\n    wrappingPatternIds,\n  ]);\n\n  const className = useClassName({ props: nodeProps, node });\n\n  if (!componentRegistration) {\n    return null;\n  }\n\n  // When detecting a circular dependency, we stop silently. The editor mode will render an actionable error.\n  if (parentWrappingPatternIds.has(node.definitionId)) {\n    return null;\n  }\n\n  const { component } = componentRegistration;\n\n  // Retrieves the CSS class name for a given child node ID.\n  const _getPatternChildNodeClassName = (childNodeId: string) => {\n    if (isAssembly) {\n      // @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles\n      const classesForNode: DesignValue | undefined = node.variables.cfSsrClassName?.[childNodeId];\n      if (!classesForNode) return undefined;\n      return resolveDesignValue(classesForNode.valuesByBreakpoint, 'cfSsrClassName') as string;\n    }\n    return getPatternChildNodeClassName?.(childNodeId);\n  };\n\n  const children =\n    componentRegistration.definition.children === true\n      ? node.children.map((childNode: ComponentTreeNode, index) => {\n          return (\n            <CompositionBlock\n              getPatternChildNodeClassName={\n                isAssembly || getPatternChildNodeClassName\n                  ? _getPatternChildNodeClassName\n                  : undefined\n              }\n              node={childNode}\n              key={index}\n              locale={locale}\n              hyperlinkPattern={hyperlinkPattern}\n              entityStore={entityStore}\n              resolveDesignValue={resolveDesignValue}\n              wrappingPatternIds={wrappingPatternIds}\n            />\n          );\n        })\n      : null;\n\n  if (\n    [CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(\n      node.definitionId,\n    )\n  ) {\n    return (\n      <ContentfulContainer\n        editorMode={false}\n        cfHyperlink={(nodeProps as StyleProps).cfHyperlink}\n        cfOpenInNewTab={(nodeProps as StyleProps).cfOpenInNewTab}\n        className={className}>\n        {children}\n      </ContentfulContainer>\n    );\n  }\n\n  if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {\n    return (\n      <Columns editorMode={false} className={className}>\n        {children}\n      </Columns>\n    );\n  }\n\n  if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {\n    return (\n      <SingleColumn editorMode={false} className={className}>\n        {children}\n      </SingleColumn>\n    );\n  }\n\n  if (\n    node.definitionId === CONTENTFUL_COMPONENTS.image.id &&\n    node.variables.cfImageAsset?.type === 'UnboundValue'\n  ) {\n    return <PreviewUnboundImage node={node} nodeProps={nodeProps} component={component} />;\n  }\n\n  return React.createElement(\n    component,\n    {\n      ...sanitizeNodeProps(nodeProps),\n      className,\n      key: `${node.id}-${hasRendered}`,\n    },\n    children ?? (typeof nodeProps.children === 'string' ? nodeProps.children : null),\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AA0CO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EAAE,OAAO,EACb,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,kBAAkB,EAAE,wBAAwB,GAAG,IAAI,GAAG,EAAE,GAClC,KAAI;AAC1B,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,MAAK;QACb,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,OAAO,CACxB,MACE,mBAAmB,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC,YAAY;QACjC,cAAc,EAAE,WAAW,CAAC,cAAc;KAC3C,CAAC,EACJ,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,CACnD,CAAC;AAEF,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;AACxB,QAAA,OAAO,UAAU;cACb,eAAe,CAAC;AACd,gBAAA,IAAI,EAAE,OAAO;gBACb,WAAW;aACZ,CAAC;cACF,OAAO,CAAC;KACb,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;QACtC,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,wBAAwB,CAAC,CAAC,CAAC;SAClE;AACD,QAAA,OAAO,wBAAwB,CAAC;KACjC,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC;AAEjD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACzC,MAAM,YAAY,GAAG,wBAAwB,CAAC,IAAI,CAAC,YAAsB,CAAC,CAAC;AAE3E,QAAA,IAAI,UAAU,IAAI,CAAC,YAAY,EAAE;AAC/B,YAAA,OAAO,0BAA0B,CAAC;gBAChC,YAAY,EAAE,IAAI,CAAC,YAAsB;AACzC,gBAAA,SAAS,EAAE,QAAQ;AACpB,aAAA,CAAC,CAAC;SACJ;AACD,QAAA,OAAO,YAAY,CAAC;KACrB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AAEpC,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;;AAE7B,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAyC,CAAC;QACtF,MAAM,cAAc,GAAG,kBAAkB,CACvC,oBAAoB,EAAE,kBAAkB,EACxC,gBAAgB,CACjB,CAAC;;AAGF,QAAA,IAAI,CAAC,qBAAqB,IAAI,UAAU,EAAE;YACxC,OAAO,EAAE,cAAc,EAAE,CAAC;SAC3B;AAED,QAAA,MAAM,OAAO,GAAmC;AAC9C,YAAA,cAAc,EACZ,IAAI,CAAC,EAAE,IAAI,4BAA4B;AACrC,kBAAE,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC;AACvC,kBAAE,cAAc;SACrB,CAAC;QAEF,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,CAC7E,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,KAAI;YAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,YAAA,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,GAAG,CAAC;AAE1B,YAAA,QAAQ,QAAQ,CAAC,IAAI;AACnB,gBAAA,KAAK,aAAa;AAChB,oBAAA,GAAG,CAAC,YAAY,CAAC,GAAG,kBAAkB,CAAC,QAAQ,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;oBAClF,MAAM;gBACR,KAAK,YAAY,EAAE;AACjB,oBAAA,MAAM,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBAC1C,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAsC,CAAC;oBAElF,MAAM,KAAK,GAAG,0BAA0B,CACtC,IAAI,CAAC,SAAS,EACd,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,QAAQ,CAAC,IAAI,CACd,CAAC;oBACF,GAAG,CAAC,YAAY,CAAC,GAAG,KAAK,IAAI,kBAAkB,CAAC,YAAY,CAAC;oBAC7D,MAAM;iBACP;gBAED,KAAK,gBAAgB,EAAE;oBACrB,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAC/D,oBAAA,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;oBAEpF,MAAM,KAAK,GAAG,uBAAuB,CACnC,qBAAqB,CAAC,UAAU,CAAC,gBAAgB;wBAC/C,gBAAgB;AAChB,wBAAA,yBAAyB,EAC3B,cAAuB,EACvB,MAAM,CACP,CAAC;oBACF,IAAI,KAAK,EAAE;AACT,wBAAA,GAAG,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;qBAC3B;oBACD,MAAM;iBACP;gBACD,KAAK,cAAc,EAAE;AACnB,oBAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC;oBAC1B,GAAG,CAAC,YAAY,CAAC;wBACf,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,kBAAkB,CAAC,YAAY,CAAC;oBAC5E,MAAM;iBACP;AACD,gBAAA,KAAK,gBAAgB;;;;AAInB,oBAAA,GAAG,CAAC,YAAY,CAAC,GAAG,kBAAkB,CAAC,YAAY,CAAC;oBACpD,MAAM;aAGT;AACD,YAAA,OAAO,GAAG,CAAC;SACZ,EACD,OAAO,CACR,CAAC;AAEF,QAAA,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;YAC1C,KAAK,MAAM,MAAM,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3D,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;gBACxE,IAAI,QAAQ,EAAE;AACZ,oBAAA,KAAK,CAAC,MAAM,CAAC,IACXA,GAAC,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EAAA,CACtC,CACH,CAAC;iBACH;aACF;SACF;AAED,QAAA,OAAO,KAAK,CAAC;AACf,KAAC,EAAE;AACD,QAAA,IAAI,CAAC,SAAS;AACd,QAAA,IAAI,CAAC,EAAE;AACP,QAAA,IAAI,CAAC,QAAQ;QACb,kBAAkB;QAClB,qBAAqB;QACrB,UAAU;QACV,4BAA4B;QAC5B,WAAW;QACX,gBAAgB;QAChB,MAAM;QACN,kBAAkB;AACnB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAE3D,IAAI,CAAC,qBAAqB,EAAE;AAC1B,QAAA,OAAO,IAAI,CAAC;KACb;;IAGD,IAAI,wBAAwB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AACnD,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,qBAAqB,CAAC;;AAG5C,IAAA,MAAM,6BAA6B,GAAG,CAAC,WAAmB,KAAI;QAC5D,IAAI,UAAU,EAAE;;YAEd,MAAM,cAAc,GAA4B,IAAI,CAAC,SAAS,CAAC,cAAc,GAAG,WAAW,CAAC,CAAC;AAC7F,YAAA,IAAI,CAAC,cAAc;AAAE,gBAAA,OAAO,SAAS,CAAC;YACtC,OAAO,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,EAAE,gBAAgB,CAAW,CAAC;SAC1F;AACD,QAAA,OAAO,4BAA4B,GAAG,WAAW,CAAC,CAAC;AACrD,KAAC,CAAC;IAEF,MAAM,QAAQ,GACZ,qBAAqB,CAAC,UAAU,CAAC,QAAQ,KAAK,IAAI;AAChD,UAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,SAA4B,EAAE,KAAK,KAAI;YACxD,QACEA,IAAC,gBAAgB,EAAA,EACf,4BAA4B,EAC1B,UAAU,IAAI,4BAA4B;AACxC,sBAAE,6BAA6B;AAC/B,sBAAE,SAAS,EAEf,IAAI,EAAE,SAAS,EAEf,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EAAA,EALjC,KAAK,CAMV,EACF;AACJ,SAAC,CAAC;UACF,IAAI,CAAC;IAEX,IACE,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,EAAE,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAC7E,IAAI,CAAC,YAAY,CAClB,EACD;QACA,QACEA,GAAC,CAAA,mBAAmB,EAClB,EAAA,UAAU,EAAE,KAAK,EACjB,WAAW,EAAG,SAAwB,CAAC,WAAW,EAClD,cAAc,EAAG,SAAwB,CAAC,cAAc,EACxD,SAAS,EAAE,SAAS,EACnB,QAAA,EAAA,QAAQ,EACW,CAAA,EACtB;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,OAAO,CAAC,EAAE,EAAE;AAC1D,QAAA,QACEA,GAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EAC7C,QAAQ,EAAA,CACD,EACV;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,YAAY,CAAC,EAAE,EAAE;AAC/D,QAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EAAC,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EAClD,QAAQ,EAAA,CACI,EACf;KACH;IAED,IACE,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,KAAK,CAAC,EAAE;QACpD,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,KAAK,cAAc,EACpD;AACA,QAAA,OAAOA,GAAC,CAAA,mBAAmB,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;KACxF;AAED,IAAA,OAAO,KAAK,CAAC,aAAa,CACxB,SAAS,EACT;QACE,GAAG,iBAAiB,CAAC,SAAS,CAAC;QAC/B,SAAS;AACT,QAAA,GAAG,EAAE,CAAG,EAAA,IAAI,CAAC,EAAE,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA;KACjC,EACD,QAAQ,KAAK,OAAO,SAAS,CAAC,QAAQ,KAAK,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CACjF,CAAC;AACJ;;;;"}
+{"version":3,"file":"CompositionBlock.js","sources":["../../../../src/blocks/preview/CompositionBlock.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useMemo, useState } from 'react';\nimport type { UnresolvedLink } from 'contentful';\nimport {\n  EntityStore,\n  resolveHyperlinkPattern,\n  sanitizeNodeProps,\n} from '@contentful/experiences-core';\nimport {\n  CONTENTFUL_COMPONENTS,\n  HYPERLINK_DEFAULT_PATTERN,\n} from '@contentful/experiences-core/constants';\nimport type {\n  ComponentTreeNode,\n  DesignValue,\n  PrimitiveValue,\n  ResolveDesignValueType,\n  StyleProps,\n} from '@contentful/experiences-core/types';\nimport { createAssemblyRegistration, getComponentRegistration } from '../../core/componentRegistry';\nimport { checkIsAssemblyNode, transformBoundContentValue } from '@contentful/experiences-core';\nimport { useInjectStylesheet } from '../../hooks/useClassName';\nimport {\n  Assembly,\n  Columns,\n  ContentfulContainer,\n  SingleColumn,\n} from '@contentful/experiences-components-react';\nimport { resolveAssembly } from '../../core/preview/assemblyUtils';\nimport { Entry } from 'contentful';\nimport PreviewUnboundImage from './PreviewUnboundImage';\nimport { parseComponentProps } from '../../utils/parseComponentProps';\nimport { resolveClassNamesFromBuiltInStyles } from '../../hooks/useMediaQuery';\n\ntype CompositionBlockProps = {\n  node: ComponentTreeNode;\n  locale: string;\n  entityStore: EntityStore;\n  hyperlinkPattern?: string | undefined;\n  resolveDesignValue: ResolveDesignValueType;\n  getPatternChildNodeClassName?: (childNodeId: string) => string | undefined;\n  wrappingPatternIds?: Set<string>;\n};\n\nexport const CompositionBlock = ({\n  node: rawNode,\n  locale,\n  entityStore,\n  hyperlinkPattern,\n  resolveDesignValue,\n  getPatternChildNodeClassName,\n  wrappingPatternIds: parentWrappingPatternIds = new Set(),\n}: CompositionBlockProps) => {\n  const [hasRendered, setHasRendered] = useState(false);\n\n  useEffect(() => {\n    setHasRendered(true);\n  }, []);\n\n  const isAssembly = useMemo(\n    () =>\n      checkIsAssemblyNode({\n        componentId: rawNode.definitionId,\n        usedComponents: entityStore.usedComponents,\n      }),\n    [entityStore.usedComponents, rawNode.definitionId],\n  );\n\n  const node = useMemo(() => {\n    return isAssembly\n      ? resolveAssembly({\n          node: rawNode,\n          entityStore,\n        })\n      : rawNode;\n  }, [entityStore, isAssembly, rawNode]);\n\n  const wrappingPatternIds = useMemo(() => {\n    if (isAssembly) {\n      return new Set([node.definitionId, ...parentWrappingPatternIds]);\n    }\n    return parentWrappingPatternIds;\n  }, [isAssembly, node, parentWrappingPatternIds]);\n\n  const componentRegistration = useMemo(() => {\n    const registration = getComponentRegistration(node.definitionId as string);\n\n    if (isAssembly && !registration) {\n      return createAssemblyRegistration({\n        definitionId: node.definitionId as string,\n        component: Assembly,\n      });\n    }\n    return registration;\n  }, [isAssembly, node.definitionId]);\n\n  const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {\n    // In SSR, we store the className under breakpoints[0] which is resolved here to the actual string\n    const cfSsrClassNameValues = node.variables.cfSsrClassName as DesignValue | undefined;\n    const mainBreakpoint = entityStore.breakpoints[0];\n    const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id] as\n      | string\n      | undefined;\n\n    // Don't enrich the assembly wrapper node with props\n    if (!componentRegistration || isAssembly) {\n      const ssrProps = { cfSsrClassName };\n      const props: Record<string, PrimitiveValue> = { className: cfSsrClassName };\n      return {\n        ssrProps,\n        props,\n      };\n    }\n\n    const ssrProps: Record<string, string | undefined> = {\n      cfSsrClassName:\n        node.id && getPatternChildNodeClassName\n          ? getPatternChildNodeClassName(node.id)\n          : cfSsrClassName,\n    };\n\n    const {\n      contentProps = {},\n      styleProps = {},\n      customDesignProps = {},\n      mediaQuery,\n    } = parseComponentProps({\n      componentDefinition: componentRegistration.definition,\n      node,\n      resolveCustomDesignValue: ({ propertyName, valuesByBreakpoint }) => {\n        return resolveDesignValue(valuesByBreakpoint, propertyName);\n      },\n      resolveBoundValue: ({ binding, propertyName, dataType }) => {\n        const [, uuid] = binding.path.split('/');\n        const boundEntityLink = entityStore.dataSource[uuid] as UnresolvedLink<'Entry' | 'Asset'>;\n        const boundValue = transformBoundContentValue(\n          node.variables,\n          entityStore,\n          boundEntityLink,\n          resolveDesignValue,\n          propertyName,\n          dataType,\n          binding.path,\n        );\n\n        return boundValue;\n      },\n      resolveHyperlinkValue: ({ linkTargetKey }) => {\n        const boundEntity = entityStore.dataSource[linkTargetKey];\n        const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);\n\n        const value = resolveHyperlinkPattern(\n          componentRegistration.definition.hyperlinkPattern ||\n            hyperlinkPattern ||\n            HYPERLINK_DEFAULT_PATTERN,\n          hyperlinkEntry as Entry,\n          locale,\n        );\n\n        return value;\n      },\n      resolveUnboundValue: ({ mappingKey, defaultValue }) => {\n        return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;\n      },\n      resolveClassNamesFromBuiltInStyles: (designPropsByBreakpointId) => {\n        return resolveClassNamesFromBuiltInStyles({\n          designPropsByBreakpointId,\n          breakpoints: entityStore.breakpoints,\n          node,\n        });\n      },\n    });\n\n    const slotsProps: Record<string, ReactNode> = {};\n\n    if (componentRegistration.definition.slots) {\n      for (const slotId in componentRegistration.definition.slots) {\n        const slotNode = node.children.find((child) => child.slotId === slotId);\n        if (slotNode) {\n          slotsProps[slotId] = (\n            <CompositionBlock\n              node={slotNode}\n              locale={locale}\n              hyperlinkPattern={hyperlinkPattern}\n              entityStore={entityStore}\n              resolveDesignValue={resolveDesignValue}\n              wrappingPatternIds={wrappingPatternIds}\n            />\n          );\n        }\n      }\n    }\n\n    const props: Record<string, PrimitiveValue> = {\n      className: ssrProps.cfSsrClassName ?? mediaQuery?.className,\n      ...styleProps,\n      ...contentProps,\n      ...customDesignProps,\n      ...slotsProps,\n    };\n\n    return {\n      ssrProps,\n      contentProps,\n      slotsProps,\n      styleProps,\n      customDesignProps,\n      mediaQuery,\n      props,\n    };\n  }, [\n    node.variables,\n    node.id,\n    node.children,\n    resolveDesignValue,\n    componentRegistration,\n    isAssembly,\n    getPatternChildNodeClassName,\n    entityStore,\n    hyperlinkPattern,\n    locale,\n    wrappingPatternIds,\n  ]);\n\n  // do not inject the stylesheet into the dom because it's already been done on the server side\n  useInjectStylesheet(ssrProps.cfSsrClassName ? undefined : mediaQuery);\n\n  if (!componentRegistration) {\n    return null;\n  }\n\n  // When detecting a circular dependency, we stop silently. The editor mode will render an actionable error.\n  if (parentWrappingPatternIds.has(node.definitionId)) {\n    return null;\n  }\n\n  const { component } = componentRegistration;\n\n  // Retrieves the CSS class name for a given child node ID.\n  const _getPatternChildNodeClassName = (childNodeId: string) => {\n    if (isAssembly) {\n      // @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles\n      const classesForNode: DesignValue | undefined = node.variables.cfSsrClassName?.[childNodeId];\n      if (!classesForNode) return undefined;\n      return resolveDesignValue(classesForNode.valuesByBreakpoint, 'cfSsrClassName') as string;\n    }\n    return getPatternChildNodeClassName?.(childNodeId);\n  };\n\n  const children =\n    componentRegistration.definition.children === true\n      ? node.children.map((childNode: ComponentTreeNode, index) => {\n          return (\n            <CompositionBlock\n              getPatternChildNodeClassName={\n                isAssembly || getPatternChildNodeClassName\n                  ? _getPatternChildNodeClassName\n                  : undefined\n              }\n              node={childNode}\n              key={index}\n              locale={locale}\n              hyperlinkPattern={hyperlinkPattern}\n              entityStore={entityStore}\n              resolveDesignValue={resolveDesignValue}\n              wrappingPatternIds={wrappingPatternIds}\n            />\n          );\n        })\n      : null;\n\n  if (\n    [CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(\n      node.definitionId,\n    )\n  ) {\n    return (\n      <ContentfulContainer\n        editorMode={false}\n        cfHyperlink={(contentProps as StyleProps).cfHyperlink}\n        cfOpenInNewTab={(contentProps as StyleProps).cfOpenInNewTab}\n        className={props.className as string | undefined}>\n        {children}\n      </ContentfulContainer>\n    );\n  }\n\n  if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {\n    return (\n      <Columns editorMode={false} className={props.className as string | undefined}>\n        {children}\n      </Columns>\n    );\n  }\n\n  if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {\n    return (\n      <SingleColumn editorMode={false} className={props.className as string | undefined}>\n        {children}\n      </SingleColumn>\n    );\n  }\n\n  if (\n    node.definitionId === CONTENTFUL_COMPONENTS.image.id &&\n    node.variables.cfImageAsset?.type === 'UnboundValue'\n  ) {\n    return (\n      <PreviewUnboundImage\n        node={node}\n        nodeProps={props}\n        component={component}\n        breakpoints={entityStore.breakpoints}\n      />\n    );\n  }\n\n  return React.createElement(\n    component,\n    {\n      ...sanitizeNodeProps(props),\n      key: `${node.id}-${hasRendered}`,\n    },\n    children ?? (typeof props.children === 'string' ? props.children : null),\n  );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/blocks/preview/PreviewUnboundImage.js

@@ -1,33 +1,50 @@
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { sanitizeNodeProps } from '@contentful/experiences-core';
-import { useClassName } from '../../hooks/useClassName.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useInjectStylesheet } from '../../hooks/useClassName.js';
+import classNames from 'classnames';
 
 /**
  * This component is used to render a placeholder Image component in the preview
  * when the image is unbound. It applies the Image size styles to a wrapping div.
  */
-const PreviewUnboundImage = ({ node, nodeProps, component, }) => {
-    const wrapperStyle = {
-        position: 'relative',
-    };
-    const modifiedNodeProps = { ...nodeProps };
-    if (typeof modifiedNodeProps.cfImageOptions === 'object') {
-        const { width, height, ...restImageOptions } = modifiedNodeProps.cfImageOptions;
-        // Apply the Image size styles to the wrapping div
-        wrapperStyle.height = String(height);
-        wrapperStyle.width = String(width);
-        // Set the Image height and width to 100% to fill the wrapping div
-        modifiedNodeProps.cfImageOptions = {
-            ...restImageOptions,
-            height: '100%',
-            width: '100%',
-        };
-    }
-    const className = useClassName({ props: modifiedNodeProps, node });
-    return (jsx("div", { className: "cf-preview-unbound-image", style: wrapperStyle, children: React.createElement(component, {
-            ...sanitizeNodeProps(modifiedNodeProps),
-            className,
+const PreviewUnboundImage = ({ breakpoints, node, nodeProps, component, }) => {
+    const { wrapperStyle, imageStyle } = useMemo(() => {
+        const imageStyle = {};
+        const wrapperStyle = {};
+        if (nodeProps.cfImageOptions && typeof nodeProps.cfImageOptions === 'object') {
+            for (const [breakpointId, styles] of Object.entries(nodeProps.cfImageOptions)) {
+                imageStyle[breakpointId] = {
+                    cfImageOptions: {
+                        ...styles,
+                        height: '100%',
+                        width: '100%',
+                    },
+                };
+                wrapperStyle[breakpointId] = {
+                    cfHeight: styles.height,
+                    cfWidth: styles.width,
+                };
+            }
+        }
+        return { imageStyle, wrapperStyle };
+    }, [nodeProps.cfImageOptions]);
+    const wrapperMedia = useMediaQuery({
+        designPropsByBreakpointId: wrapperStyle,
+        node,
+        breakpoints,
+    });
+    const imageMedia = useMediaQuery({
+        designPropsByBreakpointId: imageStyle,
+        node,
+        breakpoints,
+    });
+    useInjectStylesheet(wrapperMedia);
+    useInjectStylesheet(imageMedia);
+    return (jsx("div", { className: classNames('cf-preview-unbound-image', wrapperMedia.className), children: React.createElement(component, {
+            ...sanitizeNodeProps(nodeProps),
+            className: imageMedia.css ? imageMedia.className : nodeProps.className,
         }) }));
 };
 

package/dist/blocks/preview/PreviewUnboundImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewUnboundImage.js","sources":["../../../../src/blocks/preview/PreviewUnboundImage.tsx"],"sourcesContent":["import React from 'react';\nimport type {\n  ComponentTreeNode,\n  CSSProperties,\n  PrimitiveValue,\n} from '@contentful/experiences-core/types';\nimport { sanitizeNodeProps } from '@contentful/experiences-core';\nimport { useClassName } from '../../hooks/useClassName';\n\ninterface PreviewUnboundImageProps {\n  node: ComponentTreeNode;\n  nodeProps: Record<PropertyKey, PrimitiveValue>;\n  component: React.ElementType;\n}\n\n/**\n * This component is used to render a placeholder Image component in the preview\n * when the image is unbound. It applies the Image size styles to a wrapping div.\n */\nconst PreviewUnboundImage: React.FC<PreviewUnboundImageProps> = ({\n  node,\n  nodeProps,\n  component,\n}) => {\n  const wrapperStyle: CSSProperties = {\n    position: 'relative',\n  };\n\n  const modifiedNodeProps = { ...nodeProps };\n  if (typeof modifiedNodeProps.cfImageOptions === 'object') {\n    const { width, height, ...restImageOptions } = modifiedNodeProps.cfImageOptions;\n\n    // Apply the Image size styles to the wrapping div\n    wrapperStyle.height = String(height);\n    wrapperStyle.width = String(width);\n\n    // Set the Image height and width to 100% to fill the wrapping div\n    modifiedNodeProps.cfImageOptions = {\n      ...restImageOptions,\n      height: '100%',\n      width: '100%',\n    };\n  }\n\n  const className = useClassName({ props: modifiedNodeProps, node });\n\n  return (\n    <div className=\"cf-preview-unbound-image\" style={wrapperStyle}>\n      {React.createElement(component, {\n        ...sanitizeNodeProps(modifiedNodeProps),\n        className,\n      })}\n    </div>\n  );\n};\n\nexport default PreviewUnboundImage;\n"],"names":["_jsx"],"mappings":";;;;;AAeA;;;AAGG;AACG,MAAA,mBAAmB,GAAuC,CAAC,EAC/D,IAAI,EACJ,SAAS,EACT,SAAS,GACV,KAAI;AACH,IAAA,MAAM,YAAY,GAAkB;AAClC,QAAA,QAAQ,EAAE,UAAU;KACrB,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,EAAE,GAAG,SAAS,EAAE,CAAC;AAC3C,IAAA,IAAI,OAAO,iBAAiB,CAAC,cAAc,KAAK,QAAQ,EAAE;AACxD,QAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,cAAc,CAAC;;AAGhF,QAAA,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACrC,QAAA,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGnC,iBAAiB,CAAC,cAAc,GAAG;AACjC,YAAA,GAAG,gBAAgB;AACnB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;SACd,CAAC;KACH;AAED,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC;AAEnE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,YAAY,YAC1D,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;YAC9B,GAAG,iBAAiB,CAAC,iBAAiB,CAAC;YACvC,SAAS;SACV,CAAC,EAAA,CACE,EACN;AACJ;;;;"}
+{"version":3,"file":"PreviewUnboundImage.js","sources":["../../../../src/blocks/preview/PreviewUnboundImage.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type {\n  Breakpoint,\n  ComponentTreeNode,\n  PrimitiveValue,\n} from '@contentful/experiences-core/types';\nimport { sanitizeNodeProps } from '@contentful/experiences-core';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { useInjectStylesheet } from '../../hooks/useClassName';\nimport classNames from 'classnames';\n\ninterface PreviewUnboundImageProps {\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n  nodeProps: Record<PropertyKey, PrimitiveValue>;\n  component: React.ElementType;\n}\n\n/**\n * This component is used to render a placeholder Image component in the preview\n * when the image is unbound. It applies the Image size styles to a wrapping div.\n */\nconst PreviewUnboundImage: React.FC<PreviewUnboundImageProps> = ({\n  breakpoints,\n  node,\n  nodeProps,\n  component,\n}) => {\n  const { wrapperStyle, imageStyle } = useMemo(() => {\n    const imageStyle: Record<string, any> = {};\n    const wrapperStyle: Record<string, any> = {};\n\n    if (nodeProps.cfImageOptions && typeof nodeProps.cfImageOptions === 'object') {\n      for (const [breakpointId, styles] of Object.entries(nodeProps.cfImageOptions)) {\n        imageStyle[breakpointId] = {\n          cfImageOptions: {\n            ...styles,\n            height: '100%',\n            width: '100%',\n          },\n        };\n\n        wrapperStyle[breakpointId] = {\n          cfHeight: styles.height,\n          cfWidth: styles.width,\n        };\n      }\n    }\n\n    return { imageStyle, wrapperStyle };\n  }, [nodeProps.cfImageOptions]);\n\n  const wrapperMedia = useMediaQuery({\n    designPropsByBreakpointId: wrapperStyle,\n    node,\n    breakpoints,\n  });\n\n  const imageMedia = useMediaQuery({\n    designPropsByBreakpointId: imageStyle,\n    node,\n    breakpoints,\n  });\n\n  useInjectStylesheet(wrapperMedia);\n  useInjectStylesheet(imageMedia);\n\n  return (\n    <div className={classNames('cf-preview-unbound-image', wrapperMedia.className)}>\n      {React.createElement(component, {\n        ...sanitizeNodeProps(nodeProps),\n        className: imageMedia.css ? imageMedia.className : nodeProps.className,\n      })}\n    </div>\n  );\n};\n\nexport default PreviewUnboundImage;\n"],"names":["_jsx"],"mappings":";;;;;;;AAkBA;;;AAGG;AACH,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,GACV,KAAI;IACH,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAK;QAChD,MAAM,UAAU,GAAwB,EAAE,CAAC;QAC3C,MAAM,YAAY,GAAwB,EAAE,CAAC;QAE7C,IAAI,SAAS,CAAC,cAAc,IAAI,OAAO,SAAS,CAAC,cAAc,KAAK,QAAQ,EAAE;AAC5E,YAAA,KAAK,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE;gBAC7E,UAAU,CAAC,YAAY,CAAC,GAAG;AACzB,oBAAA,cAAc,EAAE;AACd,wBAAA,GAAG,MAAM;AACT,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,KAAK,EAAE,MAAM;AACd,qBAAA;iBACF,CAAC;gBAEF,YAAY,CAAC,YAAY,CAAC,GAAG;oBAC3B,QAAQ,EAAE,MAAM,CAAC,MAAM;oBACvB,OAAO,EAAE,MAAM,CAAC,KAAK;iBACtB,CAAC;aACH;SACF;AAED,QAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;AACtC,KAAC,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,aAAa,CAAC;AACjC,QAAA,yBAAyB,EAAE,YAAY;QACvC,IAAI;QACJ,WAAW;AACZ,KAAA,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,aAAa,CAAC;AAC/B,QAAA,yBAAyB,EAAE,UAAU;QACrC,IAAI;QACJ,WAAW;AACZ,KAAA,CAAC,CAAC;IAEH,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAClC,mBAAmB,CAAC,UAAU,CAAC,CAAC;AAEhC,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,YAAY,CAAC,SAAS,CAAC,EAC3E,QAAA,EAAA,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;YAC9B,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAC/B,YAAA,SAAS,EAAE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS;SACvE,CAAC,EAAA,CACE,EACN;AACJ;;;;"}

package/dist/core/componentRegistry.js

@@ -151,7 +151,11 @@ const optionalBuiltInComponents = [
 ];
 const sendRegisteredComponentsMessage = () => {
     // Send the definitions (without components) via the connection message to the experience builder
-    const registeredDefinitions = Array.from(componentRegistry.values()).map(({ definition }) => definition);
+    const registeredDefinitions = Array.from(componentRegistry.values())
+        .map(({ definition }) => definition)
+        // Pattern definitions are empty placeholder within the SDK without variables
+        // We don't send those to the editor as they would overwrite the actual correct definitions.
+        .filter((definition) => definition.category !== ASSEMBLY_DEFAULT_CATEGORY);
     sendMessage(OUTGOING_EVENTS.RegisteredComponents, {
         definitions: registeredDefinitions,
     });

package/dist/core/componentRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentRegistry.js","sources":["../../../src/core/componentRegistry.ts"],"sourcesContent":["import * as Components from '@contentful/experiences-components-react';\nimport type {\n  ComponentRegistration,\n  ComponentDefinition,\n  ComponentRegistrationOptions,\n  DesignTokensDefinition,\n} from '@contentful/experiences-core/types';\nimport {\n  OUTGOING_EVENTS,\n  INTERNAL_EVENTS,\n  CONTENTFUL_COMPONENTS,\n  ASSEMBLY_DEFAULT_CATEGORY,\n} from '@contentful/experiences-core/constants';\nimport {\n  builtInStyles as builtInStyleDefinitions,\n  designTokensRegistry,\n  breakpointsRegistry,\n  optionalBuiltInStyles,\n  sendMessage,\n} from '@contentful/experiences-core';\nimport { validateComponentDefinition } from '@contentful/experiences-validators';\nimport { withComponentWrapper } from '../utils/withComponentWrapper';\nimport { SDK_VERSION } from '../constants';\nimport {\n  sectionDefinition,\n  containerDefinition,\n  columnsDefinition,\n  singleColumnDefinition,\n  dividerDefinition,\n} from '@contentful/experiences-components-react';\n\nconst CssVarRegex = /var\\(--[\\w-]+\\)/;\n\nconst cloneObject = <T>(targetObject: T): T => {\n  if (typeof structuredClone !== 'undefined') {\n    return structuredClone(targetObject);\n  }\n\n  return JSON.parse(JSON.stringify(targetObject));\n};\n\nconst applyComponentDefinitionFallbacks = (componentDefinition: ComponentDefinition) => {\n  const clone = cloneObject(componentDefinition);\n  for (const variable of Object.values(clone.variables)) {\n    variable.group = variable.group ?? 'content';\n  }\n  return clone;\n};\n\nconst applyBuiltInStyleDefinitions = (componentDefinition: ComponentDefinition) => {\n  if ([CONTENTFUL_COMPONENTS.container.id].includes(componentDefinition.id)) {\n    return componentDefinition;\n  }\n\n  const clone = cloneObject(componentDefinition);\n\n  // set margin built-in style by default\n  if (!clone.builtInStyles) {\n    clone.builtInStyles = ['cfMargin'];\n  }\n\n  if (!clone.variables) {\n    clone.variables = {};\n  }\n\n  // Enforce the presence of this property for toggling visibility on any node\n  clone.variables['cfVisibility'] = builtInStyleDefinitions['cfVisibility'];\n\n  for (const style of clone.builtInStyles || []) {\n    if (builtInStyleDefinitions[style]) {\n      clone.variables[style] = builtInStyleDefinitions[style] as any; // TODO: fix type\n    }\n    if (optionalBuiltInStyles[style]) {\n      clone.variables[style] = optionalBuiltInStyles[style] as any; // TODO: fix type\n    }\n  }\n  return clone;\n};\n\nexport const enrichComponentDefinition = ({\n  component,\n  definition,\n  options,\n}: ComponentRegistration): ComponentRegistration => {\n  const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);\n  const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);\n  return {\n    component: withComponentWrapper(component, options),\n    definition: definitionWithBuiltInStyles,\n    options,\n  };\n};\n\nconst DEFAULT_COMPONENT_REGISTRATIONS = {\n  container: {\n    component: Components.ContentfulContainer,\n    definition: containerDefinition,\n  },\n  section: {\n    component: Components.ContentfulContainer,\n    definition: sectionDefinition,\n  },\n  columns: {\n    component: Components.Columns,\n    definition: columnsDefinition,\n  },\n  singleColumn: {\n    component: Components.SingleColumn,\n    definition: singleColumnDefinition,\n  },\n  button: enrichComponentDefinition({\n    component: Components.Button,\n    definition: Components.ButtonComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  heading: enrichComponentDefinition({\n    component: Components.Heading,\n    definition: Components.HeadingComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  image: enrichComponentDefinition({\n    component: Components.Image,\n    definition: Components.ImageComponentDefinition,\n    options: { wrapComponent: false },\n  }),\n  richText: enrichComponentDefinition({\n    component: Components.RichText,\n    definition: Components.RichTextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  text: enrichComponentDefinition({\n    component: Components.Text,\n    definition: Components.TextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  divider: {\n    // Don't wrap this component `withComponentWrapper`. Need to explicitly ignore dragProps\n    component: Components.ContentfulDivider,\n    definition: dividerDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  },\n  carousel: enrichComponentDefinition({\n    component: Components.Carousel,\n    definition: Components.carouselDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n} satisfies Record<string, ComponentRegistration>;\n\n// pre-filling with the default component registrations\nexport const componentRegistry = new Map<string, ComponentRegistration>([\n  [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.container,\n  ],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],\n  [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],\n  [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],\n  [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.richText,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],\n  [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],\n]);\n\nexport const optionalBuiltInComponents = [\n  DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id,\n];\n\nexport const sendRegisteredComponentsMessage = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values()).map(\n    ({ definition }) => definition,\n  );\n\n  sendMessage(OUTGOING_EVENTS.RegisteredComponents, {\n    definitions: registeredDefinitions,\n  });\n};\n\nexport const runRegisteredComponentValidations = () => {\n  Array.from(componentRegistry.values()).map(({ definition }) => {\n    const validation = validateComponentDefinition(definition);\n    if (!validation.success) {\n      throw new Error(\n        `Invalid component definition for component '${definition.name}'. Failed with errors: \\n${JSON.stringify(validation.errors, null, 2)}`,\n      );\n    }\n  });\n};\n\nconst getSingleCssVariableValue = (\n  element: HTMLDivElement,\n  cssVariableValue: string,\n  cssAttribute: any,\n) => {\n  element.style[cssAttribute] = cssVariableValue;\n  const styles = getComputedStyle(element);\n  const resolvedValue = styles.getPropertyValue(cssAttribute);\n  return resolvedValue;\n};\n\nconst getAllCssVariableValues = (\n  element: HTMLDivElement,\n  cssVariable: Record<string, string>,\n  cssAttribute: any,\n) => {\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  Object.keys(cssVariable).forEach((key) => {\n    const cssVariableValue = cssVariable[key];\n    if (CssVarRegex.test(cssVariableValue)) {\n      const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);\n      resolvedCssVariables[cssVariableValue] = resolvedValue;\n    }\n  });\n  return resolvedCssVariables;\n};\n\ntype CssMapType = {\n  variable?: Record<string, string>;\n  property: string;\n};\n\nconst resolveCssVariables = (designTokensDefinition: DesignTokensDefinition) => {\n  const {\n    spacing,\n    sizing,\n    color,\n    borderRadius,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textColor,\n    border,\n  } = designTokensDefinition;\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  // Create an element\n  const element = document.createElement('div');\n  document.body.appendChild(element);\n\n  const cssProperties: CssMapType[] = [\n    { variable: spacing, property: 'margin' },\n    { variable: sizing, property: 'width' },\n    { variable: color, property: 'background-color' },\n    { variable: borderRadius, property: 'border-radius' },\n    { variable: fontSize, property: 'font-size' },\n    { variable: lineHeight, property: 'line-height' },\n    { variable: letterSpacing, property: 'letter-spacing' },\n    { variable: textColor, property: 'color' },\n  ];\n\n  cssProperties.forEach(({ variable, property }) => {\n    if (variable) {\n      const rawResolvedValues = getAllCssVariableValues(element, variable, property);\n      Object.assign(resolvedCssVariables, rawResolvedValues);\n    }\n  });\n\n  if (border) {\n    const tempResolvedValue = {} as Record<string, string>;\n    Object.keys(border).forEach((borderKey) => {\n      const { width, style, color } = border[borderKey];\n\n      if (width && CssVarRegex.test(width)) {\n        const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');\n        tempResolvedValue[width] = resolvedValue;\n      }\n      if (style && CssVarRegex.test(style)) {\n        const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');\n        tempResolvedValue[style] = resolvedValue;\n      }\n      if (color && CssVarRegex.test(color)) {\n        const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');\n        tempResolvedValue[color] = resolvedValue;\n      }\n      Object.assign(resolvedCssVariables, tempResolvedValue);\n    });\n  }\n\n  document.body.removeChild(element);\n  return resolvedCssVariables;\n};\n\nexport const sendConnectedEventWithRegisteredComponents = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values()).map(\n    ({ definition }) => definition,\n  );\n\n  sendMessage(OUTGOING_EVENTS.Connected, {\n    sdkVersion: SDK_VERSION,\n    definitions: registeredDefinitions,\n  });\n\n  sendMessage(OUTGOING_EVENTS.RegisteredBreakpoints, {\n    breakpoints: breakpointsRegistry,\n  });\n\n  sendMessage(OUTGOING_EVENTS.DesignTokens, {\n    designTokens: designTokensRegistry,\n    resolvedCssVariables: resolveCssVariables(designTokensRegistry),\n  });\n};\n\n/**\n * Registers multiple components and their component definitions at once\n * @param componentRegistrations - ComponentRegistration[]\n * @returns void\n */\nexport const defineComponents = (\n  componentRegistrations: ComponentRegistration[],\n  options?: ComponentRegistrationOptions,\n) => {\n  if (options?.experimentalComponents?.carousel) {\n    componentRegistry.set(\n      CONTENTFUL_COMPONENTS.carousel.id,\n      DEFAULT_COMPONENT_REGISTRATIONS.carousel,\n    );\n  }\n\n  if (options?.enabledBuiltInComponents) {\n    for (const id of optionalBuiltInComponents) {\n      if (!options.enabledBuiltInComponents.includes(id)) {\n        componentRegistry.delete(id);\n      }\n    }\n  }\n\n  for (const registration of componentRegistrations) {\n    // Fill definitions with fallbacks values\n    const enrichedComponentRegistration = enrichComponentDefinition(registration);\n\n    componentRegistry.set(\n      enrichedComponentRegistration.definition.id,\n      enrichedComponentRegistration,\n    );\n  }\n\n  if (typeof window !== 'undefined') {\n    window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));\n  }\n};\n\n/**\n * use this function only in tests\n */\nexport const resetComponentRegistry = () => {\n  componentRegistry.clear();\n  for (const registration of Object.values(DEFAULT_COMPONENT_REGISTRATIONS)) {\n    componentRegistry.set(registration.definition.id, registration);\n  }\n};\n\nexport const getComponentRegistration = (id: string) => componentRegistry.get(id);\n\nexport const addComponentRegistration = (componentRegistration: ComponentRegistration) => {\n  componentRegistry.set(componentRegistration.definition.id, componentRegistration);\n};\n\nexport const createAssemblyRegistration = ({\n  definitionId,\n  definitionName,\n  component,\n}: {\n  definitionId: string;\n  definitionName?: string;\n  component: ComponentRegistration['component'];\n}) => {\n  const componentRegistration = componentRegistry.get(definitionId);\n\n  if (componentRegistration) {\n    return componentRegistration;\n  }\n\n  const definition = {\n    id: definitionId,\n    name: definitionName || 'Component',\n    variables: {},\n    children: true,\n    category: ASSEMBLY_DEFAULT_CATEGORY,\n  };\n\n  addComponentRegistration({ component, definition });\n\n  return componentRegistry.get(definitionId);\n};\n\n/**\n * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible\n * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use\n * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components\n * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)\n * will be removed in the next major release.\n */\nexport const maintainBasicComponentIdsWithoutPrefix = () => {\n  optionalBuiltInComponents.forEach((id) => {\n    if (componentRegistry.has(id) && id.startsWith('contentful-')) {\n      const registeredComponent = componentRegistry.get(id)!;\n      const definition = registeredComponent.definition;\n      const newDefinition = cloneObject(definition);\n      newDefinition.name = newDefinition.name + '[OLD]';\n      const newId = id.replace('contentful-', '');\n      newDefinition.id = newId;\n      const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };\n      componentRegistry.set(newId, newRegisteredComponent);\n    }\n  });\n};\n"],"names":["builtInStyleDefinitions"],"mappings":"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"}
+{"version":3,"file":"componentRegistry.js","sources":["../../../src/core/componentRegistry.ts"],"sourcesContent":["import * as Components from '@contentful/experiences-components-react';\nimport type {\n  ComponentRegistration,\n  ComponentDefinition,\n  ComponentRegistrationOptions,\n  DesignTokensDefinition,\n} from '@contentful/experiences-core/types';\nimport {\n  OUTGOING_EVENTS,\n  INTERNAL_EVENTS,\n  CONTENTFUL_COMPONENTS,\n  ASSEMBLY_DEFAULT_CATEGORY,\n} from '@contentful/experiences-core/constants';\nimport {\n  builtInStyles as builtInStyleDefinitions,\n  designTokensRegistry,\n  breakpointsRegistry,\n  optionalBuiltInStyles,\n  sendMessage,\n} from '@contentful/experiences-core';\nimport { validateComponentDefinition } from '@contentful/experiences-validators';\nimport { withComponentWrapper } from '../utils/withComponentWrapper';\nimport { SDK_VERSION } from '../constants';\nimport {\n  sectionDefinition,\n  containerDefinition,\n  columnsDefinition,\n  singleColumnDefinition,\n  dividerDefinition,\n} from '@contentful/experiences-components-react';\n\nconst CssVarRegex = /var\\(--[\\w-]+\\)/;\n\nconst cloneObject = <T>(targetObject: T): T => {\n  if (typeof structuredClone !== 'undefined') {\n    return structuredClone(targetObject);\n  }\n\n  return JSON.parse(JSON.stringify(targetObject));\n};\n\nconst applyComponentDefinitionFallbacks = (componentDefinition: ComponentDefinition) => {\n  const clone = cloneObject(componentDefinition);\n  for (const variable of Object.values(clone.variables)) {\n    variable.group = variable.group ?? 'content';\n  }\n  return clone;\n};\n\nconst applyBuiltInStyleDefinitions = (componentDefinition: ComponentDefinition) => {\n  if ([CONTENTFUL_COMPONENTS.container.id].includes(componentDefinition.id)) {\n    return componentDefinition;\n  }\n\n  const clone = cloneObject(componentDefinition);\n\n  // set margin built-in style by default\n  if (!clone.builtInStyles) {\n    clone.builtInStyles = ['cfMargin'];\n  }\n\n  if (!clone.variables) {\n    clone.variables = {};\n  }\n\n  // Enforce the presence of this property for toggling visibility on any node\n  clone.variables['cfVisibility'] = builtInStyleDefinitions['cfVisibility'];\n\n  for (const style of clone.builtInStyles || []) {\n    if (builtInStyleDefinitions[style]) {\n      clone.variables[style] = builtInStyleDefinitions[style] as any; // TODO: fix type\n    }\n    if (optionalBuiltInStyles[style]) {\n      clone.variables[style] = optionalBuiltInStyles[style] as any; // TODO: fix type\n    }\n  }\n  return clone;\n};\n\nexport const enrichComponentDefinition = ({\n  component,\n  definition,\n  options,\n}: ComponentRegistration): ComponentRegistration => {\n  const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);\n  const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);\n  return {\n    component: withComponentWrapper(component, options),\n    definition: definitionWithBuiltInStyles,\n    options,\n  };\n};\n\nconst DEFAULT_COMPONENT_REGISTRATIONS = {\n  container: {\n    component: Components.ContentfulContainer,\n    definition: containerDefinition,\n  },\n  section: {\n    component: Components.ContentfulContainer,\n    definition: sectionDefinition,\n  },\n  columns: {\n    component: Components.Columns,\n    definition: columnsDefinition,\n  },\n  singleColumn: {\n    component: Components.SingleColumn,\n    definition: singleColumnDefinition,\n  },\n  button: enrichComponentDefinition({\n    component: Components.Button,\n    definition: Components.ButtonComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  heading: enrichComponentDefinition({\n    component: Components.Heading,\n    definition: Components.HeadingComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  image: enrichComponentDefinition({\n    component: Components.Image,\n    definition: Components.ImageComponentDefinition,\n    options: { wrapComponent: false },\n  }),\n  richText: enrichComponentDefinition({\n    component: Components.RichText,\n    definition: Components.RichTextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  text: enrichComponentDefinition({\n    component: Components.Text,\n    definition: Components.TextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  divider: {\n    // Don't wrap this component `withComponentWrapper`. Need to explicitly ignore dragProps\n    component: Components.ContentfulDivider,\n    definition: dividerDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  },\n  carousel: enrichComponentDefinition({\n    component: Components.Carousel,\n    definition: Components.carouselDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n} satisfies Record<string, ComponentRegistration>;\n\n// pre-filling with the default component registrations\nexport const componentRegistry = new Map<string, ComponentRegistration>([\n  [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.container,\n  ],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],\n  [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],\n  [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],\n  [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.richText,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],\n  [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],\n]);\n\nexport const optionalBuiltInComponents = [\n  DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id,\n];\n\nexport const sendRegisteredComponentsMessage = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values())\n    .map(({ definition }) => definition)\n    // Pattern definitions are empty placeholder within the SDK without variables\n    // We don't send those to the editor as they would overwrite the actual correct definitions.\n    .filter((definition) => definition.category !== ASSEMBLY_DEFAULT_CATEGORY);\n\n  sendMessage(OUTGOING_EVENTS.RegisteredComponents, {\n    definitions: registeredDefinitions,\n  });\n};\n\nexport const runRegisteredComponentValidations = () => {\n  Array.from(componentRegistry.values()).map(({ definition }) => {\n    const validation = validateComponentDefinition(definition);\n    if (!validation.success) {\n      throw new Error(\n        `Invalid component definition for component '${definition.name}'. Failed with errors: \\n${JSON.stringify(validation.errors, null, 2)}`,\n      );\n    }\n  });\n};\n\nconst getSingleCssVariableValue = (\n  element: HTMLDivElement,\n  cssVariableValue: string,\n  cssAttribute: any,\n) => {\n  element.style[cssAttribute] = cssVariableValue;\n  const styles = getComputedStyle(element);\n  const resolvedValue = styles.getPropertyValue(cssAttribute);\n  return resolvedValue;\n};\n\nconst getAllCssVariableValues = (\n  element: HTMLDivElement,\n  cssVariable: Record<string, string>,\n  cssAttribute: any,\n) => {\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  Object.keys(cssVariable).forEach((key) => {\n    const cssVariableValue = cssVariable[key];\n    if (CssVarRegex.test(cssVariableValue)) {\n      const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);\n      resolvedCssVariables[cssVariableValue] = resolvedValue;\n    }\n  });\n  return resolvedCssVariables;\n};\n\ntype CssMapType = {\n  variable?: Record<string, string>;\n  property: string;\n};\n\nconst resolveCssVariables = (designTokensDefinition: DesignTokensDefinition) => {\n  const {\n    spacing,\n    sizing,\n    color,\n    borderRadius,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textColor,\n    border,\n  } = designTokensDefinition;\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  // Create an element\n  const element = document.createElement('div');\n  document.body.appendChild(element);\n\n  const cssProperties: CssMapType[] = [\n    { variable: spacing, property: 'margin' },\n    { variable: sizing, property: 'width' },\n    { variable: color, property: 'background-color' },\n    { variable: borderRadius, property: 'border-radius' },\n    { variable: fontSize, property: 'font-size' },\n    { variable: lineHeight, property: 'line-height' },\n    { variable: letterSpacing, property: 'letter-spacing' },\n    { variable: textColor, property: 'color' },\n  ];\n\n  cssProperties.forEach(({ variable, property }) => {\n    if (variable) {\n      const rawResolvedValues = getAllCssVariableValues(element, variable, property);\n      Object.assign(resolvedCssVariables, rawResolvedValues);\n    }\n  });\n\n  if (border) {\n    const tempResolvedValue = {} as Record<string, string>;\n    Object.keys(border).forEach((borderKey) => {\n      const { width, style, color } = border[borderKey];\n\n      if (width && CssVarRegex.test(width)) {\n        const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');\n        tempResolvedValue[width] = resolvedValue;\n      }\n      if (style && CssVarRegex.test(style)) {\n        const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');\n        tempResolvedValue[style] = resolvedValue;\n      }\n      if (color && CssVarRegex.test(color)) {\n        const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');\n        tempResolvedValue[color] = resolvedValue;\n      }\n      Object.assign(resolvedCssVariables, tempResolvedValue);\n    });\n  }\n\n  document.body.removeChild(element);\n  return resolvedCssVariables;\n};\n\nexport const sendConnectedEventWithRegisteredComponents = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values()).map(\n    ({ definition }) => definition,\n  );\n\n  sendMessage(OUTGOING_EVENTS.Connected, {\n    sdkVersion: SDK_VERSION,\n    definitions: registeredDefinitions,\n  });\n\n  sendMessage(OUTGOING_EVENTS.RegisteredBreakpoints, {\n    breakpoints: breakpointsRegistry,\n  });\n\n  sendMessage(OUTGOING_EVENTS.DesignTokens, {\n    designTokens: designTokensRegistry,\n    resolvedCssVariables: resolveCssVariables(designTokensRegistry),\n  });\n};\n\n/**\n * Registers multiple components and their component definitions at once\n * @param componentRegistrations - ComponentRegistration[]\n * @returns void\n */\nexport const defineComponents = (\n  componentRegistrations: ComponentRegistration[],\n  options?: ComponentRegistrationOptions,\n) => {\n  if (options?.experimentalComponents?.carousel) {\n    componentRegistry.set(\n      CONTENTFUL_COMPONENTS.carousel.id,\n      DEFAULT_COMPONENT_REGISTRATIONS.carousel,\n    );\n  }\n\n  if (options?.enabledBuiltInComponents) {\n    for (const id of optionalBuiltInComponents) {\n      if (!options.enabledBuiltInComponents.includes(id)) {\n        componentRegistry.delete(id);\n      }\n    }\n  }\n\n  for (const registration of componentRegistrations) {\n    // Fill definitions with fallbacks values\n    const enrichedComponentRegistration = enrichComponentDefinition(registration);\n\n    componentRegistry.set(\n      enrichedComponentRegistration.definition.id,\n      enrichedComponentRegistration,\n    );\n  }\n\n  if (typeof window !== 'undefined') {\n    window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));\n  }\n};\n\n/**\n * use this function only in tests\n */\nexport const resetComponentRegistry = () => {\n  componentRegistry.clear();\n  for (const registration of Object.values(DEFAULT_COMPONENT_REGISTRATIONS)) {\n    componentRegistry.set(registration.definition.id, registration);\n  }\n};\n\nexport const getComponentRegistration = (id: string) => componentRegistry.get(id);\n\nexport const addComponentRegistration = (componentRegistration: ComponentRegistration) => {\n  componentRegistry.set(componentRegistration.definition.id, componentRegistration);\n};\n\nexport const createAssemblyRegistration = ({\n  definitionId,\n  definitionName,\n  component,\n}: {\n  definitionId: string;\n  definitionName?: string;\n  component: ComponentRegistration['component'];\n}) => {\n  const componentRegistration = componentRegistry.get(definitionId);\n\n  if (componentRegistration) {\n    return componentRegistration;\n  }\n\n  const definition = {\n    id: definitionId,\n    name: definitionName || 'Component',\n    variables: {},\n    children: true,\n    category: ASSEMBLY_DEFAULT_CATEGORY,\n  };\n\n  addComponentRegistration({ component, definition });\n\n  return componentRegistry.get(definitionId);\n};\n\n/**\n * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible\n * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use\n * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components\n * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)\n * will be removed in the next major release.\n */\nexport const maintainBasicComponentIdsWithoutPrefix = () => {\n  optionalBuiltInComponents.forEach((id) => {\n    if (componentRegistry.has(id) && id.startsWith('contentful-')) {\n      const registeredComponent = componentRegistry.get(id)!;\n      const definition = registeredComponent.definition;\n      const newDefinition = cloneObject(definition);\n      newDefinition.name = newDefinition.name + '[OLD]';\n      const newId = id.replace('contentful-', '');\n      newDefinition.id = newId;\n      const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };\n      componentRegistry.set(newId, newRegisteredComponent);\n    }\n  });\n};\n"],"names":["builtInStyleDefinitions"],"mappings":"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"}

package/dist/hooks/useClassName.js

@@ -1,42 +1,24 @@
-import { useState, useLayoutEffect } from 'react';
-import { buildCfStyles, isStructureWithRelativeHeight, buildStyleTag } from '@contentful/experiences-core';
-import { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';
+import { useInsertionEffect } from 'react';
+import '@contentful/experiences-core';
+import '@contentful/experiences-core/constants';
 
-/**
- * This hook can generate className and inject styles on a client side as a <style> tag
- * or it derives the className set on the server side
- *
- * @param node: the componenet node for which the styles will be injected
- * @param props: the props of the component, represented by the node
- * @returns the className that was eitner generated on the client side or derived from the value, set on server side
- */
-const useClassName = ({ node, props, }) => {
-    const [className, setClassName] = useState(props.cfSsrClassName ?? '');
-    // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.
-    useLayoutEffect(() => {
-        if (props.cfSsrClassName) {
-            // class name has been already set on the server side. No need to calculate it on client side anymore
+const injectedStyles = [];
+const useInjectStylesheet = (stylesheet) => {
+    useInsertionEffect(() => {
+        if (!stylesheet) {
             return;
         }
-        const cfStyles = buildCfStyles(props);
-        if (Object.keys(cfStyles).length === 0) {
-            return;
-        }
-        if (!node.children.length &&
-            isStructureWithRelativeHeight(node.definitionId, cfStyles.height)) {
-            cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;
-        }
-        const [className, styleRule] = buildStyleTag({ styles: cfStyles });
-        if (!className || !styleRule) {
+        if (injectedStyles.includes(stylesheet.hash)) {
             return;
         }
         const styleTag = document.createElement('style');
-        styleTag.dataset['cfStyles'] = className;
-        setClassName(className);
-        document.head.appendChild(styleTag).innerHTML = styleRule;
-    }, [props, node]);
-    return className;
+        styleTag.setAttribute('type', 'text/css');
+        styleTag.id = stylesheet.hash;
+        styleTag.innerHTML = stylesheet.css;
+        document.head.appendChild(styleTag);
+        injectedStyles.push(stylesheet.hash);
+    }, [stylesheet]);
 };
 
-export { useClassName };
+export { useInjectStylesheet };
 //# sourceMappingURL=useClassName.js.map

package/dist/hooks/useClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClassName.js","sources":["../../../src/hooks/useClassName.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport {\n  buildCfStyles,\n  buildStyleTag,\n  isStructureWithRelativeHeight,\n} from '@contentful/experiences-core';\nimport { ComponentTreeNode } from '@contentful/experiences-core/types';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\n\n/**\n * This hook can generate className and inject styles on a client side as a <style> tag\n * or it derives the className set on the server side\n *\n * @param node: the componenet node for which the styles will be injected\n * @param props: the props of the component, represented by the node\n * @returns the className that was eitner generated on the client side or derived from the value, set on server side\n */\nexport const useClassName = ({\n  node,\n  props,\n}: {\n  node: ComponentTreeNode;\n  props: Record<string, any>;\n}) => {\n  const [className, setClassName] = useState<string>(props.cfSsrClassName ?? '');\n  // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.\n  useLayoutEffect(() => {\n    if (props.cfSsrClassName) {\n      // class name has been already set on the server side. No need to calculate it on client side anymore\n      return;\n    }\n\n    const cfStyles = buildCfStyles(props);\n\n    if (Object.keys(cfStyles).length === 0) {\n      return;\n    }\n\n    if (\n      !node.children.length &&\n      isStructureWithRelativeHeight(node.definitionId, cfStyles.height)\n    ) {\n      cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;\n    }\n\n    const [className, styleRule] = buildStyleTag({ styles: cfStyles });\n\n    if (!className || !styleRule) {\n      return;\n    }\n\n    const styleTag = document.createElement('style');\n    styleTag.dataset['cfStyles'] = className;\n\n    setClassName(className);\n\n    document.head.appendChild(styleTag).innerHTML = styleRule;\n  }, [props, node]);\n\n  return className;\n};\n"],"names":[],"mappings":";;;;AAUA;;;;;;;AAOG;AACU,MAAA,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,KAAK,GAIN,KAAI;AACH,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;;IAE/E,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,KAAK,CAAC,cAAc,EAAE;;YAExB,OAAO;SACR;AAED,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,OAAO;SACR;AAED,QAAA,IACE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM;YACrB,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,EACjE;AACA,YAAA,QAAQ,CAAC,SAAS,GAAG,sBAAsB,CAAC;SAC7C;AAED,QAAA,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AAEnE,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACjD,QAAA,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;QAEzC,YAAY,CAAC,SAAS,CAAC,CAAC;QAExB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC;AAC5D,KAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAElB,IAAA,OAAO,SAAS,CAAC;AACnB;;;;"}
+{"version":3,"file":"useClassName.js","sources":["../../../src/hooks/useClassName.ts"],"sourcesContent":["import { useLayoutEffect, useState, useInsertionEffect } from 'react';\n\nimport {\n  buildCfStyles,\n  buildStyleTag,\n  isStructureWithRelativeHeight,\n} from '@contentful/experiences-core';\nimport { ComponentTreeNode } from '@contentful/experiences-core/types';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\n\nconst injectedStyles: Array<string> = [];\n\n/**\n * This hook can generate className and inject styles on a client side as a <style> tag\n * or it derives the className set on the server side\n *\n * @param node: the componenet node for which the styles will be injected\n * @param props: the props of the component, represented by the node\n * @returns the className that was eitner generated on the client side or derived from the value, set on server side\n */\nexport const useClassName = ({\n  node,\n  props,\n}: {\n  node: ComponentTreeNode;\n  props: Record<string, any>;\n}) => {\n  const [className, setClassName] = useState<string>(props.cfSsrClassName ?? '');\n  // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.\n  useLayoutEffect(() => {\n    if (props.cfSsrClassName) {\n      // class name has been already set on the server side. No need to calculate it on client side anymore\n      return;\n    }\n\n    const cfStyles = buildCfStyles(props);\n\n    if (Object.keys(cfStyles).length === 0) {\n      return;\n    }\n\n    if (\n      !node.children.length &&\n      isStructureWithRelativeHeight(node.definitionId, cfStyles.height)\n    ) {\n      cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;\n    }\n\n    const [className, styleRule] = buildStyleTag({ styles: cfStyles });\n\n    if (!className || !styleRule) {\n      return;\n    }\n\n    const styleTag = document.createElement('style');\n    styleTag.dataset['cfStyles'] = className;\n\n    setClassName(className);\n\n    document.head.appendChild(styleTag).innerHTML = styleRule;\n  }, [props, node]);\n\n  return className;\n};\n\nexport const useInjectStylesheet = (stylesheet?: {\n  css: string;\n  hash: string;\n  className: string;\n}) => {\n  useInsertionEffect(() => {\n    if (!stylesheet) {\n      return;\n    }\n\n    if (injectedStyles.includes(stylesheet.hash)) {\n      return;\n    }\n\n    const styleTag = document.createElement('style');\n    styleTag.setAttribute('type', 'text/css');\n    styleTag.id = stylesheet.hash;\n    styleTag.innerHTML = stylesheet.css;\n\n    document.head.appendChild(styleTag);\n    injectedStyles.push(stylesheet.hash);\n  }, [stylesheet]);\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,cAAc,GAAkB,EAAE,CAAC;AAuD5B,MAAA,mBAAmB,GAAG,CAAC,UAInC,KAAI;IACH,kBAAkB,CAAC,MAAK;QACtB,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,IAAI,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;YAC5C,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACjD,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAC1C,QAAA,QAAQ,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;AAC9B,QAAA,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC;AAEpC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACpC,QAAA,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACvC,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACnB;;;;"}

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,115 @@
+import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, buildCfStyles, isStructureWithRelativeHeight, toCSSAttribute, toCSSString, toMediaQuery } from '@contentful/experiences-core';
+import { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';
+import md5 from 'md5';
+import { useMemo } from 'react';
+
+// TODO: move to ssrStyles.ts file and reuse it there
+const resolveClassNamesFromBuiltInStyles = ({ designPropsByBreakpointId, breakpoints, node, }) => {
+    const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);
+    const result = [];
+    // then for each breakpoint
+    for (const breakpoint of breakpoints) {
+        const designProps = designPropsByBreakpointId[breakpoint.id];
+        if (!designProps) {
+            continue;
+        }
+        const propsByBreakpointWithResolvedDesignTokens = Object.entries(designProps).reduce((acc, [propName, propValue]) => {
+            return {
+                ...acc,
+                [propName]: maybePopulateDesignTokenValue(propName, propValue, mapOfDesignVariableKeys),
+            };
+        }, {});
+        // We convert cryptic prop keys to css variables
+        // Eg: cfMargin to margin
+        const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);
+        if (!node.children.length &&
+            isStructureWithRelativeHeight(node.definitionId, stylesForBreakpoint.height)) {
+            stylesForBreakpoint.minHeight = EMPTY_CONTAINER_HEIGHT;
+        }
+        const stylesForBreakpointWithoutUndefined = Object.fromEntries(Object.entries(stylesForBreakpoint)
+            .filter(([, value]) => value !== undefined)
+            .map(([key, value]) => [toCSSAttribute(key), value]));
+        /**
+             * stylesForBreakpoint {
+                margin: '0 0 0 0',
+                padding: '0 0 0 0',
+                'background-color': 'rgba(246, 246, 246, 1)',
+                width: '100%',
+                height: 'fit-content',
+                'max-width': 'none',
+                border: '0px solid rgba(0, 0, 0, 0)',
+                'border-radius': '0px',
+                gap: '0px 0px',
+                'align-items': 'center',
+                'justify-content': 'safe center',
+                'flex-direction': 'column',
+                'flex-wrap': 'nowrap',
+                'font-style': 'normal',
+                'text-decoration': 'none',
+                'box-sizing': 'border-box'
+              }
+            */
+        // I create a hash of the object above because that would ensure hash stability
+        const styleHash = md5(JSON.stringify(stylesForBreakpointWithoutUndefined));
+        // and prefix the className to make sure the value can be processed
+        const className = `cfstyles-${styleHash}`;
+        // otherwise, save it to the stylesheet
+        result.push({
+            className,
+            breakpointCondition: breakpoint.query,
+            css: toCSSString(stylesForBreakpointWithoutUndefined),
+        });
+    }
+    return result;
+};
+// TODO: move to ssrStyles.ts file and reuse it there
+const convertResolvedDesignValuesToMediaQuery = (styleSheetData) => {
+    /**
+     * {
+     *  className: ['cfstyles-123', 'cfstyles-456'],
+     *  styleSheet: `
+     *    @media (max-width: 1024px) {
+     *      .cfstyles-123 { color: red; }
+     *    }
+     *    @media (max-width: 768px) {
+     *      .cfstyles-456 { color: blue; }
+     *    }
+     *  `
+     * }
+     */
+    const styleSheet = styleSheetData.reduce((acc, { breakpointCondition, className, css }) => {
+        if (acc.className.includes(className)) {
+            return acc;
+        }
+        const mediaQuery = toMediaQuery({
+            condition: breakpointCondition,
+            cssByClassName: { [className]: css },
+        });
+        return {
+            className: [...acc.className, className],
+            css: `${acc.css}${mediaQuery}`,
+        };
+    }, {
+        className: [],
+        css: '',
+    });
+    const className = styleSheet.className.join(' ');
+    return {
+        css: styleSheet.css,
+        hash: `cf-${md5(className)}`,
+        className,
+    };
+};
+const useMediaQuery = ({ designPropsByBreakpointId, breakpoints, node, }) => {
+    return useMemo(() => {
+        const styleSheetData = resolveClassNamesFromBuiltInStyles({
+            designPropsByBreakpointId,
+            breakpoints,
+            node,
+        });
+        return convertResolvedDesignValuesToMediaQuery(styleSheetData);
+    }, [designPropsByBreakpointId, breakpoints, node]);
+};
+
+export { convertResolvedDesignValuesToMediaQuery, resolveClassNamesFromBuiltInStyles, useMediaQuery };
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/hooks/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n  buildCfStyles,\n  designTokensRegistry,\n  flattenDesignTokenRegistry,\n  isStructureWithRelativeHeight,\n  maybePopulateDesignTokenValue,\n  toCSSAttribute,\n  toCSSString,\n  toMediaQuery,\n} from '@contentful/experiences-core';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\nimport { Breakpoint, ComponentTreeNode } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype ResolvedStylesheetData = Array<{\n  className: string;\n  breakpointCondition: string;\n  css: string;\n}>;\n\n// TODO: move to ssrStyles.ts file and reuse it there\nexport const resolveClassNamesFromBuiltInStyles = ({\n  designPropsByBreakpointId,\n  breakpoints,\n  node,\n}: {\n  designPropsByBreakpointId: Record<string, Record<string, any>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n}): ResolvedStylesheetData => {\n  const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);\n  const currentNodeClassNames: string[] = [];\n\n  const result: Array<{\n    className: string;\n    breakpointCondition: string;\n    css: string;\n  }> = [];\n\n  // then for each breakpoint\n  for (const breakpoint of breakpoints) {\n    const designProps = designPropsByBreakpointId[breakpoint.id];\n    if (!designProps) {\n      continue;\n    }\n\n    const propsByBreakpointWithResolvedDesignTokens = Object.entries(designProps).reduce(\n      (acc, [propName, propValue]) => {\n        return {\n          ...acc,\n          [propName]: maybePopulateDesignTokenValue(propName, propValue, mapOfDesignVariableKeys),\n        };\n      },\n      {},\n    );\n\n    // We convert cryptic prop keys to css variables\n    // Eg: cfMargin to margin\n    const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);\n\n    if (\n      !node.children.length &&\n      isStructureWithRelativeHeight(node.definitionId, stylesForBreakpoint.height)\n    ) {\n      stylesForBreakpoint.minHeight = EMPTY_CONTAINER_HEIGHT;\n    }\n\n    const stylesForBreakpointWithoutUndefined: Record<string, string> = Object.fromEntries(\n      Object.entries(stylesForBreakpoint)\n        .filter(([, value]) => value !== undefined)\n        .map(([key, value]) => [toCSSAttribute(key), value]),\n    );\n\n    /**\n         * stylesForBreakpoint {\n            margin: '0 0 0 0',\n            padding: '0 0 0 0',\n            'background-color': 'rgba(246, 246, 246, 1)',\n            width: '100%',\n            height: 'fit-content',\n            'max-width': 'none',\n            border: '0px solid rgba(0, 0, 0, 0)',\n            'border-radius': '0px',\n            gap: '0px 0px',\n            'align-items': 'center',\n            'justify-content': 'safe center',\n            'flex-direction': 'column',\n            'flex-wrap': 'nowrap',\n            'font-style': 'normal',\n            'text-decoration': 'none',\n            'box-sizing': 'border-box'\n          }\n        */\n    // I create a hash of the object above because that would ensure hash stability\n    const styleHash = md5(JSON.stringify(stylesForBreakpointWithoutUndefined));\n\n    // and prefix the className to make sure the value can be processed\n    const className = `cfstyles-${styleHash}`;\n\n    // I save the generated hashes into an array to later save it in the tree node\n    // as cfSsrClassName prop\n    // making sure to avoid the duplicates in case styles for > 1 breakpoints are the same\n    if (!currentNodeClassNames.includes(className)) {\n      currentNodeClassNames.push(className);\n    }\n\n    // otherwise, save it to the stylesheet\n    result.push({\n      className,\n      breakpointCondition: breakpoint.query,\n      css: toCSSString(stylesForBreakpointWithoutUndefined),\n    });\n  }\n\n  return result;\n};\n\n// TODO: move to ssrStyles.ts file and reuse it there\nexport const convertResolvedDesignValuesToMediaQuery = (styleSheetData: ResolvedStylesheetData) => {\n  /**\n   * {\n   *  className: ['cfstyles-123', 'cfstyles-456'],\n   *  styleSheet: `\n   *    @media (max-width: 1024px) {\n   *      .cfstyles-123 { color: red; }\n   *    }\n   *    @media (max-width: 768px) {\n   *      .cfstyles-456 { color: blue; }\n   *    }\n   *  `\n   * }\n   */\n  const styleSheet = styleSheetData.reduce<{ className: Array<string>; css: string }>(\n    (acc, { breakpointCondition, className, css }) => {\n      if (acc.className.includes(className)) {\n        return acc;\n      }\n\n      const mediaQuery = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: css },\n      });\n      return {\n        className: [...acc.className, className],\n        css: `${acc.css}${mediaQuery}`,\n      };\n    },\n    {\n      className: [],\n      css: '',\n    },\n  );\n\n  const className = styleSheet.className.join(' ');\n\n  return {\n    css: styleSheet.css,\n    hash: `cf-${md5(className)}`,\n    className,\n  };\n};\n\nexport const useMediaQuery = ({\n  designPropsByBreakpointId,\n  breakpoints,\n  node,\n}: {\n  designPropsByBreakpointId: Record<string, Record<string, any>>;\n  breakpoints: Breakpoint[];\n  node: ComponentTreeNode;\n}) => {\n  return useMemo(() => {\n    const styleSheetData = resolveClassNamesFromBuiltInStyles({\n      designPropsByBreakpointId,\n      breakpoints,\n      node,\n    });\n\n    return convertResolvedDesignValuesToMediaQuery(styleSheetData);\n  }, [designPropsByBreakpointId, breakpoints, node]);\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "1.30.5-dev-20250206T1804-ed40499.0";
+declare const SDK_VERSION = "1.30.5-prerelease-20250207T1349-200d927.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '1.30.5-dev-20250206T1804-ed40499.0';
+const SDK_VERSION = '1.30.5-prerelease-20250207T1349-200d927.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.30.5-dev-20250206T1804-ed40499.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.30.5-prerelease-20250207T1349-200d927.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/blocks/preview/PreviewUnboundImage.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
+import type { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
 interface PreviewUnboundImageProps {
+    breakpoints: Breakpoint[];
     node: ComponentTreeNode;
     nodeProps: Record<PropertyKey, PrimitiveValue>;
     component: React.ElementType;

package/dist/src/hooks/useClassName.d.ts

@@ -11,3 +11,8 @@ export declare const useClassName: ({ node, props, }: {
     node: ComponentTreeNode;
     props: Record<string, any>;
 }) => string;
+export declare const useInjectStylesheet: (stylesheet?: {
+    css: string;
+    hash: string;
+    className: string;
+}) => void;

package/dist/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,26 @@
+import { Breakpoint, ComponentTreeNode } from '@contentful/experiences-core/types';
+type ResolvedStylesheetData = Array<{
+    className: string;
+    breakpointCondition: string;
+    css: string;
+}>;
+export declare const resolveClassNamesFromBuiltInStyles: ({ designPropsByBreakpointId, breakpoints, node, }: {
+    designPropsByBreakpointId: Record<string, Record<string, any>>;
+    breakpoints: Breakpoint[];
+    node: ComponentTreeNode;
+}) => ResolvedStylesheetData;
+export declare const convertResolvedDesignValuesToMediaQuery: (styleSheetData: ResolvedStylesheetData) => {
+    css: string;
+    hash: string;
+    className: string;
+};
+export declare const useMediaQuery: ({ designPropsByBreakpointId, breakpoints, node, }: {
+    designPropsByBreakpointId: Record<string, Record<string, any>>;
+    breakpoints: Breakpoint[];
+    node: ComponentTreeNode;
+}) => {
+    css: string;
+    hash: string;
+    className: string;
+};
+export {};

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.30.5-dev-20250206T1804-ed40499.0";
+export declare const SDK_VERSION = "1.30.5-prerelease-20250207T1349-200d927.0";

package/dist/src/utils/parseComponentProps.d.ts

@@ -0,0 +1,46 @@
+import { BoundComponentPropertyTypes, BoundValue, ComponentDefinition, ComponentDefinitionVariable, ComponentDefinitionVariableType, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
+/**
+ * The previous logic of prop mapping was too complex and mixed different ues cases together.
+ * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES
+ * 1) Any non `DesignValue` props should be resolved and returned as is
+ * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately
+ * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)
+ * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query
+ * for each breakpoint
+ * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically
+ * for each breakpoint
+ */
+export declare const parseComponentProps: ({ componentDefinition, node, resolveClassNamesFromBuiltInStyles, resolveCustomDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, }: {
+    node: ComponentTreeNode;
+    componentDefinition: ComponentDefinition;
+    resolveClassNamesFromBuiltInStyles: (propsByBreakpointId: Record<string, Record<string, PrimitiveValue>>) => Array<{
+        className: string;
+        breakpointCondition: string;
+        css: string;
+    }>;
+    resolveCustomDesignValue: (data: {
+        propertyName: string;
+        valuesByBreakpoint: Record<string, any>;
+    }) => PrimitiveValue;
+    resolveBoundValue: (data: {
+        propertyName: string;
+        dataType: ComponentDefinitionVariableType;
+        binding: BoundValue;
+    }) => BoundComponentPropertyTypes;
+    resolveHyperlinkValue: (data: {
+        linkTargetKey: string;
+    }) => string | null;
+    resolveUnboundValue: (data: {
+        mappingKey: string;
+        defaultValue: ComponentDefinitionVariable["defaultValue"];
+    }) => any;
+}) => {
+    styleProps: Record<string, Record<string, string | number | boolean | Record<any, any> | undefined>>;
+    mediaQuery: {
+        css: string;
+        hash: string;
+        className: string;
+    };
+    customDesignProps: Record<string, string | number | boolean | Record<any, any> | undefined>;
+    contentProps: Record<string, any>;
+};

package/dist/test/__fixtures__/assembly.d.ts

@@ -1,12 +1,16 @@
-import type { ExperienceEntry, ExperienceTreeNode, SchemaVersions } from '@contentful/experiences-core/types';
+import type { ComponentTreeNode, ExperienceEntry, ExperienceTreeNode, SchemaVersions } from '@contentful/experiences-core/types';
 type createAssemblyEntryArgs = {
     schemaVersion?: SchemaVersions;
     id?: string;
+    nestedPatterns?: Array<{
+        entry: ExperienceEntry;
+        node: ComponentTreeNode;
+    }>;
 };
 export declare const defaultAssemblyId = "assembly-id";
 export declare const assemblyGeneratedVariableName = "text_uuid1Assembly";
 export declare const assemblyGeneratedDesignVariableName = "cfWidth_uuid2Assembly";
-export declare const createAssemblyEntry: ({ schemaVersion, id, }?: createAssemblyEntryArgs) => ExperienceEntry;
+export declare const createAssemblyEntry: ({ schemaVersion, id, nestedPatterns, }?: createAssemblyEntryArgs) => ExperienceEntry;
 type createAssemblyNodeArgs = {
     id: string;
     blockId?: string;

package/dist/utils/parseComponentProps.js

@@ -0,0 +1,141 @@
+import { isCfStyleAttribute } from '@contentful/experiences-core';
+import { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery.js';
+
+/**
+ * The previous logic of prop mapping was too complex and mixed different ues cases together.
+ * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES
+ * 1) Any non `DesignValue` props should be resolved and returned as is
+ * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately
+ * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)
+ * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query
+ * for each breakpoint
+ * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically
+ * for each breakpoint
+ */
+const parseComponentProps = ({ componentDefinition, node, resolveClassNamesFromBuiltInStyles, resolveCustomDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, }) => {
+    const styleProps = {};
+    const customDesignProps = {};
+    const contentProps = {};
+    for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {
+        const propertyValue = node.variables[propName];
+        if (!propertyValue)
+            continue;
+        switch (propertyValue.type) {
+            case 'DesignValue': {
+                if (isCfStyleAttribute(propName)) {
+                    // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over
+                    styleProps[propName] = propertyValue.valuesByBreakpoint;
+                }
+                else {
+                    // for custom design props, the value will be resolved with the javascript per breakpoint at runtime
+                    customDesignProps[propName] = resolveCustomDesignValue({
+                        propertyName: propName,
+                        valuesByBreakpoint: propertyValue.valuesByBreakpoint,
+                    });
+                }
+                break;
+            }
+            case 'BoundValue': {
+                const boundValue = resolveBoundValue({
+                    propertyName: propName,
+                    dataType: propDefinition.type,
+                    binding: propertyValue,
+                });
+                contentProps[propName] = boundValue ?? propDefinition.defaultValue;
+                break;
+            }
+            case 'HyperlinkValue': {
+                const hyperlink = resolveHyperlinkValue({
+                    linkTargetKey: propertyValue.linkTargetKey,
+                });
+                if (hyperlink) {
+                    contentProps[propName] = hyperlink;
+                }
+                break;
+            }
+            case 'UnboundValue': {
+                const unboundValue = resolveUnboundValue({
+                    mappingKey: propertyValue.key,
+                    defaultValue: propDefinition.defaultValue,
+                });
+                contentProps[propName] = unboundValue;
+                break;
+            }
+            case 'ComponentValue':
+                // We're rendering a pattern entry. Content cannot be set for ComponentValue type properties
+                // directly in the pattern so we can safely use the default value
+                // This can either a design (style) or a content variable
+                contentProps[propName] = propDefinition.defaultValue;
+                break;
+        }
+    }
+    /**
+    * {
+        desktop: {
+          cfVerticalAlignment: 'center',
+          cfHorizontalAlignment: 'center',
+          cfMargin: '0 0 0 0',
+          cfPadding: '0 0 0 0',
+          cfBackgroundColor: 'rgba(246, 246, 246, 1)',
+          cfWidth: 'fill',
+          cfHeight: 'fit-content',
+          cfMaxWidth: 'none',
+          cfFlexDirection: 'column',
+          cfFlexWrap: 'nowrap',
+          cfBorder: '0px solid rgba(0, 0, 0, 0)',
+          cfBorderRadius: '0px',
+          cfGap: '0px 0px',
+          cfBackgroundImageOptions: { scaling: 'fill', alignment: 'left top', targetSize: '2000px' }
+        },
+        tablet: {},
+        mobile: {}
+      }
+    */
+    const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce((acc, [propName, valuesByBreakpoint]) => {
+        for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {
+            if (!acc[breakpointId]) {
+                acc[breakpointId] = {};
+            }
+            acc[breakpointId][propName] = value;
+        }
+        return acc;
+    }, {});
+    /**
+     * [
+     *  {
+     *    className: 'cfstyles-123',
+     *    breakpointCondition: '<=1024px',
+     *    css: '.cfstyles-123 { color: red; }'
+     *  },
+     *  {
+     *   className: 'cfstyles-456',
+     *   breakpointCondition: '<=768px',
+     *   css: '.cfstyles-456 { color: blue; }'
+     *  }
+     * ]
+     */
+    const styleSheetData = resolveClassNamesFromBuiltInStyles(stylePropsIndexedByBreakpoint);
+    /**
+     * {
+     *  className: ['cfstyles-123', 'cfstyles-456'],
+     *  styleSheet: `
+     *    @media (max-width: 1024px) {
+     *      .cfstyles-123 { color: red; }
+     *    }
+     *    @media (max-width: 768px) {
+     *      .cfstyles-456 { color: blue; }
+     *    }
+     *  `
+     * }
+     */
+    const mediaQuery = convertResolvedDesignValuesToMediaQuery(styleSheetData);
+    return {
+        styleProps,
+        mediaQuery,
+        customDesignProps,
+        contentProps,
+    };
+};
+
+export { parseComponentProps };
+//# sourceMappingURL=parseComponentProps.js.map

package/dist/utils/parseComponentProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseComponentProps.js","sources":["../../../src/utils/parseComponentProps.ts"],"sourcesContent":["import { isCfStyleAttribute } from '@contentful/experiences-core';\nimport {\n  BoundComponentPropertyTypes,\n  BoundValue,\n  ComponentDefinition,\n  ComponentDefinitionVariable,\n  ComponentDefinitionVariableType,\n  ComponentTreeNode,\n  DesignValue,\n  PrimitiveValue,\n} from '@contentful/experiences-core/types';\nimport { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery';\n\n/**\n * The previous logic of prop mapping was too complex and mixed different ues cases together.\n * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES\n * 1) Any non `DesignValue` props should be resolved and returned as is\n * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately\n * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)\n * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query\n * for each breakpoint\n * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically\n * for each breakpoint\n */\nexport const parseComponentProps = ({\n  componentDefinition,\n  node,\n  resolveClassNamesFromBuiltInStyles,\n  resolveCustomDesignValue,\n  resolveBoundValue,\n  resolveHyperlinkValue,\n  resolveUnboundValue,\n}: {\n  node: ComponentTreeNode;\n  componentDefinition: ComponentDefinition;\n  resolveClassNamesFromBuiltInStyles: (\n    propsByBreakpointId: Record<string, Record<string, PrimitiveValue>>,\n  ) => Array<{ className: string; breakpointCondition: string; css: string }>;\n  resolveCustomDesignValue: (data: {\n    propertyName: string;\n    valuesByBreakpoint: Record<string, any>;\n  }) => PrimitiveValue;\n  resolveBoundValue: (data: {\n    propertyName: string;\n    dataType: ComponentDefinitionVariableType;\n    binding: BoundValue;\n  }) => BoundComponentPropertyTypes;\n  resolveHyperlinkValue: (data: { linkTargetKey: string }) => string | null;\n  resolveUnboundValue: (data: {\n    mappingKey: string;\n    defaultValue: ComponentDefinitionVariable['defaultValue'];\n  }) => any;\n}) => {\n  const styleProps: Record<string, DesignValue['valuesByBreakpoint']> = {};\n  const customDesignProps: Record<string, PrimitiveValue> = {};\n  const contentProps: Record<string, any> = {};\n\n  for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {\n    const propertyValue = node.variables[propName];\n    if (!propertyValue) continue;\n\n    switch (propertyValue.type) {\n      case 'DesignValue': {\n        if (isCfStyleAttribute(propName)) {\n          // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over\n          styleProps[propName] = propertyValue.valuesByBreakpoint;\n        } else {\n          // for custom design props, the value will be resolved with the javascript per breakpoint at runtime\n          customDesignProps[propName] = resolveCustomDesignValue({\n            propertyName: propName,\n            valuesByBreakpoint: propertyValue.valuesByBreakpoint,\n          });\n        }\n        break;\n      }\n      case 'BoundValue': {\n        const boundValue = resolveBoundValue({\n          propertyName: propName,\n          dataType: propDefinition.type as ComponentDefinitionVariableType,\n          binding: propertyValue,\n        });\n        contentProps[propName] = boundValue ?? propDefinition.defaultValue;\n        break;\n      }\n\n      case 'HyperlinkValue': {\n        const hyperlink = resolveHyperlinkValue({\n          linkTargetKey: propertyValue.linkTargetKey,\n        });\n        if (hyperlink) {\n          contentProps[propName] = hyperlink;\n        }\n        break;\n      }\n      case 'UnboundValue': {\n        const unboundValue = resolveUnboundValue({\n          mappingKey: propertyValue.key,\n          defaultValue: propDefinition.defaultValue,\n        });\n        contentProps[propName] = unboundValue;\n        break;\n      }\n      case 'ComponentValue':\n        // We're rendering a pattern entry. Content cannot be set for ComponentValue type properties\n        // directly in the pattern so we can safely use the default value\n        // This can either a design (style) or a content variable\n        contentProps[propName] = propDefinition.defaultValue;\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n  * {\n      desktop: {\n        cfVerticalAlignment: 'center',\n        cfHorizontalAlignment: 'center',\n        cfMargin: '0 0 0 0',\n        cfPadding: '0 0 0 0',\n        cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n        cfWidth: 'fill',\n        cfHeight: 'fit-content',\n        cfMaxWidth: 'none',\n        cfFlexDirection: 'column',\n        cfFlexWrap: 'nowrap',\n        cfBorder: '0px solid rgba(0, 0, 0, 0)',\n        cfBorderRadius: '0px',\n        cfGap: '0px 0px',\n        cfBackgroundImageOptions: { scaling: 'fill', alignment: 'left top', targetSize: '2000px' }\n      },\n      tablet: {},\n      mobile: {}\n    }\n  */\n  const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce<\n    Record<string, Record<string, PrimitiveValue>>\n  >((acc, [propName, valuesByBreakpoint]) => {\n    for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {\n      if (!acc[breakpointId]) {\n        acc[breakpointId] = {};\n      }\n\n      acc[breakpointId][propName] = value;\n    }\n\n    return acc;\n  }, {});\n\n  /**\n   * [\n   *  {\n   *    className: 'cfstyles-123',\n   *    breakpointCondition: '<=1024px',\n   *    css: '.cfstyles-123 { color: red; }'\n   *  },\n   *  {\n   *   className: 'cfstyles-456',\n   *   breakpointCondition: '<=768px',\n   *   css: '.cfstyles-456 { color: blue; }'\n   *  }\n   * ]\n   */\n  const styleSheetData = resolveClassNamesFromBuiltInStyles(stylePropsIndexedByBreakpoint);\n\n  /**\n   * {\n   *  className: ['cfstyles-123', 'cfstyles-456'],\n   *  styleSheet: `\n   *    @media (max-width: 1024px) {\n   *      .cfstyles-123 { color: red; }\n   *    }\n   *    @media (max-width: 768px) {\n   *      .cfstyles-456 { color: blue; }\n   *    }\n   *  `\n   * }\n   */\n  const mediaQuery = convertResolvedDesignValuesToMediaQuery(styleSheetData);\n\n  return {\n    styleProps,\n    mediaQuery,\n    customDesignProps,\n    contentProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.30.5-dev-20250206T1804-ed40499.0",
+  "version": "1.30.5-prerelease-20250207T1349-200d927.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "1.30.5-dev-20250206T1804-ed40499.0",
-    "@contentful/experiences-core": "1.30.5-dev-20250206T1804-ed40499.0",
-    "@contentful/experiences-validators": "1.30.5-dev-20250206T1804-ed40499.0",
-    "@contentful/experiences-visual-editor-react": "1.30.5-dev-20250206T1804-ed40499.0",
+    "@contentful/experiences-components-react": "1.30.5-prerelease-20250207T1349-200d927.0",
+    "@contentful/experiences-core": "1.30.5-prerelease-20250207T1349-200d927.0",
+    "@contentful/experiences-validators": "1.30.5-prerelease-20250207T1349-200d927.0",
+    "@contentful/experiences-visual-editor-react": "1.30.5-prerelease-20250207T1349-200d927.0",
     "@contentful/rich-text-types": "^17.0.0",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
@@ -102,5 +102,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "2a5fa908986bdb67b902737c2b6baf9ae18d86ab"
+  "gitHead": "3cf3a2124931f9404934eede743e2c42e1de64a5"
 }