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

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

import { defineComponent, inject, ref, watch, onMounted, onUnmounted, renderSlot } from 'vue';

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

var script = defineComponent({
    name: 'BoolFeatureGate',
    props: {
        featureKeys: {
            type: [String, Array],
            required: true,
        },
    },
    setup(props) {
        const clientRef = inject(FLAGMINT_CLIENT);
        const isReady = inject(FLAGMINT_READY);
        if (!clientRef || !isReady) {
            console.warn('[Flagmint] Plugin not installed or not provided.');
        }
        const enabled = ref(false);
        const evaluate = () => {
            const client = clientRef === null || clientRef === void 0 ? void 0 : clientRef.value;
            if (!client || !(isReady === null || isReady === void 0 ? void 0 : isReady.value)) {
                enabled.value = false;
                return;
            }
            const keys = Array.isArray(props.featureKeys)
                ? props.featureKeys
                : [props.featureKeys];
            if (keys.length === 0 || keys.some(k => typeof k !== 'string')) {
                enabled.value = false;
                return;
            }
            enabled.value = keys.every(key => {
                const value = client.getFlag(key, false);
                if (typeof value !== 'boolean') {
                    console.warn(`[BoolFeatureGate] Flag "${key}" is not a boolean (got ${typeof value}). Gate requires exactly true, not just truthy values.`);
                }
                return value === true;
            });
        };
        watch(() => isReady === null || isReady === void 0 ? void 0 : isReady.value, evaluate, { immediate: true });
        let unsubscribe = null;
        onMounted(() => {
            const client = clientRef === null || clientRef === void 0 ? void 0 : clientRef.value;
            if (!client)
                return;
            unsubscribe = client.subscribe((flags) => {
                const keys = Array.isArray(props.featureKeys)
                    ? props.featureKeys
                    : [props.featureKeys];
                enabled.value = keys.every(key => {
                    const value = flags[key];
                    if (typeof value !== 'boolean') {
                        console.warn(`[BoolFeatureGate] Flag "${key}" is not a boolean (got ${typeof value}). Gate requires exactly true, not just truthy values.`);
                    }
                    return value === true;
                });
            });
        });
        onUnmounted(() => {
            if (unsubscribe) {
                unsubscribe();
                unsubscribe = null;
            }
        });
        return { enabled };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.enabled)
    ? renderSlot(_ctx.$slots, "enabled", { key: 0 })
    : renderSlot(_ctx.$slots, "disabled", { key: 1 })
}

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

export { script as default };