feat(onboarding): svelte example

Unleash · Sep 25, 2024 · 0b7f7b3 · 0b7f7b3
1 parent ce9805c
commit 0b7f7b3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/frontend/src/component/onboarding/snippets/svelte.md b/frontend/src/component/onboarding/snippets/svelte.md
@@ -5,18 +5,37 @@ npm install @unleash/proxy-client-svelte
 
 2\. Initialize Unleash
 ```svelte
-<script lang="ts">
-    import { FlagProvider } from '@unleash/proxy-client-svelte';
+<script>
+	import { FlagProvider } from '@unleash/proxy-client-svelte';
 
-    const config = {
+	const config = {
         url: '<YOUR_API_URL>',
         clientKey: '<YOUR_API_TOKEN>',
-        refreshInterval: 15,
         appName: 'unleash-onboarding-svelte'
-    };
+        refreshInterval: 5, // Use >15s in production
+        metricsInterval: 5, // Use >15s in production
+	};
+</script>
+
+<div class="app">
+	<FlagProvider {config}>
+		<main>
+			<slot />
+		</main>
+	</FlagProvider>
+</div>
+```
+
+3\. Check feature flag status
+```svelte
+<script lang="ts">
+	import { useFlag } from '@unleash/proxy-client-svelte';
+	const enabled = useFlag('example-flag');
 </script>
 
-<FlagProvider {config}>
-    <App />
-</FlagProvider>
+<section>
+    <p>
+        {$enabled ? 'Feature is enabled!' : 'Feature is disabled!'}
+    </p>
+</section>
 ```
diff --git a/frontend/src/component/onboarding/snippets/vue.md b/frontend/src/component/onboarding/snippets/vue.md
@@ -6,16 +6,15 @@ npm install @unleash/proxy-client-vue
 2\. Initialize Unleash
 ```vue
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import { FlagProvider } from '@unleash/proxy-client-vue'
+    import { FlagProvider } from '@unleash/proxy-client-vue'
 
-const config = {
-  url: '<YOUR_API_URL>',
-  clientKey: '<YOUR_API_TOKEN>',
-  appName: 'unleash-onboarding-vue',
-  refreshInterval: 5, // Use >15s for production
-  metricsInterval: 5, // Use >15s for production
-}
+    const config = {
+        url: '<YOUR_API_URL>',
+        clientKey: '<YOUR_API_TOKEN>',
+        appName: 'unleash-onboarding-vue',
+        refreshInterval: 5, // Use >15s in production
+        metricsInterval: 5, // Use >15s in production
+    }
 </script>
 
 <template>
@@ -28,9 +27,8 @@ const config = {
 3\. Check feature flag status
 ```vue
 <script setup lang="ts">
-import { useFlag } from '@unleash/proxy-client-vue'
-
-const enabled = useFlag('example-flag')
+    import { useFlag } from '@unleash/proxy-client-vue'
+    const enabled = useFlag('example-flag')
 </script>
 
 <template>