ImgSrcsetDirective - Support Responsive src API

[benbraou]

1. Overview of the Issue
   • ImgSrcsetDirective only support srcset.<breakpoint alias>. It should also support using src.<breakpoint alias>
   • Also, the directive should auto-wrap the dom element inside a <picture>
2. Flex-Layout version v2.0.0-beta.9 (feat(srcset): add srcset directive to inject <source> elements to sup… #366)
3. Motivation for or Use Case Enhancements suggested by @ThomasBurleson
4. Browsers and Operating System any
5. Reproduce the Error N.A
6. Screenshots N.A
7. Related Issues feat(srcset): add srcset directive to inject <source> elements to sup… #366 (comment)
8. Quoting @ThomasBurleson considerations

What happens when the user does NOT wrap the img inside a picture element?
Scenario #1:

<img style="width:auto;"
     src="https://dummyimage.com/400x200/c7c224/000.png&text=default"
     src.md="https://dummyimage.com/500x200/76c720/fff.png&text=md"
     src.sm="https://dummyimage.com/400x200/b925c7/fff.png&text=sm"
     src.lt-sm="https://dummyimage.com/300x200/c7751e/fff.png&text=lt-sm"
     src.gt-lg="https://dummyimage.com/700x200/258cc7/fff.png&text=gt-lg" >

In this case ^ (#1), should we auto-wrap the dom element inside a <picture> node?

Scenario #2:

Use tries to use the src property responsively:

<img style="width:auto;"
     src="https://dummyimage.com/400x200/c7c224/000.png&text=default"
     srcset.md="https://dummyimage.com/500x200/76c720/fff.png&text=md"
     srcset.sm="https://dummyimage.com/400x200/b925c7/fff.png&text=sm"
     srcset.lt-sm="https://dummyimage.com/300x200/c7751e/fff.png&text=lt-sm"
     srcset.gt-lg="https://dummyimage.com/700x200/258cc7/fff.png&text=gt-lg" >

In this case ^ (#2), should we responsively update the src property OR should we convert these
to srcset values?

[benbraou]

Scenario 1:
Yes, we should wrap inside a <picture> element but only if relevant.
I don't see why we would wrap the follwing inside a <picture> element.

<img style="width:auto;"
     src="https://dummyimage.com/400x200/c7c224/000.png&text=default">

The user is clearly intending in that case to use the <img> non responsivly.

  private _isHostImgResponsive(): boolean {
    return Object.keys(this._mergedInputMap).some(key => key !== 'src');
  }

Of course extra checks will be done along the way (only img selectors should be impacted by this logic, and we should not wrap in <picture> if already the case...

@ThomasBurleson : Are you ok with this ?

[benbraou]

Scenario 2:
Indeed we should support the src API. Now, about the implementation.

I see why we would like to update src value responsivly: since the user only mentions src<breakpoint alias> properties, we can say that to be coherent, the implementation should rely then only on the src attribute.

However I prefer that we convert the src values to srcset ones. Here is why:

• Supporting src API is sort of offering an API usability and ease of use to the developer. I think most developers don't care about its implementation behind the scenes. Therefore, I don't see myself as a developer using src<breakpoint alias> and demanding that <img> src value is updated.
• I don't like responsively updating the src when we are not technically obliged to (IE 11). I prefer to benefit from the browser capabilities when possible and keeping the logic of injecting <source> elements
• Updating the <img> src value should be a fallback strategy when we face browser limitations

@ThomasBurleson what do you think ?

[benbraou]

I am introducing in my future PR a EverGreenBrowserRenderStrategy that will be used to handle init and changes in the directive. This will pave the way #377 to simply create a LegacyBrowserRenderStrategy that updates the src values...
When everything is clarified (and #366 is merged in master), I will try to raise the PR this week (but ideally at the end of the month)