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 config

To use Abby you need to create your config first. You can do this by creating a file called abby.config.ts in your root folder. This file will be used to configure your project.

// abby.config.ts
import { defineConfig } from "@tryabby/svelte";
 
export default defineConfig({
  projectId: "<YOUR_PROJECT_ID>",
  currentEnvironment: process.env.NODE_ENV,
  environments: ["production", "development"],
  tests: {
    test: { variants: ["A", "B"] },
    footer: { variants: ["dark", "orange", "green"] },
    // ... your tests
  },
  flags: ["darkMode", "newFeature"],
  remoteConfig: {
    customButtonText: "String",
  },
});

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";
import abbyConfig from "../abby.config";
 
const { AbbyProvider, useAbby } = createAbby(abbyConfig);

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();

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>

Optionally, you can provide a lookup object to map the active to a custom value.

<script lang="ts">
    import { abby } from "$lib/abby";
    const { variant , onAct } = abby.useAbby("test", {
        A: "Hello",
        B: "Goodbye"
    });
</script>
 
<body>
    <h1>Abby Test Page:</h1>
    <p>{ variant } World!</p>
</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>

useRemoteConfig

The useRemoteConfig function returns a store providing a custom value as specified in your abby.config.ts. The return type will automatically be inferred from your config.

<script lang="ts">
  import { abby } from "$lib/abby";
  const customButtonText = abby.useRemoteConfig("customButtonText");
</script>
 
<body>
  <button>{$customButtonText}</button>
</body>

Remix Angular