@contentful/experiences-core 1.36.0-dev-20250417T0749-6e3b573.0 → 1.36.0-dev-20250417T1301-b6204ec.0

package/dist/entity/EntityStoreBase.d.ts

@@ -12,7 +12,7 @@ declare abstract class EntityStoreBase {
         entities: Array<Entry | Asset>;
         locale: string;
     });
-    get entities(): (Entry | Asset<ChainModifiers, string>)[];
+    get entities(): (Asset<ChainModifiers, string> | Entry)[];
     updateEntity(entity: Entry | Asset): void;
     getEntryOrAsset(linkOrEntryOrAsset: UnresolvedLink<'Entry' | 'Asset'> | Asset | Entry, path: string): Entry | Asset | undefined;
     /**
@@ -24,7 +24,7 @@ declare abstract class EntityStoreBase {
     getValue(entityLink: UnresolvedLink<'Entry' | 'Asset'>, path: string[]): string | undefined;
     getEntityFromLink(link: UnresolvedLink<'Entry' | 'Asset'>): Asset | Entry | undefined;
     protected getEntitiesFromMap(type: 'Entry' | 'Asset', ids: string[]): {
-        resolved: (Entry | Asset<ChainModifiers, string>)[];
+        resolved: (Asset<ChainModifiers, string> | Entry)[];
         missing: string[];
     };
     protected addEntity(entity: Entry | Asset): void;

package/dist/index.js

@@ -1645,6 +1645,69 @@ const resetBreakpointsRegistry = () => {
     breakpointsRegistry = [];
 };
 
+function getOptimizedImageUrl(url, width, quality, format) {
+    if (url.startsWith('//')) {
+        url = 'https:' + url;
+    }
+    const params = new URLSearchParams();
+    if (width) {
+        params.append('w', width.toString());
+    }
+    if (quality && quality > 0 && quality < 100) {
+        params.append('q', quality.toString());
+    }
+    if (format) {
+        params.append('fm', format);
+    }
+    const queryString = params.toString();
+    return `${url}${queryString ? '?' + queryString : ''}`;
+}
+
+function validateParams(file, quality, format) {
+    if (!file.details.image) {
+        throw Error('No image in file asset to transform');
+    }
+    if (quality < 0 || quality > 100) {
+        throw Error('Quality must be between 0 and 100');
+    }
+    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+    }
+    return true;
+}
+
+const MAX_WIDTH_ALLOWED$1 = 2000;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    if (!validateParams(file, qualityNumber, format)) ;
+    const url = file.url;
+    const { width1x, width2x } = getWidths(widthStyle, file);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    function getWidths(widthStyle, file) {
+        let width1x = 0;
+        let width2x = 0;
+        const intrinsicImageWidth = file.details.image.width;
+        if (widthStyle.endsWith('px')) {
+            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
+        }
+        else {
+            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
+        }
+        width2x = Math.min(width1x * 2, intrinsicImageWidth);
+        return { width1x, width2x };
+    }
+};
+
 const detachExperienceStyles = (experience) => {
     const experienceTreeRoot = experience.entityStore?.experienceEntryFields
         ?.componentTree;
@@ -1664,17 +1727,25 @@ const detachExperienceStyles = (experience) => {
     }), {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueryDataByBreakpoint);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, patternNodeIdsChain = '', }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, parentChainArr = [], }) => {
         // traversing the tree
         const queue = [];
-        queue.push(...componentTree.children);
-        let currentNode = undefined;
+        queue.push(...componentTree.children.map((child) => ({
+            node: child,
+            parentChain: [...parentChainArr],
+        })));
         // for each tree node
         while (queue.length) {
-            currentNode = queue.shift();
+            const queueItem = queue.shift();
+            if (!queueItem) {
+                break;
+            }
+            const { node: currentNode, parentChain } = queueItem;
             if (!currentNode) {
                 break;
             }
+            const currentNodeParentChain = [...parentChain, currentNode.id || ''];
+            const currentPatternNodeIdsChain = currentNodeParentChain.join('');
             const usedComponents = experience.entityStore?.usedComponents ?? [];
             const isPatternNode = checkIsAssemblyNode({
                 componentId: currentNode.definitionId,
@@ -1712,7 +1783,7 @@ const detachExperienceStyles = (experience) => {
                     // 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}`,
+                    parentChainArr: currentNodeParentChain,
                 });
                 continue;
             }
@@ -1798,13 +1869,12 @@ 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(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',
                     // Chain IDs to avoid overwriting styles across multiple instances of the same pattern
-                    [`${patternNodeIdsChain}${currentNode.id}`]: {
+                    [currentPatternNodeIdsChain]: {
                         valuesByBreakpoint: {
                             [breakpointIds[0]]: currentNodeClassNames.join(' '),
                         },
@@ -1819,7 +1889,10 @@ const detachExperienceStyles = (experience) => {
                     },
                 };
             }
-            queue.push(...currentNode.children);
+            queue.push(...currentNode.children.map((child) => ({
+                node: child,
+                parentChain: currentNodeParentChain,
+            })));
         }
     };
     iterateOverTreeAndExtractStyles({
@@ -1941,7 +2014,28 @@ const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignV
     // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
     return resolvedValue.trim();
 };
-const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataSource = {}, unboundValues = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
+const transformMedia$1 = (boundAsset, width, options) => {
+    try {
+        const asset = boundAsset;
+        // Target width (px/rem/em) will be applied to the css url if it's lower than the original image width (in px)
+        const assetDetails = asset.fields.file?.details;
+        const assetWidth = assetDetails?.image?.width || 0; // This is always in px
+        if (!options) {
+            return asset.fields.file?.url;
+        }
+        const targetWidthObject = parseCSSValue(options.targetSize); // Contains value and unit (px/rem/em) so convert and then compare to assetWidth
+        const targetValue = targetWidthObject ? getTargetValueInPixels(targetWidthObject) : assetWidth;
+        if (targetValue < assetWidth)
+            width = `${targetValue}px`;
+        const value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
+        return value;
+    }
+    catch (error) {
+        console.error('Error transforming image asset', error);
+    }
+    return boundAsset.fields.file?.url;
+};
+const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataSource = {}, unboundValues = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, options, width, }) => {
     if (variableData.type === 'UnboundValue') {
         const uuid = variableData.key;
         return unboundValues[uuid]?.value;
@@ -1966,6 +2060,8 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
             unboundValues,
             componentVariablesOverwrites,
             componentSettings,
+            options,
+            width,
         });
         return resolvedValue || defaultValue;
     }
@@ -1978,7 +2074,7 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
             return;
         }
         if (boundEntity.sys.type === 'Asset') {
-            return boundEntity.fields.file?.url;
+            return transformMedia$1(boundEntity, width, options);
         }
         else {
             // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
@@ -2002,11 +2098,31 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
                 if (!referencedAsset) {
                     return;
                 }
-                return referencedAsset.fields.file?.url;
+                return transformMedia$1(referencedAsset, width, options);
             }
         }
     }
 };
+const resolveVariable = ({ variableData, defaultBreakpoint, componentSettings = { variableDefinitions: {} }, componentVariablesOverwrites, }) => {
+    if (variableData?.type === 'DesignValue') {
+        return variableData.valuesByBreakpoint[defaultBreakpoint] || {};
+    }
+    else if (variableData?.type === 'ComponentValue') {
+        const variableDefinitionKey = variableData.key;
+        const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
+        const defaultValue = variableDefinition.defaultValue;
+        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
+        if (!userSetValue || userSetValue.type === 'ComponentValue') {
+            return defaultValue?.valuesByBreakpoint[defaultBreakpoint] || '';
+        }
+        return resolveVariable({
+            variableData: userSetValue,
+            defaultBreakpoint,
+            componentSettings,
+            componentVariablesOverwrites,
+        });
+    }
+};
 /**
  * Takes the initial set of properties, filters only design properties that will be mapped to CSS and
  * re-organizes them to be indexed by breakpoint ID ("breakpoint > variable > value"). It will
@@ -2057,6 +2173,22 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
         if (variableName === 'cfBackgroundImageUrl' ||
             // TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).
             variableName.startsWith('cfBackgroundImageUrl_')) {
+            const width = resolveVariable({
+                variableData: variables['cfWidth'],
+                defaultBreakpoint,
+                componentSettings,
+                componentVariablesOverwrites,
+            });
+            const options = resolveVariable({
+                variableData: variables['cfBackgroundImageOptions'],
+                defaultBreakpoint,
+                componentSettings,
+                componentVariablesOverwrites,
+            });
+            if (!options) {
+                console.error(`Error transforming image asset: Required variable [cfBackgroundImageOptions] missing from component definition`);
+                continue;
+            }
             const imageUrl = resolveBackgroundImageBinding({
                 variableData,
                 getBoundEntityById,
@@ -2064,6 +2196,8 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
                 dataSource,
                 componentSettings,
                 componentVariablesOverwrites,
+                width,
+                options,
             });
             if (imageUrl) {
                 variableValuesByBreakpoints[defaultBreakpoint][variableName] = imageUrl;
@@ -2203,69 +2337,6 @@ const resolveLinks = (node, entityStore) => {
     }
 };
 
-function getOptimizedImageUrl(url, width, quality, format) {
-    if (url.startsWith('//')) {
-        url = 'https:' + url;
-    }
-    const params = new URLSearchParams();
-    if (width) {
-        params.append('w', width.toString());
-    }
-    if (quality && quality > 0 && quality < 100) {
-        params.append('q', quality.toString());
-    }
-    if (format) {
-        params.append('fm', format);
-    }
-    const queryString = params.toString();
-    return `${url}${queryString ? '?' + queryString : ''}`;
-}
-
-function validateParams(file, quality, format) {
-    if (!file.details.image) {
-        throw Error('No image in file asset to transform');
-    }
-    if (quality < 0 || quality > 100) {
-        throw Error('Quality must be between 0 and 100');
-    }
-    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
-    }
-    return true;
-}
-
-const MAX_WIDTH_ALLOWED$1 = 2000;
-const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
-    const qualityNumber = Number(quality.replace('%', ''));
-    if (!validateParams(file, qualityNumber, format)) ;
-    if (!validateParams(file, qualityNumber, format)) ;
-    const url = file.url;
-    const { width1x, width2x } = getWidths(widthStyle, file);
-    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const optimizedBackgroundImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        file,
-    };
-    return optimizedBackgroundImageAsset;
-    function getWidths(widthStyle, file) {
-        let width1x = 0;
-        let width2x = 0;
-        const intrinsicImageWidth = file.details.image.width;
-        if (widthStyle.endsWith('px')) {
-            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
-        }
-        else {
-            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
-        }
-        width2x = Math.min(width1x * 2, intrinsicImageWidth);
-        return { width1x, width2x };
-    }
-};
-
 const MAX_WIDTH_ALLOWED = 4000;
 const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format, }) => {
     const qualityNumber = Number(quality.replace('%', ''));