React props

Source: https://github.com/AndrewRadev/switch.vim/issues/60

This was a useful transformation for @arthropodSeven:

<Thing foo={data} />
<Thing foo={`${data}`} />

Here's a switch definition that should get this to work:

let b:switch_custom_definitions = [
      \   {
      \     '\(\k\+=\){\([[:keyword:].]\+\)}':      '\1{`${\2}`}',
      \     '\(\k\+=\){`${\([[:keyword:].]\+\)}`}': '\1{\2}',
      \   }
      \ ]

To break down the first pattern and its replacement:

• \(\k\+=\) -- 1 or more keyword characters (\k), grouped as \1
• {\([[:keyword:].]\+\)} -- curly bracket, followed by the group \2 which includes 1 or more keyword chars or a . character (to support things like data.property)
• \1{`${\2}`} -- the first group is left untouched (it's only used to enable you to switch on the property), the second is wrapped in a `${}`

Second pattern is almost the same:

• \(\k\+=\) -- 1 or more keyword characters (\k), grouped as \1
• {`${\([[:keyword:].]\+\)}`} -- curly bracket, followed by a backtick and ${, followed by the group \2 which includes 1 or more keyword chars or a . character (to support things like data.property)
• \1{\2} -- the first group is left untouched (it's only used to enable you to switch on the property), the second is wrapped in a {} to remove the backtick string and the interpolation.