mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
docs: add docs for vue and svelte clients (#1541)
* docs: add docs for vue and svelte clients * fix: update version for svelte
This commit is contained in:
Fredrik Strand Oseberg
GitHub
parent
36922d156d
commit
e6495d9d26
@ -14,7 +14,7 @@ For more detailed information, check out [the React Proxy SDK on GitHub](https:/
|
||||
npm install @unleash/proxy-client-react
|
||||
```
|
||||
|
||||
## Initialize the client
|
||||
## Initialization
|
||||
|
||||
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.
|
||||
|
||||
|
||||
196
website/docs/sdks/proxy-svelte.md
Normal file
196
website/docs/sdks/proxy-svelte.md
Normal file
@ -0,0 +1,196 @@
|
||||
---
|
||||
id: proxy-svelte
|
||||
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>.
|
||||
</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).
|
||||
|
||||
## Installation
|
||||
|
||||
```shell npm2yarn
|
||||
npm install @unleash/proxy-client-svelte
|
||||
```
|
||||
|
||||
## Initialization
|
||||
|
||||
Import the provider like this in your entrypoint file (typically index.svelte):
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
let FlagProvider;
|
||||
|
||||
onMount(async () => {
|
||||
const proxyClientSvelte = await import('@unleash/proxy-client-svelte');
|
||||
FlagProvider = proxyClientSvelte.default;
|
||||
});
|
||||
|
||||
const config = {
|
||||
url: 'https://HOSTNAME/proxy',
|
||||
clientKey: 'PROXYKEY',
|
||||
refreshInterval: 15,
|
||||
appName: 'your-app-name',
|
||||
environment: 'dev'
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:component this="{FlagProvider}" {config}>
|
||||
<App />
|
||||
</svelte:component>
|
||||
```
|
||||
|
||||
Alternatively, you can pass your own client in to the FlagProvider:
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { UnleashClient } from '@unleash/proxy-client-svelte';
|
||||
|
||||
let FlagProvider;
|
||||
|
||||
onMount(async () => {
|
||||
const proxyClientSvelte = await import('@unleash/proxy-client-svelte');
|
||||
FlagProvider = proxyClientSvelte.default;
|
||||
});
|
||||
|
||||
const config = {
|
||||
url: 'https://HOSTNAME/proxy',
|
||||
clientKey: 'PROXYKEY',
|
||||
refreshInterval: 15,
|
||||
appName: 'your-app-name',
|
||||
environment: 'dev'
|
||||
};
|
||||
|
||||
const client = new UnleashClient(config);
|
||||
</script>
|
||||
|
||||
<svelte:component this="{FlagProvider}" unleashClient="{client}">
|
||||
<App />
|
||||
</svelte:component>
|
||||
```
|
||||
|
||||
## Deferring client start
|
||||
|
||||
By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by:
|
||||
|
||||
- setting the `startClient` prop to `false`
|
||||
- passing a client instance to the `FlagProvider`
|
||||
|
||||
```html
|
||||
<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
|
||||
<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
|
||||
|
||||
To check if a feature is enabled:
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { useFlag } from '@unleash/proxy-client-svelte';
|
||||
|
||||
const enabled = useFlag('travel.landing');
|
||||
</script>
|
||||
|
||||
{#if $enabled}
|
||||
<SomeComponent />
|
||||
{:else}
|
||||
<AnotherComponent />
|
||||
{/if}
|
||||
```
|
||||
|
||||
## Check variants
|
||||
|
||||
To check variants:
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { useVariant } from '@unleash/proxy-client-svelte';
|
||||
|
||||
const variant = useVariant('travel.landing');
|
||||
</script>
|
||||
|
||||
{#if $variant.enabled && $variant.name === 'SomeComponent'}
|
||||
<SomeComponent />
|
||||
{:else if $variant.enabled && $variant.name === 'AnotherComponent'}
|
||||
<AnotherComponent />
|
||||
{:else}
|
||||
<DefaultComponent />
|
||||
{/if}
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { useFlagsStatus } from '@unleash/proxy-client-svelte';
|
||||
const { flagsReady, flagsError } = useFlagsStatus();
|
||||
</script>
|
||||
|
||||
{#if !$flagsReady}
|
||||
<Loading />
|
||||
{:else}
|
||||
<MyComponent error="{flagsError}" />
|
||||
{/if}
|
||||
```
|
||||
|
||||
## Updating context
|
||||
|
||||
Follow the following steps in order to update the unleash context:
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte';
|
||||
|
||||
export let userId: string = undefined;
|
||||
|
||||
const updateContext = useUnleashContext();
|
||||
|
||||
onMount(() => {
|
||||
updateContext({ userId });
|
||||
});
|
||||
|
||||
$: {
|
||||
async function run() {
|
||||
await updateContext({ userId });
|
||||
console.log('new flags loaded for', userId);
|
||||
}
|
||||
run();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
181
website/docs/sdks/proxy-vue.md
Normal file
181
website/docs/sdks/proxy-vue.md
Normal file
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: proxy-vue
|
||||
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>.
|
||||
</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).
|
||||
|
||||
## Installation
|
||||
|
||||
```shell npm2yarn
|
||||
npm install @unleash/proxy-client-vue
|
||||
```
|
||||
|
||||
## Initialization
|
||||
|
||||
Import the provider like this in your entrypoint file (typically App.vue):
|
||||
|
||||
```jsx
|
||||
import FlagProvider from '@unleash/proxy-client-vue'
|
||||
|
||||
const config = {
|
||||
url: 'https://HOSTNAME/proxy',
|
||||
clientKey: 'PROXYKEY',
|
||||
refreshInterval: 15,
|
||||
appName: 'your-app-name',
|
||||
environment: 'dev'
|
||||
}
|
||||
|
||||
<template>
|
||||
<FlagProvider :config="config">
|
||||
<App />
|
||||
</FlagProvider>
|
||||
</template>
|
||||
```
|
||||
|
||||
Alternatively, you can pass your own client in to the FlagProvider:
|
||||
|
||||
```jsx
|
||||
import FlagProvider, { UnleashClient } from '@unleash/proxy-client-vue'
|
||||
|
||||
const config = {
|
||||
url: 'https://HOSTNAME/proxy',
|
||||
clientKey: 'PROXYKEY',
|
||||
refreshInterval: 15,
|
||||
appName: 'your-app-name',
|
||||
environment: 'dev'
|
||||
}
|
||||
|
||||
const client = new UnleashClient(config)
|
||||
|
||||
<template>
|
||||
<FlagProvider :unleash-client="client">
|
||||
<App />
|
||||
</FlagProvider>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Deferring client start
|
||||
|
||||
By default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by:
|
||||
|
||||
- setting the `startClient` prop to `false`
|
||||
- passing a client instance to the `FlagProvider`
|
||||
|
||||
```jsx
|
||||
<template>
|
||||
<FlagProvider :unleash-client="client" :start-client="false">
|
||||
<App />
|
||||
</FlagProvider>
|
||||
</template>
|
||||
```
|
||||
|
||||
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
|
||||
const client = new UnleashClient({
|
||||
/* ... */
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const asyncProcess = async () => {
|
||||
// do async work ...
|
||||
client.start()
|
||||
}
|
||||
asyncProcess()
|
||||
})
|
||||
|
||||
<template>
|
||||
<FlagProvider :unleash-client="client" :start-client="false">
|
||||
<App />
|
||||
</FlagProvider>
|
||||
</template>
|
||||
```
|
||||
|
||||
# Usage
|
||||
|
||||
## Check feature toggle status
|
||||
|
||||
To check if a feature is enabled:
|
||||
|
||||
```jsx
|
||||
<script setup>
|
||||
import { useFlag } from '@unleash/proxy-client-vue'
|
||||
|
||||
const enabled = useFlag('travel.landing')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SomeComponent v-if="enabled" />
|
||||
<AnotherComponent v-else />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Check variants
|
||||
|
||||
To check variants:
|
||||
|
||||
```jsx
|
||||
<script setup>
|
||||
import { useVariant } from '@unleash/proxy-client-vue'
|
||||
|
||||
const variant = useVariant('travel.landing')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SomeComponent v-if="variant.enabled && variant.name === 'SomeComponent'" />
|
||||
<AnotherComponent v-else-if="variant.enabled && variant.name === 'AnotherComponent" />
|
||||
<DefaultComponent v-else />
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```jsx
|
||||
import { useFlagsStatus } from '@unleash/proxy-client-vue'
|
||||
|
||||
const { flagsReady, flagsError } = useFlagsStatus()
|
||||
|
||||
<Loading v-if="!flagsReady" />
|
||||
<MyComponent v-else error={flagsError} />
|
||||
```
|
||||
|
||||
## Updating context
|
||||
|
||||
Follow the following steps in order to update the unleash context:
|
||||
|
||||
```jsx
|
||||
import { useUnleashContext, useFlag } from '@unleash/proxy-client-vue'
|
||||
|
||||
const props = defineProps<{
|
||||
userId: string
|
||||
}>()
|
||||
|
||||
const { userId } = toRefs(props)
|
||||
|
||||
const updateContext = useUnleashContext()
|
||||
|
||||
onMounted(() => {
|
||||
updateContext({ userId })
|
||||
})
|
||||
|
||||
watch(userId, () => {
|
||||
async function run() {
|
||||
await updateContext({ userId: userId.value })
|
||||
console.log('new flags loaded for', userId.value)
|
||||
}
|
||||
run()
|
||||
})
|
||||
```
|
||||
@ -202,6 +202,8 @@ module.exports = {
|
||||
'sdks/proxy-ios',
|
||||
'sdks/proxy-javascript',
|
||||
'sdks/proxy-react',
|
||||
'sdks/proxy-vue',
|
||||
'sdks/proxy-svelte'
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user