@vueuse/rxjs - npm Package Compare versions

Comparing version 10.4.1 to 10.5.0

index.d.ts

 import { ObservableInput, Observable, NextObserver, BehaviorSubject, Subject, Unsubscribable } from 'rxjs';
-import { Ref, WatchOptions } from 'vue-demi';
-import { MaybeRef } from '@vueuse/shared';
+import { Ref, WatchOptions, WatchStopHandle, WatchSource } from 'vue-demi';
+import { MaybeRef, MultiWatchSources, MapSources, MapOldSources } from '@vueuse/shared';
 
@@ -10,2 +10,13 @@ declare function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: WatchOptions): Observable<T>;
 
+type OnCleanup = (cleanupFn: () => void) => void;
+type WatchExtractedObservableCallback<Value, OldValue, ObservableElement> = (value: NonNullable<Value>, oldValue: OldValue, onCleanup: OnCleanup) => Observable<ObservableElement>;
+interface WatchExtractedObservableOptions {
+    onError?: (err: unknown) => void;
+    onComplete?: () => void;
+}
+declare function watchExtractedObservable<T extends MultiWatchSources, E, Immediate extends Readonly<boolean> = false>(sources: [...T], extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>, callback: (snapshot: E) => void, subscriptionOptions?: WatchExtractedObservableOptions, watchOptions?: WatchOptions<Immediate>): WatchStopHandle;
+declare function watchExtractedObservable<T extends Readonly<MultiWatchSources>, E, Immediate extends Readonly<boolean> = false>(source: T, extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>, callback: (snapshot: E) => void, subscriptionOptions?: WatchExtractedObservableOptions, watchOptions?: WatchOptions<Immediate>): WatchStopHandle;
+declare function watchExtractedObservable<T, E, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>, callback: (snapshot: E) => void, subscriptionOptions?: WatchExtractedObservableOptions, watchOptions?: WatchOptions<Immediate>): WatchStopHandle;
+declare function watchExtractedObservable<T extends object, E, Immediate extends Readonly<boolean> = false>(source: T, extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>, callback: (snapshot: E) => void, subscriptionOptions?: WatchExtractedObservableOptions, watchOptions?: WatchOptions<Immediate>): WatchStopHandle;
+
 interface UseObservableOptions<I> {
@@ -20,2 +31,10 @@ onError?: (err: any) => void;
 
+interface UseExtractedObservableOptions<E> extends UseObservableOptions<E> {
+    onComplete?: () => void;
+}
+declare function useExtractedObservable<T extends MultiWatchSources, E, Immediate extends Readonly<boolean> = false>(sources: [...T], extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>, options?: UseExtractedObservableOptions<E>, watchOptions?: WatchOptions<Immediate>): Readonly<Ref<E>>;
+declare function useExtractedObservable<T extends Readonly<MultiWatchSources>, E, Immediate extends Readonly<boolean> = false>(sources: T, extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>, options?: UseExtractedObservableOptions<E>, watchOptions?: WatchOptions<Immediate>): Readonly<Ref<E>>;
+declare function useExtractedObservable<T, E, Immediate extends Readonly<boolean> = false>(sources: WatchSource<T>, extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>, options?: UseExtractedObservableOptions<E>, watchOptions?: WatchOptions<Immediate>): Readonly<Ref<E>>;
+declare function useExtractedObservable<T extends object, E, Immediate extends Readonly<boolean> = false>(sources: T, extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>, options?: UseExtractedObservableOptions<E>, watchOptions?: WatchOptions<Immediate>): Readonly<Ref<E>>;
+
 interface UseSubjectOptions<I = undefined> extends Omit<UseObservableOptions<I>, 'initialValue'> {
@@ -28,2 +47,2 @@ }
 
-export { type UseObservableOptions, type UseSubjectOptions, from, fromEvent, toObserver, useObservable, useSubject, useSubscription };
+export { type OnCleanup, type UseExtractedObservableOptions, type UseObservableOptions, type UseSubjectOptions, type WatchExtractedObservableCallback, type WatchExtractedObservableOptions, from, fromEvent, toObserver, useExtractedObservable, useObservable, useSubject, useSubscription, watchExtractedObservable };

index.iife.js

@@ -149,2 +149,36 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
+  function useExtractedObservable(source, extractor, options, watchOptions) {
+    let subscription;
+    shared.tryOnScopeDispose(() => {
+      subscription == null ? void 0 : subscription.unsubscribe();
+      subscription = void 0;
+    });
+    const obsRef = vueDemi.shallowRef(options == null ? void 0 : options.initialValue);
+    vueDemi.watch(source, (value, oldValue, onCleanup) => {
+      subscription == null ? void 0 : subscription.unsubscribe();
+      if (typeof value !== "undefined" && value !== null) {
+        const observable = extractor(value, oldValue, onCleanup);
+        subscription = observable.subscribe({
+          error: (err) => {
+            var _a;
+            (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, err);
+          },
+          complete: () => {
+            var _a;
+            (_a = options == null ? void 0 : options.onComplete) == null ? void 0 : _a.call(options);
+          },
+          next: (val) => {
+            obsRef.value = val;
+          }
+        });
+      } else {
+        subscription = void 0;
+      }
+    }, {
+      immediate: true,
+      ...watchOptions
+    });
+    return vueDemi.readonly(obsRef);
+  }
+
   function useObservable(observable, options) {
@@ -187,9 +221,32 @@ const value = vueDemi.ref(options == null ? void 0 : options.initialValue);
 
+  function watchExtractedObservable(source, extractor, callback, subscriptionOptions, watchOptions) {
+    let subscription;
+    shared.tryOnScopeDispose(() => {
+      subscription == null ? void 0 : subscription.unsubscribe();
+      subscription = void 0;
+    });
+    return vueDemi.watch(source, (value, oldValue, onCleanup) => {
+      subscription == null ? void 0 : subscription.unsubscribe();
+      if (typeof value !== "undefined" && value !== null) {
+        const observable = extractor(value, oldValue, onCleanup);
+        subscription = observable.subscribe({
+          next: callback,
+          error: subscriptionOptions == null ? void 0 : subscriptionOptions.onError,
+          complete: subscriptionOptions == null ? void 0 : subscriptionOptions.onComplete
+        });
+      } else {
+        subscription = void 0;
+      }
+    }, watchOptions);
+  }
+
   exports.from = from;
   exports.fromEvent = fromEvent;
   exports.toObserver = toObserver;
+  exports.useExtractedObservable = useExtractedObservable;
   exports.useObservable = useObservable;
   exports.useSubject = useSubject;
   exports.useSubscription = useSubscription;
+  exports.watchExtractedObservable = watchExtractedObservable;
 
 })(this.VueUse = this.VueUse || {}, rxjs, VueDemi, VueUse);

