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

package/README.md

@@ -0,0 +1,154 @@
+Lightweight package that provides feature flags support for Vue.js applications allowing you to check feature status and enable/disable them easily.
+
+Can be used *WITH* or *WITHOUT* [Toggly.io](https://toggly.io).
+
+## What is a Feature Flag
+
+A feature flag (or toggle) in software development provides an alternative to maintaining multiple feature branches in source code. A condition within the code enables or disables a feature during runtime.
+
+In agile settings the feature flag is used in production, to switch on the feature on demand, for some or all the users. Thus, feature flags make it easier to release often. Advanced roll out strategies such as canary roll out and A/B testing are easier to handle.
+
+## Installation
+
+Simply install use NPM to install this package.
+
+```shell
+$ npm i -s @ops-ai/vue-feature-flags-toggly
+```
+
+## Basic Usage (with Toggly.io)
+
+Import the Toggly service inside your main.js file.
+
+```js
+import toggly from './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)
+
+```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
+)
+```
+
+Now you can start using the Feature component.
+
+```html
+<Feature feature-key="firstFeature">
+  <p>This feature can be turned on or off.</p>
+</Feature>
+```
+
+You can also check multiple feature keys and make use of the *requirement* (all/any) and *negate* (bool) options (requirement is set to "all" by default).
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']">
+  <p>ALL the provided feature keys are TRUE.</p>
+</Feature>
+```
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="any">
+  <p>AT LEAST ONE the provided feature keys is TRUE.</p>
+</Feature>
+```
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="all" :negate="true">
+  <p>NONE of the provided feature keys is TRUE.</p>
+</Feature>
+```
+
+Lastly, you can use *$toggly* to check if a feature is ON or OFF programmatically.
+
+```js
+await this.$toggly.isFeatureOn('firstFeature')
+```
+
+```js
+await this.$toggly.isFeatureOff('secondFeature')
+```
+
+And even evaluate a feature gate (with requirement & negate support).
+
+```js
+await this.$toggly.evaluateFeatureGate('firstFeature', 'secondFeature'], 'any', true)
+```
+
+## Basic Usage (without Toggly.io)
+
+Import the Toggly service inside your main.js file.
+
+```js
+import toggly from './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)
+
+```js
+
+var featureFlagDefaults = {
+  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
+)
+```
+
+Now you can start using the Feature component.
+
+```html
+<Feature feature-key="firstFeature">
+  <p>This feature can be turned on or off.</p>
+</Feature>
+```
+
+You can also check multiple feature keys and make use of the *requirement* (all/any) and *negate* (bool) options (requirement is set to "all" by default).
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']">
+  <p>ALL the provided feature keys are TRUE.</p>
+</Feature>
+```
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="any">
+  <p>AT LEAST ONE the provided feature keys is TRUE.</p>
+</Feature>
+```
+
+```html
+<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="all" :negate="true">
+  <p>NONE of the provided feature keys is TRUE.</p>
+</Feature>
+```
+
+Lastly, you can use *$toggly* to check if a feature is ON or OFF programmatically.
+
+```js
+await this.$toggly.isFeatureOn('firstFeature')
+```
+
+```js
+await this.$toggly.isFeatureOff('secondFeature')
+```
+
+And even evaluate a feature gate (with requirement & negate support).
+
+```js
+await this.$toggly.evaluateFeatureGate('firstFeature', 'secondFeature'], 'any', true)
+```
+
+## Find out more about Toggly.io
+
+Visit [our official website](https://toggly.io) or [check out a video overview of our product](https://docs.toggly.io/).

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

@@ -0,0 +1,2 @@
+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/Feature.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import("vue").DefineComponent<{
+    featureKey: {
+        type: StringConstructor;
+    };
+    featureKeys: {
+        type: ArrayConstructor;
+    };
+    requirement: {
+        type: StringConstructor;
+        default: string;
+    };
+    negate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, {
+    shouldShow: boolean;
+    isLoading: boolean;
+}, {}, {
+    checkIfShouldShow(): Promise<void>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    featureKey: {
+        type: StringConstructor;
+    };
+    featureKeys: {
+        type: ArrayConstructor;
+    };
+    requirement: {
+        type: StringConstructor;
+        default: string;
+    };
+    negate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    requirement: string;
+    negate: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,15 @@
+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/index.d.ts

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

package/dist/types/main.d.ts

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

package/dist/types/toggly.d.ts

@@ -0,0 +1,22 @@
+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;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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

@@ -0,0 +1,105 @@
+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 _ {
+  _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((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;
+  };
+  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 w = new _();
+export {
+  p as Feature,
+  w as toggly
+};

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

@@ -0,0 +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"})});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-feature-flags-toggly.umd.js",
+  "module": "./dist/vue-feature-flags-toggly.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-feature-flags-toggly.es.js",
+      "require": "./dist/vue-feature-flags-toggly.umd.js"
+    }
+  },
+  "types": "./dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ops-ai/Toggly.FeatureManagement.git#develop"
+  },
+  "bugs": {
+    "url": "https://github.com/ops-ai/Toggly.FeatureManagement/issues"
+  },
+  "homepage": "https://github.com/ops-ai/Toggly.FeatureManagement/tree/develop#readme",
+  "author": {
+    "name": "Cosmin Atomei",
+    "email": "cosmin.atomei@gmail.com"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "preserve": "vite build",
+    "serve": "vite preview --port 5050",
+    "typecheck": "vue-tsc --noEmit",
+    "preview": "vite preview",
+    "test": "exit 0"
+  },
+  "name": "@ops-ai/vue-feature-flags-toggly",
+  "version": "1.0.0",
+  "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": {
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@types/node": "^18.14.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vue-tsc": "^1.0.24"
+  }
+}