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

import { html } from 'path/to/html'
import { app } from 'hyperapp#2'

// define any html tag
const { div, span } = html

// following syntax is supported
// tag(attrs)
// tag([child])
// tag(attrs, [child])

sergey-shpak

// Simple task and this is how it should be done initially,
// btw, I can imagine there are many possible improvements,
// like counting only to half of a number, etc

const isPrimeNumber = (
  number,
  counter = Math.round(number/2)+1
) => counter >= 2 && new Array(counter)
  .fill(0, 2).every((i, idx) => number % idx !== 0)

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

/*

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

import { h } from 'hyperapp'
import Lifecycle, { withChildLifeCycle } from 'lifecycle'

// 'customEvent.detail' contains element triggered lifecycle event
// please use effects to properly manipulate dom element
const action = (state, customEvent) => state

// and somewhere 
<Lifecycle>
  <div oncreated={ action }>created</div>

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

// Hyperapp#2 Helmet Component 

// This is based on Hyperapp Portal helper and Lifecycle events helper
// https://gist.github.com/sergey-shpak/88962fdb4002d9a77d315ee9769e6efb
// https://gist.github.com/sergey-shpak/c1e0db3d52019eecb0b5717e8cbf00ad

const Portal = target => (props, child) =>
  h('source', { // <- any non-space element
    appendChild: target.appendChild.bind(target),
    removeChild: target.removeChild.bind(target)

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

/*
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))