diff --git a/docs/sdk/client-side-sdks/angular/angular-usage.md b/docs/sdk/client-side-sdks/angular/angular-usage.md index a54fb00a..88932417 100644 --- a/docs/sdk/client-side-sdks/angular/angular-usage.md +++ b/docs/sdk/client-side-sdks/angular/angular-usage.md @@ -13,14 +13,14 @@ sidebar_custom_props: { icon: material-symbols:toggle-on } As this is a DevCycle OpenFeature Provider, using the [Angular OpenFeature SDK](https://openfeature.dev/docs/reference/technologies/client/web/angular#how-to-use), you need to use the OpenFeature APIs to get the value of a variable. -If you need access to the DevCycle Client for access to the methods like `track` / `allFeatures` / `allVariables`, you can use the `devcycleClient()` method on the `DevCycleAngularProvider` object: +If you need access to the DevCycle Client for access to the methods like `track` / `allFeatures` / `allVariables`, you can use the `devcycleClient` property on the `DevCycleAngularProvider` object: ```typescript const devCycleProvider = new DevCycleAngularProvider( environment.DEVCYCLE_CLIENT_SDK_KEY, { /* DevCycle Options */ } ); -const devcycleClient = devCycleProvider.devcycleClient(); +const devcycleClient = devCycleProvider.devcycleClient; const features = devcycleClient.allFeatures() const variables = devcycleClient.allVariables() ``` @@ -134,4 +134,3 @@ However, these are not valid types for the DevCycle SDK, the DevCycle SDK only s // Valid JSON Object as the default value, will be evaluated by the DevCycle SDK openFeatureClient.getObjectValue('json-flag', { default: 'value' }) ``` - diff --git a/docs/sdk/client-side-sdks/javascript/javascript-gettingstarted.md b/docs/sdk/client-side-sdks/javascript/javascript-gettingstarted.md index b40db478..be51bdf2 100644 --- a/docs/sdk/client-side-sdks/javascript/javascript-gettingstarted.md +++ b/docs/sdk/client-side-sdks/javascript/javascript-gettingstarted.md @@ -14,9 +14,9 @@ sidebar_custom_props: { icon: material-symbols:rocket } - If the JS SDK is installed using NPM, call `initializeDevCycle` with your client key, a user object, and an optional options object. - Otherwise, If you're using the CDN to install the JS SDK, call `DevCycle.initializeDevCycle` with your client key, a user object, and an optional options object. -The user object needs either a `user_id`, or `isAnonymous` set to `true` for an anonymous user. The options object is optional, -but can passed a `logWriter` for a custom logging solution and a `logLevel`, which must be one of `info`, `debug`, `warn` or `error`. -The default options are to set the `logWriter` to be the console and the `logLevel` to `error`. +The user object needs either a `user_id`, or `isAnonymous` set to `true` for an anonymous user. The options object is optional. +It accepts a `logger` implementation for custom logging and a `logLevel`, which must be one of `info`, `debug`, `warn` or `error`. +The default logger writes to the console and the default `logLevel` is `error`. ```javascript const user = { user_id: 'my_user' } @@ -39,7 +39,7 @@ downloaded from DevCycle. The SDK makes a call to get the configuration for anon If you would like to defer initialization of the SDK until your user data is available, you can pass the `deferInitialization` option to the `initializeDevCycle` method. This will cause the SDK to not fetch a configuration until the -[`devcycleClient.identifyUser`](/sdk/client-side-sdks/javascript/javascript-usage#identifying-user) method is called with the user data. +[`devcycleClient.identifyUser`](/sdk/client-side-sdks/javascript/javascript-usage#identifying-users) method is called with the user data. Until that config is retrieved, all calls to retrieve variable values will return their default values. @@ -82,10 +82,11 @@ The SDK exposes various initialization options which can be set on the `initiali | ---------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | enableEdgeDB | Boolean | Enables the usage of EdgeDB for DevCycle that syncs User Data to DevCycle. | | logger | [DVCLogger](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L2) | Logger override to replace default logger | -| logLevel | [DVCDefaultLogLevel](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L12) | Set log level of the default logger. Options are: `debug`, `info`, `warn`, `error`. Defaults to `info`. | +| logLevel | [DVCDefaultLogLevel](https://github.com/DevCycleHQ/js-sdks/blob/main/lib/shared/types/src/logger.ts#L12) | Set log level of the default logger. Options are: `debug`, `info`, `warn`, `error`. Defaults to `error`. | | eventFlushIntervalMS | Number | Controls the interval between flushing events to the DevCycle servers in milliseconds, defaults to 10 seconds. | | flushEventQueueSize | Number | Controls the maximum size the event queue can grow to until a flush is forced. Defaults to `100`. | | maxEventQueueSize | Number | Controls the maximum size the event queue can grow to until events are dropped. Defaults to `1000`. | +| bootstrapConfig | BucketedUserConfig | Bootstraps the SDK with configuration fetched by a server-side renderer, avoiding an initial config request. | | apiProxyURL | String | Allows the SDK to communicate with a proxy of DevCycle bucketing API / client SDK API. | | configCacheTTL | Number | The maximum allowed age of a cached config in milliseconds, defaults to 30 days | | disableConfigCache | Boolean | Disable the use of cached configs | diff --git a/docs/sdk/client-side-sdks/javascript/javascript-usage.md b/docs/sdk/client-side-sdks/javascript/javascript-usage.md index d12fe28c..84c00054 100644 --- a/docs/sdk/client-side-sdks/javascript/javascript-usage.md +++ b/docs/sdk/client-side-sdks/javascript/javascript-usage.md @@ -83,7 +83,7 @@ variable.onUpdate((value) => { }) ``` -## Identifying User +## Identifying Users To identify a different user, or the same user passed into the initialize function with more attributes, pass in the entire user attribute object into `identifyUser`: diff --git a/docs/sdk/client-side-sdks/nextjs/nextjs-usage-app.md b/docs/sdk/client-side-sdks/nextjs/nextjs-usage-app.md index 97d2badd..54684344 100644 --- a/docs/sdk/client-side-sdks/nextjs/nextjs-usage-app.md +++ b/docs/sdk/client-side-sdks/nextjs/nextjs-usage-app.md @@ -34,7 +34,7 @@ const getUserIdentity = async () => { } } -export const { getVariableValue, getClientContext } = setupDevCycle({ +export const { getVariableValue, getClientContext, track } = setupDevCycle({ // Server SDK Key. This will be private and used to retrieve configuration data, so you MUST use the server SDK key. serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '', // Client SDK Key. This will be public and sent to the client, so you MUST use the client SDK key. @@ -85,8 +85,8 @@ It will also await the retrieval of the DevCycle configuration, thus blocking fu have been retrieved and rendering can take place with the correct values. :::caution -Due to a bug in Next.js, realtime updates functionality is only available in Next.js 14.1 and above. If using a version -below that, you _must_ disable realtime updates to prevent clientside errors. To do so, pass the option in your +Realtime updates require a supported Next.js version. The current SDK package requires Next.js 15.1.9 or later. If using an +older SDK release with an older Next.js version, disable realtime updates to prevent client-side errors. To do so, pass the option in your initialization function: ```typescript diff --git a/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md b/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md index c1e501df..0c4da983 100644 --- a/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md +++ b/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md @@ -38,13 +38,13 @@ Install the SDK dependencies, run the following command ### npx ```bash -npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info react-native-sse +npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info ``` ### yarn ```bash -yarn expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info react-native-sse +yarn expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info ``` ## Install Pods @@ -58,7 +58,7 @@ npx pod-install The [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@react-native-async-storage/async-storage) package provides the ability to leverage on Device Storage that is used for caching by the SDK. The [react-native-get-random-values](https://www.npmjs.com/package/react-native-get-random-values) package provides a polyfill for cryptographic functionality used to generate random IDs. The [react-native-device-info](https://www.npmjs.com/package/react-native-device-info) package provides information about the current device running the SDK, which is required to correctly apply targeting rules. -The [react-native-sse](https://www.npmjs.com/package/react-native-sse) package provides SSE connection functionality to enable real-time updates. +The bare React Native SDK uses `react-native-sse` for realtime updates. The Expo package supplies its own Expo-compatible configuration and does not list `react-native-sse` as a package dependency. [//]: # 'wizard-initialize-start' diff --git a/docs/sdk/client-side-sdks/react-native/react-native-usage.md b/docs/sdk/client-side-sdks/react-native/react-native-usage.md index 2fceab3d..494c97bd 100644 --- a/docs/sdk/client-side-sdks/react-native/react-native-usage.md +++ b/docs/sdk/client-side-sdks/react-native/react-native-usage.md @@ -25,16 +25,15 @@ The hook will return the default value if the SDK has not yet finished initializ ```js import { useVariableValue } from '@devcycle/react-native-client-sdk' +import { Text } from 'react-native' const DevCycleFeaturePage = () => { const variableKey = 'my-feature' - const defaultValue = 'false' + const defaultValue = false const featureVariable = useVariableValue(variableKey, defaultValue) return ( -
- {featureVariable ?
Variable on!
:
Variable off
} -
+ {featureVariable ? 'Variable on!' : 'Variable off'} ) } ``` diff --git a/docs/sdk/client-side-sdks/react-native/react-native.md b/docs/sdk/client-side-sdks/react-native/react-native.md index dee67079..b93ea533 100644 --- a/docs/sdk/client-side-sdks/react-native/react-native.md +++ b/docs/sdk/client-side-sdks/react-native/react-native.md @@ -31,7 +31,7 @@ The React Native SDK is available as a package on npm. A separate React Native E ## Requirements -This SDK is compatible with _React Native_ version 0.64.0 and above. +This SDK requires _React Native_ version 0.68.0 or above. The package also requires React 17.0.2 or above. :::warning diff --git a/docs/sdk/client-side-sdks/react/react-usage.md b/docs/sdk/client-side-sdks/react/react-usage.md index 999de7c7..e817f88e 100644 --- a/docs/sdk/client-side-sdks/react/react-usage.md +++ b/docs/sdk/client-side-sdks/react/react-usage.md @@ -89,6 +89,21 @@ devcycleClient.identifyUser(user) The client object can be obtained from the [useDevCycleClient](#getting-the-devcycle-client) hook. +## Conditional Rendering Helpers + +The SDK also exports `RenderIfEnabled` and `SwapComponents` helpers for rendering components from a variable value. +`RenderIfEnabled` accepts a `variableKey` and defaults to rendering when the variable evaluates to `true`: + +```jsx +import { RenderIfEnabled } from '@devcycle/react-client-sdk' + + + + +``` + +Use `targetValue` and `defaultValue` when the variable should match a value other than `true`. + To wait on Variables that will be returned from the `identify` call, you can pass in a callback or use the Promise returned if no callback is passed in: ```js diff --git a/docs/sdk/server-side-sdks/nestjs/nestjs-gettingstarted.md b/docs/sdk/server-side-sdks/nestjs/nestjs-gettingstarted.md index 91b6ae34..0a6666fa 100644 --- a/docs/sdk/server-side-sdks/nestjs/nestjs-gettingstarted.md +++ b/docs/sdk/server-side-sdks/nestjs/nestjs-gettingstarted.md @@ -21,6 +21,7 @@ import { DevCycleModule } from '@devcycle/nestjs-server-sdk' DevCycleModule.forRoot({ key: '', + // DevCycleModule uses Local Bucketing. Configure Cloud Bucketing with the Node.js SDK instead. }) ``` @@ -70,8 +71,8 @@ DevCycleModule.forRoot({ userFactory: async (context: ExecutionContext) => { const userData = await fetchUserData(context) return { - user_id: req.user.id, - email: req.user.email, + user_id: userData.id, + email: userData.email, } }, }) diff --git a/docs/sdk/server-side-sdks/node/node-bootstrapping.md b/docs/sdk/server-side-sdks/node/node-bootstrapping.md index ae068d2e..203b6c87 100644 --- a/docs/sdk/server-side-sdks/node/node-bootstrapping.md +++ b/docs/sdk/server-side-sdks/node/node-bootstrapping.md @@ -18,7 +18,8 @@ To support these use-cases, the Node.js SDK provides functionality for generatin To use it, you must also have the DevCycle JS Client SDK installed in your server application. Follow the [setup docs](/sdk/client-side-sdks/javascript/javascript-install) for that SDK to get started. -To enable this feature, initialize a Node.js client on the server and enable client bootstrapping mode: +To enable this feature, initialize a Node.js client on the server and enable client bootstrapping mode. The `@devcycle/js-client-sdk` +package must also be installed in the server application because the Node SDK uses it to build the client bootstrap payload: ```javascript // devcycle.ts @@ -64,8 +65,8 @@ export default function App() { } ``` -Make sure you also pass the same "user" that was used to obtain the bootstrap config. You must also provide the client SDK key -so that the client-side SDK can initialize. The SDK key you should use is available as the `sdkKey` field of the bootstrap config. +Make sure you also pass the same `user` that was used to obtain the bootstrap config. You must also provide the client SDK key +so that the client-side SDK can initialize. The key is available as the `clientSDKKey` field of the bootstrap config. ## Example Here is an example that connects all these pieces in Remix with the React SDK: diff --git a/docs/sdk/server-side-sdks/node/node-gettingstarted.md b/docs/sdk/server-side-sdks/node/node-gettingstarted.md index 66585632..eb0d8715 100644 --- a/docs/sdk/server-side-sdks/node/node-gettingstarted.md +++ b/docs/sdk/server-side-sdks/node/node-gettingstarted.md @@ -18,11 +18,13 @@ to be initialized. JS Example: ```javascript -const DevCycle = require('@devcycle/nodejs-server-sdk') +const { initializeDevCycle } = require('@devcycle/nodejs-server-sdk') -const devcycleClient = await DevCycle.initializeDevCycle( - process.env.DEVCYCLE_SERVER_SDK_KEY, -).onClientInitialized() +initializeDevCycle(process.env.DEVCYCLE_SERVER_SDK_KEY) + .onClientInitialized() + .then((devcycleClient) => { + // Use the initialized client here. + }) ``` [//]: # 'wizard-initialize-end' @@ -38,17 +40,20 @@ const devcycleClient = await initializeDevCycle( ## Initialization Options -The SDK exposes various initialization options which can be set on the `initialization()` method: +The SDK exposes various initialization options which can be passed to `initializeDevCycle`: [DevCycleOptions Typescript Schema](https://github.com/search?q=repo%3ADevCycleHQ%2Fjs-sdks+export+interface+DevCycleOptions+language%3ATypeScript+path%3A*types.ts&type=code) ```javascript -const devcycleClient = await DevCycle.initializeDevCycle( - '', - { - // Insert Options - }, -).onClientInitialized() +const { initializeDevCycle } = require('@devcycle/nodejs-server-sdk') + +initializeDevCycle('', { + // Insert Options +}) + .onClientInitialized() + .then((devcycleClient) => { + // Use the initialized client here. + }) ``` | DevCycle Option | Type | Description | diff --git a/docs/sdk/server-side-sdks/node/node.md b/docs/sdk/server-side-sdks/node/node.md index f7b14619..061e7d3a 100644 --- a/docs/sdk/server-side-sdks/node/node.md +++ b/docs/sdk/server-side-sdks/node/node.md @@ -17,5 +17,7 @@ If you need access to [EdgeDB](https://docs.devcycle.com/platform/feature-flags/ The SDK is available as a package on NPM, with a full Typescript interface. It is also open source and can be viewed on the [DevCycle GitHub](https://github.com/DevCycleHQ/js-sdks/tree/main/sdk/nodejs). +The Node.js SDK requires Node.js 16 or later. + [![Npm package version](https://badgen.net/npm/v/@devcycle/nodejs-server-sdk)](https://www.npmjs.com/package/@devcycle/nodejs-server-sdk) [![GitHub](https://img.shields.io/github/stars/devcyclehq/js-sdks.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/js-sdks)