Svelte

Our Svelte integration works with Svelte version??? It works with SPAs as well as server side rendered apps.

Installation

To get started make sure to install the package using your favorite package manager.

npm i @tryabby/svelte

Usage

Create your Instance

To use Abby in your code you will need to create a typed Hook and Provider first. You can do this by using the createAbby function. Please copy the id of your project from the dashboard to get started.

import { createAbby } from "@tryabby/svelte";
 
const { AbbyProvider, useAbby } = createAbby({
  projectId: "<YOUR_PROJECT_ID>",
  currentEnvironment: process.env.NODE_ENV,
  tests: {
    test: { variants: ["A", "B"] },
    footer: { variants: ["dark", "orange", "green"] },
    // ... your tests
  },
  flags: ["darkMode", "newFeature"],
});

Wrap your Application

You will need to wrap your application in a layout containing the AbbyProvider to make sure the hook works.

//+layout.svelte
<script lang="ts">
    import { abby } from "$lib/abby";
    import type { LayoutServerData } from "./$types";
 
    const Provider = abby.AbbyProvider;
 
    export let data: LayoutServerData;
    const Devtools = abby.withDevTools();
</script>
 
<Provider {data} abby={abby.__abby__}>
    <Devtools abby={abby.__abby__} props={{ defaultShow: true }} />
    <slot />
</Provider>

If you want to use SSR you also need to provide a +layout.server.ts

import { abby } from "$lib/abby";
 
export const load = abby.withAbby()

Retrieving the values

You can now import the functions created by createAbby and use it in your components.

useAbby

The useAbby function returns an object with the following values:

variant - A store providing the variant which is currently active
onAct - A function that you can call to trigger any kind of interaction with the tested component (will be used to track conversions)

<script lang="ts">
	import { abby } from "$lib/abby";
	const { variant, onAct } = abby.useAbby("New Test3");
</script>
 
<body>
	<h1>Abby Test Page:</h1>
	{#if $variant === "A"}
		<button on:click={onAct}> A</button>
	{:else}
		<button on:click={onAct}> B</button>
	{/if}
</body>

useFeatureFlag

The useFeatureFlag function returns a store providing a boolean value that indicates if the flag is active or not.

<script lang="ts">
	import { abby } from "$lib/abby";
	const newFeature = abby.useFeatureFlag("newFeature");
</script>
 
<body>
	{#if $newFeature}
		my super secret feature
	{/if}
</body>

React Angular