@contentful/experiences-core 0.0.1-alpha.9 → 0.0.1-beta.0

package/dist/constants.js

@@ -69,23 +69,23 @@ const CONTENTFUL_COMPONENTS = {
         name: 'Column',
     },
     button: {
-        id: 'button',
+        id: 'contentful-button',
         name: 'Button',
     },
     heading: {
-        id: 'heading',
+        id: 'contentful-heading',
         name: 'Heading',
     },
     image: {
-        id: 'image',
+        id: 'contentful-image',
         name: 'Image',
     },
     richText: {
-        id: 'richText',
+        id: 'contentful-richText',
         name: 'Rich Text',
     },
     text: {
-        id: 'text',
+        id: 'contentful-text',
         name: 'Text',
     },
 };

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SCROLL_STATES = {\n  Start: 'scrollStart',\n  IsScrolling: 'isScrolling',\n  End: 'scrollEnd',\n};\n\nexport const OUTGOING_EVENTS = {\n  Connected: 'connected',\n  DesignTokens: 'registerDesignTokens',\n  HoveredSection: 'hoveredSection',\n  MouseMove: 'mouseMove',\n  NewHoveredElement: 'newHoveredElement',\n  ComponentSelected: 'componentSelected',\n  RegisteredComponents: 'registeredComponents',\n  RequestComponentTreeUpdate: 'requestComponentTreeUpdate',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDropped: 'componentDropped',\n  ComponentMoved: 'componentMoved',\n  CanvasReload: 'canvasReload',\n  UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',\n  UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',\n  CanvasScroll: 'canvasScrolling',\n  CanvasError: 'canvasError',\n  ComponentMoveStarted: 'componentMoveStarted',\n  ComponentMoveEnded: 'componentMoveEnded',\n  OutsideCanvasClick: 'outsideCanvasClick',\n};\n\nexport const INCOMING_EVENTS = {\n  RequestEditorMode: 'requestEditorMode',\n  ExperienceUpdated: 'componentTreeUpdated',\n  ComponentDraggingChanged: 'componentDraggingChanged',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDragStarted: 'componentDragStarted',\n  ComponentDragEnded: 'componentDragEnded',\n  ComponentMoveEnded: 'componentMoveEnded',\n  CanvasResized: 'canvasResized',\n  SelectComponent: 'selectComponent',\n  HoverComponent: 'hoverComponent',\n  UpdatedEntity: 'updatedEntity',\n  AssembliesAdded: 'assembliesAdded',\n  AssembliesRegistered: 'assembliesRegistered',\n  InitEditor: 'initEditor',\n  MouseMove: 'mouseMove',\n};\n\nexport const INTERNAL_EVENTS = {\n  ComponentsRegistered: 'cfComponentsRegistered',\n  VisualEditorInitialize: 'cfVisualEditorInitialize',\n};\n\nexport const VISUAL_EDITOR_EVENTS = {\n  Ready: 'cfVisualEditorReady',\n};\n\nexport const VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';\nexport const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';\nexport const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';\n\nexport const CONTENTFUL_COMPONENTS = {\n  section: {\n    id: 'contentful-section',\n    name: 'Section',\n  },\n  container: {\n    id: 'contentful-container',\n    name: 'Container',\n  },\n  columns: {\n    id: 'contentful-columns',\n    name: 'Columns',\n  },\n  singleColumn: {\n    id: 'contentful-single-column',\n    name: 'Column',\n  },\n  button: {\n    id: 'button',\n    name: 'Button',\n  },\n  heading: {\n    id: 'heading',\n    name: 'Heading',\n  },\n  image: {\n    id: 'image',\n    name: 'Image',\n  },\n  richText: {\n    id: 'richText',\n    name: 'Rich Text',\n  },\n  text: {\n    id: 'text',\n    name: 'Text',\n  },\n};\n\nexport const ASSEMBLY_NODE_TYPE = 'assembly';\nexport const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';\nexport const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';\nexport const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];\nexport const LATEST_SCHEMA_VERSION = '2023-09-28';\nexport const CF_STYLE_ATTRIBUTES = [\n  'cfHorizontalAlignment',\n  'cfVerticalAlignment',\n  'cfMargin',\n  'cfPadding',\n  'cfBackgroundColor',\n  'cfWidth',\n  'cfMaxWidth',\n  'cfHeight',\n  'cfImageAsset',\n  'cfImageOptions',\n  'cfBackgroundImageUrl',\n  'cfBackgroundImageOptions',\n  'cfFlexDirection',\n  'cfFlexWrap',\n  'cfBorder',\n  'cfBorderRadius',\n  'cfGap',\n  'cfFontSize',\n  'cfFontWeight',\n  'cfLineHeight',\n  'cfLetterSpacing',\n  'cfTextColor',\n  'cfTextAlign',\n  'cfTextTransform',\n  'cfTextBold',\n  'cfTextItalic',\n  'cfTextUnderline',\n  // For backwards compatibility\n  // we need to keep those in this constant array\n  // so that omit() in <VisualEditorBlock> and <CompositionBlock>\n  // can filter them out and not pass as props\n  'cfBackgroundImageScaling',\n  'cfBackgroundImageAlignment',\n  'cfBackgroundImageAlignmentVertical',\n  'cfBackgroundImageAlignmentHorizontal',\n];\n\nexport const EMPTY_CONTAINER_HEIGHT = '80px';\n\nexport const DEFAULT_IMAGE_WIDTH = '500px';\n\nexport enum PostMessageMethods {\n  REQUEST_ENTITIES = 'REQUEST_ENTITIES',\n  REQUESTED_ENTITIES = 'REQUESTED_ENTITIES',\n}\n\nexport const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'] as const;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SCROLL_STATES = {\n  Start: 'scrollStart',\n  IsScrolling: 'isScrolling',\n  End: 'scrollEnd',\n};\n\nexport const OUTGOING_EVENTS = {\n  Connected: 'connected',\n  DesignTokens: 'registerDesignTokens',\n  HoveredSection: 'hoveredSection',\n  MouseMove: 'mouseMove',\n  NewHoveredElement: 'newHoveredElement',\n  ComponentSelected: 'componentSelected',\n  RegisteredComponents: 'registeredComponents',\n  RequestComponentTreeUpdate: 'requestComponentTreeUpdate',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDropped: 'componentDropped',\n  ComponentMoved: 'componentMoved',\n  CanvasReload: 'canvasReload',\n  UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',\n  UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',\n  CanvasScroll: 'canvasScrolling',\n  CanvasError: 'canvasError',\n  ComponentMoveStarted: 'componentMoveStarted',\n  ComponentMoveEnded: 'componentMoveEnded',\n  OutsideCanvasClick: 'outsideCanvasClick',\n};\n\nexport const INCOMING_EVENTS = {\n  RequestEditorMode: 'requestEditorMode',\n  ExperienceUpdated: 'componentTreeUpdated',\n  ComponentDraggingChanged: 'componentDraggingChanged',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDragStarted: 'componentDragStarted',\n  ComponentDragEnded: 'componentDragEnded',\n  ComponentMoveEnded: 'componentMoveEnded',\n  CanvasResized: 'canvasResized',\n  SelectComponent: 'selectComponent',\n  HoverComponent: 'hoverComponent',\n  UpdatedEntity: 'updatedEntity',\n  AssembliesAdded: 'assembliesAdded',\n  AssembliesRegistered: 'assembliesRegistered',\n  InitEditor: 'initEditor',\n  MouseMove: 'mouseMove',\n};\n\nexport const INTERNAL_EVENTS = {\n  ComponentsRegistered: 'cfComponentsRegistered',\n  VisualEditorInitialize: 'cfVisualEditorInitialize',\n};\n\nexport const VISUAL_EDITOR_EVENTS = {\n  Ready: 'cfVisualEditorReady',\n};\n\nexport const VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';\nexport const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';\nexport const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';\n\nexport const CONTENTFUL_COMPONENTS = {\n  section: {\n    id: 'contentful-section',\n    name: 'Section',\n  },\n  container: {\n    id: 'contentful-container',\n    name: 'Container',\n  },\n  columns: {\n    id: 'contentful-columns',\n    name: 'Columns',\n  },\n  singleColumn: {\n    id: 'contentful-single-column',\n    name: 'Column',\n  },\n  button: {\n    id: 'contentful-button',\n    name: 'Button',\n  },\n  heading: {\n    id: 'contentful-heading',\n    name: 'Heading',\n  },\n  image: {\n    id: 'contentful-image',\n    name: 'Image',\n  },\n  richText: {\n    id: 'contentful-richText',\n    name: 'Rich Text',\n  },\n  text: {\n    id: 'contentful-text',\n    name: 'Text',\n  },\n};\n\nexport const ASSEMBLY_NODE_TYPE = 'assembly';\nexport const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';\nexport const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';\nexport const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];\nexport const LATEST_SCHEMA_VERSION = '2023-09-28';\nexport const CF_STYLE_ATTRIBUTES = [\n  'cfHorizontalAlignment',\n  'cfVerticalAlignment',\n  'cfMargin',\n  'cfPadding',\n  'cfBackgroundColor',\n  'cfWidth',\n  'cfMaxWidth',\n  'cfHeight',\n  'cfImageAsset',\n  'cfImageOptions',\n  'cfBackgroundImageUrl',\n  'cfBackgroundImageOptions',\n  'cfFlexDirection',\n  'cfFlexWrap',\n  'cfBorder',\n  'cfBorderRadius',\n  'cfGap',\n  'cfFontSize',\n  'cfFontWeight',\n  'cfLineHeight',\n  'cfLetterSpacing',\n  'cfTextColor',\n  'cfTextAlign',\n  'cfTextTransform',\n  'cfTextBold',\n  'cfTextItalic',\n  'cfTextUnderline',\n  // For backwards compatibility\n  // we need to keep those in this constant array\n  // so that omit() in <VisualEditorBlock> and <CompositionBlock>\n  // can filter them out and not pass as props\n  'cfBackgroundImageScaling',\n  'cfBackgroundImageAlignment',\n  'cfBackgroundImageAlignmentVertical',\n  'cfBackgroundImageAlignmentHorizontal',\n];\n\nexport const EMPTY_CONTAINER_HEIGHT = '80px';\n\nexport const DEFAULT_IMAGE_WIDTH = '500px';\n\nexport enum PostMessageMethods {\n  REQUEST_ENTITIES = 'REQUEST_ENTITIES',\n  REQUESTED_ENTITIES = 'REQUESTED_ENTITIES',\n}\n\nexport const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'] as const;\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,5 +1,6 @@
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
+import { uniqBy } from 'lodash-es';
 
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
@@ -37,23 +38,23 @@ const CONTENTFUL_COMPONENTS = {
         name: 'Column',
     },
     button: {
-        id: 'button',
+        id: 'contentful-button',
         name: 'Button',
     },
     heading: {
-        id: 'heading',
+        id: 'contentful-heading',
         name: 'Heading',
     },
     image: {
-        id: 'image',
+        id: 'contentful-image',
         name: 'Image',
     },
     richText: {
-        id: 'richText',
+        id: 'contentful-richText',
         name: 'Rich Text',
     },
     text: {
-        id: 'text',
+        id: 'contentful-text',
         name: 'Text',
     },
 };
