Type generating CLI

.vscode/settings.json

@@ -39,7 +39,5 @@
     "**/*.lock": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": [
-    "bucketco"
-  ]
+  "cSpell.words": ["bucketco", "openfeature"]
 }

package.json

@@ -13,6 +13,7 @@
     "build": "lerna run build --stream",
     "test:ci": "lerna run test:ci --stream",
     "test": "lerna run test --stream",
+    "format": "lerna run format --stream",
     "prettier": "lerna run prettier --stream",
     "prettier:fix": "lerna run prettier -- --write",
     "lint": "lerna run lint --stream",

packages/browser-sdk/README.md

@@ -27,19 +27,28 @@ const bucketClient = new BucketClient({ publishableKey, user, company });
 
 await bucketClient.initialize();
 
-const { isEnabled, track, requestFeedback } = bucketClient.getFeature("huddle");
+const {
+  isEnabled,
+  config: { payload: question },
+  track,
+  requestFeedback,
+} = bucketClient.getFeature("huddle");
 
 if (isEnabled) {
-  // show feature. When retrieving `isEnabled` the client automatically
+  // Show feature. When retrieving `isEnabled` the client automatically
   // sends a "check" event for the "huddle" feature which is shown in the
   // Bucket UI.
 
   // On usage, call `track` to let Bucket know that a user interacted with the feature
   track();
 
+  // The `payload` is a user-supplied JSON in Bucket that is dynamically picked
+  // out depending on the user/company.
+  const question = payload?.question ?? "Tell us what you think of Huddles";
+
   // Use `requestFeedback` to create "Send feedback" buttons easily for specific
   // features. This is not related to `track` and you can call them individually.
-  requestFeedback({ title: "Tell us what you think of Huddles" });
+  requestFeedback({ title: question });
 }
 
 // `track` just calls `bucketClient.track(<featureKey>)` to send an event using the same feature key
@@ -138,6 +147,7 @@ To retrieve features along with their targeting information, use `getFeature(key
 const huddle = bucketClient.getFeature("huddle");
 // {
 //   isEnabled: true,
+//   config: { key: "zoom", payload: { ... } },
 //   track: () => Promise<Response>
 //   requestFeedback: (options: RequestFeedbackData) => void
 // }
@@ -151,6 +161,7 @@ const features = bucketClient.getFeatures();
 //   huddle: {
 //     isEnabled: true,
 //     targetingVersion: 42,
+//     config: ...
 //   }
 // }
 ```
@@ -159,7 +170,35 @@ const features = bucketClient.getFeatures();
 by down-stream clients, like the React SDK.
 
 Note that accessing `isEnabled` on the object returned by `getFeatures` does not automatically
-generate a `check` event, contrary to the `isEnabled` property on the object return from `getFeature`.
+generate a `check` event, contrary to the `isEnabled` property on the object returned by `getFeature`.
+
+### Remote config
+
+Similar to `isEnabled`, each feature has a `config` property. This configuration is managed from within Bucket.
+It is managed similar to the way access to features is managed, but instead of the binary `isEnabled` you can have
+multiple configuration values which are given to different user/companies.
+
+```ts
+const features = bucketClient.getFeatures();
+// {
+//   huddle: {
+//     isEnabled: true,
+//     targetingVersion: 42,
+//     config: {
+//       key: "gpt-3.5",
+//       payload: { maxTokens: 10000, model: "gpt-3.5-beta1" }
+//     }
+//   }
+// }
+```
+
+The `key` is always present while the `payload` is a optional JSON value for arbitrary configuration needs.
+If feature has no configuration or, no configuration value was matched against the context, the `config` object
+will be empty, thus, `key` will be `undefined`. Make sure to check against this case when trying to use the
+configuration in your application.
+
+Just as `isEnabled`, accessing `config` on the object returned by `getFeatures` does not automatically
+generate a `check` event, contrary to the `config` property on the object returned by `getFeature`.
 
 ### Tracking feature usage
 

packages/browser-sdk/example/typescript/app.ts

@@ -2,15 +2,34 @@ import { BucketClient } from "../../src";
 
 const urlParams = new URLSearchParams(window.location.search);
 const publishableKey = urlParams.get("publishableKey");
-const featureKey = urlParams.get("featureKey") ?? "huddles";
-
-const featureList = ["huddles"];
+const featureKey = (urlParams.get("featureKey") ??
+  "huddles") as keyof FeatureTypes;
 
 if (!publishableKey) {
   throw Error("publishableKey is missing");
 }
 
-const bucket = new BucketClient({
+interface FeatureTypes {
+  huddles: {
+    key: "huddles";
+    isEnabled: boolean;
+    config: {
+      title: string;
+      description: string;
+    };
+  };
+  voiceHuddle: {
+    key: "voiceHuddle";
+    isEnabled: boolean;
+    config: {
+      volumeMax: number;
+    };
+  };
+}
+
+const featureList = ["huddles", "voiceHuddle"];
+
+const bucket = new BucketClient<FeatureTypes>({
   publishableKey,
   user: { id: "42" },
   company: { id: "1" },

packages/browser-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bucketco/browser-sdk",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.3",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {
@@ -26,13 +26,18 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/bucket-browser-sdk.umd.js",
-  "types": "./dist/types/src/index.d.ts",
+  "main": "./dist/bucket-browser-sdk-index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/bucket-browser-sdk.mjs",
-      "require": "./dist/bucket-browser-sdk.umd.js",
-      "types": "./dist/types/src/index.d.ts"
+      "import": "./dist/bucket-browser-sdk-index.mjs",
+      "require": "./dist/bucket-browser-sdk.amd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./configuredClient": {
+      "import": "./dist/bucket-browser-sdk-configuredClient.mjs",
+      "require": "./dist/bucket-browser-sdk-configuredClient.amd.js",
+      "types": "./dist/configuredClient.d.ts"
     }
   },
   "dependencies": {