html hyperapp web组件

Posted 2021-05-10

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>body{margin:0;padding:0;}</style>
<script type="module">
document.addEventListener('touchmove',e=>e.preventDefault(),{passive:false})

import { h, app } from 'https://unpkg.com/hyperapp?module'

const state = {
  count: 0,
}

const actions = {
  increment: value => state => ({ count: state.count + value }),
  decrement: value => state => ({ count: state.count - value }),
  getState: () => state => state,
}

const view = (element) => (state, actions) =>
  h('div', {},
    h('style', {}, '*{touch-action:manipulation;}'),
    h('h1', output(element), state.count),
    h('button', decrement(actions), '-'),
    h('button', increment(actions), '+'),
  )

const updateEvent = new CustomEvent('update')

const output = (element) => ({
  onupdate: () => element.dispatchEvent(updateEvent)
})

const increment = ({increment}) => ({
  onclick: () => increment(1),
})

const decrement = ({decrement}) => ({
  onclick: () => decrement(1),
})

customElements.define('hyper-counter', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode:'open'})
    this.actions = app(state, actions, view(this), this.shadowRoot)
    this.actions.increment(+this.dataset.initCount || 0)
  }
})

app(null, null, () =>
  h('div', {},
    h('hyper-counter'),
    h('hyper-counter', {'data-init-count':100}),
    h('hyper-counter', {
      onupdate: e => console.log(e.target.actions.getState().count)
    }),
  )
, document.body)

</script>