@contentful/experiences-core 3.7.0-dev-20250917T1515-4c340b9.0 → 3.7.0-dev-20250918T1653-d735f6f.0

package/dist/index.d.ts

@@ -37,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, 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';
@@ -998,7 +998,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(),
 })
@@ -1519,11 +1519,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);
@@ -1536,12 +1567,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 = {};
 /**
@@ -2148,7 +2173,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 */
@@ -3279,7 +3306,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;
     }
@@ -4806,8 +4833,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: {
@@ -5248,5 +5275,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, extractPrebindingDataByPatternId, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, flattenNestedPatterns, gatherDeepPrebindingReferencesFromExperienceEntry, gatherDeepPrebindingReferencesFromPatternEntry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateDefaultDataSourceForPrebindingDefinition, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, 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, 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, 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