Feature/global default cloudinary transforms

README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/babel-plugin-cloudinary.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-cloudinary)
 
-Compile cloudinary URLs at build time.
+Compile cloudinary . These properties can still be overwritten for individual cases, by `__buildCloudinaryUrl` call.
 
 ## API
 
@@ -17,14 +17,21 @@ You can define the globals for your cloudinary URLs in a `cloudinaryrc.json` tha
     "secure": true
   },
   "overrideBaseUrl": true,
-  "host": "trivago.images.com"
+  "host": "trivago.images.com",
+  "defaultTransforms": {
+    // NOT RELEASED YET
+    "fetch_format": "auto",
+    "quality": "auto"
+  }
 }
 ```
 
 - **native** - these are directly passed into the `cloudinary-core` upon instantiation, you can use
   all the [configs in the official cloudinary API](https://cloudinary.com/documentation/solution_overview#configuration_parameters).
 - **overrideBaseUrl** - set this to true if you want to override cloudinary default URL with the property **host**.
 - **host** - a host to perform replace the default generated base URL (`res.cloudinary.com/trivago/image/upload`).
+- **defaultTransforms** [**NOT RELEASED YET**] - an object that holds transforms that are applied by default
+  to all the generated cloudinary URLs. These properties can still be overwritten for individual cases, by passing the same property within the `option.transforms` of that `__buildCloudinaryUrl` call.
 
 ### \_\_buildCloudinaryUrl
 

lib/cloudinary-proxy.js

@@ -28,7 +28,11 @@ const BASE_URL_PLACEHOLDER = new RegExp(`res.cloudinary.com/${runConfig.native.c
  * @returns {string} base image URL for the provided assetName.
  */
 function getBaseImageUrl(assetName, transforms) {
-  let url = cl.url(assetName, transforms);
+  const enrichedTransforms = runConfig.defaultTransforms
+    ? { ...runConfig.defaultTransforms, ...transforms }
+    : transforms;
+
+  let url = cl.url(assetName, enrichedTransforms);
 
   if (runConfig.overrideBaseUrl) {
     if (!runConfig.host) {

package.json

@@ -30,6 +30,7 @@
     "babel-cli/chokidar": "^2.0.4"
   },
   "husky": {
+    "skipCI": true,
     "hooks": {
       "pre-commit": "lint-staged"
     }

test/fixtures/runtime-config-default-transforms-override/__snapshots__/runtime-config-default-transforms-override.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`runtime-config-default-transforms-override 1`] = `"const imageUrl = \`\${\\"https://trivago.images.com/e_red:50,f_auto,o_30,q_auto:best/\\"}\${\\"my-picture.jpeg\\"}\${\\"\\"}\${\\"\\"}\${\\"\\"}\`;"`;

test/fixtures/runtime-config-default-transforms-override/cloudinaryrc.json

@@ -0,0 +1,12 @@
+{
+  "native": {
+    "cloud_name": "trivago",
+    "secure": true
+  },
+  "host": "trivago.images.com",
+  "overrideBaseUrl": true,
+  "defaultTransforms": {
+    "fetch_format": "auto",
+    "quality": "auto"
+  }
+}

test/fixtures/runtime-config-default-transforms-override/input.js

@@ -0,0 +1,7 @@
+const imageUrl = __buildCloudinaryUrl("my-picture.jpeg", {
+  transforms: {
+    effect: "red:50",
+    opacity: 30,
+    quality: "auto:best", // will override default 'quality' in cloudinaryrc.json
+  },
+});

test/fixtures/runtime-config-default-transforms/__snapshots__/runtime-config-default-transforms.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`runtime-config-default-transforms 1`] = `"const imageUrl = \`\${\\"https://trivago.images.com/e_red:50,f_auto,o_30,q_auto/\\"}\${\\"my-picture.jpeg\\"}\${\\"\\"}\${\\"\\"}\${\\"\\"}\`;"`;

test/fixtures/runtime-config-default-transforms/cloudinaryrc.json

@@ -0,0 +1,12 @@
+{
+  "native": {
+    "cloud_name": "trivago",
+    "secure": true
+  },
+  "host": "trivago.images.com",
+  "overrideBaseUrl": true,
+  "defaultTransforms": {
+    "fetch_format": "auto",
+    "quality": "auto"
+  }
+}

test/fixtures/runtime-config-default-transforms/input.js

@@ -0,0 +1,6 @@
+const imageUrl = __buildCloudinaryUrl("my-picture.jpeg", {
+  transforms: {
+    effect: "red:50",
+    opacity: 30,
+  },
+});