feat: added more functions

Author: jsbroks

README.md

@@ -11,10 +11,10 @@
 <a href="https://www.npmjs.com/package/@vuehooks/core" target="__blank">
 <img src="https://img.shields.io/npm/v/@vuehooks/core?color=1abc9c" alt="NPM version" /></a>
 <a href="https://www.npmjs.com/package/@vuehooks" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vuehooks/core?color=34495e"/></a>
-<a href="https://github.com/datatorch/vuehooks" target="__blank"><img src="https://img.shields.io/github/last-commit/datatorch/vuehooks.svg?color=9b59b6" alt="GitHub last commit" /></a>
-<a href="https://github.com/datatorch/vuehooks/issues" target="__blank"><img src="https://img.shields.io/github/issues/datatorch/vuehooks.svg?color=3498db" alt="GitHub issues" /></a>
-<a href='https://coveralls.io/github/datatorch/vuehooks?branch=master'><img src='https://coveralls.io/repos/github/datatorch/vuehooks/badge.svg?branch=master' alt='Coverage Status' /></a>
-<img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/datatorch/vuehooks/Tests?color=2ecc71">
+<a href="https://github.com/jsbroks/vuehooks" target="__blank"><img src="https://img.shields.io/github/last-commit/jsbroks/vuehooks.svg?color=9b59b6" alt="GitHub last commit" /></a>
+<a href="https://github.com/jsbroks/vuehooks/issues" target="__blank"><img src="https://img.shields.io/github/issues/jsbroks/vuehooks.svg?color=3498db" alt="GitHub issues" /></a>
+<a href='https://coveralls.io/github/jsbroks/vuehooks?branch=master'><img src='https://coveralls.io/repos/github/jsbroks/vuehooks/badge.svg?branch=master' alt='Coverage Status' /></a>
+<img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/jsbroks/vuehooks/Tests?color=2ecc71">
 </p>
 
 <br />
@@ -40,5 +40,15 @@
   asynchronous data.
 - [@vuehooks/router](/packages/router) - Hooks for using VueRouter easier.
 
-<br />
+## Alternatives
+
+|   Features    | VueHooks |  VueUse   | vue-composable | vue-use-web |
+| :-----------: | :------: | :-------: | :------------: | :---------: |
+|   Functions   |    33    |    53     |       51       |     24      |
+|   Packages    |    3     |     3     |       2        |      1      |
+|     Stars     |    2     |   1.3k    |      260       |     450     |
+| Test Coverage |   42%    | _unknown_ |      96%       |  _unknown_  |
 
+_last updated 12/08/2020_
+
+<br />

packages/core/README.md

@@ -32,10 +32,17 @@
   - `useTimeout` — change variables state after a timeout.
   - `useTimeoutFn` — call a function after a timeout.
 - **Browser**
+  - `useLocalStorage` — manages a value in localStorage.
+  - `useSessionStorage` — manages a value in sessionStorage.
+  - `useClipboard` — copies text to clipboard.
+  - `useFullscreen` — display an element fullscreen.
   - `useEventListener` — add event listeners to dom with ease.
   - `useEventListenerElement` — add event listeners to element with ease.
   - `useMediaQuery` — track the results of a media query programmatically.
 - **Sensors**
+  - `useBattery` — tracks device batter state.
+  - `useGeolocation` — tracks geo location state of user's device.
+  - `useHover` — track if an element is being hovered over.
   - `useLongPress` — track long press gestures.
   - `usePrint` — track if user is printing.
   - `useMouse` — track mouse position.
@@ -47,8 +54,8 @@
   - `createGlobalState` — create state accessible in any component.
   - `useClamp` — track state of a clamped number.
   - `useCounter` — track state of a number.
-  - `useHover` — track if an element is being hovered over.
   - `useToggle` — track state of a boolean.
+  - `useMounted` — track if the component is mounted.
 - **Emitter**
   - `createEmitter` — create an emitter for an event bus.
   - `useEventOn` — add event listeners to emitters.

packages/core/src/__test__/useLocalStorage.spec.ts

