change default transformation position to query to better handle wildcard purge. Update test cases to reflect this change. Bump major version to reflect breaking change.

Author: manu4543

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "imagekit-javascript",
-    "version": "3.1.0",
+    "version": "4.0.0",
     "description": "Javascript SDK for using ImageKit.io in the browser",
     "main": "dist/imagekit.cjs.js",
     "module": "dist/imagekit.esm.js",

package.json

@@ -45,25 +45,19 @@ export const buildURL = (opts: UrlOptions & ImageKitOptions) => {
     return "";
   }
 
-  // if (opts.sdkVersion && opts.sdkVersion.trim() != "") {
-  //   urlObj.searchParams.append("ik-sdk-version", opts.sdkVersion.trim());
-  // }
-
   for (var i in opts.queryParameters) {
     urlObj.searchParams.append(i, String(opts.queryParameters[i]));
   }
 
   var transformationString = constructTransformationString(opts.transformation);
 
   if (transformationString && transformationString.length) {
-    if (transformationUtils.addAsQueryParameter(opts) || isSrcParameterUsedForURL) {
-      urlObj.searchParams.append(TRANSFORMATION_PARAMETER, transformationString);
-    } else {
+    if (!transformationUtils.addAsQueryParameter(opts) && !isSrcParameterUsedForURL) {
       urlObj.pathname = pathJoin([
         TRANSFORMATION_PARAMETER + transformationUtils.getChainTransformDelimiter() + transformationString,
         urlObj.pathname,
       ]);
-    }
+    } 
   }
 
   if (urlEndpointPattern) {
@@ -72,6 +66,17 @@ export const buildURL = (opts: UrlOptions & ImageKitOptions) => {
     urlObj.pathname = pathJoin([urlObj.pathname]);
   }
 
+  if (transformationString && transformationString.length) {
+    if(transformationUtils.addAsQueryParameter(opts) || isSrcParameterUsedForURL) {
+      if(urlObj.searchParams.toString() !== "") { // In 12 node.js .size was not there. So, we need to check if it is an object or not.
+        return `${urlObj.href}&${TRANSFORMATION_PARAMETER}=${transformationString}`;
+      }
+      else {
+        return `${urlObj.href}?${TRANSFORMATION_PARAMETER}=${transformationString}`;
+      }
+    }
+  }
+
   return urlObj.href;
 };
 

src/url/builder.ts

@@ -1,9 +1,10 @@
 import supportedTransforms from "../constants/supportedTransforms";
 import { ImageKitOptions, TransformationPosition } from "../interfaces";
 
-const DEFAULT_TRANSFORMATION_POSITION: TransformationPosition = "path";
 const QUERY_TRANSFORMATION_POSITION: TransformationPosition = "query";
-const VALID_TRANSFORMATION_POSITIONS = [DEFAULT_TRANSFORMATION_POSITION, QUERY_TRANSFORMATION_POSITION];
+const PATH_TRANSFORMATION_POSITION: TransformationPosition = "path";
+const DEFAULT_TRANSFORMATION_POSITION: TransformationPosition = QUERY_TRANSFORMATION_POSITION;
+const VALID_TRANSFORMATION_POSITIONS = [PATH_TRANSFORMATION_POSITION, QUERY_TRANSFORMATION_POSITION];
 const CHAIN_TRANSFORM_DELIMITER: string = ":";
 const TRANSFORM_DELIMITER: string = ",";
 const TRANSFORM_KEY_VALUE_DELIMITER: string = "-";

src/utils/transformation.ts

@@ -1,4 +1,5 @@
 module.exports.initializationParams = {
     publicKey: "test_public_key",
     urlEndpoint: "https://ik.imagekit.io/test_url_endpoint",
+    transformationPosition: "path",
 }

test/data/index.js

@@ -48,6 +48,21 @@ describe("URL generation", function () {
         expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg`);
     });
 
+    it("By default transformationPosition should be query", function () {
+        var imagekitNew = new ImageKit({
+            publicKey: "test_public_key",
+            urlEndpoint: "https://ik.imagekit.io/test_url_endpoint",
+        });
+        const url = imagekitNew.url({
+            path: "/test_path.jpg",
+            transformation: [{
+                "height": "300",
+                "width": "400"
+            }]
+        });
+        expect(url).equal("https://ik.imagekit.io/test_url_endpoint/test_path.jpg?tr=h-300,w-400");
+    });
+
     it('should generate the URL without sdk version', function () {
         const ik = new ImageKit({ ...initializationParams, sdkVersion: "" })
 
@@ -111,7 +126,7 @@ describe("URL generation", function () {
             }]
         });
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path.jpg?tr=h-300%2Cw-400`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path.jpg?tr=h-300,w-400`);
     });
 
     it('should generate the correct URL with a valid src parameter and transformation', function () {
@@ -123,7 +138,7 @@ describe("URL generation", function () {
             }]
         });
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?tr=h-300%2Cw-400`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?tr=h-300,w-400`);
     });
 
     it('should generate the correct URL with transformationPosition as query parameter when src is provided', function () {
@@ -136,7 +151,7 @@ describe("URL generation", function () {
             }]
         });
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?tr=h-300%2Cw-400`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?tr=h-300,w-400`);
     });
 
     it('should merge query parameters correctly in the generated URL', function () {
@@ -149,7 +164,7 @@ describe("URL generation", function () {
             }]
         });
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?t1=v1&t2=v2&t3=v3&tr=h-300%2Cw-400`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/test_path_alt.jpg?t1=v1&t2=v2&t3=v3&tr=h-300,w-400`);
     });
 
 

test/url-generation/basic.js

@@ -441,4 +441,18 @@ describe("Overlay encoding test cases", function () {
         });
         expect(url).equal(`https://ik.imagekit.io/demo/tr:l-subtitle,ie-${encodeURIComponent(safeBtoa("sub.srt"))},l-end/sample.mp4`);
     });
+
+    it("Avoid double encoding when transformation string is in query params", function () {
+        const url = imagekit.url({
+            path: "/sample.jpg",
+            transformation: [{
+                overlay: {
+                    type: "text",
+                    text: "Minimal Text"
+                }
+            }],
+            transformationPosition: "query"
+        });
+        expect(url).equal(`https://ik.imagekit.io/demo/sample.jpg?tr=l-text,i-Minimal%20Text,l-end`);
+    });
 });