feat(useNow): new function

packages/core/useNow/demo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useNow } from '.'
+
+const { now } = useNow()
+</script>
+
+<template>
+  <div>Now: {{ now }}</div>
+</template>

packages/core/useNow/index.md

@@ -0,0 +1,148 @@
+---
+category: Animation
+---
+
+# useNow
+
+Reactive current Date instance.
+
+## Usage
+
+```js
+import { useNow } from '@vueuse/core'
+
+const { now, pause, resume } = useNow()
+```
+
+
+<!--FOOTER_STARTS-->
+## Type Declarations
+
+```typescript
+export interface UseNowOptions {
+  /**
+   * Update interval, or use requestAnimationFrame
+   *
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
+}
+/**
+ * Reactive current timestamp.
+ *
+ * @see   {@link https://vueuse.org/useNow}
+ * @param options
+ */
+export declare function useNow(
+  options?: UseNowOptions
+): {
+  isActive: Ref<boolean>
+  pause: Fn
+  resume: Fn
+  now: Ref<
+    {
+      toString: () => string
+      toDateString: () => string
+      toTimeString: () => string
+      toLocaleString: {
+        (): string
+        (
+          locales?: string | string[] | undefined,
+          options?: Intl.DateTimeFormatOptions | undefined
+        ): string
+      }
+      toLocaleDateString: {
+        (): string
+        (
+          locales?: string | string[] | undefined,
+          options?: Intl.DateTimeFormatOptions | undefined
+        ): string
+      }
+      toLocaleTimeString: {
+        (): string
+        (
+          locales?: string | string[] | undefined,
+          options?: Intl.DateTimeFormatOptions | undefined
+        ): string
+      }
+      valueOf: () => number
+      getTime: () => number
+      getFullYear: () => number
+      getUTCFullYear: () => number
+      getMonth: () => number
+      getUTCMonth: () => number
+      getDate: () => number
+      getUTCDate: () => number
+      getDay: () => number
+      getUTCDay: () => number
+      getHours: () => number
+      getUTCHours: () => number
+      getMinutes: () => number
+      getUTCMinutes: () => number
+      getSeconds: () => number
+      getUTCSeconds: () => number
+      getMilliseconds: () => number
+      getUTCMilliseconds: () => number
+      getTimezoneOffset: () => number
+      setTime: (time: number) => number
+      setMilliseconds: (ms: number) => number
+      setUTCMilliseconds: (ms: number) => number
+      setSeconds: (sec: number, ms?: number | undefined) => number
+      setUTCSeconds: (sec: number, ms?: number | undefined) => number
+      setMinutes: (
+        min: number,
+        sec?: number | undefined,
+        ms?: number | undefined
+      ) => number
+      setUTCMinutes: (
+        min: number,
+        sec?: number | undefined,
+        ms?: number | undefined
+      ) => number
+      setHours: (
+        hours: number,
+        min?: number | undefined,
+        sec?: number | undefined,
+        ms?: number | undefined
+      ) => number
+      setUTCHours: (
+        hours: number,
+        min?: number | undefined,
+        sec?: number | undefined,
+        ms?: number | undefined
+      ) => number
+      setDate: (date: number) => number
+      setUTCDate: (date: number) => number
+      setMonth: (month: number, date?: number | undefined) => number
+      setUTCMonth: (month: number, date?: number | undefined) => number
+      setFullYear: (
+        year: number,
+        month?: number | undefined,
+        date?: number | undefined
+      ) => number
+      setUTCFullYear: (
+        year: number,
+        month?: number | undefined,
+        date?: number | undefined
+      ) => number
+      toUTCString: () => string
+      toISOString: () => string
+      toJSON: (key?: any) => string
+    } & {
+      [Symbol.toPrimitive]: {
+        (hint: "default"): string
+        (hint: "string"): string
+        (hint: "number"): number
+        (hint: string): string | number
+      }
+    }
+  >
+}
+```
+
+## Source
+
+[Source](https://github.com/vueuse/vueuse/blob/main/packages/core/useNow/index.ts) • [Demo](https://github.com/vueuse/vueuse/blob/main/packages/core/useNow/demo.vue) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/core/useNow/index.md)
+
+
+<!--FOOTER_ENDS-->

packages/core/useNow/index.ts

@@ -0,0 +1,37 @@
+import { Pausable, useIntervalFn } from '@vueuse/shared'
+import { ref } from 'vue-demi'
+import { useRafFn } from '../useRafFn'
+
+export interface UseNowOptions {
+  /**
+   * Update interval, or use requestAnimationFrame
+   *
+   * @default requestAnimationFrame
+   */
+  interval?: 'requestAnimationFrame' | number
+}
+
+/**
+ * Reactive current timestamp.
+ *
+ * @see   {@link https://vueuse.org/useNow}
+ * @param options
+ */
+export function useNow(options: UseNowOptions = {}) {
+  const {
+    interval = 'requestAnimationFrame',
+  } = options
+
+  const now = ref(new Date())
+
+  const update = () => now.value = new Date()
+
+  const controls: Pausable = interval === 'requestAnimationFrame'
+    ? useRafFn(update, { immediate: true })
+    : useIntervalFn(update, interval, true)
+
+  return {
+    now,
+    ...controls,
+  }
+}

packages/core/useTimestamp/index.md

@@ -26,6 +26,12 @@ export interface TimestampOptions {
    * @default 0
    */
   offset?: number
+  /**
+   * Update interval, or use requestAnimationFrame
+   *
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
 }
 /**
  * Reactive current timestamp.
@@ -36,8 +42,6 @@ export interface TimestampOptions {
 export declare function useTimestamp(
   options?: TimestampOptions
 ): {
-  stop: Fn
-  start: Fn
   isActive: Ref<boolean>
   pause: Fn
   resume: Fn