feat(useMemory): new function (#923)

Co-authored-by: Jelf <haichao.liang@parameters.cn>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-164%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-165%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

packages/core/index.ts

@@ -47,6 +47,7 @@ export * from './useMagicKeys'
 export * from './useManualRefHistory'
 export * from './useMediaControls'
 export * from './useMediaQuery'
+export * from './useMemory'
 export * from './useMouse'
 export * from './useMouseInElement'
 export * from './useMousePressed'

packages/core/useMemory/demo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="isSupported && memory" class="inline-grid grid-cols-2 gap-x-4 gap-y-2">
+    <template v-if="memory">
+      <div opacity="50">
+        Used
+      </div><div>{{ size(memory.usedJSHeapSize) }}</div>
+      <div opacity="50">
+        Allocated
+      </div><div>{{ size(memory.totalJSHeapSize) }}</div>
+      <div opacity="50">
+        Limit
+      </div><div>{{ size(memory.jsHeapSizeLimit) }}</div>
+    </template>
+  </div>
+  <div v-else>
+    Your browser does not support performance memory API
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMemory } from '@vueuse/core'
+
+const size = (v: number) => {
+  const kb = v / 1024 / 1024
+  return `${kb.toFixed(2)} MB`
+}
+const { isSupported, memory } = useMemory()
+</script>

packages/core/useMemory/index.md

@@ -0,0 +1,15 @@
+---
+category: Browser
+---
+
+# useMemory
+
+Reactive Memory Info.
+
+## Usage
+
+```ts
+import { useMemory } from '@vueuse/core'
+
+const {isSupported, memory} = useMemory()
+```

packages/core/useMemory/index.ts

@@ -0,0 +1,52 @@
+import { ref } from 'vue-demi'
+import { IntervalFnOptions, useIntervalFn } from '@vueuse/core'
+
+/**
+ * Performance.memory
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
+ */
+export interface MemoryInfo {
+  /**
+   * The maximum size of the heap, in bytes, that is available to the context.
+   */
+  readonly jsHeapSizeLimit: number
+  /**
+   *  The total allocated heap size, in bytes.
+   */
+  readonly totalJSHeapSize: number
+  /**
+   * The currently active segment of JS heap, in bytes.
+   */
+  readonly usedJSHeapSize: number
+
+  [Symbol.toStringTag]: 'MemoryInfo'
+}
+
+export interface MemoryOptions extends IntervalFnOptions {
+  interval?: number
+}
+
+type PerformanceMemory = Performance & {
+  memory: MemoryInfo
+}
+
+/**
+ * Reactive Memory Info.
+ *
+ * @see https://vueuse.org/useMemory
+ * @param options
+ */
+export function useMemory(options: MemoryOptions = {}) {
+  const memory = ref<MemoryInfo>()
+  const isSupported = performance && 'memory' in performance
+
+  if (isSupported) {
+    const { interval = 1000 } = options
+    useIntervalFn(() => {
+      memory.value = (performance as PerformanceMemory).memory
+    }, interval, { immediate: options.immediate, immediateCallback: options.immediateCallback })
+  }
+
+  return { isSupported, memory }
+}

packages/functions.md

@@ -30,6 +30,7 @@
   - [`useFullscreen`](https://vueuse.org/core/useFullscreen/) — reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
   - [`useMediaControls`](https://vueuse.org/core/useMediaControls/) — reactive media controls for both `audio` and `video` elements
   - [`useMediaQuery`](https://vueuse.org/core/useMediaQuery/) — reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)
+  - [`useMemory`](https://vueuse.org/core/useMemory/) — reactive Memory Info
   - [`usePermission`](https://vueuse.org/core/usePermission/) — reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
   - [`usePreferredColorScheme`](https://vueuse.org/core/usePreferredColorScheme/) — reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query
   - [`usePreferredDark`](https://vueuse.org/core/usePreferredDark/) — reactive dark theme preference