fix(fromEvent): fix type error of element reference (#4728)

ywenhao · antfu · web-flow · commit 94fea4303e2e · 2025-05-14T05:12:28.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/rxjs/README.md b/packages/rxjs/README.md
@@ -32,10 +32,10 @@ import { from, fromEvent, useObservable } from '@vueuse/rxjs'
 import { forkJoin, of } from 'rxjs'
 import { ajax } from 'rxjs/ajax'
 import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 
 const BASE_URL = 'https://jsonplaceholder.typicode.com'
-const button = ref<HTMLButtonElement>(null)
+const button = useTemplateRef('buttonRef')
 
 const posts = useObservable(
   fromEvent(button, 'click').pipe(
diff --git a/packages/rxjs/from/_demo.vue b/packages/rxjs/from/_demo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import {
@@ -17,7 +16,7 @@ useSubscription(
   interval(1000)
     .pipe(
       mapTo(1),
-      takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
+      takeUntil(fromEvent(button, 'click')),
       withLatestFrom(from(count, {
         immediate: true,
         deep: false,
diff --git a/packages/rxjs/from/index.md b/packages/rxjs/from/index.md
@@ -12,10 +12,10 @@ Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and
 import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
-import { shallowRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const count = shallowRef(0)
-const button = shallowRef<HTMLButtonElement | null>(null)
+const button = useTemplateRef('buttonRef')
 
 useSubscription(
   interval(1000)
diff --git a/packages/rxjs/from/index.ts b/packages/rxjs/from/index.ts
@@ -10,7 +10,7 @@ export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: Watch
   return fromRxjs(value)
 }
 
-export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: string): Observable<Event> {
+export function fromEvent<T extends HTMLElement | null>(value: MaybeRef<T>, event: string): Observable<Event> {
   if (isRef<T>(value)) {
     return new Observable((subscriber) => {
       let innerSub: Subscription | undefined
@@ -23,5 +23,8 @@ export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: stri
       }, { immediate: true })
     })
   }
+  if (value === null) {
+    throw new Error('The value is `null`, and it should be an HTMLElement.')
+  }
   return fromEventRx(value, event)
 }
diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import {
@@ -9,16 +8,16 @@ import {
   takeUntil,
   withLatestFrom,
 } from 'rxjs/operators'
-import { ref as deepRef, shallowRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const count = shallowRef(0)
-const button = deepRef<HTMLButtonElement | null>(null)
+const button = useTemplateRef('button')
 
 useSubscription(
   interval(1000)
     .pipe(
       mapTo(1),
-      takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
+      takeUntil(fromEvent(button, 'click')),
       withLatestFrom(from(count).pipe(startWith(0))),
       map(([total, curr]) => curr + total),
     )
diff --git a/packages/rxjs/toObserver/index.md b/packages/rxjs/toObserver/index.md
@@ -12,10 +12,10 @@ Sugar function to convert a `ref` into an RxJS [Observer](https://rxjs.dev/guide
 import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
 import { interval } from 'rxjs'
 import { map, mapTo, startWith, takeUntil, withLatestFrom } from 'rxjs/operators'
-import { shallowRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const count = shallowRef(0)
-const button = shallowRef<HTMLButtonElement | null>(null)
+const button = useTemplateRef('buttonRef')
 
 useSubscription(
   interval(1000)

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export function from<T>(value: ObservableInput<T> \| Ref<T>, watchOptions?: Watch`
`10`	`10`	`return fromRxjs(value)`
`11`	`11`	`}`
`12`	`12`
`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> {`
`14`	`14`	`if (isRef<T>(value)) {`
`15`	`15`	`return new Observable((subscriber) => {`
`16`	`16`	`let innerSub: Subscription \| undefined`
`@@ -23,5 +23,8 @@ export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: stri`
`23`	`23`	`}, { immediate: true })`
`24`	`24`	`})`
`25`	`25`	`}`
	`26`	`+ if (value === null) {`
	`27`	+ throw new Error('The value is `null`, and it should be an HTMLElement.')
	`28`	`+ }`
`26`	`29`	`return fromEventRx(value, event)`
`27`	`30`	`}`