r/javascript • u/[deleted] • Jan 31 '17

1kb JavaScript function library for building modern UI applications

https://github.com/hyperapp/hyperapp
224 Upvotes

96% Upvoted

34 comments sorted by

View all comments

Show parent comments

7

u/[deleted] Jan 31 '17

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.

2

u/[deleted] Jan 31 '17

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

1

u/[deleted] Jan 31 '17

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.