npm - feature-toggle-api - Versions diffs - 4.1.1 → 5.0.0 - Mend

feature-toggle-api 4.1.1 → 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.

Files changed (50) hide show

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/{src/types.ts → dist/types.d.ts} +44 -64
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.d.ts +0 -130
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/rollup.config.js +0 -107
package/src/featureToggle.ts +0 -352
package/src/index.ts +0 -13
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

package/examples/01_basic_esmodule.js DELETED Viewed

@@ -1,10 +0,0 @@
-import { useFeatureToggle } from "feature-toggle-api";
-const feature = useFeatureToggle({
-    a:true,
-});
-console.log(feature.isVisible('a')); //true
-console.log(feature.isVisible('c')); //false

package/examples/02_basic_cjsmodule.cjs DELETED Viewed

@@ -1,6 +0,0 @@
-const {useFeatureToggle} = require("feature-toggle-api/dist/feature-toggle.cjs");
-const feature = useFeatureToggle({a:true, b:false});
-console.log(feature.isVisible('a'));
-console.log(feature.isVisible('c'));

package/examples/03_basic_scripttag.html DELETED Viewed

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Basic Feature-Toggle-API-Test</title>
-    <script src="../dist/feature-toggle.umd.min.js"></script>
-</head>
-<body>
-    <div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature1</div>
-    <div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature2</div>
-    <script>
-        //useFeatureToggle is a global defined by the script
-        var api = useFeatureToggle({
-            feature1: true
-        });
-        var feature1Visible = api.isVisible('feature1');
-        var feature2Visible = api.isVisible('feature2');
-        //here we could also use jquery,...
-        if(!feature1Visible) document.querySelector(".feature1").style.display = 'none';
-        if(!feature2Visible) document.querySelector(".feature2").style.display = 'none';
-    </script>
-</body>
-</html>

package/examples/04_example-htmlplugin.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>HTML-Plugin Test</title>
-    <script src="../dist/feature-toggle.umd.min.js"></script>
-    <script src="../dist/html-plugin.umd.min.js"></script>
-</head>
-<body>
-    <div id="app">
-        <!-- The name property is required -->
-        <feature name="feature1">This is "Feature1"</feature>
-        <feature name="featureh1" tag="h1">This feature is rendered with a h1-tag as root-Element, not a div.</feature>
-        <!-- The variant property is optional and can be any string -->
-        <feature name="feature2">This is "Feature2"</feature>
-        <feature name="feature2" variant="new">This is "Feature2" with variant "new"</feature>
-        <feature name="feature2" variant="old">This "Feature2" with variant "old"</feature>
-        <feature name="feature2" variant="grumpfel">This "Feature2" with variant "grumpfel"</feature>
-        <feature name="feature3" variant="old" data='["a",2]'>This "Feature3" with variant "old" has some Data.</feature>
-        <feature name="feature3" variant="new" data='{"text":"grumpfel"}'>This "Feature3" with variant "old" has some Data. </feature>
-    </div>
-        <script>
-            var api = featuretoggleapi({
-                "feature2#new": true,
-                "feature2#grumpfel": true,
-                "featureh1": true,
-                _plugins: [htmlplugin()]
-            });
-            api.visibility("feature3",function(rule){
-                return rule.data.text == 'grumpfel';
-            })
-        </script>
-</body>
-</html>

package/examples/05_example-urlplugin.html DELETED Viewed

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>HTML-Plugin Test</title>
-    <script src="../dist/feature-toggle.umd.min.js"></script>
-    <script src="../dist/url-plugin.umd.min.js"></script>
-</head>
-<body>
-    <div>
-        Add a parameter "&feature1=true" ore "&feature2=true" to the url and see, how the visibility of these elements changes.
-    </div>
-    <div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;display:none;">This is text from feature1</div>
-    <div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;display:none;">This is text from feature2</div>
-    <script>
-        var api = featuretoggleapi({
-            _plugins: [urlplugin({prefix:'_'})]
-        });
-        api.on('visibilityrule', function (rule) {
-            var featureVisible = api.isVisible(rule.name);
-            if(featureVisible) document.querySelector("."+rule.name).style.display = 'block';
-        });
-    </script>
-</body>
-</html>

