From 3bad4803d5cdbd89912abfb8f649bdadc8486b4b Mon Sep 17 00:00:00 2001
From: yuanwenhao <actions.win@foxmail.com>
Date: Fri, 25 Apr 2025 09:40:28 +0800
Subject: [PATCH 1/4] fix(fromEvent): fix  ts error:  `Type 'null' is not
 assignable to type 'HTMLElement'`

---
 packages/rxjs/README.md            | 4 +++-
 packages/rxjs/from/_demo.vue       | 3 +--
 packages/rxjs/from/index.ts        | 4 ++--
 packages/rxjs/toObserver/_demo.vue | 3 +--
 packages/rxjs/toObserver/index.md  | 2 ++
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/rxjs/README.md b/packages/rxjs/README.md
index 5592146a536..06b6e556734 100644
--- a/packages/rxjs/README.md
+++ b/packages/rxjs/README.md
@@ -35,7 +35,9 @@ import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
 import { ref } from 'vue'
 
 const BASE_URL = 'https://jsonplaceholder.typicode.com'
-const button = ref<HTMLButtonElement>(null)
+const button = ref<HTMLButtonElement | null>(null)
+// or use `useTemplateRef` in vue3.5+
+// 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
index bef6b61c2f5..0d78e589247 100644
--- 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 { interval } from 'rxjs'
 import {
   map,
@@ -19,7 +18,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.ts b/packages/rxjs/from/index.ts
index 84b2b390efb..425c5d19aa1 100644
--- 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,5 @@ export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: stri
       }, { immediate: true })
     })
   }
-  return fromEventRx(value, event)
+  return fromEventRx(value as NonNullable<T>, event)
 }
diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
index c8f1e4658b8..d4d52bb4575 100644
--- 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 { interval } from 'rxjs'
 import {
   map,
@@ -20,7 +19,7 @@ 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
index 795c205efb2..3792f91634d 100644
--- a/packages/rxjs/toObserver/index.md
+++ b/packages/rxjs/toObserver/index.md
@@ -16,6 +16,8 @@ import { shallowRef } from 'vue'
 
 const count = shallowRef(0)
 const button = shallowRef<HTMLButtonElement | null>(null)
+// or use `useTemplateRef` in vue3.5+
+// const button = useTemplateRef('buttonRef')
 
 useSubscription(
   interval(1000)

From 391edb11760d758eb40bdc4fabd4154cad74817a Mon Sep 17 00:00:00 2001
From: ywenhao <actions.win@foxmail.com>
Date: Fri, 25 Apr 2025 22:30:28 +0800
Subject: [PATCH 2/4] fix(rxjs): change `ref` to `useTemplateRef` & handle the
 situation where elements may be `null`

---
 packages/rxjs/README.md            | 6 ++----
 packages/rxjs/from/index.md        | 4 ++--
 packages/rxjs/from/index.ts        | 5 ++++-
 packages/rxjs/toObserver/_demo.vue | 4 ++--
 packages/rxjs/toObserver/index.md  | 6 ++----
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/rxjs/README.md b/packages/rxjs/README.md
index 06b6e556734..6c827c2c44d 100644
--- a/packages/rxjs/README.md
+++ b/packages/rxjs/README.md
@@ -32,12 +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>(null)
-// or use `useTemplateRef` in vue3.5+
-// const button = useTemplateRef('buttonRef')
+const button = useTemplateRef('buttonRef')
 
 const posts = useObservable(
   fromEvent(button, 'click').pipe(
diff --git a/packages/rxjs/from/index.md b/packages/rxjs/from/index.md
index 54acc147da0..476b3c28cce 100644
--- 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
index 425c5d19aa1..afbac7d7cab 100644
--- a/packages/rxjs/from/index.ts
+++ b/packages/rxjs/from/index.ts
@@ -23,5 +23,8 @@ export function fromEvent<T extends HTMLElement | null>(value: MaybeRef<T>, even
       }, { immediate: true })
     })
   }
-  return fromEventRx(value as NonNullable<T>, event)
+  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
index d4d52bb4575..719588f8eec 100644
--- a/packages/rxjs/toObserver/_demo.vue
+++ b/packages/rxjs/toObserver/_demo.vue
@@ -7,13 +7,13 @@ import {
   takeUntil,
   withLatestFrom,
 } from 'rxjs/operators'
-import { ref as deepRef, shallowRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 import { from, fromEvent } from '../from'
 import { useSubscription } from '../useSubscription'
 import { toObserver } from './index'
 
 const count = shallowRef(0)
-const button = deepRef<HTMLButtonElement | null>(null)
+const button = useTemplateRef('buttonRef')
 
 useSubscription(
   interval(1000)
diff --git a/packages/rxjs/toObserver/index.md b/packages/rxjs/toObserver/index.md
index 3792f91634d..ff76f51d9b8 100644
--- a/packages/rxjs/toObserver/index.md
+++ b/packages/rxjs/toObserver/index.md
@@ -12,12 +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)
-// or use `useTemplateRef` in vue3.5+
-// const button = useTemplateRef('buttonRef')
+const button = useTemplateRef('buttonRef')
 
 useSubscription(
   interval(1000)

From 6f90a85b34e60065f48c45eed3ace35fdb3ceb57 Mon Sep 17 00:00:00 2001
From: ywenhao <actions.win@foxmail.com>
Date: Sat, 26 Apr 2025 08:16:12 +0800
Subject: [PATCH 3/4] fix: toObserver demo button ref

---
 packages/rxjs/toObserver/_demo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
index 719588f8eec..847e355e861 100644
--- a/packages/rxjs/toObserver/_demo.vue
+++ b/packages/rxjs/toObserver/_demo.vue
@@ -28,7 +28,7 @@ useSubscription(
 </script>
 
 <template>
-  <button @click="count++">
+  <button ref="buttonRef" @click="count++">
     count is: {{ count }}
   </button>
   <button ref="button">

From 4e4d26a94337ff930c5afe041b770644d2b05a07 Mon Sep 17 00:00:00 2001
From: yuanwenhao <actions.win@foxmail.com>
Date: Sun, 27 Apr 2025 12:08:45 +0800
Subject: [PATCH 4/4] fix: button ref error

---
 packages/rxjs/toObserver/_demo.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
index 847e355e861..451125dd89b 100644
--- a/packages/rxjs/toObserver/_demo.vue
+++ b/packages/rxjs/toObserver/_demo.vue
@@ -13,7 +13,7 @@ import { useSubscription } from '../useSubscription'
 import { toObserver } from './index'
 
 const count = shallowRef(0)
-const button = useTemplateRef('buttonRef')
+const button = useTemplateRef('button')
 
 useSubscription(
   interval(1000)
@@ -28,7 +28,7 @@ useSubscription(
 </script>
 
 <template>
-  <button ref="buttonRef" @click="count++">
+  <button @click="count++">
     count is: {{ count }}
   </button>
   <button ref="button">