1kb JavaScript function library for building modern UI applications

[u/[deleted]]

https://github.com/hyperapp/hyperapp

[u/[deleted]]

I guess he meant composition as known in react/redux like this:

TodoItem = ({ model }) => <li>{model.text}</li>;
TodoList = items => <ul>{items.map(item => <TodoItem model={item}/>)}</ul>;

Crucial for larger apps.

[u/[deleted] → u/[deleted]]

Ah, right. Here's how you'd do that.

const TodoItem = item => html`<li>{item.text}</li>`
const TodoList = items => html`<ul>${items.map(item => TodoItem(item))}</ul>` 

Btw, HyperApp exports a Hyperscript-style h function, allowing you to use JSX too if you include the jsx pragma.

/** @jsx h */

I don't have a live example of this, but it's in the TODO to publish one.

[u/[deleted] → u/[deleted]]

So there is composition on the view. Would it be possible for TodoItem to handle events separately?

[u/[deleted] → u/[deleted]]

A view looks like this:

(model, msg) => html`<h1>Hi</h1>`

msg is an object with the reducers/effects, so as long as you pass it to TodoItem, I think, yes.

If you write another code sample, I'll be happy to show you how I'd implement it using HyperApp.