Make it possible to use node-fetch in HTTPService

apps/angular-example/CHANGELOG.md

@@ -1,5 +1,13 @@
 # angular-example
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @tryabby/[email protected]
+  - @tryabby/[email protected]
+
 ## 0.0.3
 
 ### Patch Changes

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",

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"]
 > {}

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

apps/docs/pages/integrations/angular.mdx

@@ -31,9 +31,8 @@ To get started make sure to install the packages using your favorite package man
 </Tabs>
 
 ### Usage
-<Callout>
-Make sure, that you have set skipLibCheck to true in your tsconfig
-</Callout>
+
+<Callout>Make sure, that you have set skipLibCheck to true in your tsconfig</Callout>
 
 #### 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 {
   }
 }
 ```
+
 <Callout>
-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.
 </Callout>
 
 #### Using Abby Directives

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 (
     <AbbyProvider initialData={__ABBY_PROJECT_DATA__}>
       <Component {...pageProps} />

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.
 
 <Callout>
-  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)
 </Callout>
 
 ### Installation
@@ -50,7 +49,7 @@ const { AbbyProvider, useAbby } = createAbby({
     footer: { variants: ["dark", "orange", "green"] },
     // ... your tests
   },
-  flags: ["darkMode", "newFeature"],
+  flags: { darkMode: "Boolean", newFeature: "Boolean" },
 });
 ```
 

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
 <script lang="ts">
@@ -74,13 +73,13 @@ You will need to wrap your application in a layout containing the `AbbyProvider`
 ```
 
 If you want to use SSR you also need to provide a +layout.server.ts
+
 ```tsx
 import { abby } from "$lib/abby";
 
-export const load = abby.withAbby()
+export const load = abby.withAbby();
 ```
 
-
 ### Retrieving the values
 
 You can now import the functions created by `createAbby` and use it in your components.

apps/docs/pages/nextjs.mdx

@@ -51,7 +51,9 @@ export const { useAbby, AbbyProvider, useFeatureFlag, withAbby } = createAbby({
       variants: ["light", "dark"],
     },
   },
-  flags: ["useDarkmode"],
+  flags: {
+    useDarkMode: "Boolean",
+  },
 });
 ```
 
@@ -64,10 +66,7 @@ This is highly recommended so that there is no flicker on the inital load of you
 // _app.tsx
 import { AbbyProvider } from "lib/abby";
 
