bubblyui

package module
v0.12.0 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Dec 3, 2025 License: MIT Imports: 1 Imported by: 0

README ΒΆ

BubblyUI

CI Coverage Go Report Card Go Reference PRs Welcome

A Vue-inspired TUI framework for Go with type-safe reactivity and component-based architecture

BubblyUI brings the familiar patterns of Vue.js to Go terminal applications, providing a reactive, component-based framework built on Bubbletea. Write beautiful terminal interfaces with the same declarative patterns you're used to from web development.

✨ Features

πŸ”„ Type-Safe Reactivity
  • Ref[T]: Reactive references with automatic dependency tracking
  • Computed[T]: Derived values that update automatically
  • Watch: Side effects that respond to reactive changes
  • Full Type Safety: Compile-time guarantees with Go generics
🧩 Component System
  • Vue-Inspired API: Familiar component patterns for Go developers
  • Zero-Boilerplate Launch: bubbly.Run() eliminates all Bubbletea setup (69-82% less code for async apps!)
  • Async Auto-Detection: No manual tick wrappers needed - framework handles it automatically
  • Lifecycle Hooks: onMounted, onUpdated, onUnmounted, onBeforeUpdate, onBeforeUnmount, onCleanup
  • Composition API: 30 composables (Standard, TUI-Specific, State, Timing, Collections, Development), provide/inject
  • Auto-Initialization: Automatic component initialization with ctx.ExposeComponent() (33% less boilerplate)
🎨 Template System
  • Go Functions: Type-safe rendering with Go functions (not string templates)
  • Lipgloss Integration: Direct styling with Lipgloss for maximum flexibility
  • Conditional Rendering: If() and Show() directives for conditional logic
  • List Rendering: ForEach() directive for dynamic lists
  • Data Binding: Bind() directive for two-way data binding
  • Event Binding: On() directive for event handling
🧩 Built-in Components (30+)
  • Atoms: Button, Icon, Badge, Spinner, Text, Toggle
  • Molecules: Input, TextArea, Checkbox, Radio, Select, Card, List, Menu, Tabs, Accordion
  • Organisms: Table (with sorting/pagination), Form (with validation), Modal
  • Templates: PageLayout, AppLayout, PanelLayout, GridLayout
🧭 Router (SPA-Style Navigation)
  • Named routes with parameters (/users/:id)
  • Route guards (beforeEnter, beforeLeave)
  • Nested routes and query strings
  • History navigation (back/forward)
πŸ“ Advanced Layout System (Flexbox-Inspired)
  • Flex: Container with direction, wrap, justify, align, gap
  • Stacks: HStack (horizontal), VStack (vertical) with spacing and dividers
  • Positioning: Center (horizontal/vertical), Container (width-constrained)
  • Primitives: Box (padding/border), Spacer (fixed/flex), Divider (horizontal/vertical)
πŸ› οΈ Development & Testing Tools
  • State inspector, event timeline, command debugger
  • TestComponent helper, MockContext for unit tests
  • Performance profiler (17 components) with pprof, flame graphs, and Prometheus
  • MCP Server for AI tool integration
🎯 Automation Patterns
  • Theme System: UseTheme()/ProvideTheme() for 94% less theme boilerplate
  • Multi-Key Bindings: WithMultiKeyBindings() for 67% less key binding code
  • Shared Composables: CreateShared() for singleton state across components

πŸš€ Quick Start

Installation
go get github.com/newbpydev/bubblyui
Basic Example
package main

import (
    "fmt"
    "github.com/newbpydev/bubblyui/pkg/bubbly"
)

