@ops-ai/vue-feature-flags-toggly 1.0.0 → 1.0.2

package/README.md

@@ -18,24 +18,36 @@ $ npm i -s @ops-ai/vue-feature-flags-toggly
 
 ## Basic Usage (with Toggly.io)
 
-Import the Toggly service inside your main.js file.
+Import the Toggly plugin in your main file.
 
 ```js
-import toggly from './toggly'
+import { toggly } from "@ops-ai/vue-feature-flags-toggly";
 ```
 
-Declare $toggly as a global property & initialize it by running the $toggly.init method and by providing your App Key from your [Toggly application page](https://app.toggly.io)
+Install the toggly plugin while providing your App Key & Environment name from your [Toggly application page](https://app.toggly.io). This will register the Feature component & $toggly service globally.
 
 ```js
-app.config.globalProperties.$toggly = toggly
-app.config.globalProperties.$toggly.init(
-  'your-app-key', // You can find this in Toggly.io
-  'your-environment-name', // You can find this in Toggly.io
-  'unique-user-identifier' // Use this in case you want to support custom feature rollouts
-)
+app.use(toggly, {
+  appKey: "your-app-key", // You can find this in app.toggly.io
+  environment: "your-environment-name", // You can find this in app.toggly.io
+});
 ```
 
-Now you can start using the Feature component.
+Using this package with [Toggly](https://toggly.io) allows you to define custom feature rollouts.
+
+Custom rollouts offers the ability to show features only to certain groups of users based on various custom rules which you can define in [Toggly](https://app.toggly.io).
+
+In case you want to support custom feature rollouts, remember to provide an unique identity string for each user to make sure they get the same feature values on future visits.
+
+```js
+app.use(toggly, {
+  appKey: "your-app-key", // You can find this in app.toggly.io
+  environment: "your-environment-name", // You can find this in app.toggly.io
+  identity: "unique-user-identifier", // Use this in case you want to support custom feature rollouts
+});
+```
+
+Now you can start using the Feature component anywhere in your application.
 
 ```html
 <Feature feature-key="firstFeature">
@@ -63,7 +75,14 @@ You can also check multiple feature keys and make use of the *requirement* (all/
 </Feature>
 ```
 
-Lastly, you can use *$toggly* to check if a feature is ON or OFF programmatically.
+Lastly, you can use the *$toggly* service to check if a feature is ON or OFF programmatically, by simply injecting it in any component.
+
+```js
+export default {
+  inject: ['$toggly'],
+  ...
+}
+```
 
 ```js
 await this.$toggly.isFeatureOn('firstFeature')
@@ -76,36 +95,31 @@ await this.$toggly.isFeatureOff('secondFeature')
 And even evaluate a feature gate (with requirement & negate support).
 
 ```js
-await this.$toggly.evaluateFeatureGate('firstFeature', 'secondFeature'], 'any', true)
+await this.$toggly.evaluateFeatureGate(['firstFeature', 'secondFeature'], 'any', true)
 ```
 
 ## Basic Usage (without Toggly.io)
 
-Import the Toggly service inside your main.js file.
+Import the Toggly plugin in your main file.
 
 ```js
-import toggly from './toggly'
+import { toggly } from "@ops-ai/vue-feature-flags-toggly";
 ```
 
-Declare $toggly as a global property & initialize it by running the $toggly.init method and by providing your App Key from your [Toggly application page](https://app.toggly.io)
+Install the toggly plugin while providing your default feature flags. This will register the Feature component & $toggly service globally.
 
 ```js
-
-var featureFlagDefaults = {
+var featureDefaults = {
   firstFeature: true,
   secondFeature: false,
 }
 
-app.config.globalProperties.$toggly = toggly
-app.config.globalProperties.$toggly.init(
-  null, // No need for an application key
-  null, // No need for an evironment name
-  null, // Custom rollouts are not supported without Toggly.io
-  featureFlagDefaults
-)
+app.use(toggly, {
+  featureDefaults: featureDefaults,
+});
 ```
 
-Now you can start using the Feature component.
+Now you can start using the Feature component anywhere in your application.
 
 ```html
 <Feature feature-key="firstFeature">
@@ -133,7 +147,14 @@ You can also check multiple feature keys and make use of the *requirement* (all/
 </Feature>
 ```
 
-Lastly, you can use *$toggly* to check if a feature is ON or OFF programmatically.
+Lastly, you can use the *$toggly* service to check if a feature is ON or OFF programmatically, by simply injecting it in any component.
+
+```js
+export default {
+  inject: ['$toggly'],
+  ...
+}
+```
 
 ```js
 await this.$toggly.isFeatureOn('firstFeature')

package/dist/types/index.d.ts

@@ -1,2 +1 @@
-export { default as Feature } from './components/Feature.vue';
-export { default as toggly } from './toggly';
+export { default as toggly } from './plugins/toggly';

package/dist/types/plugins/toggly.d.ts

@@ -0,0 +1,5 @@
+import { TogglyOptions } from './toggly.service';
+declare const _default: {
+    install: (app: any, options: TogglyOptions) => void;
+};
+export default _default;

package/dist/types/plugins/toggly.service.d.ts

@@ -0,0 +1,45 @@
+export interface TogglyOptions {
+    baseURI?: string;
+    appKey?: string;
+    environment?: string;
+    identity?: string;
+    featureDefaults?: {
+        [key: string]: boolean;
+    };
+    showFeatureDuringEvaluation?: boolean;
+}
+export interface TogglyService {
+    shouldShowFeatureDuringEvaluation: boolean;
+    init: (options: TogglyOptions) => this;
+    _loadFeatures: () => Promise<{
+        [key: string]: boolean;
+    } | null>;
+    _featuresLoaded: () => Promise<{
+        [key: string]: boolean;
+    } | null>;
+    _evaluateFeatureGate: (gate: string[], requirement: string, negate: boolean) => Promise<boolean>;
+    evaluateFeatureGate: (featureKeys: string[], requirement: string, negate: boolean) => Promise<boolean>;
+    isFeatureOn: (featureKey: string) => Promise<boolean>;
+    isFeatureOff: (featureKey: string) => Promise<boolean>;
+}
+export declare class Toggly implements TogglyService {
+    private _config;
+    private _features;
+    private _loadingFeatures;
+    shouldShowFeatureDuringEvaluation: boolean;
+    init: (options: TogglyOptions) => this;
+    _loadFeatures: () => Promise<{
+        [key: string]: boolean;
+    } | null>;
+    _featuresLoaded: () => Promise<{
+        [key: string]: boolean;
+    } | null>;
+    _evaluateFeatureGate: (gate: string[], requirement?: string, negate?: boolean) => Promise<boolean>;
+    evaluateFeatureGate: (featureKeys: string[], requirement?: string, negate?: boolean) => Promise<boolean>;
+    isFeatureOn: (featureKey: string) => Promise<boolean>;
+    isFeatureOff: (featureKey: string) => Promise<boolean>;
+    setIdentity: (identity: string) => void;
+    clearIdentity: () => void;
+}
+declare const toggly: Toggly;
+export default toggly;

package/dist/vue-feature-flags-toggly.es.js

@@ -1,85 +1,35 @@
-import { openBlock as o, createElementBlock as u, renderSlot as l, createCommentVNode as f } from "vue";
-const h = {
-  props: {
-    featureKey: {
-      type: String
-    },
-    featureKeys: {
-      type: Array
-    },
-    requirement: {
-      type: String,
-      default: "all"
-    },
-    negate: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  data() {
-    return {
-      shouldShow: !1,
-      isLoading: !1
-    };
-  },
-  mounted() {
-    this.checkIfShouldShow();
-  },
-  methods: {
-    async checkIfShouldShow() {
-      this.isLoading = !0;
-      var s = [];
-      this.featureKey && s.push(this.featureKey), this.featureKeys && (s = s.concat(this.featureKeys)), this.shouldShow = s.length > 0 ? await this.$toggly.evaluateFeatureGate(s, this.requirement, this.negate) : !0, this.isLoading = !1;
-    }
-  }
-}, c = (s, e) => {
-  const t = s.__vccOpts || s;
-  for (const [i, a] of e)
-    t[i] = a;
-  return t;
-}, d = { key: 0 };
-function g(s, e, t, i, a, n) {
-  return a.shouldShow ? (o(), u("div", d, [
-    l(s.$slots, "default")
-  ])) : f("", !0);
-}
-const p = /* @__PURE__ */ c(h, [["render", g]]);
-class _ {
+import { openBlock as o, createElementBlock as u, renderSlot as l, createCommentVNode as h } from "vue";
+class f {
   _config = {
     baseURI: "https://client.toggly.io",
-    appKey: null,
-    environment: null
+    showFeatureDuringEvaluation: !1
   };
-  _featureDefaults = null;
   _features = null;
   _loadingFeatures = !1;
-  _identity = null;
-  init = async (e, t, i, a = null) => (e ? t || (t = "Production", console.warn(
+  shouldShowFeatureDuringEvaluation = !1;
+  init = (e) => (e.appKey ? e.environment || (e.environment = "Production", console.warn(
     "Toggly --- Using Production environment as no environment provided when initializing the Toggly"
-  )) : a ? (this._features = a, console.warn(
+  )) : e.featureDefaults ? (this._features = e.featureDefaults ?? {}, console.warn(
     "Toggly --- Using feature defaults as no application key provided when initializing the Toggly"
   )) : console.warn(
     "Toggly --- A valid application key is required to connect to your Toggly.io application for evaluating your features."
-  ), this._config = Object.assign({}, this._config, {
-    appKey: e,
-    environment: t
-  }), this._featureDefaults = a, this._features || await this._loadFeatures(), this);
+  ), this._config = Object.assign({}, this._config, e), this.shouldShowFeatureDuringEvaluation = this._config.showFeatureDuringEvaluation, this);
   _loadFeatures = async () => {
-    if (this._loadingFeatures && await new Promise((t) => {
-      const i = () => {
-        this._loadingFeatures ? setTimeout(i, 100) : t();
+    if (this._loadingFeatures && await new Promise((a) => {
+      const s = () => {
+        this._loadingFeatures ? setTimeout(s, 100) : a();
       };
-      i();
+      s();
     }), this._features !== null)
       return this._features;
     this._loadingFeatures = !0;
     try {
       var e = `${this._config.baseURI}/${this._config.appKey}-${this._config.environment}/defs`;
-      this._identity && (e += `?u=${this._identity}`);
-      const t = await fetch(e);
-      this._features = await t.json();
+      this._config.identity && (e += `?u=${this._config.identity}`);
+      const a = await fetch(e);
+      this._features = await a.json();
     } catch {
-      this._features = this._featureDefaults ?? {}, console.warn(
+      this._features = this._config.featureDefaults ?? {}, console.warn(
         "Toggly --- Using feature defaults as features could not be loaded from the Toggly API"
       );
     } finally {
@@ -88,18 +38,73 @@ class _ {
     return this._features;
   };
   _featuresLoaded = async () => this._features ?? await this._loadFeatures();
-  _evaluateFeatureGate = async (e, t = "all", i = !1) => {
+  _evaluateFeatureGate = async (e, a = "all", s = !1) => {
     if (await this._featuresLoaded(), !this._features || Object.keys(this._features).length === 0)
       return !0;
-    var a;
-    return t === "any" ? a = e.reduce((n, r) => n || this._features[r] && this._features[r] === !0, !1) : a = e.reduce((n, r) => n && this._features[r] && this._features[r] === !0, !0), a = i ? !a : a, a;
+    var i;
+    return a === "any" ? i = e.reduce((r, n) => r || this._features[n] && this._features[n] === !0, !1) : i = e.reduce((r, n) => r && this._features[n] && this._features[n] === !0, !0), i = s ? !i : i, i;
   };
-  evaluateFeatureGate = async (e, t = "all", i = !1) => await this._evaluateFeatureGate(e, t, i);
+  evaluateFeatureGate = async (e, a = "all", s = !1) => await this._evaluateFeatureGate(e, a, s);
   isFeatureOn = async (e) => await this._evaluateFeatureGate([e]);
   isFeatureOff = async (e) => await this._evaluateFeatureGate([e], "all", !0);
+  setIdentity = (e) => {
+    this._features = null, this._config.identity = e;
+  };
+  clearIdentity = () => {
+    this._features = null, this._config.identity = void 0;
+  };
 }
-const w = new _();
+const c = new f(), g = {
+  inject: ["$toggly"],
+  props: {
+    featureKey: {
+      type: String
+    },
+    featureKeys: {
+      type: Array
+    },
+    requirement: {
+      type: String,
+      default: "all"
+    },
+    negate: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      shouldShow: !1,
+      isLoading: !1
+    };
+  },
+  mounted() {
+    this.checkIfShouldShow();
+  },
+  methods: {
+    async checkIfShouldShow() {
+      this.isLoading = !0, this.shouldShow = this.$toggly.shouldShowFeatureDuringEvaluation;
+      var t = [];
+      this.featureKey && t.push(this.featureKey), this.featureKeys && (t = t.concat(this.featureKeys)), this.shouldShow = t.length > 0 ? await this.$toggly.evaluateFeatureGate(t, this.requirement, this.negate) : !0, this.isLoading = !1;
+    }
+  }
+}, d = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [s, i] of e)
+    a[s] = i;
+  return a;
+}, _ = { key: 0 };
+function y(t, e, a, s, i, r) {
+  return i.shouldShow ? (o(), u("div", _, [
+    l(t.$slots, "default")
+  ])) : h("", !0);
+}
+const v = /* @__PURE__ */ d(g, [["render", y]]), p = {
+  install: (t, e) => {
+    const a = c.init(e);
+    t.provide("$toggly", a), t.component("Feature", v);
+  }
+};
 export {
-  p as Feature,
-  w as toggly
+  p as toggly
 };

package/dist/vue-feature-flags-toggly.umd.js

@@ -1 +1 @@
-(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n.VueFeatureFlagsToggly={},n.Vue))})(this,function(n,r){"use strict";const l={props:{featureKey:{type:String},featureKeys:{type:Array},requirement:{type:String,default:"all"},negate:{type:Boolean,default:!1}},data(){return{shouldShow:!1,isLoading:!1}},mounted(){this.checkIfShouldShow()},methods:{async checkIfShouldShow(){this.isLoading=!0;var s=[];this.featureKey&&s.push(this.featureKey),this.featureKeys&&(s=s.concat(this.featureKeys)),this.shouldShow=s.length>0?await this.$toggly.evaluateFeatureGate(s,this.requirement,this.negate):!0,this.isLoading=!1}}},f=(s,e)=>{const t=s.__vccOpts||s;for(const[i,a]of e)t[i]=a;return t},h={key:0};function c(s,e,t,i,a,u){return a.shouldShow?(r.openBlock(),r.createElementBlock("div",h,[r.renderSlot(s.$slots,"default")])):r.createCommentVNode("",!0)}const d=f(l,[["render",c]]);class g{_config={baseURI:"https://client.toggly.io",appKey:null,environment:null};_featureDefaults=null;_features=null;_loadingFeatures=!1;_identity=null;init=async(e,t,i,a=null)=>(e?t||(t="Production",console.warn("Toggly --- Using Production environment as no environment provided when initializing the Toggly")):a?(this._features=a,console.warn("Toggly --- Using feature defaults as no application key provided when initializing the Toggly")):console.warn("Toggly --- A valid application key is required to connect to your Toggly.io application for evaluating your features."),this._config=Object.assign({},this._config,{appKey:e,environment:t}),this._featureDefaults=a,this._features||await this._loadFeatures(),this);_loadFeatures=async()=>{if(this._loadingFeatures&&await new Promise(t=>{const i=()=>{this._loadingFeatures?setTimeout(i,100):t()};i()}),this._features!==null)return this._features;this._loadingFeatures=!0;try{var e=`${this._config.baseURI}/${this._config.appKey}-${this._config.environment}/defs`;this._identity&&(e+=`?u=${this._identity}`);const t=await fetch(e);this._features=await t.json()}catch{this._features=this._featureDefaults??{},console.warn("Toggly --- Using feature defaults as features could not be loaded from the Toggly API")}finally{this._loadingFeatures=!1}return this._features};_featuresLoaded=async()=>this._features??await this._loadFeatures();_evaluateFeatureGate=async(e,t="all",i=!1)=>{if(await this._featuresLoaded(),!this._features||Object.keys(this._features).length===0)return!0;var a;return t==="any"?a=e.reduce((u,o)=>u||this._features[o]&&this._features[o]===!0,!1):a=e.reduce((u,o)=>u&&this._features[o]&&this._features[o]===!0,!0),a=i?!a:a,a};evaluateFeatureGate=async(e,t="all",i=!1)=>await this._evaluateFeatureGate(e,t,i);isFeatureOn=async e=>await this._evaluateFeatureGate([e]);isFeatureOff=async e=>await this._evaluateFeatureGate([e],"all",!0)}const _=new g;n.Feature=d,n.toggly=_,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.VueFeatureFlagsToggly={},r.Vue))})(this,function(r,n){"use strict";class l{_config={baseURI:"https://client.toggly.io",showFeatureDuringEvaluation:!1};_features=null;_loadingFeatures=!1;shouldShowFeatureDuringEvaluation=!1;init=e=>(e.appKey?e.environment||(e.environment="Production",console.warn("Toggly --- Using Production environment as no environment provided when initializing the Toggly")):e.featureDefaults?(this._features=e.featureDefaults??{},console.warn("Toggly --- Using feature defaults as no application key provided when initializing the Toggly")):console.warn("Toggly --- A valid application key is required to connect to your Toggly.io application for evaluating your features."),this._config=Object.assign({},this._config,e),this.shouldShowFeatureDuringEvaluation=this._config.showFeatureDuringEvaluation,this);_loadFeatures=async()=>{if(this._loadingFeatures&&await new Promise(a=>{const s=()=>{this._loadingFeatures?setTimeout(s,100):a()};s()}),this._features!==null)return this._features;this._loadingFeatures=!0;try{var e=`${this._config.baseURI}/${this._config.appKey}-${this._config.environment}/defs`;this._config.identity&&(e+=`?u=${this._config.identity}`);const a=await fetch(e);this._features=await a.json()}catch{this._features=this._config.featureDefaults??{},console.warn("Toggly --- Using feature defaults as features could not be loaded from the Toggly API")}finally{this._loadingFeatures=!1}return this._features};_featuresLoaded=async()=>this._features??await this._loadFeatures();_evaluateFeatureGate=async(e,a="all",s=!1)=>{if(await this._featuresLoaded(),!this._features||Object.keys(this._features).length===0)return!0;var i;return a==="any"?i=e.reduce((u,o)=>u||this._features[o]&&this._features[o]===!0,!1):i=e.reduce((u,o)=>u&&this._features[o]&&this._features[o]===!0,!0),i=s?!i:i,i};evaluateFeatureGate=async(e,a="all",s=!1)=>await this._evaluateFeatureGate(e,a,s);isFeatureOn=async e=>await this._evaluateFeatureGate([e]);isFeatureOff=async e=>await this._evaluateFeatureGate([e],"all",!0);setIdentity=e=>{this._features=null,this._config.identity=e};clearIdentity=()=>{this._features=null,this._config.identity=void 0}}const f=new l,h={inject:["$toggly"],props:{featureKey:{type:String},featureKeys:{type:Array},requirement:{type:String,default:"all"},negate:{type:Boolean,default:!1}},data(){return{shouldShow:!1,isLoading:!1}},mounted(){this.checkIfShouldShow()},methods:{async checkIfShouldShow(){this.isLoading=!0,this.shouldShow=this.$toggly.shouldShowFeatureDuringEvaluation;var t=[];this.featureKey&&t.push(this.featureKey),this.featureKeys&&(t=t.concat(this.featureKeys)),this.shouldShow=t.length>0?await this.$toggly.evaluateFeatureGate(t,this.requirement,this.negate):!0,this.isLoading=!1}}},g=(t,e)=>{const a=t.__vccOpts||t;for(const[s,i]of e)a[s]=i;return a},c={key:0};function d(t,e,a,s,i,u){return i.shouldShow?(n.openBlock(),n.createElementBlock("div",c,[n.renderSlot(t.$slots,"default")])):n.createCommentVNode("",!0)}const y=g(h,[["render",d]]),_={install:(t,e)=>{const a=f.init(e);t.provide("$toggly",a),t.component("Feature",y)}};r.toggly=_,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -34,7 +34,7 @@
     "test": "exit 0"
   },
   "name": "@ops-ai/vue-feature-flags-toggly",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Provides feature flags support for Vue.js applications allowing you to enable and disable features easily. Can be used with or without Toggly.io.",
   "type": "module",
   "dependencies": {

package/dist/types/App.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/types/components/HelloWorld.vue.d.ts

@@ -1,15 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    msg: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    msg: string;
-}>>>, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/types/main.d.ts

@@ -1 +0,0 @@
-import './style.css';

package/dist/types/toggly.d.ts

@@ -1,22 +0,0 @@
-export declare class Toggly {
-    private _config;
-    private _featureDefaults;
-    private _features;
-    private _loadingFeatures;
-    private _identity;
-    init: (appKey: string, environment: string, identity: string, featureDefaults?: {
-        [key: string]: boolean;
-    } | null) => Promise<this>;
-    _loadFeatures: () => Promise<{
-        [key: string]: boolean;
-    } | null>;
-    _featuresLoaded: () => Promise<{
-        [key: string]: boolean;
-    } | null>;
-    _evaluateFeatureGate: (gate: string[], requirement?: string, negate?: boolean) => Promise<any>;
-    evaluateFeatureGate: (featureKeys: string[], requirement?: string, negate?: boolean) => Promise<any>;
-    isFeatureOn: (featureKey: string) => Promise<any>;
-    isFeatureOff: (featureKey: string) => Promise<any>;
-}
-declare const toggly: Toggly;
-export default toggly;