Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

docs: add svelte and vue front-end SDKs (#1760)

Browse Source 
* 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 <thomas@getunleash.ai>

* fix: headings

Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
This commit is contained in:
Nuno Góis 2022-06-29 12:04:21 +01:00 committed by GitHub
parent b2b0958573
commit 5ba5edcaca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 143 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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:**

143
website/docs/sdks/index.md
View File

@ -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 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| <span id="strategy-constraints">**Category: [Strategy constraints](../advanced/strategy_constraints)**</span> | | | | | | | | | |
| Basic support (`IN`, `NOT_IN` operators) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| <span id="strategy-constraints-advanced-support">Advanced support (Semver, date, numeric and extended string operators)</span> (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 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| <span id="strategy-constraints">**Category: [Strategy constraints](../advanced/strategy_constraints)**</span> | | | | | | | | | |
| Basic support (`IN`, `NOT_IN` operators) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| <span id="strategy-constraints-advanced-support">Advanced support (Semver, date, numeric and extended string operators)</span> (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)

39
website/docs/sdks/proxy-react.md
View File

@ -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(
<App />
</FlagProvider>
</React.StrictMode>,
document.getElementById('root')
document.getElementById('root'),
);
```
@ -73,9 +73,9 @@ const TestComponent = () => {
const enabled = useFlag('travel.landing');
if (enabled) {
return <SomeComponent />
return <SomeComponent />;
}
return <AnotherComponent />
return <AnotherComponent />;
};
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 <SomeComponent />
} else if (variant.enabled && variant.name === "AnotherComponent") {
return <AnotherComponent />
if (variant.enabled && variant.name === 'SomeComponent') {
return <SomeComponent />;
} else if (variant.enabled && variant.name === 'AnotherComponent') {
return <AnotherComponent />;
}
return <DefaultComponent />
return <DefaultComponent />;
};
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 });
}, []);
};
```

41
website/docs/sdks/proxy-svelte.md
View File

@ -1,16 +1,16 @@
---
id: proxy-svelte
title: Svelte proxy SDK
title: Svelte Proxy SDK
---
<div class="alert alert--info" role="alert">
<em>Svelte proxy SDK is currently at version 0.0.2 and is experimental</em>.
<em>Svelte Proxy SDK is currently at version 0.0.2 and is experimental</em>.
</div>
<br/>
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
<script lang="ts">
let FlagProvider;
@ -47,7 +47,7 @@ Import the provider like this in your entrypoint file (typically index.svelte):
Alternatively, you can pass your own client in to the FlagProvider:
```html
```jsx
<script lang="ts">
import { UnleashClient } from '@unleash/proxy-client-svelte';
@ -81,9 +81,13 @@ By default, the Unleash client will start polling the Proxy for toggles immediat
- setting the `startClient` prop to `false`
- passing a client instance to the `FlagProvider`
```html
<svelte:component this={FlagProvider} unleashClient={client} startClient={false}>
<App />
```jsx
<svelte:component
this={FlagProvider}
unleashClient={client}
startClient={false}
>
<App />
</svelte:component>
```
@ -91,7 +95,7 @@ Deferring the client start gives you more fine-grained control over when to star
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.
```html
```jsx
<script lang="ts">
const client = new UnleashClient({
/* ... */
@ -113,11 +117,11 @@ To start the client, use the client's `start` method. The below snippet of pseud
## Usage
## Check feature toggle status
### Check feature toggle status
To check if a feature is enabled:
```html
```jsx
<script lang="ts">
import { useFlag } from '@unleash/proxy-client-svelte';
@ -131,11 +135,11 @@ To check if a feature is enabled:
{/if}
```
## Check variants
### Check variants
To check variants:
```html
```jsx
<script lang="ts">
import { useVariant } from '@unleash/proxy-client-svelte';
@ -151,12 +155,11 @@ To check variants:
{/if}
```
## Defer rendering until flags fetched
### Defer rendering until flags fetched
useFlagsStatus retrieves the ready state and error events.
Follow the following steps in order to delay rendering until the flags have been fetched.
useFlagsStatus retrieves the ready state and error events. Follow the following steps in order to delay rendering until the flags have been fetched.
```html
```jsx
<script lang="ts">
import { useFlagsStatus } from '@unleash/proxy-client-svelte';
const { flagsReady, flagsError } = useFlagsStatus();
@ -169,11 +172,11 @@ Follow the following steps in order to delay rendering until the flags have been
{/if}
```
## Updating context
### Updating context
Follow the following steps in order to update the unleash context:
```html
```jsx
<script lang="ts">
import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte';

19
website/docs/sdks/proxy-vue.md
View File

@ -1,16 +1,16 @@
---
id: proxy-vue
title: Vue proxy SDK
title: Vue Proxy SDK
---
<div class="alert alert--info" role="alert">
<em>Vue proxy SDK is currently at version 0.0.1 and is experimental</em>.
<em>Vue Proxy SDK is currently at version 0.0.1 and is experimental</em>.
</div>
<br/>
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 vue Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-vue).
For more detailed information, check out the [Vue Proxy SDK on GitHub](https://github.com/Unleash/proxy-client-vue).
## Installation
@ -101,9 +101,9 @@ onMounted(() => {
</template>
```
# Usage
## Usage
## Check feature toggle status
### Check feature toggle status
To check if a feature is enabled:
@ -120,7 +120,7 @@ const enabled = useFlag('travel.landing')
</template>
```
## Check variants
### Check variants
To check variants:
@ -138,10 +138,9 @@ const variant = useVariant('travel.landing')
</template>
```
## Defer rendering until flags fetched
### Defer rendering until flags fetched
useFlagsStatus retrieves the ready state and error events.
Follow the following steps in order to delay rendering until the flags have been fetched.
useFlagsStatus retrieves the ready state and error events. Follow the following steps in order to delay rendering until the flags have been fetched.
```jsx
import { useFlagsStatus } from '@unleash/proxy-client-vue'
@ -152,7 +151,7 @@ const { flagsReady, flagsError } = useFlagsStatus()
<MyComponent v-else error={flagsError} />
```
## Updating context
### Updating context
Follow the following steps in order to update the unleash context:

10
website/docs/sdks/unleash-proxy.md
View File

@ -266,9 +266,11 @@ The Unleash Proxy takes the heavy lifting of evaluating toggles and only returns
However in some settings you would like a bit more logic around it to make it as fast as possible, and keep up to date with changes.
- [JavaScript Proxy SDK](/sdks/proxy-javascript)
- [React Proxy SDK](/sdks/proxy-react)
- [Android Proxy SDK](/sdks/android_proxy_sdk)
- [iOS Proxy SDK](/sdks/proxy-ios)
- [Android Proxy SDK](sdks/android-proxy.md)
- [iOS Proxy SDK](sdks/proxy-ios.md)
- [Javascript Proxy SDK](sdks/proxy-javascript.md)
- [React Proxy SDK](sdks/proxy-react.md)
- [Svelte Proxy SDK](sdks/proxy-svelte.md)
- [Vue Proxy SDK](sdks/proxy-vue.md)
The proxy is also ideal fit for serverless functions such as AWS Lambda. In that scenario the proxy can run on a small container near the serverless function, preferably in the same VPC, giving the lambda extremely fast access to feature flags, at a predictable cost.

10
website/docs/user_guide/quickstart.md
View File

@ -30,12 +30,14 @@ Secret key: proxy-123
Now you can open your application code and connect through one of the proxy SDKs:
- [Javascript Proxy SDK](sdks/proxy-javascript.md)
- [iOS Proxy SDK](sdks/proxy-ios.md)
- [Android Proxy SDK](sdks/android-proxy.md)
- [React](sdks/proxy-react.md)
- [iOS Proxy SDK](sdks/proxy-ios.md)
- [Javascript Proxy SDK](sdks/proxy-javascript.md)
- [React Proxy SDK](sdks/proxy-react.md)
- [Svelte Proxy SDK](sdks/proxy-svelte.md)
- [Vue Proxy SDK](sdks/proxy-vue.md)
Here is a connection example using the javascript proxy SDK:
Here is a connection example using the JavaScript Proxy SDK:
```javascript
import { UnleashClient } from 'unleash-proxy-client';