feat(node-sdk): improved flag events (#307)

This PR improves the handling of check/evaluate events in the age of
`remote config`. Fixes some additional small nagging issues along the
way.

Author: pavkam

docs.sh

@@ -15,11 +15,46 @@ typedoc
 # We can fix this by removing the number at the end of the anchor.
 SEDCOMMAND='s/globals.md#(.*)-[0-9]+/globals.md#\1/g'
 
-FILES=$(find dist/docs/@bucketco -name "globals.md")
+# Find all markdown files including globals.md
+FILES=$(find dist/docs/@bucketco -name "*.md")
 
+echo "Processing markdown files..."
 for file in $FILES
 do
-  sed -r $SEDCOMMAND $file > $file.fixed
-  rm $file
-  mv $file.fixed $file
+  echo "Processing $file..."
+
+  # Fix anchor links in globals.md files
+  if [[ "$file" == *"globals.md" ]]; then
+    sed -r "$SEDCOMMAND" "$file" > "$file.fixed"
+    rm "$file"
+    mv "$file.fixed" "$file"
+  fi
+
+  # Create a temporary file for processing
+  tmp_file="${file}.tmp"
+
+  # Process NOTE blocks - handle multi-line
+  awk '
+    BEGIN { in_block = 0; content = ""; }
+    /^> \[!NOTE\]/ { in_block = 1; print "{% hint style=\"info\" %}"; next; }
+    /^> \[!TIP\]/ { in_block = 1; print "{% hint style=\"success\" %}"; next; }
+    /^> \[!IMPORTANT\]/ { in_block = 1; print "{% hint style=\"warning\" %}"; next; }
+    /^> \[!WARNING\]/ { in_block = 1; print "{% hint style=\"warning\" %}"; next; }
+    /^> \[!CAUTION\]/ { in_block = 1; print "{% hint style=\"danger\" %}"; next; }
+    in_block && /^>/ { 
+      content = content substr($0, 3) "\n";
+      next;
+    }
+    in_block && !/^>/ { 
+      printf "%s", content;
+      print "{% endhint %}";
+      in_block = 0;
+      content = "";
+    }
+    !in_block { print; }
+  ' "$file" > "$tmp_file"
+
+  mv "$tmp_file" "$file"
 done
+
+echo "Processing complete!"

packages/browser-sdk/README.md

@@ -27,28 +27,19 @@ const bucketClient = new BucketClient({ publishableKey, user, company });
 
 await bucketClient.initialize();
 
-const {
-  isEnabled,
-  config: { payload: question },
-  track,
-  requestFeedback,
-} = bucketClient.getFeature("huddle");
+const { isEnabled, 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: question });
+  requestFeedback({ title: "Tell us what you think of Huddles" });
 }
 
 // `track` just calls `bucketClient.track(<featureKey>)` to send an event using the same feature key
@@ -147,7 +138,6 @@ 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
 // }
@@ -161,7 +151,6 @@ const features = bucketClient.getFeatures();
 //   huddle: {
 //     isEnabled: true,
 //     targetingVersion: 42,
-//     config: ...
 //   }
 // }
 ```
@@ -170,35 +159,7 @@ 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 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`.
+generate a `check` event, contrary to the `isEnabled` property on the object return from `getFeature`.
 
 ### Tracking feature usage
 

packages/browser-sdk/example/browser.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bucket feature management</title>
+  </head>
+  <body>
+    <span id="loading">Loading...</span>
+
+    <script>
+      const urlParams = new URLSearchParams(window.location.search);
+      const publishableKey = urlParams.get("publishableKey");
+      const featureKey = urlParams.get("featureKey") ?? "huddles";
+    </script>
+    <div id="start-huddle" style="display: none">
+      <button onClick="bucket.track(featureKey)">Click me</button>
+      <button onClick="bucket.requestFeedback({featureKey})">
+        Give feedback!
+      </button>
+    </div>
+
+    <script src="../dist/bucket-browser-sdk.umd.js"></script>
+    <script>
+      const bucket = new BucketBrowserSDK.BucketClient({
+        publishableKey,
+        user: { id: "42" },
+        company: { id: "1" },
+      });
+
+      bucket.initialize().then(() => {
+        console.log("Bucket initialized");
+        document.getElementById("loading").style.display = "none";
+        const { isEnabled, track, requestFeedback } =
+          bucket.getFeature("huddles");
+        if (isEnabled) {
+          // show the start-huddle button
+          document.getElementById("start-huddle").style.display = "block";
+        }
+      });
+    </script>
+  </body>
+</html>

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

@@ -1,6 +1,6 @@
 {
   "name": "@bucketco/browser-sdk",
-  "version": "3.0.0-alpha.2",
+  "version": "2.5.2",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {