Smells like Bubbles v2 Alpha 2!

Thanks for trying out Bubbles v2.0.0-alpha.2! This release was designed to work with Bubble Tea and Lip Gloss v2 alphas with the same tag, so make sure you catch ’em all:

go get github.com/charmbracelet/bubbletea/v2@v2.0.0-alpha.2
go get github.com/charmbracelet/bubbles/v2@v2.0.0-alpha.2
go get github.com/charmbracelet/lipgloss/v2@v2.0.0-alpha.2

There are a lot of small API changes in this release, around two general ideas:

• Consistency across Bubbles
• Manual light/dark background management for Lip Gloss v2 (see below)

We've found upgrading pretty easy, especially with a linter, but let us know how it goes for you. Read on for the breakdown.

A Note on Light and Dark Styles

Some Bubbles, like help, offer defaults for light and dark background colors. Selecting one or the other now a manual process, and you have two options.

🎩 The Best Way

Ideally, you have Bubble Tea query the background color for you. This means that you'll be properly querying the correct input and outputs with your program, and the query will happen in lockstep with the application.

// Query for the background color.
func (m model) Init() (tea.Model, tea.Cmd) {
	return m, tea.RequestBackgroundColor
}

// Listen for the response and initialize your styles accordigly.
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.BackgroundColorMsg:
		// Initialize your styles now that you know the background color.
		m.help = help.DefaultStyles(msg.IsDark())
		return m, nil
	}
}

If you're using Wish you must do it this way in to get the background color of the client.

🤠 The Quick Way

The quick way is to use detect the background color via the compat package in Lip Gloss. It's less recommended because it contains blocking I/O that operates independently of Bubble Tea and, when used with Wish it will not return the background color of the client (because it's running locally on the server).

import "github.com/charmbracelet/lipgloss/v2/compat"

var hasDarkBG = compat.HasDarkBackground()

func main() {
    var m model

    h := help.New()
    h.Styles = help.DefaultStyles(hasDarkBG)

    // And so on...
    m.help = h
}

For details on the compat package see the Lip Gloss v2.0.0-alpha.2 release notes.

👀 Also Note

You can also just apply defaults manually.

h.Styels = help.DefaultLightStyles() // light mode!
h.Styels = help.DefaultDarkStyles()  // jk dark mode

What’s Changed: the Laundry List

Filepicker

• Removed: DefaultStylesWithRenderer(). Lip Gloss is pure now, so just use DefaultStyles().
• Model.Height has been broken into a getter and setter; use Model.SetHeight(int) and Model.Height() int instead

Help

help now defaults to using colors for dark backgrounds. You can manually change them with DefaultLightStyles() and DefaultDarkStyles():

h := help.New()
h.Styles = help.DefaultDarkStyles()  // dark mode
h.Styles = help.DefaultLightStyles() // light mode

Or, just detect the background color and apply the appropriate set of styles accordingly:

func (m Model) Init() (tea.Model, tea.Cmd) {
	// Ask for the background color.
	return m, tea.RequestBackgroundColor
}

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.BackgroundColorMsg:
		// We know the background color, so let’s update our styling.
		m.help.Styles = help.DefaultStyles(msg.IsDark())
	}
}

List

• DefaultStyles() now takes a boolean to determine whether it should be rendered with light or dark styles: DefaultStyles(isDark bool)
• DefaultItemStyles() now takes a boolean to determine whether it should be rendered with light or dark styles: DefaultItemStyles(isDark bool)

Paginator

• The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap

Progress

• Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead

p := progress.New()

// Before
p.Width = 25
fmt.Printf("%w is a good width", p.Width)

// After
p.SetWidth(25)
fmt.Printf("%w is a good width", p.Width())

Stopwatch

• NewWithInterval(time.Duration) has been removed. Pass an Option to New() instead: New(WithInterval(time.Duration))

Table

• Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead
• Model.Height has been broken into a getter and setter; use Model.SetHeight(int) and Model.Height() int instead

Textarea

• The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap
• Model.FocusedStyle and Model.BlurredStyle have been replaced by Model.Styles.Focused and Model.Styles.Blurred
• DefaultStyles() (blurred, focused Style) is now DefaultStyles(isDark bool) Styles. See help above for an example on how to work with this.

Textinput

• The global variable DefaultKeyMap is now a function: func DefaultKeyMap() KeyMap
• Model.Width has been broken into a getter and setter; use Model.SetWidth(int) and Model.Width() int instead

Timer

• NewWithInterval(time.Duration) has been removed. Pass an Option to New() instead: New(time.Duration, WithInterval(time.Duration))

Viewport

• Model.Width and Model.Height have been replaced with getters and setters:

m := v.New()

// Before
vp.Width = 40
vp.Height = 80
fmt.Println("%d is my favorite width", vp.Width)

// After
vp.SetWidth(40)
vp.SetHeight(80)
fmt.Println("%d is my favorite width", vp.Width())

• New() doesn’t have deafult args anymore: New(width, height int) is now New(...Option). To set an initial width and height do one of the following:

// Use functional arguments:
vp := viewport.New(viewport.WithWidth(40), viewport.WithHeight(80)

// Or just:
vp := viewport.New()
vp.SetWidth(40)
vp.SetHeight(80)

Full Changelog: v2.0.0-alpha.1...v2.0.0-alpha.2

💝 That’s a wrap!

Feel free to reach out, ask questions, give feedback, and let us know how it's going. We’d love to know what you think.

• Discord
• Matrix
• Email

Part of Charm.

Charm热爱开源 • Charm loves open source • نحنُ نحب المصادر المفتوحة