@spotify-confidence/react
Advanced tools
Comparing version 0.0.4 to 0.0.6
@@ -9,2 +9,41 @@ # Changelog | ||
## [0.0.6](https://github.com/spotify/confidence-sdk-js/compare/react-v0.0.5...react-v0.0.6) (2024-08-20) | ||
### 🐛 Bug Fixes | ||
* use main&module instead of exports ([5cc01b6](https://github.com/spotify/confidence-sdk-js/commit/5cc01b6c4f7cc9d0857e35ddfcca5cad3ae4d85b)) | ||
* workspace star and no amend ([#192](https://github.com/spotify/confidence-sdk-js/issues/192)) ([82c4f7d](https://github.com/spotify/confidence-sdk-js/commit/82c4f7d0d7fae558ac96617f6d51e29966e19400)) | ||
### 🧹 Chore | ||
* update package json to expose both es and cjs ([5cc01b6](https://github.com/spotify/confidence-sdk-js/commit/5cc01b6c4f7cc9d0857e35ddfcca5cad3ae4d85b)) | ||
### 📚 Documentation | ||
* add documentation to the SDK to resolve MD warnings ([#177](https://github.com/spotify/confidence-sdk-js/issues/177)) ([956594b](https://github.com/spotify/confidence-sdk-js/commit/956594b3f666de3eb9567f7b4855d69a6057d2d0)) | ||
### Dependencies | ||
* The following workspace dependencies were updated | ||
* devDependencies | ||
* @spotify-confidence/sdk bumped to 0.1.6 | ||
## [0.0.5](https://github.com/spotify/confidence-sdk-js/compare/react-v0.0.4...react-v0.0.5) (2024-07-08) | ||
### ✨ New Features | ||
* improved suspense management ([#167](https://github.com/spotify/confidence-sdk-js/issues/167)) ([0a96d8f](https://github.com/spotify/confidence-sdk-js/commit/0a96d8f8d6ea25a13c1ecdf2f5a1598e53e9c1fc)) | ||
### Dependencies | ||
* The following workspace dependencies were updated | ||
* devDependencies | ||
* @spotify-confidence/sdk bumped from 0.1.4 to 0.1.5 | ||
## [0.0.3](https://github.com/spotify/confidence-sdk-js/compare/react-v0.0.2...react-v0.0.3) (2024-06-04) | ||
@@ -11,0 +50,0 @@ |
@@ -14,2 +14,6 @@ import { Closer } from '@spotify-confidence/sdk'; | ||
/** | ||
* Confidence Provider for React | ||
* @public | ||
*/ | ||
export declare type ConfidenceProvider = FC<PropsWithChildren<{ | ||
@@ -23,20 +27,56 @@ confidence: Confidence; | ||
/** | ||
* Confidence Provider for React | ||
* @public | ||
*/ | ||
export declare const ConfidenceProvider: ConfidenceProvider; | ||
/** | ||
* Confidence React instance | ||
* @public | ||
*/ | ||
export declare class ConfidenceReact implements EventSender, Trackable, FlagResolver { | ||
/* Excluded from this release type: delegate */ | ||
constructor(delegate: Confidence); | ||
/** Return configurations of the Confidence instance */ | ||
get config(): Configuration; | ||
/* Excluded from this release type: contextState */ | ||
/** | ||
* Tracks an event | ||
* @param name - event name | ||
* @param message - data to track */ | ||
track(name: string, message?: Value.Struct): void; | ||
/** | ||
* Tracks an event | ||
* @param manager - trackable manager */ | ||
track(manager: Trackable.Manager): Closer; | ||
/** Returns context of the current Confidence instance */ | ||
getContext(): Context; | ||
setContext(context: Context): void; | ||
/** Set Confidence context */ | ||
setContext(context: Context, { transition }?: { | ||
transition?: boolean | undefined; | ||
}): void; | ||
/** Subscribe to flag changes in Confidence */ | ||
subscribe(onStateChange?: StateObserver | undefined): () => void; | ||
clearContext(): void; | ||
/** Clears context of current Confidence instance */ | ||
clearContext({ transition }?: { | ||
transition?: boolean | undefined; | ||
}): void; | ||
/** | ||
* Creates a new ConfidenceReact instance with context | ||
* @param context - Confidence context | ||
* @returns ConfidenceReact instance | ||
*/ | ||
withContext(context: Context): ConfidenceReact; | ||
/** Evaluates a flag */ | ||
evaluateFlag<T extends Value>(path: string, defaultValue: T): FlagEvaluation<Value.Widen<T>>; | ||
/** Returns flag value for a given flag */ | ||
getFlag<T extends Value>(path: string, defaultValue: T): Promise<Value.Widen<T>>; | ||
/** Hook to access Context */ | ||
useContext(): Context; | ||
/** Hook to access the WithContext functionality. Returns a ConfidenceReact instance with the passed context. */ | ||
useWithContext(context: Context): ConfidenceReact; | ||
/** Hook to use EvaluateFlag functionality */ | ||
useEvaluateFlag<T extends Value>(path: string, defaultValue: T): FlagEvaluation<Value.Widen<T>>; | ||
/** Hook to use getFlag functionality */ | ||
useFlag<T extends Value>(path: string, defaultValue: T): Value.Widen<T>; | ||
@@ -46,10 +86,31 @@ private assertContext; | ||
/** | ||
* Enables using Confidence | ||
* @public | ||
*/ | ||
export declare const useConfidence: () => ConfidenceReact; | ||
/** | ||
* Use Confidence Context | ||
* @public | ||
*/ | ||
export declare function useConfidenceContext(confidence?: ConfidenceReact): Context; | ||
/** | ||
* Use EvaluateFlag | ||
* @public */ | ||
export declare function useEvaluateFlag<T extends Value>(path: string, defaultValue: T, confidence?: ConfidenceReact): FlagEvaluation<Value.Widen<T>>; | ||
/** | ||
* Use Flag | ||
* @public | ||
*/ | ||
export declare function useFlag<T extends Value>(path: string, defaultValue: T, confidence?: ConfidenceReact): Value.Widen<T>; | ||
/** | ||
* Use with given Confidence Context | ||
* @public | ||
*/ | ||
export declare function useWithContext(context: Context, parent?: ConfidenceReact): ConfidenceReact; | ||
export { } |
{ | ||
"name": "@spotify-confidence/react", | ||
"license": "Apache-2.0", | ||
"version": "0.0.4", | ||
"version": "0.0.6", | ||
"types": "dist/index.d.ts", | ||
@@ -22,16 +22,17 @@ "files": [ | ||
"types": "dist/index.d.ts", | ||
"main": "dist/index.js" | ||
"main": "dist/index.cjs.js", | ||
"module": "dist/index.esm.js" | ||
}, | ||
"peerDependencies": { | ||
"@spotify-confidence/sdk": "0.1.4", | ||
"@spotify-confidence/sdk": "^0.1.4", | ||
"react": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@microsoft/api-extractor": "*", | ||
"@spotify-confidence/sdk": "0.1.4", | ||
"@microsoft/api-extractor": "7.43.1", | ||
"@spotify-confidence/sdk": "0.1.6", | ||
"react": "^18.2.0", | ||
"rollup": "*" | ||
"rollup": "4.14.2" | ||
}, | ||
"type": "module", | ||
"main": "dist/index.js" | ||
"main": "dist/index.cjs.js", | ||
"module": "dist/index.esm.js" | ||
} |
@@ -42,5 +42,7 @@ # Confidence React SDK | ||
Anywhere in the sub-tree under the `ConfidenceProvider` you can now access the confidence instance with the `useConfidence()` hook. The hook actually returns an instance of `ConfidenceReact` which is a wrapper around the normal `Confidence` API with some slight adaptations to integrate better with React. You can read more about the differences in the following sections. | ||
### Managing context | ||
The `useConfidence()` hook supports the [standard context API's](https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md#setting-the-context). Additionally, the following wrapper component can be used to wrap a sub tree with additional context data. | ||
The `ConfidenceReact` instance supports the [standard context API](https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md#setting-the-context). Additionally, the following wrapper component can be used to wrap a sub tree with additional context data. | ||
@@ -58,8 +60,12 @@ ```ts | ||
- `useFlag(flagName, defaultValue)` will return the flag value or default. | ||
- `useEvaluateFlag(flagName, defaultValue)` will return more details about the flag evaluation, together with the value | ||
- `useEvaluateFlag(flagName, defaultValue)` will return more details about the flag evaluation, together with the value. | ||
Both of the flag hooks integrate with the React Suspense API so that the suspense fallback will be visible until flag values are available. It is therefore important to wrap . | ||
Alternatively the `ConfidenceReact` instance has the same hooks as methods on the instance itself, remember though, that these instance methods are hooks and the normal rules for hooks apply. | ||
Accessing flags will always attempt to provide a up to date value for the flag within the defined timeout, or else default values. | ||
Both of the flag hooks integrate with the React Suspense API so that the suspense fallback will be shown until flag values are available. It is therefore important to wrap any component using the above hooks in a suspense boundary. | ||
The hooks are also reactive so that if the context changes, any components using the hooks will be re-rendered. As dependent components are re-rendered as soon as the context changes, one might expect that would again trigger the suspense boundary while the flag values are resolved. That is normally not the case however as the `ConfidenceReact.setContext` method is by default wrapped in a React [Transition](https://react.dev/reference/react/startTransition). If you would rather manage the transition logic yourself (with for example [React.useTransition()](https://react.dev/reference/react/useTransition)), or if you want to always trigger a suspense fallback to never show stale values, you can turn off the default behavior by calling `ConfidenceReact.setContext({...}, { transition:false })`. | ||
If the hooks can't resolve the flag values withing the timeout specified on the Confidence instance, they will instead return the default value. | ||
### Tracking events | ||
@@ -66,0 +72,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
51984
8
468
77
1
No