00-quickstart

Overview ¶

Package main demonstrates the BubblyUI quickstart example. This example showcases clean import paths, component architecture, composables, DevTools integration, and profiler usage.

Package main demonstrates the BubblyUI quickstart example.

This example showcases the recommended patterns for building BubblyUI applications:

Clean Import Paths ¶

Using the new alias packages for cleaner imports:

import "github.com/newbpydev/bubblyui"              // Core types and functions
import "github.com/newbpydev/bubblyui/components"   // UI components
import "github.com/newbpydev/bubblyui/composables"  // Composable functions
import "github.com/newbpydev/bubblyui/devtools"     // Development tools
import "github.com/newbpydev/bubblyui/profiler"     // Performance profiling

Application Structure ¶

00-quickstart/
├── main.go           # Entry point with DevTools & Profiler setup
├── app.go            # Root component with key bindings & WithMessageHandler
├── composables/      # Reusable reactive logic
│   ├── use_tasks.go  # Task management composable
│   └── use_focus.go  # Focus management composable
└── components/       # UI components
    ├── task_list.go  # Task list display
    ├── task_input.go # New task input with visual feedback
    ├── task_stats.go # Statistics with filter chips
    └── help_panel.go # Keyboard shortcuts

Key Patterns Demonstrated ¶

1. WithMessageHandler for text input capture
2. Conditional key bindings (disable during input mode)
3. Composite hook pattern (DevTools + Profiler integration)
4. Refs created outside Setup for MessageHandler access
5. Visual feedback for active states (input mode, filter selection)

Running the Example ¶

cd cmd/examples/00-quickstart
go run .                    # With DevTools
go run . --profiler         # With Profiler + DevTools
go run . --devtools=false   # Without DevTools

Press F12 or Ctrl+T to toggle DevTools during runtime.