feature-toggle-api 3.4.1 → 4.0.0

package/src/{index.js → featureToggle.ts}

@@ -1,31 +1,131 @@
+interface OnConfiguration {
+    ignorePreviousRules: boolean
+}
+type Plugin = (api) => 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
+}
 
-const parseToFn = function (fnOrBool) {
+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);
+    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)
+}
+
+function parseToFn(fnOrBool: boolean | ((param?: any) => boolean)) {
     if (typeof fnOrBool == 'boolean')
         return function () { return fnOrBool };
 
     return fnOrBool;
 }
 
-const getKey = function (name, variant) {
+function getKey(name: string, variant?: string): string {
     var _name = name.toLowerCase();
-    if (typeof variant == 'string') {
+    if (variant && typeof variant == 'string') {
         _name += "#" + variant.toLowerCase();
     }
 
     return _name;
 }
 
-function initVisibilities(visibilities = {}) {
+function initVisibilities(visibilities: FeatureToggleConfig = {}) {
     const returnVisibilities = {};
     Object.keys(visibilities).forEach(key => {
-        if(key.startsWith('_'))
+        if (key.startsWith('_') || key.startsWith('$'))
             return;
         returnVisibilities[getKey(key)] = parseToFn(visibilities[key]);
     });
     return returnVisibilities;
 }
 
-export default function featuretoggleapi(config={}) {
+function useFeatureToggle(config: FeatureToggleConfig = {}): FeatureToggleApi {
 
     const globals = {
         datas: {},
@@ -35,29 +135,26 @@ export default function featuretoggleapi(config={}) {
         usedPlugins: [],
     }
 
-    function init(api){        
-        if(config._plugins)
-        {
-            if(!Array.isArray(config._plugins))
-                throw new Error('featuretoggleapi()-constructor: config.plugins must be an array.');
-            
-            config._plugins.forEach(plugin =>{
-                if(typeof plugin !== 'function')
+    function init(api) {
+        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 + '.');
-                
-                addPlugin(plugin,api);
+
+                plugin(api);
             });
         }
 
         triggerEvent('init');
     }
 
-    function addPlugin(plugin,api)
-    {
-        plugin(api);
-    }
-
-    function triggerEvent(eventtype,param) {
+    function triggerEvent(eventtype: string, param?: any) {
         (globals.listeners[eventtype] || []).forEach(listener => {
             listener(param);
         });
@@ -114,7 +211,7 @@ export default function featuretoggleapi(config={}) {
         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) {
+    function parseKey(key: string): OnEvent {
         const parts = key.split('#');
         return {
             name: parts[0],
@@ -165,11 +262,11 @@ export default function featuretoggleapi(config={}) {
         }
     }
 
-    function getEvent(name, variant, data, result) {
+    function getEvent(name: string, variant: string, data?, result?: any) {
 
         let event;
 
-        event = { name: name, variant: variant, data: data };
+        event = { name, variant, data };
 
         event.key = getKey(event.name, event.variant);
 
@@ -177,19 +274,19 @@ export default function featuretoggleapi(config={}) {
             return event;
 
         event.visibilityFunction = parseToFn(result);
-        event.result = event.visibilityFunction({ 
-            name: event.name, 
-            variant: event.variant, 
-            data: event.data || {}, 
+        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.'
+            description: 'When attaching a function, the result must be calculated internally. You can filter this out with the _internalCall:true -Flag.'
         })
         return event;
     }
 
 
 
-    function isVisible(name, variant, data) {
+    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) : ""}.`);
@@ -242,77 +339,101 @@ export default function featuretoggleapi(config={}) {
         return logAndReturn(false, 'No rules were found. This feature will be hidden.');
     }
 
-    const api = {
+    const api: FeatureToggleApi = {
         name: 'feature-toggle-api',
-        setData: function (nameParam, variantOrDataParam, dataParam) {
+        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;
+            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);
+            triggerEvent('visibilityrule', event);
         },
-        on: function (eventtype, fn, config) {
+        on: function (eventtype: string, fn, config?) {
             globals.listeners[eventtype] = globals.listeners[eventtype] || [];
             globals.listeners[eventtype].push(fn);
 
-            triggerEvent('registerEvent',{
+            triggerEvent('registerEvent', {
                 type: eventtype
             })
             if (config != undefined && config.ignorePreviousRules)
                 return;
 
+            
             Object.keys(globals.visibilities).forEach(key => {
-                const event = parseKey(key, globals);
+                const event = parseKey(key);
                 const rule = globals.visibilities[key];
                 event.result = rule(event);
                 fn(event);
             });
         },
         trigger: triggerEvent,
-        showLogs: function (showLogs) {
+        showLogs: function (showLogs?: boolean): void {
             globals.showLogs = showLogs == undefined ? true : showLogs;
         },
-        isVisible,
-        /*
+        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);
-        */
-        visibility: function (param1, param2, param3, param4) {
-            const params = visibilityFnParams(param1, param2, param3, param4);
+         */
+        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);
+            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.requiredVisibility(): 1st parameter must be a function, but is ' + typeof fn);
+                throw new Error('feature.setRequiredFlag(): 1st parameter must be a function, but is ' + typeof fn);
 
             globals.visibilities['_required'] = parseToFn(fn);
         },
-        defaultVisibility: function (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))
+        addPlugin: function (plugin) {
+            if (globals.usedPlugins.includes(plugin))
                 return;
-            
-            addPlugin(plugin,api);  
+
+            plugin(api);
+
             globals.usedPlugins.push(plugin);
         },
     };
     init(api);
+
     return api;
 }
+
+export default useFeatureToggle;

package/src/index.ts

@@ -0,0 +1,10 @@
+import { urlPlugin } from "./plugins/urlplugin/plugin-url"
+import { htmlPlugin } from "./plugins/htmlplugin/plugin-html"
+import useFeatureToggle from "./featureToggle"
+
+
+export {
+    useFeatureToggle,
+    urlPlugin,
+    htmlPlugin
+}

package/src/plugins/htmlplugin/{plugin-html.js → plugin-html.ts}

@@ -1,3 +1,16 @@
+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:
@@ -8,7 +21,7 @@
     - nameAttributeName: Name of the Name-Attribute: default: "name"
     - variantAttributeName: Name of the Variant-Attribute: default: "variant"
 */
-const defaultparams = {
+const defaultparams :HtmlPluginConfig = {
     renderedTag: 'div',
     featureTagName: 'feature',
     tagAttributeName: 'tag',
@@ -31,10 +44,10 @@ function parseDataAttribute(attrAsString){
     }
 }
 
-function htmlplugin(config = {}) {
+function htmlPlugin(config :HtmlPluginConfig = {}) {
     config = Object.assign({},defaultparams,config);
 
-    function renderFeatureTag(elem,isVisible){
+    function renderFeatureTag(elem:HTMLElement,isVisible){
         const tagname = elem.getAttribute(config.tagAttributeName) || config.renderedTag;
         const attributes = Array.from(elem.attributes);
         let attributesAsString = "";
@@ -43,15 +56,15 @@ function htmlplugin(config = {}) {
         });
         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 = window.document.querySelectorAll(config.featureTagName);
+        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 = document.querySelectorAll(selector);
+            var elements :NodeListOf<HTMLElement> = document.querySelectorAll(selector);
             elements.forEach(elem => { 
                 const dataAsString = elem.getAttribute(config.dataAttributeName);
                 const data = parseDataAttribute(dataAsString);
@@ -64,8 +77,7 @@ function htmlplugin(config = {}) {
         return { name: 'htmlplugin' };
     }
 }
-if(typeof window !== 'undefined')
-    window.htmlplugin = htmlplugin;
 
-if(typeof module !== 'undefined')
-    module.exports = htmlplugin;
+export {
+    htmlPlugin
+}

package/src/plugins/urlplugin/{plugin-url.js → plugin-url.ts}

@@ -1,3 +1,27 @@
+interface URLPluginConfig{
+    useMockedWindow?: boolean,
+    url?: string,
+    prefix?: string
+
+}
+
+function useWindowMock(){
+    return {
+        isMocked: true,
+        decodeURIComponent:function(param1){
+            return param1;
+        }
+    }
+}
+
+declare global {
+    interface Window {
+      isMocked: boolean
+    }
+  }
+
+  declare var window: Window;
+
 function parseValue(value){
     if(value === 'true')
         return true;
@@ -28,12 +52,16 @@ function getParams(url,window) {
     return params;
   }
 
- function urlplugin(config={}) {
-    if(config.window)
-        window = config.window;
+ function urlPlugin(config: URLPluginConfig={}) {
+    let _window;
+
+    if(config.useMockedWindow)
+        _window = useWindowMock();
+    else
+        _window = window;
     
     config = Object.assign({},{
-        url: window.isMocked ? "" : window.location.href,
+        url: _window.isMocked ? "" : _window.location.href,
         prefix: ""
     },config);
 
@@ -41,7 +69,7 @@ function getParams(url,window) {
 
     return function(api){
         api.url = config.url;
-        const urlparams = getParams(config.url,window);
+        const urlparams = getParams(config.url,_window);
         const prefix = config.prefix;
 
         Object.keys(urlparams).forEach(key => {
@@ -57,8 +85,6 @@ function getParams(url,window) {
 
 }
 
-if(typeof window !== 'undefined')
-    window.urlplugin = urlplugin;
-
-if(typeof module !== 'undefined')
-    module.exports = urlplugin;
+export {
+    urlPlugin
+}