flagmint-vuejs-feature-flags/dist/vue3-feature.mjs

A Vue.js SDK for managing feature flags in Flagmint applications, supporting both Vue 2 and Vue 3.

import { defineComponent, inject, computed, renderSlot, createCommentVNode } from 'vue';

const FLAGMINT_READY = Symbol.for('FLAGMINT_READY');
const FLAGMINT_CLIENT = Symbol.for('FLAGMINT_CLIENT');

var script = defineComponent({
    name: 'Feature',
    props: {
        /**
         * Accepts a single feature key or an array of keys.
         * If multiple keys are provided, all must be enabled.
         */
        featureKeys: {
            type: [String, Array],
            required: true,
        },
    },
    setup(props) {
        const client = inject(FLAGMINT_CLIENT);
        const isReady = inject(FLAGMINT_READY);
        if (!client || !isReady) {
            console.warn('Flagmint plugin not installed or not provided.');
        }
        const enabled = computed(() => {
            if (!isReady || !isReady.value || !client) {
                return false;
            }
            const keys = Array.isArray(props.featureKeys)
                ? props.featureKeys
                : [props.featureKeys];
            // Check if all feature flags are enabled
            if (keys.length === 0) {
                console.warn('No feature keys provided.');
                return false;
            }
            // Use the client to check if each flag is enabled
            if (keys.some(key => typeof key !== 'string')) {
                console.warn('Feature keys must be strings.');
                return false;
            }
            // Check if the client has the getFlag method
            if (typeof client.value.getFlag !== 'function') {
                console.warn('Client does not have a getFlag method.', client);
                return false;
            }
            // Return true only if all flags are enabled
            return keys.every(key => client.value.getFlag(key, false));
        });
        return { enabled, client };
    },
    unmounted() {
        // Cleanup if necessary
        console.info('Feature component unmounted and client destroyed.');
        if (this.client && typeof this.client.destroy === 'function') {
            this.client.destroy();
        }
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.enabled)
    ? renderSlot(_ctx.$slots, "default", { key: 0 })
    : createCommentVNode("v-if", true)
}

script.render = render;
script.__file = "sdk/vue3/component/Feature.vue";

export { script as default };