useDocumentVisibility throws error when render in server

[afc163]

see ant-design/ant-design#29160

https://dev.azure.com/ant-design/ant-design/_build/results?buildId=13262&view=logs&j=a2b3994b-89d0-550c-2130-d92890401028&t=b04045b3-20f4-593c-3009-87be7f4e3abb

ReferenceError: document is not defined

[turkyden]

import { useState } from 'react';
import useEventListener from '../useEventListener';

type VisibilityState = 'hidden' | 'visible' | 'prerender' | undefined;

const getVisibility = () => {
  if (typeof document === 'undefined') return;
  return document.visibilityState;
};

function useDocumentVisibility(): VisibilityState {
  const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());

  useEventListener(
    'visibilitychange',
    () => {
      setDocumentVisibility(getVisibility());
    },
    {
      target: document,
    },
  );

  return documentVisibility;
}

export default useDocumentVisibility;

感觉是服务端渲染 ssr 下没有找到 document 对象啊。

[brickspert]

import { useState } from 'react';
import useEventListener from '../useEventListener';

type VisibilityState = 'hidden' | 'visible' | 'prerender' | undefined;

const getVisibility = () => {
  if (typeof document === 'undefined') return;
  return document.visibilityState;
};

function useDocumentVisibility(): VisibilityState {
  const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());

  useEventListener(
    'visibilitychange',
    () => {
      setDocumentVisibility(getVisibility());
    },
    {
      target: document,
    },
  );

  return documentVisibility;
}

export default useDocumentVisibility;

似乎应该在最上面加个 const document = window.document;

或者把 document 替换成 window.document

[afc163]

https://github.com/rehooks/document-visibility/blob/6170e2ff74e37a447bf0b911c151ba9fd3d9af55/index.js#L6

[turkyden]

import { useState } from 'react';
import useEventListener from '../useEventListener';

type VisibilityState = 'hidden' | 'visible' | 'prerender' | undefined;

const getVisibility = () => {
- if (typeof document === 'undefined') return;
+ if (typeof document === 'undefined') return true;
+ // Default document visibility to true for SSR
  return document.visibilityState;
};

function useDocumentVisibility(): VisibilityState {
  const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());

  useEventListener(
    'visibilitychange',
    () => {
      setDocumentVisibility(getVisibility());
    },
    {
      target: document,
    },
  );

  return documentVisibility;
}

export default useDocumentVisibility;

在采用服务端渲染 SSR 的情况下，貌似只能默认返回 true 了，或者拓展一下 useDocumentVisibility 的 API ?

Options

Params	Description	Type	Default
isSSR	Default document visibility to true for SSR	boolean	false

如果可以，我来 PR 一下吧？@brickspert @afc163

[brickspert]

We have fixed this problem in #935，and we will fully support ssr in v3.0.