@@ -438,63 +439,67 @@ function getOptimizedImageUrl(url, width, quality, format) {
     return `${url}${queryString ? '?' + queryString : ''}`;
 }
 
+function validateParams(file, quality, format) {
+    if (!file.details.image) {
+        throw Error('No image in file asset to transform');
+    }
+    if (quality < 0 || quality > 100) {
+        throw Error('Quality must be between 0 and 100');
+    }
+    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+    }
+    return true;
+}
+
 const MAX_WIDTH_ALLOWED$1 = 2000;
-const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = 100, format) => {
-    if (!validateParams(file, quality, format)) ;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    if (!validateParams(file, qualityNumber, format)) ;
     const url = file.url;
     const { width1x, width2x } = getWidths(widthStyle, file);
-    const imageUrl1x = getOptimizedImageUrl(url, width1x, quality, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, quality, format);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
     const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrlImageUrl = getOptimizedImageUrl(url, width2x, quality, format);
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
     const optimizedBackgroundImageAsset = {
-        url: returnedUrlImageUrl,
+        url: returnedUrl,
         srcSet,
         file,
     };
     return optimizedBackgroundImageAsset;
-    function validateParams(file, quality, format) {
-        if (!file.details.image) {
-            throw Error('No image in file asset to transform');
+    function getWidths(widthStyle, file) {
+        let width1x = 0;
+        let width2x = 0;
+        const intrinsicImageWidth = file.details.image.width;
+        if (widthStyle.endsWith('px')) {
+            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
         }
-        if (quality < 0 || quality > 100) {
-            throw Error('Quality must be between 0 and 100');
-        }
-        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+        else {
+            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
         }
-        return true;
+        width2x = Math.min(width1x * 2, intrinsicImageWidth);
+        return { width1x, width2x };
     }
 };
-function getWidths(widthStyle, file) {
-    let width1x = 0;
-    let width2x = 0;
-    const intrinsicImageWidth = file.details.image.width;
-    if (widthStyle.endsWith('px')) {
-        width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
-    }
-    else {
-        width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
-    }
-    width2x = Math.min(width1x * 2, intrinsicImageWidth);
-    return { width1x, width2x };
-}
 
 const MAX_WIDTH_ALLOWED = 4000;
-const getOptimizedImageAsset = (file, sizes, quality = 100, format) => {
-    if (!validateParams(file, quality, format)) ;
+const getOptimizedImageAsset = (file, sizes, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
     const url = file.url;
     const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
     const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
     const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
     const srcSet = sizes
-        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, quality, format)} ${width}w`)
+        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, qualityNumber, format)} ${width}w`)
         : [];
     const intrinsicImageWidth = file.details.image.width;
     if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
-        srcSet.push(`${getOptimizedImageUrl(url, undefined, quality, format)} ${intrinsicImageWidth}w`);
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
     }
