From 21536a2ad915f0713b0d0fd77adc9ff71aab6b85 Mon Sep 17 00:00:00 2001
From: geekreal <42457717+LockingReal@users.noreply.github.com>
Date: Sat, 4 Mar 2023 21:06:33 +0800
Subject: [PATCH] feat(usePerformanceObserver): new function (#2736)

Co-authored-by: Admin <Admin@PF25TD71-PHW.inc.bytedance.com>
Co-authored-by: Jelf <okxiaoliang4@gmail.com>
Co-authored-by: Jelf <353742991@qq.com>
---
 packages/core/index.ts                        |  1 +
 packages/core/usePerformanceObserver/demo.vue | 20 +++++++
 packages/core/usePerformanceObserver/index.md | 20 +++++++
 packages/core/usePerformanceObserver/index.ts | 54 +++++++++++++++++++
 4 files changed, 95 insertions(+)
 create mode 100644 packages/core/usePerformanceObserver/demo.vue
 create mode 100644 packages/core/usePerformanceObserver/index.md
 create mode 100644 packages/core/usePerformanceObserver/index.ts

diff --git a/packages/core/index.ts b/packages/core/index.ts
index c9c541ddf08..66e21a82391 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -78,6 +78,7 @@ export * from './useOffsetPagination'
 export * from './useOnline'
 export * from './usePageLeave'
 export * from './useParallax'
+export * from './usePerformanceObserver'
 export * from './usePermission'
 export * from './usePointer'
 export * from './usePointerLock'
diff --git a/packages/core/usePerformanceObserver/demo.vue b/packages/core/usePerformanceObserver/demo.vue
new file mode 100644
index 00000000000..2491872face
--- /dev/null
+++ b/packages/core/usePerformanceObserver/demo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { usePerformanceObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+const entrys = ref<PerformanceEntry[]>([])
+usePerformanceObserver({
+  entryTypes: ['paint'],
+}, (list) => {
+  entrys.value = list.getEntries()
+})
+const refresh = () => window.location.reload()
+</script>
+
+<template>
+  <button @click="refresh">
+    refresh
+  </button>
+
+  <pre lang="json">{{ entrys }}</pre>
+</template>
diff --git a/packages/core/usePerformanceObserver/index.md b/packages/core/usePerformanceObserver/index.md
new file mode 100644
index 00000000000..7956f653373
--- /dev/null
+++ b/packages/core/usePerformanceObserver/index.md
@@ -0,0 +1,20 @@
+---
+category: Browser
+---
+
+# usePerformanceObserver
+
+Observe performance metrics.
+
+## Usage
+
+```ts
+import { usePerformanceObserver } from '@vueuse/core'
+
+const entrys = ref<PerformanceEntry[]>([])
+usePerformanceObserver({
+  entryTypes: ['paint'],
+}, (list) => {
+  entrys.value = list.getEntries()
+})
+```
diff --git a/packages/core/usePerformanceObserver/index.ts b/packages/core/usePerformanceObserver/index.ts
new file mode 100644
index 00000000000..9e8bd89a5ba
--- /dev/null
+++ b/packages/core/usePerformanceObserver/index.ts
@@ -0,0 +1,54 @@
+import { tryOnScopeDispose } from '@vueuse/shared'
+import { useSupported } from '../useSupported'
+import type { ConfigurableWindow } from '../_configurable'
+import { defaultWindow } from '../_configurable'
+
+export type UsePerformanceObserverOptions = PerformanceObserverInit & ConfigurableWindow & {
+  /**
+   * Start the observer immediate.
+   *
+   * @default true
+   */
+  immediate?: boolean
+}
+
+/**
+ * Observe performance metrics.
+ *
+ * @see https://vueuse.org/usePerformanceObserver
+ * @param options
+ */
+export function usePerformanceObserver(options: UsePerformanceObserverOptions, callback: PerformanceObserverCallback) {
+  const {
+    window = defaultWindow,
+    immediate = true,
+    ...performanceOptions
+  } = options
+
+  const isSupported = useSupported(() => window && 'PerformanceObserver' in window)
+
+  let observer: PerformanceObserver | undefined
+
+  const stop = () => {
+    observer?.disconnect()
+  }
+
+  const start = () => {
+    if (isSupported.value) {
+      stop()
+      observer = new PerformanceObserver(callback)
+      observer.observe(performanceOptions)
+    }
+  }
+
+  tryOnScopeDispose(stop)
+
+  if (immediate)
+    start()
+
+  return {
+    isSupported,
+    start,
+    stop,
+  }
+}