A comprehensive demonstration plugin for BrainDrive's PluginState Service Bridge functionality. This plugin showcases persistent state management within the BrainDrive platform through an interactive tabbed interface that demonstrates state configuration, operations, validation, and error handling.
The ServiceExample_PluginState plugin in action, showing the tabbed interface with state management operations, interactive demo controls, and real-time state monitoring.
This plugin serves as a working demo of BrainDrive's PluginState Service Bridge, demonstrating:
- How to persist plugin state across page reloads and browser sessions
- State configuration with schemas and validation rules
- Comprehensive error handling for state operations
- Best practices for state management in BrainDrive plugins
- Overview - State management status and service information
- Interactive Demo - Live controls with auto-save functionality
- State Viewer - Real-time state monitoring and inspection
- Debug Logs - Detailed operation logging for learning
- Complete state configuration with schema validation
- Automatic state persistence and restoration
- Comprehensive error handling and recovery
- Debounced auto-save to prevent excessive operations
- Real-time state monitoring and debugging tools
- BrainDrive platform (this plugin runs inside BrainDrive)
- Plugin Manager access in BrainDrive
- Install the plugin through BrainDrive's Plugin Manager
- The plugin will be available in your module library
- Create a new page in BrainDrive
- Add the PluginState Demo module to your page
- Explore the features:
- Check the Overview tab for service status
- Use Interactive Demo to test state persistence
- Monitor real-time state changes in State Viewer
- Review operation logs in Debug Logs tab
- Service Status: Real-time connection and configuration status
- State Statistics: Save/restore counts and timestamps
- Service Information: Educational content about PluginState service
- Two-column Layout: Efficient space utilization for status information
- State Operations: Manual save, restore, and clear buttons with tooltips
- Text Input: Persistent text field with auto-save
- Counter Control: Increment/decrement buttons with state persistence
- Preferences: Toggle settings for auto-save and debug visibility
- Auto-save: Debounced automatic saving (1-second delay after changes)
- Live State Display: Real-time JSON view of current state
- State Metadata: Size information and last update timestamps
- State Information: Current configuration and auto-save status
- Formatted Display: Pretty-printed JSON with syntax highlighting
- Operation Logging: Step-by-step tracking of all state operations
- Error Tracking: Detailed error information with timestamps
- Log Management: Clear logs functionality and entry counting
- Educational Insights: Learning-focused log messages
This plugin demonstrates key PluginState Service Bridge concepts:
// How the PluginState Service Bridge is configured
services.pluginState.configure({
pluginId: 'ServiceExample_PluginState',
stateStrategy: 'session',
preserveKeys: ['demoData', 'saveCount', 'restoreCount'],
stateSchema: {
demoData: {
type: 'object',
required: false,
default: { /* default values */ }
}
},
maxStateSize: 10240 // 10KB limit
});// Save state with validation
await services.pluginState.saveState(stateData);
// Restore state with error handling
const restoredState = await services.pluginState.getState();
// Clear all saved state
await services.pluginState.clearState();// Subscribe to state events
services.pluginState.onSave((state) => {
console.log('State saved:', state);
});
services.pluginState.onRestore((state) => {
console.log('State restored:', state);
});
services.pluginState.onClear(() => {
console.log('State cleared');
});After using this demo, developers will understand:
- How BrainDrive's PluginState Service Bridge works
- State configuration patterns with schemas and validation
- Proper error handling for state operations
- Auto-save implementation with debouncing
- State lifecycle management and cleanup
- Best practices for persistent state in BrainDrive plugins
- Place the PluginState Demo module on a BrainDrive page
- Navigate to the Interactive Demo tab
- Enter text in the input field and modify the counter
- Refresh the page to see state persistence in action
- Check the State Viewer to monitor real-time changes
- Review Debug Logs to understand the operation flow
- Test state validation by entering extreme values
- Disable auto-save and use manual save operations
- Clear state and observe the reset to default values
- Monitor error handling by simulating service issues
- Test state size limits with large amounts of data
- Error Categorization: Service, validation, network, and unknown errors
- Detailed Error Information: Type, operation, timestamp, and stack traces
- Error Recovery: Graceful handling with user-friendly messages
- Troubleshooting Tips: Context-specific help for different error types
interface DemoData {
userInput: string; // Text input with length validation
counter: number; // Numeric value with range validation
preferences: {
autoSave: boolean; // Auto-save toggle
showDebugInfo: boolean; // Debug visibility toggle
};
timestamp: string; // ISO timestamp for tracking
}- Debounced Updates: 1-second delay after last change
- Resource Management: Proper timeout cleanup
- User Control: Toggle auto-save on/off
- Visual Feedback: Loading states and operation status
This plugin serves as a reference implementation for:
- PluginState Service Bridge integration
- State persistence patterns in BrainDrive
- Comprehensive error handling strategies
- User interface best practices for state management
src/PluginStateDemo.tsx- Main demo component with tabbed interfacesrc/PluginStateDemo.css- Comprehensive styling with theme supportsrc/types.ts- TypeScript interfaces and type definitionsDEVELOPER_GUIDE.md- Comprehensive development guide
- BrainDrive Platform: This plugin must run inside BrainDrive
- PluginState Service: Requires BrainDrive's PluginState Service to be available
- Session Storage: Uses browser session storage for state persistence
- State not persisting: Ensure PluginState Service is available in BrainDrive
- Service initialization errors: Check that the service bridge is properly configured
- Validation failures: Verify data meets schema requirements
- Check the Debug Logs tab for detailed operation information
- Use the State Viewer to monitor real-time state changes
- Review browser console for PluginState Service logs
- Verify service configuration matches your data structure
- Service Unavailable: Plugin waits for service initialization
- Validation Errors: Clear error messages with specific guidance
- Size Limits: Automatic validation prevents oversized state
- Network Issues: Retry mechanisms and graceful degradation
- Mobile-friendly: Adapts to different screen sizes
- Theme Support: Light and dark theme compatibility
- Accessibility: High contrast mode support
- Reduced Motion: Respects user motion preferences
- Tooltips: Helpful information on hover
- Loading States: Visual feedback during operations
- Status Indicators: Real-time service connection status
- Error Display: Comprehensive error information with recovery options
Experience BrainDrive's PluginState Service Bridge in Action! 💾
This is a demonstration plugin designed to run within the BrainDrive platform. It showcases comprehensive state management capabilities with best practices for error handling, validation, and user experience.