npm - feature-toggle-api - Versions diffs - 3.4.2 → 4.0.0 - Mend

feature-toggle-api 3.4.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/README.md +115 -96
package/dist/feature-toggle.d.ts +120 -0
package/dist/feature-toggle.js +388 -0
package/dist/feature-toggle.min.cjs +2 -0
package/dist/feature-toggle.min.cjs.map +1 -0
package/dist/feature-toggle.min.js +2 -0
package/dist/feature-toggle.min.js.map +1 -0
package/dist/feature-toggle.umd.min.js +2 -0
package/dist/feature-toggle.umd.min.js.map +1 -0
package/dist/html-plugin.umd.min.js +2 -0
package/dist/html-plugin.umd.min.js.map +1 -0
package/dist/url-plugin.umd.min.js +2 -0
package/dist/url-plugin.umd.min.js.map +1 -0
package/examples/01_basic_esmodule.js +10 -0
package/examples/02_basic_cjsmodule.cjs +6 -0
package/examples/{basic.html → 03_basic_scripttag.html} +3 -2
package/examples/{example-htmlplugin.html → 04_example-htmlplugin.html} +2 -2
package/examples/{example-urlplugin.html → 05_example-urlplugin.html} +2 -2
package/examples/{withListener.html → 06_withListener.html} +1 -1
package/package.json +32 -43
package/rollup.config.js +107 -0
package/src/{index.js → featureToggle.ts} +172 -51
package/src/index.ts +10 -0
package/src/plugins/htmlplugin/{plugin-html.js → plugin-html.ts} +22 -10
package/src/plugins/urlplugin/{plugin-url.js → plugin-url.ts} +36 -10
package/tests/featuretoggle.test.ts +407 -0
package/tests/polyfills.ts +20 -0
package/tsconfig.cjs.json +12 -0
package/tsconfig.json +12 -0
package/feature-toggle-api.js +0 -243
package/feature-toggle-api.min.js +0 -1
package/feature-toggle-api.module.js +0 -243
package/spec/support/index.spec.js +0 -378
package/spec/support/jasmine.json +0 -11
package/spec/support/polyfills.js +0 -6
package/src/index.cjs.js +0 -8

package/README.md CHANGED Viewed

@@ -58,24 +58,52 @@ Create a new project, type
 ``` shell
     npm install feature-toggle-api --save
 ```
-You want to include it as a scripttag? Here's a sample HTML-File.
+Use it in your script
+``` javascript
+import { useFeatureToggle } from "feature-toggle-api";
+//initialize it with your feature-flags
+const feature = useFeatureToggle({
+    a:true,
+});
+console.log(feature.isActive('a')); //true
+console.log(feature.isActive('c')); //false
+```
+You use commonjs-scripts? Here we go:
+``` javascript
+const { useFeatureToggle } = require("feature-toggle-api/dist/feature-toggle.cjs");
+//initialize it with your feature-flags
+const feature = useFeatureToggle({
+    a:true,
+});
+console.log(feature.isActive('a')); //true
+console.log(feature.isActive('c')); //false
+```
+Or you want to include it as a scripttag? Here's a sample HTML-File.
 ``` html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Basic Feature-Toggle-API-Test</title>
-    <script src="../feature-toggle-api.min.js"></script>
+    <script src="path/to/feature-toggle-api/dist/feature-toggle.umd.min.js"></script>
 </head>
 <body>
     <div class="feature1">This is text from feature1</div>
     <div class="feature2">This is text from feature2</div>
     <script>
-        var api = featuretoggleapi({
+        var api = useFeatureToggle({
             feature1: true
         });
-        var feature1Visible = api.isVisible('feature1');
-        var feature2Visible = api.isVisible('feature2');
+        var feature1Visible = api.isActive('feature1');
+        var feature2Visible = api.isActive('feature2');
         //here we could also use jquery or any other library,... The api has done its job.
         if(!feature1Visible) document.querySelector(".feature1").style.display = 'none';
@@ -84,23 +112,13 @@ You want to include it as a scripttag? Here's a sample HTML-File.
 </body>
 </html>
 ```
