const BasicLayoutTemplate = async ({ title, SLOT }) => { const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3) return kitten.html` <main> <page css> <h1>${title}</h1> ${SLOT} <h2>Fediverse posts</h2> <ul> ${posts.map(post => kitten.html` <li><img src='${post.account.avatar}'> ${[post.content]}</li> `)} </ul> <style> li { display: flex; gap: 1em; margin-bottom: 1em; } img { width: 5em; height: auto; } </style> </main> ` } export default async () => await kitten.html` <${BasicLayoutTemplate} title='Async components are fun!'> <markdown> Oh, isn’t this __nice?__ </markdown> </> `

Notices where this attachment appears

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 01-Apr-2025 05:00:03 JST Aral Balkan

   New Kitten update

   • 🥳 Kitten HTML templates and kitten.Component component render functions can now be async.

   https://kitten.small-web.org

   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.

   Enjoy!

   :kitten:💕

   #Kitten #SmallWeb #async #components #templates #HTML #CSS #JavaScript #NodeJS #generators #web #dev