Merge pull request #196 from cloudinary/plugins-use-analytics-tokens

fix: pass analytics options down to the plugins, and use it in placeh…

Author: lbendavid-cloudinary

packages/html/src/layers/htmlImageLayer.ts

@@ -2,6 +2,7 @@ import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
 import {Plugins, HtmlPluginState, AnalyticsOptions} from '../types.js'
 import cloneDeep from 'lodash.clonedeep';
 import {render} from '../utils/render.js';
+import {getAnalyticsOptions} from "../utils/analytics";
 
 export class HtmlImageLayer{
   private imgElement: any;
@@ -11,16 +12,10 @@ export class HtmlImageLayer{
     this.htmlPluginState = {cleanupCallbacks:[], pluginEventSubscription: []};
     const pluginCloudinaryImage  = cloneDeep(userCloudinaryImage);
 
-    render(element, pluginCloudinaryImage, plugins, this.htmlPluginState)
+    render(element, pluginCloudinaryImage, plugins, this.htmlPluginState, analyticsOptions)
         .then(()=>{ // when resolved updates the src
           this.htmlPluginState.pluginEventSubscription.forEach(fn=>{fn()});
-            this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL({
-                ...analyticsOptions && {trackedAnalytics: {
-                    sdkCode: analyticsOptions.sdkCode,
-                    sdkSemver: analyticsOptions.sdkSemver,
-                    techVersion: analyticsOptions.techVersion,
-                }}
-            }));
+            this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions)));
         });
   }
 
@@ -34,13 +29,7 @@ export class HtmlImageLayer{
     const pluginCloudinaryImage  = cloneDeep(userCloudinaryImage);
     render(this.imgElement, pluginCloudinaryImage, plugins, this.htmlPluginState)
         .then(()=>{
-          this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL({
-            ...analyticsOptions && {trackedAnalytics: {
-                  sdkCode: analyticsOptions.sdkCode,
-                  sdkSemver: analyticsOptions.sdkSemver,
-                  techVersion: analyticsOptions.techVersion,
-              }}
-          }));
+          this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions)));
         });
   }
 }

packages/html/src/plugins/placeholder.ts

@@ -1,11 +1,12 @@
 import cloneDeep from 'lodash.clonedeep'
 import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
-import {Plugin, HtmlPluginState} from "../types";
+import {Plugin, HtmlPluginState, AnalyticsOptions} from "../types";
 import {PLACEHOLDER_IMAGE_OPTIONS, singleTransparentPixel} from '../utils/internalConstants.js';
 import {PlaceholderMode} from '../types.js';
 import {isBrowser} from "../utils/isBrowser.js";
 import {Action} from "@cloudinary/url-gen/internal/Action";
