release@main

lerna.json

@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "npmClient": "npm",
-  "version": "1.26.0",
+  "version": "1.27.0-beta.0",
   "command": {
     "version": {
       "allowBranch": ["main", "next", "development"],

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-components-react",
-  "version": "1.26.0",
+  "version": "1.27.0-beta.0",
   "description": "A basic set of components to use with Studio Experiences",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
   "repository": {
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@contentful/experiences-core": "file:../core",
-    "@contentful/rich-text-react-renderer": "^15.17.2",
+    "@contentful/rich-text-react-renderer": "^16.0.1",
     "postcss-import": "^16.0.1",
     "style-inject": "^0.3.0"
   }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-core",
-  "version": "1.26.0",
+  "version": "1.27.0-beta.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/core/src/entity/EntityStore.ts

@@ -5,6 +5,7 @@ import { EntityStoreBase } from './EntityStoreBase';
 import { get } from '@/utils/get';
 import { transformAssetFileToUrl } from './value-transformers';
 import { isLink } from '@/utils/isLink';
+import { gatherUsedComponentsWithDeepRefernces } from '@/fetchers/gatherUsedComponentsWithDeepReferences';
 type EntityStoreArgs = {
   experienceEntry: ExperienceEntry | Entry;
   entities: Array<Entry | Asset>;
@@ -14,6 +15,7 @@ type EntityStoreArgs = {
 export class EntityStore extends EntityStoreBase {
   private _experienceEntry: ExperienceFields | undefined;
   private _unboundValues: ExperienceUnboundValues | undefined;
+  private _usedComponentsWithDeepReferences: ExperienceEntry[];
 
   constructor(json: string);
   constructor({ experienceEntry, entities, locale }: EntityStoreArgs);
@@ -31,13 +33,19 @@ export class EntityStore extends EntityStoreBase {
       });
       this._experienceEntry = _experienceEntry;
       this._unboundValues = _unboundValues;
+      this._usedComponentsWithDeepReferences = gatherUsedComponentsWithDeepRefernces(
+        this._experienceEntry,
+      );
     } else {
       const { experienceEntry, entities, locale } = options;
       super({ entities, locale });
 
       if (isExperienceEntry(experienceEntry)) {
         this._experienceEntry = (experienceEntry as ExperienceEntry).fields;
         this._unboundValues = (experienceEntry as ExperienceEntry).fields.unboundValues;
+        this._usedComponentsWithDeepReferences = gatherUsedComponentsWithDeepRefernces(
+          this._experienceEntry,
+        );
       } else {
         throw new Error('Provided entry is not experience entry');
       }
@@ -69,7 +77,7 @@ export class EntityStore extends EntityStoreBase {
   }
 
   public get usedComponents() {
-    return this._experienceEntry?.usedComponents ?? [];
+    return this._usedComponentsWithDeepReferences ?? [];
   }
 
   /**

packages/core/src/fetchers/fetchExperienceEntry.spec.ts

@@ -80,6 +80,7 @@ describe('fetchExperienceEntry', () => {
     expect(mockClient.getEntries).toHaveBeenCalledWith({
       content_type: 'books',
       locale: 'en-US',
+      include: 3,
       'fields.slug': 'slug',
     });
 
@@ -93,6 +94,7 @@ describe('fetchExperienceEntry', () => {
     expect(mockClient.getEntries).toHaveBeenCalledWith({
       content_type: 'books',
       locale: 'en-US',
+      include: 3,
       'sys.id': 'entry-id',
     });
 

packages/core/src/fetchers/fetchExperienceEntry.ts

@@ -47,6 +47,7 @@ export const fetchExperienceEntry = async ({
   const entries = await client.getEntries({
     content_type: experienceTypeId,
     locale,
+    include: 3, // fetching max 3 level deep references due to nested patterns
     ...filter,
   });
 

packages/core/src/fetchers/gatherUsedComponentsWithDeepReferences.spec.ts

@@ -0,0 +1,19 @@
+import { experienceEntryFieldsWithFilledUsedComponents } from '../test/__fixtures__/experience';
+import { gatherUsedComponentsWithDeepRefernces } from './gatherUsedComponentsWithDeepReferences';
+
+describe('fetchReferencedEntities gatherUsedComponentsWithDeepRefernces', () => {
+  it('should return an empty array if no used components are found', async () => {
+    const usedComponents = gatherUsedComponentsWithDeepRefernces(undefined);
+
+    expect(usedComponents).toEqual([]);
+  });
+
+  it('should return an array of used components with deep references', async () => {
+    const usedComponents = gatherUsedComponentsWithDeepRefernces(
+      experienceEntryFieldsWithFilledUsedComponents,
+    );
+
+    expect(usedComponents[0].sys.id).toEqual('root-pattern-1');
+    expect(usedComponents[1].sys.id).toEqual('nested-pattern-1');
+  });
+});

packages/core/src/fetchers/gatherUsedComponentsWithDeepReferences.ts

@@ -0,0 +1,17 @@
+import { ExperienceEntry, ExperienceFields } from '@/types';
+export const gatherUsedComponentsWithDeepRefernces = (
+  experienceEntryFields?: ExperienceFields,
+): ExperienceEntry[] => {
+  const usedComponentDeepReferences: ExperienceEntry[] = [];
+  const usedComponents = experienceEntryFields?.usedComponents as ExperienceEntry[];
+  if (!usedComponents || usedComponents.length === 0) {
+    return [];
+  }
+  for (const component of usedComponents) {
+    if ('fields' in component) {
+      usedComponentDeepReferences.push(component);
+      usedComponentDeepReferences.push(...gatherUsedComponentsWithDeepRefernces(component.fields));
+    }
+  }
+  return usedComponentDeepReferences;
+};