@contentful/experiences-core 1.30.0-dev-20250124T1739-560b81b.0 → 1.30.0-dev-20250128T1255-64f728a.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

@@ -1563,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);
@@ -1580,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;
@@ -1620,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;
             }
@@ -1776,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
@@ -3138,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 ?? {};
@@ -3226,7 +3244,8 @@ class EntityStore extends EntityStoreBase {
     }
     toJSON() {
         return {
-            _experienceEntry: this._experienceEntry,
+            _experienceEntryFields: this._experienceEntryFields,
+            _experienceEntryId: this._experienceEntryId,
             _unboundValues: this._unboundValues,
             ...super.toJSON(),
         };
@@ -3587,6 +3606,41 @@ 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;
+};
+
 const errorMessagesWhileFetching$1 = {
     experience: 'Failed to fetch experience',
     experienceReferences: 'Failed to fetch entities, referenced in experience',
@@ -3600,7 +3654,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;
@@ -3616,6 +3670,7 @@ async function fetchBySlug({ client, experienceTypeId, slug, localeCode, isEdito
         if (!experienceEntry) {
             throw new Error(`No experience entry with slug: ${slug} exists`);
         }
+        removeCircularPatternReferences(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,
@@ -3668,6 +3723,7 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
         if (!experienceEntry) {
             throw new Error(`No experience entry with id: ${id} exists`);
         }
+        removeCircularPatternReferences(experienceEntry);
         try {
             const { entries, assets } = await fetchReferencedEntities({
                 client,