@stackbit/cms-core 0.4.5-develop.1 → 0.4.6-develop.1

package/src/utils/asset-sources-utils.ts

@@ -0,0 +1,106 @@
+import { Config } from '@stackbit/sdk';
+import { AssetSource, DistributiveOmit, FieldImageProps } from '@stackbit/types';
+import * as ContentStoreTypes from '../types';
+
+export function getAssetSourcesForClient(stackbitConfig: Config | null): DistributiveOmit<AssetSource, 'transform' | 'preview'>[] {
+    if (!stackbitConfig) {
+        return [];
+    }
+    const assetSources = stackbitConfig.assetSources ?? [];
+    return assetSources.reduce((accum: DistributiveOmit<AssetSource, 'transform' | 'preview'>[], assetSource: AssetSource) => {
+        if (assetSource.type === 'iframe') {
+            if (!assetSource.name || !assetSource.url) {
+                return accum;
+            }
+            const { transform, preview, ...rest } = assetSource;
+            return accum.concat(rest);
+        } else {
+            const buildInAssetSources = ['cloudinary'];
+            const name = assetSource.name ?? (buildInAssetSources.includes(assetSource.type) ? assetSource.type : null);
+            if (!name) {
+                return accum;
+            }
+            const { transform, preview, ...rest } = assetSource;
+            return accum.concat({
+                ...rest,
+                name: name
+            });
+        }
+        return accum;
+    }, []);
+}
+
+export function transformAssetSourceDataForAssetSource(sourceData: any, assetSource: AssetSource): any {
+    if (typeof assetSource.transform === 'function') {
+        return assetSource.transform({ assetData: sourceData });
+    } else {
+        return sourceData;
+    }
+}
+
+export function getImageFieldsFromSourceData({
+    sourceData,
+    imageModelField,
+    assetSources
+}: {
+    sourceData: any;
+    imageModelField: FieldImageProps;
+    assetSources: AssetSource[];
+}): ContentStoreTypes.ImageFields {
+    const imageAssetSource = getAssetSourceBySourceName(assetSources, imageModelField.source);
+
+    if (imageAssetSource?.preview) {
+        const preview = typeof imageAssetSource.preview === 'function' ? imageAssetSource.preview({ assetData: sourceData }) : imageAssetSource.preview;
+        return {
+            title: {
+                type: 'string',
+                value: preview?.title ?? ''
+            },
+            url: {
+                type: 'string',
+                value: preview.image ?? ''
+            }
+        };
+    }
+
+    if (imageAssetSource?.type === 'cloudinary') {
+        return {
+            title: {
+                type: 'string',
+                value: sourceData?.public_id
+            },
+            url: {
+                type: 'string',
+                value: sourceData?.derived?.[0]?.secure_url ?? sourceData?.secure_url
+            }
+        };
+    }
+
+    return {
+        title: {
+            type: 'string',
+            value: ''
+        },
+        url: {
+            type: 'string',
+            value: typeof sourceData === 'string' ? sourceData : ''
+        }
+    };
+}
+
+export function getAssetSourceBySourceName(assetSources: AssetSource[], assetSourceName: string | undefined): AssetSource | undefined {
+    if (!assetSourceName) {
+        return undefined;
+    }
+    const assetSource = assetSources.find((assetSources) => assetSources.name === assetSourceName);
+    if (!assetSource) {
+        // for build-in asset sources, use the name of the source (field[type=image].source) as its type
+        if (assetSourceName === 'cloudinary') {
+            return {
+                type: assetSourceName,
+                name: assetSourceName
+            };
+        }
+    }
+    return assetSource;
+}

package/src/utils/create-update-csi-docs.ts

@@ -2,12 +2,20 @@ import _ from 'lodash';
 import slugify from 'slugify';
 
 import { Model as SDKModel } from '@stackbit/sdk';
-import { Model as CSIModel, Field, FieldSpecificProps, UpdateOperationListFieldItem, isOneOfFieldTypes } from '@stackbit/types';
+import {
+    Model as CSIModel,
+    Field,
+    FieldSpecificProps,
+    UpdateOperationListFieldItem,
+    isOneOfFieldTypes,
+    isModelFieldSpecificPropsOneOfFieldTypes
+} from '@stackbit/types';
 import { fieldPathToString, mapPromise } from '@stackbit/utils';
 import * as CSITypes from '@stackbit/types';
 
 import * as ContentStoreTypes from '../types';
 import { getContentSourceId, getUserContextForSrcType, updateOperationValueFieldWithCrossReference } from '../content-store-utils';