-You have a node-module? Nothing is easier then that:
-``` javascript
-var featuretoggleapi = require('feature-toggle-api');
-var api = featuretoggleapi({
-    feature1: true
-});
-var feature1Visible = api.isVisible('feature1');
-var feature2Visible = api.isVisible('feature2');
-//now you can do sth with the visibilities
-```
 ### Initialisation
 Initialisation is very simple
 ```javascript
 //This api has already initialized some visiblity rules:
-var api = new featuretoggleapi({
+var api = useFeatureToggle({
     feature1: true, //feature1 will be shown
     feature2: false, //feature2 won't be shown,
     // a rule can also be a function. important: it must return a boolean value; feature 3 would be shown
@@ -110,20 +128,20 @@ var api = new featuretoggleapi({
 });
 //You could also write it like this:
-var api = new featuretoggleapi();
-api.visibility('feature1',true);
-api.visibility('feature2',false);
-api.visibility('feature3',function(rule){return true});
-api.visibility('feature4',true);
-api.visibility('feature4','new',false);
+var api = useFeatureToggle();
+api.setFlag('feature1',true);
+api.setFlag('feature2',false);
+api.setFlag('feature3',function(rule){return true});
+api.setFlag('feature4',true);
+api.setFlag('feature4','new',false);
 //only possible via functioncall: pass some data; maybe necessary in the listener
-api.visibility('feature4','new',"some custom data",false);
+api.setFlag('feature4','new',"some custom data",false);
 ```
 Important: A visibilityrule mustn't start with an underscore. Attributes starting with an underscore are reserved for configuration settings.
 ```javascript
 //This api has already initialized some visiblity rules:
-var api = new featuretoggleapi({
+var api = useFeatureToggle({
     feature1: true,  //visibilityrule feature1 -> true
     plugins: true,   //visibilityrule plugins -> true
     _feature1: true, //_ is reserved for configuration -> this attribute does nothing
@@ -150,10 +168,10 @@ For the next examples we will imagine, the properties are mapped to the visibili
 ```javascript
 // shows Feature1
 //Feature2 is not configured, so it will be hidden
-api.visibility('feature1',true);
+api.setFlag('feature1',true);
 //Remember: you can also wrap it in functions - but the example above is better to read
