useResponsiveComponent prop values not applied during SSR

[kettanaito]

What:

import styled from 'styled-components'
import { useResponsiveComponent } from 'atomic-layout'

const StyledImage = styled.img`
  border-radius: 5px;
`
const ElementImage = useResponsiveComponent(StyledImage)

const Example = () => (
  <ElementImage src="foo.png" />
)

The ElementImage component will render an image without the src attribute during SSR.

Why:

My initial guess is that useResponsiveComponent, has its values throttled in a way which results the initial value not being set at all.

Environment:

• node vesrion: 12.x
• npm version: 6.x
• atomic-layout version: 0.12.x

[kettanaito]

Would you have time to look into this issue please, @ruhaise? I'd gladly provide with assistance along the way.

[ruhaise]

@kettanaito im on it :)

[kettanaito]

@ruhaise Thanks! I can recommend to start from writing a unit test for SSR of useResponsiveComponent use case described above. Take a look at the SSR unit test for inspiration. Perhaps we would have to extend that test suite to render responsive component for verification of this issue.

Seeing a relevant test failing is a great first step to start fixing anything.

[ruhaise]

@kettanaito thanks for the advice, sounds promising

[kettanaito]

Initial fix published in [email protected]. Please update for it to take effect.

There is a new behavior-related issue found and will be addressed under #284.