Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(createEventHook): new function #497

Merged
merged 1 commit into from May 12, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 46 additions & 0 deletions 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>
```
28 changes: 28 additions & 0 deletions 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')
})
})
37 changes: 37 additions & 0 deletions 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,
}
}