@evfrenkel/decap-cms-core 3.13.0-image-conversions.0

package/src/lib/i18n.ts

@@ -0,0 +1,462 @@
+import { Map, List } from 'immutable';
+import set from 'lodash/set';
+import groupBy from 'lodash/groupBy';
+import escapeRegExp from 'lodash/escapeRegExp';
+
+import { selectEntrySlug } from '../reducers/collections';
+
+import type { Collection, Entry, EntryDraft, EntryField, EntryMap } from '../types/redux';
+import type { EntryValue } from '../valueObjects/Entry';
+
+export const I18N = 'i18n';
+
+export enum I18N_STRUCTURE {
+  MULTIPLE_FOLDERS = 'multiple_folders',
+  MULTIPLE_FILES = 'multiple_files',
+  SINGLE_FILE = 'single_file',
+}
+
+export enum I18N_FIELD {
+  TRANSLATE = 'translate',
+  DUPLICATE = 'duplicate',
+  NONE = 'none',
+}
+
+export function hasI18n(collection: Collection) {
+  return collection.has(I18N);
+}
+
+export type I18nInfo = {
+  locales: string[];
+  defaultLocale: string;
+  structure: I18N_STRUCTURE;
+};
+
+export function getI18nInfo(collection: Collection) {
+  if (!hasI18n(collection)) {
+    return {};
+  }
+  const { structure, locales, default_locale: defaultLocale } = collection.get(I18N).toJS();
+  return { structure, locales, defaultLocale } as I18nInfo;
+}
+
+export function getI18nFilesDepth(collection: Collection, depth: number) {
+  const { structure } = getI18nInfo(collection) as I18nInfo;
+  if (structure === I18N_STRUCTURE.MULTIPLE_FOLDERS) {
+    return depth + 1;
+  }
+  return depth;
+}
+
+export function isFieldTranslatable(field: EntryField, locale: string, defaultLocale: string) {
+  const isTranslatable = locale !== defaultLocale && field.get(I18N) === I18N_FIELD.TRANSLATE;
+  return isTranslatable;
+}
+
+export function isFieldDuplicate(field: EntryField, locale: string, defaultLocale: string) {
+  const isDuplicate = locale !== defaultLocale && field.get(I18N) === I18N_FIELD.DUPLICATE;
+  return isDuplicate;
+}
+
+export function isFieldHidden(field: EntryField, locale: string, defaultLocale: string) {
+  const isHidden = locale !== defaultLocale && field.get(I18N) === I18N_FIELD.NONE;
+  return isHidden;
+}
+
+export function getLocaleDataPath(locale: string) {
+  return [I18N, locale, 'data'];
+}
+
+export function getDataPath(locale: string, defaultLocale: string) {
+  const dataPath = locale !== defaultLocale ? getLocaleDataPath(locale) : ['data'];
+  return dataPath;
+}
+
+export function getFilePath(
+  structure: I18N_STRUCTURE,
+  extension: string,
+  path: string,
+  slug: string,
+  locale: string,
+) {
+  switch (structure) {
+    case I18N_STRUCTURE.MULTIPLE_FOLDERS:
+      return path.replace(`/${slug}`, `/${locale}/${slug}`);
+    case I18N_STRUCTURE.MULTIPLE_FILES:
+      return path.replace(new RegExp(`${escapeRegExp(extension)}$`), `${locale}.${extension}`);
+    case I18N_STRUCTURE.SINGLE_FILE:
+    default:
+      return path;
+  }
+}
+
+export function getLocaleFromPath(structure: I18N_STRUCTURE, extension: string, path: string) {
+  switch (structure) {
+    case I18N_STRUCTURE.MULTIPLE_FOLDERS: {
+      const parts = path.split('/');
+      // filename
+      parts.pop();
+      // locale
+      return parts.pop();
+    }
+    case I18N_STRUCTURE.MULTIPLE_FILES: {
+      const parts = path.slice(0, -`.${extension}`.length);
+      return parts.split('.').pop();
+    }
+    case I18N_STRUCTURE.SINGLE_FILE:
+    default:
+      return '';
+  }
+}
+
+export function getFilePaths(
+  collection: Collection,
+  extension: string,
+  path: string,
+  slug: string,
+) {
+  const { structure, locales } = getI18nInfo(collection) as I18nInfo;
+
+  if (structure === I18N_STRUCTURE.SINGLE_FILE) {
+    return [path];
+  }
+
+  const paths = locales.map(locale =>
+    getFilePath(structure as I18N_STRUCTURE, extension, path, slug, locale),
+  );
+
+  return paths;
+}
+
+export function normalizeFilePath(structure: I18N_STRUCTURE, path: string, locale: string) {
+  switch (structure) {
+    case I18N_STRUCTURE.MULTIPLE_FOLDERS:
+      return path.replace(`${locale}/`, '');
+    case I18N_STRUCTURE.MULTIPLE_FILES:
+      return path.replace(`.${locale}`, '');
+    case I18N_STRUCTURE.SINGLE_FILE:
+    default:
+      return path;
+  }
+}
+
+export function getI18nFiles(
+  collection: Collection,
+  extension: string,
+  entryDraft: EntryMap,
+  entryToRaw: (entryDraft: EntryMap) => string,
+  path: string,
+  slug: string,
+  newPath?: string,
+) {
+  const { structure, defaultLocale, locales } = getI18nInfo(collection) as I18nInfo;
+
+  if (structure === I18N_STRUCTURE.SINGLE_FILE) {
+    const data = locales.reduce((map, locale) => {
+      const dataPath = getDataPath(locale, defaultLocale);
+      return map.set(locale, entryDraft.getIn(dataPath));
+    }, Map<string, unknown>({}));
+    const draft = entryDraft.set('data', data);
+
+    return [
+      {
+        path: getFilePath(structure, extension, path, slug, locales[0]),
+        slug,
+        raw: entryToRaw(draft),
+        ...(newPath && {
+          newPath: getFilePath(structure, extension, newPath, slug, locales[0]),
+        }),
+      },
+    ];
+  }
+
+  const dataFiles = locales
+    .map(locale => {
+      const dataPath = getDataPath(locale, defaultLocale);
+      const draft = entryDraft.set('data', entryDraft.getIn(dataPath));
+      return {
+        path: getFilePath(structure, extension, path, slug, locale),
+        slug,
+        raw: draft.get('data') ? entryToRaw(draft) : '',
+        ...(newPath && {
+          newPath: getFilePath(structure, extension, newPath, slug, locale),
+        }),
+      };
+    })
+    .filter(dataFile => dataFile.raw);
+  return dataFiles;
+}
+
+export function getI18nBackup(
+  collection: Collection,
+  entry: EntryMap,
+  entryToRaw: (entry: EntryMap) => string,
+) {
+  const { locales, defaultLocale } = getI18nInfo(collection) as I18nInfo;
+
+  const i18nBackup = locales
+    .filter(l => l !== defaultLocale)
+    .reduce((acc, locale) => {
+      const dataPath = getDataPath(locale, defaultLocale);
+      const data = entry.getIn(dataPath);
+      if (!data) {
+        return acc;
+      }
+      const draft = entry.set('data', data);
+      return { ...acc, [locale]: { raw: entryToRaw(draft) } };
+    }, {} as Record<string, { raw: string }>);
+
+  return i18nBackup;
+}
+
+export function formatI18nBackup(
+  i18nBackup: Record<string, { raw: string }>,
+  formatRawData: (raw: string) => EntryValue,
+) {
+  const i18n = Object.entries(i18nBackup).reduce((acc, [locale, { raw }]) => {
+    const entry = formatRawData(raw);
+    return { ...acc, [locale]: { data: entry.data } };
+  }, {});
+
+  return i18n;
+}
+
+function applyDefaultI18nValues(
+  collection: Collection,
+  value: EntryValue,
+  defaultLocaleValue: EntryValue,
+) {
+  if (collection.get('fields') === undefined) {
+    return;
+  }
+  collection.get('fields').forEach(field => {
+    if (field && field.get(I18N) === I18N_FIELD.DUPLICATE) {
+      const data = value.data[field.get('name')];
+      if (!data) {
+        value.data[field.get('name')] = defaultLocaleValue.data[field.get('name')];
+      }
+    }
+  });
+}
+
+function mergeValues(
+  collection: Collection,
+  structure: I18N_STRUCTURE,
+  defaultLocale: string,
+  values: { locale: string; value: EntryValue }[],
+) {
+  let defaultEntry = values.find(e => e.locale === defaultLocale);
+  if (!defaultEntry) {
+    defaultEntry = values[0];
+    console.warn(`Could not locale entry for default locale '${defaultLocale}'`);
+  }
+  const i18n = values
+    .filter(e => e.locale !== defaultEntry!.locale)
+    .reduce((acc, { locale, value }) => {
+      const dataPath = getLocaleDataPath(locale);
+      if (defaultEntry) {
+        applyDefaultI18nValues(collection, value, defaultEntry.value);
+      }
+      return set(acc, dataPath, value.data);
+    }, {});
+
+  const path = normalizeFilePath(structure, defaultEntry.value.path, defaultLocale);
+  const slug = selectEntrySlug(collection, path) as string;
+  const entryValue: EntryValue = {
+    ...defaultEntry.value,
+    raw: '',
+    ...i18n,
+    path,
+    slug,
+  };
+
+  return entryValue;
+}
+
+function mergeSingleFileValue(
+  entryValue: EntryValue,
+  defaultLocale: string,
+  locales: string[],
+): EntryValue {
+  const data = entryValue.data[defaultLocale] || {};
+  const i18n = locales
+    .filter(l => l !== defaultLocale)
+    .map(l => ({ locale: l, value: entryValue.data[l] }))
+    .filter(e => e.value)
+    .reduce((acc, e) => {
+      return { ...acc, [e.locale]: { data: e.value } };
+    }, {});
+
+  return {
+    ...entryValue,
+    data,
+    i18n,
+    raw: '',
+  };
+}
+
+export async function getI18nEntry(
+  collection: Collection,
+  extension: string,
+  path: string,
+  slug: string,
+  getEntryValue: (path: string) => Promise<EntryValue>,
+) {
+  const { structure, locales, defaultLocale } = getI18nInfo(collection) as I18nInfo;
+
+  let entryValue: EntryValue;
+  if (structure === I18N_STRUCTURE.SINGLE_FILE) {
+    entryValue = mergeSingleFileValue(await getEntryValue(path), defaultLocale, locales);
+  } else {
+    const entryValuesResults = await Promise.allSettled(
+      locales.map(async locale => {
+        const entryPath = getFilePath(structure, extension, path, slug, locale);
+        const value = await getEntryValue(entryPath);
+        return { value, locale };
+      }),
+    );
+
+    const nonNullValues = entryValuesResults
+      .map(e => (e.status === 'fulfilled' ? e.value : undefined))
+      .filter((e): e is { value: EntryValue; locale: string } => e !== undefined);
+
+    if (nonNullValues.length === 0) {
+      // mergeValues will throw on an empty list, and show the error messages.
+      const [error = new Error('No entry values found for any locale')] = entryValuesResults
+        .map(e => (e.status === 'rejected' ? e.reason : undefined))
+        .filter(e => e !== undefined);
+
+      throw error;
+    }
+
+    entryValue = mergeValues(collection, structure, defaultLocale, nonNullValues);
+  }
+
+  return entryValue;
+}
+
+export function groupEntries(collection: Collection, extension: string, entries: EntryValue[]) {
+  const { structure, defaultLocale, locales } = getI18nInfo(collection) as I18nInfo;
+  if (structure === I18N_STRUCTURE.SINGLE_FILE) {
+    return entries.map(e => mergeSingleFileValue(e, defaultLocale, locales));
+  }
+
+  const grouped = groupBy(
+    entries.map(e => ({
+      locale: getLocaleFromPath(structure, extension, e.path) as string,
+      value: e,
+    })),
+    ({ locale, value: e }) => {
+      return normalizeFilePath(structure, e.path, locale);
+    },
+  );
+
+  const groupedEntries = Object.values(grouped).reduce((acc, values) => {
+    const entryValue = mergeValues(collection, structure, defaultLocale, values);
+    return [...acc, entryValue];
+  }, [] as EntryValue[]);
+
+  return groupedEntries;
+}
+
+export function getI18nDataFiles(
+  collection: Collection,
+  extension: string,
+  path: string,
+  slug: string,
+  diffFiles: { path: string; id: string; newFile: boolean }[],
+) {
+  const { structure } = getI18nInfo(collection) as I18nInfo;
+  if (structure === I18N_STRUCTURE.SINGLE_FILE) {
+    return diffFiles;
+  }
+  const paths = getFilePaths(collection, extension, path, slug);
+  const dataFiles = paths.reduce((acc, path) => {
+    const dataFile = diffFiles.find(file => file.path === path);
+    if (dataFile) {
+      return [...acc, dataFile];
+    } else {
+      return [...acc, { path, id: '', newFile: false }];
+    }
+  }, [] as { path: string; id: string; newFile: boolean }[]);
+
+  return dataFiles;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function duplicateDefaultI18nFields(collection: Collection, dataFields: any) {
+  const { locales, defaultLocale } = getI18nInfo(collection) as I18nInfo;
+
+  const i18nFields = Object.fromEntries(
+    locales
+      .filter(locale => locale !== defaultLocale)
+      .map(locale => [locale, { data: dataFields }]),
+  );
+
+  return i18nFields;
+}
+
+export function duplicateI18nFields(
+  entryDraft: EntryDraft,
+  field: EntryField,
+  locales: string[],
+  defaultLocale: string,
+  fieldPath: string[] = [field.get('name')],
+) {
+  const value = entryDraft.getIn(['entry', 'data', ...fieldPath]);
+  if (field.get(I18N) === I18N_FIELD.DUPLICATE) {
+    locales
+      .filter(l => l !== defaultLocale)
+      .forEach(l => {
+        entryDraft = entryDraft.setIn(
+          ['entry', ...getDataPath(l, defaultLocale), ...fieldPath],
+          value,
+        );
+      });
+  }
+
+  if (field.has('field') && !List.isList(value)) {
+    const fields = [field.get('field') as EntryField];
+    fields.forEach(field => {
+      entryDraft = duplicateI18nFields(entryDraft, field, locales, defaultLocale, [
+        ...fieldPath,
+        field.get('name'),
+      ]);
+    });
+  } else if (field.has('fields') && !List.isList(value)) {
+    const fields = field.get('fields')!.toArray() as EntryField[];
+    fields.forEach(field => {
+      entryDraft = duplicateI18nFields(entryDraft, field, locales, defaultLocale, [
+        ...fieldPath,
+        field.get('name'),
+      ]);
+    });
+  }
+
+  return entryDraft;
+}
+
+export function getPreviewEntry(entry: EntryMap, locale: string, defaultLocale: string) {
+  if (locale === defaultLocale) {
+    return entry;
+  }
+  return entry.set('data', entry.getIn([I18N, locale, 'data']));
+}
+
+export function serializeI18n(
+  collection: Collection,
+  entry: Entry,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  serializeValues: (data: any) => any,
+) {
+  const { locales, defaultLocale } = getI18nInfo(collection) as I18nInfo;
+
+  locales
+    .filter(locale => locale !== defaultLocale)
+    .forEach(locale => {
+      const dataPath = getLocaleDataPath(locale);
+      entry = entry.setIn(dataPath, serializeValues(entry.getIn(dataPath)));
+    });
+
+  return entry;
+}

package/src/lib/imageTransformations.ts

@@ -0,0 +1,212 @@
+import { join } from 'path';
+import { basename, fileExtension, fileExtensionWithSeparator } from 'decap-cms-lib-util';
+
+import type * as Photon from '@silvia-odwyer/photon';
+import type { CmsImageTransformations, EntryField } from '../types/redux';
+
+type PhotonImage = InstanceType<typeof Photon.PhotonImage>;
+
+export type ImageTransformationConfig = {
+  keepOriginal: boolean;
+  variants: ImageTransformationVariant[];
+};
+
+type ImageTransformationVariant = {
+  name: string;
+  width?: number;
+  height?: number;
+  format?: string;
+  quality?: number;
+  default?: boolean;
+  keep_original_size?: boolean;
+};
+
+export type ImageTransformationFile = {
+  file: File;
+  path: string;
+  default?: boolean;
+  original?: boolean;
+};
+
+const TRANSFORMATIONS_FOLDER = '_transformations';
+const SUPPORTED_OUTPUT_FORMATS = ['jpg', 'jpeg', 'png', 'webp'];
+
+function getFieldImageTransformations(field?: EntryField) {
+  const imageTransformations = field?.get('image_transformations') as
+    | (CmsImageTransformations & { toJS?: () => CmsImageTransformations })
+    | undefined;
+
+  return imageTransformations?.toJS ? imageTransformations.toJS() : imageTransformations;
+}
+
+function normalizeVariant(variant: ImageTransformationVariant) {
+  const format = variant.format?.toLowerCase();
+  return {
+    ...variant,
+    format: format === 'jpeg' ? 'jpg' : format,
+  };
+}
+
+export function getImageTransformationsConfig(
+  config: { image_transformations?: CmsImageTransformations },
+  field?: EntryField,
+): ImageTransformationConfig | undefined {
+  const imageTransformations = getFieldImageTransformations(field) ?? config.image_transformations;
+
+  if (!imageTransformations) {
+    return undefined;
+  }
+
+  if (Array.isArray(imageTransformations)) {
+    return {
+      keepOriginal: true,
+      variants: imageTransformations.map(normalizeVariant),
+    };
+  }
+
+  return {
+    keepOriginal: imageTransformations.keep_original ?? true,
+    variants: (imageTransformations.variants || []).map(normalizeVariant),
+  };
+}
+
+export function shouldTransformImage(file: File, config: ImageTransformationConfig | undefined) {
+  return (
+    !!config &&
+    config.variants.length > 0 &&
+    file.type.startsWith('image/') &&
+    file.type !== 'image/svg+xml'
+  );
+}
+
+function getOutputFormat(fileName: string, variant: ImageTransformationVariant) {
+  const inputFormat = fileExtension(fileName).toLowerCase();
+  const outputFormat = variant.format || inputFormat;
+
+  return SUPPORTED_OUTPUT_FORMATS.includes(outputFormat) ? outputFormat : 'png';
+}
+
+function getMimeType(format: string) {
+  switch (format) {
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    case 'webp':
+      return 'image/webp';
+    default:
+      return 'image/png';
+  }
+}
+
+function getVariantFileName(fileName: string, format: string) {
+  const extension = fileExtensionWithSeparator(fileName);
+  const baseName = extension ? basename(fileName, extension) : basename(fileName);
+  return `${baseName}.${format === 'jpeg' ? 'jpg' : format}`;
+}
+
+function getVariantPath(originalPath: string, variantName: string, variantFileName: string) {
+  const originalName = basename(originalPath);
+  const parent = originalPath.slice(0, Math.max(0, originalPath.length - originalName.length));
+
+  return join(parent, TRANSFORMATIONS_FOLDER, variantName, variantFileName);
+}
+
+function getResizeDimensions(
+  image: { get_width: () => number; get_height: () => number },
+  variant: ImageTransformationVariant,
+) {
+  const originalWidth = image.get_width();
+  const originalHeight = image.get_height();
+
+  if (variant.keep_original_size || (!variant.width && !variant.height)) {
+    return { width: originalWidth, height: originalHeight };
+  }
+
+  if (variant.width && variant.height) {
+    const scale = Math.min(variant.width / originalWidth, variant.height / originalHeight);
+    return {
+      width: Math.round(originalWidth * scale),
+      height: Math.round(originalHeight * scale),
+    };
+  }
+
+  if (variant.width) {
+    return {
+      width: variant.width,
+      height: Math.round((originalHeight * variant.width) / originalWidth),
+    };
+  }
+
+  const height = variant.height as number;
+  return {
+    width: Math.round((originalWidth * height) / originalHeight),
+    height,
+  };
+}
+
+function getImageBytes(image: PhotonImage, format: string, quality = 75) {
+  if (format === 'jpg' || format === 'jpeg') {
+    return image.get_bytes_jpeg(quality);
+  }
+
+  if (format === 'webp') {
+    return image.get_bytes_webp();
+  }
+
+  return image.get_bytes();
+}
+
+export async function transformImage(
+  file: File,
+  originalPath: string,
+  config: ImageTransformationConfig,
+): Promise<ImageTransformationFile[]> {
+  const photon = await import('@silvia-odwyer/photon');
+  const initPhoton = (photon as unknown as { default: () => Promise<unknown> }).default;
+  await initPhoton();
+
+  const originalImage = photon.PhotonImage.new_from_blob(file);
+
+  try {
+    const transformedFiles = config.variants.map(variant => {
+      const { width, height } = getResizeDimensions(originalImage, variant);
+      const resizedImage =
+        width === originalImage.get_width() && height === originalImage.get_height()
+          ? originalImage
+          : photon.resize(originalImage, width, height, photon.SamplingFilter.Lanczos3);
+      const format = getOutputFormat(file.name, variant);
+      const variantFileName = getVariantFileName(file.name, format);
+      const bytes = getImageBytes(resizedImage, format, variant.quality);
+      const transformedFile = new File([bytes], variantFileName, { type: getMimeType(format) });
+
+      if (resizedImage !== originalImage) {
+        resizedImage.free();
+      }
+
+      return {
+        file: transformedFile,
+        path: getVariantPath(originalPath, variant.name, variantFileName),
+        default: variant.default,
+      };
+    });
+
+    return config.keepOriginal
+      ? [{ file, path: originalPath, original: true }, ...transformedFiles]
+      : transformedFiles;
+  } finally {
+    originalImage.free();
+  }
+}
+
+export function sortTransformationFilesForSelection(files: ImageTransformationFile[]) {
+  const defaultIndex = files.findIndex(file => file.default);
+  const originalIndex = files.findIndex(file => file.original);
+  const selectedIndex = defaultIndex >= 0 ? defaultIndex : originalIndex;
+
+  if (selectedIndex < 0) {
+    return files;
+  }
+
+  const selectedFile = files[selectedIndex];
+  return [...files.slice(0, selectedIndex), ...files.slice(selectedIndex + 1), selectedFile];
+}

package/src/lib/phrases.js

@@ -0,0 +1,8 @@
+import merge from 'lodash/merge';
+
+import { getLocale } from './registry';
+
+export function getPhrases(locale) {
+  const phrases = merge({}, getLocale('en'), getLocale(locale));
+  return phrases;
+}

package/src/lib/polyfill.js

@@ -0,0 +1,9 @@
+import { Buffer } from 'buffer';
+
+if (typeof window !== 'undefined') {
+  // Polyfill global for packages like @iarna/toml
+  window.global = window;
+
+  // Polyfill Buffer for packages like gray-matter
+  window.Buffer = Buffer;
+}