sergey-shpak

import { app, h } from "hyperapp";
import { Stateful } from './helpers'

/* Working example, https://codepen.io/sergey-shpak/pen/maMopd */ 

// --- STATEFUL COMPONENT --- 

// Don't use arrow functions for stateful components/actions
// Since context is linked to it's definition context

sergey-shpak

/*

Implements actions composition for Hyperapp#v2

Usage examples:

const actionA = state => ({ property: 'A' })
const actionB = state => ({ property: state.property + 'B' })

const composition = compose(actionA, actionB)

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*

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

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 { app, h } from 'hyperapp'; // V2

// DOM Effect
// Observer Implementation
// Will be moved to subscriptions package
const find = (query, nodes, cb) => nodes.forEach(node => {
  if(node.nodeType !== 1 ) return
  if(Object.keys(query).every(key => node.getAttribute(key) === query[key]))
    return cb(node)
  else if(node.childNodes.length)

sergey-shpak

const { exec } = require('child_process');

// Compile 'git log' command
const command = params =>
  `git log --pretty=format:"
    ${params.join(command.format.param)}
    ${command.format.line}"`;

const hash = 451436388.16325235; //Math.random()*10e8;
command.format = {

sergey-shpak

import { h } from 'hyperapp';

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