Feat: Component return value can handle highlight

[yuki-yano]

Requested feature

Currently Component returns strings, but it is not possible to set individual highlighting for each string. For example, incline.nvim can easily highlight strings by returning an array of strings containing highlighting information. https://github.com/b0o/incline.nvim

It would be easier to colorize complex components if the return type of the function component were string | { text: string; group: string }[].

For incline colorize example, the following code.

local render = function(props)
  local filename = vim.fn.fnamemodify(vim.api.nvim_buf_get_name(props.buf), ':t')
  local icon, color = require('nvim-web-devicons').get_icon_color(filename)

  local nav = {}
  local nav_var = vim.api.nvim_buf_get_var(props.buf, 'coc_nav')
  if nav_var then
    for _, v in ipairs(nav_var) do
      table.insert(nav, {
        '  ',
      })
      table.insert(nav, {
        v.label,
        group = v.highlight,
      })
      table.insert(nav, {
        v.name,
      })
    end
  end

  return {
    { icon, guifg = color },
    { ' ' },
    { filename },
    nav,
  }
end

Motivation

Components with complex highlighting such as devicon + filetype, diff and diagnostics can be easily implemented. Users will be able to easily colorize when defining function component.