fix(core): resolve consent banner race condition (#34)

* fix(core): resolve consent banner race condition and missing layout slot

- Add bannerPending flag to ConsentManager — if init() calls showBanner
  before ConsentBanner registers its callback, defers and fires on registration
- Add ConsentBanner to docs theme layout-bottom slot (was missing when
  custom Layout overrides the one from enhanceWithConsent)

Fixes #33

* test(core): add bannerPending deferred show tests

- Verify callback fires immediately when registered after init()
- Verify callback fires via init() when registered before init()
- Verify non-EU user does not trigger deferred banner

Author: polaz

docs/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 import { h } from "vue";
 import DefaultTheme from "vitepress/theme";
 import type { Theme } from "vitepress";
-import { enhanceWithConsent } from "../../../src/vitepress/index";
+import { enhanceWithConsent, ConsentBanner } from "../../../src/vitepress/index";
 import { createKVStorage } from "../../../src/index";
 import "./style.css";
 import BugReportWidget from "./components/BugReportWidget.vue";
@@ -17,7 +17,7 @@ export default {
   ...consentTheme,
   Layout() {
     return h(consentTheme.Layout ?? DefaultTheme.Layout, null, {
-      "layout-bottom": () => [h(BugReportWidget), h(ConsentDebugPanel)],
+      "layout-bottom": () => [h(ConsentBanner), h(BugReportWidget), h(ConsentDebugPanel)],
     });
   },
 } satisfies Theme;

src/__tests__/consent-manager.test.ts

@@ -161,6 +161,57 @@ describe("ConsentManager with remote storage", () => {
   });
 });
 
+describe("ConsentManager banner deferred show (bannerPending)", () => {
+  it("fires callback immediately when registered after init() already requested banner", async () => {
+    const manager = new ConsentManager({
+      geoDetector: createMockGeoDetector(true),
+      version: "1.0",
+    });
+
+    // init() completes before onShowBanner is registered
+    await manager.init();
+
+    const showBanner = vi.fn();
+    manager.onShowBanner(showBanner);
+
+    // Callback fires immediately because init() set bannerPending=true
+    expect(showBanner).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires callback via init() when registered before init()", async () => {
+    const manager = new ConsentManager({
+      geoDetector: createMockGeoDetector(true),
+      version: "1.0",
+    });
+
+    const showBanner = vi.fn();
+    manager.onShowBanner(showBanner);
+
+    // Callback not yet fired — init() hasn't run
+    expect(showBanner).not.toHaveBeenCalled();
+
+    await manager.init();
+
+    // init() calls showBannerCallback directly
+    expect(showBanner).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire callback for non-EU user", async () => {
+    const manager = new ConsentManager({
+      geoDetector: createMockGeoDetector(false),
+      version: "1.0",
+    });
+
+    await manager.init();
+
+    const showBanner = vi.fn();
+    manager.onShowBanner(showBanner);
+
+    // Non-EU user: banner never shown, bannerPending stays false
+    expect(showBanner).not.toHaveBeenCalled();
+  });
+});
+
 describe("ConsentManager.getGeoResult()", () => {
   it("returns null before init", () => {
     const manager = new ConsentManager({ version: "1.0" });

src/core/consent-manager.ts

@@ -34,6 +34,7 @@ export class ConsentManager {
   private remoteStorage: ConsentStorage | null = null;
   private showBannerCallback: (() => void) | null = null;
   private hideBannerCallback: (() => void) | null = null;
+  private bannerPending = false;
 
   constructor(config: ConsentConfig = {}) {
     this.config = {
@@ -49,10 +50,16 @@ export class ConsentManager {
   }
 
   /**
-   * Register callback to show banner
+   * Register callback to show banner.
+   * If init() already requested the banner before this callback was registered,
+   * fires immediately (handles race condition with component mount timing).
    */
   onShowBanner(callback: () => void): void {
     this.showBannerCallback = callback;
+    if (this.bannerPending) {
+      this.bannerPending = false;
+      callback();
+    }
   }
 
   /**
@@ -111,8 +118,12 @@ export class ConsentManager {
         await initGoogleAnalytics(this.config.gaId, true, sendPageView);
       }
 
-      // Show banner
-      this.showBannerCallback?.();
+      // Show banner (or defer if component hasn't mounted yet)
+      if (this.showBannerCallback) {
+        this.showBannerCallback();
+      } else {
+        this.bannerPending = true;
+      }
       this.config.onBannerShow?.();
     } else {
       // Non-EU user: grant consent silently