func main() {
    counter, _ := bubbly.NewComponent("Counter").
        WithKeyBinding("up", "increment", "Increment").
        WithKeyBinding("down", "decrement", "Decrement").
        WithKeyBinding("q", "quit", "Quit").
        Setup(func(ctx *bubbly.Context) {
            count := ctx.Ref(0)
            ctx.Expose("count", count)

            ctx.On("increment", func(interface{}) {
                count.Set(count.GetTyped().(int) + 1)
            })

            ctx.On("decrement", func(interface{}) {
                count.Set(count.GetTyped().(int) - 1)
            })
        }).
        Template(func(ctx bubbly.RenderContext) string {
            count := ctx.Get("count").(*bubbly.Ref[interface{}])
            comp := ctx.Component()
            return fmt.Sprintf("Count: %d\n\n%s",
                count.GetTyped().(int),
                comp.HelpText())
        }).
        Build()

    // Clean, simple, zero boilerplate! πŸŽ‰
    bubbly.Run(counter, bubbly.WithAltScreen())
}

πŸ“– Documentation

Core Concepts
Features & Guides
API Reference

πŸ› οΈ Development

Prerequisites
  • Go 1.22+ (required for generics)
  • Make (for development tools)
  • Git (for version control)
Setup
# Clone the repository
git clone https://github.com/newbpydev/bubblyui.git
cd bubblyui

# Install development tools
make install-tools

# Run tests to verify setup
make test lint build
Project Structure
bubblyui/
β”œβ”€β”€ cmd/examples/           # Example applications (organized by feature)
β”‚   β”œβ”€β”€ 01-reactivity-system/    # Reactivity examples
β”‚   β”œβ”€β”€ 02-component-model/      # Component examples
β”‚   β”œβ”€β”€ 03-lifecycle-hooks/      # Lifecycle examples
β”‚   β”œβ”€β”€ 04-composables/          # Composables examples
β”‚   β”œβ”€β”€ 05-directives/           # Directives examples
β”‚   β”œβ”€β”€ 06-built-in-components/  # Component library demos
β”‚   β”œβ”€β”€ 07-router/               # Router examples
β”‚   β”œβ”€β”€ 08-automatic-bridge/     # Zero-boilerplate examples
β”‚   β”œβ”€β”€ 09-devtools/             # Development tools demos
β”‚   β”œβ”€β”€ 10-testing/              # Testing examples
β”‚   β”œβ”€β”€ 11-profiler/             # Performance profiling demos
β”‚   β”œβ”€β”€ 14-advanced-layouts/     # Layout system examples
β”‚   └── 16-ai-chat-demo/         # AI chat integration demo
β”œβ”€β”€ pkg/
β”‚   β”œβ”€β”€ bubbly/           # Core framework package
β”‚   β”‚   β”œβ”€β”€ composables/  # Composable functions
β”‚   β”‚   β”œβ”€β”€ devtools/     # Development tools
β”‚   β”‚   β”œβ”€β”€ directives/   # Template directives
β”‚   β”‚   β”œβ”€β”€ monitoring/   # Metrics & profiling
β”‚   β”‚   β”œβ”€β”€ profiler/     # Performance profiling
β”‚   β”‚   β”œβ”€β”€ router/       # Navigation system
β”‚   β”‚   └── testing/      # Test utilities
β”‚   └── components/       # Built-in UI components
β”œβ”€β”€ specs/                # Feature specifications (00-16)
└── docs/                 # Documentation and guides
Development Workflow

Follow the systematic Ultra-Workflow for all feature development:

  1. 🎯 Understand - Read ALL specification files in feature directory
  2. πŸ” Gather - Research Go/Bubbletea patterns using available tools
  3. πŸ“ Plan - Create actionable task breakdown with sequential thinking
  4. πŸ§ͺ TDD - Red-Green-Refactor with table-driven tests
  5. 🎯 Focus - Verify alignment with specifications and integration
  6. 🧹 Cleanup - Run all quality gates and validation
  7. πŸ“š Document - Update specs, godoc, README, and CHANGELOG
Quality Gates

All contributions must pass these automated checks:

make test-race    # Tests with race detector
make lint         # golangci-lint (zero warnings)
make fmt          # gofmt + goimports
make build        # Compilation succeeds
go test -cover    # >80% coverage maintained

🀝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Contribution
  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes following TDD practices
  4. Run quality gates: make test-race lint fmt build
  5. Submit a pull request with a comprehensive description
