From d6dbdab6f1ee914c59dddf8f5f27e98aed8f70e2 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Tue, 24 Sep 2024 13:37:32 +0200 Subject: [PATCH] feat(onboarding): sdk snippets in files (#8233) Makes it easier to edit code snippets. Additionally, adds lazy loading to reduce bundle size. --- .../component/onboarding/ConnectSdkDialog.tsx | 24 +- .../onboarding/TestSdkConnection.tsx | 75 +++--- .../src/component/onboarding/sdkSnippets.ts | 247 ------------------ .../component/onboarding/snippets/android.md | 21 ++ .../component/onboarding/snippets/dotnet.md | 20 ++ .../component/onboarding/snippets/flutter.md | 25 ++ .../src/component/onboarding/snippets/go.md | 33 +++ .../src/component/onboarding/snippets/java.md | 30 +++ .../onboarding/snippets/javascript.md | 25 ++ .../component/onboarding/snippets/nodejs.md | 23 ++ .../src/component/onboarding/snippets/php.md | 29 ++ .../component/onboarding/snippets/python.md | 25 ++ .../component/onboarding/snippets/react.md | 38 +++ .../src/component/onboarding/snippets/ruby.md | 31 +++ .../src/component/onboarding/snippets/rust.md | 17 ++ .../component/onboarding/snippets/svelte.md | 22 ++ .../component/onboarding/snippets/swift.md | 27 ++ .../src/component/onboarding/snippets/vue.md | 23 ++ 18 files changed, 444 insertions(+), 291 deletions(-) delete mode 100644 frontend/src/component/onboarding/sdkSnippets.ts create mode 100644 frontend/src/component/onboarding/snippets/android.md create mode 100644 frontend/src/component/onboarding/snippets/dotnet.md create mode 100644 frontend/src/component/onboarding/snippets/flutter.md create mode 100644 frontend/src/component/onboarding/snippets/go.md create mode 100644 frontend/src/component/onboarding/snippets/java.md create mode 100644 frontend/src/component/onboarding/snippets/javascript.md create mode 100644 frontend/src/component/onboarding/snippets/nodejs.md create mode 100644 frontend/src/component/onboarding/snippets/php.md create mode 100644 frontend/src/component/onboarding/snippets/python.md create mode 100644 frontend/src/component/onboarding/snippets/react.md create mode 100644 frontend/src/component/onboarding/snippets/ruby.md create mode 100644 frontend/src/component/onboarding/snippets/rust.md create mode 100644 frontend/src/component/onboarding/snippets/svelte.md create mode 100644 frontend/src/component/onboarding/snippets/swift.md create mode 100644 frontend/src/component/onboarding/snippets/vue.md diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx index 6a5db44c2f..5ebbd0a2b5 100644 --- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx +++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx @@ -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 ? ( - { - setStage('select-sdk'); - }} - /> + }> + { + setStage('select-sdk'); + }} + /> + ) : null} {stage === 'generate-api-key' ? ( diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx index 6dd2865e77..2afd8e9f5d 100644 --- a/frontend/src/component/onboarding/TestSdkConnection.tsx +++ b/frontend/src/component/onboarding/TestSdkConnection.tsx @@ -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 = { + 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 ; + } + + return {children}; +}; + interface ITestSdkConnectionProps { sdk: Sdk; apiKey: string; feature: string; onSdkChange: () => void; } + export const TestSdkConnection: FC = ({ sdk, apiKey, @@ -93,26 +117,15 @@ export const TestSdkConnection: FC = ({ }) => { 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('', apiKey) - .replace('', apiUrl); - const checkFlagCodeSnippet = - checkFlagCodeSnippets[sdk.name] || - `No snippet found for the ${sdk.name} SDK`; - const filledCheckFlagCodeSnippet = checkFlagCodeSnippet.replace( - '', - feature, - ); - const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon; + .replace('', apiUrl) + .replaceAll('', feature); return ( @@ -135,19 +148,13 @@ export const TestSdkConnection: FC = ({ Setup the SDK -

1. Install the SDK

- -

2. Initialize the SDK

- -

3. Check feature flag status

- + + {snippet} + ); }; + +// Use a default export for lazy-loading +export default TestSdkConnection; diff --git a/frontend/src/component/onboarding/sdkSnippets.ts b/frontend/src/component/onboarding/sdkSnippets.ts deleted file mode 100644 index 60cfae242f..0000000000 --- a/frontend/src/component/onboarding/sdkSnippets.ts +++ /dev/null @@ -1,247 +0,0 @@ -import type { SdkName } from './sharedTypes'; - -export const installCommands: Record = { - '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: ` - io.getunleash - unleash-client-java - LATEST -`, - 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 - -`, - Flutter: 'flutter pub add unleash_proxy_client_flutter', -}; - -export const initializeCodeSnippets: Record = { - 'Node.js': `const { initialize } = require('unleash-client'); - -const unleash = initialize({ - url: '', - appName: 'unleash-onboarding-node', - customHeaders: { Authorization: '' }, - 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(""), - unleash.WithCustomHeaders(http.Header{"Authorization": {""}}), - unleash.WithMetricsInterval(5*time.Second), - ) -}`, - Ruby: `Unleash.configure do |config| - config.app_name = 'unleash-onboarding-ruby' - config.url = '' - config.custom_http_headers = {'Authorization': ''} -end`, - PHP: `withAppName('unleash-onboarding-php') - ->withAppUrl('') - ->withHeader('Authorization', '') - ->withInstanceId('unleash-onboarding-instance') - ->withMetricsInterval(5000) - ->build();`, - Rust: `let client = client::ClientBuilder::default() - .interval(500) - .into_client::( - "", - "unleash-onboarding-rust", - "unleash-onboarding-instance", - "", - )?; -client.register().await?;`, - '.NET': `using Unleash; -var settings = new UnleashSettings() -{ - AppName = "unleash-onboarding-dotnet", - UnleashApi = new Uri(""), - CustomHttpHeaders = new Dictionary() - { - {"Authorization","" } - } -};`, - Java: `UnleashConfig config = UnleashConfig.builder() - .appName("unleash-onboarding-java") - .instanceId("unleash-onboarding-instance") - .unleashAPI("") - .apiKey("") - .sendMetricsInterval(5) - .build(); - -Unleash unleash = new DefaultUnleash(config);`, - Python: `from UnleashClient import UnleashClient -import asyncio - -client = UnleashClient( - url="", - app_name="unleash-onboarding-python", - refresh_interval=5, - custom_headers={'Authorization': ''}) - -client.initialize_client()`, - JavaScript: `const { UnleashClient } = require('unleash-proxy-client'); - -const unleash = new UnleashClient({ - url: '', - clientKey: '', - 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: '', - clientKey: '', - refreshInterval: 15, - appName: 'unleash-onboarding-react', -}; - -const root = createRoot(document.getElementById('root')); - -root.render( - - - - - -);`, - 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: ''', - clientKey: '', - refreshInterval: 15, - appName: 'unleash-onboarding-vue', -} - -const app = createApp(App) -app.use(unleashPlugin, { config }) -app.mount('#app')`, - Svelte: ` - - - -`, - Swift: `import Foundation -import UnleashProxyClientSwift - -var unleash = UnleashProxyClientSwift.UnleashClient( - unleashUrl: "", - clientKey: "", - 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("") - .clientKey("") - .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(''), - clientKey: '', - appName: 'unleash-onboarding-flutter'); - -unleash.start();`, -}; - -// TODO: add idiomatic way of checking flag status that will populate metrics -export const checkFlagCodeSnippets: Record = { - 'Node.js': `setInterval(() => { - console.log('Is enabled', unleash.isEnabled('')); -}, 1000); -`, - Go: `func main() { - for { - unleash.IsEnabled("") - time.Sleep(time.Second) - } -}, 1000); -`, - Ruby: ``, - PHP: `while (true) { - echo 'Feature flag is: ' . $unleash->isEnabled('') . PHP_EOL; - sleep(1); -} -`, - Rust: ``, - '.NET': ``, - Java: `while (true) { - boolean featureEnabled = unleash.isEnabled(""); - System.out.println("Feature enabled: " + featureEnabled); - Thread.sleep(1000); -}`, - Python: `while True: - print(client.is_enabled("")) - asyncio.run(asyncio.sleep(1))`, - JavaScript: `setInterval(() => { - console.log('Is enabled', unleash.isEnabled('')); -}, 1000);`, - React: ``, - Vue: ``, - Svelte: ``, - Swift: `Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in - print("Is enabled", unleashClient.isEnabled(name: "")) -} - -RunLoop.main.run()`, - Android: ``, - Flutter: `Timer.periodic(Duration(seconds: 1), (Timer timer) { - final flagStatus = unleash.isEnabled('counter'); - print('Flag is \${unleash.isEnabled("") ? "enabled" : "disabled"}'); -});`, -}; diff --git a/frontend/src/component/onboarding/snippets/android.md b/frontend/src/component/onboarding/snippets/android.md new file mode 100644 index 0000000000..c32b1e7a15 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/android.md @@ -0,0 +1,21 @@ +1\. Install the SDK +```gradle +implementation("io.getunleash:unleash-android:\${unleash.sdk.version}") + +// Enable required permissions + + +``` + +2\. Initialize Unleash +```kotlin +val unleash = DefaultUnleash( + androidContext = applicationContext, // Reference to your Android application context + unleashConfig = UnleashConfig.newBuilder(appName = "unleash-onboarding-android") + .proxyUrl("") + .clientKey("") + .pollingStrategy.interval(3000) + .metricsStrategy.interval(3000) + .build() +) +``` diff --git a/frontend/src/component/onboarding/snippets/dotnet.md b/frontend/src/component/onboarding/snippets/dotnet.md new file mode 100644 index 0000000000..9f965ba725 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/dotnet.md @@ -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(""), + CustomHttpHeaders = new Dictionary() + { + {"Authorization","" } + } +}; +``` diff --git a/frontend/src/component/onboarding/snippets/flutter.md b/frontend/src/component/onboarding/snippets/flutter.md new file mode 100644 index 0000000000..146b9b1f38 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/flutter.md @@ -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(''), + clientKey: '', + appName: 'unleash-onboarding-flutter'); + +unleash.start(); +``` + +3\. Check feature flag status +```dart +Timer.periodic(Duration(seconds: 1), (Timer timer) { + final flagStatus = unleash.isEnabled(''); + print('Flag is ${unleash.isEnabled("") ? "enabled" : "disabled"}'); +}); +``` diff --git a/frontend/src/component/onboarding/snippets/go.md b/frontend/src/component/onboarding/snippets/go.md new file mode 100644 index 0000000000..a77f2e1964 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/go.md @@ -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(""), + unleash.WithCustomHeaders(http.Header{"Authorization": {""}}), + unleash.WithMetricsInterval(5*time.Second), + ) +} +``` + +3\. Check feature flag status +```go +func main() { + for { + unleash.IsEnabled("") + time.Sleep(time.Second) + } +} +``` diff --git a/frontend/src/component/onboarding/snippets/java.md b/frontend/src/component/onboarding/snippets/java.md new file mode 100644 index 0000000000..93d714c1c2 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/java.md @@ -0,0 +1,30 @@ +1\. Install the SDK +```xml + + io.getunleash + unleash-client-java + LATEST + +``` + +2\. Initialize Unleash +```java +UnleashConfig config = UnleashConfig.builder() + .appName("unleash-onboarding-java") + .instanceId("unleash-onboarding-instance") + .unleashAPI("") + .apiKey("") + .sendMetricsInterval(5) + .build(); + +Unleash unleash = new DefaultUnleash(config); +``` + +3\. Check feature flag status +```java +while (true) { + boolean featureEnabled = unleash.isEnabled(""); + System.out.println("Feature enabled: " + featureEnabled); + Thread.sleep(1000); +} +``` diff --git a/frontend/src/component/onboarding/snippets/javascript.md b/frontend/src/component/onboarding/snippets/javascript.md new file mode 100644 index 0000000000..0b7785a4de --- /dev/null +++ b/frontend/src/component/onboarding/snippets/javascript.md @@ -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: '', + clientKey: '', + appName: 'unleash-onboarding-javascript', + refreshInterval: 5000, +}); + +unleash.start(); +``` + +3\. Check feature flag status +```js +setInterval(() => { + console.log('Is enabled', unleash.isEnabled('')); +}, 1000); +``` diff --git a/frontend/src/component/onboarding/snippets/nodejs.md b/frontend/src/component/onboarding/snippets/nodejs.md new file mode 100644 index 0000000000..e7fbae1f79 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/nodejs.md @@ -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: '', + appName: 'unleash-onboarding-node', + customHeaders: { Authorization: '' }, + metricsInterval: 5000, +}); +``` + +3\. Check feature flag status +```js +setInterval(() => { + console.log('Is enabled', unleash.isEnabled('')); +}, 1000); +``` diff --git a/frontend/src/component/onboarding/snippets/php.md b/frontend/src/component/onboarding/snippets/php.md new file mode 100644 index 0000000000..1aec6312c7 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/php.md @@ -0,0 +1,29 @@ +1\. Install the SDK +```sh +composer require unleash/client +``` + +2\. Initialize Unleash +```php +withAppName('unleash-onboarding-php') + ->withAppUrl('') + ->withHeader('Authorization', '') + ->withInstanceId('unleash-onboarding-instance') + ->withMetricsInterval(5000) + ->build(); +``` + +3\. Check feature flag status +```php +while (true) { + echo 'Feature flag is: ' . $unleash->isEnabled('') . PHP_EOL; + sleep(1); +} +``` diff --git a/frontend/src/component/onboarding/snippets/python.md b/frontend/src/component/onboarding/snippets/python.md new file mode 100644 index 0000000000..2a013fb9b9 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/python.md @@ -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="", + app_name="unleash-onboarding-python", + refresh_interval=5, + custom_headers={'Authorization': ''}) + +client.initialize_client() +``` + +3\. Check feature flag status +```python +while True: + print(client.is_enabled("")) + asyncio.run(asyncio.sleep(1)) +``` diff --git a/frontend/src/component/onboarding/snippets/react.md b/frontend/src/component/onboarding/snippets/react.md new file mode 100644 index 0000000000..f78bc46308 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/react.md @@ -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: '', + clientKey: '', + refreshInterval: 5, // In production use interval of >15s + appName: 'unleash-onboarding-react', +}; + +const root = createRoot(document.getElementById('root')); + +root.render( + + + + + +); +``` + +3\. Check feature flag status +```jsx +import { useFlag } from '@unleash/proxy-client-react'; + +const TestComponent = () => { + const enabled = useFlag(''); + + return enabled ? 'Flag is enabled' : 'Flag is disabled' +}; +``` diff --git a/frontend/src/component/onboarding/snippets/ruby.md b/frontend/src/component/onboarding/snippets/ruby.md new file mode 100644 index 0000000000..1fc136151e --- /dev/null +++ b/frontend/src/component/onboarding/snippets/ruby.md @@ -0,0 +1,31 @@ +1\. Install the SDK +```sh +gem install unleash +``` + +2\. Initialize Unleash +```rb +require 'unleash' + +@unleash = Unleash::Client.new( + url: "", + custom_http_headers: { 'Authorization': "" }, + 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?("") + puts "Flag is enabled" + else + puts "Flag is not enabled" + end + sleep 3 +end + +``` diff --git a/frontend/src/component/onboarding/snippets/rust.md b/frontend/src/component/onboarding/snippets/rust.md new file mode 100644 index 0000000000..aed3a4ca10 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/rust.md @@ -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::( + "", + "unleash-onboarding-rust", + "unleash-onboarding-instance", + "", + )?; +client.register().await?; +``` diff --git a/frontend/src/component/onboarding/snippets/svelte.md b/frontend/src/component/onboarding/snippets/svelte.md new file mode 100644 index 0000000000..43b6b6ad58 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/svelte.md @@ -0,0 +1,22 @@ +1\. Install the SDK +```sh +npm install @unleash/proxy-client-svelte +``` + +2\. Initialize Unleash +```svelte + + + + + +``` diff --git a/frontend/src/component/onboarding/snippets/swift.md b/frontend/src/component/onboarding/snippets/swift.md new file mode 100644 index 0000000000..d7dadce583 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/swift.md @@ -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: "", + clientKey: "", + 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: "")) +} +``` diff --git a/frontend/src/component/onboarding/snippets/vue.md b/frontend/src/component/onboarding/snippets/vue.md new file mode 100644 index 0000000000..84d3d8d6c4 --- /dev/null +++ b/frontend/src/component/onboarding/snippets/vue.md @@ -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: '', + clientKey: '', + refreshInterval: 15, + appName: 'unleash-onboarding-vue', +} + +const app = createApp(App) +app.use(unleashPlugin, { config }) +app.mount('#app') +```