How to use hyperapp - 10 common examples

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

const view = (state, actions) =>
  // logs the state before each render
  console.log(state) && (
    <main>
      <h1>{state.count}</h1>
      <button>-</button>
      <button>+</button>
    </main>
  );

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

import { h, app } from 'hyperapp'; // eslint-disable-line
import home from './pages/home';
import { INITIAL_STATE, actions } from './actions';
import './index.css';

app(INITIAL_STATE, actions, home, document.body);

const initState = set(userLens, sessionRepository.load(), DEFAULT_STATE);

  const actions = {
    location: locationModule.actions,
    ...editorActions,
    ...articleActions,
    ...settingsActions,
    ...authActions,
    ...articlesActions,
    ...profileActions,
    ...sharedActions,
    ...routerActions
  };

  // const main = withLogger(app)(initState, actions, view, document.body)
  const main = app(initState, actions, view, document.body);

  const unsubscribe = locationModule.subscribe(main.location);
  addEventListener("popstate", () => main.setRoute(location.pathname));
  main.loadPage(location.pathname);
  sessionRepository.onChange(main.setUser);

  return { main, unsubscribe };
}

import { app } from 'hyperapp'
import { state, actions, view } from './app'

window.app = app(state, actions, view, document.getElementById('app'))

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

// Enable hot module replacement
// https://webpack.js.org/concepts/hot-module-replacement/
if (module.hot) {
  let prevState = state
  module.hot.accept('./app', () => {
    const prevApp = window.app
    const currState = prevApp.getState()
    prevApp.destroy()
    const prevContainer = document.getElementById('app')
    const nextContainer = prevContainer.cloneNode(false)
    prevContainer.parentNode.appendChild(nextContainer)

promptText = 'Please fill out and submit the form below',
  submitText = 'Submit',
  inputs = [{ name: 'lorem', type: 'text', placeholder: 'Example Input' }],
  action = data => console.log('Submitted', data),
  errorText = '',
  links = []
}) =>
h('form', {
  key,
  oncreate: e => e.elements[0].focus(),
  onsubmit: e => {
    e.preventDefault()
    return action(parseFormInputs(e.target))
  }
},[
  h('header', {}, [
    h('h3', {}, titleText),
    h('p', {}, promptText),
  ]),
  inputs.map(props => h('label', { style: { display: props.type === 'hidden' ? 'none' : false }}, h('input', props))),
  errorText && h('error-', {}, errorText),
  h('button', { type: 'submit' }, submitText),
  h('footer', {}, links.map(x =>
    h('a', { href: '#', onclick: e => e.preventDefault() || x.action() }, x.text)
  )),
])

import { app } from 'hyperapp'
import actions from 'actions'
import state from 'state'
import view from 'view'

import 'style/style.css'

app({ state, view, actions }).init()

const view = (state, actions) => (props, children) => {
  const orientation = props.orientation || 'vertical';

  return h(Element, {
    orientation,
    class: 'osjs-gui-panes-inner'
  }, panes(state, actions, children, orientation));
};

const Button = ({ label, action, disabled = false }) => h(
  'button',
  { onclick: action, disabled: disabled },
  label
);

export const Lifecycle = (elementName, props, children) => {
  const fn = (method, eventName) => function (el) {
    const event = new CustomEvent(eventName, { detail: el })
    setTimeout(() => el.parentElement.dispatchEvent(event))
    return Object.getPrototypeOf(this)[method].call(this, el)
  }
  return h(
    elementName,
    {
      appendChild: fn('appendChild', 'create'),
      removeChild: fn('removeChild', 'remove'),
      ...props
    },
    children
  )
}

export default ({ node = "div", content, ...props }) =>
  h(node, {
    ...props,
    oncreate: setInnerHTML(memoMarked(content))
  });