Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 94fea43

Browse filesBrowse files
ywenhaoantfu
ywenhao
and
antfu
authored
fix(fromEvent): fix type error of element reference (#4728)
Co-authored-by: Anthony Fu <github@antfu.me>
1 parent fa2c00a commit 94fea43
Copy full SHA for 94fea43

File tree

6 files changed

+14
-13
lines changed
Filter options

6 files changed

+14
-13
lines changed

‎packages/rxjs/README.md

Copy file name to clipboardExpand all lines: packages/rxjs/README.md
+2-2
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ import { from, fromEvent, useObservable } from '@vueuse/rxjs'
3232
import { forkJoin, of } from 'rxjs'
3333
import { ajax } from 'rxjs/ajax'
3434
import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
35-
import { ref } from 'vue'
35+
import { useTemplateRef } from 'vue'
3636

3737
const BASE_URL = 'https://jsonplaceholder.typicode.com'
38-
const button = ref<HTMLButtonElement>(null)
38+
const button = useTemplateRef('buttonRef')
3939

4040
const posts = useObservable(
4141
fromEvent(button, 'click').pipe(

‎packages/rxjs/from/_demo.vue

Copy file name to clipboardExpand all lines: packages/rxjs/from/_demo.vue
+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import type { Ref } from 'vue'
32
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
43
import { interval } from 'rxjs'
54
import {
@@ -17,7 +16,7 @@ useSubscription(
1716
interval(1000)
1817
.pipe(
1918
mapTo(1),
20-
takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
19+
takeUntil(fromEvent(button, 'click')),
2120
withLatestFrom(from(count, {
2221
immediate: true,
2322
deep: false,

‎packages/rxjs/from/index.md

Copy file name to clipboardExpand all lines: packages/rxjs/from/index.md
+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and
1212
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
1313
import { interval } from 'rxjs'
1414
import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
15-
import { shallowRef } from 'vue'
15+
import { shallowRef, useTemplateRef } from 'vue'
1616

1717
const count = shallowRef(0)
18-
const button = shallowRef<HTMLButtonElement | null>(null)
18+
const button = useTemplateRef('buttonRef')
1919

2020
useSubscription(
2121
interval(1000)

‎packages/rxjs/from/index.ts

Copy file name to clipboardExpand all lines: packages/rxjs/from/index.ts
+4-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: Watch
1010
return fromRxjs(value)
1111
}
1212

13-
export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: string): Observable<Event> {
13+
export function fromEvent<T extends HTMLElement | null>(value: MaybeRef<T>, event: string): Observable<Event> {
1414
if (isRef<T>(value)) {
1515
return new Observable((subscriber) => {
1616
let innerSub: Subscription | undefined
@@ -23,5 +23,8 @@ export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: stri
2323
}, { immediate: true })
2424
})
2525
}
26+
if (value === null) {
27+
throw new Error('The value is `null`, and it should be an HTMLElement.')
28+
}
2629
return fromEventRx(value, event)
2730
}

‎packages/rxjs/toObserver/_demo.vue

Copy file name to clipboardExpand all lines: packages/rxjs/toObserver/_demo.vue
+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import type { Ref } from 'vue'
32
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
43
import { interval } from 'rxjs'
54
import {
@@ -9,16 +8,16 @@ import {
98
takeUntil,
109
withLatestFrom,
1110
} from 'rxjs/operators'
12-
import { ref as deepRef, shallowRef } from 'vue'
11+
import { shallowRef, useTemplateRef } from 'vue'
1312
1413
const count = shallowRef(0)
15-
const button = deepRef<HTMLButtonElement | null>(null)
14+
const button = useTemplateRef('button')
1615
1716
useSubscription(
1817
interval(1000)
1918
.pipe(
2019
mapTo(1),
21-
takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
20+
takeUntil(fromEvent(button, 'click')),
2221
withLatestFrom(from(count).pipe(startWith(0))),
2322
map(([total, curr]) => curr + total),
2423
)

‎packages/rxjs/toObserver/index.md

Copy file name to clipboardExpand all lines: packages/rxjs/toObserver/index.md
+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ Sugar function to convert a `ref` into an RxJS [Observer](https://rxjs.dev/guide
1212
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
1313
import { interval } from 'rxjs'
1414
import { map, mapTo, startWith, takeUntil, withLatestFrom } from 'rxjs/operators'
15-
import { shallowRef } from 'vue'
15+
import { shallowRef, useTemplateRef } from 'vue'
1616

1717
const count = shallowRef(0)
18-
const button = shallowRef<HTMLButtonElement | null>(null)
18+
const button = useTemplateRef('buttonRef')
1919

2020
useSubscription(
2121
interval(1000)

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.