feat: combining toggles instead of overriding them when using nested …

…providers

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][]
 
+### Updated
+
+- Breaking changes: updating `feature-toggle-service` to version 6.0.0. The new package behavior introduces combination instead of overriding. Since it's a different feature, it can affect nested provider components.
+
 ## [8.0.0][] - 2020-06-13
 
 ### Added
@@ -435,7 +439,5 @@ So that, the new flow will be:
 [7.4.4]: https://github.com/willmendesneto/ngx-feature-toggle/tree/v7.4.4
 [unreleased]: https://github.com/willmendesneto/ngx-feature-toggle/compare/v7.4.5...HEAD
 [7.4.5]: https://github.com/willmendesneto/ngx-feature-toggle/tree/v7.4.5
-
-
-[Unreleased]: https://github.com/willmendesneto/ngx-feature-toggle/compare/v8.0.0...HEAD
-[8.0.0]: https://github.com/willmendesneto/ngx-feature-toggle/tree/v8.0.0
+[unreleased]: https://github.com/willmendesneto/ngx-feature-toggle/compare/v8.0.0...HEAD
+[8.0.0]: https://github.com/willmendesneto/ngx-feature-toggle/tree/v8.0.0

package.json

@@ -51,7 +51,7 @@
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
-    "feature-toggle-service": "^5.0.1",
+    "feature-toggle-service": "^6.0.0",
     "rxjs": "~6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

projects/ngx-feature-toggle/package.json

@@ -28,6 +28,6 @@
     "@angular/router": ">=8.0.0"
   },
   "dependencies": {
-    "feature-toggle-service": "^5.0.1"
+    "feature-toggle-service": "^6.0.0"
   }
 }

projects/ngx-feature-toggle/src/lib/ngx-feature-toggle-provider.component.ts

@@ -3,9 +3,7 @@ import { set, FeatureToggleServiceConfig } from 'feature-toggle-service';
 
 @Component({
   selector: 'feature-toggle-provider',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: '<ng-content></ng-content>',
 })
 export class FeatureToggleProviderComponent implements DoCheck, OnInit {
   @Input()
@@ -26,7 +24,10 @@ export class FeatureToggleProviderComponent implements DoCheck, OnInit {
 
   private setFeatureToggles() {
     if (this.currentConfig !== this.features) {
-      this.currentConfig = this.features;
+      // Using `Object.assign()` method for bundle size decreasing purposes
+      // It's required since it needs a new memory reference
+      // for the new object value
+      this.currentConfig = Object.assign({}, this.features);
       set(this.features);
     }
   }

src/app/app.component.ts

@@ -1,29 +1,38 @@
-import { Component, NgZone } from '@angular/core';
+import { Component, NgZone, OnDestroy } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
   featureToggleData: any = {
     enableFirstText: false,
     enableSecondText: true,
   };
 
+  intervalId;
+
   constructor(private zone: NgZone) {
     // Required because Protractor current behavior
     // More details in https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
     this.zone.runOutsideAngular(() => {
-      setInterval(() => {
+      this.intervalId = setInterval(() => {
         this.zone.run(() => {
           Object.keys(this.featureToggleData).map(
-            key => (this.featureToggleData[key] = !this.featureToggleData[key]),
+            (key) =>
+              (this.featureToggleData[key] = !this.featureToggleData[key])
           );
         });
         // increase/decrease this number to see the
         // current feature toggle component behavior
       }, 5000);
     });
   }
+
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
 }

src/app/hello.component.html

@@ -0,0 +1,7 @@
+<h2>Hello!</h2>
+<feature-toggle-provider [features]="anotherFeatureToggleData">
+  <div *featureToggle="'enableAnother'">
+    <h3>This is sparta</h3>
+    <p>condition is true and "featureToggle" is enabled.</p>
+  </div>
+</feature-toggle-provider>

src/app/hello.component.ts

@@ -1,16 +1,53 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, NgZone, OnDestroy } from '@angular/core';
 
 @Component({
   selector: 'app-hello',
-  template: `<h1>Hello {{name}}!</h1>`,
-  styles: [`h1 { font-family: Lato; }`]
+  templateUrl: './hello.component.html',
+  styles: [
+    `
+      h1 {
+        font-family: Lato;
+      }
+    `,
+  ],
 })
-
-export class HelloComponent implements OnInit {
+export class HelloComponent implements OnInit, OnDestroy {
   @Input() name: string;
 
+  anotherFeatureToggleData = {
+    enableAnother: true,
+  };
+
+  intervalId;
+
   ngOnInit() {
-    console.error('HelloComponent - ngDoCheck() - Should not be called', this.name);
+    console.error(
+      'HelloComponent - ngDoCheck() - Should not be called',
+      this.name
+    );
   }
 
+  constructor(private zone: NgZone) {
+    // Required because Protractor current behavior
+    // More details in https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
+    this.zone.runOutsideAngular(() => {
+      this.intervalId = setInterval(() => {
+        this.zone.run(() => {
+          Object.keys(this.anotherFeatureToggleData).forEach(
+            (key) =>
+              (this.anotherFeatureToggleData[key] = !this
+                .anotherFeatureToggleData[key])
+          );
+        });
+        // increase/decrease this number to see the
+        // current feature toggle component behavior
+      }, 2000);
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
 }