-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support pipable cancelOnDestroy and tag operators #117
Changes from 5 commits
8f4df80
3ae57b6
fe60ccb
190fc44
89f89a5
f702d69
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { Observable } from 'rxjs/Observable'; | ||
import { Subject } from 'rxjs/Subject'; | ||
import { OnDestroy } from '@angular/core'; | ||
import 'rxjs/add/observable/merge'; | ||
|
||
interface EnhancedOnDestroy extends OnDestroy { | ||
__ngOnDestroySource__: Subject<string>; | ||
__ngOnDestroy__: () => void; | ||
} | ||
|
||
export function cancelOnDestroy<T>(instance: OnDestroy, manualDestroy?: Observable<any>): (source: Observable<T>) => Observable<T> { | ||
return (source: Observable<T>) => { | ||
if (!instance.ngOnDestroy) { | ||
return source; | ||
} | ||
|
||
return Observable.create(observer => { | ||
let subscription = source.subscribe(observer); | ||
|
||
if (!(<EnhancedOnDestroy>instance).__ngOnDestroySource__) { | ||
(<EnhancedOnDestroy>instance).__ngOnDestroySource__ = new Subject(); | ||
(<EnhancedOnDestroy>instance).__ngOnDestroy__ = instance.ngOnDestroy; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this might be a good place to use Symbol, as I don't think we want this property to be enumerable. plus it will make sure there are no collisions. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. hmm, never used it before :)
something like this, right? (I haven't tried it in the runtime yet, just guessing in the comments) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. exactly. The symbol data structure is built for use cases like these. I would consult @esakal first, as I think it requires a polyfill for IE. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hi, It is nice talking about advanced techniques :)
It will prevent collisions as you mentioned and will be ignored so it fit the purpose.
We already have this polifill enabled here There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Okay, apparently it doesn't work yet in typescript v2.5.3 we have in kaltura-ng. @esakal We can leave it as a plain property for now or wait for upgrade of the TS (if it was planned), what do you prefer? |
||
|
||
instance.ngOnDestroy = function (this: EnhancedOnDestroy) { | ||
this.__ngOnDestroy__.apply(this, arguments); | ||
this.__ngOnDestroySource__.next(); | ||
this.__ngOnDestroySource__.complete(); | ||
}; | ||
} | ||
|
||
const sources = manualDestroy | ||
? Observable.merge(manualDestroy, (<EnhancedOnDestroy>instance).__ngOnDestroySource__) | ||
: (<EnhancedOnDestroy>instance).__ngOnDestroySource__.asObservable(); | ||
|
||
sources.subscribe(() => { | ||
if (subscription) { | ||
subscription.unsubscribe(); | ||
subscription = null; | ||
} | ||
}); | ||
|
||
return () => { | ||
if (subscription) { | ||
subscription.unsubscribe(); | ||
subscription = null; | ||
} | ||
} | ||
}); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { cancelOnDestroy } from './cancel-on-destroy'; | ||
export { tag } from './tag'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import { Observable } from 'rxjs/Observable'; | ||
import { OperationTagStoreMediator } from '../../operation-tag/operation-tag-store-mediator'; | ||
|
||
export function tag<T>(action: string): (source: Observable<T>) => Observable<T> { | ||
let isDecreased = false; | ||
let closed = false; | ||
|
||
return (source: Observable<T>) => Observable.create(observer => { | ||
OperationTagStoreMediator.increase(action); | ||
|
||
let subscription = source.subscribe( | ||
(value) => { | ||
observer.next(value); | ||
}, | ||
error => { | ||
if (action && !isDecreased) { | ||
isDecreased = true; | ||
OperationTagStoreMediator.decrease(action); | ||
} | ||
observer.error(error); | ||
}, | ||
() => { | ||
if (action && !isDecreased) { | ||
isDecreased = true; | ||
OperationTagStoreMediator.decrease(action); | ||
} | ||
observer.complete(); | ||
} | ||
); | ||
|
||
return () => { | ||
if (!closed && action && !isDecreased) { | ||
isDecreased = true; | ||
OperationTagStoreMediator.decrease(action); | ||
} | ||
|
||
if (subscription) { | ||
subscription.unsubscribe(); | ||
subscription = null; | ||
closed = true; | ||
} | ||
} | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
creation method should be imported like so:
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
see:
https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
correcting my previous comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
merge
is not available for import from 'rxjs' in v5.5.6 yetThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see, I thought this work was done as part of v6 migration. my bad.