🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@vueuse/rxjs

Package Overview
Dependencies
Maintainers
4
Versions
268
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vueuse/rxjs - npm Package Compare versions

Comparing version

10.4.1
to
10.5.0

25

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 };

57

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);

2

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);

6

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": {

2

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 @@ 

index.cjs

Sorry, the diff of this file is not supported yet

index.d.cts

Sorry, the diff of this file is not supported yet

index.d.mts

Sorry, the diff of this file is not supported yet

index.mjs

Sorry, the diff of this file is not supported yet