New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@unleash/proxy-client-svelte
Advanced tools
@unleash/proxy-client-svelte - npm Package Compare versions
Comparing version 0.0.6-beta.1 to 0.1.0
| { | ||
| "name": "@unleash/proxy-client-svelte", | ||
| "version": "0.0.6-beta.1", | ||
| "version": "0.1.0", | ||
| "description": "Svelte interface for working with Unleash", | ||
@@ -8,2 +8,3 @@ "files": [ | ||
| ], | ||
| "main": "package/index.js", | ||
| "scripts": { | ||
@@ -10,0 +11,0 @@ "dev": "svelte-kit dev", |
@@ -0,1 +1,13 @@ | ||
| import type { Writable } from 'svelte/store'; | ||
| import type { IContext, IVariant, UnleashClient } from 'unleash-proxy-client'; | ||
| export declare const ContextStateSymbol: unique symbol; | ||
| export declare type eventArgs = [Function, any]; | ||
| export declare type TContext = { | ||
| on: (event: string, ...args: eventArgs) => void; | ||
| updateContext: (context: IContext) => Promise<void>; | ||
| isEnabled: (name: string) => boolean | undefined; | ||
| getVariant: (name: string) => IVariant | undefined; | ||
| client: Writable<UnleashClient | undefined>; | ||
| flagsReady: Writable<boolean>; | ||
| flagsError: Writable<any | null>; | ||
| }; |
| { | ||
| "name": "@unleash/proxy-client-svelte", | ||
| "version": "0.0.6-beta.1", | ||
| "version": "0.1.0", | ||
| "description": "Svelte interface for working with Unleash", | ||
@@ -8,2 +8,3 @@ "files": [ | ||
| ], | ||
| "main": "package/index.js", | ||
| "devDependencies": { | ||
@@ -10,0 +11,0 @@ "@sveltejs/adapter-auto": "next", |
@@ -1,9 +0,1 @@ | ||
| # proxy-client-svelte | ||
| PoC for a Svelte SDK for [Unleash](https://www.getunleash.io/) based on the official [proxy-client-react](https://github.com/Unleash/proxy-client-react). | ||
| # DISCLAIMER: | ||
| This library is meant to be used with the [unleash-proxy](https://github.com/Unleash/unleash-proxy). The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information. | ||
| # Installation | ||
@@ -13,99 +5,45 @@ | ||
| npm install @unleash/proxy-client-svelte | ||
| // or | ||
| # or | ||
| yarn add @unleash/proxy-client-svelte | ||
| ``` | ||
| # Initialization | ||
| # How to use | ||
| Import the provider like this in your entrypoint file (typically index.svelte): | ||
| ## Initialize the client | ||
| ```jsx | ||
| <script lang="ts"> | ||
| let FlagProvider; | ||
| Depending on your needs and specific use-case, prepare one of: | ||
| onMount(async () => { | ||
| const proxyClientSvelte = await import('@unleash/proxy-client-svelte'); | ||
| ({ FlagProvider } = proxyClientSvelte); | ||
| }); | ||
| - [Front-end API](https://docs.getunleash.io/reference/front-end-api) | ||
| - [Unleash Edge](https://docs.getunleash.io/reference/unleash-edge) | ||
| - [Unleash Proxy](https://docs.getunleash.io/reference/unleash-proxy) | ||
| const config = { | ||
| url: 'https://UNLEASH-INSTANCE/api/frontend', | ||
| clientKey: 'CLIENT—SIDE—API—TOKEN', | ||
| refreshInterval: 15, | ||
| appName: 'your-app-name', | ||
| }; | ||
| </script> | ||
| And a respective frontend token (or, if you're using the Unleash Proxy, one of your proxy's designated client keys, previously known as proxy secrets). | ||
| <svelte:component this={FlagProvider} {config}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| Import the provider like this in your entrypoint file (typically index.svelte): | ||
| Alternatively, you can pass your own client in to the FlagProvider: | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { UnleashClient } from '@unleash/proxy-client-svelte'; | ||
| import { FlagProvider } from '@unleash/proxy-client-svelte'; | ||
| let FlagProvider; | ||
| onMount(async () => { | ||
| const proxyClientSvelte = await import('@unleash/proxy-client-svelte'); | ||
| ({ FlagProvider } = proxyClientSvelte); | ||
| }); | ||
| const config = { | ||
| url: 'https://UNLEASH-INSTANCE/api/frontend', | ||
| clientKey: 'CLIENT—SIDE—API—TOKEN', | ||
| refreshInterval: 15, | ||
| appName: 'your-app-name', | ||
| url: '<unleash-url>/api/frontend', // Your Front-end API, Unleash Edge or Unleash Proxy URL | ||
| clientKey: '<your-token>', // Front-end API token (or proxy client key) | ||
| refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates | ||
| appName: 'your-app-name' // The name of your application. It's only used for identifying your application | ||
| }; | ||
| const client = new UnleashClient(config); | ||
| </script> | ||
| <svelte:component this={FlagProvider} unleashClient={client}> | ||
| <FlagProvider {config}> | ||
| <App /> | ||
| </svelte:component> | ||
| </FlagProvider> | ||
| ``` | ||
| ## Deferring client start | ||
| ### Connection options | ||
| By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by: | ||
| To connect this SDK to your Unleash instance's [front-end API](https://docs.getunleash.io/reference/front-end-api), use the URL to your Unleash instance's front-end API (`<unleash-url>/api/frontend`) as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps. | ||
| - setting the `startClient` prop to `false` | ||
| - passing a client instance to the `FlagProvider` | ||
| To connect this SDK to the [Unleash Edge](https://docs.getunleash.io/reference/unleash-edge), use the URL to your Unleash Edge instance as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash Edge instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps. Ensure that your Unleash Edge instance is correctly configured to have access to the feature toggles your `FRONTEND` token is requesting. | ||
| ```jsx | ||
| <svelte:component this={FlagProvider} unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| To connect this SDK to the [Unleash proxy](https://docs.getunleash.io/reference/unleash-proxy), use the proxy's URL and a [proxy client key](https://docs.getunleash.io/reference/api-tokens-and-client-keys#proxy-client-keys). The [_configuration_ section of the Unleash proxy docs](https://docs.getunleash.io/reference/unleash-proxy#configuration) contains more info on how to configure client keys for your proxy. | ||
| Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance. | ||
| To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function. | ||
| ```jsx | ||
| <script lang="ts"> | ||
| const client = new UnleashClient({ | ||
| /* ... */ | ||
| }); | ||
| onMount(() => { | ||
| const asyncProcess = async () => { | ||
| // do async work ... | ||
| client.start(); | ||
| }; | ||
| asyncProcess(); | ||
| }); | ||
| </script> | ||
| <svelte:component this={FlagProvider} unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| # Usage | ||
| ## Check feature toggle status | ||
@@ -115,3 +53,3 @@ | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
@@ -124,5 +62,5 @@ import { useFlag } from '@unleash/proxy-client-svelte'; | ||
| {#if $enabled} | ||
| <SomeComponent /> | ||
| <SomeComponent /> | ||
| {:else} | ||
| <AnotherComponent /> | ||
| <AnotherComponent /> | ||
| {/if} | ||
@@ -135,3 +73,3 @@ ``` | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
@@ -143,8 +81,8 @@ import { useVariant } from '@unleash/proxy-client-svelte'; | ||
| {#if $variant.enabled && $variant.name === 'SomeComponent'} | ||
| <SomeComponent /> | ||
| {:else if $variant.enabled && $variant.name === 'AnotherComponent'} | ||
| <AnotherComponent /> | ||
| {#if variant.enabled && variant.name === 'SomeComponent'} | ||
| <SomeComponent /> | ||
| {:else if variant.enabled && variant.name === 'AnotherComponent'} | ||
| <AnotherComponent /> | ||
| {:else} | ||
| <DefaultComponent /> | ||
| <DefaultComponent /> | ||
| {/if} | ||
@@ -158,5 +96,6 @@ ``` | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useFlagsStatus } from '@unleash/proxy-client-svelte'; | ||
| const { flagsReady, flagsError } = useFlagsStatus(); | ||
@@ -166,5 +105,5 @@ </script> | ||
| {#if !$flagsReady} | ||
| <Loading /> | ||
| <Loading /> | ||
| {:else} | ||
| <MyComponent error={flagsError} /> | ||
| <MyComponent error={flagsError} /> | ||
| {/if} | ||
@@ -175,18 +114,26 @@ ``` | ||
| Follow the following steps in order to update the unleash context: | ||
| Initial context can be specified on a `FlagProvider` `config.context` property. | ||
| ```jsx | ||
| `<FlagProvider config={{ ...config, context: { userId: 123 }}>` | ||
| This code sample shows you how to update the unleash context dynamically: | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte'; | ||
| export let userId: string = undefined; | ||
| export let userId; | ||
| const toggle = useFlag('my-toggle'); | ||
| const updateContext = useUnleashContext(); | ||
| onMount(() => { | ||
| $: { | ||
| // context is updated with userId | ||
| updateContext({ userId }); | ||
| }); | ||
| } | ||
| // OR if you need to perform an action right after new context is applied | ||
| $: { | ||
| async function run() { | ||
| // Can wait for the new flags to pull in from the different context | ||
| await updateContext({ userId }); | ||
@@ -199,1 +146,51 @@ console.log('new flags loaded for', userId); | ||
| ``` | ||
| # Advanced use cases | ||
| ## Deferring client start | ||
| By default, the Unleash client will start polling for toggles immediately when the `FlagProvider` component renders. You can prevent it by setting `startClient` prop to `false`. This is useful when you'd like to for example bootstrap the client and work offline. | ||
| Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance. | ||
| To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function. | ||
| ```svelte | ||
| <script lang="ts"> | ||
| const client = new UnleashClient({ | ||
| /* ... */ | ||
| }); | ||
| onMount(async () => { | ||
| // do async work ... | ||
| client.start(); | ||
| }); | ||
| </script> | ||
| <FlagProvider unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </FlagProvider> | ||
| ``` | ||
| ## Use unleash client directly | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-svelte'; | ||
| export let userId; | ||
| const client = useUnleashClient(); | ||
| const login = () => { | ||
| // login user | ||
| if (client.isEnabled('new-onboarding')) { | ||
| // Send user to new onboarding flow | ||
| } else { | ||
| // send user to old onboarding flow | ||
| } | ||
| }; | ||
| </script> | ||
| <LoginForm {login} /> | ||
| ``` |
@@ -6,15 +6,14 @@ import { getContext } from 'svelte'; | ||
| const { isEnabled, client } = getContext(ContextStateSymbol); | ||
| const $client = get(client); | ||
| const flag = writable(!!isEnabled(name)); | ||
| $client.on('update', () => { | ||
| const enabled = isEnabled(name); | ||
| if (enabled !== flag) { | ||
| flag.set(!!enabled); | ||
| const currentClient = get(client); | ||
| const flag = writable(Boolean(isEnabled(name))); | ||
| const updateFlagValue = () => { | ||
| const enabled = Boolean(isEnabled(name)); | ||
| if (enabled !== get(flag)) { | ||
| flag.set(enabled); | ||
| } | ||
| }); | ||
| $client.on('ready', () => { | ||
| flag.set(isEnabled(name)); | ||
| }); | ||
| }; | ||
| currentClient.on('update', updateFlagValue); | ||
| currentClient.on('ready', updateFlagValue); | ||
| return flag; | ||
| }; | ||
| export default useFlag; |
| declare const useFlagsStatus: () => { | ||
| flagsReady: any; | ||
| flagsError: any; | ||
| flagsReady: import("svelte/store").Writable<boolean>; | ||
| flagsError: import("svelte/store").Writable<any>; | ||
| }; | ||
| export default useFlagsStatus; |
@@ -1,3 +0,2 @@ | ||
| import type { UnleashClient } from 'unleash-proxy-client'; | ||
| declare const useUnleashClient: () => UnleashClient; | ||
| declare const useUnleashClient: () => import("unleash-proxy-client").UnleashClient; | ||
| export default useUnleashClient; |
@@ -1,2 +0,2 @@ | ||
| declare const useUnleashContext: () => any; | ||
| declare const useUnleashContext: () => (context: import("unleash-proxy-client").IContext) => Promise<void>; | ||
| export default useUnleashContext; |
@@ -1,2 +0,2 @@ | ||
| declare const useVariant: (name: string) => import("svelte/store").Writable<any>; | ||
| declare const useVariant: (name: string) => import("svelte/store").Writable<import("unleash-proxy-client").IVariant>; | ||
| export default useVariant; |
@@ -6,16 +6,16 @@ import { getContext } from 'svelte'; | ||
| const { getVariant, client } = getContext(ContextStateSymbol); | ||
| const $client = get(client); | ||
| const variant = getVariant(name); | ||
| const variantStore = writable(variant); | ||
| $client.on('update', () => { | ||
| const currentClient = get(client); | ||
| const initialVariant = getVariant(name); | ||
| const variantStore = writable(initialVariant); | ||
| const updateVariantValue = () => { | ||
| const newVariant = getVariant(name); | ||
| if (newVariant.name !== variant.name || newVariant.enabled !== variant.enabled) { | ||
| const currentVariant = get(variantStore); | ||
| if (newVariant.name !== currentVariant.name || newVariant.enabled !== currentVariant.enabled) { | ||
| variantStore.set(newVariant); | ||
| } | ||
| }); | ||
| $client.on('ready', () => { | ||
| variantStore.set(getVariant(name)); | ||
| }); | ||
| }; | ||
| currentClient.on('update', updateVariantValue); | ||
| currentClient.on('ready', updateVariantValue); | ||
| return variantStore; | ||
| }; | ||
| export default useVariant; |
197
README.md
@@ -1,9 +0,1 @@ | ||
| # proxy-client-svelte | ||
| PoC for a Svelte SDK for [Unleash](https://www.getunleash.io/) based on the official [proxy-client-react](https://github.com/Unleash/proxy-client-react). | ||
| # DISCLAIMER: | ||
| This library is meant to be used with the [unleash-proxy](https://github.com/Unleash/unleash-proxy). The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information. | ||
| # Installation | ||
@@ -13,99 +5,45 @@ | ||
| npm install @unleash/proxy-client-svelte | ||
| // or | ||
| # or | ||
| yarn add @unleash/proxy-client-svelte | ||
| ``` | ||
| # Initialization | ||
| # How to use | ||
| Import the provider like this in your entrypoint file (typically index.svelte): | ||
| ## Initialize the client | ||
| ```jsx | ||
| <script lang="ts"> | ||
| let FlagProvider; | ||
| Depending on your needs and specific use-case, prepare one of: | ||
| onMount(async () => { | ||
| const proxyClientSvelte = await import('@unleash/proxy-client-svelte'); | ||
| ({ FlagProvider } = proxyClientSvelte); | ||
| }); | ||
| - [Front-end API](https://docs.getunleash.io/reference/front-end-api) | ||
| - [Unleash Edge](https://docs.getunleash.io/reference/unleash-edge) | ||
| - [Unleash Proxy](https://docs.getunleash.io/reference/unleash-proxy) | ||
| const config = { | ||
| url: 'https://UNLEASH-INSTANCE/api/frontend', | ||
| clientKey: 'CLIENT—SIDE—API—TOKEN', | ||
| refreshInterval: 15, | ||
| appName: 'your-app-name', | ||
| }; | ||
| </script> | ||
| And a respective frontend token (or, if you're using the Unleash Proxy, one of your proxy's designated client keys, previously known as proxy secrets). | ||
| <svelte:component this={FlagProvider} {config}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| Import the provider like this in your entrypoint file (typically index.svelte): | ||
| Alternatively, you can pass your own client in to the FlagProvider: | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { UnleashClient } from '@unleash/proxy-client-svelte'; | ||
| import { FlagProvider } from '@unleash/proxy-client-svelte'; | ||
| let FlagProvider; | ||
| onMount(async () => { | ||
| const proxyClientSvelte = await import('@unleash/proxy-client-svelte'); | ||
| ({ FlagProvider } = proxyClientSvelte); | ||
| }); | ||
| const config = { | ||
| url: 'https://UNLEASH-INSTANCE/api/frontend', | ||
| clientKey: 'CLIENT—SIDE—API—TOKEN', | ||
| refreshInterval: 15, | ||
| appName: 'your-app-name', | ||
| url: '<unleash-url>/api/frontend', // Your Front-end API, Unleash Edge or Unleash Proxy URL | ||
| clientKey: '<your-token>', // Front-end API token (or proxy client key) | ||
| refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates | ||
| appName: 'your-app-name' // The name of your application. It's only used for identifying your application | ||
| }; | ||
| const client = new UnleashClient(config); | ||
| </script> | ||
| <svelte:component this={FlagProvider} unleashClient={client}> | ||
| <FlagProvider {config}> | ||
| <App /> | ||
| </svelte:component> | ||
| </FlagProvider> | ||
| ``` | ||
| ## Deferring client start | ||
| ### Connection options | ||
| By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by: | ||
| To connect this SDK to your Unleash instance's [front-end API](https://docs.getunleash.io/reference/front-end-api), use the URL to your Unleash instance's front-end API (`<unleash-url>/api/frontend`) as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps. | ||
| - setting the `startClient` prop to `false` | ||
| - passing a client instance to the `FlagProvider` | ||
| To connect this SDK to the [Unleash Edge](https://docs.getunleash.io/reference/unleash-edge), use the URL to your Unleash Edge instance as the `url` parameter. For the `clientKey` parameter, use a `FRONTEND` token generated from your Unleash Edge instance. Refer to the [_how to create API tokens_](https://docs.getunleash.io/how-to/how-to-create-api-tokens) guide for the necessary steps. Ensure that your Unleash Edge instance is correctly configured to have access to the feature toggles your `FRONTEND` token is requesting. | ||
| ```jsx | ||
| <svelte:component this={FlagProvider} unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| To connect this SDK to the [Unleash proxy](https://docs.getunleash.io/reference/unleash-proxy), use the proxy's URL and a [proxy client key](https://docs.getunleash.io/reference/api-tokens-and-client-keys#proxy-client-keys). The [_configuration_ section of the Unleash proxy docs](https://docs.getunleash.io/reference/unleash-proxy#configuration) contains more info on how to configure client keys for your proxy. | ||
| Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance. | ||
| To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function. | ||
| ```jsx | ||
| <script lang="ts"> | ||
| const client = new UnleashClient({ | ||
| /* ... */ | ||
| }); | ||
| onMount(() => { | ||
| const asyncProcess = async () => { | ||
| // do async work ... | ||
| client.start(); | ||
| }; | ||
| asyncProcess(); | ||
| }); | ||
| </script> | ||
| <svelte:component this={FlagProvider} unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </svelte:component> | ||
| ``` | ||
| # Usage | ||
| ## Check feature toggle status | ||
@@ -115,3 +53,3 @@ | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
@@ -124,5 +62,5 @@ import { useFlag } from '@unleash/proxy-client-svelte'; | ||
| {#if $enabled} | ||
| <SomeComponent /> | ||
| <SomeComponent /> | ||
| {:else} | ||
| <AnotherComponent /> | ||
| <AnotherComponent /> | ||
| {/if} | ||
@@ -135,3 +73,3 @@ ``` | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
@@ -143,8 +81,8 @@ import { useVariant } from '@unleash/proxy-client-svelte'; | ||
| {#if $variant.enabled && $variant.name === 'SomeComponent'} | ||
| <SomeComponent /> | ||
| {:else if $variant.enabled && $variant.name === 'AnotherComponent'} | ||
| <AnotherComponent /> | ||
| {#if variant.enabled && variant.name === 'SomeComponent'} | ||
| <SomeComponent /> | ||
| {:else if variant.enabled && variant.name === 'AnotherComponent'} | ||
| <AnotherComponent /> | ||
| {:else} | ||
| <DefaultComponent /> | ||
| <DefaultComponent /> | ||
| {/if} | ||
@@ -158,5 +96,6 @@ ``` | ||
| ```jsx | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useFlagsStatus } from '@unleash/proxy-client-svelte'; | ||
| const { flagsReady, flagsError } = useFlagsStatus(); | ||
@@ -166,5 +105,5 @@ </script> | ||
| {#if !$flagsReady} | ||
| <Loading /> | ||
| <Loading /> | ||
| {:else} | ||
| <MyComponent error={flagsError} /> | ||
| <MyComponent error={flagsError} /> | ||
| {/if} | ||
@@ -175,18 +114,26 @@ ``` | ||
| Follow the following steps in order to update the unleash context: | ||
| Initial context can be specified on a `FlagProvider` `config.context` property. | ||
| ```jsx | ||
| `<FlagProvider config={{ ...config, context: { userId: 123 }}>` | ||
| This code sample shows you how to update the unleash context dynamically: | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte'; | ||
| export let userId: string = undefined; | ||
| export let userId; | ||
| const toggle = useFlag('my-toggle'); | ||
| const updateContext = useUnleashContext(); | ||
| onMount(() => { | ||
| $: { | ||
| // context is updated with userId | ||
| updateContext({ userId }); | ||
| }); | ||
| } | ||
| // OR if you need to perform an action right after new context is applied | ||
| $: { | ||
| async function run() { | ||
| // Can wait for the new flags to pull in from the different context | ||
| await updateContext({ userId }); | ||
@@ -199,1 +146,51 @@ console.log('new flags loaded for', userId); | ||
| ``` | ||
| # Advanced use cases | ||
| ## Deferring client start | ||
| By default, the Unleash client will start polling for toggles immediately when the `FlagProvider` component renders. You can prevent it by setting `startClient` prop to `false`. This is useful when you'd like to for example bootstrap the client and work offline. | ||
| Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance. | ||
| To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function. | ||
| ```svelte | ||
| <script lang="ts"> | ||
| const client = new UnleashClient({ | ||
| /* ... */ | ||
| }); | ||
| onMount(async () => { | ||
| // do async work ... | ||
| client.start(); | ||
| }); | ||
| </script> | ||
| <FlagProvider unleashClient={client} startClient={false}> | ||
| <App /> | ||
| </FlagProvider> | ||
| ``` | ||
| ## Use unleash client directly | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-svelte'; | ||
| export let userId; | ||
| const client = useUnleashClient(); | ||
| const login = () => { | ||
| // login user | ||
| if (client.isEnabled('new-onboarding')) { | ||
| // Send user to new onboarding flow | ||
| } else { | ||
| // send user to old onboarding flow | ||
| } | ||
| }; | ||
| </script> | ||
| <LoginForm {login} /> | ||
| ``` |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by21.57%
21708
- Lines of code
- increased by8.33%
130
Worsened metrics
- Number of lines in readme file
- decreased by-1.57%
188
No dependency changes