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 { 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

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

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

'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

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

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

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";

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