@contentful/experiences-core 1.29.0-dev-20250123T1244-eb6dcac.0 → 1.30.0-beta.0

package/dist/entity/EntityStore.d.ts

@@ -10,13 +10,15 @@ type EntityStoreArgs = {
     locale: string;
 };
 declare class EntityStore extends EntityStoreBase {
-    private _experienceEntry;
+    private _experienceEntryFields;
+    private _experienceEntryId;
     private _unboundValues;
     private _usedComponentsWithDeepReferences;
     constructor(json: string);
     constructor({ experienceEntry, entities, locale }: EntityStoreArgs);
     getCurrentLocale(): string;
     get experienceEntryFields(): ExperienceFields | undefined;
+    get experienceEntryId(): string | undefined;
     get schemaVersion(): "2023-09-28" | undefined;
     get breakpoints(): {
         id: string;
@@ -54,7 +56,8 @@ declare class EntityStore extends EntityStoreBase {
             [k: string]: Asset<contentful.ChainModifiers, string>;
         };
         locale: string;
-        _experienceEntry: ExperienceFields | undefined;
+        _experienceEntryFields: ExperienceFields | undefined;
+        _experienceEntryId: string | undefined;
         _unboundValues: Record<string, {
             value?: string | number | boolean | Record<any, any> | undefined;
         }> | undefined;

package/dist/index.js

@@ -570,6 +570,7 @@ const builtInStyles = {
         defaultValue: '',
         validations: {
             format: 'URL',
+            bindingSourceType: ['entry', 'experience', 'manual'],
         },
         description: 'hyperlink for section or container',
     },
@@ -615,6 +616,9 @@ const optionalBuiltInStyles = {
         displayName: 'Image',
         type: 'Media',
         description: 'Image to display',
+        validations: {
+            bindingSourceType: ['entry', 'asset', 'manual'],
+        },
     },
     cfImageOptions: {
         displayName: 'Image options',
@@ -637,6 +641,9 @@ const optionalBuiltInStyles = {
         displayName: 'Background image',
         type: 'Media',
         description: 'Background image for component',
+        validations: {
+            bindingSourceType: ['entry', 'asset', 'manual'],
+        },
     },
     cfBackgroundImageOptions: {
         displayName: 'Background image options',
@@ -1556,7 +1563,7 @@ const detachExperienceStyles = (experience) => {
     }, {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueriesTemplate);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, }) => {
         // traversing the tree
         const queue = [];
         queue.push(...componentTree.children);
@@ -1573,6 +1580,10 @@ const detachExperienceStyles = (experience) => {
                 usedComponents,
             });
             if (isPatternNode) {
+                // When detecting a circular dependency among patterns, stop to avoid an infinite loop
+                if (wrappingPatternIds.has(currentNode.definitionId)) {
+                    continue;
+                }
                 const patternEntry = usedComponents.find((component) => component.sys.id === currentNode.definitionId);
                 if (!patternEntry || !('fields' in patternEntry)) {
                     continue;
@@ -1613,6 +1624,7 @@ const detachExperienceStyles = (experience) => {
                     componentVariablesOverwrites: currentNode.variables,
                     // pass top-level pattern node to store instance-specific child styles for rendering
                     patternWrapper: currentNode,
+                    wrappingPatternIds: new Set([...wrappingPatternIds, currentNode.definitionId]),
                 });
                 continue;
             }
@@ -1769,6 +1781,7 @@ const detachExperienceStyles = (experience) => {
         dataSource: experience.entityStore?.dataSource ?? {},
         unboundValues: experience.entityStore?.unboundValues ?? {},
         componentSettings: experience.entityStore?.experienceEntryFields?.componentSettings,
+        wrappingPatternIds: new Set(experience.entityStore?.experienceEntryId ? [experience.entityStore.experienceEntryId] : []),
     });
     // once the whole tree was traversed, for each breakpoint, I aggregate the styles
     // for each generated className into one css string
@@ -3131,64 +3144,76 @@ class EditorModeEntityStore extends EditorEntityStore {
     }
 }
 
