feat: add visibilityState (#88)

* feat: add visibilityState

* visibility add tests and add hidden

* rename visibilityState to pageVisibility

* added documentation

CHANGELOG.md

@@ -6,10 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 
 ---
-
 ### Added
 
 - [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
+- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
 
 ## 1.0.0-dev.4
 

docs/.vuepress/components/PageVisibilityExample.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h4>
+      Hidden: <b>{{ hidden }}</b>
+    </h4>
+    <h4>
+      State: <b>{{ visibility }}</b>
+    </h4>
+    <p>You can change the state by switching tab - Check console</p>
+    <p>
+      <a
+        href="https://sqa.stackexchange.com/a/32355"
+        target="_blank"
+        rel="noopener noreferrer"
+        >Check this link</a
+      >
+    </p>
+  </div>
+</template>
+
+<script>
+import { usePageVisibility, unwrap } from "vue-composable";
+import { watch, reactive } from "@vue/composition-api";
+export default {
+  setup() {
+    const { visibility, hidden } = usePageVisibility();
+    watch(visibility, () => {
+      console.log("visibility changed", {
+        visibility: visibility.value,
+        hidden: hidden.value
+      });
+    });
+    return { visibility, hidden };
+  }
+};
+</script>

docs/.vuepress/config.js

@@ -203,7 +203,8 @@ module.exports = {
             ["composable/web/webSocket", "webSocket"],
             ["composable/web/intersectionObserver", "IntersectionObserver"],
             ["composable/web/networkInformation", "NetworkInformation"],
-            ["composable/web/online", "Navigator.onLine"]
+            ["composable/web/online", "Navigator.onLine"],
+            ["composable/web/pageVisibility", "PageVisibilityAPI"]
           ]
         },
         {

docs/README.md

@@ -76,6 +76,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [IntersectionObserver](composable/web/intersectionObserver) - reactive `IntersectionObserver`
 - [NetworkInformation](composable/web/networkInformation) - reactive `NetworkInformation` wrapper
 - [Online](composable/web/online) - reactive `navigator.onLine` wrapper
+- [PageVisibility](composable/web/pageVisibility) - reactive `Page Visibility API`
 
 ### External
 

docs/composable/web/pageVisibility.md

@@ -0,0 +1,65 @@
+# Page Visibility
+
+> [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API).
+
+## State
+
+The `usePageVisibility` function exposes the following reactive state:
+
+```js
+import { usePageVisibility } from "vue-composable";
+
+const { visibility, hidden } = usePageVisibility();
+```
+
+| State      | Type                   | Description                       |
+| ---------- | ---------------------- | --------------------------------- |
+| visibility | `Ref(VisibilityState)` | Current document visibility state |
+| hidden     | `Ref(Boolean)`         | `document.hidden`                 |
+
+## Example
+
+<ClientOnly>
+<page-visibility-example/>
+</ClientOnly>
+
+### Code
+
+```vue
+<template>
+  <div>
+    <h4>
+      Hidden: <b>{{ hidden }}</b>
+    </h4>
+    <h4>
+      State: <b>{{ visibility }}</b>
+    </h4>
+    <p>You can change the state by switching tab - Check console</p>
+    <p>
+      <a
+        href="https://sqa.stackexchange.com/a/32355"
+        target="_blank"
+        rel="noopener noreferrer"
+        >Check this link</a
+      >
+    </p>
+  </div>
+</template>
+
+<script>
+import { usePageVisibility, unwrap } from "vue-composable";
+import { watch, reactive } from "@vue/composition-api";
+export default {
+  setup() {
+    const { visibility, hidden } = usePageVisibility();
+    watch(visibility, () => {
+      console.log("visibility changed", {
+        visibility: visibility.value,
+        hidden: hidden.value
+      });
+    });
+    return { visibility, hidden };
+  }
+};
+</script>
+```

packages/vue-composable/README.md

@@ -59,6 +59,7 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [IntersectionObserver](https://pikax.me/vue-composable/composable/web/intersectionObserver) - reactive `IntersectionObserver`
 - [NetworkInformation](https://pikax.me/vue-composable/composable/web/networkInformation) - reactive `NetworkInformation` wrapper
 - [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
+- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
 
 ### External
 

packages/web/README.md

@@ -42,7 +42,8 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [IntersectionObserver](https://pikax.me/vue-composable/composable/web/intersectionObserver) - reactive `IntersectionObserver`
 - [NetworkInformation](https://pikax.me/vue-composable/composable/web/networkInformation) - reactive `NetworkInformation` wrapper
 - [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
-
+- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
+- 
 ## Contributing
 
 1. Fork it!

packages/web/__tests__/web/pageVisibility.spec.ts

@@ -0,0 +1,52 @@
+import { usePageVisibility } from "../../src";
+
+describe("pageVisibility", () => {
+  const documentEventSpy = jest.fn();
+  const documentEvent = document.addEventListener;
+
+  const raiseVisibilityChange = () => documentEventSpy.mock.calls[0][1]();
+
+  const visibilityGetter = jest.spyOn(document, 'visibilityState', 'get');
+  const hiddenGetter = jest.spyOn(document, 'hidden', 'get');
+
+  const updateVisibility = (v: VisibilityState, hidden: boolean) => {
+    visibilityGetter.mockImplementation(() => v);
+    hiddenGetter.mockImplementation(() => hidden);
+
+    raiseVisibilityChange();
+  }
+
+  beforeAll(() => {
+    document.addEventListener = documentEventSpy;
+  })
+  afterAll(() => {
+    document.addEventListener = documentEvent;
+  })
+
+  it('should only add event listener once', () => {
+    expect(documentEventSpy).not.toHaveBeenCalled();
+
+    usePageVisibility();
+    usePageVisibility();
+
+    expect(documentEventSpy).toHaveBeenCalled();
+    expect(documentEventSpy).toHaveBeenCalledTimes(1);
+
+    expect(documentEventSpy).toHaveBeenCalledWith('visibilitychange', expect.anything(), expect.objectContaining({ passive: true }))
+  })
+
+  it('should update visibilityState and hidden', () => {
+    const { visibility, hidden } = usePageVisibility();
+
+    expect(visibility.value).toBe(document.visibilityState);
+    expect(hidden.value).toBe(document.hidden);
+
+    updateVisibility('hidden', true);
+    expect(visibility.value).toBe('hidden');
+    expect(hidden.value).toBe(true);
+
+    updateVisibility('visible', false);
+    expect(visibility.value).toBe('visible');
+    expect(hidden.value).toBe(false);
+  })
+})

packages/web/src/web/index.ts

@@ -3,3 +3,4 @@ export * from "./webSocket";
 export * from "./intersectionObserver";
 export * from "./networkInformation";
 export * from "./online";
+export * from "./pageVisibility";

packages/web/src/web/pageVisibility.ts

@@ -0,0 +1,26 @@
+import { ref, Ref } from "@vue/composition-api";
+
+let visibility: Ref<VisibilityState> | undefined = undefined;
+let hidden: Ref<boolean> | undefined = undefined;
+
+export function usePageVisibility() {
+  if (!hidden) {
+    hidden = ref(document.hidden);
+  }
+  if (!visibility) {
+    visibility = ref(document.visibilityState);
+    document.addEventListener(
+      "visibilitychange",
+      () => {
+        visibility!.value = document.visibilityState
+        hidden!.value = document.hidden;
+      },
+      { passive: true }
+      // true
+    );
+  }
+  return {
+    visibility,
+    hidden
+  };
+}