feature-toggle-api 3.4.2 → 4.1.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.
- package/README.md +129 -103
- package/dist/feature-toggle.d.ts +134 -0
- package/{src/index.js → dist/feature-toggle.js} +193 -114
- 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/featureToggle.ts +466 -0
- 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 +450 -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
|
@@ -58,24 +58,52 @@ Create a new project, type
|
|
|
58
58
|
``` shell
|
|
59
59
|
npm install feature-toggle-api --save
|
|
60
60
|
```
|
|
61
|
-
|
|
61
|
+
|
|
62
|
+
Use it in your script
|
|
63
|
+
``` javascript
|
|
64
|
+
import { useFeatureToggle } from "feature-toggle-api";
|
|
65
|
+
|
|
66
|
+
//initialize it with your feature-flags
|
|
67
|
+
const feature = useFeatureToggle({
|
|
68
|
+
a:true,
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
console.log(feature.isActive('a')); //true
|
|
72
|
+
console.log(feature.isActive('c')); //false
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
You use commonjs-scripts? Here we go:
|
|
76
|
+
``` javascript
|
|
77
|
+
const { useFeatureToggle } = require("feature-toggle-api/dist/feature-toggle.cjs");
|
|
78
|
+
|
|
79
|
+
//initialize it with your feature-flags
|
|
80
|
+
const feature = useFeatureToggle({
|
|
81
|
+
a:true,
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
console.log(feature.isActive('a')); //true
|
|
85
|
+
console.log(feature.isActive('c')); //false
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
Or you want to include it as a scripttag? Here's a sample HTML-File.
|
|
62
90
|
``` html
|
|
63
91
|
<!DOCTYPE html>
|
|
64
92
|
<html lang="en">
|
|
65
93
|
<head>
|
|
66
94
|
<meta charset="UTF-8">
|
|
67
95
|
<title>Basic Feature-Toggle-API-Test</title>
|
|
68
|
-
<script src="
|
|
96
|
+
<script src="path/to/feature-toggle-api/dist/feature-toggle.umd.min.js"></script>
|
|
69
97
|
</head>
|
|
70
98
|
<body>
|
|
71
99
|
<div class="feature1">This is text from feature1</div>
|
|
72
100
|
<div class="feature2">This is text from feature2</div>
|
|
73
101
|
<script>
|
|
74
|
-
var api =
|
|
102
|
+
var api = useFeatureToggle({
|
|
75
103
|
feature1: true
|
|
76
104
|
});
|
|
77
|
-
var feature1Visible = api.
|
|
78
|
-
var feature2Visible = api.
|
|
105
|
+
var feature1Visible = api.isActive('feature1');
|
|
106
|
+
var feature2Visible = api.isActive('feature2');
|
|
79
107
|
|
|
80
108
|
//here we could also use jquery or any other library,... The api has done its job.
|
|
81
109
|
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.
|
|
|
84
112
|
</body>
|
|
85
113
|
</html>
|
|
86
114
|
```
|
|
87
|
-
You have a node-module? Nothing is easier then that:
|
|
88
|
-
``` javascript
|
|
89
|
-
var featuretoggleapi = require('feature-toggle-api');
|
|
90
|
-
var api = featuretoggleapi({
|
|
91
|
-
feature1: true
|
|
92
|
-
});
|
|
93
|
-
var feature1Visible = api.isVisible('feature1');
|
|
94
|
-
var feature2Visible = api.isVisible('feature2');
|
|
95
115
|
|
|
96
|
-
//now you can do sth with the visibilities
|
|
97
|
-
```
|
|
98
116
|
|
|
99
117
|
### Initialisation
|
|
100
118
|
Initialisation is very simple
|
|
101
119
|
```javascript
|
|
102
120
|
//This api has already initialized some visiblity rules:
|
|
103
|
-
var api =
|
|
121
|
+
var api = useFeatureToggle({
|
|
104
122
|
feature1: true, //feature1 will be shown
|
|
105
123
|
feature2: false, //feature2 won't be shown,
|
|
106
124
|
// a rule can also be a function. important: it must return a boolean value; feature 3 would be shown
|
|
@@ -110,24 +128,26 @@ var api = new featuretoggleapi({
|
|
|
110
128
|
});
|
|
111
129
|
|
|
112
130
|
//You could also write it like this:
|
|
113
|
-
var api =
|
|
114
|
-
api.
|
|
115
|
-
api.
|
|
116
|
-
api.
|
|
117
|
-
api.
|
|
118
|
-
api.
|
|
131
|
+
var api = useFeatureToggle();
|
|
132
|
+
api.setFlag('feature1',true);
|
|
133
|
+
api.setFlag('feature2',false);
|
|
134
|
+
api.setFlag('feature3',function(rule){return true});
|
|
135
|
+
api.setFlag('feature4',true);
|
|
136
|
+
api.setFlag('feature4','new',false);
|
|
119
137
|
//only possible via functioncall: pass some data; maybe necessary in the listener
|
|
120
|
-
api.
|
|
138
|
+
api.setFlag('feature4','new',"some custom data",false);
|
|
121
139
|
```
|
|
122
140
|
|
|
123
|
-
Important: A visibilityrule
|
|
141
|
+
Important: A visibilityrule must not start with an underscore or $. Both is reserved. Attributes starting with an it are reserved for configuration settings.
|
|
124
142
|
```javascript
|
|
125
143
|
//This api has already initialized some visiblity rules:
|
|
126
|
-
var api =
|
|
144
|
+
var api = useFeatureToggle({
|
|
127
145
|
feature1: true, //visibilityrule feature1 -> true
|
|
128
146
|
plugins: true, //visibilityrule plugins -> true
|
|
129
|
-
_feature1: true, //_ is reserved for configuration -> this attribute does nothing
|
|
130
|
-
_plugins: [], //_ is reserved for configuration -> add plugins
|
|
147
|
+
_feature1: true, //_ is reserved for configuration (deprecated)-> this attribute does nothing
|
|
148
|
+
_plugins: [], //_ is reserved for configuration -> add plugins (deprecated). use $plugins instead
|
|
149
|
+
|
|
150
|
+
$plugins: [], //$ is reserved for configuration -> add plugins
|
|
131
151
|
});
|
|
132
152
|
```
|
|
133
153
|
|
|
@@ -150,10 +170,10 @@ For the next examples we will imagine, the properties are mapped to the visibili
|
|
|
150
170
|
```javascript
|
|
151
171
|
// shows Feature1
|
|
152
172
|
//Feature2 is not configured, so it will be hidden
|
|
153
|
-
api.
|
|
173
|
+
api.setFlag('feature1',true);
|
|
154
174
|
|
|
155
175
|
//Remember: you can also wrap it in functions - but the example above is better to read
|
|
156
|
-
api.
|
|
176
|
+
api.setFlag('feature1',function ( rule) {
|
|
157
177
|
//here would be some more complex logic, in this example we keep it simple
|
|
158
178
|
return true;
|
|
159
179
|
});
|
|
@@ -161,58 +181,58 @@ api.visibility('feature1',function ( rule) {
|
|
|
161
181
|
```javascript
|
|
162
182
|
/*
|
|
163
183
|
shows all features with name feature2, in this case:
|
|
164
|
-
api.
|
|
165
|
-
api.
|
|
166
|
-
api.
|
|
167
|
-
api.
|
|
168
|
-
api.
|
|
184
|
+
api.isActive('feature1') -> return false
|
|
185
|
+
api.isActive('feature2') -> return true
|
|
186
|
+
api.isActive('feature2','new') -> return true
|
|
187
|
+
api.isActive('feature2','old') -> return true
|
|
188
|
+
api.isActive('feature2','grumpfel') -> return true
|
|
169
189
|
|
|
170
190
|
*/
|
|
171
|
-
api.
|
|
191
|
+
api.setFlag('feature2', true);
|
|
172
192
|
|
|
173
193
|
/*
|
|
174
194
|
This overwrites the rule above for "feature2", variant "new"
|
|
175
|
-
api.
|
|
176
|
-
api.
|
|
177
|
-
api.
|
|
178
|
-
api.
|
|
179
|
-
api.
|
|
195
|
+
api.isActive('feature1') -> return false
|
|
196
|
+
api.isActive('feature2') -> return true - because of rule above
|
|
197
|
+
api.isActive('feature2','new') -> return false
|
|
198
|
+
api.isActive('feature2','old') -> return true
|
|
199
|
+
api.isActive('feature2','grumpfel') -> return true
|
|
180
200
|
*/
|
|
181
|
-
api.
|
|
201
|
+
api.setFlag('feature2','new', false);
|
|
182
202
|
```
|
|
183
203
|
```javascript
|
|
184
204
|
/*
|
|
185
|
-
feature.
|
|
186
|
-
feature.
|
|
205
|
+
feature.isActive('feature3','new','grumpfel'); //returns true
|
|
206
|
+
feature.isActive('feature3','new','grumpfelbu'); //returns false
|
|
187
207
|
*/
|
|
188
|
-
api.
|
|
208
|
+
api.setFlag('feature3','new', function (rule) {
|
|
189
209
|
//rule.data could also be an object or whatever you want
|
|
190
210
|
//you could also use rule.name, rule.variant,...
|
|
191
211
|
return rule.data == "grumpfel";
|
|
192
212
|
});
|
|
193
213
|
```
|
|
194
214
|
#### Default Visibility
|
|
195
|
-
Bored of writing the same visibility rule again and again? Use
|
|
215
|
+
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.
|
|
196
216
|
``` javascript
|
|
197
|
-
feature.
|
|
217
|
+
feature.setDefaultFlag(function(rule){
|
|
198
218
|
return true;
|
|
199
219
|
});
|
|
200
220
|
|
|
201
|
-
feature.
|
|
221
|
+
feature.setFlag('feature2', 'new', function(rule){
|
|
202
222
|
return false;
|
|
203
223
|
});
|
|
204
224
|
/*
|
|
205
|
-
"Feature2", variant "new" is overwritten, all other features have the
|
|
206
|
-
api.
|
|
207
|
-
api.
|
|
208
|
-
api.
|
|
209
|
-
api.
|
|
210
|
-
api.
|
|
225
|
+
"Feature2", variant "new" is overwritten, all other features have the defaultFlag
|
|
226
|
+
api.isActive('feature1') -> return true
|
|
227
|
+
api.isActive('feature2') -> return true
|
|
228
|
+
api.isActive('feature2','new') -> return false
|
|
229
|
+
api.isActive('feature2','old') -> return true
|
|
230
|
+
api.isActive('feature2','grumpfel') -> return true
|
|
211
231
|
*/
|
|
212
232
|
```
|
|
213
233
|
You already want to initialize it in the constructor? No Problem.
|
|
214
234
|
```javascript
|
|
215
|
-
var api =
|
|
235
|
+
var api = useFeatureToggle({
|
|
216
236
|
_default: true, //default visibility always returns true; again: this could also be a function
|
|
217
237
|
});
|
|
218
238
|
```
|
|
@@ -226,7 +246,7 @@ This rule is always executed, before the other rules. When it returns false, the
|
|
|
226
246
|
var globalConfig = { "feature2" : true }
|
|
227
247
|
*/
|
|
228
248
|
|
|
229
|
-
feature.
|
|
249
|
+
feature.setRequiredFlag(function(rule){
|
|
230
250
|
//In this case it returns true, when name == 'feture2'
|
|
231
251
|
return globalConfig[rule.name] === true;
|
|
232
252
|
});
|
|
@@ -234,48 +254,48 @@ feature.requiredVisibility(function(rule){
|
|
|
234
254
|
/*
|
|
235
255
|
feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
|
|
236
256
|
*/
|
|
237
|
-
feature.
|
|
257
|
+
feature.setFlag('feature2','new',function(rule){
|
|
238
258
|
return false;
|
|
239
259
|
});
|
|
240
260
|
|
|
241
261
|
/*
|
|
242
262
|
feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
|
|
243
263
|
*/
|
|
244
|
-
feature.
|
|
264
|
+
feature.setFlag('feature3',function(rule){
|
|
245
265
|
return true;
|
|
246
266
|
});
|
|
247
267
|
|
|
248
268
|
/*
|
|
249
|
-
api.
|
|
250
|
-
api.
|
|
251
|
-
api.
|
|
252
|
-
api.
|
|
269
|
+
api.isActive('feature2') -> return true
|
|
270
|
+
api.isActive('feature2','new') -> return false
|
|
271
|
+
api.isActive('feature2','old') -> return true
|
|
272
|
+
api.isActive('feature2','grumpfel') -> return true
|
|
253
273
|
|
|
254
|
-
api.
|
|
255
|
-
api.
|
|
274
|
+
api.isActive('feature3','new') -> return false
|
|
275
|
+
api.isActive('feature3','old') -> return false
|
|
256
276
|
*/
|
|
257
277
|
```
|
|
258
278
|
You already want to initialize it in the constructor? No Problem.
|
|
259
279
|
```javascript
|
|
260
|
-
var api =
|
|
280
|
+
var api = useFeatureToggle({
|
|
261
281
|
_required: true, //default visibility always returns true; again: this could also be a function
|
|
262
282
|
});
|
|
263
283
|
```
|
|
264
284
|
|
|
265
|
-
#### Function
|
|
285
|
+
#### Function isActive
|
|
266
286
|
Example for this function:
|
|
267
287
|
```javascript
|
|
268
288
|
// prooves if feature2 is visible
|
|
269
|
-
var
|
|
289
|
+
var isActive = feature.isActive('feature2');
|
|
270
290
|
|
|
271
291
|
// prooves if tag feature "feature2", variant "new" is visible
|
|
272
|
-
var
|
|
292
|
+
var isActive_new = feature.isActive('feature2','new');
|
|
273
293
|
|
|
274
294
|
// prooves if tag feature "feature2", variant "new" with data "grumpfl" is visible
|
|
275
|
-
var
|
|
295
|
+
var isActive_data = feature.isActive('feature2','new','grumpfl');
|
|
276
296
|
|
|
277
297
|
// prooves if tag feature "feature2" with data "grumpfl" is visible
|
|
278
|
-
var
|
|
298
|
+
var isActive_data_onlyname = feature.isActive('feature2',null,'grumpfl');
|
|
279
299
|
```
|
|
280
300
|
|
|
281
301
|
#### Function setData
|
|
@@ -290,17 +310,17 @@ if you want to update the data without updating the whole visibilityrule, use th
|
|
|
290
310
|
console.log(rule.data);
|
|
291
311
|
});
|
|
292
312
|
|
|
293
|
-
api.
|
|
313
|
+
api.setFlag('feature', 'variant','gruempfel',true); // logs 'gruempfel'
|
|
294
314
|
api.setData('feature','variant','newgruempfel'); // logs 'newgruempfel'
|
|
295
|
-
api.
|
|
315
|
+
api.setFlag('feature2', null,'gruempfel2',true); // logs 'gruempfel2'
|
|
296
316
|
api.setData('feature2','newgruempfel2'); // logs 'newgruempfel2'
|
|
297
317
|
```
|
|
298
318
|
|
|
299
319
|
#### Listeners
|
|
300
320
|
If you want to 'watch' every initialisation of a visibility rule, you can append a watcher on it.
|
|
301
321
|
```javascript
|
|
302
|
-
var api =
|
|
303
|
-
api.
|
|
322
|
+
var api = useFeatureToggle({feature: true});
|
|
323
|
+
api.setFlag("feature2","variant","data",true);
|
|
304
324
|
|
|
305
325
|
//Calling the listener will also regard already added visibility rules
|
|
306
326
|
//The result:
|
|
@@ -313,7 +333,7 @@ If you want to 'watch' every initialisation of a visibility rule, you can append
|
|
|
313
333
|
|
|
314
334
|
You can also add custom events and triggers whenever you want.
|
|
315
335
|
```javascript
|
|
316
|
-
var api =
|
|
336
|
+
var api = useFeatureToggle();
|
|
317
337
|
api.on('customevent', function (param) {
|
|
318
338
|
console.log("customevent " + param);
|
|
319
339
|
});
|
|
@@ -354,12 +374,15 @@ Calling addPlugin() prevents you from from adding a plugin multiple times, so if
|
|
|
354
374
|
```javascript
|
|
355
375
|
function customFunctionPlugin(api){
|
|
356
376
|
//adds function customFunction to your api
|
|
357
|
-
|
|
377
|
+
|
|
378
|
+
return {
|
|
379
|
+
customFunction(){console.log('custom function created')}
|
|
380
|
+
}
|
|
358
381
|
}
|
|
359
382
|
|
|
360
383
|
//1st option: via constructor
|
|
361
384
|
//Important: don't forget the _ in the property _plugins!!!
|
|
362
|
-
const api =
|
|
385
|
+
const api = useFeatureToggle({_plugins:[customFunctionPlugin]});
|
|
363
386
|
|
|
364
387
|
//2nd option: via function
|
|
365
388
|
api.addPlugin(customFunctionPlugin);
|
|
@@ -373,13 +396,15 @@ Here's the way, how to add parameters to your plugin
|
|
|
373
396
|
{
|
|
374
397
|
return function (api){
|
|
375
398
|
//adds function customFunction to your api
|
|
376
|
-
|
|
399
|
+
return {
|
|
400
|
+
customFunction = function(){console.log('Hello ' + param1)}
|
|
401
|
+
}
|
|
377
402
|
}
|
|
378
403
|
}
|
|
379
404
|
|
|
380
405
|
//1st option: via constructor
|
|
381
406
|
//Important: don't forget the _ in the property _plugins!!!
|
|
382
|
-
const api =
|
|
407
|
+
const api = useFeatureToggle({$plugins:[pluginWithParams('Peter')]});
|
|
383
408
|
|
|
384
409
|
//2nd option: via function
|
|
385
410
|
api.addPlugin(pluginWithParams('Peter'));
|
|
@@ -391,7 +416,7 @@ Here's the way, how to add parameters to your plugin
|
|
|
391
416
|
Imagine this following html-snippet:
|
|
392
417
|
```javascript
|
|
393
418
|
/* Why is this ******* feature hidden? I checked the visibilityrule. It should be visible... */
|
|
394
|
-
api.
|
|
419
|
+
api.isActive('anamazingFeature') //returns false, but should return true... wtf???
|
|
395
420
|
```
|
|
396
421
|
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.
|
|
397
422
|
```javascript
|
|
@@ -400,14 +425,14 @@ feature.showLogs(); //or feature.showLogs(true);
|
|
|
400
425
|
This returns a log like the following:
|
|
401
426
|
```html
|
|
402
427
|
Check Visibility of Feature "anAmazingFeature".
|
|
403
|
-
The
|
|
428
|
+
The requiredFlag rule returns false. This feature will be hidden.
|
|
404
429
|
|
|
405
430
|
Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
|
|
406
|
-
The
|
|
431
|
+
The requiredFlag rule returns true. This feature will be shown when no other rule rejects it.
|
|
407
432
|
No visibility rule found matching name and variant.
|
|
408
433
|
No rules found for name anotherAmazingFeature without variants.
|
|
409
434
|
No default rule found.
|
|
410
|
-
Only the
|
|
435
|
+
Only the requiredFlag rule was found. This returned true. => This feature will be visible.
|
|
411
436
|
```
|
|
412
437
|
With this you don't have to waste your time with debugging the visibility state.
|
|
413
438
|
|
|
@@ -422,14 +447,15 @@ With this you don't have to waste your time with debugging the visibility state.
|
|
|
422
447
|
|
|
423
448
|
```javascript
|
|
424
449
|
//initializes a visibilityrule and adds a plugin
|
|
425
|
-
var api =
|
|
450
|
+
var api = useFeatureToggle({
|
|
426
451
|
feature1: true,
|
|
427
|
-
|
|
452
|
+
},{
|
|
453
|
+
plugins:[]
|
|
428
454
|
})
|
|
429
455
|
```
|
|
430
456
|
|
|
431
|
-
###
|
|
432
|
-
Adds a
|
|
457
|
+
### Flag
|
|
458
|
+
Adds a Flag.
|
|
433
459
|
|
|
434
460
|
Parameters:
|
|
435
461
|
- name: name of the feature; required; type string
|
|
@@ -441,19 +467,19 @@ Returns:
|
|
|
441
467
|
nothing
|
|
442
468
|
```javascript
|
|
443
469
|
//possible parameters
|
|
444
|
-
api.
|
|
445
|
-
api.
|
|
446
|
-
api.
|
|
470
|
+
api.setFlag(name,result);
|
|
471
|
+
api.setFlag(name,variant,result);
|
|
472
|
+
api.setFlag(name,variant,data,result);
|
|
447
473
|
```
|
|
448
474
|
Example:
|
|
449
475
|
```javascript
|
|
450
476
|
//possible parameters
|
|
451
|
-
api.
|
|
452
|
-
api.
|
|
453
|
-
api.
|
|
477
|
+
api.setFlag('name',true);
|
|
478
|
+
api.setFlag('name','variant',true);
|
|
479
|
+
api.setFlag('name','variant','data',true);
|
|
454
480
|
|
|
455
481
|
//if result is a function
|
|
456
|
-
api.
|
|
482
|
+
api.setFlag('name',function(rule){
|
|
457
483
|
/*
|
|
458
484
|
rule has the following parameters
|
|
459
485
|
name: Name of the feature,
|
|
@@ -465,7 +491,7 @@ api.visibility('name',function(rule){
|
|
|
465
491
|
});
|
|
466
492
|
```
|
|
467
493
|
|
|
468
|
-
###
|
|
494
|
+
### isActive
|
|
469
495
|
Prooves if a function is visible.
|
|
470
496
|
|
|
471
497
|
Parameters:
|
|
@@ -478,9 +504,9 @@ Returns:
|
|
|
478
504
|
|
|
479
505
|
```javascript
|
|
480
506
|
//possible parameters
|
|
481
|
-
api.
|
|
482
|
-
api.
|
|
483
|
-
api.
|
|
507
|
+
api.isActive(name);
|
|
508
|
+
api.isActive(name,variant);
|
|
509
|
+
api.isActive(name,variant,data);
|
|
484
510
|
```
|
|
485
511
|
|
|
486
512
|
### on
|
|
@@ -542,18 +568,18 @@ Returns
|
|
|
542
568
|
api.setData(name,variant,data);
|
|
543
569
|
```
|
|
544
570
|
|
|
545
|
-
###
|
|
571
|
+
### requiredFlag
|
|
546
572
|
Sets the function for the required visibility.
|
|
547
573
|
|
|
548
574
|
Parameters:
|
|
549
|
-
-
|
|
575
|
+
- requiredFlagFunction
|
|
550
576
|
|
|
551
577
|
Returns:
|
|
552
578
|
- nothing
|
|
553
579
|
|
|
554
580
|
```javascript
|
|
555
581
|
//possible parameters
|
|
556
|
-
api.
|
|
582
|
+
api.setRequiredFlag(function(rule){
|
|
557
583
|
//do sth
|
|
558
584
|
/* Parameters:
|
|
559
585
|
event.name,
|
|
@@ -563,18 +589,18 @@ api.requiredVisibility(function(rule){
|
|
|
563
589
|
});
|
|
564
590
|
```
|
|
565
591
|
|
|
566
|
-
###
|
|
592
|
+
### defaultFlag
|
|
567
593
|
Sets the function for the default visibility.
|
|
568
594
|
|
|
569
595
|
Parameters:
|
|
570
|
-
-
|
|
596
|
+
- defaultFlagFunction
|
|
571
597
|
|
|
572
598
|
Returns:
|
|
573
599
|
- nothing
|
|
574
600
|
|
|
575
601
|
```javascript
|
|
576
602
|
//possible parameters
|
|
577
|
-
api.
|
|
603
|
+
api.setDefaultFlag(function(rule){
|
|
578
604
|
//do sth
|
|
579
605
|
/* Parameters:
|
|
580
606
|
event.name,
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
interface URLPluginConfig {
|
|
2
|
+
useMockedWindow?: boolean;
|
|
3
|
+
url?: string;
|
|
4
|
+
prefix?: string;
|
|
5
|
+
}
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
isMocked: boolean;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
declare function urlPlugin(config?: URLPluginConfig): (api: any) => {
|
|
12
|
+
name: string;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
|
|
16
|
+
interface HtmlPluginConfig {
|
|
17
|
+
renderedTag?: string;
|
|
18
|
+
featureTagName?: string;
|
|
19
|
+
tagAttributeName?: string;
|
|
20
|
+
nameAttributeName?: string;
|
|
21
|
+
variantAttributeName?: string;
|
|
22
|
+
dataAttributeName?: string;
|
|
23
|
+
displayAttributeName?: string;
|
|
24
|
+
defaultDisplay?: Display;
|
|
25
|
+
}
|
|
26
|
+
declare function htmlPlugin(config?: HtmlPluginConfig): (api: any) => {
|
|
27
|
+
name: string;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
interface OnConfiguration {
|
|
31
|
+
ignorePreviousRules: boolean;
|
|
32
|
+
}
|
|
33
|
+
type Plugin = (api: any) => Partial<FeatureToggleApi>;
|
|
34
|
+
type EventType = 'visibilityrule' | 'init' | 'registerEvent' | string;
|
|
35
|
+
interface OnEvent {
|
|
36
|
+
name: string;
|
|
37
|
+
variant: string;
|
|
38
|
+
data: any;
|
|
39
|
+
result?: boolean;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
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' |
|
|
43
|
+
'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
|
|
44
|
+
|
|
45
|
+
type FeatureFlagKey = `${FirstCharOfFeatureFlagKey}${string}`;
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
type FeatureFlag = boolean | ((rule: Rule) => boolean);
|
|
49
|
+
interface FeatureToggleConfig {
|
|
50
|
+
[key: FeatureFlagKey]: FeatureFlag;
|
|
51
|
+
$plugins?: Plugin[];
|
|
52
|
+
/**
|
|
53
|
+
* @deprecated Use key`$plugins` instead.
|
|
54
|
+
*/
|
|
55
|
+
_plugins?: Plugin[];
|
|
56
|
+
/**
|
|
57
|
+
* This rule will always run before the main rule.
|
|
58
|
+
* If it returns false, the main rules will be skipped and false is returned
|
|
59
|
+
*/
|
|
60
|
+
$required?: FeatureFlag;
|
|
61
|
+
/**
|
|
62
|
+
* This rule will always run after the main rule.
|
|
63
|
+
* If the main rule returns false, the result of the default rule will be taken.s
|
|
64
|
+
*/
|
|
65
|
+
$default?: FeatureFlag;
|
|
66
|
+
}
|
|
67
|
+
interface Rule {
|
|
68
|
+
name: string;
|
|
69
|
+
variant: string;
|
|
70
|
+
data: any;
|
|
71
|
+
_internalCall?: true;
|
|
72
|
+
description?: string;
|
|
73
|
+
}
|
|
74
|
+
interface FeatureToggleApiBase {
|
|
75
|
+
name: string;
|
|
76
|
+
setData(name: string, dataParam?: any): void;
|
|
77
|
+
setData(name: string, variant: string, dataParam?: any): void;
|
|
78
|
+
setData(nameParam: string, variantOrDataParam: string | {
|
|
79
|
+
[key: string]: any;
|
|
80
|
+
}, dataParam?: any): void;
|
|
81
|
+
on(eventType: EventType, fn: (event: OnEvent) => void, config?: OnConfiguration): void;
|
|
82
|
+
trigger(eventtype: EventType, param?: any): any;
|
|
83
|
+
showLogs(showLogs?: boolean): void;
|
|
84
|
+
/**
|
|
85
|
+
* @deprecated Use `featureToggle.isActive` instead.
|
|
86
|
+
*/
|
|
87
|
+
isVisible(name: string, variant?: string, data?: any): boolean;
|
|
88
|
+
isActive(name: string, variant?: string, data?: any): boolean;
|
|
89
|
+
/**
|
|
90
|
+
* @deprecated Use `featureToggle.setFlag` instead.
|
|
91
|
+
*/
|
|
92
|
+
visibility(name: string, result: boolean | ((rule: Rule) => boolean)): void;
|
|
93
|
+
/**
|
|
94
|
+
* @deprecated Use `featureToggle.setFlag` instead.
|
|
95
|
+
*/
|
|
96
|
+
visibility(name: string, variant: string | null, result: boolean | ((rule: Rule) => boolean)): void;
|
|
97
|
+
/**
|
|
98
|
+
* @deprecated Use `featureToggle.setFlag` instead.
|
|
99
|
+
*/
|
|
100
|
+
visibility(name: string, variant: string | null, data: any, result: boolean | ((rule: Rule) => boolean)): void;
|
|
101
|
+
/**
|
|
102
|
+
* @deprecated Use `featureToggle.setFlag` instead.
|
|
103
|
+
*/
|
|
104
|
+
visibility(name: string, resultOrVariant: string | null | boolean | ((rule: Rule) => boolean), resultOrData?: any, result?: boolean | (() => boolean)): void;
|
|
105
|
+
setFlag(name: string, result: boolean | ((rule: Rule) => boolean)): void;
|
|
106
|
+
setFlag(name: string, variant: string | null, result: boolean | ((rule: Rule) => boolean)): void;
|
|
107
|
+
setFlag(name: string, variant: string | null, data: any, result: boolean | ((rule: Rule) => boolean)): void;
|
|
108
|
+
setFlag(name: string, resultOrVariant: string | null | boolean | ((rule: Rule) => boolean), resultOrData?: any, result?: boolean | (() => boolean)): void;
|
|
109
|
+
/**
|
|
110
|
+
* @deprecated Use `featureToggle.setRequiredFlag` instead.
|
|
111
|
+
*/
|
|
112
|
+
requiredVisibility(fn: boolean | ((result: Rule) => boolean)): void;
|
|
113
|
+
/**
|
|
114
|
+
* @deprecated Use `featureToggle.setDefaultFlag` instead.
|
|
115
|
+
*/
|
|
116
|
+
defaultVisibility(fn: boolean | ((result: Rule) => boolean)): void;
|
|
117
|
+
/**
|
|
118
|
+
* This rule will run first and only if it is true, the feature.setFlag() - rules apply.
|
|
119
|
+
* In other words: if the required-rule returns false, all feature.setFlag-rules return false - regardless of its normal result.
|
|
120
|
+
* @param fn
|
|
121
|
+
*/
|
|
122
|
+
setRequiredFlag(fn: boolean | ((result: Rule) => boolean)): void;
|
|
123
|
+
/**
|
|
124
|
+
* This is the default-rule and will be overwritten by feature.setFlag() - rules.
|
|
125
|
+
* In other words: If feature.setFlag == false, the result of the defaultRule applies.
|
|
126
|
+
* @param fn DefaultRule
|
|
127
|
+
*/
|
|
128
|
+
setDefaultFlag(fn: boolean | ((result: Rule) => boolean)): void;
|
|
129
|
+
addPlugin(plugin: Plugin): any;
|
|
130
|
+
}
|
|
131
|
+
type FeatureToggleApi = FeatureToggleApiBase & Record<string, any>;
|
|
132
|
+
declare function useFeatureToggle(config?: FeatureToggleConfig): FeatureToggleApi;
|
|
133
|
+
|
|
134
|
+
export { htmlPlugin, urlPlugin, useFeatureToggle };
|