feat: allow accessing Flagsmith instance

via `flagsmithInstance` property and `useFlagsmithInstance` function

README.md

@@ -33,14 +33,15 @@ useFlagsmith(options)
 
 For `options` see [Flagsmith initialization options](https://docs.flagsmith.com/clients/javascript#initialisation-options).
 
-Then you can access the flags, traits and loading status inside your child components:
+Then you can access the flags, traits, loading status and the Flagsmith instance itself inside your child components:
 
 ```ts
 import { useFlags, useTraits, useFlagsmithLoading } from 'flagsmith-vue'
 
 const flags = useFlags(['flag1', 'flag2', ...])
 const traits = useTraits(['trait1', 'trait2', ...])
 const flagsmithLoading = useFlagsmithLoading()
+const { setTraits } = useFlagsmithInstance()
 ```
 
 ## License

__tests__/index.spec.ts

@@ -1,5 +1,11 @@
 import { computed, defineComponent, nextTick } from 'vue'
-import { useFlags, useFlagsmith, useFlagsmithLoading, useTraits } from '../src/index'
+import {
+    useFlags,
+    useFlagsmith,
+    useFlagsmithInstance,
+    useFlagsmithLoading,
+    useTraits,
+} from '../src/index'
 import { mount } from '@vue/test-utils'
 import flagsmith from 'flagsmith'
 import type { IFlagsmithFeature } from 'flagsmith/types'
@@ -23,12 +29,17 @@ const ChildComponent = defineComponent({
             class="child-component--loading">
             Source: {{ source }}
         </div>
+        <div
+            class="child-component--state">
+            Source: {{ getState() }}
+        </div>
     </div>`,
     setup() {
         const { is_visible: isVisibleFeature } = useFlags(['is_visible'])
         const isVisible = computed(() => isVisibleFeature.value?.value)
         const { test_trait: testTrait } = useTraits(['test_trait'])
         const { error, isFetching, isLoading, source } = useFlagsmithLoading()
+        const { getState } = useFlagsmithInstance()
 
         return {
             isVisible,
@@ -37,6 +48,7 @@ const ChildComponent = defineComponent({
             isFetching,
             isLoading,
             source,
+            getState,
         }
     },
 })

src/index.ts

@@ -7,6 +7,7 @@ import type {
     ITraits,
     LoadingState,
     FlagSource,
+    IFlagsmith,
 } from 'flagsmith/types'
 import { computed, inject, provide, ref } from 'vue'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
@@ -15,6 +16,7 @@ export interface FlagsmithHelper<F extends string = string, T extends string = s
     flags: Ref<IFlags<F> | undefined>
     traits: Ref<ITraits<T> | undefined>
     loadingState: Ref<LoadingState | undefined>
+    flagsmithInstance: IFlagsmith<F, T>
 }
 const FlagsmithInjectionKey: InjectionKey<FlagsmithHelper> = Symbol('FlagsmithInjectionKey')
 const injectHelper = <F extends string = string, T extends string = string>(
@@ -50,6 +52,7 @@ export const useFlagsmith = <F extends string = string, T extends string = strin
         flags,
         traits,
         loadingState,
+        flagsmithInstance,
     }
     provide(FlagsmithInjectionKey, helper)
 
@@ -93,3 +96,10 @@ export const useFlagsmithLoading = <F extends string = string, T extends string
         source: computed(() => loadingState.value?.source ?? ('NONE' as FlagSource)),
     }
 }
+
+export const useFlagsmithInstance = <F extends string = string, T extends string = string>(
+    flagsmithHelper?: FlagsmithHelper<F, T>
+): IFlagsmith<F, T> => {
+    const { flagsmithInstance } = injectHelper(flagsmithHelper)
+    return flagsmithInstance
+}