Add formatToParts API

[alexandernanberg]

Would be nice to have an alternative to formatForDisplay when you need render more complex things, like highlighting the currently pressed key or rendering each key in a custom <span> etc.

Maybe an API similar to new Intl.DateTimeFormat().formatToParts() makes sense? Where it would return an array of objects with the useful data.

E.g.

type KeyboardShortcutPart =
  | { type: "key"; value: string }
  | { type: "literal"; value: string };

// MacOS
[{ type: "key", key: "Shift" }, { type: "key", key: "ArrowUp" }]

// Windows/Linux
[{ type: "key", key: "Shift" }, { type: "literal", key: "+" },  { type: "key", key: "ArrowUp" }]

[KevinVandy]

I've been thinking about having a more organized approach to all the formatForDisplay stuff. We probably only need 1 interface/function with options for how to display. Or maybe a multi-return object is better. Maybe a root formatKey function that all the other formatter functions use under the hood.

[KevinVandy]

This shipped as the parts option of formatForDisplay in #151, released in @tanstack/hotkeys 0.9.0. It returns one label per key, so you can render each key in its own element:

formatForDisplay('Shift+ArrowUp', { parts: true })
// macOS: ['⇧', '↑']
// Windows/Linux: ['Shift', '↑']

formatForDisplay(['G', 'Mod+K'], { parts: true })
// macOS: [['G'], ['⌘', 'K']]

The parts don't include separators. You add those when you render. If you need typed parts that include the separators, comment here and we can reopen.