@contentful/experiences-core 3.6.2 → 3.7.0-beta.0

package/dist/index.d.ts

@@ -16,11 +16,12 @@ export { transformVisibility } from './utils/styleUtils/styleTransformers.js';
 export { transformBoundContentValue } from './utils/transformers/transformBoundContentValue.js';
 export { treeMap, treeVisit } from './utils/treeTraversal.js';
 export { isArrayOfLinks, isAsset, isEntry, isExperienceEntry, isPatternEntry } from './utils/typeguards.js';
-export { checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getTargetValueInPixels, parseCSSValue } from './utils/utils.js';
+export { checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, createAssemblyDefinition, generateRandomId, getDataFromTree, getTargetValueInPixels, parseCSSValue } from './utils/utils.js';
 export { doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderConfig } from './utils/validations.js';
 export { extractLeafLinksReferencedFromExperience } from './utils/schema/experienceSchema.js';
 export { FnShouldFollowReferencesOfEntryField, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, referencesOf, uniqueById } from './utils/schema/references.js';
 export { splitDirectAndSlotChildren } from './utils/splitDirectAndSlotChildren.js';
+export { PrebindingData, extractPrebindingDataByPatternId, flattenNestedPatterns, generateDefaultDataSourceForPrebindingDefinition, getTargetPatternMappingsForParameter } from './utils/extractPrebindingData.js';
 export { builtInStyles, columnsBuiltInStyles, containerBuiltInStyles, dividerBuiltInStyles, optionalBuiltInStyles, sectionBuiltInStyles, singleColumnBuiltInStyles } from './definitions/styles.js';
 export { EditorModeEntityStore } from './entity/EditorModeEntityStore.js';
 export { EntityStore } from './entity/EntityStore.js';
@@ -36,6 +37,6 @@ export { createExperience } from './fetchers/createExperience.js';
 export { fetchReferencedEntities } from './fetchers/fetchReferencedEntities.js';
 export { fetchExperienceEntry } from './fetchers/fetchExperienceEntry.js';
 export { defineDesignTokens, designTokensRegistry, getDesignTokenRegistration, resetDesignTokenRegistry } from './registries/designTokenRegistry.js';
-export { breakpointsRegistry, defineBreakpoints, getBreakpointRegistration, resetBreakpointsRegistry, runBreakpointsValidation } from './registries/breakpointsRegistry.js';
+export { breakpointsRegistry, defineBreakpoints, runBreakpointsValidation } from './registries/breakpointsRegistry.js';
 export { defineSdkOptions, getSdkOptions, sdkOptionsRegistry } from './registries/sdkOptionsRegistry.js';
