Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Aral Balkan
Aral Balkan
@aral@mastodon.ar.al  路  activity timestamp 12 hours ago

馃コ New Kitten Release

This one fixes a bug that you would have encountered had you had an asynchronous component (component with asynchronous render method) nested more than one-level deep within synchronous components.

(Kitten鈥檚 html renderer transparently supports both synchronous and asynchronous render methods.)

So, this (taken from my unit test), for example, works correctly now:

```js
class AsynchronousOtherName extends KittenComponent {
async html () {
await new Promise(resolve => setTimeout(resolve, 10))
return kitten.html`<i>Balkan</i>`
}
}

class SynchronousName extends KittenComponent {
/* NOT async */ html () {
return kitten.html`<strong>Aral</strong> <${AsynchronousOtherName.connectedTo(this)} />`
}
}

class SynchronousTemplate extends KittenComponent {
html ({ SLOT }) {
return kitten.html`[Before slot]${SLOT}[After slot]`
}
}

class MyPage extends KittenPage {
html () {
return kitten.html`
<${SynchronousTemplate.connectedTo(this)}>
<h1>This should render all at once after a short delay.</h1>
<p>Hello, <${SynchronousName.connectedTo(this)} /></p>
</>
`
}
}
```

Enjoy!

kitten馃挄

https://kitten.small-web.org

#Kitten #KittenReleases #SmallWeb #SmallTech #web #dev #JavaScript #NodeJS #async #render

  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.2-alpha.34 no JS en
Automatic federation enabled
Log in
Instance logo
  • Explore
  • About
  • Members
  • Code of Conduct