feat: added more hooks

packages/core/src/useFavicon.ts

@@ -0,0 +1,25 @@
+import { onMounted, ref, watch } from '@vue/composition-api'
+import { hasWindow } from './utils'
+import { MaybeRef } from './utils/typings'
+
+export function useFavicon(href?: MaybeRef<string>) {
+  const favicon = ref(href)
+
+  const setFavicon = () => {
+    if (!favicon.value) return
+
+    const link: HTMLLinkElement =
+      document.querySelector("link[rel*='icon']") ||
+      document.createElement('link')
+    link.type = 'image/x-icon'
+    link.rel = 'shortcut icon'
+    link.href = favicon.value
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
+
+  if (hasWindow()) setFavicon()
+  onMounted(setFavicon)
+  watch(favicon, setFavicon)
+
+  return { favicon }
+}

packages/core/src/useInterval.ts

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted } from '@vue/composition-api'
+import { useCounter } from './useCounter'
+
+export function useInterval(interval = 1000, now = true) {
+  let timer: any = null
+  const { count: counter, inc } = useCounter()
+
+  const start = () => {
+    stop()
+    timer = setInterval(() => inc(), interval)
+  }
+
+  const stop = () => {
+    if (!timer) return
+    clearInterval(timer)
+    timer = null
+  }
+
+  if (now) onMounted(start)
+  onUnmounted(stop)
+
+  return { counter, start, stop }
+}

packages/core/src/useNow.ts

@@ -0,0 +1,30 @@
+import { onMounted, onUnmounted, ref } from '@vue/composition-api'
+import { hasWindow, timestamp } from './utils'
+
+export function useNow() {
+  const now = ref(timestamp())
+  // const useRaf = refreshMs === 0
+
+  let stopped = false
+  // const interval = useInterval
+
+  const update = () =>
+    requestAnimationFrame(() => {
+      now.value = timestamp()
+      if (!stopped) update()
+    })
+
+  const stop = () => (stopped = true)
+  const start = () => {
+    if (!stopped) return
+    stopped = false
+    update()
+  }
+
+  if (hasWindow()) start()
+  else onMounted(start)
+
+  onUnmounted(() => stop())
+
+  return now
+}

packages/core/src/useTween.ts

@@ -0,0 +1 @@
+export function useTween() {}

packages/core/src/utils/easing.ts

@@ -0,0 +1,124 @@
+// Modified from https://github.com/streamich/ts-easing/blob/master/src/index.ts
+
+export type TEasing = (time: number) => number
+
+export interface IEasingMap {
+  linear: TEasing
+  quadratic: TEasing
+  cubic: TEasing
+  elastic: TEasing
+  inQuad: TEasing
+  outQuad: TEasing
+  inOutQuad: TEasing
+  inCubic: TEasing
+  outCubic: TEasing
+  inOutCubic: TEasing
+  inQuart: TEasing
+  outQuart: TEasing
+  inOutQuart: TEasing
+  inQuint: TEasing
+  outQuint: TEasing
+  inOutQuint: TEasing
+  inSine: TEasing
+  outSine: TEasing
+  inOutSine: TEasing
+  inExpo: TEasing
+  outExpo: TEasing
+  inOutExpo: TEasing
+  inCirc: TEasing
+  outCirc: TEasing
+  inOutCirc: TEasing
+}
+
+export const easing: IEasingMap = {
+  // No easing, no acceleration
+  linear: t => t,
+
+  // Accelerates fast, then slows quickly towards end.
+  quadratic: t => t * (-(t * t) * t + 4 * t * t - 6 * t + 4),
+
+  // Overshoots over 1 and then returns to 1 towards end.
+  cubic: t => t * (4 * t * t - 9 * t + 6),
+
+  // Overshoots over 1 multiple times - wiggles around 1.
+  elastic: t =>
+    t * (33 * t * t * t * t - 106 * t * t * t + 126 * t * t - 67 * t + 15),
+
+  // Accelerating from zero velocity
+  inQuad: t => t * t,
+
+  // Decelerating to zero velocity
+  outQuad: t => t * (2 - t),
+
+  // Acceleration until halfway, then deceleration
+  inOutQuad: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+
+  // Accelerating from zero velocity
+  inCubic: t => t * t * t,
+
+  // Decelerating to zero velocity
+  outCubic: t => --t * t * t + 1,
+
+  // Acceleration until halfway, then deceleration
+  inOutCubic: t =>
+    t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+
+  // Accelerating from zero velocity
+  inQuart: t => t * t * t * t,
+
+  // Decelerating to zero velocity
+  outQuart: t => 1 - --t * t * t * t,
+
+  // Acceleration until halfway, then deceleration
+  inOutQuart: t => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t),
+
+  // Accelerating from zero velocity
+  inQuint: t => t * t * t * t * t,
+
+  // Decelerating to zero velocity
+  outQuint: t => 1 + --t * t * t * t * t,
+
+  // Acceleration until halfway, then deceleration
+  inOutQuint: t =>
+    t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+
+  // Accelerating from zero velocity
+  inSine: t => -Math.cos(t * (Math.PI / 2)) + 1,
+
+  // Decelerating to zero velocity
+  outSine: t => Math.sin(t * (Math.PI / 2)),
+
+  // Accelerating until halfway, then decelerating
+  inOutSine: t => -(Math.cos(Math.PI * t) - 1) / 2,
+
+  // Exponential accelerating from zero velocity
+  inExpo: t => Math.pow(2, 10 * (t - 1)),
+
+  // Exponential decelerating to zero velocity
+  outExpo: t => -Math.pow(2, -10 * t) + 1,
+
+  // Exponential accelerating until halfway, then decelerating
+  inOutExpo: t => {
+    t /= 0.5
+    if (t < 1) return Math.pow(2, 10 * (t - 1)) / 2
+    t--
+    return (-Math.pow(2, -10 * t) + 2) / 2
+  },
+
+  // Circular accelerating from zero velocity
+  inCirc: t => -Math.sqrt(1 - t * t) + 1,
+
+  // Circular decelerating to zero velocity Moves VERY fast at the beginning and
+  // then quickly slows down in the middle. This tween can actually be used
+  // in continuous transitions where target value changes all the time,
+  // because of the very quick start, it hides the jitter between target value changes.
+  outCirc: t => Math.sqrt(1 - (t = t - 1) * t),
+
+  // Circular acceleration until halfway, then deceleration
+  inOutCirc: t => {
+    t /= 0.5
+    if (t < 1) return -(Math.sqrt(1 - t * t) - 1) / 2
+    t -= 2
+    return (Math.sqrt(1 - t * t) + 1) / 2
+  }
+}

packages/core/src/utils/index.ts

@@ -5,8 +5,8 @@ export const hasWindow = () => typeof window !== 'undefined'
 export const isServer = () => typeof window === 'undefined'
 export const isOnline = () => navigator.onLine
 
-// export const now = () => new Date()
-// export const timestamp = () => +new Date()
+export const now = () => new Date()
+export const timestamp = () => +new Date()
 
 export * from './emitter'
 export * from './operations'