Merge pull request #402 from cloudinary/fix/clone-transformation-options

Fix/clone transformation options

Author: strausr

__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts

@@ -67,7 +67,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import backwards comaptiblity function',
-    sizeLimitInKB: 12,
+    sizeLimitInKB: 26,
     importsArray: [
       importFromBase('createCloudinaryLegacyURL')
     ]

__TESTS__/backwardsComaptibility/createLegacyURL.test.ts

@@ -970,4 +970,21 @@ describe('Create legacy urls', () => {
     });
     expect(result).toBe('http://res.cloudinary.com/demo/image/upload/bo_5px_solid_rgb:ffaabbdd/sample.jpg');
   });
+
+  it("should not modify options objects when chaining transformations ", function () {
+    const optionObj = {
+      cloud_name: 'test123',
+      transformation: [{
+        overlay: 'somepid',
+        crop: "fill",
+        height: 120,
+        width: 80
+      }]
+    };
+    const urlFirstRun = createTestURL("sample", optionObj);
+    const urlSecondRun = createTestURL("sample", optionObj);
+
+    expect(urlFirstRun).toEqual("http://res.cloudinary.com/test123/image/upload/c_fill,h_120,l_somepid,w_80/sample");
+    expect(urlFirstRun).toEqual(urlSecondRun);
+  });
 });

__TESTS__/backwardsComaptibility/generateTransformationString.test.ts

@@ -135,4 +135,50 @@ describe('it works?', () => {
     const t = generateTransformationString(options);
     expect(t).toEqual("$big_$small_pow_1.5,$small_150");
   });
+
+  it("border can be presented as objects", function () {
+    const optionsAsObject = {
+      transformation: [
+        {
+          border: { width: 4, color: 'white' }
+        }
+      ]
+    };
+    const optionsAsString = {
+      transformation: [
+        {
+          border: '4px_solid_white'
+        }
+      ]
+    };
+    const tObj = generateTransformationString(optionsAsObject);
+    const tStr = generateTransformationString(optionsAsString);
+    expect(tStr).toEqual("bo_4px_solid_white");
+    expect(tStr).toEqual(tObj);
+  });
+
+  it("radius as an array is parsed", function () {
+    const options = {
+      transformation: [
+        {
+          radius: [10, 20, 30, 40]
+        }
+      ]
+    };
+    const t = generateTransformationString(options);
+    expect(t).toEqual("r_10:20:30:40");
+  });
+
+  it("radius accepts a string value", function () {
+    const options = {
+      transformation: [
+        {
+          radius: 'max'
+        }
+      ]
+    };
+    const t = generateTransformationString(options);
+    expect(t).toEqual("r_max");
+  });
+
 });

package.json

@@ -37,6 +37,7 @@
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@types/jest": "^25.2.3",
     "@types/mock-fs": "^4.10.0",
+    "@types/node": "^15.14.2",
     "@types/webpack": "^4.41.21",
     "@typescript-eslint/eslint-plugin": "^3.0.2",
     "@typescript-eslint/parser": "^3.0.2",
@@ -71,6 +72,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.3.2",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-typescript": "^1.0.1",
     "sanitize-html": "^1.18.2",
@@ -79,8 +81,7 @@
     "tslib": "^2.0.0",
     "typedoc": "^0.17.8",
     "typescript": "^3.9.3",
-    "webpack": "^4.44.1",
-    "@types/node": "^15.14.2"
+    "webpack": "^4.44.1"
   },
   "dependencies": {
     "@types/lodash.clonedeep": "^4.5.6",

rollup.config.js

@@ -1,6 +1,7 @@
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript';
 import json from '@rollup/plugin-json';
+import commonjs from 'rollup-plugin-commonjs';
 
 export default [{
   input: 'src/index.ts',
@@ -14,7 +15,8 @@ export default [{
   plugins: [
     json(),
     resolve(),
-    typescript({ target: "es5"})
+    typescript({ target: "es5"}),
+    commonjs()
   ]
 }];
 

src/backwards/createCloudinaryLegacyURL.ts

@@ -3,6 +3,7 @@ import {generateTransformationString} from "./generateTransformationString";
 import {finalize_resource_type} from "./utils/finalizeResourceType";
 import {finalize_source} from "./utils/finalize_source";
 import {unsigned_url_prefix} from "./utils/unsigned_url_prefix";
+import cloneDeep from 'lodash/cloneDeep';
 
 export function createCloudinaryLegacyURL(public_id: string, transformationOptions: LegacyITransforamtionOptions) {
   // Path format
@@ -69,8 +70,7 @@ export function createCloudinaryLegacyURL(public_id: string, transformationOptio
     version = null;
   }
 
-  const transformation = generateTransformationString(transformationOptions).replace(/([^:])\/\//g, '$1/');;
-
+  const transformation = generateTransformationString(cloneDeep(transformationOptions)).replace(/([^:])\/\//g, '$1/');;
   if (sign_url && !auth_token) {
     let to_sign = [transformation, source_to_sign].filter(function (part) {
       return (part != null) && part !== '';

src/backwards/generateTransformationString.ts

@@ -33,7 +33,6 @@ export function generateTransformationString(transformationOptions: LegacyITrans
 
   if (Array.isArray(transformationOptions)) {
     return transformationOptions
-      // TODO we might need to clone the childTransformation
       .map((singleTransformation) => {
         return generateTransformationString(singleTransformation);
       }).filter((a) => { console.log(a); return a;}).join('/');
@@ -96,7 +95,6 @@ export function generateTransformationString(transformationOptions: LegacyITrans
   if (isAnyChildAnObject) {
     childTransformations = childTransformations.map((transformation: LegacyITransforamtionOptions) => {
       if (isObject(transformation)) {
-        // TODO We might need to clone here
         return generateTransformationString(transformation);
       } else {
         return generateTransformationString({transformation});