diff --git a/README.md b/README.md index 09f26e67d98..85e54caf6e2 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities NPM version NPM Downloads Docs & Demos -Function Count +Function Count
GitHub stars

diff --git a/packages/core/index.ts b/packages/core/index.ts index 2bd708525f5..58e4cacdc8c 100644 --- a/packages/core/index.ts +++ b/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' diff --git a/packages/core/useMemory/demo.vue b/packages/core/useMemory/demo.vue new file mode 100644 index 00000000000..92b25d828ab --- /dev/null +++ b/packages/core/useMemory/demo.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/core/useMemory/index.md b/packages/core/useMemory/index.md new file mode 100644 index 00000000000..870b7f38871 --- /dev/null +++ b/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() +``` diff --git a/packages/core/useMemory/index.ts b/packages/core/useMemory/index.ts new file mode 100644 index 00000000000..d403ffa272f --- /dev/null +++ b/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() + 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 } +} diff --git a/packages/functions.md b/packages/functions.md index 9793ba2a6b9..7f20670a996 100644 --- a/packages/functions.md +++ b/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