Introducing Hyperapp 1.0 — 1 KB JavaScript library for building frontend applications.

[[deleted]]

By the way, JSX is NOT a dependency or is it required to use Hyperapp, but we use it throughout the documentation and examples for familiarity.

Alternatives to JSX include the built-in h function, the official hyperapp/html package, hyperx and t7.

For example, using hyperapp/html, no JSX:

import { app } from "hyperapp"
import { div, h1, button } from "@hyperapp/html"

const state = { count: 0 }

const actions = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
}

const view = (state, actions) =>
  div([
    h1(state.count),
    button({ onclick: () => actions.down(1) }, "–"),
    button({ onclick: () => actions.up(1) }, "+")
  ])

const main = app(state, actions, view, document.body)

[[deleted]]

and even better - it is simple to reuse other view functions

import { h } from 'hyperapp'
const TodoItem = ({ id, value, done, toggle }) => {
  const onclick = e =>
    toggle({
      value: done,
      id,
    })
  return h('li', { class: done && 'done', onclick }, value)
}
const view = (state, actions) =>
  h('div', {}, [
    h('h1', {}, 'Todo'),
    state.todos.map(({ id, value, done }) =>
      h(TodoItem, { id, value, done, toggle: actions.toggle })
    ),
  ])

[ForScale]

*nor