Merge pull request #182 from cloudinary/fix/react-ssr-analytics-token

fix: use the same analytics token in react ssr and csr

Author: lbendavid-cloudinary

packages/html/src/utils/serverSideSrc.ts

@@ -6,9 +6,9 @@
  */
 import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
 import cloneDeep from 'lodash.clonedeep'
-import {Plugins} from "../types.js";
+import {AnalyticsOptions, Plugins} from "../types.js";
 
-export  function serverSideSrc(plugins?: Plugins, serverCloudinaryImage?: CloudinaryImage): string {
+export  function serverSideSrc(plugins?: Plugins, serverCloudinaryImage?: CloudinaryImage, analyticsOptions?: AnalyticsOptions): string {
   const clonedServerCloudinaryImage  = cloneDeep(serverCloudinaryImage);
   if(plugins){
     for(let i = 0; i < plugins.length; i++){
@@ -18,5 +18,5 @@ export  function serverSideSrc(plugins?: Plugins, serverCloudinaryImage?: Cloudi
       }
     }
   }
-  return clonedServerCloudinaryImage.toURL();
+  return clonedServerCloudinaryImage.toURL(analyticsOptions ? {trackedAnalytics: analyticsOptions} : null);
 }

packages/react/__tests__/analytics-ssr.test.tsx

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment node
+ */
+import { AdvancedImage } from '../src'
+import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage'
+import React from 'react'
+import { SDKAnalyticsConstants } from '../src/internal/SDKAnalyticsConstants'
+// @ts-ignore
+import { version } from '../package.json'
+import { renderToString } from 'react-dom/server'
+
+const cloudinaryImage = new CloudinaryImage('sample', { cloudName: 'demo' })
+
+describe('ssr analytics', () => {
+  beforeEach(() => {
+    SDKAnalyticsConstants.sdkSemver = '1.0.0'
+    SDKAnalyticsConstants.techVersion = '10.2.5'
+  })
+
+  afterEach(() => {
+    SDKAnalyticsConstants.sdkSemver = version
+    SDKAnalyticsConstants.techVersion = React.version
+  })
+  it('creates an img with analytics', function (done) {
+    const ElementImageHtml = renderToString(
+      <AdvancedImage cldImg={cloudinaryImage} />
+    )
+    setTimeout(() => {
+      expect(ElementImageHtml).toContain(
+        'https://res.cloudinary.com/demo/image/upload/sample?_a=AJAABDS0'
+      )
+      done()
+    }, 0) // one tick
+  })
+})

packages/react/src/AdvancedImage.tsx

@@ -115,7 +115,8 @@ class AdvancedImage extends React.Component <ImgProps> {
     } else { // on server side render
       const src = serverSideSrc(
         this.props.plugins,
-        this.props.cldImg
+        this.props.cldImg,
+        SDKAnalyticsConstants
       );
       return <img {...otherProps} src={src} />
     }