Better dialog support for template literal

[yhatt]

Resolves #42. Now jsxslack template literal can use dialog components.

import { jsxslack } from '@speee-js/jsx-slack'

console.log(jsxslack`
  <Dialog callbackId="example" title="Example">
    <Select name="rating" label="Rating" required>
      <Option value="5">${':star:'.repeat(5)}</Option>
      <Option value="4">${':star:'.repeat(4)}</Option>
      <Option value="3">${':star:'.repeat(3)}</Option>
      <Option value="2">${':star:'.repeat(2)}</Option>
      <Option value="1">${':star:'.repeat(1)}</Option>
    </Select>
  </Option>
`)

The kind of <Select> and similar components will be resolved by the container component <Blocks> and <Dialog>. We've refactored template literal logic to apply multi-pass parsing for resolving component based on structure.

On the other hand, jsxslack.fragment cannot yet resolve which kind of component will be used because the root container is not defined in fragments. So we will parse Dialog prefix to specify using component.

const Component = ({ value }) => jsxslack.fragment`
  <Dialog.UsersSelect name="first-user" label="First user" initialUser=${value} />
  <Dialog.UsersSelect name="second-user" label="Second user" initialUser=${value} />
`

ToDo

• Update documents
  • Remove usage with interpolation
  • Add information about using dialog components in jsxslack.fragment
• Update demo (Now works dialog components by this implementation)
  • Add dialog example