-export { DeepReference, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree } from './deep-binding/DeepReference.js';
+export { DeepReference, gatherDeepPrebindingReferencesFromExperienceEntry, gatherDeepPrebindingReferencesFromPatternEntry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree } from './deep-binding/DeepReference.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { z, ZodIssueCode } from 'zod';
-import { cloneDeep, omit, isArray, uniqBy } from 'lodash-es';
+import cloneDeep from 'lodash.clonedeep';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { create } from 'zustand';
@@ -26,7 +26,9 @@ const INCOMING_EVENTS = {
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     HoverComponent: 'hoverComponent',
     UpdatedEntity: 'updatedEntity',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesAdded: 'assembliesAdded',
+    /** @deprecated not needed after `patternResolution` was introduced. Will be removed in the next major version. */
     AssembliesRegistered: 'assembliesRegistered',
     /** @deprecated will be removed when dropping backward compatibility for old DND */
     MouseMove: 'mouseMove',
@@ -998,7 +1000,7 @@ const BreakpointSchema = z
     id: propertyKeySchema,
     // Can be replace with z.templateLiteral when upgrading to zod v4
     query: z.string().refine((s) => BREAKPOINT_QUERY_REGEX.test(s)),
-    previewSize: z.string(),
+    previewSize: z.string().optional(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
@@ -1052,6 +1054,25 @@ z.object({
     usedComponents: localeWrapper(UsedComponentsSchema).optional(),
 });
 
+function treeVisit$1(initialNode, onNode) {
+    const _treeVisit = (currentNode) => {
+        const children = [...currentNode.children];
+        onNode(currentNode);
+        for (const child of children) {
+            _treeVisit(child);
+        }
+    };
+    if (Array.isArray(initialNode)) {
+        for (const node of initialNode) {
+            _treeVisit(node);
+        }
+    }
+    else {
+        _treeVisit(initialNode);
+    }
+}
+
+const MAX_ALLOWED_PATHS = 200;
 const THUMBNAIL_IDS = [
     'columns',
     'columnsPlusRight',
@@ -1082,7 +1103,17 @@ const THUMBNAIL_IDS = [
 const VariableMappingSchema = z.object({
     parameterId: propertyKeySchema,
     type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+    pathsByContentType: z
+        .record(z.string(), z.object({ path: z.string() }))
+        .superRefine((paths, ctx) => {
+        const variableId = ctx.path[ctx.path.length - 2];
+        if (Object.keys(paths).length > MAX_ALLOWED_PATHS) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Too many paths defined for variable mapping with id "${variableId}", maximum allowed is ${MAX_ALLOWED_PATHS}`,
+            });
+        }
+    }),
 });
 const PassToNodeSchema = z
     .object({
@@ -1106,7 +1137,10 @@ const ParameterDefinitionSchema = z.object({
     })
         .optional(),
     contentTypes: z.array(z.string()).min(1),
-    passToNodes: z.array(PassToNodeSchema).optional(),
+    passToNodes: z
+        .array(PassToNodeSchema)
+        .max(1, 'At most one "passToNodes" element is allowed per parameter definition.')
+        .optional(), // we might change this to be empty array for native parameter definitions, that's why we don't use .length(1)
 });
 const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
 const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
@@ -1127,14 +1161,108 @@ const ComponentSettingsSchema = z
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
     prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
 })
-    .strict();
-z.object({
+    .strict()
+    .superRefine((componentSettings, ctx) => {
+    const { variableDefinitions, prebindingDefinitions } = componentSettings;
+    if (!prebindingDefinitions || prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions, variableMappings, allowedVariableOverrides } = prebindingDefinitions[0];
+    validateAtMostOneNativeParameterDefinition(parameterDefinitions, ctx);
+    validateNoOverlapBetweenMappingAndOverrides(variableMappings, allowedVariableOverrides, ctx);
+    validateMappingsAgainstVariableDefinitions(variableMappings, allowedVariableOverrides, variableDefinitions, ctx);
+    validateMappingsAgainstParameterDefinitions(variableMappings, parameterDefinitions, ctx);
+});
+z
+    .object({
     componentTree: localeWrapper(ComponentTreeSchema),
     dataSource: localeWrapper(DataSourceSchema),
     unboundValues: localeWrapper(UnboundValuesSchema),
     usedComponents: localeWrapper(UsedComponentsSchema).optional(),
     componentSettings: localeWrapper(ComponentSettingsSchema),
+})
+    .superRefine((patternFields, ctx) => {
+    const { componentTree, componentSettings } = patternFields;
+    // values at this point are wrapped under locale code
+    const nonLocalisedComponentTree = Object.values(componentTree)[0];
+    const nonLocalisedComponentSettings = Object.values(componentSettings)[0];
+    if (!nonLocalisedComponentSettings || !nonLocalisedComponentTree) {
+        return;
+    }
+    validatePassToNodes(nonLocalisedComponentTree.children || [], nonLocalisedComponentSettings || {}, ctx);
 });
+const validateAtMostOneNativeParameterDefinition = (parameterDefinitions, ctx) => {
+    const nativeParamDefinitions = Object.values(parameterDefinitions).filter((paramDefinition) => !(paramDefinition.passToNodes && paramDefinition.passToNodes.length > 0));
+    if (nativeParamDefinitions.length > 1) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Only one native parameter definition (parameter definition without passToNodes) is allowed per prebinding definition.`,
+        });
+    }
+};
+const validateNoOverlapBetweenMappingAndOverrides = (variableMappings, allowedVariableOverrides, ctx) => {
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const overridesSet = new Set(allowedVariableOverrides || []);
+    const overlap = variableMappingKeys.filter((key) => overridesSet.has(key));
+    if (overlap.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Found both variable mapping and allowed override for the following keys: ${overlap.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstVariableDefinitions = (variableMappings, allowedVariableOverrides, variableDefinitions, ctx) => {
+    const nonDesignVariableDefinitionKeys = Object.entries(variableDefinitions)
+        .filter(([_, def]) => def.group !== 'style')
+        .map(([key]) => key);
+    const variableMappingKeys = Object.keys(variableMappings || {});
+    const allKeys = [...variableMappingKeys, ...(allowedVariableOverrides || [])];
+    const invalidMappings = allKeys.filter((key) => !nonDesignVariableDefinitionKeys.includes(key));
+    if (invalidMappings.length > 0) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following variable mappings or overrides are missing from the variable definitions: ${invalidMappings.map((key) => `"${key}"`).join(', ')}.`,
+        });
+    }
+};
+const validateMappingsAgainstParameterDefinitions = (variableMappings, parameterDefinitions, ctx) => {
+    const parameterDefinitionKeys = Object.keys(parameterDefinitions || {});
+    for (const [mappingKey, mappingValue] of Object.entries(variableMappings || {})) {
+        if (!parameterDefinitionKeys.includes(mappingValue.parameterId)) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `The variable mapping with id "${mappingKey}" references a non-existing parameterId "${mappingValue.parameterId}".`,
+            });
+        }
+    }
+};
+const validatePassToNodes = (rootChildren, componentSettings, ctx) => {
+    if (!componentSettings.prebindingDefinitions ||
+        componentSettings.prebindingDefinitions.length === 0) {
+        return;
+    }
+    const { parameterDefinitions } = componentSettings.prebindingDefinitions[0];
+    let nodeIds = new Set();
+    for (const paramDef of Object.values(parameterDefinitions || {})) {
+        paramDef.passToNodes?.forEach((n) => nodeIds.add(n.nodeId));
+    }
+    treeVisit$1(rootChildren, (node) => {
+        if (!node.id)
+            return;
+        if (nodeIds.has(node.id)) {
+            nodeIds.delete(node.id);
+        }
+    });
+    if (nodeIds.size > 0) {
+        const stringifiedNodeIds = Array.from(nodeIds)
+            .map((id) => `"${id}"`)
+            .join(', ');
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The following node IDs referenced in passToNodes are not present in the component tree: ${stringifiedNodeIds}.`,
+        });
+    }
+};
 
 z
     .object({
@@ -1393,11 +1521,42 @@ const validateBreakpointsDefinition = (breakpoints) => {
     return { success: true };
 };
 
-let breakpointsRegistry = [];
+const breakpointsRegistry = [];
 /**
- * Register custom breakpoints
- * @param breakpoints - [{[key:string]: string}]
- * @returns void
+ * Define custom breakpoints that should be used for all your experiences.
+ * A breakpoint consists of:
+ * - id: a unique identifier for this breakpoint
+ * - query: a media query string that defines when this breakpoint is active
+ * - previewSize: an optional fixed preview size to be used in the Studio editor when selecting this breakpoint
+ * - displayName: the name to be displayed in the Studio editor for this breakpoint
+ * - displayIcon: an optional icon to be displayed in the Studio editor for this breakpoint
+ *
+ * The first breakpoint must use a wildcard query (`*`) to match all sizes.
+ *
+ * Every subsequent breakpoint inherits the designs of the previous ones by default.
+ *
+ * The order of breakpoints must be either:
+ * - desktop first: from largest to smallest, using `<` operators
+ * - mobile first: from smallest to largest, using `>` operators
+ *
+ * @note changing breakpoints after you have created experiences may break those experiences
+ * @example
+ * defineBreakpoints([{
+ *    id: 'desktop',
+ *    query: '*',
+ *    displayName: 'Desktop',
+ *    displayIcon: 'desktop',
+ * }, {
+ *    id: 'tablet',
+ *    query: '<992px',
+ *    displayName: 'Tablet',
+ *    displayIcon: 'tablet',
+ * }, {
+ *    id: 'mobile',
+ *    query: '<576px',
+ *    displayName: 'Mobile',
+ *    displayIcon: 'mobile',
+ * }]);
  */
 const defineBreakpoints = (breakpoints) => {
     Object.assign(breakpointsRegistry, breakpoints);
@@ -1410,12 +1569,6 @@ const runBreakpointsValidation = () => {
         throw new Error(`Invalid breakpoints definition. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
     }
 };
-// Used in the tests to get a breakpoint registration
-const getBreakpointRegistration = (id) => breakpointsRegistry.find((breakpoint) => breakpoint.id === id);
-// Used in the tests to reset the registry
-const resetBreakpointsRegistry = () => {
-    breakpointsRegistry = [];
-};
 
 const sdkOptionsRegistry = {};
 /**
@@ -2022,7 +2175,9 @@ const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.inclu
 // cfWrapColumns & cfWrapColumnsCount are no real style attributes as they are handled on the editor side
 const propsToRemove = ['cfSsrClassName', 'cfWrapColumns', 'cfWrapColumnsCount'];
 const sanitizeNodeProps = (nodeProps) => {
-    return omit(nodeProps, stylesToRemove, propsToRemove);
+    const keysToRemove = [...stylesToRemove, ...propsToRemove];
+    const sanitizedProps = Object.fromEntries(Object.entries(nodeProps).filter(([key]) => !keysToRemove.includes(key)));
+    return sanitizedProps;
 };
 
 /** Turn the visibility value into a style object that can be used for inline styles in React */
@@ -3153,7 +3308,7 @@ function getArrayValue(entryOrAsset, path, entityStore) {
     }
     const fieldName = path.split('/').slice(2, -1);
     const arrayValue = get(entryOrAsset, fieldName);
-    if (!isArray(arrayValue)) {
+    if (!Array.isArray(arrayValue)) {
         debug.warn(`[experiences-core::getArrayValue] A field '${fieldName}' of an entity was bound to an Array variable. Expected value of that field to be an array, but got: ${JSON.stringify(arrayValue)}`, { entity: entryOrAsset });
         return;
     }
@@ -3310,6 +3465,19 @@ function getTargetValueInPixels(targetWidthObject) {
             return targetWidthObject.value;
     }
 }
+/**
+ * Creates a component definition for an assembly. As all assemblies use the same definition in the SDK,
+ * all should be registered via this function.
+ */
+const createAssemblyDefinition = (definitionId) => {
+    return {
+        id: definitionId,
+        name: 'Component',
+        variables: {},
+        children: true,
+        category: ASSEMBLY_DEFAULT_CATEGORY,
+    };
+};
 
 class ParseError extends Error {
     constructor(message) {
@@ -3515,6 +3683,118 @@ const splitDirectAndSlotChildren = (allChildNodes, componentDefinition) => {
     return { slotNodesMap, directChildNodes };
 };
 
+const flattenNestedPatterns = (fetchedPatterns) => {
+    const patternsById = {};
+    const queue = [...fetchedPatterns];
+    while (queue.length) {
+        const pattern = queue.shift();
+        if (!pattern) {
+            continue;
+        }
+        if (patternsById[pattern.sys.id]) {
+            continue;
+        }
+        patternsById[pattern.sys.id] = pattern;
+        if (!Array.isArray(pattern.fields.usedComponents) || !pattern.fields.usedComponents.length) {
+            continue;
+        }
+        for (const nestedPattern of pattern.fields.usedComponents) {
+            if (!isLink(nestedPattern)) {
+                queue.push(nestedPattern);
+            }
+        }
+    }
+    return Object.values(patternsById);
+};
+/**
+ * Given a list of patterns, extract the prebinding data into a more digestable format indexed by the pattern entry id
+ * @param patterns a list of pattern entries
+ * @returns a map of pattern entry ids to their prebinding data
+ */
+const extractPrebindingDataByPatternId = (patterns) => {
+    const prebindingDataByPatternId = {};
+    for (const pattern of patterns) {
+        const patternId = pattern.sys.id;
+        const [prebindingDefinition] = pattern.fields.componentSettings?.prebindingDefinitions ?? [];
+        if (!prebindingDefinition)
+            continue;
+        const [nativeParameterId] = Object.entries(prebindingDefinition.parameterDefinitions ?? {}).find(([, value]) => value.passToNodes === undefined) ?? [];
+        const prebindingData = {
+            prebindingDefinitionId: prebindingDefinition.id,
+            parameterIds: Object.keys(prebindingDefinition.parameterDefinitions),
+            nativeParameterId,
+            parameterDefinitions: prebindingDefinition.parameterDefinitions,
+            variableMappings: prebindingDefinition.variableMappings,
+        };
+        prebindingDataByPatternId[patternId] = prebindingData;
+    }
+    return prebindingDataByPatternId;
+};
+const generateDefaultDataSourceForPrebindingDefinition = (prebindingDefinitions = []) => {
+    if (!prebindingDefinitions ||
+        !Array.isArray(prebindingDefinitions) ||
+        !prebindingDefinitions.length) {
+        return { dataSource: {}, parameters: {} };
+    }
+    const prebindingDefinition = prebindingDefinitions[0];
+    const dataSource = {};
+    const parameters = {};
+    for (const [parameterId, parameterDefinition] of Object.entries(prebindingDefinition.parameterDefinitions ?? {})) {
+        if (parameterDefinition.defaultSource && isLink(parameterDefinition.defaultSource.link)) {
+            const dataSourceKey = generateRandomId(7);
+            dataSource[dataSourceKey] = parameterDefinition.defaultSource.link;
+            parameters[parameterId] = {
+                type: 'BoundValue',
+                path: `/${dataSourceKey}`,
+            };
+        }
+    }
+    return {
+        dataSource,
+        parameters,
+    };
+};
+function getTargetPatternMappingsForParameter({ fetchedPatterns, prebindingDataByPatternId, patternNodeDefinitionId, parameterId, }) {
+    const patternPrebindingData = prebindingDataByPatternId[patternNodeDefinitionId];
+    if (!patternPrebindingData)
+        return undefined;
+    if (patternPrebindingData.parameterIds.includes(parameterId)) {
+        if (patternPrebindingData.nativeParameterId === parameterId) {
+            if (!patternPrebindingData.variableMappings)
+                return undefined;
+            return Object.fromEntries(Object.entries(patternPrebindingData.variableMappings).filter(([, mapping]) => mapping.parameterId === parameterId));
+        }
+        else {
+            const parameterDefinition = patternPrebindingData.parameterDefinitions[parameterId];
+            if (!parameterDefinition || !parameterDefinition.passToNodes)
+                return undefined;
+            const patternEntry = fetchedPatterns.find((entry) => entry.sys.id === patternNodeDefinitionId);
+            if (!patternEntry)
+                return undefined;
+            let nestedPatternNode;
+            treeVisit({
+                definitionId: 'root',
+                parameters: {},
+                children: patternEntry.fields.componentTree.children,
+            }, (node) => {
+                if (node.id === parameterDefinition.passToNodes?.[0].nodeId) {
+                    nestedPatternNode = node;
+                }
+                return undefined;
+            });
+            if (!nestedPatternNode) {
+                return undefined;
+            }
+            return getTargetPatternMappingsForParameter({
+                fetchedPatterns,
+                prebindingDataByPatternId,
+                patternNodeDefinitionId: nestedPatternNode.definitionId,
+                parameterId: parameterDefinition.passToNodes?.[0].parameterId,
+            });
+        }
+    }
+}
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -4341,7 +4621,7 @@ function gatherDeepReferencesFromExperienceEntry(experienceEntry) {
     }, (node) => {
         if (!node.variables)
             return;
-        for (const [, variableMapping] of Object.entries(node.variables)) {
+        for (const variableMapping of Object.values(node.variables)) {
             if (variableMapping.type !== 'BoundValue')
                 continue;
             if (!isDeepPath(variableMapping.path))
@@ -4354,6 +4634,99 @@ function gatherDeepReferencesFromExperienceEntry(experienceEntry) {
     });
     return deepReferences;
 }
+function gatherDeepPrebindingReferencesFromExperienceEntry({ experienceEntry, fetchedPatterns, prebindingDataByPatternId, fetchedLevel1Entries, }) {
+    const deepPrebindingReferences = [];
+    const dataSource = experienceEntry.fields.dataSource;
+    const { children } = experienceEntry.fields.componentTree;
+    treeVisit({
+        definitionId: 'root',
+        parameters: {},
+        children,
+    }, (node) => {
+        if (!node.parameters)
+            return;
+        for (const [parameterId, parameterValue] of Object.entries(node.parameters)) {
+            const dataSourceKey = parameterValue.path.split('/')[1];
+            const headEntryLink = dataSource[dataSourceKey];
+            if (!headEntryLink)
+                continue;
+            if (headEntryLink.sys.linkType !== 'Entry')
+                continue;
+            const headEntry = fetchedLevel1Entries.find((entry) => entry.sys.id === headEntryLink.sys.id);
+            if (!headEntry)
+                continue;
+            const headEntryContentTypeId = headEntry.sys.contentType.sys.id;
+            // if experience, we don't have any hoisted data on the given experienceEntry
+            // and we have to lookup the pattern instead
+            const variableMappings = getTargetPatternMappingsForParameter({
+                fetchedPatterns,
+                prebindingDataByPatternId,
+                patternNodeDefinitionId: node.definitionId,
+                parameterId,
+            });
+            if (!variableMappings)
+                continue;
+            for (const mappingData of Object.values(variableMappings)) {
+                const targetMapping = mappingData.pathsByContentType[headEntryContentTypeId];
+                if (!targetMapping)
+                    continue;
+                // mapping doesn't start with /uuid, but instead starts with /fields
+                // so we add /uuid to make it match the binding path format
+                const path = `/${dataSourceKey}${targetMapping.path}`;
+                if (!isDeepPath(path))
+                    continue;
+                deepPrebindingReferences.push(DeepReference.from({
+                    path,
+                    dataSource,
+                }));
+            }
+        }
+    });
+    return deepPrebindingReferences;
+}
+function gatherDeepPrebindingReferencesFromPatternEntry({ patternEntry, fetchedPatterns, prebindingDataByPatternId, fetchedLevel1Entries, }) {
+    const deepPrebindingReferences = [];
+    // patterns can't have parameters in their CDA/CMA JSON, so we can generate random ids here
+    const { dataSource, parameters } = generateDefaultDataSourceForPrebindingDefinition(patternEntry.fields.componentSettings?.prebindingDefinitions);
+    for (const [parameterId, parameterValue] of Object.entries(parameters)) {
+        const dataSourceKey = parameterValue.path.split('/')[1];
+        const headEntryLink = dataSource[dataSourceKey];
+        if (!headEntryLink)
+            continue;
+        if (headEntryLink.sys.linkType !== 'Entry')
+            continue;
+        const headEntry = fetchedLevel1Entries.find((entry) => entry.sys.id === headEntryLink.sys.id);
+        if (!headEntry)
+            continue;
+        const headEntryContentTypeId = headEntry.sys.contentType.sys.id;
+        const variableMappings = getTargetPatternMappingsForParameter({
+            fetchedPatterns,
+            prebindingDataByPatternId,
+            patternNodeDefinitionId: patternEntry.sys.id,
+            parameterId,
+        });
+        if (!variableMappings)
+            continue;
+        for (const mappingData of Object.values(variableMappings)) {
+            const targetMapping = mappingData.pathsByContentType[headEntryContentTypeId];
+            if (!targetMapping)
+                continue;
+            // mapping doesn't start with /uuid, but instead starts with /fields
+            // so we add /uuid to make it match the binding path format
+            const path = `/${dataSourceKey}${targetMapping.path}`;
+            if (!isDeepPath(path))
+                continue;
+            deepPrebindingReferences.push(DeepReference.from({
+                path,
+                dataSource,
+            }));
+        }
+    }
+    return deepPrebindingReferences;
+}
+/**
+ * used in editor mode. for delivery mode see `gatherDeepReferencesFromExperienceEntry`
+ */
 function gatherDeepReferencesFromTree(startingNode, dataSource, getEntityFromLink) {
     const deepReferences = [];
     treeVisit(startingNode, (node) => {
@@ -4475,8 +4848,8 @@ const fetchAllEntries = async ({ client, ids, locale, skip = 0, limit = 100, res
                 responseIncludes,
             });
         }
-        const dedupedEntries = uniqBy(responseIncludes?.Entry, (entry) => entry.sys.id);
-        const dedupedAssets = uniqBy(responseIncludes?.Asset, (asset) => asset.sys.id);
+        const dedupedEntries = uniqueById(responseIncludes?.Entry);
+        const dedupedAssets = uniqueById(responseIncludes?.Asset);
         return {
             items: responseItems,
             includes: {
@@ -4560,7 +4933,6 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
     if (!isExperienceEntry(experienceEntry)) {
         throw new Error('Failed to fetch experience entities. Provided "experienceEntry" does not match experience entry schema');
     }
-    const deepReferences = gatherDeepReferencesFromExperienceEntry(experienceEntry);
     const entryIds = new Set();
     const assetIds = new Set();
     for (const dataBinding of Object.values(experienceEntry.fields.dataSource)) {
@@ -4578,12 +4950,52 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
         fetchAllEntries({ client, ids: [...entryIds], locale }),
         fetchAllAssets({ client, ids: [...assetIds], locale }),
     ]);
-    const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
+    const usedPatterns = experienceEntry.fields.usedComponents ?? [];
+    const isRenderingExperience = Boolean(!experienceEntry.fields.componentSettings);
+    const deepReferences = gatherDeepReferencesFromExperienceEntry(experienceEntry);
+    // If we are previewing a pattern, we want to include the entry itself as well
+    const fetchedPatterns = (isRenderingExperience ? usedPatterns : [...usedPatterns, experienceEntry]);
+    const allFetchedPatterns = flattenNestedPatterns(fetchedPatterns);
+    const prebindingDataByPatternId = extractPrebindingDataByPatternId(allFetchedPatterns);
+    // Patterns do not have dataSource stored in their dataSource field, so head entities won't be there and we need to fetch them
+    if (!isRenderingExperience) {
+        const { dataSource } = generateDefaultDataSourceForPrebindingDefinition(experienceEntry.fields.componentSettings?.prebindingDefinitions);
+        if (Object.keys(dataSource).length) {
+            const prebindingEntriesResponse = await fetchAllEntries({
+                client,
+                ids: Object.values(dataSource).map((link) => link.sys.id),
+                locale,
+            });
+            entriesResponse.items.push(...prebindingEntriesResponse.items);
+            entriesResponse.includes.Asset.push(...(prebindingEntriesResponse.includes?.Asset ?? []));
+            entriesResponse.includes.Entry.push(...(prebindingEntriesResponse.includes?.Entry ?? []));
+        }
+    }
+    // normally, for experience entry, there should be no need to call this method, as `includes=2` will have them resolved
+    // because the entries used for pre-binding are stored in both - the layout of the experience, as well as the dataSource field
+    const deepPrebindingReferences = isRenderingExperience
+        ? gatherDeepPrebindingReferencesFromExperienceEntry({
+            experienceEntry: experienceEntry,
+            fetchedPatterns: allFetchedPatterns,
+            prebindingDataByPatternId,
+            fetchedLevel1Entries: entriesResponse.items,
+        })
+        : // however, for patterns, we have to do it by hand, because a pattern entry doesn't save the pre-binding data neither in the
+            // layout nor in the dataSource field.
+            // for consistency, as well as to be future safe from the change to "includes=2", I added methods for both
+            gatherDeepPrebindingReferencesFromPatternEntry({
+                patternEntry: experienceEntry,
+                fetchedPatterns: allFetchedPatterns,
+                prebindingDataByPatternId,
+                fetchedLevel1Entries: entriesResponse.items,
+            });
+    const allDeepReferences = [...deepReferences, ...deepPrebindingReferences];
+    const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(allDeepReferences, entriesResponse);
     // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
     const allResolvedEntries = [
         ...(entriesResponse?.items ?? []),
         ...(entriesResponse.includes?.Entry ?? []),
-        ...(experienceEntry.fields.usedComponents || []),
+        ...(usedPatterns || []),
         ...autoFetchedReferentEntries,
     ];
     const allResolvedAssets = [
@@ -4592,8 +5004,14 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
         ...autoFetchedReferentAssets,
     ];
     return {
-        entries: allResolvedEntries,
-        assets: allResolvedAssets,
+        // we have to drop duplicates, becasue of the merge of deepReferences and deepPrebindingReferences above
+        // If not, the same entity might appear in this array more than once
+        entries: [
+            ...new Map(allResolvedEntries.map((entry) => [entry.sys.id, entry])).values(),
+        ],
+        assets: [
+            ...new Map(allResolvedAssets.map((asset) => [asset.sys.id, asset])).values(),
+        ],
     };
 };
 
@@ -4872,5 +5290,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { BREAKPOINTS_STRATEGY_DESKTOP_FIRST, BREAKPOINTS_STRATEGY_MOBILE_FIRST, DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, defineSdkOptions, designTokensRegistry, detachExperienceStyles, detectBreakpointsStrategy, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, extractLeafLinksReferencedFromExperience, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getPrebindingPathBySourceEntry, getSdkOptions, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, inMemoryEntities, inMemoryEntitiesStore, indexByBreakpoint, isArrayOfLinks, isAsset, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isDeepPrebinding, isElementHidden, isEntry, isExperienceEntry, isLink, isLinkToAsset, isLinkToEntry, isPatternComponent, isPatternEntry, isPreboundProp, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, referencesOf, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sdkOptionsRegistry, sectionBuiltInStyles, sendMessage, setDebugLevel, singleColumnBuiltInStyles, splitDirectAndSlotChildren, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, transformVisibility, treeMap, treeVisit, tryParseMessage, uniqueById, useInMemoryEntities, validateExperienceBuilderConfig };
+export { BREAKPOINTS_STRATEGY_DESKTOP_FIRST, BREAKPOINTS_STRATEGY_MOBILE_FIRST, DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createAssemblyDefinition, createExperience, debug, defineBreakpoints, defineDesignTokens, defineSdkOptions, designTokensRegistry, detachExperienceStyles, detectBreakpointsStrategy, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, extractLeafLinksReferencedFromExperience, extractPrebindingDataByPatternId, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, flattenNestedPatterns, gatherDeepPrebindingReferencesFromExperienceEntry, gatherDeepPrebindingReferencesFromPatternEntry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateDefaultDataSourceForPrebindingDefinition, generateRandomId, getActiveBreakpointIndex, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getPrebindingPathBySourceEntry, getSdkOptions, getTargetPatternMappingsForParameter, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, inMemoryEntities, inMemoryEntitiesStore, indexByBreakpoint, isArrayOfLinks, isAsset, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isDeepPrebinding, isElementHidden, isEntry, isExperienceEntry, isLink, isLinkToAsset, isLinkToEntry, isPatternComponent, isPatternEntry, isPreboundProp, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, referencesOf, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sdkOptionsRegistry, sectionBuiltInStyles, sendMessage, setDebugLevel, singleColumnBuiltInStyles, splitDirectAndSlotChildren, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, transformVisibility, treeMap, treeVisit, tryParseMessage, uniqueById, useInMemoryEntities, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map