diff --git a/apps/angular-example/CHANGELOG.md b/apps/angular-example/CHANGELOG.md
index 2d69a54d..c6f7abdf 100644
--- a/apps/angular-example/CHANGELOG.md
+++ b/apps/angular-example/CHANGELOG.md
@@ -1,5 +1,13 @@
# angular-example
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+ - @tryabby/devtools@4.0.0
+ - @tryabby/angular@1.0.0
+
## 0.0.3
### Patch Changes
diff --git a/apps/angular-example/package.json b/apps/angular-example/package.json
index ce4b70c1..ef3826fa 100644
--- a/apps/angular-example/package.json
+++ b/apps/angular-example/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-example",
- "version": "0.0.3",
+ "version": "0.0.4",
"private": true,
"scripts": {
"ng": "ng",
diff --git a/apps/angular-example/src/app/abby.ts b/apps/angular-example/src/app/abby.ts
index 1610e959..45913b0f 100644
--- a/apps/angular-example/src/app/abby.ts
+++ b/apps/angular-example/src/app/abby.ts
@@ -1,28 +1,30 @@
-import { Injectable } from '@angular/core';
-import { AbbyService } from 'abby';
-import { environment } from '../environments/environment';
+import { Injectable } from "@angular/core";
+import { AbbyService } from "abby";
+import { environment } from "../environments/environment";
export const abby = {
projectId: environment.ABBY_PROJECT_ID,
- currentEnvironment: 'test',
+ currentEnvironment: "test",
tests: {
AngularTest: {
- variants: ['A', 'B', 'C', 'D'],
+ variants: ["A", "B", "C", "D"],
},
NotExistingTest: {
- variants: ['A', 'B'],
+ variants: ["A", "B"],
},
},
- flags: ['AngularFlag', 'AngularFlag2', 'NotExistingFlag'],
- apiUrl: 'http://localhost:3000/',
+ flags: { AngularFlag: "Boolean", AngularFlag2: "Boolean", NotExistingFlag: "Boolean" },
+ apiUrl: "http://localhost:3000/",
debug: true,
-};
+} as const;
@Injectable({
- providedIn: 'root',
+ providedIn: "root",
useExisting: AbbyService,
})
export class Abby extends AbbyService<
- (typeof abby)['flags'][number],
- keyof (typeof abby)['tests']
+ keyof (typeof abby)["flags"],
+ keyof (typeof abby)["tests"],
+ (typeof abby)["tests"],
+ (typeof abby)["flags"]
> {}
diff --git a/apps/docs/pages/feature-flags.mdx b/apps/docs/pages/feature-flags.mdx
index 1ab9736c..ee1ed8bb 100644
--- a/apps/docs/pages/feature-flags.mdx
+++ b/apps/docs/pages/feature-flags.mdx
@@ -3,8 +3,11 @@
A feature flag in A/BBY is basically just a boolean that can be toggled via the Dashboard in A/BBY.
This is useful for testing new features, or for hiding features that are not yet ready for production.
+A/BBY also allows you to create A/B Flags that are not just booleans. You can also create `Strings` and `Number` feature flags that allow you to inject
+different values for different environments remotely via the Dashboard.
+
A feature flag is always toggled for a certain [Environment](/environments) which allows you to test features in different environments.
For example, you can have a feature flag that is enabled in the `development` environment, but disabled in the `production` environment.
When a feature flag is toggled for an environment, every user will see the same value for that feature flag.
-If you want to test a feature for a specific user, you can use [A/B Tests](/a-b-testing).
+If you want to test a feature for a specific user, you can use [A/B Tests](/a-b-testing).
\ No newline at end of file
diff --git a/apps/docs/pages/integrations/angular.mdx b/apps/docs/pages/integrations/angular.mdx
index 6a33c18f..7f5a083c 100644
--- a/apps/docs/pages/integrations/angular.mdx
+++ b/apps/docs/pages/integrations/angular.mdx
@@ -31,9 +31,8 @@ To get started make sure to install the packages using your favorite package man
### Usage
-
-Make sure, that you have set skipLibCheck to true in your tsconfig
-
+
+Make sure, that you have set skipLibCheck to true in your tsconfig
#### Create your Module
@@ -54,7 +53,7 @@ import { AbbyModule } from "@tryabby/angular";
footer: { variants: ["dark", "orange", "green"] },
// ... your tests
},
- flags: ["darkMode", "newFeature"],
+ flags: { darkMode: "Boolean", newFeature: "Boolean" },
}),
],
providers: [],
@@ -85,8 +84,10 @@ export class MyComponent {
}
}
```
+
-For this Example "strictPropertyInitialization" has to be set to false in your tsconfig. Otherwise you have to initialize "footerVariant" with an default value.
+ For this Example "strictPropertyInitialization" has to be set to false in your tsconfig. Otherwise
+ you have to initialize "footerVariant" with an default value.
#### Using Abby Directives
diff --git a/apps/docs/pages/integrations/nextjs.mdx b/apps/docs/pages/integrations/nextjs.mdx
index e1a98ed6..0b31b441 100644
--- a/apps/docs/pages/integrations/nextjs.mdx
+++ b/apps/docs/pages/integrations/nextjs.mdx
@@ -43,7 +43,7 @@ const { AbbyProvider, useAbby, withAbby } = createAbby({
footer: { variants: ["dark", "orange", "green"] },
// ... your tests
},
- flags: ["darkMode", "newFeature"],
+ flags: { darkMode: "Boolean", newFeature: "Boolean" },
});
```
@@ -76,10 +76,7 @@ This works really well with Static Site Generation (SSG) and Server Side Renderi
```tsx /withAbby(MyApp)/
import { AbbyProvider, withAbby } from "../lib/abby";
-function MyApp({
- Component,
- pageProps: { __ABBY_PROJECT_DATA__, ...pageProps },
-}) {
+function MyApp({ Component, pageProps: { __ABBY_PROJECT_DATA__, ...pageProps } }) {
return (
diff --git a/apps/docs/pages/integrations/react.mdx b/apps/docs/pages/integrations/react.mdx
index 3e1eac3a..f539a14e 100644
--- a/apps/docs/pages/integrations/react.mdx
+++ b/apps/docs/pages/integrations/react.mdx
@@ -5,8 +5,7 @@ import { Tab, Tabs, Callout } from "nextra-theme-docs";
Our React integration works with React 16.8.0 or later. It works with SPAs as well as server side rendered apps.
- If you're using Next.js please check out our [Next
- integration](/integrations/nextjs)
+ If you're using Next.js please check out our [Next integration](/integrations/nextjs)
### Installation
@@ -50,7 +49,7 @@ const { AbbyProvider, useAbby } = createAbby({
footer: { variants: ["dark", "orange", "green"] },
// ... your tests
},
- flags: ["darkMode", "newFeature"],
+ flags: { darkMode: "Boolean", newFeature: "Boolean" },
});
```
diff --git a/apps/docs/pages/integrations/svelte.mdx b/apps/docs/pages/integrations/svelte.mdx
index c05606ae..c7d022dc 100644
--- a/apps/docs/pages/integrations/svelte.mdx
+++ b/apps/docs/pages/integrations/svelte.mdx
@@ -4,8 +4,6 @@ import { Tab, Tabs, Callout } from "nextra-theme-docs";
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.
@@ -47,13 +45,14 @@ const { AbbyProvider, useAbby } = createAbby({
footer: { variants: ["dark", "orange", "green"] },
// ... your tests
},
- flags: ["darkMode", "newFeature"],
+ flags: { darkMode: "Boolean", newFeature: "Boolean" },
});
```
#### Wrap your Application
You will need to wrap your application in a layout containing the `AbbyProvider` to make sure the hook works.
+
```svelte
//+layout.svelte
+
+
+
+
diff --git a/packages/devtools/src/components/JsonEditor.svelte b/packages/devtools/src/components/JsonEditor.svelte
new file mode 100644
index 00000000..6fdb02d7
--- /dev/null
+++ b/packages/devtools/src/components/JsonEditor.svelte
@@ -0,0 +1,67 @@
+
+
+