Development Standards
  • Type Safety: Use generics, avoid any without constraints
  • Testing: Table-driven tests, >80% coverage, race detector clean
  • Documentation: Godoc comments on all exports
  • Style: Follow Google Go Style Guide conventions
  • Architecture: Maintain Bubbletea Model/Update/View patterns

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Bubbletea: The excellent TUI framework this is built on
  • Vue.js: Inspiration for the component and reactivity patterns
  • Go Community: For the amazing ecosystem and conventions
  • Contributors: Everyone who helps make BubblyUI better

πŸ“ž Support


Made with ❀️ for the Go community

Documentation ΒΆ

Overview ΒΆ

Package bubblyui provides a Vue-inspired TUI framework for Go.

BubblyUI brings reactive state management and component-based architecture to terminal applications built on Bubbletea. It offers type-safe reactive primitives, a powerful component system, lifecycle hooks, and composables.

Quick Start ΒΆ

import "github.com/newbpydev/bubblyui"

func main() {
    counter, _ := bubblyui.NewComponent("Counter").
        Setup(func(ctx *bubblyui.Context) {
            count := ctx.Ref(0)
            ctx.Expose("count", count)
        }).
        Template(func(ctx bubblyui.RenderContext) string {
            return fmt.Sprintf("Count: %v", ctx.Get("count"))
        }).
        Build()

    bubblyui.Run(counter)
}

Core Types ΒΆ

The following types are re-exported from pkg/bubbly for convenience:

  • Component: A BubblyUI component instance
  • ComponentBuilder: Fluent API for constructing components
  • Ref[T]: A reactive reference holding a mutable value
  • Computed[T]: A derived reactive value that auto-updates
  • Context: The component setup context
  • RenderContext: The template rendering context

Subpackages ΒΆ

For additional functionality, import the subpackages directly:

import "github.com/newbpydev/bubblyui/pkg/bubbly/router"      // Navigation
import "github.com/newbpydev/bubblyui/pkg/bubbly/composables" // Composables
import "github.com/newbpydev/bubblyui/pkg/bubbly/directives"  // Directives
import "github.com/newbpydev/bubblyui/pkg/components"          // UI components

Index ΒΆ

Constants ΒΆ

This section is empty.

Variables ΒΆ

View Source
var NewComponent = bubbly.NewComponent

NewComponent creates a new ComponentBuilder with the given name. Use the builder's fluent API to configure the component, then call Build().

Example:

component, err := bubblyui.NewComponent("Counter").
    Setup(func(ctx *bubblyui.Context) {
        // Initialize reactive state
    }).
    Template(func(ctx bubblyui.RenderContext) string {
        return "Hello, World!"
    }).
    Build()
View Source
var Run = bubbly.Run

Run starts the Bubbletea application with the given component. This is the main entry point for BubblyUI applications. Options can be passed to configure the application behavior.

Example:

err := bubblyui.Run(app,
    bubblyui.WithAltScreen(),
    bubblyui.WithMouseAllMotion(),
)
View Source
var WatchEffect = bubbly.WatchEffect

WatchEffect creates a side-effect watcher that tracks dependencies automatically. The effect runs immediately and re-runs whenever any accessed reactive value changes. Returns a cleanup function that stops the effect when called.

Example:

cleanup := bubblyui.WatchEffect(func() {
    fmt.Printf("Current count: %d\n", count.Get())
})
defer cleanup()
View Source
var WithAltScreen = bubbly.WithAltScreen

WithAltScreen enables the alternate screen buffer for full-screen applications. This is the most common option for TUI applications.

View Source
var WithAsyncRefresh = bubbly.WithAsyncRefresh

WithAsyncRefresh enables async refresh with the specified interval. This is useful for components that update from goroutines.

View Source
var WithContext = bubbly.WithContext

WithContext sets a context for the program. The program will exit when the context is canceled.

View Source
var WithEnvironment = bubbly.WithEnvironment

WithEnvironment sets custom environment variables for the program. This is useful for controlling terminal behavior.

View Source
var WithFPS = bubbly.WithFPS