package/examples/06_withListener.html DELETED Viewed

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Listener Feature-Toggle-API-Test</title>
-    <script src="../dist/feature-toggle.umd.min.js"></script>
-</head>
-<body>
-        <div class="feature1" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature1</div>
-        <div class="feature2" style="border:1px solid lightgray;padding:1em;margin:1em;">This is text from feature2</div>
-        <script>
-            var api = featuretoggleapi({
-                feature1: true
-            });
-            api.on('visibilityrule', function (rule) {
-                var featureVisible = api.isVisible(rule.name);
-                if(!featureVisible) document.querySelector("."+rule.name).style.display = 'none';
-            });
-        </script>
-</body>
-</html>

package/rollup.config.js DELETED Viewed

@@ -1,107 +0,0 @@
-import { defineConfig } from 'rollup';
-import typescript from '@rollup/plugin-typescript'; // Für die JS-Bundles
-import dts from 'rollup-plugin-dts';
-import terser from '@rollup/plugin-terser';
-export default defineConfig([{
-  input: "src/index.ts",
-  output: [
-    {
-      file: 'dist/feature-toggle.js',
-      format: 'es',
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json', // Verwende deine tsconfig.json
-    }),
-  ]
-},{
-  input: "src/index.ts",
-  output: [
-    {
-      sourcemap:true,
-      file: 'dist/feature-toggle.min.js',
-      format: 'es',
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json', // Verwende deine tsconfig.json
-    }),
-    terser()
-  ]
-},
-{
-  input: "src/index.ts",
-  output: [
-    {
-      sourcemap: true,
-      file: 'dist/feature-toggle.min.cjs',
-      format: 'cjs'
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.cjs.json'
-    }),
-    terser()
-  ]
-},{
-  input: "src/featureToggle.ts",
-  output: [
-    {
-      sourcemap: true,
-      file: 'dist/feature-toggle.umd.min.js',
-      format: 'umd',
-      name: 'useFeatureToggle'
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json'
-    }),
-    terser(),
-  ]
-},{
-  input: "src/plugins/htmlplugin/plugin-html.ts",
-  output: [
-    {
-      sourcemap: true,
-      file: 'dist/html-plugin.umd.min.js',
-      format: 'umd',
-      name: 'featureToggleHtmlPlugin'
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json'
-    }),
-    terser(),
-  ]
-},{
-  input: "src/plugins/urlplugin/plugin-url.ts",
-  output: [
-    {
-      sourcemap: true,
-      file: 'dist/url-plugin.umd.min.js',
-      format: 'umd',
-      name: 'featureToggleURLPlugin'
-    },
-  ],
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json'
-    }),
-    terser(),
-  ]
-},{
-  input: 'src/index.ts',
-  output: {
-    file: 'dist/feature-toggle.d.ts',
-    format: 'esm',
-  },
-  plugins: [
-    dts(),
-  ],
-},]);

package/src/featureToggle.ts DELETED Viewed