-    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, quality, format);
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
     const optimizedImageAsset = {
         url: returnedUrl,
         srcSet,
@@ -502,18 +507,6 @@ const getOptimizedImageAsset = (file, sizes, quality = 100, format) => {
         file,
     };
     return optimizedImageAsset;
-    function validateParams(file, quality, format) {
-        if (!file.details.image) {
-            throw Error('No image in file asset to transform');
-        }
-        if (quality < 0 || quality > 100) {
-            throw Error('Quality must be between 0 and 100');
-        }
-        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
-        }
-        return true;
-    }
 };
 
 const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
@@ -529,7 +522,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
-            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, Number(options.quality), options.format);
+            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, options.quality, options.format);
             return value;
         }
         catch (error) {
@@ -548,7 +541,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
-            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, Number(options.quality), options.format);
+            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
             return value;
         }
         catch (error) {
@@ -671,6 +664,7 @@ const isExperienceEntry = (entry) => {
 
 const supportedModes = ['delivery', 'preview', 'editor'];
 
+// These styles get added to every component, user custom or contentful provided
 const builtInStyles = {
     cfVerticalAlignment: {
         validations: {
@@ -781,13 +775,6 @@ const builtInStyles = {
         description: 'The border of the section',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
-    cfBorderRadius: {
-        displayName: 'Border Radius',
-        type: 'Text',
-        group: 'style',
-        description: 'The border radius of the section',
-        defaultValue: '0px',
-    },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
@@ -854,8 +841,6 @@ const optionalBuiltInStyles = {
         defaultValue: {
             width: DEFAULT_IMAGE_WIDTH,
             height: '100%',
-            objectPosition: 'center center',
-            quality: '100',
             targetSize: DEFAULT_IMAGE_WIDTH,
         },
     },
@@ -871,10 +856,16 @@ const optionalBuiltInStyles = {
         defaultValue: {
             scaling: 'fill',
             alignment: 'left top',
-            quality: '100',
             targetSize: '2000px',
         },
     },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the section',
+        defaultValue: '0px',
+    },
     cfLineHeight: {
         displayName: 'Line Height',
         type: 'Text',
@@ -970,11 +961,13 @@ const optionalBuiltInStyles = {
 };
 const sectionBuiltInStyles = {
     ...builtInStyles,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
     cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
     cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
 };
 const containerBuiltInStyles = {
     ...builtInStyles,
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
     cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
     cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
     cfMaxWidth: {
@@ -986,6 +979,7 @@ const containerBuiltInStyles = {
     },
 };
 const singleColumnBuiltInStyles = {
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
     cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
     cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
     cfVerticalAlignment: {
@@ -1069,13 +1063,6 @@ const singleColumnBuiltInStyles = {
         description: 'The border of the column',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
-    cfBorderRadius: {
-        displayName: 'Border Radius',
-        type: 'Text',
-        group: 'style',
-        description: 'The border radius of the column',
-        defaultValue: '0px',
-    },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
@@ -1095,6 +1082,7 @@ const singleColumnBuiltInStyles = {
     },
 };
 const columnsBuiltInStyles = {
+    cfBorderRadius: optionalBuiltInStyles.cfBorderRadius,
     cfBackgroundImageUrl: optionalBuiltInStyles.cfBackgroundImageUrl,
     cfBackgroundImageOptions: optionalBuiltInStyles.cfBackgroundImageOptions,
     cfMargin: {
@@ -1139,13 +1127,6 @@ const columnsBuiltInStyles = {
         description: 'The border of the columns',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
-    cfBorderRadius: {
-        displayName: 'Border Radius',
-        type: 'Text',
-        group: 'style',
-        description: 'The border radius of the columns',
-        defaultValue: '0px',
-    },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
@@ -2163,31 +2144,84 @@ function gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse)
 }
 
 const MIN_FETCH_LIMIT = 1;
-const fetchEntities = async ({ entityType, client, query, }) => {
-    if (entityType === 'Asset') {
-        return client.getAssets({ ...query });
-    }
-    return client.withoutLinkResolution.getEntries({ ...query });
-};
-const fetchAllEntities = async ({ client, entityType, ids, locale, skip = 0, limit = 100, responseItems = [], }) => {
+const fetchAllEntries = async ({ client, ids, locale, skip = 0, limit = 100, responseItems = [], responseIncludes = { Entry: [], Asset: [] }, }) => {
     try {
-        if (!ids.length || !client) {
+        if (!client) {
+            throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
+        }
+        if (!ids.length) {
             return {
                 items: [],
+                includes: {
+                    Entry: [],
+                    Asset: [],
+                },
             };
         }
         const query = { 'sys.id[in]': ids, locale, limit, skip };
-        const response = await fetchEntities({ entityType, client, query });
-        if (!response) {
-            return {
-                items: responseItems,
-            };
+        const { items, includes, total: responseTotal, } = await client.withoutLinkResolution.getEntries({ ...query });
+        responseItems.push(...items);
+        responseIncludes?.Entry?.push(...(includes?.Entry || []));
+        responseIncludes?.Asset?.push(...(includes?.Asset || []));
+        // E.g Total entries = 99
+        // First fetch => { skip: 0, limit: 50, total: 99 } => 50 Entries fetched in Page 0
+        // Total Entries fetched = 50, 49 remaining
+        // 0(skip) + 50(limit) < 99(total) => Fetch again
+        // Second fetch => { skip: 50, limit: 50, total: 99 } => 49 Entries fetched in Page 1
+        // Total Entries fetched = 50(Page 0) + 49(Page 1) = 99, 0 remaining
+        // 50(skip) + 50(limit) > 99(total) => Stop fetching
+        if (skip + limit < responseTotal) {
+            return await fetchAllEntries({
+                client,
+                ids,
+                locale,
+                skip: skip + limit,
+                limit,
+                responseItems,
+                responseIncludes,
+            });
         }
-        responseItems.push(...response.items);
-        if (skip + limit < response.total) {
-            await fetchAllEntities({
+        const dedupedEntries = uniqBy(responseIncludes?.Entry, (entry) => entry.sys.id);
+        const dedupedAssets = uniqBy(responseIncludes?.Asset, (asset) => asset.sys.id);
+        return {
+            items: responseItems,
+            includes: {
+                Entry: dedupedEntries,
+                Asset: dedupedAssets,
+            },
+        };
+    }
+    catch (error) {
+        if (error instanceof Error &&
+            error.message.includes('size too big') &&
+            limit > MIN_FETCH_LIMIT) {
+            const newLimit = Math.max(MIN_FETCH_LIMIT, Math.floor(limit / 2));
+            return fetchAllEntries({
+                client,
+                ids,
+                locale,
+                skip,
+                limit: newLimit,
+                responseItems,
+            });
+        }
+        throw error;
+    }
+};
+const fetchAllAssets = async ({ client, ids, locale, skip = 0, limit = 100, responseItems = [], }) => {
+    try {
+        if (!client) {
+            throw new Error('Failed to fetch experience entities. Required "client" parameter was not provided');
+        }
+        if (!ids.length) {
+            return { items: [] };
+        }
+        const query = { 'sys.id[in]': ids, locale, limit, skip };
+        const { items, total: responseTotal } = await client.getAssets({ ...query });
+        responseItems.push(...items);
+        if (skip + limit < responseTotal) {
+            return await fetchAllAssets({
                 client,
-                entityType,
                 ids,
                 locale,
                 skip: skip + limit,
@@ -2204,9 +2238,8 @@ const fetchAllEntities = async ({ client, entityType, ids, locale, skip = 0, lim
             error.message.includes('size too big') &&
             limit > MIN_FETCH_LIMIT) {
             const newLimit = Math.max(MIN_FETCH_LIMIT, Math.floor(limit / 2));
-            return fetchAllEntities({
+            return fetchAllAssets({
                 client,
-                entityType,
                 ids,
                 locale,
                 skip,
@@ -2214,7 +2247,7 @@ const fetchAllEntities = async ({ client, entityType, ids, locale, skip = 0, lim
                 responseItems,
             });
         }
-        return error;
+        throw error;
     }
 };
 
@@ -2243,8 +2276,8 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
         }
     }
     const [entriesResponse, assetsResponse] = (await Promise.all([
-        fetchAllEntities({ client, entityType: 'Entry', ids: entryIds, locale }),
-        fetchAllEntities({ client, entityType: 'Asset', 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