Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-09 00:18:26 +01:00
Code Issues Projects Releases Wiki Activity

feat(onboarding): sdk snippets in files (#8233)

Browse Source 
Makes it easier to edit code snippets. Additionally, adds lazy loading
to reduce bundle size.
This commit is contained in:
Tymoteusz Czech 2024-09-24 13:37:32 +02:00 committed by GitHub
parent 7e13e74a3e
commit d6dbdab6f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 444 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/component/onboarding/ConnectSdkDialog.tsx
View File

@ -7,13 +7,15 @@ import {
useTheme,
} from '@mui/material';
import { GenerateApiKey } from './GenerateApiKey';
import { useEffect, useState } from 'react';
import { lazy, Suspense, useEffect, useState } from 'react';
import { SelectSdk } from './SelectSdk';
import { GenerateApiKeyConcepts, SelectSdkConcepts } from './UnleashConcepts';
import { TestSdkConnection } from './TestSdkConnection';
const TestSdkConnection = lazy(() => import('./TestSdkConnection'));
import type { Sdk } from './sharedTypes';
import { ConnectionInformation } from './ConnectionInformation';
import Loader from 'component/common/Loader/Loader';
interface IConnectSDKDialogProps {
open: boolean;
@ -111,14 +113,16 @@ export const ConnectSdkDialog = ({
/>
) : null}
{isTestConnectionStage ? (
<TestSdkConnection
sdk={sdk}
apiKey={apiKey}
feature={feature}
onSdkChange={() => {
setStage('select-sdk');
}}
/>
<Suspense fallback={<Loader />}>
<TestSdkConnection
sdk={sdk}
apiKey={apiKey}
feature={feature}
onSdkChange={() => {
setStage('select-sdk');
}}
/>
</Suspense>
) : null}
{stage === 'generate-api-key' ? (

75
frontend/src/component/onboarding/TestSdkConnection.tsx
View File

@ -10,18 +10,33 @@ import {
} from '@mui/material';
import { SectionHeader, StepperBox } from './SharedComponents';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { allSdks, type Sdk } from './sharedTypes';
import {
checkFlagCodeSnippets,
initializeCodeSnippets,
installCommands,
} from './sdkSnippets';
import { allSdks, type SdkName, type Sdk } from './sharedTypes';
import copy from 'copy-to-clipboard';
import useToast from 'hooks/useToast';
import CopyIcon from '@mui/icons-material/FileCopy';
import { formatAssetPath } from '../../utils/formatPath';
import { Stepper } from './Stepper';
import { Badge } from '../common/Badge/Badge';
import { Markdown } from 'component/common/Markdown/Markdown';
import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
const snippets: Record<SdkName, string> = {
Android: (await import(`./snippets/android.md?raw`)).default,
Go: (await import(`./snippets/go.md?raw`)).default,
JavaScript: (await import(`./snippets/javascript.md?raw`)).default,
'Node.js': (await import(`./snippets/nodejs.md?raw`)).default,
Python: (await import(`./snippets/python.md?raw`)).default,
Ruby: (await import(`./snippets/ruby.md?raw`)).default,
Svelte: (await import(`./snippets/svelte.md?raw`)).default,
Vue: (await import(`./snippets/vue.md?raw`)).default,
Flutter: (await import(`./snippets/flutter.md?raw`)).default,
Java: (await import(`./snippets/java.md?raw`)).default,
'.NET': (await import(`./snippets/dotnet.md?raw`)).default,
PHP: (await import(`./snippets/php.md?raw`)).default,
React: (await import(`./snippets/react.md?raw`)).default,
Rust: (await import(`./snippets/rust.md?raw`)).default,
Swift: (await import(`./snippets/swift.md?raw`)).default,
};
const SpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(5, 8, 2, 8),
@ -79,12 +94,21 @@ const ChangeSdk = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(3),
}));
const CodeRenderer: CodeComponent = ({ inline = false, children }) => {
if (!inline && typeof children?.[0] === 'string') {
return <CopyBlock code={children[0]} title='Copy code' />;
}
return <code>{children}</code>;
};
interface ITestSdkConnectionProps {
sdk: Sdk;
apiKey: string;
feature: string;
onSdkChange: () => void;
}
export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
sdk,
apiKey,
@ -93,26 +117,15 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
}) => {
const { uiConfig } = useUiConfig();
const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon;
const clientApiUrl = `${uiConfig.unleashUrl}/api/`;
const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`;
const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl;
const initializeCodeSnippet =
initializeCodeSnippets[sdk.name] ||
`No snippet found for the ${sdk.name} SDK`;
const installCommand =
installCommands[sdk.name] ||
`No install command found for the ${sdk.name} SDK`;
const filledInitializeCodeSnippet = initializeCodeSnippet
const snippet = (snippets[sdk.name] || '')
.replace('<YOUR_API_TOKEN>', apiKey)
.replace('<YOUR_API_URL>', apiUrl);
const checkFlagCodeSnippet =
checkFlagCodeSnippets[sdk.name] ||
`No snippet found for the ${sdk.name} SDK`;
const filledCheckFlagCodeSnippet = checkFlagCodeSnippet.replace(
'<YOUR_FLAG>',
feature,
);
const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon;
.replace('<YOUR_API_URL>', apiUrl)
.replaceAll('<YOUR_FLAG>', feature);
return (
<SpacedContainer>
@ -135,19 +148,13 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
</Link>
</ChangeSdk>
<SectionHeader>Setup the SDK</SectionHeader>
<p>1. Install the SDK</p>
<CopyBlock title='Copy command' code={installCommand} />
<p>2. Initialize the SDK</p>
<CopyBlock
title='Copy snippet'
code={filledInitializeCodeSnippet}
/>
<p>3. Check feature flag status</p>
<CopyBlock
title='Copy snippet'
code={filledCheckFlagCodeSnippet}
/>
<Markdown components={{ code: CodeRenderer }}>
{snippet}
</Markdown>
</Box>
</SpacedContainer>
);
};
// Use a default export for lazy-loading
export default TestSdkConnection;

247
frontend/src/component/onboarding/sdkSnippets.ts
View File

@ -1,247 +0,0 @@
import type { SdkName } from './sharedTypes';
export const installCommands: Record<SdkName, string> = {
'Node.js': ' npm install unleash-client',
Go: 'go get github.com/Unleash/unleash-client-go/v3',
Ruby: 'gem install unleash',
PHP: 'composer require unleash/client',
Rust: 'cargo add unleash-client',
'.NET': `dotnet add package unleash.client
// If you do not have a json library in your project:
dotnet add package Newtonsoft.Json`,
Java: `<dependency>
<groupId>io.getunleash</groupId>
<artifactId>unleash-client-java</artifactId>
<version>LATEST</version>
</dependency>`,
Python: 'pip install UnleashClient',
JavaScript: 'npm install unleash-proxy-client',
React: 'npm install @unleash/proxy-client-react unleash-proxy-client',
Vue: 'npm install @unleash/proxy-client-vue',
Svelte: 'npm install @unleash/proxy-client-svelte',
Swift: 'https://github.com/Unleash/unleash-proxy-client-swift.git',
Android: `implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
// enabled required permissions
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />`,
Flutter: 'flutter pub add unleash_proxy_client_flutter',
};
export const initializeCodeSnippets: Record<SdkName, string> = {
'Node.js': `const { initialize } = require('unleash-client');
const unleash = initialize({
url: '<YOUR_API_URL>',
appName: 'unleash-onboarding-node',
customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
metricsInterval: 5000,
});
`,
Go: `import (
"github.com/Unleash/unleash-client-go/v3"
"net/http"
"time"
)
func init() {
unleash.Initialize(
unleash.WithListener(&unleash.DebugListener{}),
unleash.WithAppName("unleash-onboarding-golang"),
unleash.WithUrl("<YOUR_API_URL>"),
unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
unleash.WithMetricsInterval(5*time.Second),
)
}`,
Ruby: `Unleash.configure do |config|
config.app_name = 'unleash-onboarding-ruby'
config.url = '<YOUR_API_URL>'
config.custom_http_headers = {'Authorization': '<YOUR_API_TOKEN>'}
end`,
PHP: `<?php
use Unleash\\Client\\UnleashBuilder;
require 'vendor/autoload.php';
$unleash = UnleashBuilder::create()
->withAppName('unleash-onboarding-php')
->withAppUrl('<YOUR_API_URL>')
->withHeader('Authorization', '<YOUR_API_TOKEN>')
->withInstanceId('unleash-onboarding-instance')
->withMetricsInterval(5000)
->build();`,
Rust: `let client = client::ClientBuilder::default()
.interval(500)
.into_client::<UserFeatures, reqwest::Client>(
"<YOUR_API_URL>",
"unleash-onboarding-rust",
"unleash-onboarding-instance",
"<YOUR_API_TOKEN>",
)?;
client.register().await?;`,
'.NET': `using Unleash;
var settings = new UnleashSettings()
{
AppName = "unleash-onboarding-dotnet",
UnleashApi = new Uri("<YOUR_API_URL>"),
CustomHttpHeaders = new Dictionary<string, string>()
{
{"Authorization","<YOUR_API_TOKEN>" }
}
};`,
Java: `UnleashConfig config = UnleashConfig.builder()
.appName("unleash-onboarding-java")
.instanceId("unleash-onboarding-instance")
.unleashAPI("<YOUR_API_URL>")
.apiKey("<YOUR_API_TOKEN>")
.sendMetricsInterval(5)
.build();
Unleash unleash = new DefaultUnleash(config);`,
Python: `from UnleashClient import UnleashClient
import asyncio
client = UnleashClient(
url="<YOUR_API_URL>",
app_name="unleash-onboarding-python",
refresh_interval=5,
custom_headers={'Authorization': '<YOUR_API_TOKEN>'})
client.initialize_client()`,
JavaScript: `const { UnleashClient } = require('unleash-proxy-client');
const unleash = new UnleashClient({
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
appName: 'unleash-onboarding-javascript',
refreshInterval: 5000,
});
// Start the background polling
unleash.start();`,
React: `import { createRoot } from 'react-dom/client';
import { FlagProvider } from '@unleash/proxy-client-react';
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-react',
};
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<FlagProvider config={config}>
<App />
</FlagProvider>
</React.StrictMode>
);`,
Vue: `import { createApp } from 'vue'
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
// import the root component App from a single-file component.
import App from './App.vue'
const config = {
url: '<YOUR_API_URL>'',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-vue',
}
const app = createApp(App)
app.use(unleashPlugin, { config })
app.mount('#app')`,
Svelte: `<script lang="ts">
import { FlagProvider } from '@unleash/proxy-client-svelte';
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-svelte'
};
</script>
<FlagProvider {config}>
<App />
</FlagProvider>`,
Swift: `import Foundation
import UnleashProxyClientSwift
var unleash = UnleashProxyClientSwift.UnleashClient(
unleashUrl: "<YOUR_API_URL>",
clientKey: "<YOUR_API_TOKEN>",
refreshInterval: 15,
appName: "unleash-onboarding-swift",
context: [:])
unleash.start()`,
Android: `val unleash = DefaultUnleash(
androidContext = applicationContext, // likely a reference to your Android application context
unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
.proxyUrl("<YOUR_API_URL>")
.clientKey("<YOUR_API_TOKEN>")
.pollingStrategy.interval(3000)
.metricsStrategy.interval(3000)
.build()
)`,
Flutter: `import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
import 'dart:async';
final unleash = UnleashClient(
url: Uri.parse('<YOUR_API_URL>'),
clientKey: '<YOUR_API_TOKEN>',
appName: 'unleash-onboarding-flutter');
unleash.start();`,
};
// TODO: add idiomatic way of checking flag status that will populate metrics
export const checkFlagCodeSnippets: Record<SdkName, string> = {
'Node.js': `setInterval(() => {
console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
}, 1000);
`,
Go: `func main() {
for {
unleash.IsEnabled("<YOUR_FLAG>")
time.Sleep(time.Second)
}
}, 1000);
`,
Ruby: ``,
PHP: `while (true) {
echo 'Feature flag is: ' . $unleash->isEnabled('<YOUR_FLAG>') . PHP_EOL;
sleep(1);
}
`,
Rust: ``,
'.NET': ``,
Java: `while (true) {
boolean featureEnabled = unleash.isEnabled("<YOUR_FLAG>");
System.out.println("Feature enabled: " + featureEnabled);
Thread.sleep(1000);
}`,
Python: `while True:
print(client.is_enabled("<YOUR_FLAG>"))
asyncio.run(asyncio.sleep(1))`,
JavaScript: `setInterval(() => {
console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
}, 1000);`,
React: ``,
Vue: ``,
Svelte: ``,
Swift: `Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
print("Is enabled", unleashClient.isEnabled(name: "<YOUR_FLAG>"))
}
RunLoop.main.run()`,
Android: ``,
Flutter: `Timer.periodic(Duration(seconds: 1), (Timer timer) {
final flagStatus = unleash.isEnabled('counter');
print('Flag is \${unleash.isEnabled("<YOUR_FLAG>") ? "enabled" : "disabled"}');
});`,
};

21
frontend/src/component/onboarding/snippets/android.md Normal file
View File

@ -0,0 +1,21 @@
1\. Install the SDK
```gradle
implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
// Enable required permissions
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```
2\. Initialize Unleash
```kotlin
val unleash = DefaultUnleash(
androidContext = applicationContext, // Reference to your Android application context
unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
.proxyUrl("<YOUR_API_URL>")
.clientKey("<YOUR_API_TOKEN>")
.pollingStrategy.interval(3000)
.metricsStrategy.interval(3000)
.build()
)
```

20
frontend/src/component/onboarding/snippets/dotnet.md Normal file
View File

@ -0,0 +1,20 @@
1\. Install the SDK
```sh
dotnet add package unleash.client
// If you do not have a json library in your project:
dotnet add package Newtonsoft.Json
```
2\. Initialize Unleash
```csharp
using Unleash;
var settings = new UnleashSettings()
{
AppName = "unleash-onboarding-dotnet",
UnleashApi = new Uri("<YOUR_API_URL>"),
CustomHttpHeaders = new Dictionary<string, string>()
{
{"Authorization","<YOUR_API_TOKEN>" }
}
};
```

25
frontend/src/component/onboarding/snippets/flutter.md Normal file
View File

@ -0,0 +1,25 @@
1\. Install the SDK
```sh
flutter pub add unleash_proxy_client_flutter
```
2\. Initialize Unleash
```dart
import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
import 'dart:async';
final unleash = UnleashClient(
url: Uri.parse('<YOUR_API_URL>'),
clientKey: '<YOUR_API_TOKEN>',
appName: 'unleash-onboarding-flutter');
unleash.start();
```
3\. Check feature flag status
```dart
Timer.periodic(Duration(seconds: 1), (Timer timer) {
final flagStatus = unleash.isEnabled('<YOUR_FLAG>');
print('Flag is ${unleash.isEnabled("<YOUR_FLAG>") ? "enabled" : "disabled"}');
});
```

33
frontend/src/component/onboarding/snippets/go.md Normal file
View File

@ -0,0 +1,33 @@
1\. Install the SDK
```sh
go get github.com/Unleash/unleash-client-go/v3
```
2\. Initialize Unleash
```go
import (
"github.com/Unleash/unleash-client-go/v3"
"net/http"
"time"
)
func init() {
unleash.Initialize(
unleash.WithListener(&unleash.DebugListener{}),
unleash.WithAppName("unleash-onboarding-golang"),
unleash.WithUrl("<YOUR_API_URL>"),
unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
unleash.WithMetricsInterval(5*time.Second),
)
}
```
3\. Check feature flag status
```go
func main() {
for {
unleash.IsEnabled("<YOUR_FLAG>")
time.Sleep(time.Second)
}
}
```

30
frontend/src/component/onboarding/snippets/java.md Normal file
View File

@ -0,0 +1,30 @@
1\. Install the SDK
```xml
<dependency>
<groupId>io.getunleash</groupId>
<artifactId>unleash-client-java</artifactId>
<version>LATEST</version>
</dependency>
```
2\. Initialize Unleash
```java
UnleashConfig config = UnleashConfig.builder()
.appName("unleash-onboarding-java")
.instanceId("unleash-onboarding-instance")
.unleashAPI("<YOUR_API_URL>")
.apiKey("<YOUR_API_TOKEN>")
.sendMetricsInterval(5)
.build();
Unleash unleash = new DefaultUnleash(config);
```
3\. Check feature flag status
```java
while (true) {
boolean featureEnabled = unleash.isEnabled("<YOUR_FLAG>");
System.out.println("Feature enabled: " + featureEnabled);
Thread.sleep(1000);
}
```

25
frontend/src/component/onboarding/snippets/javascript.md Normal file
View File

@ -0,0 +1,25 @@
1\. Install the SDK
```sh
npm install unleash-proxy-client
```
2\. Initialize Unleash
```js
const { UnleashClient } = require('unleash-proxy-client');
const unleash = new UnleashClient({
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
appName: 'unleash-onboarding-javascript',
refreshInterval: 5000,
});
unleash.start();
```
3\. Check feature flag status
```js
setInterval(() => {
console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
}, 1000);
```

23
frontend/src/component/onboarding/snippets/nodejs.md Normal file
View File

@ -0,0 +1,23 @@
1\. Install the SDK
```sh
npm install unleash-client
```
2\. Initialize Unleash
```js
const { initialize } = require('unleash-client');
const unleash = initialize({
url: '<YOUR_API_URL>',
appName: 'unleash-onboarding-node',
customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
metricsInterval: 5000,
});
```
3\. Check feature flag status
```js
setInterval(() => {
console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
}, 1000);
```

29
frontend/src/component/onboarding/snippets/php.md Normal file
View File

@ -0,0 +1,29 @@
1\. Install the SDK
```sh
composer require unleash/client
```
2\. Initialize Unleash
```php
<?php
use Unleash\\Client\\UnleashBuilder;
require 'vendor/autoload.php';
$unleash = UnleashBuilder::create()
->withAppName('unleash-onboarding-php')
->withAppUrl('<YOUR_API_URL>')
->withHeader('Authorization', '<YOUR_API_TOKEN>')
->withInstanceId('unleash-onboarding-instance')
->withMetricsInterval(5000)
->build();
```
3\. Check feature flag status
```php
while (true) {
echo 'Feature flag is: ' . $unleash->isEnabled('<YOUR_FLAG>') . PHP_EOL;
sleep(1);
}
```

25
frontend/src/component/onboarding/snippets/python.md Normal file
View File

@ -0,0 +1,25 @@
1\. Install the SDK
```sh
pip install UnleashClient
```
2\. Initialize Unleash
```python
from UnleashClient import UnleashClient
import asyncio
client = UnleashClient(
url="<YOUR_API_URL>",
app_name="unleash-onboarding-python",
refresh_interval=5,
custom_headers={'Authorization': '<YOUR_API_TOKEN>'})
client.initialize_client()
```
3\. Check feature flag status
```python
while True:
print(client.is_enabled("<YOUR_FLAG>"))
asyncio.run(asyncio.sleep(1))
```

38
frontend/src/component/onboarding/snippets/react.md Normal file
View File

@ -0,0 +1,38 @@
1\. Install the SDK
```sh
npm install @unleash/proxy-client-react unleash-proxy-client
```
2\. Initialize Unleash
```jsx
import { createRoot } from 'react-dom/client';
import { FlagProvider } from '@unleash/proxy-client-react';
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 5, // In production use interval of >15s
appName: 'unleash-onboarding-react',
};
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<FlagProvider config={config}>
<App />
</FlagProvider>
</React.StrictMode>
);
```
3\. Check feature flag status
```jsx
import { useFlag } from '@unleash/proxy-client-react';
const TestComponent = () => {
const enabled = useFlag('<YOUR_FLAG>');
return enabled ? 'Flag is enabled' : 'Flag is disabled'
};
```

31
frontend/src/component/onboarding/snippets/ruby.md Normal file
View File

@ -0,0 +1,31 @@
1\. Install the SDK
```sh
gem install unleash
```
2\. Initialize Unleash
```rb
require 'unleash'
@unleash = Unleash::Client.new(
url: "<YOUR_API_URL>",
custom_http_headers: { 'Authorization': "<YOUR_API_TOKEN>" },
app_name: 'unleash-onboarding-ruby',
instance_id: 'unleash-onboarding-ruby',
refresh_interval: 3, # In production use interval of >15s
metrics_interval: 3, # In production use interval of >15s
)
```
3\. Check feature flag status
```rb
while true
if @unleash.is_enabled?("<YOUR_FLAG>")
puts "Flag is enabled"
else
puts "Flag is not enabled"
end
sleep 3
end
```

17
frontend/src/component/onboarding/snippets/rust.md Normal file
View File

@ -0,0 +1,17 @@
1\. Install the SDK
```sh
cargo add unleash-client
```
2\. Initialize Unleash
```rust
let client = client::ClientBuilder::default()
.interval(500)
.into_client::<UserFeatures, reqwest::Client>(
"<YOUR_API_URL>",
"unleash-onboarding-rust",
"unleash-onboarding-instance",
"<YOUR_API_TOKEN>",
)?;
client.register().await?;
```

22
frontend/src/component/onboarding/snippets/svelte.md Normal file
View File

@ -0,0 +1,22 @@
1\. Install the SDK
```sh
npm install @unleash/proxy-client-svelte
```
2\. Initialize Unleash
```svelte
<script lang="ts">
import { FlagProvider } from '@unleash/proxy-client-svelte';
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-svelte'
};
</script>
<FlagProvider {config}>
<App />
</FlagProvider>
```

27
frontend/src/component/onboarding/snippets/swift.md Normal file
View File

@ -0,0 +1,27 @@
1\. Install the SDK
```sh
// Instructions to add the Swift SDK can be found at the provided URL:
https://github.com/Unleash/unleash-proxy-client-swift.git
```
2\. Initialize Unleash
```swift
import Foundation
import UnleashProxyClientSwift
var unleash = UnleashProxyClientSwift.UnleashClient(
unleashUrl: "<YOUR_API_URL>",
clientKey: "<YOUR_API_TOKEN>",
refreshInterval: 15,
appName: "unleash-onboarding-swift",
context: [:])
unleash.start()
```
3\. Check feature flag status
```swift
Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
print("Is enabled", unleash.isEnabled(name: "<YOUR_FLAG>"))
}
```

23
frontend/src/component/onboarding/snippets/vue.md Normal file
View File

@ -0,0 +1,23 @@
1\. Install the SDK
```sh
npm install @unleash/proxy-client-vue
```
2\. Initialize Unleash
```js
import { createApp } from 'vue'
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
// import the root component App from a single-file component.
import App from './App.vue'
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-vue',
}
const app = createApp(App)
app.use(unleashPlugin, { config })
app.mount('#app')
```