Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Sergey sergey-shpak

🏠
Working from home
Block or report user

Report or block sergey-shpak

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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
@sergey-shpak
sergey-shpak / compose.js
Last active Jan 10, 2019
Hyperapp#v2 actions composition
View compose.js
/*
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
sergey-shpak / computed.js
Last active Dec 28, 2018
Hyperapp V2 computed properties
View computed.js
/*
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*
You can’t perform that action at this time.