fix: make initial page visibility configurable (#26)

Previously, the page visibility state was initialized from the `document.hidden` state. When server-rendering, `document` is `undefined` and throws an error. Instead, we assume the page is visible on load by default, and allow a custom initial value to be passed in so client-rendered apps can keep using `document.hidden`.

src/hooks/usePageActiveTrigger/usePageActiveTrigger.ts

@@ -17,10 +17,10 @@ import useBaseTrigger from '../useBaseTrigger';
 import useVisibilityChange from '../useVisibilityChange';
 import { Events } from '../../types';
 
-const usePageActiveTrigger = () => {
+const usePageActiveTrigger = (initial?: boolean) => {
   const dispatch = useBaseTrigger(Events.pageView);
 
-  useVisibilityChange((isVisible) => isVisible && dispatch({}));
+  useVisibilityChange((isVisible) => isVisible && dispatch({}), initial);
 };
 
 export default usePageActiveTrigger;

src/hooks/useVisibilityChange/useVisibilityChange.spec.ts

@@ -26,24 +26,19 @@ describe('useVisibilityChange', () => {
   });
 
   it('should execute the provided callback every time visibility changes with the current visibility as prop', () => {
-    Object.defineProperty(document, 'hidden', {
-      configurable: true,
-      value: true
-    });
-
     const visibilityHandler = jest.fn();
 
     renderHook(() => useVisibilityChange(visibilityHandler));
 
     Object.defineProperty(document, 'hidden', {
       configurable: true,
-      value: false
+      value: true
     });
 
     act(() => {
       document.dispatchEvent(new Event('visibilitychange'));
     });
 
-    expect(visibilityHandler).toHaveBeenCalledWith(true);
+    expect(visibilityHandler).toHaveBeenCalledWith(false);
   });
 });

src/hooks/useVisibilityChange/useVisibilityChange.ts

@@ -17,10 +17,11 @@ import * as React from 'react';
 
 import usePrevious from '../usePrevious';
 
-const useVisibilityChange = (callback: (isVisible: boolean) => void): void => {
-  const [documentVisibility, setDocumentVisibility] = React.useState(
-    !document.hidden
-  );
+const useVisibilityChange = (
+  callback: (isVisible: boolean) => void,
+  initial = true
+): void => {
+  const [documentVisibility, setDocumentVisibility] = React.useState(initial);
   const previousVisibility = usePrevious(documentVisibility);
 
   React.useEffect(() => {