Usage with Mithril.js

In this example, you must also import mithril into the page yourself before the wrapper.

The view method is generated by the state property. All other components methods are available. Ex: oninit, oncreate, etc.

TODO app sample

Example in action

<html>
  <head>
    <script src="https://unpkg.com/mithril/mithril.js"></script>
    <script type="module">
      import component from 'https://cdn.jsdelivr.net/gh/marcodpt/tint/mithril.js'

      const state = {
        todos: [],
        value: "",
        AddTodo: () => {
          state.todos.push(state.value)
          state.value = ""
        },
        NewValue: ev => {
          state.value = ev.target.value
        }
      }
      const todo = component(document.getElementById('view-todo'), {
        oninit: () => {
          console.log('component oninit')
        },
        state: state
      })

      m.mount(document.getElementById("app"), todo)
    </script>
  </head>
  <body>
    <main id="app">
      <div id="view-todo">
        <h1>To do list</h1>
        <input type="text" value:="value" oninput:="NewValue">
        <ul>
          <li each:="todos" text:></li>
        </ul>
        <button onclick:="AddTodo">New!</button>
      </div>
    </main>
  </body>
</html>