@contentful/experiences-sdk-react 1.7.1 → 1.7.2-dev-20240613T1745-9217fd8.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _contentful_experiences_core from '@contentful/experiences-core';
 import { EntityStore, VisualEditorMode } from '@contentful/experiences-core';
-export { VisualEditorMode, createExperience, defineBreakpoints, defineDesignTokens, fetchById, fetchBySlug } from '@contentful/experiences-core';
+export { VisualEditorMode, createExperience, defineBreakpoints, defineDesignTokens, detachExperienceStyles, fetchById, fetchBySlug } from '@contentful/experiences-core';
 import { Experience, ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
 export { ComponentDefinition, ExternalSDKMode } from '@contentful/experiences-core/types';
 import { ContentfulClientApi } from 'contentful';
@@ -64,6 +64,4 @@ declare const defineComponents: (componentRegistrations: ComponentRegistration[]
  */
 declare const maintainBasicComponentIdsWithoutPrefix: () => void;
 
-declare const detachExperienceStyles: (experience: Experience) => string | undefined;
-
-export { ExperienceRoot, defineComponents, detachExperienceStyles, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };
+export { ExperienceRoot, defineComponents, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, breakpointsRegistry, designTokensRegistry, buildCfStyles, isStructureWithRelativeHeight, buildStyleTag, checkIsAssemblyNode, resolveHyperlinkPattern, transformBoundContentValue, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, runBreakpointsValidation, validateExperienceBuilderConfig, VisualEditorMode, toCSSAttribute } from '@contentful/experiences-core';
-export { VisualEditorMode, createExperience, defineBreakpoints, defineDesignTokens, fetchById, fetchBySlug } from '@contentful/experiences-core';
+import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, breakpointsRegistry, designTokensRegistry, buildCfStyles, isStructureWithRelativeHeight, buildStyleTag, checkIsAssemblyNode, resolveHyperlinkPattern, transformBoundContentValue, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, runBreakpointsValidation, validateExperienceBuilderConfig, VisualEditorMode } from '@contentful/experiences-core';
+export { VisualEditorMode, createExperience, defineBreakpoints, defineDesignTokens, detachExperienceStyles, fetchById, fetchBySlug } from '@contentful/experiences-core';
 import React, { useState, useLayoutEffect, useMemo, useEffect, useCallback, useRef, Suspense } from 'react';
 import { omit } from 'lodash-es';
 import { INTERNAL_EVENTS, CONTENTFUL_COMPONENTS, OUTGOING_EVENTS, ASSEMBLY_DEFAULT_CATEGORY, EMPTY_CONTAINER_HEIGHT, HYPERLINK_DEFAULT_PATTERN, CF_STYLE_ATTRIBUTES, INCOMING_EVENTS, VISUAL_EDITOR_EVENTS } from '@contentful/experiences-core/constants';
@@ -8,9 +8,8 @@ export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } fro
 import * as Components from '@contentful/experiences-components-react';
 import { ContentfulContainer, Columns, SingleColumn } from '@contentful/experiences-components-react';
 import styleInject from 'style-inject';
-import md5 from 'md5';
 
