Aral Balkan @aral

Recent searches

Search options

Only available when logged in.

**Aral Balkan** @aral · Jan 30, 2024 *

Jan 30, 2024 *

Aral Balkan @aral

Very excited about the latest feature/workflow I’m adding to Kitten. I call it…

Streaming HTML

Implement back-end functionality and stream HTML updates to the client without writing any front-end JavaScript.

Just give your forms names and listen for them in an onConnect() handler you export from your page. Kitten handles everything else – setting up a WebSocket route for you, mapping triggers to events, etc. – thanks to Kitten + #htmx magic

Screenshot of Helix Editor showing the contents of index.page.js.

The highlighted area is in an exported page route (`export default () => kitten.html`) inside a div:

<form name='add'>
<label for='postUrl'>Post link:</label>
<${PostLinkInput} />
<${AddButton} />
</form>

Full listing of source code visible in screenshot follows:

export default () => kitten.html`
<page water>
<markdown>
# Streamiverse settings

Browse and curate your stream.

## Add to stream
</markdown>

<div>
<form name='add'>
<label for='postUrl'>Post link:</label>
<${PostLinkInput} />
<${AddButton} />
</form>

<details id='hint'>
<summary>Help</summary>
<p>Copy the post link from the context menu on the date of the post.</p>
<img class='thumb' src='./copy-link.png' alt='Screenshot of Mastodon interface showing the context menu open on a post’s link with the Copy Link option showing.'>
</details>

<markdown>
## View and remove posts
</markdown>

<form name='remove'>
<${PostsList}>
${kitten.db.posts.map(post => kitten.html`<${Post} post=${post} showRemoveButton />`)}
</>
</form>
</div>

<style>
label { display: block; }
input, button {
display: inline-block;
}
input {
width: 42ch;
}
ul {
padding: 0;
}

$Screenshot of code: Highlighted code is inside exported function onConnect (_request, and page): page.on('add', async data => { // Show status update. page.send(kitten.html`<${AddButton} busy/>`) // Calculate the status API URL and fetch the post. const postUrl = new URL(data.postUrl) const fediverseServer = postUrl.origin const postId = postUrl.pathname.substring(postUrl.pathname.lastIndexOf('/') + 1) const statusApiUrl = `${fediverseServer}/api/v1/statuses/${postId}` const post = await (await fetch(statusApiUrl)).json() // Persist the post. kitten.db.posts.push(post) // Clear URL input (replace it with a fresh one). page.send(kitten.html`<${PostLinkInput} />`) // Re-enable the Add button. page.send(kitten.html`<${AddButton} />`) // Show the new post at the top of the list. page.send(kitten.html` <${PostsList}> <${Post} post=${post} showRemoveButton /> </> `) Above onConnect handler is a comment: When an onConnect() handler is exported from a page, Kitten automatically creates a WebSocket route and wires it up to call the handler with a page (PageSocket instance). When an HTMX request is triggered, Kitten maps the name of the triggering DOM element to an event handler for the event with the same name that you listen for on that page reference. As you are handling the workload of a call on the server, you can stream updates to the page by sending snippets of HTML formatted using HTMX conventions.$

#Kitten #SmallWeb #StreamingHTML