-function MyApp({
-  Component,
-  pageProps: { __ABBY_PROJECT_DATA__, ...pageProps },
-}) {
+function MyApp({ Component, pageProps: { __ABBY_PROJECT_DATA__, ...pageProps } }) {
   return (
     <AbbyProvider initialData={__ABBY_PROJECT_DATA__}>
       <Component {...pageProps} />
@@ -120,9 +119,7 @@ export function HomePage() {
           onAct();
           // React to the user clicking the button
         }}
-        className={`button ${variant === "dark" && "bg-dark"} ${
-          variant === "light" && "bg-light"
-        }`}
+        className={`button ${variant === "dark" && "bg-dark"} ${variant === "light" && "bg-light"}`}
       >
         BUY IT
       </button>

apps/docs/pages/reference/angular.mdx

@@ -44,7 +44,7 @@ export const abby = {
     test: {
       variants: ["control", "variant-a", "variant-b"],
     },
-    flags: ["test-flag"],
+    flags: { "test-flag": "Boolean" },
   },
 };
 
@@ -139,12 +139,8 @@ The `AbbyTest` is an Angular directive provided by @tryabby/angular package that
 #### Example
 
 ```html
-<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-a' }"
-  >AAAAAA</ng-container
->
-<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-b' }"
-  >BBBBBB</ng-container
->
+<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-a' }">AAAAAA</ng-container>
+<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-b' }">BBBBBB</ng-container>
 ```
 
 ### Flag Directive

apps/docs/pages/reference/nextjs.mdx

@@ -46,7 +46,7 @@ The flags property is an array containing your defined Feature Flags. You probab
 ```ts
 const abby = createAbby({
   // ... your config
-  flags: ["test-flag"],
+  flags: { "test-flag": "Boolean" },
 });
 ```
 

apps/docs/pages/reference/react.mdx

@@ -46,7 +46,7 @@ The flags property is an array containing your defined Feature Flags. You probab
 ```ts
 const abby = createAbby({
   // ... your config
-  flags: ["test-flag"],
+  flags: { "test-flag": "Boolean" },
 });
 ```
 

apps/docs/pages/reference/svelte.mdx

@@ -46,7 +46,7 @@ The flags property is an array containing your defined Feature Flags. You probab
 ```ts
 const abby = createAbby({
   // ... your config
-  flags: ["test-flag"],
+  flags: { "test-flag": "Boolean" },
 });
 ```
 
@@ -93,7 +93,7 @@ A store providing the value of the flag _Type: `boolean`_
 
 #### AbbyProvider
 
-A svelte component to wrap your application. 
+A svelte component to wrap your application.
 
 ##### Props
 
@@ -152,8 +152,8 @@ If you use this in your layout.server.ts, all occurances of `useFeatureFlag` wil
 ```ts
 // layout.server.ts
 import { abby } from "$lib/abby";
- 
-export const load = abby.withAbby()
+
+export const load = abby.withAbby();
 ```
 
 #### getABResetFunction
@@ -164,5 +164,3 @@ This means the cookie will be deleted and the user will get a new variant on the
 #### Parameters
 
 The name of the test, needs to be one of the defined tests.
-
-

apps/web/CHANGELOG.md

@@ -1,5 +1,14 @@
 # web
 
+## 0.2.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @tryabby/[email protected]
+  - @tryabby/[email protected]
+  - @tryabby/[email protected]
+
 ## 0.2.21
 
 ### Patch Changes

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -22,12 +22,15 @@
     "@headlessui/react": "^1.7.13",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
+    "@monaco-editor/react": "^4.5.1",
     "@next-auth/prisma-adapter": "1.0.5",
     "@next/mdx": "13.3.4",
     "@prisma/client": "^4.12.0",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@react-email/button": "0.0.5",

apps/web/prisma/migrations/20230601155320_add_multivariate_flags/migration.sql

@@ -0,0 +1,17 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `isEnabled` on the `FlagValue` table. All the data in the column will be lost.
+  - Added the required column `value` to the `FlagValue` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE `FlagValue`
+    ADD COLUMN `type` ENUM('BOOLEAN', 'STRING', 'NUMBER', 'JSON') NOT NULL DEFAULT 'BOOLEAN',
+    ADD COLUMN `value` LONGTEXT NOT NULL;
+
+UPDATE `FlagValue` SET `value` = IF(`isEnabled`, 'true', 'false') WHERE `type` = 'BOOLEAN';
+
+-- DropColumn
+ALTER TABLE `FlagValue`
+    DROP COLUMN `isEnabled`;

apps/web/prisma/migrations/20230601161058_update_flag_history/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `oldValue` on the `FeatureFlagHistory` table. The data in that column could be lost. The data in that column will be cast from `TinyInt` to `LongText`.
+  - You are about to alter the column `newValue` on the `FeatureFlagHistory` table. The data in that column could be lost. The data in that column will be cast from `TinyInt` to `LongText`.
+
+*/
+-- AlterTable
+ALTER TABLE `FeatureFlagHistory` MODIFY `oldValue` LONGTEXT NULL,
+    MODIFY `newValue` LONGTEXT NULL;

apps/web/prisma/migrations/20230602080502_remove_json_field_from_flagtype_enum/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - The values [JSON] on the enum `FlagValue_type` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE `FlagValue` MODIFY `type` ENUM('BOOLEAN', 'STRING', 'NUMBER') NOT NULL DEFAULT 'BOOLEAN';

apps/web/prisma/migrations/20230611180244_move_flag_type_to_flag_instead_of_value/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `type` on the `FlagValue` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE `FeatureFlag` ADD COLUMN `type` ENUM('BOOLEAN', 'STRING', 'NUMBER') NOT NULL DEFAULT 'BOOLEAN';
+
+-- AlterTable
+ALTER TABLE `FlagValue` DROP COLUMN `type`;

apps/web/prisma/migrations/20230630140739_add_json_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `FeatureFlag` MODIFY `type` ENUM('BOOLEAN', 'STRING', 'NUMBER', 'JSON') NOT NULL DEFAULT 'BOOLEAN';