@launchdarkly/toolbar 0.15.0-beta.1 → 0.16.0-beta.1

package/README.md

@@ -27,10 +27,11 @@ pnpm add @launchdarkly/toolbar@next
 ```tsx
 import { useEffect, useState } from 'react';
 import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
-import { LaunchDarklyToolbar, FlagOverridePlugin } from '@launchdarkly/toolbar';
+import { LaunchDarklyToolbar, FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar';
 
-// Create the plugin instance
+// Create the plugin instances
 const flagOverridePlugin = new FlagOverridePlugin();
+const eventInterceptionPlugin = new EventInterceptionPlugin();
 
 function App() {
   const [LDProvider, setLDProvider] = useState(null);
@@ -41,8 +42,8 @@ function App() {
         clientSideID: 'your-client-side-id',
         context: { key: 'user-key', name: 'User Name' },
         options: {
-          // Pass the plugin to the SDK
-          plugins: [flagOverridePlugin],
+          // Pass the plugins to the SDK
+          plugins: [flagOverridePlugin, eventInterceptionPlugin],
         },
       });
       setLDProvider(() => Provider);
@@ -59,7 +60,7 @@ function App() {
     <LDProvider>
       <div>
         <h1>My App</h1>
-        {/* Pass the same plugin instance to the toolbar */}
+        {/* Pass the same plugin instances to the toolbar */}
         <LaunchDarklyToolbar
           flagOverridePlugin={flagOverridePlugin}
           eventInterceptionPlugin={eventInterceptionPlugin}
@@ -169,6 +170,31 @@ function App() {
 }
 ```
 
+#### Event Interception Plugin
+
+To track and display LaunchDarkly events (flag evaluations, custom events, etc.), add the `EventInterceptionPlugin`:
+
+```tsx
+import { EventInterceptionPlugin } from '@launchdarkly/toolbar';
+
+// Create plugin with optional configuration
+const eventInterceptionPlugin = new EventInterceptionPlugin({
+  eventCapacity: 250, // Maximum events to store (default: 100)
+  enableLogging: true, // Console logging for debugging (default: false)
+});
+
+// Add to both SDK and toolbar
+const Provider = await asyncWithLDProvider({
+  // ... other config
+  options: {
+    plugins: [flagOverridePlugin, eventInterceptionPlugin],
+  },
+});
+
+// Pass to toolbar
+<LaunchDarklyToolbar flagOverridePlugin={flagOverridePlugin} eventInterceptionPlugin={eventInterceptionPlugin} />;
+```
+
 ### Dev Server Mode
 
 For teams using the LaunchDarkly CLI dev server, start it with CORS enabled:

package/dist/hooks/EventStore.d.ts

@@ -1,7 +1,13 @@
 import type { ProcessedEvent } from '../types/events';
+export interface EventStoreConfig {
+    /** Maximum number of events to store */
+    maxEvents?: number;
+}
 export declare class EventStore {
     private events;
     private listeners;
+    private maxEvents;
+    constructor(config?: EventStoreConfig);
     addEvent(event: ProcessedEvent): void;
     getEvents(): ProcessedEvent[];
     subscribe(listener: () => void): () => void;

package/dist/js/index.js

@@ -5722,14 +5722,18 @@ class FlagOverridePlugin {
         }
     }
 }
-const MAX_EVENTS = 100;
+const DEFAULT_MAX_EVENTS = 100;
 class EventStore {
     events = [];
     listeners = new Set();
+    maxEvents;
+    constructor(config = {}){
+        this.maxEvents = config.maxEvents ?? DEFAULT_MAX_EVENTS;
+    }
     addEvent(event) {
         try {
             this.events.push(event);
-            if (this.events.length > MAX_EVENTS) this.events.splice(0, this.events.length - MAX_EVENTS);
+            if (this.events.length > this.maxEvents) this.events.splice(0, this.events.length - this.maxEvents);
             this.notifyListeners();
         } catch (error) {
             console.warn('Event store error:', error);
@@ -5963,9 +5967,12 @@ class EventInterceptionPlugin {
     constructor(config = {}){
         this.config = {
             enableLogging: false,
+            eventCapacity: 100,
             ...config
         };
-        this.eventStore = new EventStore();
+        this.eventStore = new EventStore({
+            maxEvents: this.config.eventCapacity
+        });
         const onNewEvent = (event)=>{
             if (this.config.enableLogging) console.log('🎯 Event intercepted:', {
                 kind: event.kind,

package/dist/js/plugins/index.js

@@ -130,14 +130,18 @@ class FlagOverridePlugin {
         }
     }
 }
-const MAX_EVENTS = 100;
+const DEFAULT_MAX_EVENTS = 100;
 class EventStore {
     events = [];
     listeners = new Set();
+    maxEvents;
+    constructor(config = {}){
+        this.maxEvents = config.maxEvents ?? DEFAULT_MAX_EVENTS;
+    }
     addEvent(event) {
         try {
             this.events.push(event);
-            if (this.events.length > MAX_EVENTS) this.events.splice(0, this.events.length - MAX_EVENTS);
+            if (this.events.length > this.maxEvents) this.events.splice(0, this.events.length - this.maxEvents);
             this.notifyListeners();
         } catch (error) {
             console.warn('Event store error:', error);
@@ -371,9 +375,12 @@ class EventInterceptionPlugin {
     constructor(config = {}){
         this.config = {
             enableLogging: false,
+            eventCapacity: 100,
             ...config
         };
-        this.eventStore = new EventStore();
+        this.eventStore = new EventStore({
+            maxEvents: this.config.eventCapacity
+        });
         const onNewEvent = (event)=>{
             if (this.config.enableLogging) console.log('🎯 Event intercepted:', {
                 kind: event.kind,

package/dist/plugins/EventInterceptionPlugin.d.ts

@@ -9,6 +9,8 @@ export interface EventInterceptionPluginConfig {
     filter?: EventFilter;
     /** Enable console logging for debugging */
     enableLogging?: boolean;
+    /** Maximum number of events to store. The default value is 100. */
+    eventCapacity?: number;
 }
 /**
  * Plugin dedicated to intercepting and processing LaunchDarkly events

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchdarkly/toolbar",
-  "version": "0.15.0-beta.1",
+  "version": "0.16.0-beta.1",
   "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",