Skip to content

Instantly share code, notes, and snippets.

Avatar

Sergey sergey-shpak

  • Kyiv, Ukraine
View GitHub Profile
@sergey-shpak
sergey-shpak / example.js
Last active Oct 1, 2020
Hyperapp#2 Html factory
View example.js
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
sergey-shpak / Helmet.js
Created Oct 18, 2019
Hyperapp#2 Helmet Component
View Helmet.js
// 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
sergey-shpak / request.es5-style.js
Last active Aug 24, 2019
Abortable fetch (js fetch abort / cancel fetch / stop request )
View request.es5-style.js
/*
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
sergey-shpak / example.js
Created Jul 10, 2019
Hyperapp#2 immutable state
View example.js
'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
sergey-shpak / example.js
Created Jun 29, 2019
Hyperapp#2 lifecycle events helper
View example.js
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
sergey-shpak / example.js
Created Jun 13, 2019
Hyperapp#2 dispatch logger
View example.js
import { h, app } from 'hyperapp'
import { logger } from 'helpers/logger'
const init = () => ({ initalized: true })
app({ init }, logger(process.env.NODE_ENV==='development'))
@sergey-shpak
sergey-shpak / Example.js
Created Jun 12, 2019
Hyperapp#2 Lifecycle HOC
View Example.js
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
sergey-shpak / context.js
Created Jan 3, 2019
Hyperapp#v2 Context Implementation
View context.js
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
sergey-shpak / Portal.js
Created Dec 28, 2018
Hyperapp #v2 Portal Component (Experimental)
View Portal.js
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
*/
View hyperapp-stateful-component-example.js
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
You can’t perform that action at this time.