fix(growthbook): types (#1439)

Author: philibea

.changeset/witty-carrots-impress.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/use-growthbook': patch
+---
+
+add loadfeature configuration into the providers and moove return function from null to void

packages/use-growthbook/src/AbTestProvider.tsx

@@ -2,12 +2,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error TODO: remove once Growthbook is correctly typed and export
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
-import type { ReactNode } from 'react'
-import { useCallback, useEffect, useMemo } from 'react'
-import type { GrowthBookType } from './types'
+import { type ReactNode, useCallback, useEffect, useMemo } from 'react'
+import type { Attributes, GrowthBookType, LoadConfig } from './types'
 
 export type ToolConfig = {
   apiHost: string
@@ -18,57 +16,60 @@ export type ToolConfig = {
 export type TrackingCallback = (
   experiment: { key: string },
   result: { key: string },
-) => null
+) => void
+
+// TODO: use type from growthbook when it's typed will be export correctly
+// export type TrackingCallback = NonNullable<Context['trackingCallback']>
 
 export type AbTestProviderProps = {
   children: ReactNode
-  anonymousId: string
   config: ToolConfig
   trackingCallback: TrackingCallback
-  errorCallback: (error: string) => null
+  errorCallback: (error: Error | string) => void
+  attributes: Attributes
+  loadConfig?: LoadConfig
 }
 
 const getGrowthBookInstance = ({
   config: { apiHost, clientKey, enableDevMode },
-  anonymousId,
+  attributes,
   trackingCallback,
 }: {
   config: ToolConfig
-  anonymousId: string
+  attributes: Attributes
   trackingCallback: TrackingCallback
 }): GrowthBookType =>
   new GrowthBook({
     apiHost,
     clientKey,
     enableDevMode,
-    attributes: {
-      anonymousId,
-      userId: undefined,
-      organizationId: undefined,
-      organizationType: undefined,
-    },
+    attributes,
     trackingCallback,
   })
+
+const defaultLoadConfig = {
+  autoRefresh: false,
+  timeout: 500,
+}
+
 export const AbTestProvider = ({
   children,
   config,
-  anonymousId,
   trackingCallback,
   errorCallback,
+  attributes,
+  loadConfig = defaultLoadConfig,
 }: AbTestProviderProps) => {
   const growthbook: GrowthBookType = useMemo(
-    () => getGrowthBookInstance({ config, anonymousId, trackingCallback }),
-    [trackingCallback, config, anonymousId],
+    () => getGrowthBookInstance({ config, attributes, trackingCallback }),
+    [trackingCallback, config, attributes],
   )
 
   const loadFeature = useCallback(async () => {
     if (config.clientKey) {
-      await growthbook.loadFeatures({
-        autoRefresh: false,
-        timeout: 500,
-      })
+      await growthbook.loadFeatures(loadConfig)
     }
-  }, [growthbook, config])
+  }, [growthbook, config, loadConfig])
 
   useEffect(() => {
     loadFeature().catch(errorCallback)

packages/use-growthbook/src/__tests__/AbTestProvider.tsx

@@ -10,7 +10,7 @@ const mockGrowthBook = GrowthBook as jest.MockedClass<GrowthBookType>
 
 describe('AbTestProvider', () => {
   let trackingCallback: TrackingCallback
-  let errorCallback: (error: string) => null
+  let errorCallback: (error: Error | string) => void
 
   beforeEach(() => {
     trackingCallback = jest.fn()
@@ -19,16 +19,18 @@ describe('AbTestProvider', () => {
   it('should init GrowthBook once', () => {
     render(
       <AbTestProvider
-        anonymousId="foo"
         config={{
           apiHost: 'host',
           clientKey: 'clientKey',
           enableDevMode: true,
         }}
+        attributes={{
+          anonymousId: 'foo',
+        }}
         trackingCallback={trackingCallback}
         errorCallback={errorCallback}
       >
-        Foo
+        Children
       </AbTestProvider>,
     )
 
@@ -39,16 +41,18 @@ describe('AbTestProvider', () => {
   it('should not init GrowthBook when client key is not defined', () => {
     render(
       <AbTestProvider
-        anonymousId="foo"
         config={{
           apiHost: 'host',
           clientKey: '',
           enableDevMode: true,
         }}
+        attributes={{
+          anonymousId: 'foo',
+        }}
         trackingCallback={trackingCallback}
         errorCallback={errorCallback}
       >
-        Foo
+        Children
       </AbTestProvider>,
     )
 

packages/use-growthbook/src/index.ts

@@ -1,14 +1,17 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 export {
-  FeatureString,
-  FeaturesReady,
-  IfFeatureEnabled,
   useExperiment,
   useFeature,
   withRunExperiment,
   useFeatureIsOn,
   useFeatureValue,
   // @ts-expect-error TODO: remove once Growthbook is correctly typed and export
 } from '@growthbook/growthbook-react'
+export type {
+  FeatureString,
+  FeaturesReady,
+  IfFeatureEnabled,
+  Context,
+  // @ts-expect-error TODO: remove once Growthbook is correctly typed and export
+} from '@growthbook/growthbook-react'
 export { useAbTestAttributes } from './useAbTestAttributes'
 export { AbTestProvider } from './AbTestProvider'

packages/use-growthbook/src/types.ts

@@ -1,14 +1,17 @@
-export type Attributes = Record<string, unknown>
+export type Attributes = Record<string, string | number | undefined>
+
+/**
+ * @param {boolean} [autoRefresh] - false.
+ * @param {number} [timeout] - 500.
+ */
+export type LoadConfig = {
+  autoRefresh: boolean
+  timeout: number
+}
 
 export type GrowthBookType = {
   new (...args: unknown[]): GrowthBookType
   getAttributes: () => Attributes
-  loadFeatures: ({
-    autoRefresh,
-    timeout,
-  }: {
-    autoRefresh: boolean
-    timeout: number
-  }) => Promise<null>
-  setAttributes: (attributes: Attributes) => null
+  loadFeatures: ({ autoRefresh, timeout }: LoadConfig) => Promise<void>
+  setAttributes: (attributes: Attributes) => void
 }

packages/use-growthbook/src/useAbTestAttributes.ts

@@ -8,7 +8,7 @@ import type { Attributes, GrowthBookType } from './types'
 
 export const useAbTestAttributes = (): [
   Attributes,
-  (attributes: Attributes) => null | undefined,
+  (attributes: Attributes) => void,
 ] => {
   const growthBook = useGrowthBook() as GrowthBookType | null