From 5820b119dd490f6bcf827e9488abc36fc743f668 Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Wed, 12 May 2021 13:38:02 -0400
Subject: [PATCH] feat(createEventHook): new function (#497)

---
 packages/shared/createEventHook/index.md      | 46 +++++++++++++++++++
 packages/shared/createEventHook/index.test.ts | 28 +++++++++++
 packages/shared/createEventHook/index.ts      | 37 +++++++++++++++
 3 files changed, 111 insertions(+)
 create mode 100644 packages/shared/createEventHook/index.md
 create mode 100644 packages/shared/createEventHook/index.test.ts
 create mode 100644 packages/shared/createEventHook/index.ts

diff --git a/packages/shared/createEventHook/index.md b/packages/shared/createEventHook/index.md
new file mode 100644
index 00000000000..5677ae854db
--- /dev/null
+++ b/packages/shared/createEventHook/index.md
@@ -0,0 +1,46 @@
+---
+category: Utilities
+---
+
+# createEventHook
+
+Utility for creating event hooks
+
+## Usage
+
+
+Creating a function that uses `createEventHook`
+```ts
+import { createEventHook } from '@vueuse/core'
+
+export function useMyFetch(url) {
+  const fetchResult = createEventHook<Response>()
+  const fetchError = createEventHook<any>()
+
+  fetch(url)
+    .then(result => fetchResult.trigger(result))
+    .catch(error => fetchError.trigger(error.message))
+
+  return {
+    onResult: fetchResult.on,
+    onError: fetchError.on
+  }
+}
+```
+
+Using a function that uses `createEventHook`
+```html
+<script setup lang="ts">
+import { useMyFetch } from './my-fetch-function'
+
+const { onResult, onError } = useMyFetch('my api url')
+
+onResult((result) => {
+  console.log(result)
+})
+
+onError((error) => {
+  console.errr(error)
+})
+</script>
+```
diff --git a/packages/shared/createEventHook/index.test.ts b/packages/shared/createEventHook/index.test.ts
new file mode 100644
index 00000000000..757cd3b678c
--- /dev/null
+++ b/packages/shared/createEventHook/index.test.ts
@@ -0,0 +1,28 @@
+import { createEventHook } from '.'
+
+describe('createEventHook', () => {
+  it('should be defined', () => {
+    expect(createEventHook).toBeDefined()
+  })
+
+  it('should trigger event', () => {
+    let message = ''
+
+    const myFunction = () => {
+      const resultEvent = createEventHook<string>()
+      const exec = () => resultEvent.trigger('Hello World')
+      return {
+        exec,
+        onResult: resultEvent.on,
+      }
+    }
+
+    const { exec, onResult } = myFunction()
+    onResult(result => message = result)
+    exec()
+
+    setTimeout(() => {}, 0)
+
+    expect(message).toBe('Hello World')
+  })
+})
diff --git a/packages/shared/createEventHook/index.ts b/packages/shared/createEventHook/index.ts
new file mode 100644
index 00000000000..673ae0f78e1
--- /dev/null
+++ b/packages/shared/createEventHook/index.ts
@@ -0,0 +1,37 @@
+/**
+ * The source code for this function was inspiried by vue-apollo's `useEventHook` util
+ * https://github.com/vuejs/vue-apollo/blob/v4/packages/vue-apollo-composable/src/util/useEventHook.ts
+ */
+
+/**
+ * Utility for creating event hooks
+ *
+ * @see https://vueuse.org/createEventHook
+ */
+export function createEventHook<T = any>() {
+  const fns: Array<(param: T) => void> = []
+
+  const off = (fn: (param: T) => void) => {
+    const index = fns.indexOf(fn)
+    if (index !== -1)
+      fns.splice(index, 1)
+  }
+
+  const on = (fn: (param: T) => void) => {
+    fns.push(fn)
+
+    return {
+      off: () => off(fn),
+    }
+  }
+
+  const trigger = (param: T) => {
+    fns.forEach(fn => fn(param))
+  }
+
+  return {
+    on,
+    off,
+    trigger,
+  }
+}