@@ -0,0 +1,31 @@
+import { renderHook } from '../../../testing/src'
+import { useLocalStorage } from '../useLocalStorage'
+
+describe('useLocalStorage', () => {
+  // it('sets default value for local storage', () => {
+  //   renderHook(() => {
+  //     const defaultValue = 'default'
+  //     const { supported, data } = useLocalStorage('key', defaultValue)
+
+  //     expect(supported).toBeTruthy()
+  //     expect(data.value).toBe(defaultValue)
+  //   })
+  // })
+
+  it('sets value for local storage with custom serializer', () => {
+    renderHook(() => {
+      const defaultValue = 'default2'
+      const serializer = jest.fn().mockReturnValue(defaultValue)
+      const deserializer = jest.fn().mockReturnValue(defaultValue)
+
+      const { data } = useLocalStorage('key', defaultValue, {
+        raw: false,
+        serializer,
+        deserializer
+      })
+
+      expect(serializer).toBeCalledTimes(1)
+      expect(data.value).toBe(defaultValue)
+    })
+  })
+})

packages/core/src/index.ts

@@ -7,5 +7,10 @@ export { useTimeout } from './useTimeout'
 export { useTimeoutFn } from './useTimeoutFn'
 export { useLongPress } from './useLongPress'
 export { useBus } from './useBus'
+export { useBattery } from './useBattery'
+export { useClipboard } from './useClipboard'
+export { useMounted } from './useMounted'
+export { useGeolocation } from './useGeolocation'
+export { useFullscreen } from './useFullscreen'
 
 export { Emitter } from './utils/emitter'

packages/core/src/useBattery.ts

@@ -0,0 +1,56 @@
+import { onMounted, onUnmounted, ref } from '@vue/composition-api'
+
+export interface BatteryState extends EventTarget {
+  charging: boolean
+  chargingTime: number
+  dischargingTime: number
+  level: number
+}
+
+type NavigatorWithBattery = Navigator & {
+  getBattery: () => Promise<BatteryState>
+}
+
+const batteryEvents = [
+  'chargingchange',
+  'levelchange',
+  'chargingtimechange',
+  'dischargingtimechange'
+]
+
+export function useBattery() {
+  const supported = ref('getBattery' in navigator)
+  const charging = ref(false)
+  const chargingTime = ref(0)
+  const dischargingTime = ref(0)
+  const level = ref(0)
+
+  let battery: BatteryState | null = null
+
+  const updateBatteryInfo = () => {
+    if (!battery) return
+    charging.value = battery.charging
+    chargingTime.value = battery.chargingTime
+    dischargingTime.value = battery.dischargingTime
+    level.value = battery.level
+  }
+
+  const listenAll = () =>
+    batteryEvents.forEach(e => battery?.addEventListener(e, updateBatteryInfo))
+
+  const unlistenAll = () =>
+    batteryEvents.forEach(e =>
+      battery?.removeEventListener(e, updateBatteryInfo)
+    )
+
+  onMounted(async () => {
+    if (!supported.value) return
+    battery = await (navigator as NavigatorWithBattery).getBattery()
+    updateBatteryInfo()
+    listenAll()
+  })
+
+  onUnmounted(() => unlistenAll())
+
+  return { supported, charging, chargingTime, dischargingTime, level }
+}

packages/core/src/useClipboard.ts

@@ -0,0 +1,27 @@
+import { ref } from '@vue/composition-api'
+import { useMounted } from './useMounted'
+import { MaybeRef } from './utils/typings'
+
+const copyText = (text: string) => {
+  const input = document.createElement('textarea')
+  input.innerHTML = text
+  document.body.appendChild(input)
+  input.select()
+  var result = document.execCommand('copy')
+  document.body.removeChild(input)
+  return result
+}
+
+export function useClipboard(text?: MaybeRef<string>) {
+  const textRef = ref(text ?? '')
+  const isMounted = useMounted()
+
+  const supported = ref('clipboard' in navigator)
+  const copy = (text?: string) => {
+    if (!isMounted) return
+    if (text) textRef.value = text
+    copyText(textRef.value)
+  }
+
+  return { supported, copy, text }
+}

packages/core/src/useFullscreen.ts

@@ -0,0 +1,18 @@
+import { Ref, ref } from '@vue/composition-api'
+import { useToggle } from './useToggle'
+
+export function useFullscreen(target: Ref<HTMLElement> = ref(document.body)) {
+  const { on: isFullscreen, set } = useToggle(false)
+  const exit = () => {
+    if (document.fullscreenElement) document.exitFullscreen()
+    set(false)
+  }
+
+  const enter = () => {
+    exit()
+    if (!target.value) return
+    target.value.requestFullscreen().then(() => set(true))
+  }
+
+  return { isFullscreen, enter, exit }
+}