-api.visibility('feature1',function ( rule) {
+api.setFlag('feature1',function ( rule) {
         //here would be some more complex logic, in this example we keep it simple
         return true;
 });
@@ -161,58 +179,58 @@ api.visibility('feature1',function ( rule) {
 ```javascript
 /*
     shows all features with name feature2, in this case:
-    api.isVisible('feature1') -> return false
-    api.isVisible('feature2') -> return true
-    api.isVisible('feature2','new') -> return true
-    api.isVisible('feature2','old') -> return true
-    api.isVisible('feature2','grumpfel') -> return true
+    api.isActive('feature1') -> return false
+    api.isActive('feature2') -> return true
+    api.isActive('feature2','new') -> return true
+    api.isActive('feature2','old') -> return true
+    api.isActive('feature2','grumpfel') -> return true
  */
-api.visibility('feature2', true);
+api.setFlag('feature2', true);
 /*
     This overwrites the rule above for "feature2", variant "new"
-    api.isVisible('feature1') -> return false
-    api.isVisible('feature2') -> return true - because of rule above
-    api.isVisible('feature2','new') -> return false
-    api.isVisible('feature2','old') -> return true
-    api.isVisible('feature2','grumpfel') -> return true
+    api.isActive('feature1') -> return false
+    api.isActive('feature2') -> return true - because of rule above
+    api.isActive('feature2','new') -> return false
+    api.isActive('feature2','old') -> return true
+    api.isActive('feature2','grumpfel') -> return true
 */
-api.visibility('feature2','new', false);
+api.setFlag('feature2','new', false);
 ```
 ```javascript
 /*
-    feature.isVisible('feature3','new','grumpfel'); //returns true
-    feature.isVisible('feature3','new','grumpfelbu'); //returns false
+    feature.isActive('feature3','new','grumpfel'); //returns true
+    feature.isActive('feature3','new','grumpfelbu'); //returns false
 */
-api.visibility('feature3','new', function (rule) {
+api.setFlag('feature3','new', function (rule) {
      //rule.data could also be an object or whatever you want
      //you could also use rule.name, rule.variant,...
       return rule.data == "grumpfel";
 });
 ```
 #### Default Visibility
-Bored of writing the same visibility rule again and again? Use defaultVisibility. This is the default-rule and will be overwritten by feature.visibility() - rules.
+Bored of writing the same visibility rule again and again? Use defaultFlag. This is the default-rule and will be overwritten by feature.setFlag() - rules.
 ``` javascript
-feature.defaultVisibility(function(rule){
+feature.setDefaultFlag(function(rule){
     return true;
 });
-feature.visibility('feature2', 'new', function(rule){
+feature.setFlag('feature2', 'new', function(rule){
     return false;
 });
 /*
-    "Feature2", variant "new" is overwritten, all other features have the defaultVisibility
-    api.isVisible('feature1') -> return true
-    api.isVisible('feature2') -> return true
-    api.isVisible('feature2','new') -> return false
-    api.isVisible('feature2','old') -> return true
-    api.isVisible('feature2','grumpfel') -> return true
+    "Feature2", variant "new" is overwritten, all other features have the defaultFlag
+    api.isActive('feature1') -> return true
+    api.isActive('feature2') -> return true
+    api.isActive('feature2','new') -> return false
+    api.isActive('feature2','old') -> return true
+    api.isActive('feature2','grumpfel') -> return true
 */
 ```
 You already want to initialize it in the constructor? No Problem.
 ```javascript
-    var api = new featuretoggleapi({
+    var api = useFeatureToggle({
     _default: true, //default visibility always returns true; again: this could also be a function
  });
 ```
@@ -226,7 +244,7 @@ This rule is always executed, before the other rules. When it returns false, the
    var globalConfig = { "feature2" : true }
 */
-feature.requiredVisibility(function(rule){
+feature.setRequiredFlag(function(rule){
     //In this case it returns true, when name == 'feture2'
     return globalConfig[rule.name] === true;
 });
@@ -234,48 +252,48 @@ feature.requiredVisibility(function(rule){
 /*
   feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
 */
-feature.visibility('feature2','new',function(rule){
+feature.setFlag('feature2','new',function(rule){
     return false;
 });
 /*
   feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
 */
-feature.visibility('feature3',function(rule){
+feature.setFlag('feature3',function(rule){
     return true;
 });
 /*
-    api.isVisible('feature2') -> return true
-    api.isVisible('feature2','new') -> return false
-    api.isVisible('feature2','old') -> return true
-    api.isVisible('feature2','grumpfel') -> return true
+    api.isActive('feature2') -> return true
+    api.isActive('feature2','new') -> return false
+    api.isActive('feature2','old') -> return true
+    api.isActive('feature2','grumpfel') -> return true
-    api.isVisible('feature3','new') -> return false
-    api.isVisible('feature3','old') -> return false
+    api.isActive('feature3','new') -> return false
+    api.isActive('feature3','old') -> return false
 */
 ```
 You already want to initialize it in the constructor? No Problem.
 ```javascript
-    var api = new featuretoggleapi({
+    var api = useFeatureToggle({
     _required: true, //default visibility always returns true; again: this could also be a function
  });
 ```
-#### Function isVisible
+#### Function isActive
 Example for this function:
 ```javascript
 // prooves if feature2 is visible
-var isVisible = feature.isVisible('feature2');
+var isActive = feature.isActive('feature2');
 // prooves if tag feature "feature2", variant "new" is visible
-var isVisible_new = feature.isVisible('feature2','new');
+var isActive_new = feature.isActive('feature2','new');
 // prooves if tag feature "feature2", variant "new" with data "grumpfl" is visible
-var isVisible_data = feature.isVisible('feature2','new','grumpfl');
+var isActive_data = feature.isActive('feature2','new','grumpfl');
 // prooves if tag feature "feature2" with data "grumpfl" is visible
-var isVisible_data_onlyname = feature.isVisible('feature2',null,'grumpfl');
+var isActive_data_onlyname = feature.isActive('feature2',null,'grumpfl');
 ```
 #### Function setData
@@ -290,17 +308,17 @@ if you want to update the data without updating the whole visibilityrule, use th
         console.log(rule.data);
     });
-    api.visibility('feature', 'variant','gruempfel',true); // logs 'gruempfel'
+    api.setFlag('feature', 'variant','gruempfel',true); // logs 'gruempfel'
     api.setData('feature','variant','newgruempfel');  // logs 'newgruempfel'
-    api.visibility('feature2', null,'gruempfel2',true);  // logs 'gruempfel2'
+    api.setFlag('feature2', null,'gruempfel2',true);  // logs 'gruempfel2'
     api.setData('feature2','newgruempfel2');  // logs 'newgruempfel2'
 ```
 #### Listeners
 If you want to 'watch' every initialisation of a visibility rule, you can append a watcher on it.
 ```javascript
-    var api = new featureToggleApi({feature: true});
-    api.visibility("feature2","variant","data",true);
+    var api = useFeatureToggle({feature: true});
+    api.setFlag("feature2","variant","data",true);
     //Calling the listener will also regard already added visibility rules
     //The result:
@@ -313,7 +331,7 @@ If you want to 'watch' every initialisation of a visibility rule, you can append
 You can also add custom events and triggers whenever you want.
 ```javascript
-    var api = new featureToggleApi();
+    var api = useFeatureToggle();
     api.on('customevent', function (param) {
         console.log("customevent " + param);
     });
@@ -359,7 +377,7 @@ Calling addPlugin() prevents you from from adding a plugin multiple times, so if
     //1st option: via constructor
     //Important: don't forget the _ in the property _plugins!!!
-    const api = featuretoggleapi({_plugins:[customFunctionPlugin]});
+    const api = useFeatureToggle({_plugins:[customFunctionPlugin]});
     //2nd option: via function
     api.addPlugin(customFunctionPlugin);
@@ -379,7 +397,7 @@ Here's the way, how to add parameters to your plugin
     //1st option: via constructor
     //Important: don't forget the _ in the property _plugins!!!
-    const api = featuretoggleapi({_plugins:[pluginWithParams('Peter')]});
+    const api = useFeatureToggle({_plugins:[pluginWithParams('Peter')]});
     //2nd option: via function
     api.addPlugin(pluginWithParams('Peter'));
@@ -391,7 +409,7 @@ Here's the way, how to add parameters to your plugin
 Imagine this following html-snippet:
 ```javascript
     /* Why is this ******* feature hidden? I checked the visibilityrule. It should be visible... */
-    api.isVisible('anamazingFeature') //returns false, but should return true... wtf???
+    api.isActive('anamazingFeature') //returns false, but should return true... wtf???
 ```
 All developers of the world agree with you, debugging sth like this is horrible. But don't worry, we have a perfect solution for it. And it's just one line of code.
 ```javascript
@@ -400,14 +418,14 @@ feature.showLogs(); //or feature.showLogs(true);
 This returns a log like the following:
 ```html
 Check Visibility of Feature "anAmazingFeature".
-The requiredVisibility rule returns false. This feature will be hidden.
+The requiredFlag rule returns false. This feature will be hidden.
 Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
-The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.
+The requiredFlag rule returns true. This feature will be shown when no other rule rejects it.
 No visibility rule found matching name and variant.
 No rules found for name anotherAmazingFeature without variants.
 No default rule found.
-Only the requiredVisibility rule was found. This returned true. => This feature will be visible.
+Only the requiredFlag rule was found. This returned true. => This feature will be visible.
 ```
 With this you don't have to waste your time with debugging the visibility state.
@@ -422,9 +440,10 @@ With this you don't have to waste your time with debugging the visibility state.
 ```javascript
 //initializes a visibilityrule and adds a plugin
-var api = new featuretoggleapi({
+var api = useFeatureToggle({
     feature1: true,
-    _plugins: []
+},{
+    plugins:[]
 })
 ```
@@ -441,19 +460,19 @@ Returns:
     nothing
 ```javascript
 //possible parameters
-api.visibility(name,result);
-api.visibility(name,variant,result);
-api.visibility(name,variant,data,result);
+api.setFlag(name,result);
+api.setFlag(name,variant,result);
+api.setFlag(name,variant,data,result);
 ```
 Example:
 ```javascript
 //possible parameters
-api.visibility('name',true);
-api.visibility('name','variant',true);
-api.visibility('name','variant','data',true);
+api.setFlag('name',true);
+api.setFlag('name','variant',true);
+api.setFlag('name','variant','data',true);
 //if result is a function
-api.visibility('name',function(rule){
+api.setFlag('name',function(rule){
     /*
     rule has the following parameters
         name: Name of the feature,
@@ -465,7 +484,7 @@ api.visibility('name',function(rule){
 });
 ```
-### isVisible
+### isActive
 Prooves if a function is visible.
 Parameters:
@@ -478,9 +497,9 @@ Returns:
 ```javascript
 //possible parameters
-api.isVisible(name);
-api.isVisible(name,variant);
-api.isVisible(name,variant,data);
+api.isActive(name);
+api.isActive(name,variant);
+api.isActive(name,variant,data);
 ```
 ### on
@@ -542,18 +561,18 @@ Returns
      api.setData(name,variant,data);
 ```
-### requiredVisibility
+### requiredFlag
 Sets the function for the required visibility.
 Parameters:
- - requiredVisibilityFunction
+ - requiredFlagFunction
 Returns:
  - nothing
 ```javascript
 //possible parameters
-api.requiredVisibility(function(rule){
+api.setRequiredFlag(function(rule){
     //do sth
     /* Parameters:
         event.name,
@@ -563,18 +582,18 @@ api.requiredVisibility(function(rule){
 });
 ```
-### defaultVisibility
+### defaultFlag
 Sets the function for the default visibility.
 Parameters:
- - defaultVisibilityFunction
+ - defaultFlagFunction
 Returns:
  - nothing
 ```javascript
 //possible parameters
-api.defaultVisibility(function(rule){
+api.setDefaultFlag(function(rule){
     //do sth
     /* Parameters:
         event.name,

package/dist/feature-toggle.d.ts ADDED Viewed

@@ -0,0 +1,120 @@
+interface URLPluginConfig {
+    useMockedWindow?: boolean;
+    url?: string;
+    prefix?: string;
+}
+declare global {
+    interface Window {
+        isMocked: boolean;
+    }
+}
+declare function urlPlugin(config?: URLPluginConfig): (api: any) => {
+    name: string;
+};
+type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
+interface HtmlPluginConfig {
+    renderedTag?: string;
+    featureTagName?: string;
+    tagAttributeName?: string;
+    nameAttributeName?: string;
+    variantAttributeName?: string;
+    dataAttributeName?: string;
+    displayAttributeName?: string;
+    defaultDisplay?: Display;
+}
+declare function htmlPlugin(config?: HtmlPluginConfig): (api: any) => {
+    name: string;
+};
+interface OnConfiguration {
+    ignorePreviousRules: boolean;
+}
+type Plugin = (api: any) => void;
+interface OnEvent {
+    name: string;
+    variant: string;
+    data: any;
+    result?: boolean;
+}
+type FirstCharOfFeatureFlagKey = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' |
+    'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+type FeatureFlagKey = `${FirstCharOfFeatureFlagKey}${string}`;
+interface FeatureToggleConfig {
+    [key: FeatureFlagKey]: boolean | (() => boolean);
+    $plugins?: Plugin[];
+    /**
+     * @deprecated Use key`$plugins` instead.
+     */
+    _plugins?: Plugin[];
+}
+interface Rule {
+    name: string;
+    variant: string;
+    data: any;
+    _internalCall?: true;
+    description?: string;
+}
+interface FeatureToggleApi {
+    name: string;
+    setData(name: string, dataParam?: any): void;
+    setData(name: string, variant: string, dataParam?: any): void;
+    setData(nameParam: string, variantOrDataParam: string | {
+        [key: string]: any;
+    }, dataParam?: any): void;
+    on(eventType: string, fn: (event: OnEvent) => void, config?: OnConfiguration): void;
+    trigger(eventtype: string, param?: any): any;
+    showLogs(showLogs?: boolean): void;
+    /**
+     * @deprecated Use `featureToggle.isActive` instead.
+     */
+    isVisible(name: string, variant?: string, data?: any): boolean;
+    isActive(name: string, variant?: string, data?: any): boolean;
+    /**
+     * @deprecated Use `featureToggle.setFlag` instead.
+     */
+    visibility(name: string, result: boolean | ((rule: Rule) => boolean)): void;
+    /**
+     * @deprecated Use `featureToggle.setFlag` instead.
+     */
+    visibility(name: string, variant: string | null, result: boolean | ((rule: Rule) => boolean)): void;
+    /**
+     * @deprecated Use `featureToggle.setFlag` instead.
+     */
+    visibility(name: string, variant: string | null, data: any, result: boolean | ((rule: Rule) => boolean)): void;
+    /**
+     * @deprecated Use `featureToggle.setFlag` instead.
+     */
+    visibility(name: string, resultOrVariant: string | null | boolean | ((rule: Rule) => boolean), resultOrData?: any, result?: boolean | (() => boolean)): void;
+    setFlag(name: string, result: boolean | ((rule: Rule) => boolean)): void;
+    setFlag(name: string, variant: string | null, result: boolean | ((rule: Rule) => boolean)): void;
+    setFlag(name: string, variant: string | null, data: any, result: boolean | ((rule: Rule) => boolean)): void;
+    setFlag(name: string, resultOrVariant: string | null | boolean | ((rule: Rule) => boolean), resultOrData?: any, result?: boolean | (() => boolean)): void;
+    /**
+     * @deprecated Use `featureToggle.setRequiredFlag` instead.
+     */
+    requiredVisibility(fn: boolean | ((result: Rule) => boolean)): void;
+    /**
+     * @deprecated Use `featureToggle.setDefaultFlag` instead.
+     */
+    defaultVisibility(fn: boolean | ((result: Rule) => boolean)): void;
+    /**
+     * This rule will run first and only if it is true, the feature.setFlag() - rules apply.
+     * In other words: if the required-rule returns false, all feature.setFlag-rules return false - regardless of its normal result.
+     * @param fn
+     */
+    setRequiredFlag(fn: boolean | ((result: Rule) => boolean)): void;
+    /**
+     * This is the default-rule and will be overwritten by feature.setFlag() - rules.
+     * In other words: If feature.setFlag == false, the result of the defaultRule applies.
+     * @param fn DefaultRule
+     */
+    setDefaultFlag(fn: boolean | ((result: Rule) => boolean)): void;
+    addPlugin(plugin: Plugin): any;
+}
+declare function useFeatureToggle(config?: FeatureToggleConfig): FeatureToggleApi;
+export { htmlPlugin, urlPlugin, useFeatureToggle };