#ThingUmbrella #ReleaseFriday[1] 
— As announced a couple of weeks ago, a lot of my recent work has been centered around async iterables and addressing the conceptual overlap between the various packages related to those, specifically: https://thi.ng/transducers-async, https://thi.ng/rstream, https://thi.ng/csp, https://thi.ng/fibers, and partially related, https://thi.ng/rdom too. Apart from the first package, until recently, none of the others had direct support for async iterables (largely for historic reasons), but they all offer similar operators & functionality (via different means), which I'm slowly consolidating where it makes sense...
Part of this pretty large undertaking has been a complete rewrite of the temporarily deprecated https://thi.ng/csp package for Communicating Sequential Processes[2] (IMHO one of the most elegant & sane ways to structure larger apps via multiple small, reasonable concurrent processes). The package is active again now (as v3+) albeit constituting a new API (new docs still WIP) and removing any direct transducer-related functionality — this is one aspect of the aforementioned consolidation and now simply assumed to be delegated to the https://thi.ng/transducers-async and/or non-async https://thi.ng/transducers packages. I've also included a new small example project showing mixed usage patterns of working with CSP channels and combining them with (async) transducers to create derived views:
Demo:
https://demo.thi.ng/umbrella/csp-bus/
Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/csp-bus/src/events.ts
Hand in hand with these major changes are smaller and still ongoing updates to https://thi.ng/rdom, which recently received partial support for embedded async iterables as reactive values inside a UI/DOM component tree. The goal for this package is to become fully decoupled from https://thi.ng/rstream and focus more on the equally powerful, but more lightweight (since part of the language) async iterables. Adapters from rstream → asynciter already exists (see docs).
Unrelated, but also part of this week's release: The new version of https://thi.ng/meta-css includes support for CSS `light-dark()`. The base framework now includes ~950 utilities & 70 functions. See readme for full list...
Happy coding! :)
[1] There're actually a lot more frequent release, but these days I'm only mentioning the more notable ones to not spam everyone...
[2] https://en.wikipedia.org/wiki/Communicating_sequential_processes
Kitten HTML templates and kitten.Component render functions can now be async.
![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>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "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>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
