npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@unleash/proxy-client-svelte

v0.3.0

Published

Svelte interface for working with Unleash

Downloads

2,183

Readme

Installation

npm install @unleash/proxy-client-svelte
# or
yarn add @unleash/proxy-client-svelte

How to use

Initialize the client

Depending on your needs and specific use-case, prepare one of:

And a respective frontend token (or, if you're using the Unleash Proxy, one of your proxy's designated client keys, previously known as proxy secrets).

Import the provider like this in your entrypoint file (typically index.svelte):

<script lang="ts">
	import { FlagProvider } from '@unleash/proxy-client-svelte';

	const config = {
		url: '<unleash-url>/api/frontend', // Your Front-end API, Unleash Edge or Unleash Proxy URL
		clientKey: '<your-token>', // Front-end API token (or proxy client key)
		refreshInterval: 15, // How often (in seconds) the client should poll the proxy for updates
		appName: 'your-app-name' // The name of your application. It's only used for identifying your application
	};
</script>

<FlagProvider {config}>
	<App />
</FlagProvider>

Connection options

To connect this SDK to your Unleash instance's front-end API, use the URL to your Unleash instance's front-end API (<unleash-url>/api/frontend) as the url parameter. For the clientKey parameter, use a FRONTEND token generated from your Unleash instance. Refer to the how to create API tokens guide for the necessary steps.

To connect this SDK to the Unleash Edge, use the URL to your Unleash Edge instance as the url parameter. For the clientKey parameter, use a FRONTEND token generated from your Unleash Edge instance. Refer to the how to create API tokens guide for the necessary steps. Ensure that your Unleash Edge instance is correctly configured to have access to the feature toggles your FRONTEND token is requesting.

To connect this SDK to the Unleash proxy, use the proxy's URL and a proxy client key. The configuration section of the Unleash proxy docs contains more info on how to configure client keys for your proxy.

Check feature toggle status

To check if a feature is enabled:

<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:

<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.

<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

Initial context can be specified on a FlagProvider config.context property.

<FlagProvider config={{ ...config, context: { userId: 123 }}>

This code sample shows you how to update the unleash context dynamically:

<script lang="ts">
	import { useUnleashContext, useFlag } from '@unleash/proxy-client-svelte';

	export let userId;

	const toggle = useFlag('my-toggle');
	const updateContext = useUnleashContext();

	$: {
		// context is updated with userId
		updateContext({ userId });
	}

	// OR if you need to perform an action right after new context is applied
	$: {
		async function run() {
			// Can wait for the new flags to pull in from the different context
			await updateContext({ userId });
			console.log('new flags loaded for', userId);
		}
		run();
	}
</script>

Advanced use cases

Deferring client start

By default, the Unleash client will start polling for toggles immediately when the FlagProvider component renders. You can prevent it by setting startClient prop to false. This is useful when you'd like to for example bootstrap the client and work offline.

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.

<script lang="ts">
	const client = new UnleashClient({
		/* ... */
	});

	onMount(async () => {
		// do async work ...
		client.start();
	});
</script>

<FlagProvider unleashClient={client} startClient={false}>
	<App />
</FlagProvider>

Use unleash client directly

<script lang="ts">
	import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-svelte';

	export let userId;

	const client = useUnleashClient();

	const login = () => {
		// login user
		if (client.isEnabled('new-onboarding')) {
			// Send user to new onboarding flow
		} else {
			// send user to old onboarding flow
		}
	};
</script>

<LoginForm {login} />