From 5ba5edcaca8e76d48ea99d871dd95bc5259e9673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 29 Jun 2022 12:04:21 +0100 Subject: [PATCH] docs: add svelte and vue front-end SDKs (#1760) * docs: add svelte and vue front-end SDKs * docs: add solid and react native SDKs as Community SDKs * fix: reorder community SDKs so that they are sorted alphabetically * fix: note and table * fix: note scope, reorder community SDKs alphabetically by tech * fix: make some text consistent across SDKs * fix: svelte docs * Update website/docs/sdks/proxy-svelte.md Co-authored-by: Thomas Heartman * fix: headings Co-authored-by: Thomas Heartman --- README.md | 10 +- website/docs/sdks/index.md | 143 ++++++++++++++------------ website/docs/sdks/proxy-react.md | 39 ++++--- website/docs/sdks/proxy-svelte.md | 41 ++++---- website/docs/sdks/proxy-vue.md | 19 ++-- website/docs/sdks/unleash-proxy.md | 10 +- website/docs/user_guide/quickstart.md | 10 +- 7 files changed, 143 insertions(+), 129 deletions(-) diff --git a/README.md b/README.md index 4997cc7afe..cd892d441b 100644 --- a/README.md +++ b/README.md @@ -187,10 +187,12 @@ To connect your application to Unleash you'll need to use a client SDK for your The front-end SDKs connects via the [Unleash Proxy](https://docs.getunleash.io/sdks/unleash-proxy) in order to ensure privacy, scalability and security. -- [Android SDK](https://docs.getunleash.io/sdks/android_proxy_sdk) -- [Javascript SDK](https://docs.getunleash.io/sdks/proxy-javascript) -- [React SDK](https://docs.getunleash.io/sdks/proxy-react) -- [iOS SDK](https://docs.getunleash.io/sdks/proxy-ios) +- [Android Proxy SDK](https://docs.getunleash.io/sdks/android_proxy_sdk) +- [iOS Proxy SDK](https://docs.getunleash.io/sdks/proxy-ios) +- [JavaScript Proxy SDK](https://docs.getunleash.io/sdks/proxy-javascript) +- [React Proxy SDK](https://docs.getunleash.io/sdks/proxy-react) +- [Svelte Proxy SDK](https://docs.getunleash.io/sdks/proxy-svelte) +- [Vue Proxy SDK](https://docs.getunleash.io/sdks/proxy-vue) **Community SDKs:** diff --git a/website/docs/sdks/index.md b/website/docs/sdks/index.md index cce9bb8035..848859f1bc 100644 --- a/website/docs/sdks/index.md +++ b/website/docs/sdks/index.md @@ -31,7 +31,8 @@ For security and performance reasons, the front-end SDKs do not communicate dire - [iOS Proxy SDK](/sdks/proxy-ios) - [Javascript SDK](/sdks/proxy-javascript) - [React Proxy SDK](/sdks/proxy-react) - +- [Svelte Proxy SDK](/sdks/proxy-svelte) +- [Vue Proxy SDK](/sdks/proxy-vue) ### Server-side SDK compatibility table @@ -45,76 +46,79 @@ The below table shows what features the various server-side SDKs support. Note t - **N/A**: Not applicable to this SDK :::note + If you see an item marked with a ❌ that you would find useful, feel free to reach out to us ([on Slack](https://slack.unleash.run/), for instance) with your use case. It may not be something we can prioritize right now, but if you'd like to contribute it back to the community, we'd love to help you build it. + ::: - -| Capability | [Java](/sdks/java_sdk) | [Node.js](/sdks/node_sdk) | [Go](/sdks/go_sdk) | [Python](/sdks/python_sdk) | [Ruby](/sdks/ruby_sdk) | [.NET](/sdks/dot_net_sdk) | [PHP](/sdks/php_sdk) | [Rust](https://github.com/unleash/unleash-client-rust) | [Unleash Proxy](unleash-proxy.md) | -|------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------:|:-------------------------:|:------------------:|:--------------------------:|:----------------------:|:-------------------------:|:--------------------:|:------------------------------------------------------:|:---------------------------------:| -| **Category: Initialization** | | | | | | | | | | -| Async initialization | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | N/A | -| Can block until synchronized | ✅ | ✅ | ✅ | ⭕ | ⭕ | ✅ | ✅ | ⭕ | N/A | -| Default refresh interval | 10s | 15s | 15s | 15s | 15s | 30s | 30s | 15s | 5s | -| Default metrics interval | 60s | 60s | 60s | 60s | 60s | 60s | 30s | 15s | 30s | -| Context provider | ✅ | N/A | N/A | N/A | N/A | ✅ | ✅ | N/A | N/A | -| Global fallback function | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | N/A | -| Toggle Query: `namePrefix` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | -| Toggle Query: `tags` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | -| Toggle Query: `project_name` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | N/A | ⭕ | ✅ | -| **Category: Custom Headers** | | | | | | | | | | -| static | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | N/A | -| function | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ✅ | ⭕ | N/A | -| **Category: Built-in strategies** | | | | | | | | | | -| [Standard](../user_guide/activation_strategy#standard) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Gradual rollout](../user_guide/activation_strategy#gradual-rollout) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Gradual rollout: custom stickiness](../user_guide/activation_strategy#customize-stickiness-beta) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | -| [UserID](../user_guide/activation_strategy#userids) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [IP](../user_guide/activation_strategy#ips) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [IP](../user_guide/activation_strategy#ips): CIDR syntax | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ⭕ | ✅ | ✅ | -| [Hostname](../user_guide/activation_strategy#hostnames) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| **Category: [Custom strategies](../advanced/custom_activation_strategy)** | | | | | | | | | | -| Basic support | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| **Category: [Strategy constraints](../advanced/strategy_constraints)** | | | | | | | | | | -| Basic support (`IN`, `NOT_IN` operators) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Advanced support (Semver, date, numeric and extended string operators) (introduced in) | ✅ (5.1) | ✅ (3.12) | ✅ (3.3) | ✅ (5.1) | ✅ (4.2) | ✅ (2.1) | ✅ (1.3.1) | ⭕ | ✅ (0.8) | -| **Category: [Unleash Context](../user_guide/unleash_context)** | | | | | | | | | | -| Static fields (`environment`, `appName`) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Defined fields | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Custom properties | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| **Category: [`isEnabled`](../client-specification#implementation-of-isenabled)** | | | | | | | | | | -| Can take context | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Override fallback value | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Fallback function | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ⭕ | ⭕ | ✅ | -| **Category: [Variants](../advanced/toggle_variants)** | | | | | | | | | | -| Basic support | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Custom fallback variant | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | -| Custom weight | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | -| [Custom stickiness (beta)](../advanced/stickiness#custom-stickiness-beta) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | -| **Category: Local backup** | | | | | | | | | | -| File based backup | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | -| **Category: Usage metrics** | | | | | | | | | | -| Can disable metrics | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Client registration | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Basic usage metrics (yes/no) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Impression data](../advanced/impression-data.md) | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | N/A | -| **Category: Bootstrap (beta)** | | | | | | | | | | -| Bootstrap from file | ✅ | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ⭕ | ✅ | -| Custom Bootstrap implementation | ✅ | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ⭕ | ✅ | +| Capability | [Java](/sdks/java_sdk) | [Node.js](/sdks/node_sdk) | [Go](/sdks/go_sdk) | [Python](/sdks/python_sdk) | [Ruby](/sdks/ruby_sdk) | [.NET](/sdks/dot_net_sdk) | [PHP](/sdks/php_sdk) | [Rust](https://github.com/unleash/unleash-client-rust) | [Unleash Proxy](unleash-proxy.md) | +| --- | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | +| **Category: Initialization** | | | | | | | | | | +| Async initialization | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | N/A | +| Can block until synchronized | ✅ | ✅ | ✅ | ⭕ | ⭕ | ✅ | ✅ | ⭕ | N/A | +| Default refresh interval | 10s | 15s | 15s | 15s | 15s | 30s | 30s | 15s | 5s | +| Default metrics interval | 60s | 60s | 60s | 60s | 60s | 60s | 30s | 15s | 30s | +| Context provider | ✅ | N/A | N/A | N/A | N/A | ✅ | ✅ | N/A | N/A | +| Global fallback function | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | N/A | +| Toggle Query: `namePrefix` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | +| Toggle Query: `tags` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | +| Toggle Query: `project_name` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | N/A | ⭕ | ✅ | +| **Category: Custom Headers** | | | | | | | | | | +| static | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | N/A | +| function | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ✅ | ⭕ | N/A | +| **Category: Built-in strategies** | | | | | | | | | | +| [Standard](../user_guide/activation_strategy#standard) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Gradual rollout](../user_guide/activation_strategy#gradual-rollout) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Gradual rollout: custom stickiness](../user_guide/activation_strategy#customize-stickiness-beta) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | +| [UserID](../user_guide/activation_strategy#userids) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [IP](../user_guide/activation_strategy#ips) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [IP](../user_guide/activation_strategy#ips): CIDR syntax | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ⭕ | ✅ | ✅ | +| [Hostname](../user_guide/activation_strategy#hostnames) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| **Category: [Custom strategies](../advanced/custom_activation_strategy)** | | | | | | | | | | +| Basic support | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| **Category: [Strategy constraints](../advanced/strategy_constraints)** | | | | | | | | | | +| Basic support (`IN`, `NOT_IN` operators) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Advanced support (Semver, date, numeric and extended string operators) (introduced in) | ✅ (5.1) | ✅ (3.12) | ✅ (3.3) | ✅ (5.1) | ✅ (4.2) | ✅ (2.1) | ✅ (1.3.1) | ⭕ | ✅ (0.8) | +| **Category: [Unleash Context](../user_guide/unleash_context)** | | | | | | | | | | +| Static fields (`environment`, `appName`) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Defined fields | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Custom properties | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| **Category: [`isEnabled`](../client-specification#implementation-of-isenabled)** | | | | | | | | | | +| Can take context | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Override fallback value | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Fallback function | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ⭕ | ⭕ | ✅ | +| **Category: [Variants](../advanced/toggle_variants)** | | | | | | | | | | +| Basic support | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Custom fallback variant | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | +| Custom weight | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | +| [Custom stickiness (beta)](../advanced/stickiness#custom-stickiness-beta) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | +| **Category: Local backup** | | | | | | | | | | +| File based backup | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ⭕ | ✅ | +| **Category: Usage metrics** | | | | | | | | | | +| Can disable metrics | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Client registration | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Basic usage metrics (yes/no) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Impression data](../advanced/impression-data.md) | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | N/A | +| **Category: Bootstrap (beta)** | | | | | | | | | | +| Bootstrap from file | ✅ | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ⭕ | ✅ | +| Custom Bootstrap implementation | ✅ | ✅ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ⭕ | ✅ | ## Community SDKs ❤️ {#community-sdks} Here's some of the fantastic work our community has done to make Unleash work in even more contexts. If you still can't find your favorite language, let us know and we'd love to help you create the client for it! -- [afontaine/unleash_ex](https://gitlab.com/afontaine/unleash_ex) (Elixir) -- [AppsFlyer/clojure-unleash](https://github.com/AppsFlyer/unleash-client-clojure) (Clojure) -- [aruizs/unleash-client-cpp](https://github.com/aruizs/unleash-client-cpp) (C++) -- [mikefrancis/laravel-unleash](https://github.com/mikefrancis/laravel-unleash) (Laravel - PHP) -- [minds/unleash-client-php](https://gitlab.com/minds/unleash-client-php) (PHP) -- [ngx-unleash-proxy-client](https://github.com/snowfrogdev/snowfrogdev/tree/main/packages/ngx-unleash-proxy-client) (Angular - TypeScript) -- [pmb0/nestjs-unleash](https://github.com/pmb0/nestjs-unleash) (NestJS - Node.js) -- [silvercar/unleash-client-kotlin](https://github.com/silvercar/unleash-client-kotlin) (Kotlin) -- [Stogon/unleash-bundle](https://git.stogon.io/Stogon/unleash-bundle/) (PHP - Symfony) -- [uekoetter.dev/unleash-client-dart](https://pub.dev/packages/unleash) (Dart) +- Angular - TypeScript ([ngx-unleash-proxy-client](https://github.com/snowfrogdev/snowfrogdev/tree/main/packages/ngx-unleash-proxy-client)) +- Clojure ([AppsFlyer/clojure-unleash](https://github.com/AppsFlyer/unleash-client-clojure)) +- C++ ([aruizs/unleash-client-cpp](https://github.com/aruizs/unleash-client-cpp)) +- Dart ([uekoetter.dev/unleash-client-dart](https://pub.dev/packages/unleash)) +- Elixir ([afontaine/unleash_ex](https://gitlab.com/afontaine/unleash_ex)) +- Kotlin ([silvercar/unleash-client-kotlin](https://github.com/silvercar/unleash-client-kotlin)) +- Laravel - PHP ([mikefrancis/laravel-unleash](https://github.com/mikefrancis/laravel-unleash)) +- NestJS - Node.js ([pmb0/nestjs-unleash](https://github.com/pmb0/nestjs-unleash)) +- PHP ([minds/unleash-client-php](https://gitlab.com/minds/unleash-client-php)) +- PHP - Symfony ([Stogon/unleash-bundle](https://git.stogon.io/Stogon/unleash-bundle/)) +- React Native / Expo ([nunogois/proxy-client-react-native](https://github.com/nunogois/proxy-client-react-native)) +- Solid ([nunogois/proxy-client-solid](https://github.com/nunogois/proxy-client-solid)) - _...your implementation for your favorite language._ ### Implement your own SDK {#implement-your-own-sdk} @@ -130,13 +134,16 @@ Once they have been initialised, all Unleash clients will continue to work perfe Because the SDKs and the Unleash Proxy cache their feature toggle states locally and only communicate with the Unleash server (in the case of the server-side SDKs and the Proxy) or the Proxy (in the case of front-end SDKs) at predetermined intervals, a broken connection only means that they won't get any new updates. -Unless the SDK supports [bootstrapping](#bootstrapping) it *will* need to connect to Unleash at startup to get its initial feature toggle data set. If the SDK doesn't have a feature toggle data set available, all toggles will fall back to evaluating as disabled or as the specified default value (in SDKs that support that). +Unless the SDK supports [bootstrapping](#bootstrapping) it _will_ need to connect to Unleash at startup to get its initial feature toggle data set. If the SDK doesn't have a feature toggle data set available, all toggles will fall back to evaluating as disabled or as the specified default value (in SDKs that support that). ### Bootstrapping -By default, all SDKs reach out to the Unleash Server at startup to fetch their toggle configuration. Additionally some of the server-side SDKs and the Proxy (see the above [compatibility table](#server-side-sdk-compatibility-table)) also support *bootstrapping*, which allows them to get their toggle configuration from a file, the environment, or other local resources. These SDKs can work without any network connection whatsoever. +By default, all SDKs reach out to the Unleash Server at startup to fetch their toggle configuration. Additionally some of the server-side SDKs and the Proxy (see the above [compatibility table](#server-side-sdk-compatibility-table)) also support _bootstrapping_, which allows them to get their toggle configuration from a file, the environment, or other local resources. These SDKs can work without any network connection whatsoever. Bootstrapping is also supported by the following front-end client SDKs: -- [the JavaScript proxy client](/sdks/proxy-javascript) -- [the React Proxy client](/sdks/proxy-react) -- [the Android proxy client](/sdks/android_proxy_sdk) + +- [Android SDK](/sdks/android_proxy_sdk) +- [Javascript SDK](/sdks/proxy-javascript) +- [React Proxy SDK](/sdks/proxy-react) +- [Svelte Proxy SDK](/sdks/proxy-svelte) +- [Vue Proxy SDK](/sdks/proxy-vue) diff --git a/website/docs/sdks/proxy-react.md b/website/docs/sdks/proxy-react.md index 3906ec2529..ddbed7fa8b 100644 --- a/website/docs/sdks/proxy-react.md +++ b/website/docs/sdks/proxy-react.md @@ -1,12 +1,11 @@ --- id: proxy-react -title: React proxy SDK +title: React Proxy SDK --- 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. -For more detailed information, check out [the React Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-react). - +For more detailed information, check out the [React Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-react). ## Installation @@ -21,12 +20,14 @@ npm install @unleash/proxy-client-react unleash-proxy-client The snippet below shows you how to initialize the client. We recommend that you do this in your entry point file (typically index.js/ts) to ensure that you only have _one_ instance of it. The configuration variables are: + - **`url`** - Your proxy's URL. + Your proxy's URL. + - **`clientKey`** - One of your proxy's [designated client keys (also known as proxy secrets)](unleash-proxy#configuration-variables). + One of your proxy's [designated client keys (also known as proxy secrets)](unleash-proxy#configuration-variables). - **`refreshInterval`** @@ -40,7 +41,6 @@ The configuration variables are: The environment that your application runs in. This corresponds to the environment field in [the Unleash Context](../user_guide/unleash-context.md). Note that this is separate from the newer [Environments feature](../user_guide/environments.md). - ```jsx import { FlagProvider } from '@unleash/proxy-client-react'; @@ -58,7 +58,7 @@ ReactDOM.render( , - document.getElementById('root') + document.getElementById('root'), ); ``` @@ -73,9 +73,9 @@ const TestComponent = () => { const enabled = useFlag('travel.landing'); if (enabled) { - return + return ; } - return + return ; }; export default TestComponent; @@ -89,12 +89,12 @@ import { useVariant } from '@unleash/proxy-client-react'; const TestComponent = () => { const variant = useVariant('travel.landing'); - if (variant.enabled && variant.name === "SomeComponent") { - return - } else if (variant.enabled && variant.name === "AnotherComponent") { - return + if (variant.enabled && variant.name === 'SomeComponent') { + return ; + } else if (variant.enabled && variant.name === 'AnotherComponent') { + return ; } - return + return ; }; export default TestComponent; @@ -105,16 +105,15 @@ export default TestComponent; Follow the following steps in order to update the unleash context: ```jsx -import { useUnleashContext, useFlag } from '@unleash/proxy-client-react' +import { useUnleashContext, useFlag } from '@unleash/proxy-client-react'; const MyComponent = ({ userId }) => { - const variant = useFlag("my-toggle"); + const variant = useFlag('my-toggle'); const updateContext = useUnleashContext(); useEffect(() => { // context is updated with userId - updateContext({ userId }) - }, []) -} - + updateContext({ userId }); + }, []); +}; ``` diff --git a/website/docs/sdks/proxy-svelte.md b/website/docs/sdks/proxy-svelte.md index 68b7132ca6..0321540c10 100644 --- a/website/docs/sdks/proxy-svelte.md +++ b/website/docs/sdks/proxy-svelte.md @@ -1,16 +1,16 @@ --- id: proxy-svelte -title: Svelte proxy SDK +title: Svelte Proxy SDK ---
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. -For more detailed information, check out [the svelte Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-svelte). +For more detailed information, check out the [Svelte Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-svelte). ## Installation @@ -22,7 +22,7 @@ npm install @unleash/proxy-client-svelte Import the provider like this in your entrypoint file (typically index.svelte): -```html +```jsx