Async component support.

[Hunter-Gu]

Hi, VanJS component cannot be a async function now, but it is really common to fetch data when render a component.
I have two ideas about that.

• support async function in VanJS
• provide a Component like React Suspense, which will display a fallback until its children have finished loading

I know we can do that in this way:

const WillFetchDataComponent = () => {
  const data = van.state({})
  const fetchData = async () => {
    const response = await fetch('...')
    data.val  = data
  }

  fetchData()

  return div('data from server', data)
}

But the DX will be really good if we support async component or Suspense.

Async component support version will be like:

const WillFetchDataComponent = async () => {
  const data =  await fetch('...')

  return div('data from server', data)
}

Suspense support version will be like:

const WillFetchDataComponent = () => {
  const data = fetch('...')

  return div('data from server', data)
}

Could you please give any suggestions.

PS: I'm happy to commit this and I'm trying to implement Suspense component now, but I got some problem.

[Tao-VanJS]

Update (2023-10-28): Await utility component was added to VanUI: https://vanjs.org/vanui#await for better support of UI components that depend on asynchronous data. Thanks @Hunter-Gu for the contribution!

---

In VanJS, UI components need to be declared synchronously. Async components make things much more complicated, especially when GC comes to play.

If your component depends on data that is fetched asynchronously, here is the pattern that you can use:

const data = van.state({})

const fetchData = async () => {
  data.val = {loading: true}
  const result = await fetch(...)
  data.val = {result}
}

const Component = () => div(
  () => data.val.loading ?
    <Render UI elements to indicate we're loading the data> :
    <Render UI elements based on `data.val.result`>
)

This sample app is built based on this pattern.

Hope it helps :-)

[Hunter-Gu]

Thank you for your answer @Tao-VanJS.

Async components make things much more complicated...

You are right! And I realize Suspense is not a good approach for VanJS because VanJS is almost vanilla Javascript totally, I should try to not introduce new concept into VanJS.

At the very start, I create this discussion is because when we need to use async in component, we always need to write some boilerplate code like this, especially when we have multiple async operations:

function Component() {
  const data = van.state({ loading: true })

  value.then((result) => {
    data.val = {
      value: result,
      loading: false
    }
  })

  return () => data.val.loading ? Render(loading...) : Render(result...)
}

But now I find it is really easy to make Await component in VanJS, this can reduce boilerplate code and can work with Promise operations painlessly:

function Await({ value, Loading, Error }, children) {
  const data = van.state({ status: 'pending' });

  value.then((result) => {
    data.val = {
      value: result,
      status: 'fulfilled'
    };
  }).catch(err => {
    data.val = {
      value: err,
      status: 'rejected'
    };
  });

  return () => data.val.status === 'pending' 
    ? Loading() 
    : data.val.status === 'fulfilled' 
      ? children(data.val.value) 
      : Error(data.val.value);
}

function Component() {
  const data1 = request(1000)
  const data2 = request(2000)
  const data = Promise.all([data1, data2])

  return Await(
    { value: data, 
      Loading: () => div(
        Await({
          value: data1, Loading: () => h2('🌀 Loading...')
        }, (value) => h2(value) ),
        Await({
          value: data2, Loading: () => h2('🌀 Loading...')
        }, (value) => h2(value) )
      ) 
    },
    () => h2('Done')
  )
}

[Tao-VanJS]

👍 Await looks like a great idea! If you want, it will be greatly appreciated to send a PR for adding Await as a utility component of VanUI.

[Hunter-Gu]

My pleasure, I will send a PR ASAP.