@contentful/experiences-core 1.7.0-dev-20240604T1720-355786e.0 → 1.7.0-dev-20240606T0842-e8e5afe.0

package/dist/deep-binding/DeepReference.d.ts

@@ -17,7 +17,6 @@ declare class DeepReference {
     /**
      * Extracts referent from the path, using EntityStore as source of
      * entities during the resolution path.
-     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
      */
     extractReferent(entityStore: EntityStoreBase): Link<'Asset' | 'Entry'> | undefined;
     static from(opt: DeepReferenceOpts): DeepReference;

package/dist/index.js

@@ -215,7 +215,6 @@ const transformBorderStyle = (value) => {
     // Just accept the passed value
     if (parts.length < 3)
         return { border: value };
-    // Replace the second part always with `solid` and set the box sizing accordingly
     const [borderSize, borderStyle, ...borderColorParts] = parts;
     const borderColor = borderColorParts.join(' ');
     return {
@@ -300,27 +299,6 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
         backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
-const transformWidthSizing = ({ value, cfMargin, componentId, }) => {
-    if (!value || !componentId)
-        return;
-    const transformedValue = transformFill(value);
-    if (isContentfulStructureComponent(componentId)) {
-        const marginValues = cfMargin ? cfMargin.split(' ') : [];
-        const rightMargin = marginValues[1] || '0px';
-        const leftMargin = marginValues[3] || '0px';
-        const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
-        /**
-         * We want to check if the calculated value is valid CSS. If this fails,
-         * this means the `transformedValue` is not a calculable value (not a px, rem, or %).
-         * The value may instead be a string such as `min-content` or `max-content`. In
-         * that case we don't want to use calc and instead return the raw value.
-         */
-        if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
-            return calcValue;
-        }
-    }
-    return transformedValue;
-};
 
 const toCSSAttribute = (key) => {
     let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -337,12 +315,12 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }, componentId) => {
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
     return {
         margin: cfMargin,
         padding: cfPadding,
         backgroundColor: cfBackgroundColor,
-        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin, componentId }),
+        width: transformFill(cfWidth || cfImageOptions?.width),
         height: transformFill(cfHeight || cfImageOptions?.height),
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
@@ -2539,11 +2517,10 @@ class DeepReference {
     /**
      * Extracts referent from the path, using EntityStore as source of
      * entities during the resolution path.
-     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
      */
     extractReferent(entityStore) {
         const headEntity = entityStore.getEntityFromLink(this.entityLink);
-        const maybeReferentLink = headEntity.fields[this.field];
+        const maybeReferentLink = headEntity?.fields[this.field];
         if (undefined === maybeReferentLink) {
             // field references nothing (or even field doesn't exist)
             return undefined;
@@ -2632,27 +2609,20 @@ function gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse)
             console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Non-link value in headEntity. Probably broken path '${reference.originalPath}'`);
             continue;
         }
-        if (linkToReferent.sys.linkType === 'Entry') {
-            const referentEntry = entriesResponse.includes?.Entry?.find((entry) => entry.sys.id === linkToReferent.sys.id);
-            if (!referentEntry) {
-                throw new Error(`Logic Error: L2-referent Entry was not found within .includes (${JSON.stringify({
-                    linkToReferent,
-                })})`);
-            }
-            autoFetchedReferentEntries.push(referentEntry);
-        }
-        else if (linkToReferent.sys.linkType === 'Asset') {
-            const referentAsset = entriesResponse.includes?.Asset?.find((entry) => entry.sys.id === linkToReferent.sys.id);
-            if (!referentAsset) {
-                throw new Error(`Logic Error: L2-referent Asset was not found within includes (${JSON.stringify({
-                    linkToReferent,
-                })})`);
-            }
-            autoFetchedReferentAssets.push(referentAsset);
-        }
-        else {
+        const linkType = linkToReferent.sys.linkType;
+        if (!['Entry', 'Asset'].includes(linkType)) {
             console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Unhandled linkType :${JSON.stringify(linkToReferent)}`);
+            continue;
+        }
+        const referentEntity = entriesResponse.includes?.[linkType]?.find((entity) => entity.sys.id === linkToReferent.sys.id);
+        if (!referentEntity) {
+            throw new Error(`Logic Error: L2-referent ${linkType} was not found within .includes (${JSON.stringify({
+                linkToReferent,
+            })})`);
         }
+        linkType === 'Entry'
+            ? autoFetchedReferentEntries.push(referentEntity)
+            : autoFetchedReferentAssets.push(referentEntity);
     } // for (reference of deepReferences)
     return { autoFetchedReferentAssets, autoFetchedReferentEntries };
 }
@@ -2789,10 +2759,10 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
             assetIds.push(dataBinding.sys.id);
         }
     }
-    const [entriesResponse, assetsResponse] = (await Promise.all([
+    const [entriesResponse, assetsResponse] = await Promise.all([
         fetchAllEntries({ client, ids: entryIds, locale }),
         fetchAllAssets({ client, ids: assetIds, locale }),
-    ]));
+    ]);
     const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
     // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
     const allResolvedEntries = [