@posthog/react 1.2.3 → 1.4.0

package/src/components/internal/VisibilityAndClickTrackers.tsx

@@ -0,0 +1,60 @@
+import React, { Children, ReactNode, useCallback, useRef } from 'react'
+import { VisibilityAndClickTracker } from './VisibilityAndClickTracker'
+
+/**
+ * VisibilityAndClickTrackers is an internal component,
+ * its API might change without warning and without being signalled as a breaking change
+ *
+ * Wraps each of the children passed to it for visiblity and click tracking
+ *
+ */
+export function VisibilityAndClickTrackers({
+    children,
+    trackInteraction,
+    trackView,
+    options,
+    onInteract,
+    onView,
+    ...props
+}: {
+    flag: string
+    children: React.ReactNode
+    trackInteraction: boolean
+    trackView: boolean
+    options?: IntersectionObserverInit
+    onInteract?: () => void
+    onView?: () => void
+}): JSX.Element {
+    const clickTrackedRef = useRef(false)
+    const visibilityTrackedRef = useRef(false)
+
+    const cachedOnClick = useCallback(() => {
+        if (!clickTrackedRef.current && trackInteraction && onInteract) {
+            onInteract()
+            clickTrackedRef.current = true
+        }
+    }, [trackInteraction, onInteract])
+
+    const onIntersect = (entry: IntersectionObserverEntry) => {
+        if (!visibilityTrackedRef.current && entry.isIntersecting && onView) {
+            onView()
+            visibilityTrackedRef.current = true
+        }
+    }
+
+    const trackedChildren = Children.map(children, (child: ReactNode) => {
+        return (
+            <VisibilityAndClickTracker
+                onClick={cachedOnClick}
+                onIntersect={onIntersect}
+                trackView={trackView}
+                options={options}
+                {...props}
+            >
+                {child}
+            </VisibilityAndClickTracker>
+        )
+    })
+
+    return <>{trackedChildren}</>
+}

package/src/context/PostHogContext.ts

@@ -1,6 +1,9 @@
-import posthogJs from 'posthog-js'
+import posthogJs, { BootstrapConfig } from 'posthog-js'
 import { createContext } from 'react'
 
 export type PostHog = typeof posthogJs
 
-export const PostHogContext = createContext<{ client: PostHog }>({ client: posthogJs })
+export const PostHogContext = createContext<{ client: PostHog; bootstrap?: BootstrapConfig }>({
+    client: posthogJs,
+    bootstrap: undefined,
+})

package/src/context/PostHogProvider.tsx

@@ -124,5 +124,11 @@ export function PostHogProvider({ children, client, apiKey, options }: WithOptio
         }
     }, [client, apiKey, JSON.stringify(options)]) // Stringify options to be a stable reference
 
-    return <PostHogContext.Provider value={{ client: posthog }}>{children}</PostHogContext.Provider>
+    return (
+        <PostHogContext.Provider
+            value={{ client: posthog, bootstrap: options?.bootstrap ?? client?.config?.bootstrap }}
+        >
+            {children}
+        </PostHogContext.Provider>
+    )
 }

package/src/context/__tests__/{PostHogContext.test.jsx → PostHogContext.test.tsx}

