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

package/dist/entity/EntityStoreBase.d.ts

@@ -12,7 +12,7 @@ declare abstract class EntityStoreBase {
         entities: Array<Entry | Asset>;
         locale: string;
     });
-    get entities(): (Asset<ChainModifiers, string> | Entry)[];
+    get entities(): (Entry | Asset<ChainModifiers, string>)[];
     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: (Asset<ChainModifiers, string> | Entry)[];
+        resolved: (Entry | Asset<ChainModifiers, string>)[];
         missing: string[];
     };
     protected addEntity(entity: Entry | Asset): void;

package/dist/index.js

@@ -1645,69 +1645,6 @@ 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;
@@ -1727,25 +1664,17 @@ const detachExperienceStyles = (experience) => {
     }), {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueryDataByBreakpoint);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, parentChainArr = [], }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, patternNodeIdsChain = '', }) => {
         // traversing the tree
         const queue = [];
-        queue.push(...componentTree.children.map((child) => ({
-            node: child,
-            parentChain: [...parentChainArr],
-        })));
+        queue.push(...componentTree.children);
+        let currentNode = undefined;
         // for each tree node
         while (queue.length) {
-            const queueItem = queue.shift();
-            if (!queueItem) {
-                break;
-            }
-            const { node: currentNode, parentChain } = queueItem;
+            currentNode = queue.shift();
             if (!currentNode) {
                 break;
             }
-            const currentNodeParentChain = [...parentChain, currentNode.id || ''];
-            const currentPatternNodeIdsChain = currentNodeParentChain.join('');
             const usedComponents = experience.entityStore?.usedComponents ?? [];
             const isPatternNode = checkIsAssemblyNode({
                 componentId: currentNode.definitionId,
@@ -1783,7 +1712,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]),
-                    parentChainArr: currentNodeParentChain,
+                    patternNodeIdsChain: `${patternNodeIdsChain}${currentNode.id}`,
                 });
                 continue;
             }
@@ -1869,12 +1798,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(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
-                    [currentPatternNodeIdsChain]: {
+                    [`${patternNodeIdsChain}${currentNode.id}`]: {
                         valuesByBreakpoint: {
                             [breakpointIds[0]]: currentNodeClassNames.join(' '),
                         },
@@ -1889,10 +1819,7 @@ const detachExperienceStyles = (experience) => {
                     },
                 };
             }
-            queue.push(...currentNode.children.map((child) => ({
-                node: child,
-                parentChain: currentNodeParentChain,
-            })));
+            queue.push(...currentNode.children);
         }
     };
     iterateOverTreeAndExtractStyles({
@@ -2014,28 +1941,7 @@ const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignV
     // Not trimming would end up with a trailing space that breaks the check in `calculateNodeDefaultHeight`
     return resolvedValue.trim();
 };
-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, }) => {
+const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataSource = {}, unboundValues = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
     if (variableData.type === 'UnboundValue') {
         const uuid = variableData.key;
         return unboundValues[uuid]?.value;
@@ -2060,8 +1966,6 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
             unboundValues,
             componentVariablesOverwrites,
             componentSettings,
-            options,
-            width,
         });
         return resolvedValue || defaultValue;
     }
@@ -2074,7 +1978,7 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
             return;
         }
         if (boundEntity.sys.type === 'Asset') {
-            return transformMedia$1(boundEntity, width, options);
+            return boundEntity.fields.file?.url;
         }
         else {
             // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
@@ -2098,31 +2002,11 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
                 if (!referencedAsset) {
                     return;
                 }
-                return transformMedia$1(referencedAsset, width, options);
+                return referencedAsset.fields.file?.url;
             }
         }
     }
 };
-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
@@ -2173,22 +2057,6 @@ 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,
@@ -2196,8 +2064,6 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
                 dataSource,
                 componentSettings,
                 componentVariablesOverwrites,
-                width,
-                options,
             });
             if (imageUrl) {
                 variableValuesByBreakpoints[defaultBreakpoint][variableName] = imageUrl;
@@ -2337,6 +2203,69 @@ 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('%', ''));