-const SDK_VERSION = '1.7.1';
+const SDK_VERSION = '1.7.2-dev-20240613T1745-9217fd8.0';
 
 var util;
 (function (util) {
@@ -4768,7 +4767,7 @@ const resolveAssembly = ({ node, entityStore, }) => {
     const deserializedNode = deserializeAssemblyNode({
         node: {
             definitionId: node.definitionId,
-            variables: {},
+            variables: node.variables,
             children: componentFields.componentTree.children,
         },
         componentInstanceVariables: node.variables,
@@ -4810,15 +4809,15 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         return registration;
     }, [isAssembly, node.definitionId]);
     const nodeProps = useMemo(() => {
-        // Don't enrich the assembly wrapper node with props
-        if (!componentRegistration || isAssembly) {
-            return {};
-        }
         const propMap = {
             cfSsrClassName: node.variables.cfSsrClassName
                 ? resolveDesignValue(node.variables.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName')
                 : undefined,
         };
+        // Don't enrich the assembly wrapper node with props
+        if (!componentRegistration || isAssembly) {
+            return propMap;
+        }
         const props = Object.entries(componentRegistration.definition.variables).reduce((acc, [variableName, variableDefinition]) => {
             const variable = node.variables[variableName];
             if (!variable)
@@ -5166,429 +5165,6 @@ const ExperienceRoot = ({ locale, experience, visualEditorMode = VisualEditorMod
     return jsx(PreviewDeliveryRoot, { locale: locale, experience: experience });
 };
 
-const detachExperienceStyles = (experience) => {
-    const experienceTreeRoot = experience.entityStore?.experienceEntryFields
-        ?.componentTree;
-    if (!experienceTreeRoot) {
-        return;
-    }
-    const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);
-    // getting breakpoints from the entry componentTree field
-    /**
-     * breakpoints [
-        {
-          id: 'desktop',
-          query: '*',
-          displayName: 'All Sizes',
-          previewSize: '100%'
-        },
-        {
-          id: 'tablet',
-          query: '<992px',
-          displayName: 'Tablet',
-          previewSize: '820px'
-        },
-        {
-          id: 'mobile',
-          query: '<576px',
-          displayName: 'Mobile',
-          previewSize: '390px'
-        }
-      ]
-     */
-    const { breakpoints } = experienceTreeRoot;
-    // creating the structure which I thought would work best for aggregation
-    const mediaQueriesTemplate = breakpoints.reduce((mediaQueryTemplate, breakpoint) => {
-        return {
-            ...mediaQueryTemplate,
-            [breakpoint.id]: {
-                condition: breakpoint.query,
-                cssByClassName: {},
-            },
-        };
-    }, {});
-    // getting the breakpoint ids
-    const breakpointIds = Object.keys(mediaQueriesTemplate);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, }) => {
-        // traversing the tree
-        const queue = [];
-        queue.push(...componentTree.children);
-        let currentNode = undefined;
-        const registeredComponenIds = Array.from(componentRegistry.values()).map(({ definition }) => definition.id);
-        // for each tree node
-        while (queue.length) {
-            currentNode = queue.shift();
-            if (!currentNode) {
-                break;
-            }
-            const isPatternNode = !registeredComponenIds.includes(currentNode.definitionId);
-            if (isPatternNode) {
-                const patternEntry = experience.entityStore?.entities.find((entry) => entry.sys.id === currentNode.definitionId);
-                if (!patternEntry) {
-                    continue;
-                }
-                // 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
-                iterateOverTreeAndExtractStyles({
-                    // that is why we pass it here to iterate of the pattern tree
-                    componentTree: patternEntry.fields.componentTree,
-                    // but we pass the data source of the experience entry cause that's where the binding is stored
-                    dataSource,
-                    // unbound values of a pattern store the default values of pattern variables
-                    unboundValues: patternEntry.fields.unboundValues,
-                    // this is where we can map the pattern variable to it's default value
-                    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,
-                });
-                continue;
-            }
-            /** Variables value is stored in `valuesByBreakpoint` object
-           * {
-              cfVerticalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfHorizontalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfBackgroundColor: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'rgba(246, 246, 246, 1)' }
-              },
-              cfWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'fill' } },
-              cfHeight: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'fit-content' }
-              },
-              cfMaxWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'none' } },
-              cfFlexDirection: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'column' } },
-              cfFlexWrap: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'nowrap' } },
-              cfBorder: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: '0px solid rgba(0, 0, 0, 0)' }
-              },
-              cfBorderRadius: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px' } },
-              cfGap: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px 0px' } },
-              cfHyperlink: { type: 'UnboundValue', key: 'VNc49Qyepd6IzN7rmKUyS' },
-              cfOpenInNewTab: { type: 'UnboundValue', key: 'ZA5YqB2fmREQ4pTKqY5hX' },
-              cfBackgroundImageUrl: { type: 'UnboundValue', key: 'FeskH0WbYD5_RQVXX-1T8' },
-              cfBackgroundImageOptions: { type: 'DesignValue', valuesByBreakpoint: { desktop: [Object] } }
-            }
-           */
-            // so first, I convert it into a map to help me make it easier to access the values
-            const propsByBreakpoint = indexByBreakpoint({
-                variables: currentNode.variables,
-                breakpointIds,
-                unboundValues: unboundValues,
-                dataSource: dataSource,
-                componentSettings,
-                componentVariablesOverwrites,
-                getBoundEntityById: (id) => {
-                    return experience.entityStore?.entities.find((entity) => entity.sys.id === id);
-                },
-            });
-            /**
-           * propsByBreakpoint {
-              desktop: {
-                cfVerticalAlignment: 'center',
-                cfHorizontalAlignment: 'center',
-                cfMargin: '0 0 0 0',
-                cfPadding: '0 0 0 0',
-                cfBackgroundColor: 'rgba(246, 246, 246, 1)',
-                cfWidth: 'fill',
-                cfHeight: 'fit-content',
-                cfMaxWidth: 'none',
-                cfFlexDirection: 'column',
-                cfFlexWrap: 'nowrap',
-                cfBorder: '0px solid rgba(0, 0, 0, 0)',
-                cfBorderRadius: '0px',
-                cfGap: '0px 0px',
-                cfBackgroundImageOptions: { scaling: 'fill', alignment: 'left top', targetSize: '2000px' }
-              },
-              tablet: {},
-              mobile: {}
-            }
-           */
-            const currentNodeClassNames = [];
-            // then for each breakpoint
-            for (const breakpointId of breakpointIds) {
-                const propsByBreakpointWithResolvedDesignTokens = Object.entries(propsByBreakpoint[breakpointId]).reduce((acc, [variableName, variableValue]) => {
-                    return {
-                        ...acc,
-                        [variableName]: maybePopulateDesignTokenValue(variableName, variableValue, mapOfDesignVariableKeys),
-                    };
-                }, {});
-                // We convert cryptic prop keys to css variables
-                // Eg: cfMargin to margin
-                const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);
-                const stylesForBreakpointWithoutUndefined = Object.fromEntries(Object.entries(stylesForBreakpoint)
-                    .filter(([, value]) => value !== undefined)
-                    .map(([key, value]) => [toCSSAttribute(key), value]));
-                /**
-               * stylesForBreakpoint {
-                  margin: '0 0 0 0',
-                  padding: '0 0 0 0',
-                  'background-color': 'rgba(246, 246, 246, 1)',
-                  width: '100%',
-                  height: 'fit-content',
-                  'max-width': 'none',
-                  border: '0px solid rgba(0, 0, 0, 0)',
-                  'border-radius': '0px',
-                  gap: '0px 0px',
-                  'align-items': 'center',
-                  'justify-content': 'safe center',
-                  'flex-direction': 'column',
-                  'flex-wrap': 'nowrap',
-                  'font-style': 'normal',
-                  'text-decoration': 'none',
-                  'box-sizing': 'border-box'
-                }
-               */
-                // I create a hash of the object above because that would ensure hash stability
-                const styleHash = md5(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
-                // as cfSsrClassName prop
-                // making sure to avoid the duplicates in case styles for > 1 breakpoints are the same
-                if (!currentNodeClassNames.includes(className)) {
-                    currentNodeClassNames.push(className);
-                }
-                // if there is already the similar hash - no need to over-write it
-                if (mediaQueriesTemplate[breakpointId].cssByClassName[className]) {
-                    continue;
-                }
-                // otherwise, save it to the stylesheet
-                mediaQueriesTemplate[breakpointId].cssByClassName[className] = toCSSString(stylesForBreakpointWithoutUndefined);
-            }
-            // all generated classNames are saved in the tree node
-            // to be handled by the sdk later
-            // each node will get N classNames, where N is the number of breakpoints
-            // browsers process classNames in the order they are defined
-            // meaning that in case of className1 className2 className3
-            // className3 will win over className2 and className1
-            // making sure that we respect the order of breakpoints from
-            // we can achieve "desktop first" or "mobile first" approach to style over-writes
-            currentNode.variables.cfSsrClassName = {
-                type: 'DesignValue',
-                valuesByBreakpoint: {
-                    [breakpointIds[0]]: currentNodeClassNames.join(' '),
-                },
-            };
-            queue.push(...currentNode.children);
-        }
-    };
-    iterateOverTreeAndExtractStyles({
-        componentTree: experienceTreeRoot,
-        dataSource: experience.entityStore?.dataSource ?? {},
-        unboundValues: experience.entityStore?.unboundValues ?? {},
-        componentSettings: experience.entityStore?.experienceEntryFields?.componentSettings,
-    });
-    // once the whole tree was traversed, for each breakpoint, I aggregate the styles
-    // for each generated className into one css string
-    const styleSheet = Object.entries(mediaQueriesTemplate).reduce((acc, [, breakpointPayload]) => {
-        return `${acc}${toMediaQuery(breakpointPayload)}`;
-    }, '');
-    return styleSheet;
-};
-const isCfStyleAttribute = (variableName) => {
-    return CF_STYLE_ATTRIBUTES.includes(variableName);
-};
-const maybePopulateDesignTokenValue = (variableName, variableValue, mapOfDesignVariableKeys) => {
-    // TODO: refactor to reuse fn from core package
-    if (typeof variableValue !== 'string') {
-        return variableValue;
-    }
-    if (!isCfStyleAttribute(variableName)) {
-        return variableValue;
-    }
-    const resolveSimpleDesignToken = (variableName, variableValue) => {
-        const nonTemplateDesignTokenValue = variableValue.replace(templateStringRegex, '$1');
-        const tokenValue = mapOfDesignVariableKeys[nonTemplateDesignTokenValue];
-        if (!tokenValue) {
-            if (builtInStyles[variableName]) {
-                return builtInStyles[variableName].defaultValue;
-            }
-            if (optionalBuiltInStyles[variableName]) {
-                return optionalBuiltInStyles[variableName].defaultValue;
-            }
-            return '0px';
-        }
-        if (variableName === 'cfBorder' || variableName.startsWith('cfBorder_')) {
-            const { width, style, color } = tokenValue;
-            return `${width} ${style} ${color}`;
-        }
-        return tokenValue;
-    };
-    const templateStringRegex = /\${(.+?)}/g;
-    const parts = variableValue.split(' ');
-    let resolvedValue = '';
-    for (const part of parts) {
-        const tokenValue = templateStringRegex.test(part)
-            ? resolveSimpleDesignToken(variableName, part)
-            : part;
-        resolvedValue += `${tokenValue} `;
-    }
-    // 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: {} }, }) => {
-    if (variableData.type === 'UnboundValue') {
-        const uuid = variableData.key;
-        return unboundValues[uuid]?.value;
-    }
-    if (variableData.type === 'ComponentValue') {
-        const variableDefinitionKey = variableData.key;
-        const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
-        // @ts-expect-error TODO: fix the types as it thinks taht `defaultValue` is of type string
-        const defaultValueKey = variableDefinition.defaultValue?.key;
-        const defaultValue = unboundValues[defaultValueKey].value;
-        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
-        if (!userSetValue) {
-            return defaultValue;
-        }
-        // at this point userSetValue will either be type of 'DesignValue' or 'BoundValue'
-        // so we recursively run resolution again to resolve it
-        const resolvedValue = resolveBackgroundImageBinding({
-            variableData: userSetValue,
-            getBoundEntityById,
-            dataSource,
-            unboundValues,
-            componentVariablesOverwrites,
-            componentSettings,
-        });
-        return resolvedValue || defaultValue;
-    }
-    if (variableData.type === 'BoundValue') {
-        // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
-        const [, uuid] = variableData.path.split('/');
-        const binding = dataSource[uuid];
-        const boundEntity = getBoundEntityById(binding.sys.id);
-        if (!boundEntity) {
-            return;
-        }
-        if (boundEntity.sys.type === 'Asset') {
-            return boundEntity.fields.file?.url;
-        }
-        else {
-            // '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale'
-            // becomes
-            // '/fields/assetReference/~locale/fields/file/~locale'
-            const pathWithoutUUID = variableData.path.split(uuid)[1];
-            // '/fields/assetReference/~locale/fields/file/~locale'
-            // becomes
-            // '/fields/assetReference/'
-            const pathToReferencedAsset = pathWithoutUUID.split('~locale')[0];
-            // '/fields/assetReference/'
-            // becomes
-            // '[fields, assetReference]'
-            const [, fieldName] = pathToReferencedAsset.substring(1).split('/') ?? undefined;
-            const referenceToAsset = boundEntity.fields[fieldName];
-            if (!referenceToAsset) {
-                return;
-            }
-            if (referenceToAsset.sys?.linkType === 'Asset') {
-                const referencedAsset = getBoundEntityById(referenceToAsset.sys.id);
-                if (!referencedAsset) {
-                    return;
-                }
-                return referencedAsset.fields.file?.url;
-            }
-        }
-    }
-};
-const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unboundValues = {}, dataSource = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
-    const variableValuesByBreakpoints = breakpointIds.reduce((acc, breakpointId) => {
-        return {
-            ...acc,
-            [breakpointId]: {},
-        };
-    }, {});
-    const defaultBreakpoint = breakpointIds[0];
-    for (const [variableName, variableData] of Object.entries(variables)) {
-        // handling the special case - cfBackgroundImageUrl variable, which can be bound or unbound
-        // so, we need to resolve it here and pass it down as a css property to be convereted into the CSS
-        // I used .startsWith() cause it can be part of a pattern node
-        if (variableName === 'cfBackgroundImageUrl' ||
-            variableName.startsWith('cfBackgroundImageUrl_')) {
-            const imageUrl = resolveBackgroundImageBinding({
-                variableData,
-                getBoundEntityById,
-                unboundValues,
-                dataSource,
-                componentSettings,
-                componentVariablesOverwrites,
-            });
-            if (imageUrl) {
-                variableValuesByBreakpoints[defaultBreakpoint][variableName] = imageUrl;
-            }
-            continue;
-        }
-        if (variableData.type !== 'DesignValue') {
-            continue;
-        }
-        for (const [breakpointId, variableValue] of Object.entries(variableData.valuesByBreakpoint)) {
-            if (!variableValue) {
-                continue;
-            }
-            variableValuesByBreakpoints[breakpointId] = {
-                ...variableValuesByBreakpoints[breakpointId],
-                [variableName]: variableValue,
-            };
-        }
-    }
-    return variableValuesByBreakpoints;
-};
-/**
- * Flattens the object from
- * {
- *   color: {
- *      [key]: [value]
- *   }
- * }
- *
- * to
- *
- * {
- *  'color.key': [value]
- * }
- */
-const flattenDesignTokenRegistry = (designTokenRegistry) => {
-    return Object.entries(designTokenRegistry).reduce((acc, [categoryName, tokenCategory]) => {
-        const tokensWithCategory = Object.entries(tokenCategory).reduce((acc, [tokenName, tokenValue]) => {
-            return {
-                ...acc,
-                [`${categoryName}.${tokenName}`]: tokenValue,
-            };
-        }, {});
-        return {
-            ...acc,
-            ...tokensWithCategory,
-        };
-    }, {});
-};
-// Replaces camelCase with kebab-case
-// converts the <key, value> object into a css string
-const toCSSString = (breakpointStyles) => {
-    return Object.entries(breakpointStyles)
-        .map(([key, value]) => `${key}:${value};`)
-        .join('');
-};
-const toMediaQuery = (breakpointPayload) => {
-    const mediaQueryStyles = Object.entries(breakpointPayload.cssByClassName).reduce((acc, [className, css]) => {
-        return `${acc}.${className}{${css}}`;
-    }, ``);
-    if (breakpointPayload.condition === '*') {
-        return mediaQueryStyles;
-    }
-    const [evaluation, pixelValue] = [
-        breakpointPayload.condition[0],
-        breakpointPayload.condition.substring(1),
-    ];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
-};
-
 // Simple state store to store a few things that are needed across the SDK
 if (typeof window !== 'undefined') {
     window.__EB__ = {
@@ -5596,5 +5172,5 @@ if (typeof window !== 'undefined') {
     };
 }
 
-export { ExperienceRoot, defineComponents, detachExperienceStyles, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };
+export { ExperienceRoot, defineComponents, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };
 //# sourceMappingURL=index.js.map