packages/core/src/useGeolocation.ts

@@ -0,0 +1,39 @@
+import { onMounted, onUnmounted, ref, Ref } from '@vue/composition-api'
+
+export function useGeolocation(options?: PositionOptions) {
+  const timestamp: Ref<number | null> = ref(null)
+  const error: Ref<PositionError | null> = ref(null)
+  const coords: Ref<Coordinates> = ref({
+    accuracy: 0,
+    latitude: 0,
+    longitude: 0,
+    altitude: null,
+    altitudeAccuracy: null,
+    heading: null,
+    speed: null
+  })
+
+  const update = (position: Position) => {
+    timestamp.value = position.timestamp
+    coords.value = position.coords
+    error.value = null
+  }
+
+  let watchNumber: number | null = null
+
+  onMounted(() => {
+    if (!('geolocation' in navigator)) return
+    watchNumber = navigator.geolocation.watchPosition(
+      update,
+      err => (error.value = err),
+      options
+    )
+  })
+
+  onUnmounted(() => {
+    if (watchNumber === null) return
+    navigator.geolocation.clearWatch(watchNumber)
+  })
+
+  return { coords, timestamp, error }
+}

packages/core/src/useLocalStorage.ts

@@ -0,0 +1,14 @@
+import { StorageOptions, useStorage } from './useStorage'
+import { hasWindow } from './utils'
+
+import { MaybeRef } from './utils/typings'
+
+export function useLocalStorage<T>(
+  key: string,
+  initialData?: MaybeRef<T>,
+  options?: StorageOptions<T>
+) {
+  const supported = hasWindow() && !!window.localStorage
+  const storage = useStorage(localStorage, key, initialData, options)
+  return { supported, ...storage }
+}

packages/core/src/useMounted.ts

@@ -0,0 +1,9 @@
+import { onMounted, onUnmounted } from '@vue/composition-api'
+import { useToggle } from './useToggle'
+
+export function useMounted() {
+  const { on, set } = useToggle(false)
+  onMounted(() => set(true))
+  onUnmounted(() => set(false))
+  return on
+}

packages/core/src/useSessionStorage.ts

@@ -0,0 +1,14 @@
+import { StorageOptions, useStorage } from './useStorage'
+import { hasWindow } from './utils'
+
+import { MaybeRef } from './utils/typings'
+
+export function useSessionStorage<T>(
+  key: string,
+  initialData?: MaybeRef<T>,
+  options?: StorageOptions<T>
+) {
+  const supported = hasWindow() && !!window.sessionStorage
+  const storage = useStorage(sessionStorage, key, initialData, options)
+  return { supported, ...storage }
+}

packages/core/src/useStorage.ts

@@ -0,0 +1,57 @@
+import { onMounted, Ref, ref, watch } from '@vue/composition-api'
+import { useWindowEvent } from './useWindowEvent'
+import { hasWindow, noop } from './utils'
+import { MaybeRef } from './utils/typings'
+
+type SerializerFunction<T> = (v: T) => string
+type DeserializerFunction<T> = (v: string) => T
+
+export type StorageOptions<T> =
+  | { raw: true }
+  | {
+      raw?: false
+      serializer: SerializerFunction<T>
+      deserializer: DeserializerFunction<T>
+    }
+
+export function useStorage<T>(
+  storage: Storage,
+  key: string,
+  initialData?: MaybeRef<T>,
+  options?: StorageOptions<T>
+) {
+  const data = ref(initialData) as Ref<T | undefined>
+  const initData = data.value
+
+  const serializer: SerializerFunction<T> = options
+    ? options.raw
+      ? (noop as any)
+      : options.serializer
+    : JSON.stringify
+
+  const deserializer: DeserializerFunction<T> = options
+    ? options.raw
+      ? (noop as any)
+      : options.deserializer
+    : JSON.parse
+
+  const read = () => {
+    const item = storage.getItem(key)
+    if (item == null && initData !== undefined) write()
+    else data.value = item ? deserializer(item) : initData
+  }
+
+  const write = () => {
+    const v = data.value
+    if (v == null) storage.removeItem(key)
+    else storage.setItem(key, serializer(v))
+  }
+
+  if (hasWindow()) read()
+
+  onMounted(read)
+  useWindowEvent('storage', read)
+  watch(data, write, { deep: true })
+
+  return { data }
+}