multiple `app()`s / component approach / return dom

So, it is just amazing lib. A was working on some idea like that, code name mitak ;d Based on events with just router, pub/sub system. For now it is 450bytes gzip. But yea, anyway.

So the problem of return nothing just bumped while I tried to make a Todo List in components way.

So lets get started. We have 3 app()s - TodoItem, TodoList and main.

• main - main entry, place for header & footer for example
• TodoItem - component for each todo, e.g. <li></li>
• TodoList - component holding all TodoItems, actions and view which is just like <ul>TodoItem()</ul>

main

const { app, html } = require('hyperapp')

const main = app({
  // root: document.body,
  model: {
    title: 'Todo List Example',
    link: 'https://github.com/hyperapp/hyperapp'
  },
  view: (state) => html`<main id="HyperApp">
    <h1>${state.title}</h1>
    ${TodoList()}
    <footer>Powered by <a data-no-routing href="${state.link}">HyperApp</a></footer>
  </main>`
})

TodoList

const TodoList = () => app({
  model: {
    todos: [],
    count: 0,
    input: '',
    placeholder: 'Add new todo'
  },
  update: {
    toggle: (state, data) => ({
      todos: state.todos.map((item) => {
        return data.id === item.id
          ? Object.assign({}, item, { done: !data.done })
          : item
      })
    }),
    remove: (state, data) => ({
      todos: state.todos.map((todo) => todo.id !== data.id)
    }),
    add: (state) => ({
      todos: state.todos.concat({
        id: state.count++,
        done: false,
        text: state.input
      })
    }),
    input: (state, data) => ({ input: data.value })
  },
  view: (state, action) => html`<section>
    <ul>${state.todos.map((item) => TodoItem(item, action))}</ul>
    <p>
      <input
        class="add"
        type="text"
        onkeyup=${e => e.keyCode === 13 ? action.add() : ''}
        oninput=${e => action.input({ value: e.target.value })}
        placeholder=${state.placeholder}
      />
      <button onclick=${action.add}>add</button>
    </p>
  </section>`
})

TodoItem

const TodoItem = (state, actions) => app({
  model: state,
  update: actions,
  view: (item, action) => html`<li onclick=${e => action.toggle(item)}>${item.text}</li>`
})

All is okey, but it adds Todo to DOM body two times

Passing opts.root seems to not deal with that problem.

The only thing that I changed to the core source code, is to return node from app function.

[jorgebucaran]

@tunnckoCore @tzellman @evgenykochetkov Here’s a TodoMVC implementation using HyperApp.

• https://hyperapp-todomvc.gomix.me/

[evgenykochetkov]

Oh, sorry, I was not aware of discussion on reddit.

edit: I think I found it. Very interesting, thank you!