yhatt / jsx-slack

Build JSON object for Slack Block Kit surfaces from JSX
https://jsx-slack.netlify.app/
MIT License
461 stars 15 forks source link

Asynchronous component #153

Open yhatt opened 4 years ago

yhatt commented 4 years ago

I discovered jsx-slack v2 can use asynchronous component as following:

const AsyncComponent = async ({ userId }) => {
  // Fetch some data
  const name = await getUserName({ id: userId })

  return <Section>Hello, {name}!</Section>
}

;(async () => {
  console.log(
    <Blocks>
      <Context>Asynchronous component example</Context>
      <Divider />
      {await <AsyncComponent userId={123} />}
    </Blocks>
  )
})()

TypeScript requires to cast the component into any type.

This usage was found out by chance and it's out of our specification, but may have a worth to write down to the documentation as one of the useful way to use async functions.

varadiistvan commented 1 year ago

Hey! We're using jsx-slack in our project, and was wondering if this was possible on current version? The workaround we found for now is calling components as functions, but that's kind of ugly to do

yhatt commented 1 year ago

Yes, this code is still working in JavaScript with the current version of jsx-slack (v6), without no changes. 😎