WithFPS sets the target frames per second for rendering. Default is 60 FPS. Higher values provide smoother animations but use more CPU.

View Source
var WithInput = bubbly.WithInput

WithInput sets a custom input source for the program. By default, the program reads from os.Stdin.

View Source
var WithInputTTY = bubbly.WithInputTTY

WithInputTTY forces the program to use a TTY for input. This is useful when running in non-interactive environments.

View Source
var WithMouseAllMotion = bubbly.WithMouseAllMotion

WithMouseAllMotion enables mouse support with all motion events. This captures all mouse movements, clicks, and scroll events.

View Source
var WithMouseCellMotion = bubbly.WithMouseCellMotion

WithMouseCellMotion enables mouse support with cell motion events. This captures mouse events only when the mouse moves between cells.

View Source
var WithOutput = bubbly.WithOutput

WithOutput sets a custom output destination for the program. By default, the program writes to os.Stdout.

View Source
var WithReportFocus = bubbly.WithReportFocus

WithReportFocus enables focus reporting. The program will receive messages when the terminal gains/loses focus.

View Source
var WithoutAsyncAutoDetect = bubbly.WithoutAsyncAutoDetect

WithoutAsyncAutoDetect disables automatic async detection. By default, Run() auto-detects if async refresh is needed.

View Source
var WithoutBracketedPaste = bubbly.WithoutBracketedPaste

WithoutBracketedPaste disables bracketed paste mode. This is useful for terminals that don't support bracketed paste.

View Source
var WithoutCatchPanics = bubbly.WithoutCatchPanics

WithoutCatchPanics disables panic catching. Use this during development to see full panic stack traces.

View Source
var WithoutSignalHandler = bubbly.WithoutSignalHandler

WithoutSignalHandler disables the default signal handler. Use this if you want to handle signals (like SIGINT) manually.

Functions ΒΆ

func Watch ΒΆ

func Watch[T any](ref *Ref[T], callback func(newVal, oldVal T)) func()

Watch creates a watcher that executes the callback when the watched value changes. Returns a cleanup function that stops the watcher when called.

Example:

cleanup := bubblyui.Watch(count, func(newVal, oldVal int) {
    fmt.Printf("Count changed from %d to %d\n", oldVal, newVal)
})
defer cleanup()

Types ΒΆ

type Component ΒΆ

type Component = bubbly.Component

Component represents a BubblyUI component with reactive state, lifecycle hooks, and template rendering. It extends Bubbletea's tea.Model interface with additional methods for component identification, props management, and event handling.

type ComponentBuilder ΒΆ

type ComponentBuilder = bubbly.ComponentBuilder

ComponentBuilder provides a fluent API for constructing components. Use NewComponent() to create a builder, then chain configuration methods and call Build() to create the component.

type Computed ΒΆ

type Computed[T any] = bubbly.Computed[T]

Computed is a derived reactive value that automatically recomputes when its dependencies change. Computed values are cached and only recalculate when necessary.

Example:

count := bubblyui.NewRef(10)
doubled := bubblyui.NewComputed(func() int {
    return count.Get() * 2
})

func NewComputed ΒΆ

func NewComputed[T any](fn func() T) *Computed[T]

NewComputed creates a new computed value with the given computation function. The computed value automatically tracks dependencies accessed within the function and recomputes when they change.

Example:

total := bubblyui.NewComputed(func() int {
    return price.Get() * quantity.Get()
})

type Context ΒΆ

type Context = bubbly.Context

Context provides access to component state and utilities during setup. It allows creating reactive state (Ref, Computed), registering lifecycle hooks, and exposing values for template rendering.

type Ref ΒΆ

type Ref[T any] = bubbly.Ref[T]

Ref is a reactive reference that holds a mutable value of type T. Changes to the value automatically trigger dependent computations and watchers.

Example:

count := bubblyui.NewRef(0)
count.Set(count.Get() + 1)

func NewRef ΒΆ

func NewRef[T any](value T) *Ref[T]

