HyperappWebComponent

Hyperapp support for Web Components
 

Syntax:

componentApp(
  componentName,     // component name 
  elem => { 
    init?,           // passed to hyperApp
    style?,          // component stylesheet 
    view,            // passed to hyperApp
    subscriptions?,  // passed to hyperApp 
    dispatch?,       // passed to hyperApp 
    externalState?,  // state transform for the `onStateChange` event 
    methods?,        // element methods 
    properties?,     // element properties 
    cloneCSS?        // boolean for cloning host CSS
  }
)

 

Usage:

import componentApp from "https://cdn.skypack.dev/hyperappwebcomponent"

HyperappWebComponent provides four mechanisms for communicating between the host and the component:
 

State change notification

Here the component notifies the host whenever it's state changes. If externalState is provided, the component will invoke it on the state before attaching it to the event detail property:

componentApp('counter-', elem => {
  return {
    init: { counter: 0},
    style: `button { color: red !important; }`,
    view: s => html`
      <div class="counter">
        <h1>${s.counter}</h1>
        <button onclick=${s => ({ ...s, counter: s.counter + 1 }}>+</button>
      </div>`,
    externalState: s => ({ counterValue: s.counter }),
  }
})

componentApp('game-', elem => {
  const CounterStateChange = (s, ev) => ({...s, counterValue: ev.detail.counterValue})

  return {
    init: { counterValue: 0 },
    view: state => html`<counter- onstateChange=${CounterStateChange} />`, 
  }
})

game recieves a notification on a counter state change and here merges that state into it's own.

externalState allows the component to only expose a part or a modified version of it's state to the outside. If omitted it defaults to s=>s. To prevent exposing the state use s=>undefined

ev.srcElement contains the source component
 

Trigger a host event

Here the component triggers a host event using an Effect:

componentApp('game-', elem => {
  const CounterStateChange = (s, ev) => [ 
    { ...s, counterValue: ev.detail.counterValue },
    ev.detail.counterValue==10 && elem.events.finish.effect
  ]
  
  return {
    init: { counterValue: 0 },
    view: s => html`<counter- onstateChange=${CounterStateChange} />`, 
  }
})


componentApp('flow-', elem => {
  return {  
    init: { mode: 'start' },
    view: s => html`<game- onfinish=${s => ({ ...s, mode: 'finish' }} />`
  }
})

elem.events.finish.effect triggers the finish event on the host (with a payload if provided) when counterValue reaches 10
 

Invoke a compenent's method

Here the host invoke a method on the component:

componentApp('score-', elem => {
  return {
    init: { count: 0 },
    view: s => html`${s.count}`, 
    methods: {
      addPoint: s => ({ ...s, count: s.count + 1 }), 
    },
  }
})

componentApp('flow-', elem => {
  const getSubComponent = name => elem.shadowRoot.querySelector(name);
  
  const Action = s => {
    const score = getSubComponent('score-');
    return [ s, score && (dispatch => score.addPoint()) ];    
  }
  
  return {  
    view: s => html`
      <score- />
      <button onclick=${Action}></button>`     
  }
})

Action invokes score's method addPoint dispatching the attached action.
Note the check for score is not necessary here, but in actions triggered from init the element does not exist yet.
 

Change a component's property

componentApp('score-', elem => {
  init: { scoreCount: 0 },
  view: s => html`${s.scoreCount}`, 
  properties: {
    counter: (s, v) => ({...s, scoreCount: Number(v) })
  }
})

componentApp('flow-', elem => { 
  init: { flowCount: 0 },
  view: s => html`
    <score- counter=${s.flowCount}/>
    <button onclick=${s => ({...s, flowCount: flowCount+1 })}></button>`     
})

Every time the button is clicked, score's property counter changes trigerring the attached action in score.
 

Full example

flems