Fix incorrect responsive behaviour with SSR responsive

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<void | string> {
+export function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<void | string> | boolean {
  if(isBrowser()){
 
  if(!isImage(element)) return;
@@ -41,5 +41,6 @@ export function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageE
  });
  }else{
  pluginCloudinaryImage.effect(ACCESSIBILITY_MODES[mode]);
+ return true;
  }
 }

packages/html/src/plugins/placeholder.ts

@@ -26,7 +26,7 @@ export function placeholder({mode='vectorize'}:{mode?: string}={}): Plugin{
  * @param pluginCloudinaryImage {CloudinaryImage}
  * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
  */
-function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<void | string> {
+function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<void | string> | boolean {
  // @ts-ignore
  // If we're using an invalid mode, we default to vectorize
  if(!PLACEHOLDER_IMAGE_OPTIONS[mode]){
@@ -51,12 +51,25 @@ function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, plu
  // in SSR, we copy the transformations of the clone to the user provided CloudinaryImage
  // We return here, since we don't have HTML elements to work with.
  pluginCloudinaryImage.transformation = placeholderClonedImage.transformation;
- return;
+
+ return true;
  }
 
  // Client side rendering, if an image was not provided we don't perform any action
  if(!isImage(element)) return;
 
+ // For the cloned placeholder image, we remove the responsive action.
+ // There's no need to load e_pixelate,w_{responsive} beacuse that image is temporary as-is
+ // and it just causes another image to load.
+
+ // This also means that the de-facto way to use responsive in SSR is WITH placeholder.
+ // This also means that the user must provide dimensions for the responsive plugin on the img tag.
+ placeholderClonedImage.transformation.actions.forEach((action, index) => {
+ if (action instanceof Action && action.getActionTag() === 'responsive') {
+ delete placeholderClonedImage.transformation.actions[index];
+ }
+ });
+
  // Set the SRC of the imageElement to the URL of the placeholder Image
  element.src = placeholderClonedImage.toURL();
 

packages/html/src/plugins/responsive.ts

@@ -27,8 +27,9 @@ export function responsive({steps}:{steps?: number | number[]}={}): Plugin{
  * @param responsiveImage {CloudinaryImage}
  * @param htmlPluginState {HtmlPluginState} holds cleanup callbacks and event subscriptions
  */
-function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState): Promise<void | string> {
- if(!isBrowser()) return;
+function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState): Promise<void | string> | boolean {
+
+ if(!isBrowser()) return true;
 
  if(!isImage(element)) return;
 
@@ -40,7 +41,7 @@ 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 an responive image.
+ // Immediately run the resize plugin, ensuring that first render gets a responsive image.
  onResize(steps, element, responsiveImage);
 
  let resizeRef: any;