ngx-feature-toggle - npm Package Compare versions

Comparing version 7.4.3 to 7.4.4

package.json

@@ -5,3 +5,3 @@ {
   "author": "Will Mendes <[e-mail]>",
-  "version": "7.4.3",
+  "version": "7.4.4",
   "keywords": [
@@ -45,2 +45,2 @@ "angular",
   "sideEffects": false
-}
+}

README.md

@@ -1,24 +0,270 @@
-# NgxFeatureToggle
+# NGX Feature Toggle
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.
+[![Dependency Status](https://david-dm.org/willmendesneto/ngx-feature-toggle.svg)](https://david-dm.org/willmendesneto/ngx-feature-toggle)
+[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-feature-toggle-sample)
 
-## Code scaffolding
+[![NPM](https://nodei.co/npm/ngx-feature-toggle.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/ngx-feature-toggle)
+[![NPM](https://nodei.co/npm-dl/ngx-feature-toggle.png?height=3&months=3)](https://npmjs.org/ngx-feature-toggle)
 
-Run `ng generate component component-name --project ngx-feature-toggle` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-feature-toggle`.
-> Note: Don't forget to add `--project ngx-feature-toggle` or else it will be added to the default project in your `angular.json` file. 
+[![Build Status](https://circleci.com/gh/willmendesneto/ngx-feature-toggle.svg?style=shield)](https://circleci.com/gh/willmendesneto/ngx-feature-toggle)
+[![Coverage Status](https://coveralls.io/repos/willmendesneto/ngx-feature-toggle/badge.svg?branch=master)](https://coveralls.io/r/willmendesneto/ngx-feature-toggle?branch=master)
+[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-feature-toggle.svg)](https://bundlephobia.com/result?p=ngx-feature-toggle)
+[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
 
-## Build
+Your module to handle with [feature toggles](http://martinfowler.com/bliki/FeatureToggle.html) in Angular applications easier.
 
-Run `ng build ngx-feature-toggle` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Why Feature toggle?
 
-## Publishing
+> This is a common concept, but why use this directive instead solve it via server-side rendering?
 
-After building your library with `ng build ngx-feature-toggle`, go to the dist folder `cd dist/ngx-feature-toggle` and run `npm publish`.
+The idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:
 
-## Running unit tests
+- Server-side rendering;
+- Progressive rendering;
+- Any other that you like :)
 
-Run `ng test ngx-feature-toggle` to execute the unit tests via [Karma](https://karma-runner.github.io).
+You can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.
 
-## Further help
+- [Demo](#demo)
+- [Install](#install)
+- [Setup](#setup)
+- [Development](#development)
+- [Contribute](#contribute)
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+## Demo
+
+Try out the demos on Stackblitz:
+
+- [Components and directives example](https://stackblitz.com/edit/ngx-feature-toggle-sample)
+- [Routing Guards example](https://stackblitz.com/edit/ngx-feature-toggle-routing-guard-sample)
+
+## Install
+
+You can get it on NPM installing `ngx-feature-toggle` module as a project dependency.
+
+```shell
+npm install ngx-feature-toggle --save
+```
+
+## Setup
+
+You'll need to add `FeatureToggleModule` to your application module. So that, the `featureToggle` components will be accessible in your application.
+
+```typescript
+...
+import { FeatureToggleModule } from 'ngx-feature-toggle';
+...
+@NgModule({
+  declarations: [
+    YourAppComponent
+  ],
+  imports: [
+    ...
+    FeatureToggleModule,
+    ...
+  ],
+  providers: [],
+  bootstrap: [YourAppComponent]
+})
+
+export class YourAppComponent {}
+
+```
+
+Now you just need to add a configuration in your application root component. Your feature toggle configuration can be added using different approaches, such as:
+
+- RXJS subscribe information;
+- HTTP Request;
+- CQRS event data;
+- File information;
+- etc;
+
+After that, you can use the `featureToggle` components and directives in your templates, passing the string based on the feature toggle configuration data.
+
+## Module
+
+### Components and Directives
+
+- `feature-toggle-provider`: Handle with feature toggle configuration in your application. It adds the default values of your enabled/disabled features;
+- `*featureToggle`: Directive that handles with feature toggle check. So that, the component will be rendered/removed based on the feature toggle configuration is enabled;
+- `*featureToggleWhenDisabled`: Directive that handles with feature toggle check. So that, the component will be rendered/removed when the feature toggle configuration is disabled;
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'component-docs',
+  template: `
+    <feature-toggle-provider [features]="featureToggleData">
+      <div *featureToggle="'enableSecondText'">
+        <p>condition is true and "featureToggle" is enabled.</p>
+      </div>
+      <div *featureToggle="'enableFirstText'">
+        <p>
+          condition is false and "featureToggle" is disabled. In that case this content should not
+          be rendered.
+        </p>
+      </div>
+      <div *featureToggleWhenDisabled="'enableFirstText'">
+        <p>
+          condition is false and "featureToggle" is disabled
+          <b>and it has "featureToggleWhenDisabled" directive.</b> In that case this content should
+          be rendered.
+        </p>
+      </div>
+    </feature-toggle-provider>
+  `,
+})
+export class ComponentDocsComponent {
+  public featureToggleData: any = {
+    enableFirstText: false,
+    enableSecondText: true,
+  };
+}
+```
+
+### Route Guards
+
+In some scenarios when you need to prevent the route to be loaded, you can use `NgxFeatureToggleCanLoadGuard`, by passing the class and configuration of the feature toggle to be checked in your route data.
+
+```js
+...
+export const routes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent,
+    canLoad: [NgxFeatureToggleCanLoadGuard],
+    data: {
+      featureToggle: ['enableSecondText'],
+    },
+  },
+];
+...
+```
+
+Also, you can use `NgxFeatureToggleCanActivateGuard` to check if the route should be activated or not by passing the class and configuration of the feature toggle to be checked in your route data.
+
+```js
+...
+export const routes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent,
+    canActivate: [NgxFeatureToggleCanActivateGuard],
+    data: {
+      featureToggle: ['enableSecondText'],
+    },
+  },
+];
+...
+```
+
+In both route guards you can pass route data with feature toggle as an array. For scenarios when you need to check for feature toggles enabled and/or disabled you can easily configure it by passing `!` if the application should check if the feature toggle is disabled
+
+```js
+...
+export const routes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent,
+    canActivate: [NgxFeatureToggleCanActivateGuard],
+    data: {
+      featureToggle: [
+        // This configuration will check if feature toggle is enabled
+        'enableSecondText',
+        // This configuration will check if feature toggle is disabled
+        // since it has `!` prefix in the configuration
+        '!enableFirstText'
+      ],
+    },
+  },
+];
+...
+```
+
+In this case, we are combining the checks. So the component will be activated if `enableSecondText` is configured as `true` AND `enableFirstText` is configured as `false`. With that configuration you can have all the flexibility to cover different scenarios in your app.
+
+Use `NgxFeatureToggleCanActivateChildGuard` to control when the child component of a specific component can be activate via routing. It can be passed as an array of items.
+
+```js
+...
+export const routes: Routes = [
+  {
+    path: 'customer',
+    component: CustomerComponent,
+    canActivateChild: [NgxFeatureToggleCanActivateChildGuard],
+    children: [
+      {
+        path: ':id',
+        component: CustomerDetailComponent,
+        // This is the featureToggle configuration for
+        // the child component. It can also use
+        // a combination of feature toggles
+        data: {
+          featureToggle: ['enableCustomerPage', '!enableChildrenNavigation'],
+        },
+      },
+    ],
+  },
+];
+...
+```
+
+For advanced scenarios you can use a combination of route guards. E.G.
+
+```js
+...
+export const routes: Routes = [
+  {
+    path: 'customer',
+    component: CustomerComponent,
+    canActivate: [NgxFeatureToggleCanActivateGuard],
+    canActivateChild: [NgxFeatureToggleCanActivateChildGuard],
+    // This is the featureToggle configuration for
+    // the parent component
+    data: {
+      featureToggle: ['enableCustomerPage'],
+    },
+    children: [
+      {
+        path: ':id',
+        component: CustomerDetailComponent,
+        // This is the featureToggle configuration for
+        // the child component. It can also use
+        // a combination of feature toggles
+        data: {
+          featureToggle: ['enableCustomerPage', '!enableChildrenNavigation'],
+        },
+      },
+    ],
+  },
+];
+...
+```
+
+## Development
+
+### Run demo locally
+
+1. This project uses [Angular CLI](https://cli.angular.io/) as base. That means you just need to run `npm start` and access the link `http://localhost:4200` in your browser
+
+### Run tests
+
+1. Run `npm test` for run tests. In case you want to test using watch, please use `npm run tdd`
+
+### Publish
+
+this project is using `np` package to publish, which makes things straightforward. EX: `np <patch|minor|major> --contents=dist/ngx-feature-toggle`
+
+> For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)
+
+## Contribute
+
+For any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/ngx-feature-toggle/blob/master/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/ngx-feature-toggle/blob/master/CODE_OF_CONDUCT.md) files.
+
+## Author
+
+**Wilson Mendes (willmendesneto)**
+
+- <https://twitter.com/willmendesneto>
+- <http://github.com/willmendesneto>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234575

increased by10.57%

Number of package files

41

increased by7.89%

Number of lines in readme file

271

increased by984%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes