mikker · April 1, 2025 20:22 · Apr 1, 2025 · Sep 5, 2024 · Sep 5, 2024
diff --git a/application_controller.rb b/application_controller.rb
@@ -9,7 +9,8 @@ def bucket_options
     {
       publishable_key: Rails.application.credentials.bucket_publishable_key,
       user: { id: current_user&.id },
-      company: { id: current_company&.id } # or current_user.id again if you don't have companies
+      company: { id: current_company&.id }, # or current_user.id again if you don't have companies
+      toolbar: Rails.env.development? || current_user&.admin?
     }
   end
 end
diff --git a/bucket_controller.js b/bucket_controller.js
@@ -1,7 +1,10 @@
 import { Controller } from "@hotwired/stimulus";
 import { BucketClient } from "@bucketco/browser-sdk";
 
-const bucket = new BucketClient(window.BUCKET_OPTS);
+const bucket = new BucketClient({
+  ...window.BUCKET_OPTS,
+  host: "https://front-eu.bucket.co",
+});
 
 const prom = bucket.initialize();
 
@@ -10,10 +13,12 @@ export default class extends Controller {
     feature: String,
     enabled: { type: Boolean, default: false },
     hideIfDisabled: { type: Boolean, default: true },
-    hiddenClass: { type: String, default: "hidden" },
   };
 
   async connect() {
+    this.initialDisplay = getComputedStyle(this.element).display
+    this.toggleVisibility()
+
     await prom;
 
     this.update();
@@ -25,25 +30,28 @@ export default class extends Controller {
     removeEventListener("turbo:load", this.update);
   }
 
-  update() {
+  update = () => {
     this.enabledValue = bucket.getFeature(this.featureValue).isEnabled;
-  }
+  };
 
   enabledValueChanged = () => {
+    // Skip initial toggle so we can get initial display value before hiding
+    if (!this.initialDisplay) return;
+
     if (this.hideIfDisabledValue) {
       this.toggleVisibility();
     }
   };
 
-  toggleVisibility() {
+  toggleVisibility = () => {
     if (!this.hideIfDisabledValue) return;
 
     if (this.enabledValue) {
-      this.element.classList.remove(this.hiddenClassValue);
+      this.element.style.display = this.initialDisplay
     } else {
-      this.element.classList.add(this.hiddenClassValue);
+      this.element.style.display = "none"
     }
-  }
+  };
 
   async track() {
     await prom;

diff --git a/bucket_controller.js b/bucket_controller.js
@@ -1,25 +1,52 @@
 import { Controller } from "@hotwired/stimulus";
 import { BucketClient } from "@bucketco/browser-sdk";
 
-const bucket = new BucketClient(window.BUCKET_OPTS)
+const bucket = new BucketClient(window.BUCKET_OPTS);
 
-const prom = bucket.initialize().then(() => {
-  // console.log("Bucket initialized");
-});
+const prom = bucket.initialize();
 
 export default class extends Controller {
-  static values = { feature: String };
+  static values = {
+    feature: String,
+    enabled: { type: Boolean, default: false },
+    hideIfDisabled: { type: Boolean, default: true },
+    hiddenClass: { type: String, default: "hidden" },
+  };
 
   async connect() {
     await prom;
-    bucket.getFeature(this.featureValue).isEnabled;
+
+    this.update();
+
+    addEventListener("turbo:load", this.update);
+  }
+
+  disconnect() {
+    removeEventListener("turbo:load", this.update);
+  }
+
+  update() {
+    this.enabledValue = bucket.getFeature(this.featureValue).isEnabled;
+  }
+
+  enabledValueChanged = () => {
+    if (this.hideIfDisabledValue) {
+      this.toggleVisibility();
+    }
+  };
+
+  toggleVisibility() {
+    if (!this.hideIfDisabledValue) return;
+
+    if (this.enabledValue) {
+      this.element.classList.remove(this.hiddenClassValue);
+    } else {
+      this.element.classList.add(this.hiddenClassValue);
+    }
   }
 
   async track() {
     await prom;
     bucket.track(this.featureValue);
   }
-}
-
-// Don't forget in application.js
-// + application.register('bucket', BucketController)
+}
diff --git a/application.html.erb b/application.html.erb
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      window.BUCKET_OPTIONS = <%= bucket_options.to_json.html_safe %>
+    </script>
+    <%= javascript_include_tag :application %>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
diff --git a/application_controller.rb b/application_controller.rb
@@ -0,0 +1,15 @@
+class ApplicationController < ActionController::Base
+  # ...
+
+  helper_method :bucket_options
+
+  private
+
+  def bucket_options
+    {
+      publishable_key: Rails.application.credentials.bucket_publishable_key,
+      user: { id: current_user&.id },
+      company: { id: current_company&.id } # or current_user.id again if you don't have companies
+    }
+  end
+end
diff --git a/bucket_controller.js b/bucket_controller.js
@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus";
+import { BucketClient } from "@bucketco/browser-sdk";
+
+const bucket = new BucketClient(window.BUCKET_OPTS)
+
+const prom = bucket.initialize().then(() => {
+  // console.log("Bucket initialized");
+});
+
+export default class extends Controller {
+  static values = { feature: String };
+
+  async connect() {
+    await prom;
+    bucket.getFeature(this.featureValue).isEnabled;
+  }
+
+  async track() {
+    await prom;
+    bucket.track(this.featureValue);
+  }
+}
+
+// Don't forget in application.js
+// + application.register('bucket', BucketController)
diff --git a/index.html.erb b/index.html.erb
@@ -0,0 +1,7 @@
+<!-- This will send a check event to Bucket -->
+<div data-controller="bucket" data-bucket-feature-value="myFeature">
+
+  <!-- Clicking this will trigger will track as "trying" the feature "myFeature" -->
+  <a href="..." data-action="bucket#track">Try my feature!</a>
+
+</div>
No results found