Merge pull request #221 from cloudy408/responsive-plugin-behavior-2

feat: added functionality to avoid rendering responsive plugin when placeholder is added

Author: pawelphilipczyk-cloudinary

packages/html/__tests__/HtmlImageLayer.test.ts

@@ -127,4 +127,32 @@ describe('HtmlImageLayer tests', function () {
  // test that the src which set by HtmlImageLayer contains last character "B" which is the character of placeholder plugin
  expect(imgSetAttributeSpy.mock.calls[0][1]).toEqualAnalyticsToken('BAXAABABB');
  });
+
+ it('should verfiy no responsive image request is fired with placeholder plugin', async function () {
+ const OriginalImage = Image;
+ // mocking Image constructor in order to simulate firing 'load' event
+ jest.spyOn(global, "Image").mockImplementation(() => {
+ const img = new OriginalImage();
+ setTimeout(() => {
+ img.dispatchEvent(new Event("load"));
+ }, 10)
+ return img;
+
+ })
+ const parentElement = document.createElement('div');
+ const img = document.createElement('img');
+ parentElement.append(img);
+ const imgSrcSpy = jest.spyOn(img, 'src', 'set');
+ const imgSetAttributeSpy = jest.spyOn(img, 'setAttribute');
+ new HtmlImageLayer(img, cldImage, [responsive({steps: 200}),placeholder()], sdkAnalyticsTokens);
+ await flushPromises();
+ expect(imgSrcSpy).toHaveBeenCalledTimes(1);
+ // test that the initial src is set to a token contains last character "B" which is the character of placeholder plugin
+ const imgSrcSpyAnalyticsToken = imgSrcSpy.mock.calls[0][0];
+ expect(imgSrcSpyAnalyticsToken).toEqualAnalyticsToken('BAXAABABB');
+ await flushPromises();
+ await flushPromises();
+ //TODO we want to check the second image that is loaded for the presence of a w_ paramter
+ expect(img.src).toBe("abc");
+ });
 });

packages/html/src/plugins/accessibility.ts

@@ -22,7 +22,7 @@ export function accessibility({mode = 'darkmode'}: { mode?: string; }={}): Plugi
  * @param pluginCloudinaryImage {CloudinaryImage}
  * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
  */
-export function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<PluginResponse> | boolean {
+export function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, plugins?: Plugin[]): Promise<PluginResponse> | boolean {
  if(isBrowser()){
 
  if(!isImage(element)) return;

packages/html/src/plugins/lazyload.ts

@@ -29,7 +29,7 @@ export function lazyload({rootMargin='0px', threshold=0.1}:{rootMargin?: string,
  * @param cloudinaryImage {CloudinaryImage}
  * @param htmlPluginState {HtmlPluginState} Holds cleanup callbacks and event subscriptions.
  */
-function lazyloadPlugin(rootMargin='0px', threshold=0.1 , element: HTMLImageElement | HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<PluginResponse> | boolean {
+function lazyloadPlugin(rootMargin='0px', threshold=0.1 , element: HTMLImageElement | HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, plugins?: Plugin[]): Promise<PluginResponse> | boolean {
  // if SSR skip plugin
  if(!isBrowser()) return false;
 

packages/html/src/plugins/placeholder.ts

@@ -28,7 +28,9 @@ export function placeholder({mode='vectorize'}:{mode?: string}={}): Plugin{
  * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
  * @param baseAnalyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
  */
-function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions): Promise<PluginResponse> | boolean {
+// TODO: Optionally we might want to hold of with rendering
+// Maybe there is something in the responsive plugin already that should be moved here too?
+function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions, plugins?: Plugin[]): Promise<PluginResponse> | boolean {
  // @ts-ignore
  // If we're using an invalid mode, we default to vectorize
  if(!PLACEHOLDER_IMAGE_OPTIONS[mode]){

packages/html/src/plugins/responsive.ts

@@ -29,7 +29,9 @@ export function responsive({steps}:{steps?: number | number[]}={}): Plugin{
  * @param htmlPluginState {HtmlPluginState} holds cleanup callbacks and event subscriptions
  * @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
  */
-function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions): Promise<PluginResponse> | boolean {
+function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions, plugins?: Plugin[]): Promise<PluginResponse> | boolean {
+
+ console.debug(plugins);
 
  if(!isBrowser()) return true;
 
@@ -46,7 +48,28 @@ 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, analyticsOptions);
+ // If we disable initial run entirely the placeholder will load non-resposive image
+ 
+ const regex = /.*placeholder.*/gm;
+ let shouldRunImmediately = true // TODO: logic to test if there is a placeholder plugin
+
+ plugins.forEach((p)=>{
+ if (regex.exec(p.name) !== null){
+ console.debug("found the placeholder plugin!!!");
+ shouldRunImmediately = false;
+ }
+ });
+
+
+ console.debug("analyticsOptions: ",analyticsOptions);
+ console.debug("analyticsOptinos name: ",analyticsOptions.trackedAnalytics);
+
+ if(shouldRunImmediately) {
+ onResize(steps, element, responsiveImage, analyticsOptions);
+ } else {
+ // Probably this has to run on else, see comments in line 83
+ updateByContainerWidth(steps, element, responsiveImage);
+ }
 
  let resizeRef: any;
  htmlPluginState.pluginEventSubscription.push(()=>{
@@ -67,8 +90,20 @@ function responsivePlugin(steps?: number | number[], element?:HTMLImageElement,
  * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
 function onResize(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, analyticsOptions?: AnalyticsOptions){
+ 
  updateByContainerWidth(steps, element, responsiveImage);
+ // TODO: 1. Responsive should not load the image if placeholder is running next
+ // It has to know, the placeholder is in the plugins
+ // A. Get plugins as a new fifth argument of the `responsivePlugin` function
+ // B. Loop over plugins and check if any of plugin.name is equal to "bound placeholderPlugin"
+
+ // If we disable each onResize then placeholder will render original image (!)
+ // So this cannot be conditional because we want run it always on window resize later
  element.src = responsiveImage.toURL(analyticsOptions);
+
+ // So the magic to make sure placeholder loads large image with responsive
+ // Is done by the updateByContainerWidth function call
+ // ... and we might need to make sure it's called in line 53 if shouldRunImmediately is false
 }
 
 /**

packages/html/src/types.ts

@@ -4,7 +4,7 @@ import {
  ITrackedPropertiesThroughAnalytics
 } from "@cloudinary/url-gen/sdkAnalytics/interfaces/ITrackedPropertiesThroughAnalytics";
 
-export type Plugin = (element: HTMLImageElement|HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions) => Promise<PluginResponse>;
+export type Plugin = (element: HTMLImageElement|HTMLVideoElement, cloudinaryImage: CloudinaryImage, htmlPluginState?: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions,plugins?:Plugins) => Promise<PluginResponse>;
 
 export type Plugins = Plugin[];
 

packages/html/src/utils/render.ts

@@ -1,3 +1,4 @@
+import { lazyload } from 'plugins/lazyload';
 import {Plugins, HtmlPluginState, BaseAnalyticsOptions, PluginResponse} from '../types'
 import {CloudinaryVideo, CloudinaryImage} from "@cloudinary/url-gen";
 
@@ -14,10 +15,24 @@ export async function render(element: HTMLImageElement | HTMLVideoElement, plugi
  if (plugins === undefined) return;
  let response: PluginResponse;
  for (let i = 0; i < plugins.length; i++) {
- response = await plugins[i](element, pluginCloudinaryAsset, pluginState, analyticsOptions);
+ // TODO: We have to pass all plugins to each plugin (so that each can determine what to do)
+ // 1. Pass plugins as a fifth parameter below (after analyticsOptions)
+ // 
+ // 2. Inside each plugin we can use `name` property of the plugin functions to see what was added
+ // 
+ // Example given the plugins look like below: 
+ // const plugins = [lazyload(), responsive()]
+ // Then if you console log plugins[0].name you should get 'bound lazyloadPlugin'
+ // plugins[0].name === 'bound lazyloadPlugin'
+ const pluginResponse = await plugins[i](element, pluginCloudinaryAsset, pluginState, analyticsOptions, plugins);
  if (response === 'canceled') {
  break;
  }
+ if(typeof pluginResponse === 'object') {
+ response = {...response, ...pluginResponse};
+ } else {
+ response = pluginResponse
+ }
  }
  if (response !== 'canceled') {
  return response;

playground/html/index.html

@@ -4,9 +4,15 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@Cloudinary/html Playground</title>
+ <style>
+ img {
+ width: 100%;
+ }
+ </style>
  </head>
  <body>
- <div id="app"></div>
+ <h1>Test Environment</h1> 
+ <div id="app" style="width:500px"></div>
  <script type="module" src="/src/main.ts"></script>
  </body>
 </html>

playground/html/src/main.ts

@@ -1,13 +1,14 @@
 import {CloudinaryImage} from "@cloudinary/url-gen";
 import {HtmlImageLayer} from "@cloudinary/html";
-import {responsive} from "@cloudinary/html";
+import {responsive,placeholder} from "@cloudinary/html";
 
 const app = document.querySelector<HTMLDivElement>('#app');
 if (app) {
  const img = document.createElement('img');
  const cldImg = new CloudinaryImage('sample', {cloudName: 'demo'});
+ console.debug("img.URL: ", cldImg.toURL());
  app.append(img);
- new HtmlImageLayer(img, cldImg, [responsive({steps: [100]})], {
+ new HtmlImageLayer(img, cldImg, [responsive({steps: 200}),placeholder()], {
  sdkCode: 'X',
  sdkSemver: '1.0.0',
  techVersion: '2.0.0'