useReducedMotion hook: guard the reference to window

[jsnajdr]

Fixes a bug where a naked reference to window will crash if used in a SSR context where there's no window.

Discovered when trying to upgrade Calypso to the latest @wordpress/compose.

[sirreal]

Related: #16227

[sirreal]

Thanks! This looks good to me. I verified there were no regressions with the block-list animation that depends on the reduced motion hook. With reduced motion enabled and disabled:

[gziolo]

@jsnajdr - can you think of a unit test which would prevent such issues in the future? I think by design, all unit tests use environment which simulates DOM with jsdom library. It can be disabled with code comments and set to node. The question is how do you server-side render code which uses WP packages?

[gziolo]

@koke - this is another place where we could take advantage of some sort of platform detection. It would be useful not only for detecting native iOS or Android.

[koke]

I think in this case we could have a separate native implementation, since react native 0.60 exposes those APIs in AccessibilityInfo

I can't test this on 0.60 right now, but something like this should do it:

function useReducedMotion() {
    const [ reducedMotion, setReducedMotion ] = useState( false );
    useEffect( () => {
        const updateReducedMotion = () => AccessibilityInfo.isReduceMotionEnabled().then( setReducedMotion );
        updateReducedMotion();
        AccessibilityInfo.addEventListener('reduceMotionChanged', updateReducedMotion);
        return () => {
            AccessibilityInfo.removeEventListener('reduceMotionChanged', updateReducedMotion);
        };
    } );
    
    return reducedMotion;
}

[jsnajdr]

can you think of a unit test which would prevent such issues in the future?

In this case, the easiest TDD-style test would be to simply import @wordpress/compose in a Node.js environment without DOM. And it would fail.

Neither compose nor components packages use the sideEffects: false flag (although they would be a good fit IMO), so using anything from compose bundles the whole library.

And the window check is a top-level statement in the module. We don't need to use or instantiate the useReducedMotion hook at all to get a broken build.

[gziolo]

Filed new issue in #17273.