Add Responsive Breakpoints cache

Author: Amir Tocker

lib/cloudinary.js

@@ -8,19 +8,20 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-var _ = require('lodash'),
-    cloudinary = module.exports;
+var _ = require('lodash');
 
+var cloudinary = module.exports;
 exports.config = require("./config");
 exports.utils = require("./utils");
 exports.uploader = require("./uploader");
 exports.api = require("./api");
 exports.PreloadedFile = require("./preloaded_file");
+exports.Cache = require('./cache');
 var optionConsume = cloudinary.utils.option_consume;
 
 var ensureOption = require('./utils/ensureOption').defaults(cloudinary.config());
 
-exports.url = function (public_id, options) {
+exports.url = function url(public_id, options) {
   options = _.extend({}, options);
   return cloudinary.utils.url(public_id, options);
 };

lib/uploader.js

@@ -56,6 +56,8 @@ var extend = utils.extend,
     isObject = utils.isObject,
     build_upload_params = utils.build_upload_params;
 
+var Cache = require('./cache');
+
 exports.unsigned_upload_stream = function unsigned_upload_stream(upload_preset, callback) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return exports.upload_stream(callback, utils.merge(options, {
@@ -415,6 +417,35 @@ function call_context_api(context, command) {
     return [params];
   });
 }
+/**
+ * Cache (part of) the upload results.
+ * @param result
+ * @param {object} options
+ * @param {string} options.type
+ * @param {string} options.resource_type
+ */
+
+
+function cacheResults(result, _ref) {
+  var type = _ref.type,
+      resource_type = _ref.resource_type;
+
+  if (result.responsive_breakpoints) {
+    result.responsive_breakpoints.forEach(function (_ref2) {
+      var transformation = _ref2.transformation,
+          url = _ref2.url,
+          breakpoints = _ref2.breakpoints;
+      return Cache.set(result.public_id, {
+        type: type,
+        resource_type: resource_type,
+        raw_transformation: transformation,
+        format: path.extname(breakpoints[0].url).slice(1)
+      }, breakpoints.map(function (i) {
+        return i.width;
+      }));
+    });
+  }
+}
 
 function parseResult(buffer, res) {
   var result = '';
@@ -480,6 +511,7 @@ function call_api(action, callback, options, get_params) {
           result["error"]["http_code"] = res.statusCode;
           deferred.reject(result.error);
         } else {
+          cacheResults(result, options);
           deferred.resolve(result);
         }
 
@@ -504,10 +536,10 @@ function call_api(action, callback, options, get_params) {
     }
   };
 
-  var post_data = Object.entries(params).reduce(function (entries, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
+  var post_data = Object.entries(params).reduce(function (entries, _ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
 
     if (isArray(value)) {
       key = key.endsWith('[]') ? key : key + '[]';
@@ -520,17 +552,17 @@ function call_api(action, callback, options, get_params) {
     }
 
     return entries;
-  }, []).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
-
-    return value != null;
-  }).map(function (_ref5) {
+  }, []).filter(function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
         key = _ref6[0],
         value = _ref6[1];
 
+    return value != null;
+  }).map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        value = _ref8[1];
+
     return Buffer.from(encodeFieldPart(boundary, key, value), 'utf8');
   });
   var result = post(api_url, post_data, boundary, file, handle_response, options);

lib/utils/generateBreakpoints.js

