Skip to content

Commit

Permalink
Merge branch 'kmathy-feature/rxjs-6-support-new-imports'
Browse files Browse the repository at this point in the history
  • Loading branch information
Netanel Basal committed Jun 6, 2018
2 parents b81a39e + 726b175 commit 05410b2
Show file tree
Hide file tree
Showing 6 changed files with 6,611 additions and 480 deletions.
61 changes: 2 additions & 59 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

## Usage

### Rxjs 5.5+ (pipeable operators)
### RxJS 6+
```ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy';
Expand Down Expand Up @@ -39,41 +39,9 @@ export class InboxComponent implements OnInit, OnDestroy {
}
```

### Pre [email protected] (or if you're still patching the observable prototype)
```ts
import { Component, OnInit } from '@angular/core';
import { TakeUntilDestroy, OnDestroy } from 'ngx-take-until-destroy';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operators/takeUntil';

@TakeUntilDestroy()
@Component({
selector: 'app-inbox',
templateUrl: './inbox.component.html'
})
export class InboxComponent implements OnInit, OnDestroy {
readonly destroyed$: Observable<boolean>;

ngOnInit( ) {
Observable.interval(1000)
.takeUntil(this.destroyed$)
.subscribe(val => console.log(val))
}

// If you work with AOT this method must be present, even if empty!
// Otherwise 'ng build --prod' will optimize away any calls to ngOnDestroy,
// even if the method is added by the @TakeUntilDestroy decorator
ngOnDestroy() {
// You can also do whatever you need here
}

}
```

### Use with any class

#### Rxjs 5.5+ (pipeable operators)
#### RxJS 6+
```ts
import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy';
import { interval } from 'rxjs/Observable/interval';
Expand All @@ -92,28 +60,3 @@ export class Widget {

}
```

#### Before [email protected] (or if you're still patching the observable prototype)
```ts
import { TakeUntilDestroy } from 'ngx-take-until-destroy';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operators/takeUntil';

@TakeUntilDestroy('destroy')
export class Widget {
readonly destroyed$: Observable<boolean>;

constructor( ) {
Observable.interval(1000)
.takeUntil(this.destroyed$)
.subscribe(console.log)
}

// The name needs to be the same as the decorator parameter
destroy() {
}

}
```

9 changes: 5 additions & 4 deletions __tests__/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Subject } from 'rxjs/Subject';
import { Subject } from 'rxjs';

import { TakeUntilDestroy, untilDestroyed } from '../src/take-until-destroy';

const mockObserver = {
Expand Down Expand Up @@ -96,12 +97,12 @@ describe('@TakeUntilDestroy', () => {
class Parent {
prop;
constructor(protected prop) {
this.prop = prop;
this.prop = prop;
}
}

@TakeUntilDestroy('destroy')
class Test extends Parent{
class Test extends Parent {
destroyed$: Subject<boolean>;
testProp = 'TakeUntilDestroy';

Expand Down Expand Up @@ -166,7 +167,7 @@ describe('untilDestroyed operator', () => {
.subscribe(mockObserver);
}

ngOnDestroy() {}
ngOnDestroy() { }
};

const instance = new Test();
Expand Down
44 changes: 0 additions & 44 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,44 +0,0 @@
{
"name": "ngx-take-until-destroy",
"version": "2.2.1",
"main": "dist/index.js",
"module": "dist/es5/index.js",
"es2015": "dist/index.js",
"description": "Class decorator that adds takeUntil component destroyed",
"license": "MIT",
"scripts": {
"clearDist": "rm -rf ./dist",
"clear": "npm run clearDist",
"compile": "tsc --p tsconfig.es5.json && tsc --p tsconfig.es2015.json && tsc --p tsconfig.umd.json",
"precompile": "npm run clearDist",
"prepublish": "npm test && clear && npm run compile",
"test": "jest"
},
"typings": "./dist/index.d.ts",
"files": [
"dist"
],
"maintainers": [
"Netanel Basal"
],
"repository": {
"url": "https://github.com/NetanelBasal/ngx-take-until-destroy"
},
"jest": {
"moduleFileExtensions": [
"ts",
"js"
],
"transform": {
"\\.(ts)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "/__tests__/.*\\.(ts|js)$"
},
"devDependencies": {
"@types/jest": "^22.0.1",
"jest": "^22.0.5",
"rxjs": "^5.5.0",
"ts-jest": "^22.0.1",
"typescript": "^2.6.1"
}
}
9 changes: 4 additions & 5 deletions src/take-until-destroy.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export interface OnDestroy {
Expand All @@ -12,7 +11,7 @@ export interface OnDestroy {
* @param value
* @returns {boolean}
*/
function isFunction( value ) {
function isFunction(value) {
return typeof value === 'function';
}

Expand All @@ -22,11 +21,11 @@ function isFunction( value ) {
*/
export function TakeUntilDestroy(destroyMethodName = 'ngOnDestroy') {

return function<T extends { new( ...args: any[] ): {} }>(constructor: T) {
return function <T extends { new(...args: any[]): {} }>(constructor: T) {

const originalDestroy = constructor.prototype[destroyMethodName];

if( !isFunction(originalDestroy) ) {
if (!isFunction(originalDestroy)) {
console.warn(`${constructor.name} is using @TakeUntilDestroy but does not implement ${destroyMethodName}`);
}

Expand Down
Loading

0 comments on commit 05410b2

Please sign in to comment.