-import {isImage} from "../utils/isImage.js";
+import {isImage} from "../utils/isImage";
+import {getAnalyticsOptions} from "../utils/analytics";
 
 /**
  * @namespace
@@ -25,8 +26,9 @@ export function placeholder({mode='vectorize'}:{mode?: string}={}): Plugin{
  * @param element {HTMLImageElement} The image element.
  * @param pluginCloudinaryImage {CloudinaryImage}
  * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
+ * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
-function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<void | string> | boolean {
+function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, analyticsOptions?: AnalyticsOptions): Promise<void | string> | boolean {
   // @ts-ignore
   // If we're using an invalid mode, we default to vectorize
   if(!PLACEHOLDER_IMAGE_OPTIONS[mode]){
@@ -71,7 +73,7 @@ function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, plu
   });
 
   // Set the SRC of the imageElement to the URL of the placeholder Image
-  element.src = placeholderClonedImage.toURL();
+  element.src = placeholderClonedImage.toURL(getAnalyticsOptions(analyticsOptions));
 
   //Fallback, if placeholder errors, load a single transparent pixel
   element.onerror = () => {
@@ -98,7 +100,7 @@ function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, plu
       });
       // load image once placeholder is done loading
       const largeImage = new Image();
-      largeImage.src = pluginCloudinaryImage.toURL();
+      largeImage.src = pluginCloudinaryImage.toURL(getAnalyticsOptions(analyticsOptions));
       largeImage.onload = () => {
         resolve();
       };

packages/html/src/plugins/responsive.ts

@@ -1,11 +1,12 @@
 import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
-import {Plugin, HtmlPluginState} from "../types.js";
+import {Plugin, HtmlPluginState, AnalyticsOptions} from "../types.js";
 import {scale} from "@cloudinary/url-gen/actions/resize";
 import debounce from 'lodash.debounce';
 import {isNum} from '../utils/isNum.js';
 import {isBrowser} from "../utils/isBrowser.js";
 import {Action} from "@cloudinary/url-gen/internal/Action";
 import {isImage} from "../utils/isImage.js";
+import {getAnalyticsOptions} from '../utils/analytics'
 
 /**
  * @namespace
@@ -26,8 +27,9 @@ export function responsive({steps}:{steps?: number | number[]}={}): Plugin{
  * @param element {HTMLImageElement} The image element
  * @param responsiveImage {CloudinaryImage}
  * @param htmlPluginState {HtmlPluginState} holds cleanup callbacks and event subscriptions
+ * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
-function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState): Promise<void | string> | boolean {
+function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState, analyticsOptions?: AnalyticsOptions): Promise<void | string> | boolean {
 
   if(!isBrowser()) return true;
 
@@ -42,12 +44,12 @@ function responsivePlugin(steps?: number | number[], element?:HTMLImageElement,
     // Use a tagged generic action that can be later searched and replaced.
     responsiveImage.addAction(new Action().setActionTag('responsive'));
     // Immediately run the resize plugin, ensuring that first render gets a responsive image.
-    onResize(steps, element, responsiveImage);
+    onResize(steps, element, responsiveImage, analyticsOptions);
 
     let resizeRef: any;
     htmlPluginState.pluginEventSubscription.push(()=>{
       window.addEventListener('resize', resizeRef = debounce(()=>{
-        onResize(steps, element, responsiveImage);
+        onResize(steps, element, responsiveImage, analyticsOptions);
       }, 100));
     });
     resolve();
@@ -60,10 +62,11 @@ function responsivePlugin(steps?: number | number[], element?:HTMLImageElement,
  * | number[] A set of image sizes in pixels.
  * @param element {HTMLImageElement} The image element
  * @param responsiveImage {CloudinaryImage}
+ * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
-function onResize(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage){
+function onResize(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, analyticsOptions?: AnalyticsOptions){
   updateByContainerWidth(steps, element, responsiveImage);
-  element.src = responsiveImage.toURL();
+  element.src = responsiveImage.toURL(getAnalyticsOptions(analyticsOptions));
 }
 
 /**

packages/html/src/types.ts

@@ -1,7 +1,7 @@
 import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
 import {VideoCodecAction} from "@cloudinary/url-gen/actions/transcode/VideoCodecAction";
 
-export type Plugin = (element: HTMLImageElement|HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState) => Promise<string | void>;
+export type Plugin = (element: HTMLImageElement|HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, analyticsOptions?: AnalyticsOptions) => Promise<string | void>;
 
 export type Plugins = Plugin[];
 

packages/html/src/utils/analytics.ts

@@ -0,0 +1,11 @@
+import {AnalyticsOptions} from "../types";
+
+export const getAnalyticsOptions = (options?: AnalyticsOptions) => {
+    return options ? {
+        trackedAnalytics: {
+            sdkCode: options.sdkCode,
+            sdkSemver: options.sdkSemver,
+            techVersion: options.techVersion,
+        }
+    } : null
+}

packages/html/src/utils/render.ts

@@ -1,4 +1,4 @@
-import {Plugins, HtmlPluginState} from '../types.js'
+import {Plugins, HtmlPluginState, AnalyticsOptions} from '../types.js'
 import {CloudinaryVideo, CloudinaryImage} from "@cloudinary/url-gen";
 
 /**
@@ -8,11 +8,12 @@ import {CloudinaryVideo, CloudinaryImage} from "@cloudinary/url-gen";
  * @param pluginCloudinaryAsset {CloudinaryImage|CloudinaryVideo} The Cloudinary asset generated by base
  * @param plugins {plugins} array of plugins passed in by the user
  * @param pluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions
+ * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
-export async function render(element: HTMLImageElement | HTMLVideoElement, pluginCloudinaryAsset: CloudinaryImage | CloudinaryVideo, plugins: Plugins, pluginState: HtmlPluginState) {
+export async function render(element: HTMLImageElement | HTMLVideoElement, pluginCloudinaryAsset: CloudinaryImage | CloudinaryVideo, plugins: Plugins, pluginState: HtmlPluginState, analyticsOptions?: AnalyticsOptions) {
     if(plugins === undefined) return;
     for(let i = 0; i < plugins.length; i++){
-        const response = await plugins[i](element, pluginCloudinaryAsset, pluginState);
+        const response = await plugins[i](element, pluginCloudinaryAsset, pluginState, analyticsOptions);
         if(response === 'canceled'){
             break;
         }