disposable-component
Advanced tools
disposable-component - npm Package Compare versions
Comparing version 0.4.2 to 1.0.0
@@ -13,3 +13,3 @@ (function (global, factory) { | ||
| } | ||
| })(this, function (_exports, _rxjs, _operators) { | ||
| })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _rxjs, _operators) { | ||
| "use strict"; | ||
@@ -16,0 +16,0 @@ |
| { | ||
| "name": "disposable-component", | ||
| "version": "0.4.2", | ||
| "version": "1.0.0", | ||
| "description": "A simple reactive API for mounting and unmounting components to the DOM", | ||
@@ -31,3 +31,2 @@ "main": "lib/rx6.js", | ||
| "dependencies": { | ||
| "rx": "^4.1.0", | ||
| "rxjs": "^6.4.0" | ||
@@ -34,0 +33,0 @@ }, |
| # disposable-component | ||
| Disposable-component providse a simple reactive API for mounting and | ||
| Disposable-component provides a simple reactive API for mounting and | ||
| unmounting components to the DOM. This is useful for cross framework | ||
@@ -26,3 +26,3 @@ interop inside your single-page-app. | ||
| return mountComponent( | ||
| function mount(onNext, onCompleted, onError) { | ||
| function mount(next, completed, error) { | ||
| el = document.createElement("div"); | ||
@@ -32,3 +32,3 @@ document.body.appendChild(el); | ||
| ReactDOM.render( | ||
| <El {...props} close={onCompleted} onNext={onNext} />, | ||
| <El {...props} close={complete} onNext={next} />, | ||
| el | ||
@@ -48,4 +48,4 @@ ); | ||
| <h1>My Modal</h1> | ||
| <button onClick={this.props.onCompleted}>Close</button> | ||
| <button onClick={this.props.onNext.bind(null, 1)}>Save</button> | ||
| <button onClick={this.props.complete}>Close</button> | ||
| <button onClick={this.props.next.bind(null, 1)}>Save</button> | ||
| </div> | ||
@@ -58,3 +58,3 @@ ); | ||
| subscription.dispose(); // close the modal | ||
| subscription.unsubscribe(); // close the modal | ||
| ``` |
@@ -1,76 +0,3 @@ | ||
| import mountComponent from './rx4.js'; | ||
| import mountDisposableComponent from './rx6.js'; | ||
| describe('Disposable Component', function() { | ||
| it('should execute the mount life-cycle lazily', function() { | ||
| const mount = jasmine.createSpy(); | ||
| const unmount = jasmine.createSpy(); | ||
| mountComponent(mount, unmount); | ||
| expect(mount).not.toHaveBeenCalled(); | ||
| expect(unmount).not.toHaveBeenCalled(); | ||
| mountComponent(mount, unmount).subscribe(data => { | ||
| }); | ||
| expect(mount).toHaveBeenCalled(); | ||
| expect(unmount).not.toHaveBeenCalled(); | ||
| }); | ||
| it('should unmount when the subscription is disposed', function() { | ||
| const mount = jasmine.createSpy(); | ||
| const unmount = jasmine.createSpy(); | ||
| mountComponent(mount, unmount); | ||
| expect(mount).not.toHaveBeenCalled(); | ||
| expect(unmount).not.toHaveBeenCalled(); | ||
| mountComponent(mount, unmount).subscribe(data => { | ||
| }).dispose(); | ||
| expect(mount).toHaveBeenCalled(); | ||
| expect(unmount).toHaveBeenCalled(); | ||
| }); | ||
| it('should publish data to the subscription', function() { | ||
| const mount = function(onNext, onError, onCompleted) { | ||
| onNext(1); | ||
| onNext(2); | ||
| }; | ||
| const unmount = jasmine.createSpy(); | ||
| const onData = jasmine.createSpy(); | ||
| mountComponent(mount, unmount).subscribe(onData); | ||
| expect(onData).toHaveBeenCalledWith(1); | ||
| expect(onData).toHaveBeenCalledWith(2); | ||
| }); | ||
| it('should publish errors to the subscription', function() { | ||
| const mount = function(onNext, onCompleted, onError) { | ||
| onError('aah'); | ||
| }; | ||
| const unmount = jasmine.createSpy(); | ||
| const onError = jasmine.createSpy(); | ||
| mountComponent(mount, unmount).subscribe(() => {}, onError); | ||
| expect(onError).toHaveBeenCalledWith('aah'); | ||
| }); | ||
| it('should publish errors to the subscription', function() { | ||
| const mount = function(onNext, onCompleted, onError) { | ||
| onCompleted(); | ||
| }; | ||
| const onCompleted = jasmine.createSpy(); | ||
| mountComponent(mount, () => {}).finally(onCompleted).subscribe(() => {}, () => {}); | ||
| expect(onCompleted).toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
| describe('Disposable Component rx6', function() { | ||
@@ -77,0 +4,0 @@ it('should execute the mount life-cycle lazily', function() { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
1
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-33.51%
7755
- Number of package files
- decreased by-30%
7
- Lines of code
- decreased by-51.79%
81
- Number of medium supply chain risk alerts
- increased byInfinity%
1