New Kitten Release 🥳

https://kitten.small-web.org

(Run `kitten update` to update your dev machines. Production machines will automatically update in a couple of hours.)

• You can now add a generic script block to your markdown pages (see https://mastodon.ar.al/@aral/114432417394114105)

• Markdown pages can now be `KittenPage` instances and attach `KittenComponent` instances (so you get a full server-side component hierarchy with an event-based workflow; ideal for authenticated pages where you can be use only the author of the page will be accessing them and thus the additional memory and processing overhead are not issues. Isn’t the Small Web great? Only having instances of one makes it possible to optimise so many things for the human experience instead of vertical scale of the data farming machine.)

• Two new examples showcase the new features: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/markdown-script-simple-components and https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/markdown-kitten-components

• Attributes with object values are no longer serialised into the DOM (but your components’ render functions will continue to receive them, of course.) This is because only string values make sense for attributes in the context of the HTML DOM. (You can still, of course, have stringified representations of objects in attributes, as used by the `data` attribute to pass data from nodes to event handers on the server.)

#Kitten #SmallWeb #SmallTech #kittenRelease #markdown #scripting #OOP #eventModel #web #dev

New Kitten update

https://kitten.small-web.org

• Added `remove()` method to kitten.Component class. Use this when working with live pages and components and you want to remove a component from the page (or its parent). It will handle removing event listeners for you so you don’t end up with any memory leaks.

• Improved `update()` method so it similarly removes listeners on child components before updating the component itself in case you have class-based child components that will be reinstantiated on render.

• Updated the `send()` methods on `page.everyone` and `page.everyoneElse` so you can pass a swap target to insert the element being streamed to the page before, after, asFirstChildOf, or asLastChildOf another. (This was already there for the page.send() but now the two broadcast objects have the same consistent interface.

The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.

(Remember that the new class and event-based page and component model is still experimental and largely undocumented and fully backwards compatible with the classic functional way of authoring your page routes and components.)

Enjoy!

:kitten:💕

#Kitten #SmallWeb #SmallTech #OOP #eventModel #StreamingHTML #hypermedia #WebSockets #htmx #NodeJS #Javascript #HTML #CSS #web #dev

A quick demonstration of using the State: Overview page in Kitten’s¹ settings while developing to keep an eye on your event and event listener counts to avoid memory leaks.

Notice how the events and listeners counts change as I navigate between the People and Settings pages in my Place² node and that they are consistent. If they were rising as I navigated back and forth I’d know I had a memory leak somewhere.

If you use Kitten’s built-in features (e.g., the `addEventHandler()` method on your `kitten.Component` subclasses, Kitten will handle adding and removing listeners for you automatically during your component’s lifecycle. You can also do so manually in your component’s automatically-called `onConnect()` and `onDisconnect()` event handlers.

This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.

https://vimeo.com/1050714714

¹ https://kitten.small-web.org
² Place is in early development at the moment (https://codeberg.org/place/app)

#Kitten #SmallWeb #SmallTech #demo #developerExperience #developerTools #design #eventModel #events #memory #memoryLeaks #observerPattern #listeners #web #dev #HTML #CSS #JavaScript #NodeJS #server #platform #framework #WebSockets #hypermedia #htmx #StreamingHTML #place #peerToPeer #peerToPeerWeb

New Kitten¹ update

Experimental:

• Adds `data` property to Kitten components

• Adds swap target to `page.send` so you can have an element added before, after, as first child of, or as last child of another (this is syntactic sugar over htmx and works around some of the complexities with out-of-band swaps in htmx, especially when streaming table rows to tables).

Also, check out the latest live page and page events state view in Kitten’s Settings (every Kitten app has this settings view).

https://vimeo.com/1050348456

¹ https://kitten.small-web.org

#Kitten #SmallWeb #OOP #eventModel #StreamingHTML #liveComponents #WebSocket #RPC #SmallTech #web #dev #framework #server #platform