How to use hyperapp - 10 common examples

To help you get started, we’ve selected a few hyperapp examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github LearnHyperapp / hyperapp-recipes / logger.js View on Github external
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);
github pedrouid / hyperapp-boilerplate / src / app.js View on Github external
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);
github kwasniew / hyperapp-realworld-example-app / src / app.js View on Github external
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 };
}
github frenzzy / minesweeper / src / index.js View on Github external
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)
github lukejacksonn / hyperapp-firebase-auth / src / form.js View on Github external
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)
  )),
])
github kewitz / dat-medium / app / app.js View on Github external
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()
github os-js / osjs-gui / src / components / Panes.js View on Github external
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));
};
github soenkekluth / hyperapp-example / bundle.js View on Github external
const Button = ({ label, action, disabled = false }) => h(
  'button',
  { onclick: action, disabled: disabled },
  label
);
github loteoo / hyperstatic / src / Lifecycle.js View on Github external
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
  )
}
github fejes713 / accessibility-guide / website / js / components / Markdown.js View on Github external
export default ({ node = "div", content, ...props }) =>
  h(node, {
    ...props,
    oncreate: setInnerHTML(memoMarked(content))
  });

hyperapp

The tiny framework for building hypertext applications.

MIT
Latest version published 3 years ago

Package Health Score

60 / 100
Full package analysis

Popular hyperapp functions