feat .calude

.claude/skills/vueuse-functions/references/from.md

@@ -0,0 +1,48 @@
+---
+category: '@RxJS'
+---
+
+# from / fromEvent
+
+Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and [`fromEvent()`](https://rxjs.dev/api/index/function/fromEvent) to allow them to accept `ref`s.
+
+## Usage
+
+<!-- TODO: import rxjs error if enable twoslash -->
+
+```ts no-twoslash
+import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const count = shallowRef(0)
+const button = useTemplateRef('buttonRef')
+
+useSubscription(
+  interval(1000)
+    .pipe(
+      mapTo(1),
+      takeUntil(fromEvent(button, 'click')),
+      withLatestFrom(from(count, {
+        immediate: true,
+        deep: false,
+      })),
+      map(([curr, total]) => curr + total),
+    )
+    .subscribe(toObserver(count)), // same as ).subscribe(val => (count.value = val))
+)
+```
+
+## Type Declarations
+
+```ts
+export declare function from<T>(
+  value: ObservableInput<T> | Ref<T>,
+  watchOptions?: WatchOptions,
+): Observable<T>
+export declare function fromEvent<T extends HTMLElement | null>(
+  value: MaybeRef<T>,
+  event: string,
+): Observable<Event>
+```