sergey-shpak

It's more preferable to use lens.js or squirrel.js

---

Hyperapp#v2 doesn't have slices/namespaces anymore, so whenever you are working with deeply nested state you have to merge all parents each time:

sergey-shpak

import { h } from "hyperapp";

/*
This is implementation of Hyperapp#v2 Portal component
Portal component renders children into a DOM node 
that exists outside the DOM hierarchy of the parent component

IMPORTANT! It's not recommended approach to use 
unless you really know what you're doing
*/

sergey-shpak

import { h } from 'hyperapp'

/*

This is implementation of Hyperapp#v2 Context

Helpful when you want to pass properties to internal components
without multiple components compositions

*/

sergey-shpak

import { h } from 'hyperapp';

export default (props) => {
  const {
    src: {
      icon: [
        iconWidth,
        iconHeight,
        , ,
        iconPath,

sergey-shpak

/*

This is variation of `squirrel` and `namespace` approaches
https://gist.github.com/zaceno/0d7c62be81a845857e755c1378b7dbff
https://gist.github.com/sergey-shpak/5817bf146cb970bc4e259aef71b89ef4

Simplifies Hyperapp#v2 actions work with deeply nested state
(updated to support returned actions, parameterized actions)

Usage examples:

sergey-shpak

import { h, app } from 'hyperapp'
import { logger } from 'helpers/logger'

const init = () => ({ initalized: true })
app({ init }, logger(process.env.NODE_ENV==='development'))

sergey-shpak

const {h, app} = hyperapp // @jsx h

// Effect for element side-effects
const fx = a => (...b) => [a, b]
const withElement = fx((dispatch, [element, props], action) => {
  Object.keys(props).map(k => props[k] && element[k]())
  action && dispatch(action)
})

// Decoder to get 'event.detail'

sergey-shpak

'use strict' // Strict mode to throw mutation errors
import { h, app } from 'hyperapp'
import { immutable } from 'helpers'

// action that is trying to mutate the state
// will throw error for any mutation
const onclick = state => {
  ++state.counter
  return state
}

sergey-shpak

/*
As you may know fetch requests can be aborted only with AbortController
https://developer.mozilla.org/ru/docs/Web/API/AbortController
The 'request helper' is exposing abort method into promise, 
allowing aborting from outside of the promise, for example:
```
import { request } from 'helpers'
request('https://some/path')
  .then(response => response.json())
  .catch(e => console.log(e))

sergey-shpak

/*

Implements computed properties for Hyperapp#v2

It's not recomended approach to use 
unless you really know what you're doing

Usage examples:

// action is triggered whenever state.property updated*