index.iife.min.js

@@ -1,1 +0,1 @@
-var VueDemi=function(n,r,f){if(n.install)return n;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(r.version.slice(0,4)==="2.7."){let o=function(c,a){var u,d={},i={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(e,t){return d[e]=t,this},directive:function(e,t){return t?(r.directive(e,t),i):r.directive(e)},mount:function(e,t){return u||(u=new r(Object.assign({propsData:a},c,{provide:Object.assign(d,c.provide)})),u.$mount(e,t),u)},unmount:function(){u&&(u.$destroy(),u=void 0)}};return i};var b=o;for(var s in r)n[s]=r[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.warn=r.util.warn,n.hasInjectionContext=()=>!!n.getCurrentInstance(),n.createApp=o}else if(r.version.slice(0,2)==="2.")if(f){for(var s in f)n[s]=f[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.hasInjectionContext=()=>!!n.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var s in r)n[s]=r[s];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=r,n.Vue2=void 0,n.version=r.version,n.set=function(o,c,a){return Array.isArray(o)?(o.length=Math.max(o.length,c),o.splice(c,1,a),a):(o[c]=a,a)},n.del=function(o,c){if(Array.isArray(o)){o.splice(c,1);return}delete o[c]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,r,f,s){"use strict";function b(i,e){return f.isRef(i)?new r.Observable(t=>f.watch(i,l=>t.next(l),e)):r.from(i)}function o(i,e){return f.isRef(i)?new r.Observable(t=>{let l;return f.watch(i,v=>{l?.unsubscribe(),v instanceof HTMLElement&&(l=r.fromEvent(v,e).subscribe(t),t.add(l))},{immediate:!0})}):r.fromEvent(i,e)}function c(i){return{next:e=>{i.value=e}}}function a(i,e){const t=f.ref(e?.initialValue),l=i.subscribe({next:v=>t.value=v,error:e?.onError});return s.tryOnScopeDispose(()=>{l.unsubscribe()}),t}function u(i,e){const t=f.ref(i instanceof r.BehaviorSubject?i.value:void 0),l=i.subscribe({next(v){t.value=v},error:e?.onError});return f.watch(t,v=>{i.next(v)}),s.tryOnScopeDispose(()=>{l.unsubscribe()}),t}function d(i){s.tryOnScopeDispose(()=>{i.unsubscribe()})}n.from=b,n.fromEvent=o,n.toObserver=c,n.useObservable=a,n.useSubject=u,n.useSubscription=d})(this.VueUse=this.VueUse||{},rxjs,VueDemi,VueUse);
+var VueDemi=function(n,r,l){if(n.install)return n;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(r.version.slice(0,4)==="2.7."){let u=function(f,d){var b,y={},O={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(v,e){return y[v]=e,this},directive:function(v,e){return e?(r.directive(v,e),O):r.directive(v)},mount:function(v,e){return b||(b=new r(Object.assign({propsData:d},f,{provide:Object.assign(y,f.provide)})),b.$mount(v,e),b)},unmount:function(){b&&(b.$destroy(),b=void 0)}};return O};var S=u;for(var c in r)n[c]=r[c];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.warn=r.util.warn,n.hasInjectionContext=()=>!!n.getCurrentInstance(),n.createApp=u}else if(r.version.slice(0,2)==="2.")if(l){for(var c in l)n[c]=l[c];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.hasInjectionContext=()=>!!n.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var c in r)n[c]=r[c];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=r,n.Vue2=void 0,n.version=r.version,n.set=function(u,f,d){return Array.isArray(u)?(u.length=Math.max(u.length,f),u.splice(f,1,d),d):(u[f]=d,d)},n.del=function(u,f){if(Array.isArray(u)){u.splice(f,1);return}delete u[f]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,r,l,c){"use strict";function S(e,o){return l.isRef(e)?new r.Observable(i=>l.watch(e,s=>i.next(s),o)):r.from(e)}function u(e,o){return l.isRef(e)?new r.Observable(i=>{let s;return l.watch(e,t=>{s?.unsubscribe(),t instanceof HTMLElement&&(s=r.fromEvent(t,o).subscribe(i),i.add(s))},{immediate:!0})}):r.fromEvent(e,o)}function f(e){return{next:o=>{e.value=o}}}function d(e,o,i,s){let t;c.tryOnScopeDispose(()=>{t?.unsubscribe(),t=void 0});const a=l.shallowRef(i?.initialValue);return l.watch(e,(p,w,E)=>{t?.unsubscribe(),typeof p<"u"&&p!==null?t=o(p,w,E).subscribe({error:h=>{var A;(A=i?.onError)==null||A.call(i,h)},complete:()=>{var h;(h=i?.onComplete)==null||h.call(i)},next:h=>{a.value=h}}):t=void 0},{immediate:!0,...s}),l.readonly(a)}function b(e,o){const i=l.ref(o?.initialValue),s=e.subscribe({next:t=>i.value=t,error:o?.onError});return c.tryOnScopeDispose(()=>{s.unsubscribe()}),i}function y(e,o){const i=l.ref(e instanceof r.BehaviorSubject?e.value:void 0),s=e.subscribe({next(t){i.value=t},error:o?.onError});return l.watch(i,t=>{e.next(t)}),c.tryOnScopeDispose(()=>{s.unsubscribe()}),i}function O(e){c.tryOnScopeDispose(()=>{e.unsubscribe()})}function v(e,o,i,s,t){let a;return c.tryOnScopeDispose(()=>{a?.unsubscribe(),a=void 0}),l.watch(e,(p,w,E)=>{a?.unsubscribe(),typeof p<"u"&&p!==null?a=o(p,w,E).subscribe({next:i,error:s?.onError,complete:s?.onComplete}):a=void 0},t)}n.from=S,n.fromEvent=u,n.toObserver=f,n.useExtractedObservable=d,n.useObservable=b,n.useSubject=y,n.useSubscription=O,n.watchExtractedObservable=v})(this.VueUse=this.VueUse||{},rxjs,VueDemi,VueUse);

package.json

 {
   "name": "@vueuse/rxjs",
-  "version": "10.4.1",
+  "version": "10.5.0",
   "description": "Enables RxJS reactive functions in Vue",
@@ -41,4 +41,4 @@ "author": "Anthony Fu <https://github.com/antfu>",
   "dependencies": {
-    "@vueuse/shared": "10.4.1",
-    "vue-demi": ">=0.14.5"
+    "@vueuse/shared": "10.5.0",
+    "vue-demi": ">=0.14.6"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

README.md

@@ -19,5 +19,7 @@ # @vueuse/rxjs
   - [`toObserver`](https://vueuse.org/rxjs/toObserver/) — sugar function to convert a `ref` into an RxJS [Observer](https://rxjs.dev/guide/observer)
+  - [`useExtractedObservable`](https://vueuse.org/rxjs/useExtractedObservable/) — use an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables
   - [`useObservable`](https://vueuse.org/rxjs/useObservable/) — use an RxJS [`Observable`](https://rxjs.dev/guide/observable)
   - [`useSubject`](https://vueuse.org/rxjs/useSubject/) — bind an RxJS [`Subject`](https://rxjs.dev/guide/subject) to a `ref` and propagate value changes both ways
   - [`useSubscription`](https://vueuse.org/rxjs/useSubscription/) — use an RxJS [`Subscription`](https://rxjs.dev/guide/subscription) without worrying about unsubscribing from it or creating memory leaks
+  - [`watchExtractedObservable`](https://vueuse.org/rxjs/watchExtractedObservable/) — watch the values of an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables
 
@@ -24,0 +26,0 @@

No alert changes

Improved metrics

Total package byte prevSize

38287

increased by86.02%

Lines of code

543

increased by54.26%

Number of lines in readme file

63

increased by3.28%

Dependency changes

• + Added@vueuse/shared@10.5.0(transitive)

• - Removed@vueuse/shared@10.4.1(transitive)

• Updated@vueuse/shared@10.5.0

• Updatedvue-demi@>=0.14.6