@@ -1,30 +1,31 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import { PostHogProvider } from '..'
+import { PostHogProvider, PostHog } from '..'
 
 describe('PostHogContext component', () => {
-    given(
-        'render',
-        () => () =>
-            render(
-                <PostHogProvider client={given.posthog}>
-                    <div>Hello</div>
-                </PostHogProvider>
-            )
-    )
-    given('posthog', () => ({}))
+    const posthog = {} as unknown as PostHog
 
     it('should return a client instance from the context if available', () => {
-        given.render()
+        render(
+            <PostHogProvider client={posthog}>
+                <div>Hello</div>
+            </PostHogProvider>
+        )
     })
 
     it("should not throw error if a client instance can't be found in the context", () => {
-        given('posthog', () => undefined) // it might not exist in SSR for example
-
         // eslint-disable-next-line no-console
         console.warn = jest.fn()
 
-        expect(() => given.render()).not.toThrow()
+        expect(() => {
+            render(
+                // we have to cast `as any` so that we can test for when
+                // posthog might not exist - in SSR for example
+                <PostHogProvider client={undefined as any}>
+                    <div>Hello</div>
+                </PostHogProvider>
+            )
+        }).not.toThrow()
 
         // eslint-disable-next-line no-console
         expect(console.warn).toHaveBeenCalledWith(

package/src/context/__tests__/{PostHogProvider.test.jsx → PostHogProvider.test.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, act } from '@testing-library/react'
-import { PostHogProvider } from '..'
+import { PostHogProvider, PostHog } from '..'
 import posthogJs from 'posthog-js'
 
 // Mock posthog-js
@@ -15,7 +15,7 @@ jest.mock('posthog-js', () => ({
 
 describe('PostHogProvider component', () => {
     it('should render children components', () => {
-        const posthog = {}
+        const posthog = {} as unknown as PostHog
         const { getByText } = render(
             <PostHogProvider client={posthog}>
                 <div>Test</div>
@@ -111,7 +111,7 @@ describe('PostHogProvider component', () => {
         })
 
         it('warns if posthogJs has been loaded elsewhere', () => {
-            posthogJs.__loaded = true // Pretend it's initialized
+            ;(posthogJs as any).__loaded = true
 
             const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
             render(
@@ -125,7 +125,7 @@ describe('PostHogProvider component', () => {
             )
 
             consoleSpy.mockRestore()
-            posthogJs.__loaded = false
+            ;(posthogJs as any).__loaded = false
         })
     })
 })

package/src/hooks/__tests__/{featureFlags.test.jsx → featureFlags.test.tsx}

@@ -1,20 +1,20 @@
 import * as React from 'react'
 import { renderHook } from '@testing-library/react-hooks'
-import { PostHogProvider } from '../../context'
+import { PostHogProvider, PostHog } from '../../context'
 import { useFeatureFlagPayload, useFeatureFlagVariantKey, useFeatureFlagEnabled, useActiveFeatureFlags } from '../index'
 
 jest.useFakeTimers()
 
 const ACTIVE_FEATURE_FLAGS = ['example_feature_true', 'multivariate_feature', 'example_feature_payload']
 
-const FEATURE_FLAG_STATUS = {
+const FEATURE_FLAG_STATUS: Record<string, string | boolean> = {
     example_feature_true: true,
     example_feature_false: false,
     multivariate_feature: 'string-value',
     example_feature_payload: 'test',
 }
 
-const FEATURE_FLAG_PAYLOADS = {
+const FEATURE_FLAG_PAYLOADS: Record<string, any> = {
     example_feature_payload: {
         id: 1,
         name: 'example_feature_1_payload',
@@ -23,28 +23,33 @@ const FEATURE_FLAG_PAYLOADS = {
 }
 
 describe('useFeatureFlagPayload hook', () => {
-    given('renderProvider', () => ({ children }) => (
-        <PostHogProvider client={given.posthog}>{children}</PostHogProvider>
-    ))
+    let posthog: PostHog
+    let renderProvider: React.FC<{ children: React.ReactNode }>
 
-    given('posthog', () => ({
-        isFeatureEnabled: (flag) => !!FEATURE_FLAG_STATUS[flag],
-        getFeatureFlag: (flag) => FEATURE_FLAG_STATUS[flag],
-        getFeatureFlagPayload: (flag) => FEATURE_FLAG_PAYLOADS[flag],
-        onFeatureFlags: (callback) => {
-            const activeFlags = []
-            for (const flag in FEATURE_FLAG_STATUS) {
-                if (FEATURE_FLAG_STATUS[flag]) {
-                    activeFlags.push(flag)
+    beforeEach(() => {
+        posthog = {
+            isFeatureEnabled: (flag: string) => !!FEATURE_FLAG_STATUS[flag],
+            getFeatureFlag: (flag: string) => FEATURE_FLAG_STATUS[flag],
+            getFeatureFlagPayload: (flag: string) => FEATURE_FLAG_PAYLOADS[flag],
+            onFeatureFlags: (callback: any) => {
+                const activeFlags: string[] = []
+                for (const flag in FEATURE_FLAG_STATUS) {
+                    if (FEATURE_FLAG_STATUS[flag]) {
+                        activeFlags.push(flag)
+                    }
                 }
-            }
-            callback(activeFlags)
-            return () => {}
-        },
-        featureFlags: {
-            getFlags: () => ACTIVE_FEATURE_FLAGS,
-        },
-    }))
+                callback(activeFlags)
+                return () => {}
+            },
+            featureFlags: {
+                getFlags: () => ACTIVE_FEATURE_FLAGS,
+                hasLoadedFlags: true,
+            } as unknown as PostHog['featureFlags'],
+        } as unknown as PostHog
+
+        // eslint-disable-next-line react/display-name
+        renderProvider = ({ children }) => <PostHogProvider client={posthog}>{children}</PostHogProvider>
+    })
 
     it.each([
         ['example_feature_true', true],
@@ -53,8 +58,8 @@ describe('useFeatureFlagPayload hook', () => {
         ['multivariate_feature', true],
         ['example_feature_payload', true],
     ])('should get the boolean feature flag', (flag, expected) => {
-        let { result } = renderHook(() => useFeatureFlagEnabled(flag), {
-            wrapper: given.renderProvider,
+        const { result } = renderHook(() => useFeatureFlagEnabled(flag), {
+            wrapper: renderProvider,
         })
         expect(result.current).toEqual(expected)
     })
@@ -66,15 +71,15 @@ describe('useFeatureFlagPayload hook', () => {
         ['multivariate_feature', undefined],
         ['example_feature_payload', FEATURE_FLAG_PAYLOADS.example_feature_payload],
     ])('should get the payload feature flag', (flag, expected) => {
-        let { result } = renderHook(() => useFeatureFlagPayload(flag), {
-            wrapper: given.renderProvider,
+        const { result } = renderHook(() => useFeatureFlagPayload(flag), {
+            wrapper: renderProvider,
         })
         expect(result.current).toEqual(expected)
     })
 
     it('should return the active feature flags', () => {
-        let { result } = renderHook(() => useActiveFeatureFlags(), {
-            wrapper: given.renderProvider,
+        const { result } = renderHook(() => useActiveFeatureFlags(), {
+            wrapper: renderProvider,
         })
         expect(result.current).toEqual(['example_feature_true', 'multivariate_feature', 'example_feature_payload'])
     })
@@ -85,8 +90,8 @@ describe('useFeatureFlagPayload hook', () => {
         ['missing', undefined],
         ['multivariate_feature', 'string-value'],
     ])('should get the feature flag variant key', (flag, expected) => {
-        let { result } = renderHook(() => useFeatureFlagVariantKey(flag), {
-            wrapper: given.renderProvider,
+        const { result } = renderHook(() => useFeatureFlagVariantKey(flag), {
+            wrapper: renderProvider,
         })
         expect(result.current).toEqual(expected)
     })

package/src/hooks/__tests__/usePostHog.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import { PostHogProvider, PostHog } from '../../context'
+import { usePostHog } from '..'
+
+jest.useFakeTimers()
+
+const posthog = { posthog_client: true } as unknown as PostHog
+
+describe('usePostHog hook', () => {
+    it('should return the client', () => {
+        const { result } = renderHook(() => usePostHog(), {
+            wrapper: ({ children }: { children: React.ReactNode }) => (
+                <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            ),
+        })
+        expect(result.current).toEqual(posthog)
+    })
+})

package/src/hooks/useActiveFeatureFlags.ts

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
-import { usePostHog } from './usePostHog'
+import { useContext, useEffect, useState } from 'react'
+import { PostHogContext } from '../context'
 
 export function useActiveFeatureFlags(): string[] {
-    const client = usePostHog()
+    const { client, bootstrap } = useContext(PostHogContext)
 
     const [featureFlags, setFeatureFlags] = useState<string[]>(() => client.featureFlags.getFlags())
 
@@ -12,5 +12,10 @@ export function useActiveFeatureFlags(): string[] {
         })
     }, [client])
 
+    // if the client is not loaded yet and we have a bootstrapped value, use it
+    if (!client.featureFlags.hasLoadedFlags && bootstrap?.featureFlags) {
+        return Object.keys(bootstrap.featureFlags)
+    }
+
     return featureFlags
 }

package/src/hooks/useFeatureFlagEnabled.ts

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react'
-import { usePostHog } from './usePostHog'
+import { useContext, useEffect, useState } from 'react'
+import { PostHogContext } from '../context'
+import { isUndefined } from '../utils/type-utils'
 
 export function useFeatureFlagEnabled(flag: string): boolean | undefined {
-    const client = usePostHog()
+    const { client, bootstrap } = useContext(PostHogContext)
 
     const [featureEnabled, setFeatureEnabled] = useState<boolean | undefined>(() => client.isFeatureEnabled(flag))
 
@@ -12,5 +13,12 @@ export function useFeatureFlagEnabled(flag: string): boolean | undefined {
         })
     }, [client, flag])
 
+    const bootstrapped = bootstrap?.featureFlags?.[flag]
+
+    // if the client is not loaded yet, check if we have a bootstrapped value and then true/false it
+    if (!client.featureFlags.hasLoadedFlags && bootstrap?.featureFlags) {
+        return isUndefined(bootstrapped) ? undefined : !!bootstrapped
+    }
+
     return featureEnabled
 }

package/src/hooks/useFeatureFlagPayload.ts

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
 import { JsonType } from 'posthog-js'
-import { usePostHog } from './usePostHog'
+import { useContext, useEffect, useState } from 'react'
+import { PostHogContext } from '../context'
 
 export function useFeatureFlagPayload(flag: string): JsonType {
-    const client = usePostHog()
+    const { client, bootstrap } = useContext(PostHogContext)
 
     const [featureFlagPayload, setFeatureFlagPayload] = useState<JsonType>(() => client.getFeatureFlagPayload(flag))
 
@@ -13,5 +13,10 @@ export function useFeatureFlagPayload(flag: string): JsonType {
         })
     }, [client, flag])
 
+    // if the client is not loaded yet, use the bootstrapped value
+    if (!client.featureFlags.hasLoadedFlags && bootstrap?.featureFlagPayloads) {
+        return bootstrap.featureFlagPayloads[flag]
+    }
+
     return featureFlagPayload
 }

package/src/hooks/useFeatureFlagVariantKey.ts

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
-import { usePostHog } from './usePostHog'
+import { useContext, useEffect, useState } from 'react'
+import { PostHogContext } from '../context'
 
 export function useFeatureFlagVariantKey(flag: string): string | boolean | undefined {
-    const client = usePostHog()
+    const { client, bootstrap } = useContext(PostHogContext)
 
     const [featureFlagVariantKey, setFeatureFlagVariantKey] = useState<string | boolean | undefined>(() =>
         client.getFeatureFlag(flag)
@@ -14,5 +14,9 @@ export function useFeatureFlagVariantKey(flag: string): string | boolean | undef
         })
     }, [client, flag])
 
+    if (!client.featureFlags.hasLoadedFlags && bootstrap?.featureFlags) {
+        return bootstrap.featureFlags[flag]
+    }
+
     return featureFlagVariantKey
 }