@contentful/experiences-core 1.37.1 → 1.37.2-dev-20250515T1505-4c9ed48.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { sanitizeNodeProps } from './utils/sanitizeNodeProps.js';
 export { addMinHeightForEmptyStructures, buildCfStyles, buildStyleTag, calculateNodeDefaultHeight, stringifyCssProperties, toCSSAttribute } from './utils/styleUtils/stylesUtils.js';
 export { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding, toMediaQuery } from './utils/styleUtils/ssrStyles.js';
 export { transformBoundContentValue } from './utils/transformers/transformBoundContentValue.js';
+export { treeMap, treeVisit } from './utils/treeTraversal.js';
 export { isExperienceEntry } from './utils/typeguards.js';
 export { checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getInsertionData, getTargetValueInPixels, parseCSSValue } from './utils/utils.js';
 export { doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderConfig } from './utils/validations.js';

package/dist/index.js

@@ -1758,6 +1758,7 @@ const transformVisibility = (value) => {
     // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
     return {};
 };
+// TODO: Remove in next major version v2 since the change is 17 months old
 // Keep this for backwards compatibility - deleting this would be a breaking change
 // because existing components on a users experience will have the width value as fill
 // rather than 100%
@@ -2176,10 +2177,11 @@ const detachExperienceStyles = (experience) => {
                 /* [Data format] `generatedCss` is the minimized CSS string that will be added to the DOM:
                  * generatedCss = "margin: 1px;width: 100%;..."
                  */
-                // I create a hash of the object above because that would ensure hash stability
-                // Adding breakpointId to ensure not using the same IDs between breakpoints as this leads to
+                // - 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 + generatedCss);
+                // - Adding wrapping pattern nodes IDs to avoid conflicts between similar nested patterns as those
+                // could override each others CSS for some breakpoints just through the order of `<style>` tags in the DOM.
+                const styleHash = md5(currentPatternNodeIdsChain + breakpointId + generatedCss);
                 // 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
@@ -2859,6 +2861,42 @@ const transformBoundContentValue = (variables, entityStore, binding, resolveDesi
     }
 };
 
+function treeVisit(initialNode, onNode) {
+    // returns last used index
+    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
+        // Copy children in case of onNode removing it as we pass the node by reference
+        const children = [...currentNode.children];
+        onNode(currentNode, currentIndex, currentDepth);
+        let nextAvailableIndex = currentIndex + 1;
+        const lastUsedIndex = currentIndex;
+        for (const child of children) {
+            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
+            nextAvailableIndex = lastUsedIndex + 1;
+        }
+        return lastUsedIndex;
+    };
+    _treeVisit(initialNode, 0, 0);
+}
+/**
+ * Traverses all nodes of a tree and maps all of them.
+ * Intuitively works similarly to Array.map().
+ * When returning mapped object from the mapper function
+ * you _do not_ need to return about `.children[]` field.
+ * This field is automatically managed by the treeMap() function.
+ *
+ * You can map each node to whatever you want, but shouldn't
+ * modify the structure of the tree from the mapping function.
+ */
+function treeMap(node, onNode) {
+    // Copy children in case of onNode removing it as we pass the node by reference
+    const children = [...node.children];
+    const newNode = {
+        ...onNode(node),
+        children: children.map((child) => treeMap(child, onNode)),
+    };
+    return newNode;
+}
+
 const isExperienceEntry = (entry) => {
     return (entry?.sys?.type === 'Entry' &&
         !!entry.fields?.title &&
@@ -3612,23 +3650,6 @@ const fetchExperienceEntry = async ({ client, experienceTypeId, locale, identifi
     return entries.items[0];
 };
 
-function treeVisit(initialNode, onNode) {
-    // returns last used index
-    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
-        // Copy children in case of onNode removing it as we pass the node by reference
-        const children = [...currentNode.children];
-        onNode(currentNode, currentIndex, currentDepth);
-        let nextAvailableIndex = currentIndex + 1;
-        const lastUsedIndex = currentIndex;
-        for (const child of children) {
-            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
-            nextAvailableIndex = lastUsedIndex + 1;
-        }
-        return lastUsedIndex;
-    };
-    _treeVisit(initialNode, 0, 0);
-}
-
 class DeepReference {
     constructor({ path, dataSource }) {
         const { key, field, referentField } = parseDataSourcePathWithL1DeepBindings(path);
@@ -4094,5 +4115,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, treeMap, treeVisit, tryParseMessage, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map