Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

261
active users

shakedown.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

#eventdriven

0 posts0 participants0 posts today
Public *
Aral Balkan

Pretty soon, you’re going to be able to view your live pages and the events on them in real time while developing Kitten apps.

The improved component model with support for class-based routes (and a server-side component hiearchy that lets you build well-encapsulated components and pages and work in an event-driven way) is coming along nicely and I’m back to writing Place¹ using it.

(In the GIF, you’re looking at Place’s profile settings page. Not shown here but those profile changes reflect in realtime on all open pages. The highlighted piece of code is what streams the event details to the browser.)

¹ codeberg.org/place/app

GIF
Screenshot of code. The showPageEvent method is highlighted. onAddToPage () { this.addEventHandler(kitten.events, `kittenPageEvent-${this._page.id}`, this.showPageEvent) } /** Stream new page event details to top of the events list, hiding the placeholder if necessary. @param {{ name: string, data: {HEADERS: any} }} event */ showPageEvent (event) { delete event.data.HEADERS // Hide placeholder if necessary. if (this.placeHolderIsVisible) { this.page.send(kitten.html` <tr id='placeholder-${this.id}' swap-target='delete'> `) this.placeHolderIsVisible = false } // Send the new event row with event details. this.page.send(kitten.html` <tbody id=${this.id} swap-target='afterend:#${this.id}'> <tr> <td>${event.name}</td> <td>${util.inspect(event.data)}</td> </tr> </tbody> `) } } class Pages extends kitten.Component { html() { // We could just display a “loading” message here // as we’re going to refresh the list at onConnect(), // but given how fast it all happens, we might was well // send the whole list instead of having an odd flash. const pages = Object.values(kitten.pages)
#Kitten#StreamingHTML#SmallWeb
Public
Aral Balkan

Feeling more like myself today after getting my ass kicked by this bug for the past few weeks and I’m finally making progress on improving Kitten’s¹ component model.

Soon, you’ll be able to implement page event handlers in an even simpler way than before. Is your connected DOM element named `pixel`? Then export an event handler called `onPixel()` on your page route and it’ll get called when that element triggers its event.

And there’s so much more coming, including a class-based page and component model with DOM-style event bubbling on the server. This should really let you make the most of the Streaming HTML² workflow in Kitten by writing event-driven GUI-like code but for a web app without really caring about the client/server separation.

Need to update the examples, test, test, test, and update docs but this had me stumped for a while now with several false starts and I feel this implementation might just be it 🤞

:kitten: 💕

¹ kitten.small-web.org
² kitten.small-web.org/tutorials

Screenshot of code. Highlighted section: /** @param {Data} data */ const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1 /** @param {Data} data */ export function onPixel (data) { if (!isValid(data)) return rows[data.rowIndex][data.columnIndex]++ if (rows[data.rowIndex][data.columnIndex] === colours.length) { rows[data.rowIndex][data.columnIndex] = 0 } this.everyone.send(kitten.html` <${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} /> `) } const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) => kitten.html` <button id='pixel-${rowIndex}-${columnIndex}' aria-label='pixel-${rowIndex}-${columnIndex}' name='pixel' style='
#Kitten#SmallWeb#hypermedia
ExploreLive feeds
About