Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useReducedMotion hook: guard the reference to window #17165

Merged
merged 1 commit into from Aug 27, 2019

Conversation

@jsnajdr
Copy link
Contributor

commented Aug 23, 2019

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.

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

This comment has been minimized.

Copy link
Member

commented Aug 26, 2019

Related: #16227

Copy link
Member

left a comment

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:

reduced-motion

@gziolo

This comment has been minimized.

Copy link
Member

commented Aug 27, 2019

@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 gziolo merged commit 9c58193 into WordPress:master Aug 27, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@@ -8,7 +8,9 @@ import useMediaQuery from '../use-media-query';
*
* @type {boolean}
*/
const IS_IE = window.navigator.userAgent.indexOf( 'Trident' ) >= 0;
const IS_IE =
typeof window !== 'undefined' &&

This comment has been minimized.

Copy link
@gziolo

gziolo Aug 27, 2019

Member

@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.

This comment has been minimized.

Copy link
@koke

koke Aug 27, 2019

Contributor

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

This comment has been minimized.

Copy link
Contributor Author

commented Aug 27, 2019

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.

dratwas added a commit to callstack/gutenberg that referenced this pull request Aug 28, 2019
Fixes a bug where a naked reference to `window` will crash if used in a SSR
context where there's no `window`.
@gziolo gziolo added this to the Gutenberg 6.5 milestone Aug 30, 2019
@gziolo

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

Filed new issue in #17273.

dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
Fixes a bug where a naked reference to `window` will crash if used in a SSR
context where there's no `window`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.