@contentful/experiences-core 3.3.0 → 3.3.1-beta.0

package/dist/exports.d.ts

@@ -1,3 +1,3 @@
 export { ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_DEFAULT_CATEGORY, ASSEMBLY_NODE_TYPE, ASSEMBLY_NODE_TYPES, CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_DEFAULT_CATEGORY, EMPTY_CONTAINER_SIZE, HYPERLINK_DEFAULT_PATTERN, INCOMING_EVENTS, INTERNAL_EVENTS, LATEST_SCHEMA_VERSION, OUTGOING_EVENTS, PATTERN_PROPERTY_DIVIDER, PostMessageMethods, SCROLL_STATES, SIDELOADED_PREFIX, SUPPORTED_IMAGE_FORMATS, StudioCanvasMode, VISUAL_EDITOR_CONTAINER_ID, VISUAL_EDITOR_EVENTS } from './constants.js';
-export { AssembliesAddedPayload, AssembliesRegisteredPayload, BackgroundImageAlignmentOption, BackgroundImageOptions, BackgroundImageScalingOption, Binding, BindingMap, BindingMapByBlockId, BoundComponentPropertyTypes, CSSProperties, CanvasErrorPayload, CanvasGeometryUpdateSourceEvent, CanvasReloadPayload, CanvasResizedPayload, CanvasScrollPayload, ComponentBinding, ComponentDefinition, ComponentDefinitionVariable, ComponentDefinitionVariableBase, ComponentDefinitionVariableTypeMap, ComponentDefinitionVariableValidation, ComponentDragCanceledPayload, ComponentDragEndedPayload, ComponentDragStartedPayload, ComponentDraggingChangedPayload, ComponentDroppedPayload, ComponentMoveEndedPayload, ComponentMoveStartedPayload, ComponentMovedPayload, ComponentRegistration, ComponentRegistrationOptions, ComponentSelectedPayload, ConnectedPayload, ContainerStyleVariableName, Coordinates, DataSourceEntryValueType, DesignTokensDefinition, DesignTokensPayload, DesignVariableMap, DesignVariableTypes, Experience, ExperienceEntry, ExperienceFields, ExperienceTree, ExperienceTreeNode, ExperienceUpdatedPayload, HoverComponentPayload, HoveredElement, ImageLoadingOption, ImageObjectFitOption, ImageObjectPositionOption, ImageOptions, IncomingComponentDragCanceledPayload, IncomingComponentMoveEndedPayload, IncomingEvent, IncomingMessage, IncomingMouseMovePayload, InternalEvent, Link, ManagementEntity, MouseMovePayload, NewHoveredElementPayload, OptimizedBackgroundImageAsset, OptimizedImageAsset, OutgoingEvent, OutgoingMessage, OutsideCanvasClickPayload, RawCoordinates, RecursiveDesignTokenDefinition, RegisteredBreakpointsPayload, RegisteredComponentsPayload, RequestComponentTreeUpdatePayload, RequestEditorModePayload, RequestEntitiesMessage, RequestEntitiesPayload, RequestReadOnlyModePayload, RequestedEntitiesMessage, RequestedEntitiesPayload, ResolveDesignValueType, SDKFeaturesPayload, ScrollState, SelectComponentPayload, SendMessageParams, StructureComponentProps, StyleProps, UpdateSelectedComponentCoordinatesPayload, UpdatedEntityPayload, ValidationOption, VariableFormats } from './types.js';
+export { AssembliesAddedPayload, AssembliesRegisteredPayload, BackgroundImageAlignmentOption, BackgroundImageOptions, BackgroundImageScalingOption, Binding, BindingMap, BindingMapByBlockId, BoundComponentPropertyTypes, CSSProperties, CanvasErrorPayload, CanvasGeometryUpdateSourceEvent, CanvasReloadPayload, CanvasResizedPayload, CanvasScrollPayload, ComponentBinding, ComponentDefinition, ComponentDefinitionVariable, ComponentDefinitionVariableBase, ComponentDefinitionVariableTypeMap, ComponentDefinitionVariableValidation, ComponentDragCanceledPayload, ComponentDragEndedPayload, ComponentDragStartedPayload, ComponentDraggingChangedPayload, ComponentDroppedPayload, ComponentMoveEndedPayload, ComponentMoveStartedPayload, ComponentMovedPayload, ComponentRegistration, ComponentRegistrationOptions, ComponentSelectedPayload, ConnectedPayload, ContainerStyleVariableName, Coordinates, DataSourceEntryValueType, DesignTokensDefinition, DesignTokensPayload, DesignVariableMap, DesignVariableTypes, Experience, ExperienceEntry, ExperienceFields, ExperienceTree, ExperienceTreeNode, ExperienceUpdatedPayload, HoverComponentPayload, HoveredElement, ImageLoadingOption, ImageObjectFitOption, ImageObjectPositionOption, ImageOptions, IncomingComponentDragCanceledPayload, IncomingComponentMoveEndedPayload, IncomingEvent, IncomingMessage, IncomingMouseMovePayload, InternalEvent, Link, ManagementEntity, MouseMovePayload, NewHoveredElementPayload, OptimizedBackgroundImageAsset, OptimizedImageAsset, OutgoingEvent, OutgoingMessage, OutsideCanvasClickPayload, RawCoordinates, RecursiveDesignTokenDefinition, RegisteredBreakpointsPayload, RegisteredComponentsPayload, RequestComponentTreeUpdatePayload, RequestEditorModePayload, RequestEntitiesMessage, RequestEntitiesPayload, RequestReadOnlyModePayload, RequestedEntitiesMessage, RequestedEntitiesPayload, ResolveDesignValueType, SDKFeaturesPayload, ScrollState, SdkOptions, SelectComponentPayload, SendMessageParams, StructureComponentProps, StyleProps, UpdateSelectedComponentCoordinatesPayload, UpdatedEntityPayload, ValidationOption, VariableFormats } from './types.js';
 export { BoundValue, Breakpoint, ComponentDefinitionPropertyType as ComponentDefinitionVariableType, ComponentPropertyValue, ComponentTreeNode, ComponentValue, DesignValue, ExperienceComponentSettings, ExperienceDataSource, ExperienceUnboundValues, NoValue, Parameter, ParameterDefinition, PrimitiveValue, SchemaVersions, UnboundValue, ValuesByBreakpoint, VariableMapping } from '@contentful/experiences-validators';

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, g
 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 { builtInStyles, columnsBuiltInStyles, containerBuiltInStyles, dividerBuiltInStyles, optionalBuiltInStyles, sectionBuiltInStyles, singleColumnBuiltInStyles } from './definitions/styles.js';
 export { EditorModeEntityStore } from './entity/EditorModeEntityStore.js';
 export { EntityStore } from './entity/EntityStore.js';
@@ -36,4 +37,5 @@ 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 { defineSdkOptions, getSdkOptions, sdkOptionsRegistry } from './registries/sdkOptionsRegistry.js';
 export { DeepReference, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree } from './deep-binding/DeepReference.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { z, ZodIssueCode } from 'zod';
-import { omit, isArray, uniqBy } from 'lodash-es';
+import { cloneDeep, omit, isArray, uniqBy } from 'lodash-es';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { create } from 'zustand';
@@ -1383,6 +1383,18 @@ const resetBreakpointsRegistry = () => {
     breakpointsRegistry = [];
 };
 
+const sdkOptionsRegistry = {};
+/**
+ * Used inside defineComponents to forward registry arguments to this registry
+ * of SDK options.
+ */
+const defineSdkOptions = (options) => {
+    Object.assign(sdkOptionsRegistry, options);
+};
+const getSdkOptions = () => {
+    return { ...sdkOptionsRegistry };
+};
+
 const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
 const toCSSMediaQuery = ({ query }) => {
     if (query === '*')
@@ -1743,7 +1755,7 @@ function localizeEntity(entity, locale) {
     if (entity.sys.locale) {
         return entity;
     }
-    const cloned = structuredClone(entity);
+    const cloned = cloneDeep(entity);
     // Set the requested locale as entry locale to follow the API shape:
     // https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/common-resource-attributes
     cloned.sys.locale = locale;
@@ -2053,6 +2065,20 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
         backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
+const transformTextAlign = (value) => {
+    if (!value)
+        return undefined;
+    const sdkOptions = getSdkOptions();
+    // New behavior: translate left/right to start/end
+    // Customer can opt-out by activating this global option toggle
+    if (!sdkOptions.__disableTextAlignmentTransform) {
+        if (value === 'left')
+            return 'start';
+        if (value === 'right')
+            return 'end';
+    }
+    return value;
+};
 
 const toCSSAttribute = (key) => {
     let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -2130,7 +2156,7 @@ const buildCfStyles = (values) => {
         lineHeight: values.cfLineHeight,
         letterSpacing: values.cfLetterSpacing,
         color: values.cfTextColor,
-        textAlign: values.cfTextAlign,
+        textAlign: transformTextAlign(values.cfTextAlign),
         textTransform: values.cfTextTransform,
         objectFit: values.cfImageOptions?.objectFit,
         objectPosition: values.cfImageOptions?.objectPosition,
@@ -2894,7 +2920,7 @@ const transformRichText = (entryOrAsset, entityStore, path) => {
         // resolve any links to assets/entries/hyperlinks
         // we need to clone, as we want to keep the original Entity in the EntityStore intact,
         // and resolveLinks() is mutating the node object.
-        const richTextDocument = structuredClone(value);
+        const richTextDocument = cloneDeep(value);
         resolveLinks(richTextDocument, entityStore);
         return richTextDocument;
     }
@@ -3427,6 +3453,27 @@ const extractLeafLinksReferencedFromExperience = (experience) => {
     };
 };
 
+const splitDirectAndSlotChildren = (allChildNodes, componentDefinition) => {
+    // Bridge difference between editor and delivery mode
+    const getSlotId = (child) => {
+        if ('data' in child)
+            return child.data.slotId;
+        return child.slotId;
+    };
+    const slotNodesMap = {};
+    for (const slotId in componentDefinition.slots) {
+        // We only allow one component per slot (container). This is just safer to not render components twice or not at all
+        const nodes = allChildNodes.filter((child) => getSlotId(child) === slotId);
+        slotNodesMap[slotId] = nodes.length ? nodes : null;
+    }
+    const directChildNodes = allChildNodes.filter((child) => getSlotId(child) === undefined);
+    if (!componentDefinition.children || !directChildNodes.length) {
+        // If there are no children allowed in the component or no children added, render as undefined
+        return { slotNodesMap, directChildNodes: undefined };
+    }
+    return { slotNodesMap, directChildNodes };
+};
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -3558,11 +3605,11 @@ class EntityStoreBase {
     addEntity(entity) {
         if (isAsset(entity)) {
             // cloned and frozen
-            this.assetMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+            this.assetMap.set(entity.sys.id, deepFreeze(cloneDeep(entity)));
         }
         else if (isEntry(entity)) {
             // cloned and frozen
-            this.entryMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+            this.entryMap.set(entity.sys.id, deepFreeze(cloneDeep(entity)));
         }
         else {
             throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(entity)}'`);
@@ -4656,6 +4703,19 @@ const sideloadPrebindingDefaultValues = (patternEntry) => {
     return sideloadedCount;
 };
 
+/**
+ * Run additional checks on the references used in the experience entry and
+ * process data required for prebinding. This must be used after fetching an
+ * experience entry.
+ *
+ * The changes made to the passed experience entry are done inplace.
+ **/
+const prepareExperienceEntry = (experienceEntry) => {
+    removeCircularPatternReferences(experienceEntry);
+    removeSelfReferencingDataSource(experienceEntry);
+    sideloadPrebindingDefaultValues(experienceEntry);
+};
+
 const errorMessagesWhileFetching$1 = {
     experience: 'Failed to fetch experience',
     experienceReferences: 'Failed to fetch entities, referenced in experience',
@@ -4689,9 +4749,7 @@ async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEdito
         if (!experienceEntry) {
             throw new Error(`No experience entry with slug: ${slug} exists`);
         }
-        removeCircularPatternReferences(experienceEntry);
-        removeSelfReferencingDataSource(experienceEntry);
-        sideloadPrebindingDefaultValues(experienceEntry);
+        prepareExperienceEntry(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,
@@ -4748,9 +4806,7 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
         if (!experienceEntry) {
             throw new Error(`No experience entry with id: ${id} exists`);
         }
-        removeCircularPatternReferences(experienceEntry);
-        removeSelfReferencingDataSource(experienceEntry);
-        sideloadPrebindingDefaultValues(experienceEntry);
+        prepareExperienceEntry(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,
@@ -4774,5 +4830,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, 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, 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, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, 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, 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, singleColumnBuiltInStyles, splitDirectAndSlotChildren, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, transformVisibility, treeMap, treeVisit, tryParseMessage, uniqueById, useInMemoryEntities, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map