Merge pull request #204 from cloudinary/fix/html-image-destroy

fix: cleanup html layer on component unmount

Author: lbendavid-cloudinary

packages/html/__tests__/HtmlImageLayer.test.ts

@@ -3,8 +3,9 @@ import {HtmlImageLayer} from "../src";
 import {BaseAnalyticsOptions} from "../src/types";
 import {responsive} from "../src/plugins/responsive";
 import {placeholder} from "../src/plugins/placeholder";
-import {lazyload} from "../src/plugins/lazyload";
 import {accessibility} from "../src/plugins/accessibility";
+import {PluginResponse} from "../types";
+import {cancelCurrentlyRunningPlugins} from "../src/utils/cancelCurrentlyRunningPlugins";
 
 jest.useFakeTimers();
 
@@ -51,4 +52,47 @@ describe('HtmlImageLayer tests', function () {
         await flushPromises();
         expect(img.src).toEqualAnalyticsToken('AXAABABD');
     });
+
+    it('should set image src twice if HtmlImageLayer instance won\'t be unmounted', async function () {
+        const img = document.createElement('img');
+        const pluginsState: any = {
+            cleanupCallbacks: []
+        };
+        const spy = jest.spyOn(img, 'setAttribute');
+        const dummyFailingPlugin = (): Promise<PluginResponse> => new Promise((resolve) => {
+            pluginsState.cleanupCallbacks.push(() => {
+                resolve('canceled')
+            })
+        });
+        const dummyLazyLoadPlugin = (): Promise<PluginResponse> => new Promise((resolve) => {
+            resolve({lazyload: true});
+        });
+        new HtmlImageLayer(img, cldImage, [dummyFailingPlugin]);
+        new HtmlImageLayer(img, cldImage, [dummyLazyLoadPlugin]);
+        cancelCurrentlyRunningPlugins(pluginsState);
+        await flushPromises();
+        expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should set image src only once if HtmlImageLayer instance will be unmounted', async function () {
+        const img = document.createElement('img');
+        const pluginsState: any = {
+            cleanupCallbacks: []
+        };
+        const spy = jest.spyOn(img, 'setAttribute');
+        const dummyFailingPlugin = (): Promise<PluginResponse> => new Promise((resolve) => {
+            pluginsState.cleanupCallbacks.push(() => {
+                resolve('canceled')
+            })
+        });
+        const dummyLazyLoadPlugin = (): Promise<PluginResponse> => new Promise((resolve) => {
+            resolve({lazyload: true});
+        });
+        const instance1 = new HtmlImageLayer(img, cldImage, [dummyFailingPlugin]);
+        new HtmlImageLayer(img, cldImage, [dummyLazyLoadPlugin]);
+        cancelCurrentlyRunningPlugins(pluginsState);
+        instance1.unmount();
+        await flushPromises();
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
 });

packages/html/src/layers/htmlImageLayer.ts

@@ -6,6 +6,7 @@ import {getAnalyticsOptions} from "../utils/analytics";
 
 export class HtmlImageLayer{
   private imgElement: any;
+  private isMounted = true;
   htmlPluginState: HtmlPluginState;
   constructor(element: HTMLImageElement | null, userCloudinaryImage: CloudinaryImage, plugins?: Plugins, baseAnalyticsOptions?: BaseAnalyticsOptions){
     this.imgElement = element;
@@ -14,6 +15,9 @@ export class HtmlImageLayer{
 
     render(element, pluginCloudinaryImage, plugins, this.htmlPluginState, baseAnalyticsOptions)
         .then((pluginResponse)=>{ // when resolved updates the src
+          if (!this.isMounted) {
+              return;
+          }
           this.htmlPluginState.pluginEventSubscription.forEach(fn=>{fn()});
           const analyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, pluginResponse);
           this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(analyticsOptions));
@@ -30,8 +34,14 @@ export class HtmlImageLayer{
     const pluginCloudinaryImage  = cloneDeep(userCloudinaryImage);
     render(this.imgElement, pluginCloudinaryImage, plugins, this.htmlPluginState)
         .then((pluginResponse)=>{
+            if (!this.isMounted) {
+                return;
+            }
             const featuredAnalyticsOptions = getAnalyticsOptions(baseAnalyticsOptions, pluginResponse);
             this.imgElement.setAttribute('src', pluginCloudinaryImage.toURL(featuredAnalyticsOptions));
         });
   }
+  unmount() {
+      this.isMounted = false;
+  }
 }

packages/react/src/AdvancedImage.tsx

@@ -97,11 +97,12 @@ class AdvancedImage extends React.Component <ImgProps> {
   }
 
   /**
-   * On unmount, we cancel the currently running plugins.
+   * On unmount, we cancel the currently running plugins, and destroy the html layer instance
    */
   componentWillUnmount() {
     // Safely cancel running events on unmount.
     cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);
+    this.htmlLayerInstance.unmount();
   }
 
   render() {