@contentful/experiences-core 1.31.0-dev-20250211T1859-e07efed.0 → 1.31.0-dev-20250217T1404-270aced.0

package/dist/index.js

@@ -1601,7 +1601,7 @@ const detachExperienceStyles = (experience) => {
     }, {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueriesTemplate);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, patternNodeIdsChain = '', }) => {
         // traversing the tree
         const queue = [];
         queue.push(...componentTree.children);
@@ -1639,12 +1639,21 @@ const detachExperienceStyles = (experience) => {
                             toCSSString(defaultPatternDivStyles);
                     }
                 }
-                currentNode.variables.cfSsrClassName = {
-                    type: 'DesignValue',
-                    valuesByBreakpoint: {
-                        [breakpointIds[0]]: className,
-                    },
-                };
+                // When iterating over instances of the same pattern, we will iterate over the identical
+                // pattern nodes again for every instance. Make sure to not overwrite the values from previous instances.
+                if (!currentNode.variables.cfSsrClassName) {
+                    currentNode.variables.cfSsrClassName = {
+                        type: 'DesignValue',
+                        valuesByBreakpoint: {
+                            [breakpointIds[0]]: className,
+                        },
+                    };
+                }
+                const nextComponentVariablesOverwrites = resolveComponentVariablesOverwrites({
+                    patternNode: currentNode,
+                    wrapperComponentVariablesOverwrites: componentVariablesOverwrites,
+                    wrapperComponentSettings: componentSettings,
+                });
                 // the node of a used pattern contains only the definitionId (id of the patter entry)
                 // as well as the variables overwrites
                 // the layout of a pattern is stored in it's entry
@@ -1659,10 +1668,11 @@ const detachExperienceStyles = (experience) => {
                     componentSettings: patternEntry.fields.componentSettings,
                     // and this is where the over-writes for the default values are stored
                     // yes, I know, it's a bit confusing
-                    componentVariablesOverwrites: currentNode.variables,
+                    componentVariablesOverwrites: nextComponentVariablesOverwrites,
                     // pass top-level pattern node to store instance-specific child styles for rendering
                     patternWrapper: currentNode,
                     wrappingPatternIds: new Set([...wrappingPatternIds, currentNode.definitionId]),
+                    patternNodeIdsChain: `${patternNodeIdsChain}${currentNode.id}`,
                 });
                 continue;
             }
@@ -1766,7 +1776,9 @@ const detachExperienceStyles = (experience) => {
                 }
                */
                 // I create a hash of the object above because that would ensure hash stability
-                const styleHash = md5(JSON.stringify(stylesForBreakpointWithoutUndefined));
+                // Adding breakpointId to ensure not using the same IDs between breakpoints as this leads to
+                // conflicts between different breakpoint values from multiple nodes where the hash would be equal
+                const styleHash = md5(breakpointId + JSON.stringify(stylesForBreakpointWithoutUndefined));
                 // and prefix the className to make sure the value can be processed
                 const className = `cf-${styleHash}`;
                 // I save the generated hashes into an array to later save it in the tree node
@@ -1791,12 +1803,13 @@ const detachExperienceStyles = (experience) => {
             // making sure that we respect the order of breakpoints from
             // we can achieve "desktop first" or "mobile first" approach to style over-writes
             if (patternWrapper) {
-                currentNode.id = currentNode.id ?? generateRandomId(15);
+                currentNode.id = currentNode.id || generateRandomId(5);
                 // @ts-expect-error -- valueByBreakpoint is not explicitly defined, but it's already defined in the patternWrapper styles
                 patternWrapper.variables.cfSsrClassName = {
                     ...(patternWrapper.variables.cfSsrClassName ?? {}),
                     type: 'DesignValue',
-                    [currentNode.id]: {
+                    // Chain IDs to avoid overwriting styles across multiple instances of the same pattern
+                    [`${patternNodeIdsChain}${currentNode.id}`]: {
                         valuesByBreakpoint: {
                             [breakpointIds[0]]: currentNodeClassNames.join(' '),
                         },
@@ -1828,6 +1841,70 @@ const detachExperienceStyles = (experience) => {
     }, '');
     return styleSheet;
 };
+/**
+ * Rendering pattern nodes inside pattern entry by injecting default values from the top:
+ * When there is a ComponentValue but the recursive logic is not wrapped by a pattern node (no `componentVariablesOverwrites`),
+ * a pattern entry is rendered directly. In this case, we replace each ComponentValue with the default value from componentSettings.
+ */
+const injectDefaultValuesForComponentValues = ({ patternNode, wrapperComponentSettings, }) => {
+    const propertyDefinitions = wrapperComponentSettings?.variableDefinitions;
+    const resolvedProperties = Object.entries(patternNode.variables).reduce((resolvedProperties, [propertyName, propertyValue]) => {
+        if (propertyValue.type === 'ComponentValue') {
+            const componentValueKey = propertyValue.key;
+            const componentDefaultValue = propertyDefinitions?.[componentValueKey].defaultValue;
+            // We're only considering design properties for styles generation
+            if (componentDefaultValue?.type === 'DesignValue') {
+                resolvedProperties[propertyName] = componentDefaultValue;
+            }
+        }
+        else {
+            // Do nothing when it's not a ComponentValue & just keep the defined value
+            resolvedProperties[propertyName] = propertyValue;
+        }
+        return resolvedProperties;
+    }, {});
+    return resolvedProperties;
+};
+/**
+ * In case of nested patterns, we need to resolve the ComponentValue properties and overwrite them with the value
+ * stored in the parent component.
+ *
+ *
+ * @param patternNode - pattern node which contains the variables
+ * @param componentVariablesOverwrites - object which contains the variables of the parent component
+ */
+const resolveComponentVariablesOverwrites = ({ patternNode, wrapperComponentVariablesOverwrites, wrapperComponentSettings, }) => {
+    // In case of rendering a pattern entry, there are no custom ComponentValues.
+    // So we pass down the default values from this pattern node down to each deeper pattern level.
+    if (!wrapperComponentVariablesOverwrites) {
+        const nextComponentVariablesOverwrites = injectDefaultValuesForComponentValues({
+            patternNode,
+            wrapperComponentSettings,
+        });
+        return nextComponentVariablesOverwrites;
+    }
+    // Rendering (nested) pattern node inside another pattern node (for both experience & pattern entry):
+    // The `wrapperComponentVariablesOverwrites` from the top-most pattern node is passed through to each child
+    // node (and nested pattern nodes). It replaces each ComponentValue in the subtree with either the overwrite
+    // or the default value.
+    const nextComponentVariablesOverwrites = Object.entries(patternNode?.variables).reduce((resolvedValues, [propertyName, propertyValue]) => {
+        if (propertyValue.type === 'ComponentValue') {
+            // Copying the values from the parent node
+            const overwritingValue = wrapperComponentVariablesOverwrites?.[propertyValue.key];
+            // Property definition from the parent pattern
+            const propertyDefinition = wrapperComponentSettings?.variableDefinitions?.[propertyValue.key];
+            // The overwriting value is either a custom value from the experience or default value from a
+            // wrapping pattern node that got trickled down to this nesting level.
+            resolvedValues[propertyName] = overwritingValue ?? propertyDefinition?.defaultValue;
+        }
+        else {
+            // Keep raw values
+            resolvedValues[propertyName] = propertyValue;
+        }
+        return resolvedValues;
+    }, {});
+    return nextComponentVariablesOverwrites;
+};
 const isCfStyleAttribute = (variableName) => {
     return CF_STYLE_ATTRIBUTES.includes(variableName);
 };