feature-toggle-api 4.1.0 → 5.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.
- package/LICENSE +1 -1
- package/README.md +14 -16
- package/dist/feature-toggle.js +227 -385
- package/dist/feature-toggle.js.map +1 -0
- package/dist/featureToggle.d.ts +3 -0
- package/dist/html-plugin.js +42 -0
- package/dist/html-plugin.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/plugins/htmlplugin/plugin-html.d.ts +15 -0
- package/dist/plugins/urlplugin/plugin-url.d.ts +14 -0
- package/dist/{feature-toggle.d.ts → types.d.ts} +17 -54
- package/dist/url-plugin.js +40 -0
- package/dist/url-plugin.js.map +1 -0
- package/dist/vite.config.d.ts +2 -0
- package/package.json +26 -11
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -17
- package/dist/feature-toggle.min.cjs +0 -2
- package/dist/feature-toggle.min.cjs.map +0 -1
- package/dist/feature-toggle.min.js +0 -2
- package/dist/feature-toggle.min.js.map +0 -1
- package/dist/feature-toggle.umd.min.js +0 -2
- package/dist/feature-toggle.umd.min.js.map +0 -1
- package/dist/html-plugin.umd.min.js +0 -2
- package/dist/html-plugin.umd.min.js.map +0 -1
- package/dist/url-plugin.umd.min.js +0 -2
- package/dist/url-plugin.umd.min.js.map +0 -1
- package/docs/_config.yml +0 -1
- package/docs/example-intro.html +0 -75
- package/docs/example-setup.html +0 -55
- package/docs/example-visibility-basic.html +0 -144
- package/docs/readme.md +0 -628
- package/docs/vue-feature-toggle.min.js +0 -902
- package/examples/01_basic_esmodule.js +0 -10
- package/examples/02_basic_cjsmodule.cjs +0 -6
- package/examples/03_basic_scripttag.html +0 -24
- package/examples/04_example-htmlplugin.html +0 -35
- package/examples/05_example-urlplugin.html +0 -25
- package/examples/06_withListener.html +0 -21
- package/gulpfile.js +0 -65
- package/plugin-html.js +0 -1
- package/plugin-url.js +0 -1
- package/rollup.config.js +0 -107
- package/src/featureToggle.ts +0 -466
- package/src/index.ts +0 -10
- package/src/plugins/htmlplugin/plugin-html.ts +0 -83
- package/src/plugins/htmlplugin/readme.md +0 -221
- package/src/plugins/urlplugin/plugin-url.ts +0 -90
- package/src/plugins/urlplugin/readme.md +0 -92
- package/tests/featuretoggle.test.ts +0 -450
- package/tests/polyfills.ts +0 -20
- package/tsconfig.cjs.json +0 -12
- package/tsconfig.json +0 -12
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
# HTML-Plugin
|
|
2
|
-
|
|
3
|
-
Use Feature-Tags in the html to show / hide features depending on the visibility rules.
|
|
4
|
-
Watch the [example](https://github.com/bassdman/feature-toggle-api/blob/master/examples/example-htmlplugin.html) as an example.
|
|
5
|
-
|
|
6
|
-
## Usage
|
|
7
|
-
|
|
8
|
-
### Basic usage
|
|
9
|
-
```html
|
|
10
|
-
<html lang="en">
|
|
11
|
-
<head>
|
|
12
|
-
<title>HTML-Plugin Minimal example</title>
|
|
13
|
-
<script src="../../../feature-toggle-api.min.js"></script>
|
|
14
|
-
<script src="../../../plugin-html.js"></script>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<!-- The name property is required -->
|
|
18
|
-
<feature name="feature1">This is "Feature1"</feature>
|
|
19
|
-
<feature name="feature2">This is "Feature2"</feature>
|
|
20
|
-
<feature name="feature3" variant="new" data='{"text":"grumpfel"}'>
|
|
21
|
-
This "Feature3" with variant "old" has some Data.
|
|
22
|
-
</feature>
|
|
23
|
-
<script>
|
|
24
|
-
var api = featuretoggleapi({
|
|
25
|
-
"feature2": true,
|
|
26
|
-
_plugins: [htmlplugin()]
|
|
27
|
-
});
|
|
28
|
-
api.visibility("feature3",function(rule){
|
|
29
|
-
return rule.data.text == 'grumpfel';
|
|
30
|
-
})
|
|
31
|
-
</script>
|
|
32
|
-
</body>
|
|
33
|
-
</html>
|
|
34
|
-
```
|
|
35
|
-
This example will show feature2 and feature3 and hide feature1.
|
|
36
|
-
|
|
37
|
-
These feature tags will be rendered to:
|
|
38
|
-
```html
|
|
39
|
-
<div _feature="true" name="feature1" style="display:none">This is "Feature1"</div>
|
|
40
|
-
<div _feature="true" name="feature2" style="display:block">This is "Feature2"</div>
|
|
41
|
-
<div _feature="true" name="feature3" variant="new" data='{"text":"grumpfel"}' style="display:block">
|
|
42
|
-
This "Feature3" with variant "old" has some Data.
|
|
43
|
-
</div>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Modify rendered tag
|
|
47
|
-
If div-elements already have unwanted styles due to legacy code, you can choose a custom rendered tag. You can do this in two ways:
|
|
48
|
-
|
|
49
|
-
#### Attribute tag
|
|
50
|
-
```html
|
|
51
|
-
<feature name="feature1" tag="span">This is "Feature1"</feature>
|
|
52
|
-
<feature name="feature2">This is "Feature2"</feature>
|
|
53
|
-
```
|
|
54
|
-
will be rendered to:
|
|
55
|
-
```html
|
|
56
|
-
<span _feature="true" tag="h1" name="feature1" style="display:none">This is "Feature1"</span>
|
|
57
|
-
<div _feature="true" name="feature2" style="display:block">This is "Feature2"</div>
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
#### Config attribute
|
|
61
|
-
```html
|
|
62
|
-
<feature name="feature1">This is "Feature1"</feature>
|
|
63
|
-
<feature name="feature2">This is "Feature2"</feature>
|
|
64
|
-
<script>
|
|
65
|
-
var api = featuretoggleapi({
|
|
66
|
-
_plugins: [htmlplugin({
|
|
67
|
-
renderedTag: 'span'
|
|
68
|
-
},
|
|
69
|
-
feature2: true
|
|
70
|
-
)]
|
|
71
|
-
});
|
|
72
|
-
</script>
|
|
73
|
-
```
|
|
74
|
-
will be rendered to:
|
|
75
|
-
```html
|
|
76
|
-
<span _feature="true" name="feature1" style="display:none">This is "Feature1"</span>
|
|
77
|
-
<span _feature="true" name="feature2" style="display:block">This is "Feature2"</span>
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
### Modify display attribute
|
|
81
|
-
Maybe display:block is not what you want for visible features. Maybe display:inline is better for you. Configure it.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
#### Attribute tag
|
|
86
|
-
```html
|
|
87
|
-
<feature name="feature1">This is "Feature1"</feature>
|
|
88
|
-
<feature name="feature2" display="inline">This is "Feature2"</feature>
|
|
89
|
-
```
|
|
90
|
-
will be rendered to:
|
|
91
|
-
```html
|
|
92
|
-
<div _feature="true" tag="h1" name="feature1" style="display:none">This is "Feature1"</div>
|
|
93
|
-
<div _feature="true" name="feature2" style="display:inline">This is "Feature2"</div>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
#### Config attribute
|
|
97
|
-
```html
|
|
98
|
-
<feature name="feature1">This is "Feature1"</feature>
|
|
99
|
-
<feature name="feature2">This is "Feature2"</feature>
|
|
100
|
-
<script>
|
|
101
|
-
var api = featuretoggleapi({
|
|
102
|
-
_plugins: [htmlplugin({
|
|
103
|
-
defaultDisplay: 'inline'
|
|
104
|
-
},
|
|
105
|
-
feature2: true
|
|
106
|
-
)]
|
|
107
|
-
});
|
|
108
|
-
</script>
|
|
109
|
-
```
|
|
110
|
-
will be rendered to:
|
|
111
|
-
```html
|
|
112
|
-
<span _feature="true" name="feature1" style="display:none">This is "Feature1"</span>
|
|
113
|
-
<span _feature="true" name="feature2" style="display:inline">This is "Feature2"</span>
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
### Modify tag names
|
|
118
|
-
The following config attributes are only needed, if an external script creates unexpected behaviours due to the feature tags (because it maybe watches attributes with name "display" or "name").
|
|
119
|
-
So you can modify the names of the tags / attributes.
|
|
120
|
-
|
|
121
|
-
#### featureTagName
|
|
122
|
-
``` html
|
|
123
|
-
<script>
|
|
124
|
-
var api = featuretoggleapi({
|
|
125
|
-
_plugins: [htmlplugin({
|
|
126
|
-
featureTagName: 'customTag'
|
|
127
|
-
},
|
|
128
|
-
)]
|
|
129
|
-
});
|
|
130
|
-
</script>
|
|
131
|
-
<!-- Without featureTagName set -->
|
|
132
|
-
<feature name="xyz"><!-- some html--></feature>
|
|
133
|
-
|
|
134
|
-
<!-- With featureTagName set -->
|
|
135
|
-
<customTag name="xyz"><!-- some html--></customTag>
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
#### nameAttributeName
|
|
139
|
-
``` html
|
|
140
|
-
<script>
|
|
141
|
-
var api = featuretoggleapi({
|
|
142
|
-
_plugins: [htmlplugin({
|
|
143
|
-
nameAttributeName: 'customName'
|
|
144
|
-
},
|
|
145
|
-
)]
|
|
146
|
-
});
|
|
147
|
-
</script>
|
|
148
|
-
<!-- Without nameAttributeName set -->
|
|
149
|
-
<feature name="xyz"><!-- some html--></feature>
|
|
150
|
-
|
|
151
|
-
<!-- With nameAttributeName set -->
|
|
152
|
-
<feature customName="xyz"><!-- some html--></feature>
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
#### variantAttributeName
|
|
156
|
-
``` html
|
|
157
|
-
<script>
|
|
158
|
-
var api = featuretoggleapi({
|
|
159
|
-
_plugins: [htmlplugin({
|
|
160
|
-
variantAttributeName: 'customVariant'
|
|
161
|
-
},
|
|
162
|
-
)]
|
|
163
|
-
});
|
|
164
|
-
</script>
|
|
165
|
-
<!-- Without variantAttributeName set -->
|
|
166
|
-
<feature name="xyz" variant="abc"><!-- some html--></feature>
|
|
167
|
-
|
|
168
|
-
<!-- With variantAttributeName set -->
|
|
169
|
-
<feature name="xyz" customVariant="abc"><!-- some html--></feature>
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
#### dataAttributeName
|
|
173
|
-
``` html
|
|
174
|
-
<script>
|
|
175
|
-
var api = featuretoggleapi({
|
|
176
|
-
_plugins: [htmlplugin({
|
|
177
|
-
dataAttributeName: 'customData'
|
|
178
|
-
},
|
|
179
|
-
)]
|
|
180
|
-
});
|
|
181
|
-
</script>
|
|
182
|
-
<!-- Without dataAttributeName set -->
|
|
183
|
-
<feature name="xyz" data="somedata"><!-- some html--></feature>
|
|
184
|
-
|
|
185
|
-
<!-- With dataAttributeName set -->
|
|
186
|
-
<feature customName="xyz" customData="somedata"><!-- some html--></feature>
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
#### tagAttributeName
|
|
190
|
-
``` html
|
|
191
|
-
<script>
|
|
192
|
-
var api = featuretoggleapi({
|
|
193
|
-
_plugins: [htmlplugin({
|
|
194
|
-
tagAttributeName: 'customTag'
|
|
195
|
-
},
|
|
196
|
-
)]
|
|
197
|
-
});
|
|
198
|
-
</script>
|
|
199
|
-
<!-- Without tagAttributeName set -->
|
|
200
|
-
<feature name="xyz" tag="span"><!-- some html--></feature>
|
|
201
|
-
|
|
202
|
-
<!-- With tagAttributeName set -->
|
|
203
|
-
<feature name="xyz" customTag="span"><!-- some html--></feature>
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
#### displayAttributeName
|
|
207
|
-
``` html
|
|
208
|
-
<script>
|
|
209
|
-
var api = featuretoggleapi({
|
|
210
|
-
_plugins: [htmlplugin({
|
|
211
|
-
displayAttributeName: 'customDisplay'
|
|
212
|
-
},
|
|
213
|
-
)]
|
|
214
|
-
});
|
|
215
|
-
</script>
|
|
216
|
-
<!-- Without displayAttributeName set -->
|
|
217
|
-
<feature name="xyz" display="inline"><!-- some html--></feature>
|
|
218
|
-
|
|
219
|
-
<!-- With displayAttributeName set -->
|
|
220
|
-
<feature name="xyz" customDisplay="inline"><!-- some html--></feature>
|
|
221
|
-
```
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
interface URLPluginConfig{
|
|
2
|
-
useMockedWindow?: boolean,
|
|
3
|
-
url?: string,
|
|
4
|
-
prefix?: string
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
function useWindowMock(){
|
|
9
|
-
return {
|
|
10
|
-
isMocked: true,
|
|
11
|
-
decodeURIComponent:function(param1){
|
|
12
|
-
return param1;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
declare global {
|
|
18
|
-
interface Window {
|
|
19
|
-
isMocked: boolean
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
declare var window: Window;
|
|
24
|
-
|
|
25
|
-
function parseValue(value){
|
|
26
|
-
if(value === 'true')
|
|
27
|
-
return true;
|
|
28
|
-
return false;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function getParams(url,window) {
|
|
32
|
-
var params = {};
|
|
33
|
-
if (!url)
|
|
34
|
-
return [];
|
|
35
|
-
|
|
36
|
-
var urlparts = url.split("?");
|
|
37
|
-
|
|
38
|
-
//no params available for url
|
|
39
|
-
if(urlparts.length < 2)
|
|
40
|
-
return [];
|
|
41
|
-
|
|
42
|
-
const parts = urlparts[1].split('&');
|
|
43
|
-
|
|
44
|
-
parts.forEach(function (part) {
|
|
45
|
-
var pair = part.split('=');
|
|
46
|
-
pair[0] = window.decodeURIComponent(pair[0]);
|
|
47
|
-
pair[1] = parseValue(window.decodeURIComponent(pair[1]));
|
|
48
|
-
params[pair[0]] = (pair[1] !== 'undefined') ?
|
|
49
|
-
pair[1] : true;
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
return params;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function urlPlugin(config: URLPluginConfig={}) {
|
|
56
|
-
let _window;
|
|
57
|
-
|
|
58
|
-
if(config.useMockedWindow)
|
|
59
|
-
_window = useWindowMock();
|
|
60
|
-
else
|
|
61
|
-
_window = window;
|
|
62
|
-
|
|
63
|
-
config = Object.assign({},{
|
|
64
|
-
url: _window.isMocked ? "" : _window.location.href,
|
|
65
|
-
prefix: ""
|
|
66
|
-
},config);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
return function(api){
|
|
71
|
-
api.url = config.url;
|
|
72
|
-
const urlparams = getParams(config.url,_window);
|
|
73
|
-
const prefix = config.prefix;
|
|
74
|
-
|
|
75
|
-
Object.keys(urlparams).forEach(key => {
|
|
76
|
-
if(!key.startsWith(prefix))
|
|
77
|
-
return;
|
|
78
|
-
|
|
79
|
-
const keyWithoutPrefix = key.replace(prefix,"");
|
|
80
|
-
api.visibility(keyWithoutPrefix,urlparams[key]);
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
return {name: 'urlplugin'};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export {
|
|
89
|
-
urlPlugin
|
|
90
|
-
}
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
# URL-Plugin
|
|
2
|
-
|
|
3
|
-
This plugin maps url-parameters to features.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
### Basic usage
|
|
8
|
-
```html
|
|
9
|
-
URL: http://adomain.com?feature1=true&feature2=false&feature3=true
|
|
10
|
-
|
|
11
|
-
<html lang="en">
|
|
12
|
-
<head>
|
|
13
|
-
<title>URL-Plugin Test</title>
|
|
14
|
-
<script src="../feature-toggle-api.js"></script>
|
|
15
|
-
<script src="../plugin-url.js"></script>
|
|
16
|
-
</head>
|
|
17
|
-
<body>
|
|
18
|
-
<script>
|
|
19
|
-
var api = featuretoggleapi({
|
|
20
|
-
_plugins: [urlplugin()]
|
|
21
|
-
});
|
|
22
|
-
api.isVisible("feature1") // true
|
|
23
|
-
api.isVisible("feature2") // false
|
|
24
|
-
api.isVisible("feature3") // true
|
|
25
|
-
</script>
|
|
26
|
-
</body>
|
|
27
|
-
</html>
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Custom URL
|
|
31
|
-
If you want to use a custom url, not the page-url, then set the url in the urlplugin-config.
|
|
32
|
-
```html
|
|
33
|
-
URL: http://adomain.com?feature1=true&feature2=false&feature3=true
|
|
34
|
-
|
|
35
|
-
<html lang="en">
|
|
36
|
-
<head>
|
|
37
|
-
<title>URL-Plugin Test</title>
|
|
38
|
-
<script src="../feature-toggle-api.js"></script>
|
|
39
|
-
<script src="../plugin-url.js"></script>
|
|
40
|
-
</head>
|
|
41
|
-
<body>
|
|
42
|
-
<script>
|
|
43
|
-
var api = featuretoggleapi({
|
|
44
|
-
_plugins: [urlplugin({
|
|
45
|
-
url: "http://anotherdomain.com?feature1=true&feature2=false&feature3=true"
|
|
46
|
-
})]
|
|
47
|
-
});
|
|
48
|
-
api.isVisible("feature1") // true
|
|
49
|
-
api.isVisible("feature2") // false
|
|
50
|
-
api.isVisible("feature3") // true
|
|
51
|
-
</script>
|
|
52
|
-
</body>
|
|
53
|
-
</html>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Custom parameters
|
|
57
|
-
Maybe you don't want all parameters to be regarded as features because they're used for anything else.
|
|
58
|
-
But you can define a prefix. All urlparameters starting with this prefix are regarded as feature-parameters.
|
|
59
|
-
|
|
60
|
-
Example:
|
|
61
|
-
<ul>
|
|
62
|
-
<li>prefix is "_"</li>
|
|
63
|
-
<li>url is http://adomain.com?feature1=true&feature2=false&_feature3=true</li>
|
|
64
|
-
<li>feature1 -> false (no _ before urlparameter)</li>
|
|
65
|
-
<li>feature2 -> false (no _ before urlparameter)</li>
|
|
66
|
-
<li>feature3 -> true (_ before urlparameter)</li>
|
|
67
|
-
</ul>
|
|
68
|
-
|
|
69
|
-
```html
|
|
70
|
-
URL: http://adomain.com?feature1=true&feature2=false&feature3=true
|
|
71
|
-
|
|
72
|
-
<html lang="en">
|
|
73
|
-
<head>
|
|
74
|
-
<title>URL-Plugin Test</title>
|
|
75
|
-
<script src="../feature-toggle-api.js"></script>
|
|
76
|
-
<script src="../plugin-url.js"></script>
|
|
77
|
-
</head>
|
|
78
|
-
<body>
|
|
79
|
-
<script>
|
|
80
|
-
var api = featuretoggleapi({
|
|
81
|
-
_plugins: [urlplugin({
|
|
82
|
-
url: "http://anotherdomain.com?feature1=true&feature2=false&_feature3=true",
|
|
83
|
-
prefix: "_"
|
|
84
|
-
})]
|
|
85
|
-
});
|
|
86
|
-
api.isVisible("feature1") // false
|
|
87
|
-
api.isVisible("feature2") // false
|
|
88
|
-
api.isVisible("feature3") // true
|
|
89
|
-
</script>
|
|
90
|
-
</body>
|
|
91
|
-
</html>
|
|
92
|
-
```
|