|
| 1 | +# LaunchDarkly Svelte Client SDK |
| 2 | + |
| 3 | +# ⛔️⛔️⛔️⛔️ |
| 4 | + |
| 5 | +> [!CAUTION] |
| 6 | +> This library is a alpha version and should not be considered ready for production use while this message is visible. |
| 7 | +
|
| 8 | +This is the Svelte Client SDK for LaunchDarkly. It is a wrapper around the LaunchDarkly JavaScript SDK but with a Svelte-friendly API. |
| 9 | + |
| 10 | +## Getting started |
| 11 | + |
| 12 | +First, install the package: |
| 13 | + |
| 14 | +```bash |
| 15 | +# npm |
| 16 | +npm install @launchdarkly/svelte-client-sdk |
| 17 | + |
| 18 | +# yarn |
| 19 | +yarn add @launchdarkly/svelte-client-sdk |
| 20 | +``` |
| 21 | + |
| 22 | +Then, initialize the SDK with your client-side ID using the `LDProvider` component: |
| 23 | + |
| 24 | +```svelte |
| 25 | +<script> |
| 26 | + import { LDProvider } from '@launchdarkly/svelte-client-sdk'; |
| 27 | + import App from './App.svelte'; |
| 28 | +</script> |
| 29 | +
|
| 30 | +// Use context relevant to your application |
| 31 | +const context = { |
| 32 | + kind: 'user', |
| 33 | + key: 'user-key', |
| 34 | +}; |
| 35 | +
|
| 36 | +<LDProvider clientID="your-client-side-id" {context}> |
| 37 | + <App /> |
| 38 | +</LDProvider> |
| 39 | +``` |
| 40 | + |
| 41 | +Now you can use the `LDFlag` component to conditionally render content based on feature flags: |
| 42 | + |
| 43 | +```svelte |
| 44 | +<script> |
| 45 | + import { LDFlag } from '@launchdarkly/svelte-client-sdk'; |
| 46 | +</script> |
| 47 | +
|
| 48 | +<LDFlag flag={'my-feature-flag'}> |
| 49 | + <div slot="on"> |
| 50 | + <p>this will render if the feature flag is on</p> |
| 51 | + </div> |
| 52 | + <div slot="off"> |
| 53 | + <p>this will render if the feature flag is off</p> |
| 54 | + </div> |
| 55 | +</LDFlag> |
| 56 | +``` |
| 57 | + |
| 58 | +## Advanced usage |
| 59 | + |
| 60 | +### Changing user context |
| 61 | + |
| 62 | +You can change the user context by using the `identify` function from the `LD` object: |
| 63 | + |
| 64 | +```svelte |
| 65 | +<script> |
| 66 | + import { LD } from '@launchdarkly/svelte-client-sdk'; |
| 67 | +
|
| 68 | + function handleLogin() { |
| 69 | + LD.identify({ key: 'new-user-key' }); |
| 70 | + } |
| 71 | +</script> |
| 72 | +
|
| 73 | +<button on:click={handleLogin}>Login</button> |
| 74 | +``` |
| 75 | + |
| 76 | +### Getting feature flag values |
| 77 | + |
| 78 | +#### Getting immediate flag value |
| 79 | + |
| 80 | +If you need to get the value of a flag at time of evaluation you can use the `useFlag` function: |
| 81 | + |
| 82 | +```svelte |
| 83 | +<script> |
| 84 | + import { LD } from '@launchdarkly/svelte-client-sdk'; |
| 85 | +
|
| 86 | + function handleClick() { |
| 87 | + const isFeatureFlagOn = LD.useFlag('my-feature-flag', false); |
| 88 | + console.log(isFeatureFlagOn); |
| 89 | + } |
| 90 | +</script> |
| 91 | +
|
| 92 | +<button on:click={handleClick}>Check flag value</button> |
| 93 | +``` |
| 94 | + |
| 95 | +**Note:** Please note that `useFlag` function will return the current value of the flag at the time of evaluation, which means you won't get notified if the flag value changes. This is useful for cases where you need to get the value of a flag at a specific time like a function call. If you need to get notified when the flag value changes, you should use the `LDFlag` component, the `watch` function or the `flags` object depending on your use case. |
| 96 | + |
| 97 | +#### Watching flag value changes |
| 98 | + |
| 99 | +If you need to get notified when a flag value changes you can use the `watch` function. The `watch` function is an instance of [Svelte Store](https://svelte.dev/docs/svelte-store), which means you can use it with the `$` store subscriber syntax or the `subscribe` method. Here is an example of how to use the `watch` function: |
| 100 | + |
| 101 | +```svelte |
| 102 | +<script> |
| 103 | + import { LD } from '@launchdarkly/svelte-client-sdk'; |
| 104 | +
|
| 105 | + $: flagValue = LD.watch('my-feature-flag'); |
| 106 | +</script> |
| 107 | +
|
| 108 | +<p>{$flagValue}</p> |
| 109 | +``` |
| 110 | + |
| 111 | +#### Getting all flag values |
| 112 | + |
| 113 | +If you need to get all flag values you can use the `flags` object. The `flags` object is an instance of [Svelte Store](https://svelte.dev/docs/svelte-store), which means you can use it with the `$` store subscriber syntax or the `subscribe` method. Here is an example of how to use the `flags` object: |
| 114 | + |
| 115 | +```svelte |
| 116 | +<script> |
| 117 | + import { LD } from '@launchdarkly/svelte-client-sdk'; |
| 118 | +
|
| 119 | + $: allFlags = LD.flags; |
| 120 | +</script> |
| 121 | +
|
| 122 | +{#each Object.keys($allFlags) as flagName} |
| 123 | + <p>{flagName}: {$allFlags[flagName]}</p> |
| 124 | +{/each} |
| 125 | +``` |
| 126 | + |
| 127 | +## About LaunchDarkly |
| 128 | + |
| 129 | +- LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard. With LaunchDarkly, you can: |
| 130 | + - Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases. |
| 131 | + - Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?). |
| 132 | + - Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file. |
| 133 | + - Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan). |
| 134 | + - Disable parts of your application to facilitate maintenance, without taking everything offline. |
| 135 | +- LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read [our documentation](https://docs.launchdarkly.com/sdk) for a complete list. |
| 136 | +- Explore LaunchDarkly |
| 137 | + - [launchdarkly.com](https://www.launchdarkly.com/ 'LaunchDarkly Main Website') for more information |
| 138 | + - [docs.launchdarkly.com](https://docs.launchdarkly.com/ 'LaunchDarkly Documentation') for our documentation and SDK reference guides |
| 139 | + - [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/ 'LaunchDarkly API Documentation') for our API documentation |
| 140 | + - [blog.launchdarkly.com](https://blog.launchdarkly.com/ 'LaunchDarkly Blog Documentation') for the latest product updates |
| 141 | + |
| 142 | +## Credits |
| 143 | + |
| 144 | +- Original Svelte SDK code contributed by [Robinson Marquez](https://github.com/nosnibor89) |
0 commit comments