@@ -1,352 +0,0 @@
-import { EventType, FeatureToggleApi, FeatureToggleConfig, OnEvent } from "./types";
-function parseToFn(fnOrBool: boolean | ((param?: any) => boolean)) {
-    if (typeof fnOrBool == 'boolean')
-        return function () { return fnOrBool };
-    return fnOrBool;
-}
-function getKey(name: string, variant?: string): string {
-    var _name = name.toLowerCase();
-    if (variant && typeof variant == 'string') {
-        _name += "#" + variant.toLowerCase();
-    }
-    return _name;
-}
-function initVisibilities(visibilities: FeatureToggleConfig = {}) {
-    const returnVisibilities = {};
-    Object.keys(visibilities).forEach(key => {
-        if (key.startsWith('_') || key.startsWith('$'))
-            return;
-        returnVisibilities[getKey(key)] = parseToFn(visibilities[key]);
-    });
-    return returnVisibilities;
-}
-function useFeatureToggle(config: FeatureToggleConfig = {}): FeatureToggleApi {
-    const globals = {
-        datas: {},
-        listeners: {},
-        visibilities: initVisibilities(config),
-        showLogs: false,
-        usedPlugins: [],
-    }
-    function init(api: FeatureToggleApi) {
-        if(config.$default){
-            api.setDefaultFlag(config.$default);
-        }
-        if(config.$required){
-            api.setRequiredFlag(config.$required);
-        }
-        const allPlugins = [...(config.$plugins||[]),...(config._plugins||[])];
-        if(config._plugins){
-            console.log('useFeatureToggle({_plugins:[]}): Key _plugins is deprecated. Use $plugins instead. This attribute will be removed in one of the next major versions.');
-        }
-        if (allPlugins.length) {
-            allPlugins.forEach(plugin => {
-                if (typeof plugin !== 'function')
-                    throw new Error('featuretoggleapi()-constructor: config.plugins needs functions as entries, not ' + typeof plugin + '.');
-                api.addPlugin(plugin);
-            });
-        }
-        triggerEvent('init');
-    }
-    function triggerEvent(eventtype: EventType, param?: any) {
-        (globals.listeners[eventtype] || []).forEach(listener => {
-            listener(param);
-        });
-    }
-    const log = function (message) {
-        if (!globals.showLogs)
-            return;
-        //Nur Browser können Syntaxhighlighting die anderen geben die Nachricht einfach aus und schneiden
-        //die styletags raus
-        if (typeof window === 'undefined') {
-            const loggedMessage = message.replace(/<b>/g, "");
-            console.log(loggedMessage);
-            return;
-        }
-        var hasBoldTag = message.indexOf('<b>') != -1;
-        var hasVisibleKeyword = message.indexOf('visible') != -1;
-        var hasHiddenKeyword = message.indexOf('hidden') != -1;
-        var _message = message.replace('visible', '%cvisible');
-        _message = _message.replace('hidden', '%chidden');
-        if (hasVisibleKeyword)
-            console.log(_message, "color:green;font-weight:bold;");
-        else if (hasHiddenKeyword)
-            console.log(_message, "color:red;font-weight:bold;");
-        else if (hasBoldTag) {
-            _message = _message.replace('<b>', '%c');
-            var parts = [_message, 'font-weight:bold;']
-            console.log.apply(null, parts);
-        }
-        else
-            console.log(message);
-    }
-    const logAndReturn = function (returnValue, message) {
-        log(message);
-        log('');
-        return returnValue;
-    }
-    const getVisibility = function (visibilityFn, functionname, name, variant, data) {
-        if (visibilityFn == null)
-            return undefined;
-        var calculatedVisibility = visibilityFn({ name: name, variant: variant, data: data });
-        if (typeof calculatedVisibility == 'boolean') {
-            return calculatedVisibility;
-        }
-        return logAndReturn(false, `The ${functionname} returns ${calculatedVisibility}. => Please return true or false. This result (and all non-boolean results) will return false.`);
-    }
-    function parseKey(key: string): OnEvent {
-        const parts = key.split('#');
-        return {
-            name: parts[0],
-            variant: parts.length > 1 ? parts[1] : undefined,
-            data: globals.datas[key],
-        }
-    }
-    /*
-        the following calls are possible:
-        visibility(name,result);
-        visibility(name,variant,result);
-        visibility(name,variant,data,result);
-        =>
-        param1: name
-        param2: result || variant
-        param3: result || data
-        param4: result
-    */
-    function visibilityFnParams(param1, param2, param3, param4) {
-        //name must always be set
-        if (param1 == undefined)
-            throw new Error('feature.visibility(): 1st parameter name must be defined');
-        if (arguments.length == 1)
-            throw new Error('feature.visibility(): 2nd parameter name must be a boolean or function, but is empty');
-        let name = param1, variant = null, data = null, result = null;
-        if (param3 == undefined && param4 == undefined) {
-            result = param2;
-        }
-        else if (param4 == undefined) {
-            variant = param2;
-            result = param3;
-        }
-        else {
-            variant = param2;
-            data = param3;
-            result = param4;
-        }
-        return {
-            name,
-            variant,
-            data,
-            result
-        }
-    }
-    function getEvent(name: string, variant: string, data?, result?: any) {
-        let event;
-        event = { name, variant, data };
-        event.key = getKey(event.name, event.variant);
-        if (result == null)
-            return event;
-        event.visibilityFunction = parseToFn(result);
-        event.result = event.visibilityFunction({
-            name: event.name,
-            variant: event.variant,
-            data: event.data || {},
-            _internalCall: true,
-            description: 'When attaching a function, the result must be calculated internally. You can filter this out with the _internalCall:true -Flag.'
-        })
-        return event;
-    }
-    function isActive(name: string, variant?: string, data?: any): boolean {
-        const visibilities = globals.visibilities;
-        log(`\nCheck Visibility of <b>Feature "${name}", variant "${variant == undefined ? '' : variant}"${data ? " with data " + JSON.stringify(data) : ""}.`);
-        if (name == undefined)
-            throw new Error('The attribute "name" is required for tag <feature></feature>. Example: <feature name="aname"></feature>');
-        var requiredFn = visibilities['_required'];
-        var requiredFnExists = visibilities['_required'] != null;
-        var requiredFnResult = getVisibility(requiredFn, 'requiredVisibility', name, variant, data);
-        var visibilityFnKey = getKey(name, variant);
-        var visibilityFn = visibilities[visibilityFnKey];
-        var visibilityFnExists = visibilities[visibilityFnKey] != null;
-        var visibilityFnResult = getVisibility(visibilityFn, 'visibility function', name, variant, data);
-        var variantExists = variant != null;
-        var visibilityOnlyNameFnKey = getKey(name, null);
-        var visibilityOnlyNameFn = visibilities[visibilityOnlyNameFnKey];
-        var visibilityOnlyNameFnExists = visibilities[visibilityOnlyNameFnKey] != null;
-        var visibilityOnlyNameFnResult = getVisibility(visibilityOnlyNameFn, 'visibility function (only name)', name, variant, data);
-        var defaultFn = visibilities['_default'];
-        var defaultFnExists = visibilities['_default'] != null;
-        var defaultFnResult = getVisibility(defaultFn, 'defaultVisibility', name, variant, data);
-        if (!requiredFnExists)
-            log("No requiredVisibility rule specified for this feature.");
-        else if (requiredFnExists && requiredFnResult === true)
-            log("The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.")
-        else if (requiredFnExists && requiredFnResult === false)
-            return logAndReturn(false, "The requiredVisibility rule returns false. This feature will be hidden.");
-        if (visibilityFnExists)
-            return logAndReturn(visibilityFnResult, `The visibility rule returns ${visibilityFnResult}. This feature will be ${visibilityFnResult ? 'visible' : 'hidden'}.`);
-        log('No visibility rule found matching name and variant.');
-        if (variantExists && typeof visibilityOnlyNameFnResult == 'boolean')
-            return logAndReturn(visibilityOnlyNameFnResult, `Found a visibility rule for name ${name} without variants. The rule returns ${visibilityOnlyNameFnResult}. => This feature will be ${visibilityOnlyNameFnResult ? 'visible' : 'hidden'}.`);
-        else if (variantExists)
-            log(`No rules found for name ${name} without variants.`)
-        if (defaultFnExists)
-            return logAndReturn(defaultFnResult, `Found a defaultVisibility rule. The rule returns ${defaultFnResult}. => This feature will be ${defaultFnResult ? 'visible' : 'hidden'}.`);
-        log(`No default rule found.`)
-        if (requiredFnExists)
-            return logAndReturn(true, `Only the requiredVisibility rule was found. This returned true. => This feature will be visible.`);
-        return logAndReturn(false, 'No rules were found. This feature will be hidden.');
-    }
-    const api: FeatureToggleApi = {
-        name: 'feature-toggle-api',
-        setData: function (nameParam, variantOrDataParam, dataParam?): void {
-            if (nameParam == undefined)
-                throw new Error('setData(): The name must of the feature must be defined, but ist undefined');
-            const variant = (dataParam != undefined ? variantOrDataParam : undefined) as string;
-            const data = dataParam || variantOrDataParam;
-            const event = getEvent(nameParam, variant, data);
-            globals.datas[event.key] = event.data;
-            triggerEvent('visibilityrule', event);
-        },
-        on(eventtype: EventType, fn, config?) {
-            globals.listeners[eventtype] = globals.listeners[eventtype] || [];
-            globals.listeners[eventtype].push(fn);
-            triggerEvent('registerEvent', {
-                type: eventtype
-            })
-            if (config != undefined && config.ignorePreviousRules)
-                return;
-            Object.keys(globals.visibilities).forEach(key => {
-                const event = parseKey(key);
-                const rule = globals.visibilities[key];
-                event.result = rule(event);
-                fn(event);
-            });
-        },
-        trigger: triggerEvent,
-        showLogs: function (showLogs?: boolean): void {
-            globals.showLogs = showLogs == undefined ? true : showLogs;
-        },
-        isVisible(name,variant,data){
-            console.log('featureToggle.isVisible is deprecated. use featureToggle.isActive instead. This function will be removed in one of the next major versions.');
-            return isActive(name,variant,data);
-        },
-        isActive,
-        /**
-            the following function calls are possible:
-            visibility(name,result);
-            visibility(name,variant,result);
-            visibility(name,variant,data,result);
-         */
-        setFlag(name, resultOrVariant, resultOrData?, result?) {
-            const params = visibilityFnParams(name, resultOrVariant, resultOrData, result);
-            const event = getEvent(params.name, params.variant, params.data, params.result);
-            globals.visibilities[event.key] = event.visibilityFunction;
-            globals.datas[event.key] = event.data;
-            triggerEvent('visibilityrule', event);
-        },
-        visibility: function (name, resultOrVariant, resultOrData?, result?) {
-            console.log('featureToggle.visibility is deprecated. use featureToggle.setVisibility instead. This function will be removed in one of the next major versions.');
-            api.setFlag(name, resultOrVariant, resultOrData, result);
-        },
-        requiredVisibility: function (fn) {
-            console.log('featureToggle.requiredVisibility is deprecated. use featureToggle.setRequiredFlag instead. This function will be removed in one of the next major versions.');
-            api.setRequiredFlag(fn);
-        },
-        defaultVisibility: function (fn) {
-            console.log('featureToggle.requiredVisibility is deprecated. use featureToggle.setRequiredFlag instead. This function will be removed in one of the next major versions.');
-            api.setDefaultFlag(fn);
-        },
-        setRequiredFlag(fn) {
-            if (typeof fn != "function")
-                throw new Error('feature.setRequiredFlag(): 1st parameter must be a function, but is ' + typeof fn);
-            globals.visibilities['_required'] = parseToFn(fn);
-        },
-        setDefaultFlag(fn) {
-            if (typeof fn != "function")
-                throw new Error('feature.defaultVisibility(): 1st parameter must be a function, but is ' + typeof fn);
-            globals.visibilities['_default'] = parseToFn(fn);
-        },
-        addPlugin: function (plugin) {
-            if (globals.usedPlugins.includes(plugin))
-                return;
-            const newPlugin = plugin(api);
-            for(let _key of Object.keys(newPlugin)){
-                api[_key] = newPlugin[_key];
-            }
-            globals.usedPlugins.push(plugin);
-        },
-    };
-    init(api);
-    return api;
-}
-export default useFeatureToggle;

