This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Screenshot of the functional components version (first screenshot) running in the browser. The page has a large title “Async components are fun!” Under that is the slotted content: “Oh, isn’t this nice?” with “nice?” in boldface. Under that is a smaller heading “Fediverse posts” followed by a list of three posts accompanied by avatar images. The first one is by me (“The only legitimate use of privilege is to help bring about the kind of world where you would not have had it to begin with. #privilege”), the second by Laura Kalbag (“Here’s to 38…”) and the last is by Lydia Conwell (”Can #FrancescaAlbanese be Prime Minister now?)