+import { getAssetSourceBySourceName, transformAssetSourceDataForAssetSource } from './asset-sources-utils';
 
 export type CreateDocumentCallback = ({
     updateOperationFields,
@@ -92,12 +100,14 @@ export async function createDocumentRecursively({
     modelName,
     contentSourceId,
     contentSourceDataById,
+    assetSources,
     createDocument
 }: {
     object?: Record<string, any>;
     modelName: string;
     contentSourceId: string;
     contentSourceDataById: Record<string, ContentStoreTypes.ContentSourceData>;
+    assetSources: CSITypes.AssetSource[];
     createDocument: CreateDocumentCallback;
 }): Promise<{ documentId: string; newRefDocumentIds: string[] }> {
     const contentSourceData = contentSourceDataById[contentSourceId];
@@ -120,15 +130,21 @@ export async function createDocumentRecursively({
         if (object && slugField && (slugField in object || '_stackbit_slug' in object)) {
             const slugFieldValue = object[slugField] || object['_stackbit_slug'];
             object[slugField] = sanitizeSlug(slugFieldValue);
-            if (!modelFields.find(field => field.name === slugField)) {
-                modelFields = [...modelFields, {
-                    type: 'slug',
-                    name: slugField
-                }];
-                csiModelFields = [...csiModelFields, {
-                    type: 'slug',
-                    name: slugField
-                }];
+            if (!modelFields.find((field) => field.name === slugField)) {
+                modelFields = [
+                    ...modelFields,
+                    {
+                        type: 'slug',
+                        name: slugField
+                    }
+                ];
+                csiModelFields = [
+                    ...csiModelFields,
+                    {
+                        type: 'slug',
+                        name: slugField
+                    }
+                ];
             }
         }
     }
@@ -142,6 +158,7 @@ export async function createDocumentRecursively({
         csiModelMap,
         contentSourceId,
         contentSourceDataById,
+        assetSources,
         createDocument
     });
 
@@ -161,7 +178,8 @@ function extractTokensFromString(input: string): string[] {
 }
 
 function sanitizeSlug(slug?: string) {
-    return slug?.split('/')
+    return slug
+        ?.split('/')
         .map((part) => slugify(part, { lower: true }))
         .join('/');
 }
@@ -175,6 +193,7 @@ async function createObjectRecursively({
     csiModelMap,
     contentSourceId,
     contentSourceDataById,
+    assetSources,
     createDocument
 }: {
     object?: Record<string, any>;
@@ -185,6 +204,7 @@ async function createObjectRecursively({
     csiModelMap: Record<string, CSIModel>;
     contentSourceId: string;
     contentSourceDataById: Record<string, ContentStoreTypes.ContentSourceData>;
+    assetSources: CSITypes.AssetSource[];
     createDocument: CreateDocumentCallback;
 }): Promise<{
     fields: Record<string, CSITypes.UpdateOperationField>;
@@ -233,6 +253,7 @@ async function createObjectRecursively({
                 csiModelMap,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             result.fields[fieldName] = fieldResult.field;
@@ -256,6 +277,7 @@ async function createUpdateOperationFieldRecursively({
     csiModelMap,
     contentSourceId,
     contentSourceDataById,
+    assetSources,
     createDocument
 }: {
     value: any;
@@ -266,6 +288,7 @@ async function createUpdateOperationFieldRecursively({
     csiModelMap: Record<string, CSIModel>;
     contentSourceId: string;
     contentSourceDataById: Record<string, ContentStoreTypes.ContentSourceData>;
+    assetSources: CSITypes.AssetSource[];
     createDocument: CreateDocumentCallback;
 }): Promise<{ field: CSITypes.UpdateOperationField; newRefDocumentIds: string[] }> {
     if (csiModelField.type === 'object') {
@@ -281,6 +304,7 @@ async function createUpdateOperationFieldRecursively({
             csiModelMap,
             contentSourceId,
             contentSourceDataById,
+            assetSources,
             createDocument
         });
         return {
@@ -320,6 +344,7 @@ async function createUpdateOperationFieldRecursively({
             csiModelMap,
             contentSourceId,
             contentSourceDataById,
+            assetSources,
             createDocument
         });
         return {
@@ -332,15 +357,33 @@ async function createUpdateOperationFieldRecursively({
         };
     } else if (csiModelField.type === 'image') {
         let refId: string | undefined;
-        if (csiModelField.source === 'cloudinary') {
+        const assetSource = getAssetSourceBySourceName(assetSources, csiModelField.source);
+        if (assetSource) {
+            // omit $$type for backwards compatibility with legacy presets
+            const sourceData = _.omit(value, ['$$type']);
             return {
                 field: {
                     type: 'image',
-                    value: _.omit(value, ['$$type']) // backwards compatibility with legacy presets
+                    value: transformAssetSourceDataForAssetSource(sourceData, assetSource)
                 },
                 newRefDocumentIds: []
             };
         }
+        // - when setting images in git, the UpdateOperationField is:
+        //   { type: 'image', value: 'stackbit_asset_id:static:images/elephants.jpg' }
+        //   so the 'value' will be a string 'stackbit_asset_id:static:images/elephants.jpg'
+        // - when setting images in Contentful, the UpdateOperationField is:
+        //   { type: 'image', value: '6rEF3N6lFlEscOq8U63gYg' }
+        //   so the 'value' will be a string representing the Asset ID - '6rEF3N6lFlEscOq8U63gYg'
+        // - when creating images from presets or default values the asset ID can
+        //   can be specified as $$ref or as plain value
+        // - when duplicating documents with images, the duplicated image field will be:
+        //   { $$ref: '...' }
+        // TODO: A bug!
+        // - when the image is specified as an absolute URL - https://... or //...
+        //   the absolute URL value will will be set as 'refId', with field
+        //   type: 'reference'. There is currently no way to solve it because we
+        //   use 'image' type both for referenced images and for literal images.
         if (_.isPlainObject(value)) {
             refId = value.$$ref ?? value.url;
         } else {
@@ -391,6 +434,7 @@ async function createUpdateOperationFieldRecursively({
                 modelName,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             return {
@@ -431,6 +475,7 @@ async function createUpdateOperationFieldRecursively({
                 modelName,
                 contentSourceId: getContentSourceId(refSrcType, refProjectId),
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             _newRefDocumentIds.push(documentId, ...newRefDocumentIds);
@@ -462,6 +507,7 @@ async function createUpdateOperationFieldRecursively({
                 csiModelMap,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             if (result.field.type === 'list') {
@@ -491,6 +537,20 @@ async function createUpdateOperationFieldRecursively({
             },
             newRefDocumentIds: []
         };
+    } else if (isModelFieldSpecificPropsOneOfFieldTypes(csiModelField, ['string', 'text', 'json']) && modelField.type === 'image') {
+        if (modelField.source) {
+            const assetSource = getAssetSourceBySourceName(assetSources, modelField.source);
+            if (assetSource) {
+                value = transformAssetSourceDataForAssetSource(value, assetSource);
+            }
+        }
+        return {
+            field: {
+                type: csiModelField.type,
+                value: csiModelField.type !== 'json' && _.isPlainObject(value) ? JSON.stringify(value) : value
+            },
+            newRefDocumentIds: []
+        };
     }
     return {
         field: {
@@ -510,6 +570,7 @@ export async function convertOperationField({
     csiModelMap,
     contentSourceId,
     contentSourceDataById,
+    assetSources,
     createDocument
 }: {
     operationField: ContentStoreTypes.UpdateOperationField;
@@ -520,6 +581,7 @@ export async function convertOperationField({
     csiModelMap: Record<string, SDKModel>;
     contentSourceId: string;
     contentSourceDataById: Record<string, ContentStoreTypes.ContentSourceData>;
+    assetSources: CSITypes.AssetSource[];
     createDocument: CreateDocumentCallback;
 }): Promise<CSITypes.UpdateOperationField> {
     switch (operationField.type) {
@@ -536,6 +598,7 @@ export async function convertOperationField({
                 csiModelMap,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             return {
@@ -558,6 +621,7 @@ export async function convertOperationField({
                 csiModelMap,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             return {
@@ -600,6 +664,7 @@ export async function convertOperationField({
                         csiModelMap,
                         contentSourceId,
                         contentSourceDataById,
+                        assetSources,
                         createDocument
                     });
                     if (result.field.type === 'list') {
@@ -656,6 +721,7 @@ export async function convertOperationField({
                 csiModelMap,
                 contentSourceId,
                 contentSourceDataById,
+                assetSources,
                 createDocument
             });
             return result.field;

package/src/utils/csi-to-store-docs-converter.ts

@@ -16,6 +16,7 @@ import * as CSITypes from '@stackbit/types';
 import * as ContentStoreTypes from '../types';
 import { IMAGE_MODEL } from '../common/common-schema';
 import { BackCompatContentSourceInterface } from './backward-compatibility';
+import { getImageFieldsFromSourceData } from './asset-sources-utils';
 
 export function mapCSIAssetsToStoreAssets({
     csiAssets,
@@ -98,12 +99,14 @@ export function mapCSIDocumentsToStoreDocuments({
     contentSourceInstance,
     modelMap,
     defaultLocaleCode,
+    assetSources,
     createConfigDelegate
 }: {
     csiDocuments: CSITypes.Document[];
     contentSourceInstance: BackCompatContentSourceInterface;
     modelMap: Record<string, Model>;
     defaultLocaleCode?: string;
+    assetSources: CSITypes.AssetSource[];
     createConfigDelegate: () => CSITypes.ConfigDelegate;
 }): ContentStoreTypes.Document[] {
     const meta = getMetadataFromContentStore({ contentSourceInstance });
@@ -114,6 +117,7 @@ export function mapCSIDocumentsToStoreDocuments({
             modelMap,
             defaultLocaleCode,
             meta,
+            assetSources,
             createConfigDelegate
         })
     );
@@ -125,6 +129,7 @@ function mapCSIDocumentToStoreDocument({
     modelMap,
     defaultLocaleCode,
     meta,
+    assetSources,
     createConfigDelegate
 }: {
     csiDocument: CSITypes.Document;
@@ -132,6 +137,7 @@ function mapCSIDocumentToStoreDocument({
     modelMap: Record<string, Model>;
     defaultLocaleCode?: string;
     meta: { srcType: string; srcProjectId: string; srcProjectUrl: string; srcEnvironment: string };
+    assetSources: CSITypes.AssetSource[];
     createConfigDelegate: () => CSITypes.ConfigDelegate;
 }): ContentStoreTypes.Document {
     return omitByNil({
@@ -166,6 +172,7 @@ function mapCSIDocumentToStoreDocument({
                 parentDocument: csiDocument,
                 modelMap,
                 defaultLocaleCode,
+                assetSources,
                 createConfigDelegate
             }
         })
@@ -178,6 +185,7 @@ type MapContext = {
     parentDocument: CSITypes.Document;
     modelMap: Record<string, Model>;
     defaultLocaleCode?: string;
+    assetSources: CSITypes.AssetSource[];
     createConfigDelegate: () => CSITypes.ConfigDelegate;
 };
 
@@ -237,6 +245,7 @@ function mapCSIFieldToStoreField({
         case 'date':
         case 'datetime':
         case 'enum':
+        // TODO: 'json' and 'style' fields can be remapped from 'string' and 'text', in this case parse the JSON object
         case 'json':
         case 'style':
         case 'color':
@@ -248,10 +257,14 @@ function mapCSIFieldToStoreField({
                 ...csiDocumentField,
                 type: modelField.type
             } as ContentStoreTypes.DocumentField;
+        case 'image':
+            // The 'image' model field can be a 'reference' document field in CMSes like Sanity and Contentful.
+            if (csiDocumentField.type === 'reference') {
+                return csiDocumentField;
+            }
+            return mapImageField(csiDocumentField, modelField, context.assetSources);
         // Don't override types of the following document fields.
-        // An 'image' model field can be a 'reference' document field in CMSes like Sanity and Contentful.
         // Rest of the fields must have the same type across document and model fields.
-        case 'image':
         case 'file':
         case 'reference':
             return csiDocumentField as ContentStoreTypes.DocumentField;
@@ -275,6 +288,93 @@ function mapCSIFieldToStoreField({
     }
 }
 
+function mapImageField(
+    csiDocumentField: CSITypes.DocumentField,
+    imageModelField: CSITypes.FieldImageProps,
+    assetSources: CSITypes.AssetSource[]
+): ContentStoreTypes.DocumentImageField {
+    // the image can be remapped from 'string', 'text' or 'json' fields
+    if (isDocumentFieldOneOfFieldTypes(csiDocumentField, ['string', 'text', 'json'])) {
+        try {
+            if (!isLocalizedField(csiDocumentField)) {
+                if (imageModelField.source) {
+                    return omitByNil({
+                        type: 'image',
+                        source: imageModelField.source,
+                        sourceData: csiDocumentField.value,
+                        fields: getImageFieldsFromSourceData({
+                            sourceData: csiDocumentField.value,
+                            imageModelField: imageModelField,
+                            assetSources
+                        })
+                    });
+                }
+            } else {
+                return omitByNil({
+                    type: 'image',
+                    source: imageModelField.source,
+                    localized: true,
+                    locales: _.mapValues(csiDocumentField.locales, (locale) => {
+                        return {
+                            locale: locale.locale,
+                            sourceData: locale.value,
+                            fields: getImageFieldsFromSourceData({
+                                sourceData: locale.value,
+                                imageModelField: imageModelField,
+                                assetSources
+                            })
+                        };
+                    })
+                });
+            }
+        } catch (e) {
+            return {
+                type: 'image',
+                ...(isLocalizedField(csiDocumentField) ? { localized: true, locales: {} } : { isUnset: true })
+            };
+        }
+    }
+    if (csiDocumentField.type !== 'image') {
+        return {
+            type: 'image',
+            ...(isLocalizedField(csiDocumentField) ? { localized: true, locales: {} } : { isUnset: true })
+        };
+    }
+    if (!isLocalizedField(csiDocumentField)) {
+        return omitByNil({
+            type: 'image',
+            source: csiDocumentField.source,
+            sourceData: csiDocumentField.sourceData,
+            fields:
+                csiDocumentField.fields ??
+                getImageFieldsFromSourceData({
+                    sourceData: csiDocumentField.sourceData,
+                    imageModelField: imageModelField,
+                    assetSources
+                })
+        });
+    }
+    return omitByNil({
+        type: 'image',
+        source: csiDocumentField.source,
+        localized: true,
+        locales: _.mapValues(csiDocumentField.locales, (locale) => {
+            return {
+                locale: locale.locale,
+                sourceData: locale.sourceData,
+                fields:
+                    // for backward compatibility use, fields if provided
+                    locale.fields ??
+                    getImageFieldsFromSourceData({
+                        sourceData: locale.sourceData,
+                        imageModelField: imageModelField,
+                        assetSources
+                    })
+            };
+        })
+    });
+}
+
 function mapCrossReferenceField(csiDocumentField: CSITypes.DocumentField): ContentStoreTypes.DocumentCrossReferenceField {
     const unlocalizedUnset = {
         type: 'cross-reference',

package/src/utils/duplicate-document.ts

@@ -114,20 +114,18 @@ function mergeObjectWithDocumentField({
             break;
         }
         case 'image': {
+            // if an image value was provided explicitly, use it to override the image
+            // of the matching field in the duplicated document.
             if (typeof value !== 'undefined') {
                 return value;
             }
             const localizedField = getDocumentFieldForLocale(documentField, locale);
-            if (localizedField && !localizedField.isUnset && isPlainObjectOrUndefined(value)) {
+            if (localizedField && !localizedField.isUnset) {
                 if (localizedField?.sourceData) {
                     return localizedField?.sourceData;
                 }
-                //TODO needs testing, looks like we need to use the url field instead of this
-                return mergeObjectWithDocumentFields({
-                    object: value,
-                    documentFields: localizedField.fields,
-                    ...context
-                });
+                const localizedUrl = getDocumentFieldForLocale(localizedField.fields.url, locale);
+                return localizedUrl?.value;
             }
             break;
         }

package/src/utils/store-to-csi-docs-converter.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import * as CSITypes from '@stackbit/types';
+import { omitByNil } from '@stackbit/utils';
 import * as ContentStoreTypes from '../types';
 
 export function mapStoreDocumentsToCSIDocumentsWithSource(documents: ContentStoreTypes.Document[]): CSITypes.DocumentWithSource[] {
@@ -92,26 +93,26 @@ function mapStoreFieldToCSIField(documentField: ContentStoreTypes.DocumentField)
                 if (_.isEmpty(documentField.locales)) {
                     return;
                 }
-                return {
+                return omitByNil({
                     type: 'image',
                     localized: true,
                     source: documentField.source,
-                    sourceData: documentField.sourceData,
-                    locales: _.mapValues(documentField.locales, (locale) => ({
+                    locales: _.mapValues(documentField.locales, (locale) => omitByNil({
                         locale: locale.locale,
-                        fields: mapStoreFieldsToCSIFields(locale.fields)
+                        sourceData: locale.sourceData,
+                        ...(locale.sourceData ? null : { fields: mapStoreFieldsToCSIFields(locale.fields) })
                     }))
-                } as CSITypes.DocumentImageFieldLocalized;
+                }) as CSITypes.DocumentImageFieldLocalized;
             }
             if (documentField.isUnset) {
                 return;
             }
-            return {
+            return omitByNil({
                 type: 'image',
                 source: documentField.source,
                 sourceData: documentField.sourceData,
-                fields: mapStoreFieldsToCSIFields(documentField.fields)
-            } as CSITypes.DocumentImageFieldNonLocalized;
+                ...(documentField.sourceData ? null : { fields: mapStoreFieldsToCSIFields(documentField.fields) })
+            }) as CSITypes.DocumentImageFieldNonLocalized;
         }
         case 'object': {
             if (documentField.localized) {