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,24 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Basic Feature-Toggle-API-Test</title>
|
|
6
|
-
<script src="../dist/feature-toggle.umd.min.js"></script>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature1</div>
|
|
10
|
-
<div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature2</div>
|
|
11
|
-
<script>
|
|
12
|
-
//useFeatureToggle is a global defined by the script
|
|
13
|
-
var api = useFeatureToggle({
|
|
14
|
-
feature1: true
|
|
15
|
-
});
|
|
16
|
-
var feature1Visible = api.isVisible('feature1');
|
|
17
|
-
var feature2Visible = api.isVisible('feature2');
|
|
18
|
-
|
|
19
|
-
//here we could also use jquery,...
|
|
20
|
-
if(!feature1Visible) document.querySelector(".feature1").style.display = 'none';
|
|
21
|
-
if(!feature2Visible) document.querySelector(".feature2").style.display = 'none';
|
|
22
|
-
</script>
|
|
23
|
-
</body>
|
|
24
|
-
</html>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>HTML-Plugin Test</title>
|
|
6
|
-
<script src="../dist/feature-toggle.umd.min.js"></script>
|
|
7
|
-
<script src="../dist/html-plugin.umd.min.js"></script>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app">
|
|
11
|
-
<!-- The name property is required -->
|
|
12
|
-
<feature name="feature1">This is "Feature1"</feature>
|
|
13
|
-
<feature name="featureh1" tag="h1">This feature is rendered with a h1-tag as root-Element, not a div.</feature>
|
|
14
|
-
<!-- The variant property is optional and can be any string -->
|
|
15
|
-
<feature name="feature2">This is "Feature2"</feature>
|
|
16
|
-
<feature name="feature2" variant="new">This is "Feature2" with variant "new"</feature>
|
|
17
|
-
<feature name="feature2" variant="old">This "Feature2" with variant "old"</feature>
|
|
18
|
-
<feature name="feature2" variant="grumpfel">This "Feature2" with variant "grumpfel"</feature>
|
|
19
|
-
|
|
20
|
-
<feature name="feature3" variant="old" data='["a",2]'>This "Feature3" with variant "old" has some Data.</feature>
|
|
21
|
-
<feature name="feature3" variant="new" data='{"text":"grumpfel"}'>This "Feature3" with variant "old" has some Data. </feature>
|
|
22
|
-
</div>
|
|
23
|
-
<script>
|
|
24
|
-
var api = featuretoggleapi({
|
|
25
|
-
"feature2#new": true,
|
|
26
|
-
"feature2#grumpfel": true,
|
|
27
|
-
"featureh1": true,
|
|
28
|
-
_plugins: [htmlplugin()]
|
|
29
|
-
});
|
|
30
|
-
api.visibility("feature3",function(rule){
|
|
31
|
-
return rule.data.text == 'grumpfel';
|
|
32
|
-
})
|
|
33
|
-
</script>
|
|
34
|
-
</body>
|
|
35
|
-
</html>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>HTML-Plugin Test</title>
|
|
6
|
-
<script src="../dist/feature-toggle.umd.min.js"></script>
|
|
7
|
-
<script src="../dist/url-plugin.umd.min.js"></script>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div>
|
|
11
|
-
Add a parameter "&feature1=true" ore "&feature2=true" to the url and see, how the visibility of these elements changes.
|
|
12
|
-
</div>
|
|
13
|
-
<div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;display:none;">This is text from feature1</div>
|
|
14
|
-
<div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;display:none;">This is text from feature2</div>
|
|
15
|
-
<script>
|
|
16
|
-
var api = featuretoggleapi({
|
|
17
|
-
_plugins: [urlplugin({prefix:'_'})]
|
|
18
|
-
});
|
|
19
|
-
api.on('visibilityrule', function (rule) {
|
|
20
|
-
var featureVisible = api.isVisible(rule.name);
|
|
21
|
-
if(featureVisible) document.querySelector("."+rule.name).style.display = 'block';
|
|
22
|
-
});
|
|
23
|
-
</script>
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Listener Feature-Toggle-API-Test</title>
|
|
6
|
-
<script src="../dist/feature-toggle.umd.min.js"></script>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature1</div>
|
|
10
|
-
<div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature2</div>
|
|
11
|
-
<script>
|
|
12
|
-
var api = featuretoggleapi({
|
|
13
|
-
feature1: true
|
|
14
|
-
});
|
|
15
|
-
api.on('visibilityrule', function (rule) {
|
|
16
|
-
var featureVisible = api.isVisible(rule.name);
|
|
17
|
-
if(!featureVisible) document.querySelector("."+rule.name).style.display = 'none';
|
|
18
|
-
});
|
|
19
|
-
</script>
|
|
20
|
-
</body>
|
|
21
|
-
</html>
|
package/gulpfile.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
const { series, src, dest } = require('gulp');
|
|
2
|
-
const concat = require('gulp-concat');
|
|
3
|
-
const uglify = require('gulp-uglify');
|
|
4
|
-
const babel = require('gulp-babel');
|
|
5
|
-
const rollup = require('gulp-rollup');
|
|
6
|
-
|
|
7
|
-
function build_module() {
|
|
8
|
-
return src('src/index.js')
|
|
9
|
-
.pipe(rollup({
|
|
10
|
-
// any option supported by Rollup can be set here.
|
|
11
|
-
input: './src/index.js',
|
|
12
|
-
output: {
|
|
13
|
-
format: 'cjs'
|
|
14
|
-
}
|
|
15
|
-
}))
|
|
16
|
-
.pipe(babel({
|
|
17
|
-
presets: ["@babel/preset-env"]
|
|
18
|
-
}))
|
|
19
|
-
.pipe(concat('feature-toggle-api.module.js'))
|
|
20
|
-
.pipe(dest('./'));
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
function build_raw() {
|
|
24
|
-
return src('src/*.js')
|
|
25
|
-
.pipe(rollup({
|
|
26
|
-
// any option supported by Rollup can be set here.
|
|
27
|
-
input: './src/index.cjs.js',
|
|
28
|
-
output: {
|
|
29
|
-
format: 'cjs'
|
|
30
|
-
}
|
|
31
|
-
}))
|
|
32
|
-
.pipe(babel({
|
|
33
|
-
presets: ["@babel/preset-env"]
|
|
34
|
-
}))
|
|
35
|
-
.pipe(concat('feature-toggle-api.js'))
|
|
36
|
-
.pipe(dest('./'));
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
function build_min() {
|
|
40
|
-
return src('src/*.js')
|
|
41
|
-
.pipe(rollup({
|
|
42
|
-
// any option supported by Rollup can be set here.
|
|
43
|
-
input: './src/index.cjs.js',
|
|
44
|
-
output: {
|
|
45
|
-
format: 'cjs'
|
|
46
|
-
}
|
|
47
|
-
}))
|
|
48
|
-
.pipe(babel({
|
|
49
|
-
presets: ["@babel/preset-env"]
|
|
50
|
-
}))
|
|
51
|
-
.pipe(uglify())
|
|
52
|
-
.pipe(concat('feature-toggle-api.min.js'))
|
|
53
|
-
.pipe(dest('./'));
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
function build_plugins() {
|
|
57
|
-
return src(['src/plugins/htmlplugin/plugin-html.js', 'src/plugins/urlplugin/plugin-url.js'])
|
|
58
|
-
.pipe(babel({
|
|
59
|
-
presets: ["@babel/preset-env"]
|
|
60
|
-
}))
|
|
61
|
-
.pipe(uglify())
|
|
62
|
-
.pipe(dest('./'));
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
exports.build = series(build_raw, build_min, build_plugins, build_module);
|
package/plugin-html.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var defaultparams={renderedTag:"div",featureTagName:"feature",tagAttributeName:"tag",nameAttributeName:"name",variantAttributeName:"variant",dataAttributeName:"data",displayAttributeName:"display",defaultDisplay:"block"};function parseDataAttribute(a){try{return JSON.parse(a)}catch(t){if(!isNaN(parseFloat(a)))return parseFloat(a);return a}}function htmlplugin(){var u=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};u=Object.assign({},defaultparams,u);function o(t,a){var e=t.getAttribute(u.tagAttributeName)||u.renderedTag;var r=Array.from(t.attributes);var n="";r.forEach(function(t){n+=" ".concat(t.nodeName,'="').concat(t.nodeValue.replace(/"/g,"""),'"')});var i=a?t.getAttribute(u.displayAttributeName)||u.defaultDisplay:"none";t.outerHTML="<".concat(e,' style="display:').concat(i,'" _feature="true" ').concat(n,">").concat(t.innerHTML,"</").concat(e,">")}return function(i){var t=window.document.querySelectorAll(u.featureTagName);t.forEach(function(t){o(t,false)});i.on("visibilityrule",function(n){var t="[_feature][".concat(u.nameAttributeName,'="').concat(n.name,'"]');if(n.variant)t+="[".concat(u.variantAttributeName,'="').concat(n.variant,'"]');var a=document.querySelectorAll(t);a.forEach(function(t){var a=t.getAttribute(u.dataAttributeName);var e=parseDataAttribute(a);var r=i.isVisible(n.name,n.variant,e);o(t,r)})});return{name:"htmlplugin"}}}if(typeof window!=="undefined")window.htmlplugin=htmlplugin;if(typeof module!=="undefined")module.exports=htmlplugin;
|
package/plugin-url.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";function parseValue(e){if(e==="true")return true;return false}function getParams(e,r){var i={};if(!e)return[];var n=e.split("?");if(n.length<2)return[];var u=n[1].split("&");u.forEach(function(e){var n=e.split("=");n[0]=r.decodeURIComponent(n[0]);n[1]=parseValue(r.decodeURIComponent(n[1]));i[n[0]]=n[1]!=="undefined"?n[1]:true});return i}function urlplugin(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};if(e.window)window=e.window;e=Object.assign({},{url:window.isMocked?"":window.location.href,prefix:""},e);return function(r){r.url=e.url;var i=getParams(e.url,window);var u=e.prefix;Object.keys(i).forEach(function(e){if(!e.startsWith(u))return;var n=e.replace(u,"");r.visibility(n,i[e])});return{name:"urlplugin"}}}if(typeof window!=="undefined")window.urlplugin=urlplugin;if(typeof module!=="undefined")module.exports=urlplugin;
|
package/rollup.config.js
DELETED
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from 'rollup';
|
|
2
|
-
import typescript from '@rollup/plugin-typescript'; // Für die JS-Bundles
|
|
3
|
-
import dts from 'rollup-plugin-dts';
|
|
4
|
-
import terser from '@rollup/plugin-terser';
|
|
5
|
-
|
|
6
|
-
export default defineConfig([{
|
|
7
|
-
input: "src/index.ts",
|
|
8
|
-
output: [
|
|
9
|
-
{
|
|
10
|
-
file: 'dist/feature-toggle.js',
|
|
11
|
-
format: 'es',
|
|
12
|
-
},
|
|
13
|
-
],
|
|
14
|
-
plugins: [
|
|
15
|
-
typescript({
|
|
16
|
-
tsconfig: './tsconfig.json', // Verwende deine tsconfig.json
|
|
17
|
-
}),
|
|
18
|
-
]
|
|
19
|
-
},{
|
|
20
|
-
input: "src/index.ts",
|
|
21
|
-
output: [
|
|
22
|
-
{
|
|
23
|
-
sourcemap:true,
|
|
24
|
-
file: 'dist/feature-toggle.min.js',
|
|
25
|
-
format: 'es',
|
|
26
|
-
},
|
|
27
|
-
],
|
|
28
|
-
plugins: [
|
|
29
|
-
typescript({
|
|
30
|
-
tsconfig: './tsconfig.json', // Verwende deine tsconfig.json
|
|
31
|
-
}),
|
|
32
|
-
terser()
|
|
33
|
-
]
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
input: "src/index.ts",
|
|
37
|
-
output: [
|
|
38
|
-
{
|
|
39
|
-
sourcemap: true,
|
|
40
|
-
file: 'dist/feature-toggle.min.cjs',
|
|
41
|
-
format: 'cjs'
|
|
42
|
-
},
|
|
43
|
-
],
|
|
44
|
-
plugins: [
|
|
45
|
-
typescript({
|
|
46
|
-
tsconfig: './tsconfig.cjs.json'
|
|
47
|
-
}),
|
|
48
|
-
terser()
|
|
49
|
-
]
|
|
50
|
-
},{
|
|
51
|
-
input: "src/featureToggle.ts",
|
|
52
|
-
output: [
|
|
53
|
-
{
|
|
54
|
-
sourcemap: true,
|
|
55
|
-
file: 'dist/feature-toggle.umd.min.js',
|
|
56
|
-
format: 'umd',
|
|
57
|
-
name: 'useFeatureToggle'
|
|
58
|
-
},
|
|
59
|
-
],
|
|
60
|
-
plugins: [
|
|
61
|
-
typescript({
|
|
62
|
-
tsconfig: './tsconfig.json'
|
|
63
|
-
}),
|
|
64
|
-
terser(),
|
|
65
|
-
]
|
|
66
|
-
},{
|
|
67
|
-
input: "src/plugins/htmlplugin/plugin-html.ts",
|
|
68
|
-
output: [
|
|
69
|
-
{
|
|
70
|
-
sourcemap: true,
|
|
71
|
-
file: 'dist/html-plugin.umd.min.js',
|
|
72
|
-
format: 'umd',
|
|
73
|
-
name: 'featureToggleHtmlPlugin'
|
|
74
|
-
},
|
|
75
|
-
],
|
|
76
|
-
plugins: [
|
|
77
|
-
typescript({
|
|
78
|
-
tsconfig: './tsconfig.json'
|
|
79
|
-
}),
|
|
80
|
-
terser(),
|
|
81
|
-
]
|
|
82
|
-
},{
|
|
83
|
-
input: "src/plugins/urlplugin/plugin-url.ts",
|
|
84
|
-
output: [
|
|
85
|
-
{
|
|
86
|
-
sourcemap: true,
|
|
87
|
-
file: 'dist/url-plugin.umd.min.js',
|
|
88
|
-
format: 'umd',
|
|
89
|
-
name: 'featureToggleURLPlugin'
|
|
90
|
-
},
|
|
91
|
-
],
|
|
92
|
-
plugins: [
|
|
93
|
-
typescript({
|
|
94
|
-
tsconfig: './tsconfig.json'
|
|
95
|
-
}),
|
|
96
|
-
terser(),
|
|
97
|
-
]
|
|
98
|
-
},{
|
|
99
|
-
input: 'src/index.ts',
|
|
100
|
-
output: {
|
|
101
|
-
file: 'dist/feature-toggle.d.ts',
|
|
102
|
-
format: 'esm',
|
|
103
|
-
},
|
|
104
|
-
plugins: [
|
|
105
|
-
dts(),
|
|
106
|
-
],
|
|
107
|
-
},]);
|