NewRef creates a new reactive reference with the given initial value. The reference is type-safe thanks to Go generics.

Example:

name := bubblyui.NewRef("Alice")
count := bubblyui.NewRef(0)
items := bubblyui.NewRef([]string{"a", "b"})

type RenderContext ΒΆ

type RenderContext = bubbly.RenderContext

RenderContext provides access to component state during template rendering. It allows retrieving exposed values, accessing props, and getting the component instance.

type RunOption ΒΆ

type RunOption = bubbly.RunOption

RunOption configures the behavior of the Run function. Use With* functions to create options.

Directories ΒΆ

Path Synopsis
cmd
examples/00-quickstart command
Package main demonstrates the BubblyUI quickstart example.
Package main demonstrates the BubblyUI quickstart example.
examples/00-quickstart/components
Package components provides UI components for the quickstart example.
Package components provides UI components for the quickstart example.
examples/00-quickstart/composables
Package composables provides reusable reactive logic for the quickstart example.
Package composables provides reusable reactive logic for the quickstart example.
examples/01-reactivity-system/watch-computed command
Package main demonstrates watching computed values in BubblyUI.
Package main demonstrates watching computed values in BubblyUI.
examples/01-reactivity-system/watch-effect command
Package main demonstrates WatchEffect with automatic dependency tracking.
Package main demonstrates WatchEffect with automatic dependency tracking.
examples/11-profiler/basic command
Package main provides the entry point for the basic profiler example.
Package main provides the entry point for the basic profiler example.
examples/11-profiler/basic/components
Package components provides UI components for the profiler example.
Package components provides UI components for the profiler example.
examples/11-profiler/basic/composables
Package composables provides reusable reactive logic for the profiler example.
Package composables provides reusable reactive logic for the profiler example.
examples/11-profiler/cpu command
Package main provides the entry point for the CPU profiler example.
Package main provides the entry point for the CPU profiler example.
examples/11-profiler/cpu/components
Package components provides focused UI components for the CPU profiler example.
Package components provides focused UI components for the CPU profiler example.
examples/11-profiler/cpu/composables
Package composables provides reusable reactive logic for the CPU profiler example.
Package composables provides reusable reactive logic for the CPU profiler example.
examples/14-advanced-layouts command
Package main provides the Advanced Layout System example application.
Package main provides the Advanced Layout System example application.
examples/14-advanced-layouts/components
Package components provides demo components for the layout showcase.
Package components provides demo components for the layout showcase.
examples/14-advanced-layouts/composables
Package composables provides shared state composables for the layout demo.
Package composables provides shared state composables for the layout demo.
examples/15-responsive-layouts command
Package main provides the Responsive Layouts example application.
Package main provides the Responsive Layouts example application.
examples/15-responsive-layouts/components
Package components provides responsive demo components for the layout showcase.
Package components provides responsive demo components for the layout showcase.
examples/15-responsive-layouts/composables
Package composables provides shared state and logic for the responsive layouts example.
Package composables provides shared state and logic for the responsive layouts example.
examples/16-ai-chat-demo command
Package main provides the AI Chat Demo application.
Package main provides the AI Chat Demo application.
examples/16-ai-chat-demo/components
Package components provides UI components for the AI chat demo.
Package components provides UI components for the AI chat demo.
examples/16-ai-chat-demo/composables
Package composables provides shared state and logic for the AI chat demo.
Package composables provides shared state and logic for the AI chat demo.
examples/17-enhanced-composables command
Package main provides the Enhanced Composables Demo application.
Package main provides the Enhanced Composables Demo application.
examples/17-enhanced-composables/components
Package components provides UI components for the enhanced composables demo.
Package components provides UI components for the enhanced composables demo.
examples/17-enhanced-composables/composables
Package composables provides shared composables for the enhanced composables demo.
Package composables provides shared composables for the enhanced composables demo.
examples/17-enhanced-composables/demos
Package demos provides demo views for each composable.
Package demos provides demo views for each composable.
Package commands provides command generation, batching, and debugging for BubblyUI.
Package commands provides command generation, batching, and debugging for BubblyUI.
Package components provides pre-built UI components for BubblyUI.
Package components provides pre-built UI components for BubblyUI.
Package composables provides Vue-inspired composable functions for BubblyUI.
Package composables provides Vue-inspired composable functions for BubblyUI.
Package devtools provides development tools for BubblyUI applications.
Package devtools provides development tools for BubblyUI applications.
mcp
Package mcp provides Model Context Protocol (MCP) server integration for BubblyUI DevTools.
Package mcp provides Model Context Protocol (MCP) server integration for BubblyUI DevTools.
Package directives provides Vue-inspired template directives for BubblyUI.
Package directives provides Vue-inspired template directives for BubblyUI.
Package monitoring provides pluggable metrics collection for BubblyUI composables.
Package monitoring provides pluggable metrics collection for BubblyUI composables.
Package observability provides error tracking, breadcrumbs, and monitoring for BubblyUI.
Package observability provides error tracking, breadcrumbs, and monitoring for BubblyUI.
pkg
bubbly
Package bubbly provides a Vue-inspired reactive state management system for Go TUI applications.
Package bubbly provides a Vue-inspired reactive state management system for Go TUI applications.
bubbly/commands
Package commands provides debugging and inspection capabilities for the Automatic Reactive Bridge feature in BubblyUI.
Package commands provides debugging and inspection capabilities for the Automatic Reactive Bridge feature in BubblyUI.
bubbly/composables
Package composables provides Vue 3-inspired reusable composition functions for BubblyUI.
Package composables provides Vue 3-inspired reusable composition functions for BubblyUI.
bubbly/composables/reflectcache
Package reflectcache provides optional reflection caching for optimizing UseForm's SetField performance.
Package reflectcache provides optional reflection caching for optimizing UseForm's SetField performance.
bubbly/composables/timerpool
Package timerpool provides an optional timer pool for optimizing UseDebounce and UseThrottle composables.
Package timerpool provides an optional timer pool for optimizing UseDebounce and UseThrottle composables.
bubbly/devtools
Package devtools provides a comprehensive developer tools system for debugging and inspecting BubblyUI applications in real-time.
Package devtools provides a comprehensive developer tools system for debugging and inspecting BubblyUI applications in real-time.
bubbly/directives
Package directives provides Vue-inspired directive types for declarative template manipulation.
Package directives provides Vue-inspired directive types for declarative template manipulation.
bubbly/monitoring
Package monitoring provides pluggable metrics collection for BubblyUI composables.
Package monitoring provides pluggable metrics collection for BubblyUI composables.
bubbly/observability
Package observability provides error tracking, breadcrumbs, and monitoring for BubblyUI applications.
Package observability provides error tracking, breadcrumbs, and monitoring for BubblyUI applications.
bubbly/profiler
Package profiler provides comprehensive performance profiling for BubblyUI applications.
Package profiler provides comprehensive performance profiling for BubblyUI applications.
bubbly/router
Package router provides path matching and routing functionality for BubblyUI applications.
Package router provides path matching and routing functionality for BubblyUI applications.
bubbly/testing
Package btesting provides testing utilities for BubblyUI composables.
Package btesting provides testing utilities for BubblyUI composables.
bubbly/testutil
Package testutil provides testing utilities for BubblyUI components.
Package testutil provides testing utilities for BubblyUI components.
components
Package components provides layout components for the BubblyUI framework.
Package components provides layout components for the BubblyUI framework.
Package profiler provides comprehensive performance profiling for BubblyUI applications.
Package profiler provides comprehensive performance profiling for BubblyUI applications.
Package router provides Vue Router-inspired navigation for BubblyUI.
Package router provides Vue Router-inspired navigation for BubblyUI.
testing
btesting
Package btesting provides testing helpers for BubblyUI components and composables.
Package btesting provides testing helpers for BubblyUI components and composables.
testutil
Package testutil provides comprehensive test utilities for BubblyUI applications.
Package testutil provides comprehensive test utilities for BubblyUI applications.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL