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)
https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/839/245/964/663/476/original/6986baff2900c6d1.png