@@ -10,15 +10,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /**
  * Helper function. Gets or populates srcset breakpoints using provided parameters
- * @private
  * Either the breakpoints or min_width, max_width, max_images must be provided.
  *
- * @param {object} srcset with either `breakpoints` or `min_width`, `max_width`, and `max_images`
- *
- * @param {number[]}  srcset.breakpoints An array of breakpoints.
- * @param {int}       srcset.min_width   Minimal width of the srcset images.
- * @param {int}       srcset.max_width   Maximal width of the srcset images.
- * @param {int}       srcset.max_images  Number of srcset images to generate.
+ * @module utils
+ * @private
+ * @param {srcset} srcset Options with either `breakpoints` or `min_width`, `max_width`, and `max_images`
  *
  * @return {number[]} Array of breakpoints
  *

lib/utils/srcsetUtils.js

@@ -9,6 +9,8 @@ var isEmpty = utils.isEmpty;
 var generateBreakpoints = require('./generateBreakpoints');
 
 var config = require('../../cloudinary').config;
+
+var Cache = require('./../Cache');
 /**
  * Options used to generate the srcset attribute.
  * @typedef {object} srcset
@@ -54,6 +56,33 @@ function scaledUrl(public_id, width, transformation) {
   }]);
   return utils.url(public_id, configParams);
 }
+/**
+ * If cache is enabled, get the breakpoints from the cache. If the values were not found in the cache,
+ * or cache is not enabled, generate the values.
+ * @param {srcset} srcset The srcset configuration parameters
+ * @param {string} public_id
+ * @param {object} options
+ * @return {*|Array}
+ */
+
+
+function getOrGenerateBreakpoints(public_id) {
+  var srcset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var breakpoints = [];
+
+  if (srcset.useCache) {
+    breakpoints = Cache.get(public_id, options);
+
+    if (!breakpoints) {
+      breakpoints = [];
+    }
+  } else {
+    breakpoints = generateBreakpoints(srcset);
+  }
+
+  return breakpoints;
+}
 /**
  * Helper function. Generates srcset attribute value of the HTML img tag
  * @private
@@ -117,7 +146,7 @@ function generateImageResponsiveAttributes(publicId) {
   var generateSrcset = !attributes.srcset;
 
   if (generateSrcset || generateSizes) {
-    var breakpoints = generateBreakpoints(srcsetData);
+    var breakpoints = getOrGenerateBreakpoints(publicId, srcsetData, options);
 
     if (generateSrcset) {
       var transformation = srcsetData.transformation;

src/cache.js

@@ -0,0 +1,149 @@
+
+const CACHE = Symbol.for("com.cloudinary.cache");
+const CACHE_ADAPTER = Symbol.for("com.cloudinary.cacheAdapter");
+const utils = require('./utils');
+const {ensurePresenceOf} = utils;
+
+/**
+ * The adapter used to communicate with the underlying cache storage
+ */
+class CacheAdapter {
+  constructor(storage) {}
+
+  /**
+   * Get a value from the cache
+   * @param {string} publicId
+   * @param {string} type
+   * @param {string} resourceType
+   * @param {string} transformation
+   * @return {*} the value associated with the provided arguments
+   */
+  get(publicId, type, resourceType, transformation, format) {}
+
+  /**
+   * Set a new value in the cache
+   * @param {string} publicId
+   * @param {string} type
+   * @param {string} resourceType
+   * @param {string} transformation
+   * @param {*} value
+   */
+  set(publicId, type, resourceType, transformation, format, value) {}
+
+  /**
+   * Delete all values in the cache
+   */
+  flushAll() {}
+
+}
+/**
+ * @class Cache
+ * Stores and retrieves values identified by publicId / options pairs
+ */
+const Cache = {
+  /**
+   * The adapter interface. Extend this class to implement a specific adapter.
+   * @type CacheAdapter
+   */
+  CacheAdapter,
+  /**
+   * Set the cache adapter
+   * @param {CacheAdapter} adapter The cache adapter
+   */
+  setAdapter(adapter) {
+    if(this.adapter){
+      console.warn("Overriding existing cache adapter");
+    }
+    this.adapter = adapter;
+  },
+  /**
+   * Get the adapter the Cache is using
+   * @return {CacheAdapter} the current cache adapter
+   */
+  getAdapter() {
+    return this.adapter;
+  },
+  /**
+   * Get an item from the cache
+   * @param {string} publicId
+   * @param {object} options
+   * @return {*}
+   */
+  get(publicId, options) {
+    if(!this.adapter) {return undefined;}
+    ensurePresenceOf({publicId});
+    let transformation = utils.generate_transformation_string({...options});
+    return this.adapter.get(
+      publicId, options.type || 'upload',
+      options.resource_type || 'image',
+      transformation,
+      options.format
+    );
+  },
+  /**
+   * Set a new value in the cache
+   * @param {string} publicId
+   * @param {object} options
+   * @param {*} value
+   * @return {*}
+   */
+  set(publicId, options, value) {
+    if(!this.adapter) {return undefined;}
+    ensurePresenceOf({publicId, value});
+    let transformation = utils.generate_transformation_string({...options});
+    return this.adapter.set(
+      publicId,
+      options.type || 'upload',
+      options.resource_type || 'image',
+      transformation,
+      options.format,
+      value
+    );
+  },
+  /**
+   * Clear all items in the cache
+   * @return {*} Returns the value from the adapter's flushAll() method
+   */
+  flushAll() {
+    if(!this.adapter) {return undefined;}
+    return this.adapter.flushAll();
+  }
+
+};
+
+// Define singleton property
+Object.defineProperty(Cache, "instance", {
+  get() {
+    return global[CACHE];
+  }
+});
+Object.defineProperty(Cache, "adapter", {
+  /**
+   *
+   * @return {CacheAdapter} The current cache adapter
+   */
+  get() {
+    return global[CACHE_ADAPTER];
+  },
+  /**
+   * Set the cache adapter to be used by Cache
+   * @param {CacheAdapter} adapter Cache adapter
+   */
+  set(adapter) {
+    global[CACHE_ADAPTER] = adapter;
+  }
+});
+Object.freeze(Cache);
+
+// Instantiate singleton
+let symbols = Object.getOwnPropertySymbols(global);
+if(!symbols.includes(CACHE)) {
+  global[CACHE] = Cache;
+}
+
+/**
+ * Store key value pairs
+
+ */
+module.exports = Cache;
+

src/cache/FileKeyValueStorage.js

@@ -0,0 +1,55 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('../utils/rimraf');
+
+class FileKeyValueStorage {
+  constructor({baseFolder} = {}) {
+    this.init(baseFolder);
+  }
+
+  init(baseFolder) {
+    if (baseFolder) {
+      fs.access(baseFolder, (err, result) => {
+        if (err) throw err;
+        this.baseFolder = baseFolder;
+      });
+    } else {
+      if(!fs.existsSync('test_cache')) {
+        fs.mkdirSync('test_cache');
+      }
+      this.baseFolder = fs.mkdtempSync('test_cache/cloudinary_cache_');
+      console.info("Created temporary cache folder at " + this.baseFolder);
+    }
+  }
+
+  get(key) {
+    let value = fs.readFileSync(this.getFilename(key));
+    try {
+      return JSON.parse(value);
+    } catch(e) {
+      throw "Cannot parse cache value";
+    }
+  }
+
+  set(key, value) {
+    fs.writeFileSync(this.getFilename(key), JSON.stringify(value));
+  }
+
+  clear() {
+    let files = fs.readdirSync(this.baseFolder);
+    for(let file of files) {
+      fs.unlinkSync(path.join(this.baseFolder, file));
+    }
+  }
+
+  deleteBaseFolder() {
+    rimraf(this.baseFolder);
+  }
+
+  getFilename(key) {
+    return path.format({name: key, base: key, ext: '.json', dir: this.baseFolder});
+  }
+
+}
+
+module.exports = FileKeyValueStorage;