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 <thomas@getunleash.ai> * fix: headings Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
Unleash · Jun 29, 2022 · 5ba5edc · 5ba5edc
1 parent b2b0958
commit 5ba5edc
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 129 deletions.
diff --git 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
diff --git 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(
       <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 });
+  }, []);
+};
 ```
diff --git 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
 ---
 
 <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,17 +81,21 @@ 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>
 ```
 
 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.
 
-```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';
 

diff --git a/website/docs/sdks/proxy-vue.md b/website/docs/sdks/proxy-vue.md
@@ -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:
 

diff --git a/website/docs/sdks/unleash-proxy.md b/website/docs/sdks/unleash-proxy.md
@@ -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.
diff --git a/website/docs/user_guide/quickstart.md b/website/docs/user_guide/quickstart.md
@@ -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';