refactor: use non-deprecated methods internally in react and nuxt packages (#3182)

Author: marandaneto

.changeset/use-non-deprecated-methods.md

@@ -0,0 +1,6 @@
+---
+"@posthog/react": patch
+"@posthog/nuxt": patch
+---
+
+refactor: use `getFeatureFlagResult` instead of deprecated `getFeatureFlagPayload` internally

packages/nuxt/src/runtime/composables/useFeatureFlagPayload.ts

@@ -25,18 +25,18 @@ import type { JsonType } from 'posthog-js'
  */
 export function useFeatureFlagPayload(flag: string) {
   const posthog = usePostHog()
-  const featureFlagPayload = ref<JsonType | undefined>(posthog?.getFeatureFlagPayload?.(flag))
+  const featureFlagPayload = ref<JsonType | undefined>(posthog?.getFeatureFlagResult?.(flag, { send_event: false })?.payload)
 
   let unsubscribe: (() => void) | undefined
   onMounted(() => {
     if (!posthog) return
 
     // Set initial value in case it wasn't available during setup
-    featureFlagPayload.value = posthog.getFeatureFlagPayload(flag)
+    featureFlagPayload.value = posthog.getFeatureFlagResult(flag, { send_event: false })?.payload
 
     // Update when feature flags are loaded
     unsubscribe = posthog.onFeatureFlags?.(() => {
-      featureFlagPayload.value = posthog.getFeatureFlagPayload(flag)
+      featureFlagPayload.value = posthog.getFeatureFlagResult(flag, { send_event: false })?.payload
     })
   })
 

packages/react/src/components/__tests__/PostHogFeature.test.tsx

@@ -48,6 +48,13 @@ describe('PostHogFeature component', () => {
             isFeatureEnabled: (flag: string) => !!FEATURE_FLAG_STATUS[flag],
             getFeatureFlag: (flag: string) => FEATURE_FLAG_STATUS[flag],
             getFeatureFlagPayload: (flag: string) => FEATURE_FLAG_PAYLOADS[flag],
+            getFeatureFlagResult: (flag: string) => ({
+                key: flag,
+                enabled: !!FEATURE_FLAG_STATUS[flag],
+                variant:
+                    typeof FEATURE_FLAG_STATUS[flag] === 'string' ? (FEATURE_FLAG_STATUS[flag] as string) : undefined,
+                payload: FEATURE_FLAG_PAYLOADS[flag],
+            }),
             onFeatureFlags: (callback: any) => {
                 const activeFlags: string[] = []
                 for (const flag in FEATURE_FLAG_STATUS) {

packages/react/src/hooks/useFeatureFlagPayload.ts

@@ -5,11 +5,13 @@ import { PostHogContext } from '../context'
 export function useFeatureFlagPayload(flag: string): JsonType {
     const { client, bootstrap } = useContext(PostHogContext)
 
-    const [featureFlagPayload, setFeatureFlagPayload] = useState<JsonType>(() => client.getFeatureFlagPayload(flag))
+    const [featureFlagPayload, setFeatureFlagPayload] = useState<JsonType>(
+        () => client.getFeatureFlagResult(flag, { send_event: false })?.payload
+    )
 
     useEffect(() => {
         return client.onFeatureFlags(() => {
-            setFeatureFlagPayload(client.getFeatureFlagPayload(flag))
+            setFeatureFlagPayload(client.getFeatureFlagResult(flag, { send_event: false })?.payload)
         })
     }, [client, flag])