@contentful/experiences-components-react 1.42.4-prerelease-20250702T1207-37b3bfc.0 → 2.0.0-beta.0

package/dist/index.js

@@ -5,6 +5,7 @@ import { BLOCKS } from '@contentful/rich-text-types';
 import { z } from 'zod';
 import 'lodash-es';
 import 'md5';
+import { create } from 'zustand';
 
 var css_248z$8 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);:root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-font-family-sans:Archivo,Helvetica,Arial,sans-serif;--cf-font-family-serif:Georgia,Cambria,Times New Roman,Times,serif;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
 styleInject(css_248z$8);
@@ -1408,7 +1409,13 @@ const ParameterDefinitionSchema = z.object({
         }),
     })
         .optional(),
-    contentTypes: z.array(z.string()),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
     passToNodes: z.array(PassToNodeSchema).optional(),
 });
 const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
@@ -1428,7 +1435,7 @@ const ComponentSettingsSchema = z
     variableDefinitions: ComponentVariablesSchema,
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    prebindingDefinitions: z.array(PrebindingDefinitionSchema).length(1).optional(),
+    prebindingDefinitions: z.array(PrebindingDefinitionSchema).max(1).optional(),
 })
     .strict();
 z.object({
@@ -1634,6 +1641,419 @@ class DebugLogger {
 DebugLogger.instance = null;
 DebugLogger.getInstance();
 
+const isLink = (maybeLink) => {
+    if (maybeLink === null)
+        return false;
+    if (typeof maybeLink !== 'object')
+        return false;
+    const link = maybeLink;
+    return Boolean(link.sys?.id) && link.sys?.type === 'Link' && Boolean(link.sys?.linkType);
+};
+
+/**
+ * This module encapsulates format of the path to a deep reference.
+ */
+const parseDataSourcePathIntoFieldset = (path) => {
+    const parsedPath = parseDeepPath(path);
+    if (null === parsedPath) {
+        throw new Error(`Cannot parse path '${path}' as deep path`);
+    }
+    return parsedPath.fields.map((field) => [null, field, '~locale']);
+};
+/**
+ * Detects if paths is valid deep-path, like:
+ *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+ * or regular, like:
+ *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
+ * @returns
+ */
+const isDeepPath = (deepPathCandidate) => {
+    const deepPathParsed = parseDeepPath(deepPathCandidate);
+    if (!deepPathParsed) {
+        return false;
+    }
+    return deepPathParsed.fields.length > 1;
+};
+const parseDeepPath = (deepPathCandidate) => {
+    // ALGORITHM:
+    // We start with deep path in form:
+    // /uuid123/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+    // First turn string into array of segments
+    //      ['', 'uuid123', 'fields', 'mainStory', '~locale', 'fields', 'cover', '~locale', 'fields', 'title', '~locale']
+    // Then group segments into intermediate represenatation - chunks, where each non-initial chunk starts with 'fields'
+    //      [
+    //        [ "", "uuid123" ],
+    //        [ "fields", "mainStory", "~locale" ],
+    //        [ "fields", "cover", "~locale" ],
+    //        [ "fields", "title", "~locale" ]
+    //      ]
+    // Then check "initial" chunk for corretness
+    // Then check all "field-leading" chunks for correctness
+    const isValidInitialChunk = (initialChunk) => {
+        // must have start with '' and have at least 2 segments, second non-empty
+        // eg. /-_432uuid123123
+        return /^\/([^/^~]+)$/.test(initialChunk.join('/'));
+    };
+    const isValidFieldChunk = (fieldChunk) => {
+        // must start with 'fields' and have at least 3 segments, second non-empty and last segment must be '~locale'
+        // eg. fields/-32234mainStory/~locale
+        return /^fields\/[^/^~]+\/~locale$/.test(fieldChunk.join('/'));
+    };
+    const deepPathSegments = deepPathCandidate.split('/');
+    const chunks = chunkSegments(deepPathSegments, { startNextChunkOnElementEqualTo: 'fields' });
+    if (chunks.length <= 1) {
+        return null; // malformed path, even regular paths have at least 2 chunks
+    }
+    else if (chunks.length === 2) {
+        return null; // deep paths have at least 3 chunks
+    }
+    // With 3+ chunks we can now check for deep path correctness
+    const [initialChunk, ...fieldChunks] = chunks;
+    if (!isValidInitialChunk(initialChunk)) {
+        return null;
+    }
+    if (!fieldChunks.every(isValidFieldChunk)) {
+        return null;
+    }
+    return {
+        key: initialChunk[1], // pick uuid from initial chunk ['','uuid123'],
+        fields: fieldChunks.map((fieldChunk) => fieldChunk[1]), // pick  only fieldName eg. from  ['fields','mainStory', '~locale'] we pick `mainStory`
+    };
+};
+const chunkSegments = (segments, { startNextChunkOnElementEqualTo }) => {
+    const chunks = [];
+    let currentChunk = [];
+    const isSegmentBeginningOfChunk = (segment) => segment === startNextChunkOnElementEqualTo;
+    const excludeEmptyChunks = (chunk) => chunk.length > 0;
+    for (let i = 0; i < segments.length; i++) {
+        const isInitialElement = i === 0;
+        const segment = segments[i];
+        if (isInitialElement) {
+            currentChunk = [segment];
+        }
+        else if (isSegmentBeginningOfChunk(segment)) {
+            chunks.push(currentChunk);
+            currentChunk = [segment];
+        }
+        else {
+            currentChunk.push(segment);
+        }
+    }
+    chunks.push(currentChunk);
+    return chunks.filter(excludeEmptyChunks);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function get(obj, path) {
+    if (!path.length) {
+        return obj;
+    }
+    try {
+        const [currentPath, ...nextPath] = path;
+        return get(obj[currentPath], nextPath);
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+const isEntry = (value) => {
+    return (null !== value &&
+        typeof value === 'object' &&
+        'sys' in value &&
+        value.sys?.type === 'Entry');
+};
+const isAsset = (value) => {
+    return (null !== value &&
+        typeof value === 'object' &&
+        'sys' in value &&
+        value.sys?.type === 'Asset');
+};
+
+function deepFreeze(obj) {
+    const propNames = Object.getOwnPropertyNames(obj);
+    for (const name of propNames) {
+        const value = obj[name];
+        if (value && typeof value === 'object') {
+            deepFreeze(value);
+        }
+    }
+    return Object.freeze(obj);
+}
+
+/**
+ * Base Store for entities
+ * Can be extended for the different loading behaviours (editor, production, ..)
+ */
+class EntityStoreBase {
+    constructor({ entities, locale }) {
+        /* serialized */ this.entryMap = new Map();
+        /* serialized */ this.assetMap = new Map();
+        this.locale = locale;
+        for (const entity of entities) {
+            this.addEntity(entity);
+        }
+    }
+    get entities() {
+        return [...this.entryMap.values(), ...this.assetMap.values()];
+    }
+    updateEntity(entity) {
+        this.addEntity(entity);
+    }
+    getEntryOrAsset(linkOrEntryOrAsset, path) {
+        if (isDeepPath(path)) {
+            return this.getDeepEntry(linkOrEntryOrAsset, path);
+        }
+        let entity;
+        if (isLink(linkOrEntryOrAsset)) {
+            const resolvedEntity = linkOrEntryOrAsset.sys.linkType === 'Entry'
+                ? this.entryMap.get(linkOrEntryOrAsset.sys.id)
+                : this.assetMap.get(linkOrEntryOrAsset.sys.id);
+            if (!resolvedEntity || resolvedEntity.sys.type !== linkOrEntryOrAsset.sys.linkType) {
+                console.warn(`Experience references unresolved entity: ${JSON.stringify(linkOrEntryOrAsset)}`);
+                return;
+            }
+            entity = resolvedEntity;
+        }
+        else if (isAsset(linkOrEntryOrAsset) || isEntry(linkOrEntryOrAsset)) {
+            // We already have the complete entity in preview & delivery (resolved by the CMA client)
+            entity = linkOrEntryOrAsset;
+        }
+        else {
+            throw new Error(`Unexpected object when resolving entity: ${JSON.stringify(linkOrEntryOrAsset)}`);
+        }
+        return entity;
+    }
+    /**
+     * @deprecated in the base class this should be simply an abstract method
+     * @param entityLink
+     * @param path
+     * @returns
+     */
+    getValue(entityLink, path) {
+        const entity = this.getEntity(entityLink.sys.linkType, entityLink.sys.id);
+        if (!entity) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Unresolved entity reference: ${entityLink.sys.linkType} with ID ${entityLink.sys.id}`);
+            return;
+        }
+        return get(entity, path);
+    }
+    getEntityFromLink(link) {
+        const resolvedEntity = link.sys.linkType === 'Entry'
+            ? this.entryMap.get(link.sys.id)
+            : this.assetMap.get(link.sys.id);
+        if (!resolvedEntity || resolvedEntity.sys.type !== link.sys.linkType) {
+            console.warn(`Experience references unresolved entity: ${JSON.stringify(link)}`);
+            return;
+        }
+        return resolvedEntity;
+    }
+    getAssetById(assetId) {
+        const asset = this.assetMap.get(assetId);
+        if (!asset) {
+            console.warn(`Asset with ID "${assetId}" is not found in the store`);
+            return;
+        }
+        return asset;
+    }
+    getEntryById(entryId) {
+        const entry = this.entryMap.get(entryId);
+        if (!entry) {
+            console.warn(`Entry with ID "${entryId}" is not found in the store`);
+            return;
+        }
+        return entry;
+    }
+    getEntitiesFromMap(type, ids) {
+        const resolved = [];
+        const missing = [];
+        for (const id of ids) {
+            const entity = this.getEntity(type, id);
+            if (entity) {
+                resolved.push(entity);
+            }
+            else {
+                missing.push(id);
+            }
+        }
+        return {
+            resolved,
+            missing,
+        };
+    }
+    addEntity(entity) {
+        if (isAsset(entity)) {
+            // cloned and frozen
+            this.assetMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+        }
+        else if (isEntry(entity)) {
+            // cloned and frozen
+            this.entryMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+        }
+        else {
+            throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(entity)}'`);
+        }
+    }
+    async fetchAsset(id) {
+        const { resolved, missing } = this.getEntitiesFromMap('Asset', [id]);
+        if (missing.length) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Asset "${id}" is not in the store`);
+            return;
+        }
+        return resolved[0];
+    }
+    async fetchAssets(ids) {
+        const { resolved, missing } = this.getEntitiesFromMap('Asset', ids);
+        if (missing.length) {
+            throw new Error(`Missing assets in the store (${missing.join(',')})`);
+        }
+        return resolved;
+    }
+    async fetchEntry(id) {
+        const { resolved, missing } = this.getEntitiesFromMap('Entry', [id]);
+        if (missing.length) {
+            // TODO: move to `debug` utils once it is extracted
+            console.warn(`Entry "${id}" is not in the store`);
+            return;
+        }
+        return resolved[0];
+    }
+    async fetchEntries(ids) {
+        const { resolved, missing } = this.getEntitiesFromMap('Entry', ids);
+        if (missing.length) {
+            throw new Error(`Missing assets in the store (${missing.join(',')})`);
+        }
+        return resolved;
+    }
+    getDeepEntry(linkOrEntryOrAsset, path) {
+        const resolveFieldset = (unresolvedFieldset, headEntry) => {
+            const resolvedFieldset = [];
+            let entityToResolveFieldsFrom = headEntry;
+            for (let i = 0; i < unresolvedFieldset.length; i++) {
+                const isLeaf = i === unresolvedFieldset.length - 1; // with last row, we are not expecting a link, but a value
+                const row = unresolvedFieldset[i];
+                const [, field, _localeQualifier] = row;
+                if (!entityToResolveFieldsFrom) {
+                    throw new Error(`Logic Error: Cannot resolve field ${field} of a fieldset as there is no entity to resolve it from.`);
+                }
+                if (isLeaf) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    break;
+                }
+                const fieldValue = get(entityToResolveFieldsFrom, ['fields', field]);
+                if (undefined === fieldValue) {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Cannot resolve field Link<${entityToResolveFieldsFrom.sys.type}>(sys.id=${entityToResolveFieldsFrom.sys.id}).fields[${field}] as field value is not defined`,
+                    };
+                }
+                else if (isLink(fieldValue)) {
+                    const entity = this.getEntityFromLink(fieldValue);
+                    if (entity === undefined) {
+                        return {
+                            resolvedFieldset,
+                            isFullyResolved: false,
+                            reason: `Field reference Link (sys.id=${fieldValue.sys.id}) not found in the EntityStore, waiting...`,
+                        };
+                    }
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = entity; // we move up
+                }
+                else if (isAsset(fieldValue) || isEntry(fieldValue)) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = fieldValue; // we move up
+                }
+                else {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Deep path points to an invalid field value of type '${typeof fieldValue}' (value=${fieldValue})`,
+                    };
+                }
+            }
+            return {
+                resolvedFieldset,
+                isFullyResolved: true,
+            };
+        };
+        const headEntity = isLink(linkOrEntryOrAsset)
+            ? this.getEntityFromLink(linkOrEntryOrAsset)
+            : linkOrEntryOrAsset;
+        if (undefined === headEntity) {
+            return;
+        }
+        const unresolvedFieldset = parseDataSourcePathIntoFieldset(path);
+        // The purpose here is to take this intermediate representation of the deep-path
+        // and to follow the links to the leaf-entity and field
+        // in case we can't follow till the end, we should signal that there was null-reference in the path
+        const { resolvedFieldset, isFullyResolved, reason } = resolveFieldset(unresolvedFieldset, headEntity);
+        if (!isFullyResolved) {
+            reason &&
+                console.debug(`[exp-builder.sdk::EntityStoreBased::getValueDeep()] Deep path wasn't resolved till leaf node, falling back to undefined, because: ${reason}`);
+            return;
+        }
+        const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
+        return leafEntity;
+    }
+    getEntity(type, id) {
+        if (type === 'Asset') {
+            return this.assetMap.get(id);
+        }
+        return this.entryMap.get(id);
+    }
+    toJSON() {
+        return {
+            entryMap: Object.fromEntries(this.entryMap),
+            assetMap: Object.fromEntries(this.assetMap),
+            locale: this.locale,
+        };
+    }
+}
+
+class UninitializedEntityStore extends EntityStoreBase {
+    constructor() {
+        super({ entities: [], locale: 'uninitialized-locale-in-uninitialized-entity-store' });
+    }
+}
+
+create((set, get) => ({
+    // The UninitializedEntityStore is a placeholder instance and is here to highlight the
+    // // fact that it's not used by anything until during loading lifecycle it'sreplaced by real entity store:
+    //   - in Preview+Delivery mode: right after we fetch Expereince and it entities
+    //   - in EDITOR (VisualEditor) mode: right after the VisualEditor is async imported and initialize event happens
+    entityStore: new UninitializedEntityStore(),
+    areEntitiesFetched: false,
+    setEntitiesFetched(fetched) {
+        set({ areEntitiesFetched: fetched });
+    },
+    resolveAssetById(assetId) {
+        if (!assetId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getAssetById(assetId);
+    },
+    resolveEntryById(entryId) {
+        if (!entryId)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntryById(entryId);
+    },
+    resolveEntity(link) {
+        if (!link)
+            return undefined;
+        const { entityStore } = get();
+        return entityStore.getEntityFromLink(link);
+    },
+    resetEntityStore(entityStore) {
+        set({
+            entityStore,
+            areEntitiesFetched: false,
+        });
+    },
+}));
+
 var VisualEditorMode;
 (function (VisualEditorMode) {
     VisualEditorMode["LazyLoad"] = "lazyLoad";