package/src/index.ts DELETED Viewed

@@ -1,13 +0,0 @@
-import { urlPlugin } from "./plugins/urlplugin/plugin-url"
-import { htmlPlugin } from "./plugins/htmlplugin/plugin-html"
-import useFeatureToggle from "./featureToggle"
-import type {
-    FeatureFlag, FeatureFlagKey, FeatureToggleApi, FeatureToggleApiBase, FeatureToggleConfig, FirstCharOfFeatureFlagKey, OnConfiguration, EventType, OnEvent
-} from './types';
-export {
-    useFeatureToggle,
-    urlPlugin,
-    htmlPlugin,
-    FeatureFlag, FeatureFlagKey, FeatureToggleApi, FeatureToggleApiBase, FeatureToggleConfig, FirstCharOfFeatureFlagKey, OnConfiguration, EventType, OnEvent
-}

package/src/plugins/htmlplugin/plugin-html.ts DELETED Viewed

@@ -1,83 +0,0 @@
-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,
-}
-/*
-    creates a tag that is shown / hidden, depending on the visibility rules.
-    if not configured dynamically, it looks like this:
-    <feature name="featurename" variant="variantname" data="data">content </feature>
-    Parameter: (config)
-    - config.featureTagName: name of the tag. Default: "feature"
-    - nameAttributeName: Name of the Name-Attribute: default: "name"
-    - variantAttributeName: Name of the Variant-Attribute: default: "variant"
-*/
-const defaultparams :HtmlPluginConfig = {
-    renderedTag: 'div',
-    featureTagName: 'feature',
-    tagAttributeName: 'tag',
-    nameAttributeName:'name',
-    variantAttributeName: 'variant',
-    dataAttributeName: 'data',
-    displayAttributeName: 'display',
-    defaultDisplay: 'block',
-}
-function parseDataAttribute(attrAsString){
-    try{
-        return JSON.parse(attrAsString);
-    }
-    catch(e)
-    {
-        if(!isNaN(parseFloat(attrAsString)))
-            return parseFloat(attrAsString);
-        return attrAsString;
-    }
-}
-function htmlPlugin(config :HtmlPluginConfig = {}) {
-    config = Object.assign({},defaultparams,config);
-    function renderFeatureTag(elem:HTMLElement,isVisible){
-        const tagname = elem.getAttribute(config.tagAttributeName) || config.renderedTag;
-        const attributes = Array.from(elem.attributes);
-        let attributesAsString = "";
-        attributes.forEach(attr => {
-            attributesAsString += ` ${attr.nodeName}="${attr.nodeValue.replace(/"/g,"&quot;")}"`;
-        });
-        const display = isVisible ? (elem.getAttribute(config.displayAttributeName) || config.defaultDisplay) : 'none';
-        elem.outerHTML = `<${tagname}  style="display:${display}" _feature="true" ${attributesAsString}>${elem.innerHTML}</${tagname}>`;
-    }
-    return function (api) {
-        var renderedTags :NodeListOf<HTMLElement> = window.document.querySelectorAll(config.featureTagName);
-        renderedTags.forEach(tag => { renderFeatureTag(tag,false) });
-        api.on('visibilityrule', function (event) {
-            var selector = `[_feature][${config.nameAttributeName}="${event.name}"]`;
-            if (event.variant) selector += `[${config.variantAttributeName}="${event.variant}"]`;
-            var elements :NodeListOf<HTMLElement> = document.querySelectorAll(selector);
-            elements.forEach(elem => {
-                const dataAsString = elem.getAttribute(config.dataAttributeName);
-                const data = parseDataAttribute(dataAsString);
-                const isVisible = api.isVisible(event.name,event.variant,data);
-                renderFeatureTag(elem, isVisible);
-            });
-        })
-        return { name: 'htmlplugin' };
-    }
-}
-export {
-    htmlPlugin
-}