Are you excited about another alpha release?

We know we are! This release is chock full of features and improvements.

If you’re new to Bubble Tea v2 we recommending taking a look at the v2.0.0-alpha.1 release notes as well.

If you're already using v2.0.0-alpha.1 there's nothing new to do for v2.0.0-alpha.2. You can blissfully ignore everything below and gleefully reap the benefits…but don't you want to know what’s new?

Let's dive in!

🚚 Packages

This release was designed to work with Bubble Tea, Bubbles, 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

🎩 Better Windows Input Support

We take Windows support seriously, and with this release, we've revamped the
Windows input handling. Now, Bubble Tea works even better on Windows.

Bubble Tea now takes advantage of the Windows Console API to
get the terminal's size, focus events, and advanced keyboard and mouse
handling. This won't interfere with the existing escape sequence handling, so
you can still use the same code across different platforms.

🪄 Program-level Color Profiles and Styles

Bubble Tea now automatically downsamples ANSI, when necessary, for the appropriate output. For example, if you're setting 24-bit (TrueColor) colors in your application, and the user is using Apple Terminal, the colors will be automatically downsampled to the nearest colors in the 256 color spectrum. Or, if output's being directed to a file, colors will be stripped entirely.

Even better, this works with colors and styling generated by anything, not just Lip Gloss.
That means you can flow in ANSI styling from any tool or library and rest assured that colors
will just work with the user's terminal. This is all thanks to our new
magical colorprofile
library.

Detecting the color profile

Need to use the detected color profile in your app? Listen to tea.ColorProfileMsg in Update:

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.ColorProfileMsg:
        m.colorProfile = msg.Profile // gottem!
    }
    return m, nil
}

Manually applying a color profile

What's that you say? You want to manually set a color profile for testing? Now you can, on the program level.

import (
    "github.com/charmbraclelet/bubbletea/v2"
    "github.com/charmbraclelet/colorprofile"
)

p := colorprofile.TrueColor // i love colors. lets' use 16,777,216 of 'em
p = colorprofile.ANSI256    // jk, 256 colors are plenty
p = colorprofile.ANSI       // actually let's juse use 16 colors
p = colorprofile.Ascii      // nm, no colors, but keep things like bold, italics, etc.
p = colorprofile.NoTTY      // lol actually strip all ANSI sequences

prog := tea.Program(tea.WithColorProfile(p))

Want to hard detect the color profile in wish? We bet you do.

func main() {
    var s ssh.Session
    pty, _, _ := s.Pty()

    // Get the environment...
    envs := append(s.Environ(), "TERM="+pty.Term)

    // ...and give it to Bubble Tea so it can detect the color profile.
    opt := tea.WithEnvironment(envs)

    p := tea.NewProgram(model,
        tea.WithInput(pty.Slave),
        tea.WithOutput(pty.Slave),
        opt, // wow
    )
}

Going deep

Hungry for more? This is for the more hard core terminal devs, like you.

😮 An Acual Cursor

Another nice feature is the ability to use a real terminal
cursor. If you enable the cursor visibility, you can control the cursor
position and shape in your program.

func (m model) Init() (tea.Model, tea.Cmd) {
    return m, tea.Batch(
        tea.ShowCursor,
        tea.SetCursorStyle(tea.CursorBlock, false),     // non-blinking block cursor
        tea.SetCursorStyle(tea.CursorUnderline, true),  // blinking underline cursor
        tea.SetCursorStyle(tea.CursorBar, true),        // blinking vertical bar cursor
    )
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyMsg:
        switch msg.String() {
        case "q":
            return m, tea.Quit
        }
    }
    // move the cursor to the second row and first column of the program screen.
    return m, tea.SetCursorPosition(0, 1)
}

func (m model) View() string {
    return "Hey there!\n <- I'm a cursor!"
}

You can also request the cursor position by using the tea.RequestCursorPosition command.

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyPressMsg:
        switch msg.String() {
        case "enter":
            return m, tea.RequestCursorPosition
        case "q":
            return m, tea.Quit
        }
    case tea.CursorPositionMsg:
        m.cursorPosition.X, m.cursorPosition.Y = msg.X, msg.Y
    }
    return m, nil
}