-const gatherUsedComponentsWithDeepRefernces = (experienceEntryFields) => {
-    const usedComponentDeepReferences = [];
+const resolveDeepUsedComponents = ({ experienceEntryFields, parentComponents, }) => {
+    const totalUsedComponents = [];
     const usedComponents = experienceEntryFields?.usedComponents;
     if (!usedComponents || usedComponents.length === 0) {
         return [];
     }
     for (const component of usedComponents) {
         if ('fields' in component) {
-            usedComponentDeepReferences.push(component);
-            usedComponentDeepReferences.push(...gatherUsedComponentsWithDeepRefernces(component.fields));
+            totalUsedComponents.push(component);
+            if (parentComponents.has(component.sys.id)) {
+                continue;
+            }
+            totalUsedComponents.push(...resolveDeepUsedComponents({
+                experienceEntryFields: component.fields,
+                parentComponents: new Set([...parentComponents, component.sys.id]),
+            }));
         }
     }
-    return usedComponentDeepReferences;
+    return totalUsedComponents;
 };
 
 class EntityStore extends EntityStoreBase {
     constructor(options) {
         if (typeof options === 'string') {
-            const data = JSON.parse(options);
-            const { _experienceEntry, _unboundValues, locale, entryMap, assetMap } = data.entityStore;
+            // For SSR/SSG, the entity store is created server-side and passed to the client as a serialised JSON.
+            // So the properties in data.entityStore are equal to the attributes of this class (see `toJSON()`)
+            const serializedAttributes = JSON.parse(options).entityStore;
             super({
                 entities: [
-                    ...Object.values(entryMap),
-                    ...Object.values(assetMap),
+                    ...Object.values(serializedAttributes.entryMap),
+                    ...Object.values(serializedAttributes.assetMap),
                 ],
-                locale,
+                locale: serializedAttributes.locale,
             });
-            this._experienceEntry = _experienceEntry;
-            this._unboundValues = _unboundValues;
-            this._usedComponentsWithDeepReferences = gatherUsedComponentsWithDeepRefernces(this._experienceEntry);
+            this._experienceEntryFields = serializedAttributes._experienceEntryFields;
+            this._experienceEntryId = serializedAttributes._experienceEntryId;
+            this._unboundValues = serializedAttributes._unboundValues;
         }
         else {
             const { experienceEntry, entities, locale } = options;
-            super({ entities, locale });
-            if (isExperienceEntry(experienceEntry)) {
-                this._experienceEntry = experienceEntry.fields;
-                this._unboundValues = experienceEntry.fields.unboundValues;
-                this._usedComponentsWithDeepReferences = gatherUsedComponentsWithDeepRefernces(this._experienceEntry);
-            }
-            else {
+            if (!isExperienceEntry(experienceEntry)) {
                 throw new Error('Provided entry is not experience entry');
             }
+            super({ entities, locale });
+            this._experienceEntryFields = experienceEntry.fields;
+            this._experienceEntryId = experienceEntry.sys.id;
+            this._unboundValues = experienceEntry.fields.unboundValues;
         }
+        this._usedComponentsWithDeepReferences = resolveDeepUsedComponents({
+            experienceEntryFields: this._experienceEntryFields,
+            parentComponents: new Set([this._experienceEntryId]),
+        });
     }
     getCurrentLocale() {
         return this.locale;
     }
     get experienceEntryFields() {
-        return this._experienceEntry;
+        return this._experienceEntryFields;
+    }
+    get experienceEntryId() {
+        return this._experienceEntryId;
     }
     get schemaVersion() {
-        return this._experienceEntry?.componentTree.schemaVersion;
+        return this._experienceEntryFields?.componentTree.schemaVersion;
     }
     get breakpoints() {
-        return this._experienceEntry?.componentTree.breakpoints ?? [];
+        return this._experienceEntryFields?.componentTree.breakpoints ?? [];
     }
     get dataSource() {
-        return this._experienceEntry?.dataSource ?? {};
+        return this._experienceEntryFields?.dataSource ?? {};
     }
     get unboundValues() {
         return this._unboundValues ?? {};
@@ -3219,7 +3244,8 @@ class EntityStore extends EntityStoreBase {
     }
     toJSON() {
         return {
-            _experienceEntry: this._experienceEntry,
+            _experienceEntryFields: this._experienceEntryFields,
+            _experienceEntryId: this._experienceEntryId,
             _unboundValues: this._unboundValues,
             ...super.toJSON(),
         };
@@ -3544,22 +3570,22 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
         throw new Error('Failed to fetch experience entities. Provided "experienceEntry" does not match experience entry schema');
     }
     const deepReferences = gatherDeepReferencesFromExperienceEntry(experienceEntry);
-    const entryIds = [];
-    const assetIds = [];
+    const entryIds = new Set();
+    const assetIds = new Set();
     for (const dataBinding of Object.values(experienceEntry.fields.dataSource)) {
         if (!('sys' in dataBinding)) {
             continue;
         }
         if (dataBinding.sys.linkType === 'Entry') {
-            entryIds.push(dataBinding.sys.id);
+            entryIds.add(dataBinding.sys.id);
         }
         if (dataBinding.sys.linkType === 'Asset') {
-            assetIds.push(dataBinding.sys.id);
+            assetIds.add(dataBinding.sys.id);
         }
     }
     const [entriesResponse, assetsResponse] = await Promise.all([
-        fetchAllEntries({ client, ids: entryIds, locale }),
-        fetchAllAssets({ client, ids: assetIds, locale }),
+        fetchAllEntries({ client, ids: [...entryIds], locale }),
+        fetchAllAssets({ client, ids: [...assetIds], locale }),
     ]);
     const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
     // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
@@ -3580,6 +3606,68 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
     };
 };
 
+/**
+ * The CMA client will automatically replace links with entry references.
+ * As we're including all referenced pattern entries in usedComponents, this can lead
+ * to a circular reference. This function replaces those with plain links inplace (!).
+ *
+ * @see https://github.com/contentful/contentful.js/issues/377
+ */
+const removeCircularPatternReferences = (experienceEntry, _parentIds) => {
+    const parentIds = _parentIds ?? new Set([experienceEntry.sys.id]);
+    const usedComponents = experienceEntry.fields.usedComponents;
+    const newUsedComponents = usedComponents?.reduce((acc, linkOrEntry) => {
+        if (!('fields' in linkOrEntry)) {
+            // It is a link, we're good
+            return [...acc, linkOrEntry];
+        }
+        const entry = linkOrEntry;
+        if (parentIds.has(entry.sys.id)) {
+            // It is an entry that already occurred -> turn it into a link to remove the circularity
+            const link = {
+                sys: {
+                    id: entry.sys.id,
+                    linkType: 'Entry',
+                    type: 'Link',
+                },
+            };
+            return [...acc, link];
+        }
+        // Remove circularity for its usedComponents as well (inplace)
+        removeCircularPatternReferences(entry, new Set([...parentIds, entry.sys.id]));
+        return [...acc, entry];
+    }, []);
+    // @ts-expect-error - type of usedComponents doesn't yet allow a mixed list of both links and entries
+    experienceEntry.fields.usedComponents = newUsedComponents;
+};
+/**
+ * The CMA client will automatically replace links with entry references if they are available.
+ * While we're not fetching the data sources, a self reference would be replaced as the entry is
+ * fetched. Any circuar reference in the object breaks SSR where we have to stringify the JSON.
+ * This would fail if the object contains circular references.
+ */
+const removeSelfReferencingDataSource = (experienceEntry) => {
+    const dataSources = experienceEntry.fields.dataSource;
+    const newDataSource = Object.entries(dataSources).reduce((acc, [key, linkOrEntry]) => {
+        if ('fields' in linkOrEntry && linkOrEntry.sys.id === experienceEntry.sys.id) {
+            const entry = linkOrEntry;
+            acc[key] = {
+                sys: {
+                    id: entry.sys.id,
+                    linkType: 'Entry',
+                    type: 'Link',
+                },
+            };
+        }
+        else {
+            const link = linkOrEntry;
+            acc[key] = link;
+        }
+        return acc;
+    }, {});
+    experienceEntry.fields.dataSource = newDataSource;
+};
+
 const errorMessagesWhileFetching$1 = {
     experience: 'Failed to fetch experience',
     experienceReferences: 'Failed to fetch entities, referenced in experience',
@@ -3593,7 +3681,7 @@ const handleError$1 = (generalMessage, error) => {
  * @param {FetchBySlugParams} options - options to fetch the experience
  */
 async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEditorMode, }) {
-    //Be a no-op if in editor mode
+    // Be a no-op if in editor mode
     if (isEditorMode)
         return;
     let experienceEntry = undefined;
@@ -3609,6 +3697,8 @@ async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEdito
         if (!experienceEntry) {
             throw new Error(`No experience entry with slug: ${slug} exists`);
         }
+        removeCircularPatternReferences(experienceEntry);
+        removeSelfReferencingDataSource(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,
@@ -3661,6 +3751,8 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
         if (!experienceEntry) {
             throw new Error(`No experience entry with id: ${id} exists`);
         }
+        removeCircularPatternReferences(experienceEntry);
+        removeSelfReferencingDataSource(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,