@firecms/core 3.0.0-rc.2 → 3.0.0-rc.4

package/src/util/entity_cache.ts

@@ -1,4 +1,5 @@
 import { EntityReference, GeoPoint, Vector } from "../types";
+import { isObject, isPlainObject } from "./objects";
 
 // Define a unique prefix for entity keys in localStorage to avoid key collisions
 const LOCAL_STORAGE_PREFIX = "entity_cache::";
@@ -18,25 +19,40 @@ function customReplacer(key: string): any {
     // Handle Date objects
     // @ts-ignore
     if (value instanceof Date) {
-        return { __type: "Date", value: value.toISOString() };
+        return {
+            __type: "Date",
+            value: value.toISOString()
+        };
     }
 
     // Handle EntityReference
     // @ts-ignore
     if (value instanceof EntityReference) {
-        return { __type: "EntityReference", id: value.id, path: value.path, databaseId: value.databaseId };
+        return {
+            __type: "EntityReference",
+            id: value.id,
+            path: value.path,
+            databaseId: value.databaseId
+        };
     }
 
     // Handle GeoPoint
     // @ts-ignore
     if (value instanceof GeoPoint) {
-        return { __type: "GeoPoint", latitude: value.latitude, longitude: value.longitude };
+        return {
+            __type: "GeoPoint",
+            latitude: value.latitude,
+            longitude: value.longitude
+        };
     }
 
     // Handle Vector
     // @ts-ignore
     if (value instanceof Vector) {
-        return { __type: "Vector", value: value.value };
+        return {
+            __type: "Vector",
+            value: value.value
+        };
     }
 
     return value;
@@ -61,47 +77,21 @@ function customReviver(key: string, value: any): any {
     return value;
 }
 
-// Initialize the in-memory cache by loading entities from `localStorage`
-if (isLocalStorageAvailable) {
-    try {
-        // Iterate over all keys in localStorage to find those with the specified prefix
-        for (let i = 0; i < localStorage.length; i++) {
-            const fullKey = localStorage.key(i);
-            if (fullKey && fullKey.startsWith(LOCAL_STORAGE_PREFIX)) {
-                const path = fullKey.substring(LOCAL_STORAGE_PREFIX.length);
-                const entityString = localStorage.getItem(fullKey);
-                if (entityString) {
-                    try {
-                        const entity: object = JSON.parse(entityString, customReviver);
-                        entityCache.set(path, entity);
-                    } catch (parseError) {
-                        console.error(
-                            `Failed to parse entity for path "${path}" from localStorage:`,
-                            parseError
-                        );
-                    }
-                }
-            }
-        }
-    } catch (error) {
-        console.error("Error accessing localStorage during initialization:", error);
-    }
-}
-
 /**
  * Saves data to the in-memory cache and persists it individually in `localStorage`.
  * @param path - The unique path/key for the data.
  * @param data - The data to cache and persist.
  */
 export function saveEntityToCache(path: string, data: object): void {
-    // Update the in-memory cache
-    entityCache.set(path, data);
-
     // Persist the data individually in localStorage
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
             const entityString = JSON.stringify(data, customReplacer);
+            console.log("Saving entity to localStorage:", {
+                key,
+                entityString
+            });
             localStorage.setItem(key, entityString);
         } catch (error) {
             console.error(
@@ -112,19 +102,31 @@ export function saveEntityToCache(path: string, data: object): void {
     }
 }
 
+export function removeEntityFromMemoryCache(path: string): void {
+    entityCache.delete(path);
+}
+
+export function saveEntityToMemoryCache(path: string, data: object): void {
+    entityCache.set(path, data);
+}
+
+export function getEntityFromMemoryCache(path: string): object | undefined {
+    return entityCache.get(path);
+}
+
+export function hasEntityInCache(path: string): boolean {
+    return entityCache.has(path);
+}
+
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
+ * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export function getEntityFromCache(path: string): object | undefined {
 
-    // Attempt to retrieve the entity from the in-memory cache
-    if (entityCache.has(path)) {
-        return entityCache.get(path);
-    }
-
     // If not in the cache, attempt to load it from localStorage
     if (isLocalStorageAvailable) {
         try {
@@ -132,7 +134,10 @@ export function getEntityFromCache(path: string): object | undefined {
             const entityString = localStorage.getItem(key);
             if (entityString) {
                 const entity: object = JSON.parse(entityString, customReviver);
-                entityCache.set(path, entity); // Update the cache
+                console.log("Loaded entity from localStorage:", {
+                    key,
+                    entity
+                });
                 return entity;
             }
         } catch (error) {
@@ -147,23 +152,11 @@ export function getEntityFromCache(path: string): object | undefined {
     return undefined;
 }
 
-export function hasEntityInCache(path: string): boolean {
-    return entityCache.has(path);
-}
-
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.
  */
 export function removeEntityFromCache(path: string): void {
-
-
-    console.debug("Removing entity from cache", path);
-
-    // Remove from the in-memory cache
-    entityCache.delete(path);
-
-    // Remove from localStorage
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
@@ -202,3 +195,29 @@ export function clearEntityCache(): void {
         }
     }
 }
+
+export function flattenKeys(obj: any, prefix = "", result: string[] = []): string[] {
+
+    if (isObject(obj) || Array.isArray(obj)) {
+        const plainObject = isPlainObject(obj);
+        if (!plainObject && prefix) {
+            result.push(prefix);
+        } else {
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    const newKey = prefix
+                        ? Array.isArray(obj)
+                            ? `${prefix}[${key}]`
+                            : `${prefix}.${key}`
+                        : key;
+                    if (isObject(obj[key]) || Array.isArray(obj[key])) {
+                        flattenKeys(obj[key], newKey, result);
+                    } else {
+                        result.push(newKey);
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/util/join_collections.ts

@@ -78,7 +78,6 @@ export function mergeCollection(target: EntityCollection,
                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
 ): EntityCollection {
 
-
     const subcollectionsMerged = joinCollectionLists(
         target?.subcollections ?? [],
         source?.subcollections ?? [],
@@ -132,8 +131,9 @@ function mergePropertyOrBuilder(target: PropertyOrBuilder, source: PropertyOrBui
         return target;
     } else {
         const mergedProperty = mergeDeep(target, source);
-        const targetEditable = Boolean(target.editable);
-        const sourceEditable = Boolean(source.editable);
+        const targetEditable = target.editable === undefined ? true : Boolean(target.editable);
+        const sourceEditable = source.editable === undefined ? true : Boolean(source.editable);
+
         if (source.dataType === "map" && source.properties) {
             const targetProperties = ("properties" in target ? target.properties : {}) as PropertiesOrBuilders;
             const sourceProperties = ("properties" in source ? source.properties : {}) as PropertiesOrBuilders;

package/src/util/make_properties_editable.ts

@@ -13,25 +13,3 @@ export function makePropertiesEditable(properties: Properties) {
     });
     return properties;
 }
-
-export function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
-    return Object.entries(properties).reduce((acc, [key, property]) => {
-        if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
-            const updated = {
-                ...property,
-                properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders)
-            };
-            acc[key] = updated;
-        }
-        if (isPropertyBuilder(property)) {
-            acc[key] = property;
-        } else {
-            acc[key] = {
-                ...property,
-                editable: false
-            };
-        }
-        return acc;
-    }, {} as PropertiesOrBuilders);
-
-}

package/src/util/objects.ts

@@ -12,6 +12,21 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
+
+export function isPlainObject(obj:any) {
+    // 1. Rule out non-objects, null, and arrays
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+
+    // 2. Get the object's direct prototype
+    const proto = Object.getPrototypeOf(obj);
+
+    // 3. A plain object's direct prototype is Object.prototype
+    return proto === Object.prototype;
+}
+
+
 export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(
     target: T,
     source: U,
@@ -47,8 +62,31 @@ export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>
                 // If source value is a Date, create a new Date instance.
                 (output as any)[key] = new Date(sourceValue.getTime());
             } else if (Array.isArray(sourceValue)) {
-                // If source value is an array, create a shallow copy of the array.
-                (output as any)[key] = [...sourceValue];
+                if (Array.isArray(outputValue)) {
+                    const newArray = [];
+                    const maxLength = Math.max(outputValue.length, sourceValue.length);
+                    for (let i = 0; i < maxLength; i++) {
+                        const sourceItem = sourceValue[i];
+                        const targetItem = outputValue[i];
+
+                        if (i >= sourceValue.length) { // source is shorter
+                            newArray[i] = targetItem;
+                        } else if (i >= outputValue.length) { // target is shorter
+                            newArray[i] = sourceItem;
+                        } else if (sourceItem === null) {
+                            newArray[i] = targetItem;
+                        } else if (isObject(sourceItem) && isObject(targetItem)) {
+                            newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+                        } else {
+                            newArray[i] = sourceItem;
+                        }
+                    }
+                    (output as any)[key] = newArray;
+                } else {
+                    // If output's value (from target) is not an array,
+                    // overwrite with a shallow copy of the source array.
+                    (output as any)[key] = [...sourceValue];
+                }
             } else if (isObject(sourceValue)) {
                 // If source value is an object:
                 if (isObject(outputValue)) {

package/src/util/useStorageUploadController.tsx

@@ -1,10 +1,10 @@
-import Resizer from "react-image-file-resizer";
+import Compressor from "compressorjs";
 import equal from "react-fast-compare";
 
 import {
     ArrayProperty,
     EntityValues,
-    ImageCompression,
+    ImageResize,
     Property,
     PropertyOrBuilder,
     ResolvedArrayProperty,
@@ -76,7 +76,9 @@ export function useStorageUploadController<M extends object>({
     const metadata: Record<string, any> | undefined = storage?.metadata;
     const size = multipleFilesSupported ? "medium" : "large";
 
-    const compression: ImageCompression | undefined = storage?.imageCompression;
+    // Support both new imageResize and deprecated imageCompression
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
         getInternalInitialValue(multipleFilesSupported, value, metadata, size);
@@ -169,6 +171,14 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalValue, multipleFilesSupported, onChange, storage, storageSource]);
 
+    const onFileUploadError = useCallback((entry: StorageFieldItem) => {
+        console.debug("onFileUploadError", entry);
+
+        // Remove the failed entry from internalValue
+        const newValue = internalValue.filter(item => item.id !== entry.id);
+        setInternalValue(newValue);
+    }, [internalValue]);
+
     const onFilesAdded = useCallback(async (acceptedFiles: File[]) => {
 
         if (!acceptedFiles.length || disabled)
@@ -193,8 +203,8 @@ export function useStorageUploadController<M extends object>({
         if (multipleFilesSupported) {
             newInternalValue = [...internalValue,
                 ...(await Promise.all(acceptedFiles.map(async file => {
-                    if (compression && compressionFormat(file)) {
-                        file = await resizeAndCompressImage(file, compression)
+                    if ((imageResize || legacyCompression) && isImageFile(file)) {
+                        file = await resizeImage(file, imageResize, legacyCompression);
                     }
 
                     return {
@@ -206,9 +216,9 @@ export function useStorageUploadController<M extends object>({
                     } as StorageFieldItem;
                 })))];
         } else {
-            let file = acceptedFiles[0]
-            if (compression && compressionFormat(file)) {
-                file = await resizeAndCompressImage(file, compression)
+            let file = acceptedFiles[0];
+            if ((imageResize || legacyCompression) && isImageFile(file)) {
+                file = await resizeImage(file, imageResize, legacyCompression);
             }
 
             newInternalValue = [{
@@ -223,7 +233,7 @@ export function useStorageUploadController<M extends object>({
         // Remove either storage path or file duplicates
         newInternalValue = removeDuplicates(newInternalValue);
         setInternalValue(newInternalValue);
-    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size]);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
 
     return {
         internalValue,
@@ -232,6 +242,7 @@ export function useStorageUploadController<M extends object>({
         fileNameBuilder,
         storagePathBuilder,
         onFileUploadComplete,
+        onFileUploadError,
         onFilesAdded,
         multipleFilesSupported
     }
@@ -276,31 +287,57 @@ function getRandomId() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
 }
 
-const supportedTypes: Record<string, string> = {
-    "image/jpeg": "JPEG",
-    "image/png": "PNG",
-    "image/webp": "WEBP"
+/**
+ * Check if a file is an image type supported for resizing
+ */
+function isImageFile(file: File): boolean {
+    return file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/webp";
 }
-const compressionFormat = (file: File) => supportedTypes[file.type] ? supportedTypes[file.type] : null;
-
-const defaultQuality = 100;
-const resizeAndCompressImage = (file: File, compression: ImageCompression) => new Promise<File>((resolve) => {
 
-    const inputQuality = compression.quality === undefined ? defaultQuality : compression.quality;
-    const quality = inputQuality >= 0 ? inputQuality <= 100 ? inputQuality : 100 : 100;
-
-    const format = compressionFormat(file);
-    if (!format) {
-        throw Error("resizeAndCompressImage: Unsupported image format");
+/**
+ * Resize and compress an image using compressorjs.
+ * Supports both the new imageResize API and legacy imageCompression for backward compatibility.
+ */
+async function resizeImage(
+    file: File,
+    imageResize?: StorageConfig["imageResize"],
+    legacyCompression?: ImageResize
+): Promise<File> {
+    // Determine configuration (new API takes precedence)
+    const maxWidth = imageResize?.maxWidth ?? legacyCompression?.maxWidth;
+    const maxHeight = imageResize?.maxHeight ?? legacyCompression?.maxHeight;
+    const quality = (imageResize?.quality ?? legacyCompression?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+
+    // Determine output format
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+        mimeType = `image/${imageResize.format}`;
     }
-    Resizer.imageFileResizer(
-        file,
-        compression.maxWidth || Number.MAX_VALUE,
-        compression.maxHeight || Number.MAX_VALUE,
-        format,
-        quality,
-        0,
-        (file: string | Blob | File | ProgressEvent<FileReader>) => resolve(file as File),
-        "file"
-    )
-});
+
+    return new Promise<File>((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxWidth,
+            maxHeight,
+            mimeType,
+            // Use cover mode if specified (crops to fit)
+            // Otherwise use contain mode (scales to fit)
+            ...(mode === "cover" || mode === undefined ? {
+                width: maxWidth,
+                height: maxHeight,
+                resize: "cover" as const
+            } : {}),
+            success: (result) => {
+                const compressedFile = new File([result], file.name, {
+                    type: result.type,
+                    lastModified: Date.now(),
+                });
+                resolve(compressedFile);
+            },
+            error: reject,
+        });
+    });
+}