We’re still in the process of integrating true cursor support into textarea and textinput in Bubbles, however a true cursor is now at your disposal.

🗝️ Uniform Key Handling

One of the biggest changes coming to Bubble Tea v2 is enhanced keyboard
handling. This includes support for more key events, and complex key
combinations, as well as key releases.

When targeting users on different platforms and keyboard layouts, it's
important to have a consistent and reliable way to handle key events. With this
release, you can now use tea.WithUniformKeyLayout keyboard enhancement to
ensure that your program works as expected across different keyboard layouts.

For example, on a multi-layout QWERTY keyboard, ctrl+a should always
trigger a ctrl+a event, regardless of the layout language. Similarly,
shift+h should send a shift+h event with the letter H as its
printable value. But what happens when you press shift+h in a
different QWERTY layout?

Let's take the PC-101 QWERTY Arabic layout as an example. In this layout,
shift+h corresponds to the Arabic letter أ. If you're building a
game or an application that relies on key events where you don't really care
about the actual printable value of the key press, you'd want to ensure that
shift+h always sends a shift+h event despite the layout language.

This will also respect the keyboard layout and send the correct printable
value for the key press. For example, on a US QWERTY keyboard, ctrl+a
corresponds to the first letter on the second row of the keyboard. On a French
AZERTY keyboard, the same key combinations correspond to ctrl+q.

To achieve this, you can use the tea.WithUniformKeyLayout option and let Bubble
Tea handle the rest.

p := tea.NewProgram(model, tea.WithEnhancedKeyboard(
        tea.WithKeyReleases, // Do we want to listen to key releases?
        tea.WithUniformKeyLayout,
    ))

// Later in your program's Update function.
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyPressMsg:
        switch msg.String() {
        case "ctrl+a":
            // Handle ctrl+a event regardless of the keyboard layout.
        case "shift+h":
            // Handle shift+h event regardless of the keyboard layout and get the correct printable value.
        }
    }
    return m, nil
}

💬 Requesting Terminal Properties

With this release, we made it explicit how to request terminal properties. Use
the tea.Request... commands to get the terminal's size, background color,
foreground color, etc.

// Before
func (m model) Init() (tea.Model, tea.Cmd) {
    return m, tea.BackgroundColor
}

// After
func (m model) Init() (tea.Model, tea.Cmd) {
    return m, tea.RequestBackgroundColor
}

The following Cmds are now at your disposal:

• tea.RequestBackgroundColor (sends a tea.BackgroundColorMsg)
• tea.RequestForegroundColor (sends a tea.ForgroundColorMsg)
• tea.RequestCursorColor (sends a tea.CursorColorMsg)
• tea.RequestWindowSize (sends a tea.WindowSizeMsg)
• tea.RequestCursorPosition (sends a tea.CursorPostionMsg)

🍇 Grapheme Clustering

Grapheme what? In short, grapheme clustering is a way to handle Unicode text
segmentation and boundaries. It's useful when you want to determine the terminal
cell width a string or a grapheme cluster occupies. The algorithm is defined
in the Unicode Text Segmentation UAX #29.

For example, '🧑‍🌾' is a single grapheme cluster, but it's made up of 3
UTF-8 codepoints. Terminals that support grapheme clustering will treat this as
a 2 cell wide character, while those that don't might treat it as 2, 4, 5, or
even 6 cells wide. Our friend Mitchell Hashimoto has a great blog post on this
topic: Grapheme Clusters and Terminal Emulators.

We've added grapheme clustering and mode 2027 support in the previous alpha.1
release, and it was on by default. We've noticed that some terminals, like
Apple Terminal, don't play well with this feature. Specifically, with the
DECRQM control sequence. Not cool.

Now we're making the feature opt-in and off by default. You can still enable it by
using the tea.WithGraphemeClustering option.

p := tea.NewProgram(model, tea.WithGraphemeClustering())

// Or in your program's Init function.
func (m model) Init() (tea.Model, tea.Cmd) {
    return m, tea.EnableGraphemeClustering
}

Want to learn more about grapheme clusters? Mitchell Hashimoto has a great post about it.

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

🌈 Feedback

Have thoughts on Bubble Tea v2 Alpha? We’d love to hear about it. Let us know on…

• Discord
• Matrix
• Email

Part of Charm.

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